/* ============================================
   Image Resizer - Modern Stylesheet
   Matching SURITD TOOLS design system
   Based on GIF Resizer layout
   ============================================ */

/* CSS Variables */
:root {
    --transition-speed: 0.25s;
    
    --primary: #3399cc;
    --primary-light: rgba(51, 153, 204, 0.15);
    --primary-dark: #1f78a8;
    --accent: #10B981;
    --success: #10B981;
    --success-light: #D1FAE5;
    --warning: #F59E0B;
    --danger: #EF4444;
    --danger-light: #FEE2E2;
    --high: #8B5CF6;
    --medium: #3B82F6;
    --fast: #10B981;
    
    --bg: #f8fafc;
    --bg-elevated: #ffffff;
    --bg-secondary: #f1f5f9;
    --text: #1e293b;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --border: #e2e8f0;
    --border-light: #f1f5f9;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.1);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1);
    
    --radius-sm: 6px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 9999px;
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.5);
    --processing-bg: #ffffff;
    
    /* Dynamic backgrounds */
    --upload-bg: #f8f8f8;
    --upload-hover-bg: #eff6ff;
    --selected-bg: rgba(51, 153, 204, 0.1);
    --summary-bg: #eff6ff;
    --highlight-bg: var(--success-light);
    
    /* Checkerboard */
    --checker-light: #f0f0f0;
    --checker-dark: transparent;

    /* Switches */
    --switch-off-bg: #cbd5e1;
    --switch-off-border: #94a3b8;
    --switch-knob-border: #cbd5e1;
}

/* Dark Mode */
[data-theme="dark"] {
    --primary: #4db8e8;
    --primary-light: rgba(77, 184, 232, 0.15);
    --primary-dark: #3399cc;
    --accent: #34d399;
    --success: #4ade80;
    --success-light: rgba(74, 222, 128, 0.15);
    --warning: #fbbf24;
    --danger: #f87171;
    --danger-light: rgba(248, 113, 113, 0.15);
    --high: #a78bfa;
    --medium: #60a5fa;
    --fast: #4ade80;
    
    --bg: #0f172a;
    --bg-elevated: #1e293b;
    --bg-secondary: #334155;
    --text: #f1f5f9;
    --text-secondary: #94a3b8;
    --text-muted: #64748b;
    --border: #334155;
    --border-light: #475569;
    
    --shadow-sm: 0 1px 3px rgba(0,0,0,0.3);
    --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.4);
    --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.4);
    --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.5);
    
    /* Overlay */
    --overlay-bg: rgba(0, 0, 0, 0.7);
    --processing-bg: #1e293b;
    
    /* Dynamic backgrounds */
    --upload-bg: var(--bg-secondary);
    --upload-hover-bg: rgba(96, 165, 250, 0.1);
    --selected-bg: rgba(96, 165, 250, 0.15);
    --summary-bg: rgba(96, 165, 250, 0.1);
    --highlight-bg: rgba(74, 222, 128, 0.15);
    
    /* Checkerboard */
    --checker-light: #374151;
    --checker-dark: transparent;

    /* Switches */
    --switch-off-bg: #475569;
    --switch-off-border: #64748b;
    --switch-knob-border: rgba(0, 0, 0, 0.2);
}

/* Base */
* {
    box-sizing: border-box;
}

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    background: var(--bg);
    color: var(--text);
    line-height: 1.6;
    margin: 0;
    padding: 0;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Container */
.tool-container {
    max-width: 1000px;
    margin: 0 auto;
    padding: 2rem;
}

/* Header */
.tool-header {
    text-align: center;
    margin-bottom: 2rem;
}

/* Title Row - Icon and Title on same line */
.tool-title-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.tool-icon-wrapper {
    width: 64px;
    height: 64px;
    background: var(--primary);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: var(--shadow-lg);
    flex-shrink: 0;
    transition: background-color var(--transition-speed), box-shadow var(--transition-speed);
}

.tool-icon-wrapper svg,
.tool-icon-wrapper i {
    width: 28px;
    height: 28px;
}

.tool-title {
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    font-weight: 700;
    margin: 0;
    color: var(--primary);
    letter-spacing: -0.02em;
    transition: color var(--transition-speed);
}

.tool-description {
    font-size: 1.15rem;
    color: var(--text-secondary);
    max-width: 800px;
    margin: 0 auto;
    line-height: 1.7;
}

/* Main Tool Area */
.tool-main {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed), box-shadow var(--transition-speed);
}

/* Upload Section */
.upload-area {
    border: 2px dashed var(--border);
    border-radius: var(--radius-lg);
    padding: 4rem 2rem;
    text-align: center;
    cursor: pointer;
    transition: all 0.3s ease;
    background: var(--upload-bg);
    position: relative;
    overflow: hidden;
}

.upload-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--primary-light);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.upload-area:hover,
.upload-area.dragover {
    border-color: var(--primary);
    background: var(--upload-hover-bg);
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
}

.upload-area:hover::before,
.upload-area.dragover::before {
    opacity: 1;
}

.upload-content {
    position: relative;
    z-index: 1;
}

.upload-icon {
    color: var(--primary);
    margin-bottom: 1.5rem;
    transition: transform 0.3s ease;
}

.upload-area:hover .upload-icon {
    transform: translateY(-5px);
}

.upload-title {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 0.5rem;
}

.upload-subtitle {
    color: var(--text-secondary);
    margin: 0 0 1rem;
    font-size: 1rem;
}

.upload-hint {
    display: inline-block;
    background: var(--bg-elevated);
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

/* File Type Badges */
.file-types {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1rem;
}

.file-type-badge {
    background: var(--primary-light);
    color: var(--primary);
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    transition: background-color var(--transition-speed), color var(--transition-speed);
}

/* Editor Section */
.editor-section {
    padding: 0;
}

/* File Info Bar */
.file-info-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 1.5rem;
    padding: 1.25rem 2rem;
    background: var(--bg-secondary);
    border-bottom: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.file-info-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.file-info-item svg,
.file-info-item i {
    color: var(--primary);
    flex-shrink: 0;
}

/* Editor Grid */
.editor-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

/* Panels */
.preview-panel,
.controls-panel {
    padding: 2rem;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.preview-panel {
    background: var(--bg-secondary);
    border-right: 1px solid var(--border);
}

.panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1.5rem;
}

.panel-header h3 {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.panel-header h3 svg,
.panel-header h3 i {
    color: var(--primary);
}

/* Preview Container */
.preview-container {
    position: relative;
}

.preview-wrapper {
    background: 
        linear-gradient(45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(-45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(45deg, var(--checker-dark) 75%, var(--checker-light) 75%),
        linear-gradient(-45deg, var(--checker-dark) 75%, var(--checker-light) 75%);
    background-size: 20px 20px;
    background-position: 0 0, 0 10px, 10px -10px, -10px 0px;
    border-radius: var(--radius-lg);
    padding: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    border: 1px solid var(--border);
    transition: border-color var(--transition-speed);
}

.preview-wrapper img {
    max-width: 100%;
    max-height: 300px;
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-lg);
    transition: transform 0.3s ease, opacity 0.2s ease;
    transform-origin: center center;
}

/* Live preview scale indicator */
.preview-wrapper {
    position: relative;
}

.preview-scale-indicator {
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.preview-wrapper:hover .preview-scale-indicator,
.preview-wrapper.scaling .preview-scale-indicator {
    opacity: 1;
}

/* Scaling animation states */
.preview-wrapper img.scale-down {
    transform: scale(var(--preview-scale, 1));
    opacity: 0.9;
}

.preview-wrapper img.scale-up {
    transform: scale(var(--preview-scale, 1));
    opacity: 0.9;
}

.preview-info {
    display: flex;
    justify-content: space-between;
    margin-top: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--text-secondary);
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

/* Resize Mode Tabs */
.resize-mode-tabs {
    display: flex;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
}

.mode-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.875rem 0.75rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 72px;
}

.mode-tab:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.mode-tab.active {
    border-color: var(--primary);
    border-width: 2px;
    background: var(--selected-bg);
    color: var(--primary);
}

.mode-tab svg,
.mode-tab i {
    flex-shrink: 0;
    width: 22px !important;
    height: 22px !important;
}

/* Resize Controls */
.resize-controls {
    margin-bottom: 1.5rem;
}

.control-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin-bottom: 1rem;
}

.control-group {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.control-group.full-width {
    width: 100%;
}

.control-group label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}

/* Input with Buttons */
.input-with-buttons {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.resize-input {
    flex: 1;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    font-size: 1rem;
    font-weight: 600;
    text-align: center;
    color: var(--text);
    background: var(--bg-elevated);
    transition: all 0.2s ease;
    min-width: 0;
}

.resize-input:focus {
    outline: none;
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.btn-adjust {
    width: 36px;
    height: 36px;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
    background: var(--primary-light);
    color: var(--primary);
}

.btn-adjust:hover {
    background: var(--primary);
    color: white;
    transform: scale(1.1);
}

.btn-adjust.small {
    width: 32px;
    height: 32px;
}

/* Percentage Slider */
.percentage-slider-wrapper {
    margin-bottom: 1rem;
}

.slider-input {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--border);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.slider-input::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-elevated);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--primary);
    transition: all 0.2s ease;
}

.slider-input::-webkit-slider-thumb:hover {
    transform: scale(1.15);
    box-shadow: 0 0 0 3px var(--primary-light);
}

.slider-input::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--primary);
    border: 2px solid var(--bg-elevated);
    cursor: pointer;
    box-shadow: 0 0 0 1px var(--primary);
}

.slider-labels {
    display: flex;
    justify-content: space-between;
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-muted);
}

.percentage-input-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.percentage-input-row .input-with-buttons {
    max-width: 180px;
}

.percentage-symbol {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Quick Select */
.quick-select {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.quick-label {
    font-size: 0.8rem;
    color: var(--text-muted);
    font-weight: 500;
}

.quick-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quick-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Dimension Presets */
.dimension-presets {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.quick-btn-dim {
    padding: 0.4rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.7rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn-dim:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quick-btn-dim.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

/* Checkbox Row */
.checkbox-row {
    margin-top: 1rem;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-size: 0.9rem;
    color: var(--text-secondary);
}

.checkbox-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary);
    cursor: pointer;
}

.checkbox-label svg,
.checkbox-label i {
    color: var(--primary);
}

.checkbox-custom {
    width: 18px;
    height: 18px;
    border: 2px solid var(--border);
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--primary);
    border-color: var(--primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
    margin-bottom: 2px;
}

/* Quality Section */
.quality-section {
    margin-bottom: 1.5rem;
}

.quality-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.quality-slider-wrapper {
    margin-bottom: 0.75rem;
}

.section-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.section-label svg,
.section-label i {
    color: var(--primary);
}

.quality-slider-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.75rem;
}

.quality-slider {
    flex: 1;
    background: var(--border);
}

.quality-value-display {
    min-width: 50px;
    text-align: center;
    font-weight: 700;
    font-size: 1rem;
    color: var(--primary);
    background: var(--primary-light);
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-md);
    transition: background-color var(--transition-speed);
}

.quality-presets {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.quality-btn {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quality-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quality-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.quality-btn i,
.quality-btn svg {
    width: 14px;
    height: 14px;
}

/* Format Section */
.format-section {
    margin-bottom: 1.5rem;
}

.format-section > label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
}

.format-section > label i,
.format-section > label svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
}

.format-options {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: 0.5rem;
}

.format-option {
    cursor: pointer;
    position: relative;
}

.format-option input[type="radio"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.format-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.75rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    transition: all 0.2s ease;
    text-align: center;
    min-height: 60px;
}

.format-card:hover {
    border-color: var(--primary);
    background: var(--selected-bg);
}

.format-card svg,
.format-card i {
    width: 20px;
    height: 20px;
    color: var(--text-muted);
    transition: color 0.2s ease;
}

.format-option input[type="radio"]:checked + .format-card {
    border-color: var(--primary);
    background: var(--selected-bg);
    box-shadow: 0 0 0 3px rgba(51, 153, 204, 0.15);
}

.format-option input[type="radio"]:checked + .format-card svg,
.format-option input[type="radio"]:checked + .format-card i {
    color: var(--primary);
}

.format-name {
    font-weight: 600;
    color: var(--text);
    font-size: 0.85rem;
    line-height: 1.2;
}

.format-label {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text);
    line-height: 1.2;
}

.format-desc {
    font-size: 0.65rem;
    color: var(--text-muted);
    line-height: 1.2;
}

/* Format color coding */
.format-option[data-format="same"] .format-card {
    border-color: var(--border);
}
.format-option[data-format="same"] input:checked + .format-card {
    border-color: #3399cc;
    background: rgba(51, 153, 204, 0.1);
}
.format-option[data-format="same"] input:checked + .format-card i {
    color: #3399cc;
}

.format-option[data-format="png"] .format-card:hover,
.format-option[data-format="png"] input:checked + .format-card {
    border-color: #339966;
    background: rgba(51, 153, 102, 0.1);
}
.format-option[data-format="png"] input:checked + .format-card i {
    color: #339966;
}

.format-option[data-format="jpg"] .format-card:hover,
.format-option[data-format="jpg"] input:checked + .format-card {
    border-color: #e64e4e;
    background: rgba(230, 78, 78, 0.1);
}
.format-option[data-format="jpg"] input:checked + .format-card i {
    color: #e64e4e;
}

.format-option[data-format="webp"] .format-card:hover,
.format-option[data-format="webp"] input:checked + .format-card {
    border-color: #3399cc;
    background: rgba(51, 153, 204, 0.1);
}
.format-option[data-format="webp"] input:checked + .format-card i {
    color: #3399cc;
}

.format-option[data-format="avif"] .format-card:hover,
.format-option[data-format="avif"] input:checked + .format-card {
    border-color: #9b59b6;
    background: rgba(155, 89, 182, 0.1);
}
.format-option[data-format="avif"] input:checked + .format-card i {
    color: #9b59b6;
}

.format-option[data-format="gif"] .format-card:hover,
.format-option[data-format="gif"] input:checked + .format-card {
    border-color: #f39c12;
    background: rgba(243, 156, 18, 0.1);
}
.format-option[data-format="gif"] input:checked + .format-card i {
    color: #f39c12;
}

/* Resize Summary */
.resize-summary {
    background: var(--summary-bg);
    border-radius: var(--radius-md);
    padding: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.summary-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.summary-item svg,
.summary-item i {
    color: var(--primary);
    flex-shrink: 0;
}

.summary-item.highlight {
    background: var(--primary);
    padding: 0.5rem 0.75rem;
    border-radius: var(--radius-md);
}

.summary-item.highlight svg,
.summary-item.highlight i {
    color: white;
}

.summary-item.highlight .summary-label,
.summary-item.highlight .summary-value {
    color: white;
}

.summary-content {
    display: flex;
    flex-direction: column;
}

.summary-label {
    font-size: 0.7rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.summary-value {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
}

.summary-arrow {
    color: var(--text-muted);
}

/* Settings Note */
.settings-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.85rem;
    color: var(--text-muted);
    padding: 0.5rem 1rem;
    background: var(--warning-light);
    border-radius: var(--radius-md);
    margin-top: 0.75rem;
}

.settings-note svg,
.settings-note i {
    color: var(--warning);
    flex-shrink: 0;
}

/* Output Summary */
.output-summary {
    background: var(--summary-bg);
    border-radius: var(--radius-md);
    padding: 1rem;
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.summary-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Action Bar */
.action-bar {
    display: flex;
    justify-content: center;
    gap: 1rem;
    padding: 2rem;
    background: var(--bg-secondary);
    border-top: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

/* Buttons */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.875rem 1.75rem;
    border: none;
    border-radius: var(--radius-full);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    text-decoration: none;
}

.btn-primary {
    background: var(--primary);
    color: white;
    box-shadow: 0 4px 14px var(--primary-light);
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px var(--primary-light);
}

.btn-secondary {
    background: var(--bg-elevated);
    color: var(--text-secondary);
    border: 1px solid var(--border);
}

.btn-secondary:hover {
    background: var(--bg);
    color: var(--text);
    border-color: var(--text-muted);
}

.btn-outline {
    background: transparent;
    color: var(--primary )!important;
    border: 1px solid var(--primary) !important;
}

.btn-outline:hover {
    background: var(--primary) !important;
    color: white !important;
}

/* ── Processing Overlay ─────────────────── */
.processing-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9000;
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
}

.processing-content {
    background: var(--bg-elevated);
    border-radius: var(--radius-xl);
    padding: 2rem 2.5rem;
    text-align: center;
    box-shadow: 0 25px 60px rgba(0,0,0,0.35);
    min-width: 320px;
    max-width: 420px;
    width: 90%;
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

/* Stage dots */
.irs-progress-stages {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.75rem;
}

.irs-stage-dot {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.3rem;
    color: var(--text-muted);
    transition: color 0.3s;
}

.irs-stage-icon {
    width: 20px;
    height: 20px;
    padding: 7px;
    background: var(--bg-secondary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    box-sizing: content-box;
}

.irs-stage-icon svg {
    width: 16px;
    height: 16px;
    display: block;
}

.irs-stage-dot span {
    font-size: 0.65rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.irs-stage-dot.active .irs-stage-icon { background: var(--primary); color: #fff; }
.irs-stage-dot.active                  { color: var(--primary); }
.irs-stage-dot.done .irs-stage-icon   { background: var(--success); color: #fff; }
.irs-stage-dot.done                    { color: var(--success); }

.irs-stage-connector {
    width: 28px;
    height: 2px;
    background: var(--border);
    margin: 0 0.25rem 1.1rem;
    flex-shrink: 0;
}

/* CSS-only spinner */
.processing-spinner {
    width: 44px;
    height: 44px;
    border: 4px solid var(--border);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: irs-spin 0.8s linear infinite;
    margin: 0 auto 1.25rem;
}

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

.progress-bar-container {
    height: 6px;
    background: var(--border);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: 0.625rem;
}

.progress-bar {
    height: 100%;
    background: var(--primary);
    border-radius: var(--radius-full);
    width: 0%;
    transition: width 0.4s ease;
}

.processing-subtext {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
    margin: 0 0 0.25rem;
}

.progress-text {
    font-size: 0.82rem;
    color: var(--text-muted);
    margin: 0;
}

/* Results Section */
.results-section {
    padding: 3rem;
    text-align: center;
}

.results-header {
    margin-bottom: 2rem;
}

.success-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 1rem;
    background: var(--success-light);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--success);
    transition: background-color var(--transition-speed);
}

.results-header h2 {
    font-size: 1.75rem;
    color: var(--success);
    margin: 0 0 0.5rem;
}

.results-header p {
    color: var(--text-secondary);
    margin: 0;
}

/* Single Result Container */
.single-result {
    margin-bottom: 2rem;
}

/* Preview Variants */
.original-preview {
    border-color: var(--border);
}

.modified-preview {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

/* Comparison */
.results-comparison {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 2rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.comparison-item {
    text-align: center;
}

.comparison-label {
    display: block;
    font-size: 0.875rem;
    color: var(--text-muted);
    margin-bottom: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.comparison-preview {
    width: 200px;
    height: 150px;
    background: 
        linear-gradient(45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(-45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(45deg, var(--checker-dark) 75%, var(--checker-light) 75%),
        linear-gradient(-45deg, var(--checker-dark) 75%, var(--checker-light) 75%);
    background-size: 16px 16px;
    background-position: 0 0, 0 8px, 8px -8px, -8px 0px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
    margin-bottom: 0.75rem;
    overflow: hidden;
    transition: border-color var(--transition-speed);
}

.comparison-preview img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.comparison-stats {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.comparison-stats.highlight {
    color: var(--primary);
    font-weight: 600;
}

.comparison-arrow {
    color: var(--text-muted);
}

/* Results Info */
.results-info {
    max-width: 300px;
    margin: 0 auto 2rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    padding: 1rem;
    transition: background-color var(--transition-speed);
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: 0.5rem 0;
    font-size: 0.9rem;
}

.info-row:not(:last-child) {
    border-bottom: 1px solid var(--border);
}

.info-row span:first-child {
    color: var(--text-muted);
}

.info-row span:last-child {
    font-weight: 600;
    color: var(--text);
}

.info-row.highlight {
    background: var(--highlight-bg);
    margin: 0.5rem -1rem -1rem;
    padding: 0.75rem 1rem;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

.info-row .reduction {
    color: var(--success);
}

.info-row .increase {
    color: var(--danger);
}

.info-row.highlight.is-increase {
    background: var(--danger-light, rgba(230, 78, 78, 0.12));
}

/* Results Actions */
.results-actions {
    display: flex;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
}

/* Error Message */
.error-message {
    margin: 1rem 2rem;
    padding: 1rem 1.5rem;
    background: var(--danger-light);
    border: 1px solid var(--danger);
    border-radius: var(--radius-md);
    color: var(--danger);
    font-weight: 500;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

/* Related Tools */
.related-tools {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin: 2rem 0;
    padding: 1.25rem 1.5rem;
    background: var(--bg-elevated);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    flex-wrap: wrap;
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

/* ==========================================
   METADATA / EXIF TOGGLE
   ========================================== */

.metadata-section {
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

.metadata-section .checkbox-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.metadata-hint {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    transition: color var(--transition-speed);
}

.metadata-hint.keep-mode {
    color: var(--warning);
}

/* ==========================================
   DPI / PPI CONTROL
   ========================================== */

.dpi-section {
    padding: 0.75rem 0;
    border-top: 1px solid var(--border);
    margin-top: 0.5rem;
}

.dpi-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.6rem;
}

.dpi-header label {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--text);
}

.dpi-header label i,
.dpi-header label svg {
    color: var(--primary);
}

.dpi-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
    font-style: italic;
    transition: color var(--transition-speed);
}

.dpi-hint.print-mode {
    color: var(--primary);
    font-style: normal;
    font-weight: 500;
}

.dpi-options {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.dpi-btn {
    padding: 0.4rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.dpi-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.dpi-btn.active {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
}

.dpi-custom-wrapper {
    flex: 0 0 auto;
}

.dpi-custom-input {
    width: 72px;
    padding: 0.4rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 0.8rem;
    text-align: center;
    transition: border-color 0.2s ease, background-color var(--transition-speed);
}

.dpi-custom-input:focus {
    outline: none;
    border-color: var(--primary);
}

.dpi-custom-input::placeholder {
    color: var(--text-muted);
    font-size: 0.75rem;
}

/* ==========================================
   FILE SIZE TARGET CONTROLS
   ========================================== */

.filesize-input-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.filesize-unit-select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 0.9rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, background-color var(--transition-speed);
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.5rem center;
    padding-right: 1.75rem;
}

.filesize-unit-select:focus {
    outline: none;
    border-color: var(--primary);
}

.filesize-presets {
    margin-top: 0.5rem;
}

.quick-btn-fs {
    padding: 0.35rem 0.65rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.quick-btn-fs:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.quick-btn-fs.active {
    background: var(--primary-light);
    color: var(--primary);
    border-color: var(--primary);
}

.filesize-info {
    display: flex;
    align-items: flex-start;
    gap: 0.4rem;
    margin-top: 0.75rem;
    padding: 0.6rem 0.75rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.4;
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.filesize-info i,
.filesize-info svg {
    flex-shrink: 0;
    margin-top: 1px;
    color: var(--primary);
}

/* ==========================================
   COPY TO CLIPBOARD - FEEDBACK
   ========================================== */

.btn-copied {
    background: var(--success) !important;
    color: white !important;
    border-color: var(--success) !important;
    pointer-events: none;
}

/* ==========================================
   RECENT HISTORY
   ========================================== */

.recent-history {
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.recent-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.75rem;
}

.recent-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
}

.recent-clear {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 0.75rem;
    cursor: pointer;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
    transition: all 0.2s ease;
}

.recent-clear:hover {
    color: var(--danger);
    background: var(--danger-light);
}

.recent-items {
    display: flex;
    gap: 0.75rem;
    overflow-x: auto;
    padding-bottom: 0.25rem;
    scrollbar-width: thin;
}

.recent-item {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.75rem;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    text-decoration: none;
    max-width: 200px;
}

.recent-item:hover {
    border-color: var(--primary);
    box-shadow: var(--shadow-sm);
}

.recent-item-thumb {
    width: 36px;
    height: 36px;
    border-radius: 4px;
    object-fit: cover;
    flex-shrink: 0;
    background:
        linear-gradient(45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(-45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(45deg, var(--checker-dark) 75%, var(--checker-light) 75%),
        linear-gradient(-45deg, var(--checker-dark) 75%, var(--checker-light) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0;
}

.recent-item-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.recent-item-name {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--text);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color var(--transition-speed);
}

.recent-item-meta {
    font-size: 0.65rem;
    color: var(--text-muted);
    transition: color var(--transition-speed);
}

.related-label {
    font-weight: 600;
    color: var(--text);
    font-size: 0.9rem;
}

.related-links {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
}

.related-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1rem;
    background: var(--bg);
    color: var(--text-secondary);
    text-decoration: none;
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    border: 1px solid var(--border);
}

.related-link:hover {
    background: var(--primary);
    color: white;
    border-color: var(--primary);
    transform: translateY(-2px);
}

.related-link svg,
.related-link i {
    flex-shrink: 0;
}

/* Info Sections */
.info-sections {
    display: grid;
    gap: 2rem;
    margin-top: 3rem;
}

.info-card {
    padding: 2rem 1.5rem;
    transition: background-color var(--transition-speed);
}

.info-card h2 {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 1.35rem;
    color: var(--text);
    margin: 0 0 1.5rem;
}

.info-card h2 svg,
.info-card h2 i {
    color: var(--primary);
    flex-shrink: 0;
}

/* Steps List */
.steps-list {
    list-style: none;
    padding: 0;
    margin: 0;
    counter-reset: step;
}

.steps-list li {
    position: relative;
    padding-left: 3.5rem;
    padding-bottom: 1.25rem;
    counter-increment: step;
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Vertical connecting line */
.steps-list li:not(:last-child)::after {
    content: '';
    position: absolute;
    left: calc(1rem - 1px);
    top: 2rem;
    bottom: 0;
    width: 2px;
    background: var(--primary-light);
}

/* Circle number */
.steps-list li::before {
    content: counter(step);
    position: absolute;
    left: 0;
    top: 0;
    width: 2rem;
    height: 2rem;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
    z-index: 1;
}

/* Steps Tip */
.steps-tip {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    margin-top: 1.5rem;
    padding: 1rem 1.25rem;
    background: var(--warning-light);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
    color: var(--text-secondary);
    line-height: 1.6;
}

.steps-tip svg,
.steps-tip i {
    color: var(--warning);
    flex-shrink: 0;
    margin-top: 2px;
}

.steps-tip a {
    color: var(--warning);
    font-weight: 600;
    text-decoration: none;
}

.steps-tip a:hover {
    text-decoration: underline;
}

/* Feature List */
.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 0.75rem;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

.feature-list li svg,
.feature-list li i {
    color: var(--success);
    flex-shrink: 0;
    margin-top: 3px;
}

/* Format Explanations */
.format-explanations {
    display: grid;
    gap: 1rem;
}

.format-explain {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
}

.format-tag {
    flex-shrink: 0;
    padding: 0.35rem 0.85rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 600;
    color: white;
}

.format-tag.png {
    background: #3B82F6;
}

[data-theme="dark"] .format-tag.png {
    background: #60a5fa;
}

.format-tag.jpg {
    background: #F59E0B;
}

[data-theme="dark"] .format-tag.jpg {
    background: #fbbf24;
}

.format-tag.webp {
    background: #10B981;
}

[data-theme="dark"] .format-tag.webp {
    background: #34d399;
}

.format-tag.avif {
    background: #8B5CF6;
}

[data-theme="dark"] .format-tag.avif {
    background: #a78bfa;
}

.format-explain p {
    margin: 0;
    color: var(--text-secondary);
    font-size: 0.95rem;
    line-height: 1.6;
}

/* FAQ Card */
.faq-card {
    margin-top: 1rem;
}

/* FAQ */
.faq-list {
    display: grid;
    gap: 0.75rem;
}

.faq-item {
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: border-color var(--transition-speed);
}

.faq-question {
    width: 100%;
    padding: 1rem 1.25rem;
    background: var(--bg-secondary);
    border: none;
    text-align: left;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    transition: all 0.2s ease;
}

.faq-question:hover {
    background: var(--bg);
}

.faq-question svg,
.faq-question i {
    color: var(--primary);
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.faq-item.open .faq-question svg,
.faq-item.open .faq-question i {
    transform: rotate(180deg);
}

.faq-answer {
    display: none;
    padding: 0 1.25rem 1rem;
    background: var(--bg-elevated);
    transition: background-color var(--transition-speed);
}

.faq-item.open .faq-answer {
    display: block;
}

.faq-answer p {
    margin: 0;
    color: var(--text-secondary);
    line-height: 1.7;
}

/* Responsive */
@media (max-width: 900px) {
    .editor-grid {
        grid-template-columns: 1fr;
    }
    
    .preview-panel {
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    
    .file-info-bar {
        justify-content: center;
    }
    
    .resize-summary {
        flex-direction: column;
        gap: 0.75rem;
    }
    
    .summary-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .tool-container {
        padding: 1rem;
    }
    
    .tool-title-row {
        flex-direction: row;
        gap: 0.75rem;
    }
    
    .tool-icon-wrapper {
        width: 48px;
        height: 48px;
    }
    
    .tool-icon-wrapper svg,
    .tool-icon-wrapper i {
        width: 24px;
        height: 24px;
    }
    
    .upload-section,
    .results-section {
        padding: 2rem 1.5rem;
    }
    
    .preview-panel,
    .controls-panel {
        padding: 1.5rem;
    }
    
    .resize-mode-tabs {
        flex-direction: column;
    }
    
    .control-row {
        grid-template-columns: 1fr;
    }
    
    .action-bar {
        flex-direction: column;
        padding: 1.5rem;
    }
    
    .btn {
        width: 100%;
    }
    
    .results-comparison {
        flex-direction: column;
    }
    
    .comparison-arrow {
        transform: rotate(90deg);
    }
    
    .related-tools {
        flex-direction: column;
        text-align: center;
    }
    
    .related-links {
        justify-content: center;
    }
    
    .format-explain {
        flex-direction: column;
    }
    
    .panel-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    
    .quick-select {
        justify-content: center;
    }
    
    .format-options {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .recent-items {
        gap: 0.5rem;
    }
    
    .recent-item {
        padding: 0.4rem 0.6rem;
    }
    
    .results-actions {
        flex-direction: column;
        align-items: stretch;
    }
    
    .results-actions .btn {
        justify-content: center;
    }
    
    .metadata-section .checkbox-row {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .dpi-options {
        gap: 0.35rem;
    }
    
    .dpi-btn {
        padding: 0.35rem 0.6rem;
        font-size: 0.75rem;
    }
    
    .filesize-input-row {
        flex-wrap: wrap;
    }
}

@media (max-width: 480px) {
    .tool-title {
        font-size: 1.5rem;
    }
    
    .file-info-bar {
        flex-direction: column;
        gap: 0.75rem;
        align-items: flex-start;
    }
    
    .comparison-preview {
        width: 160px;
        height: 120px;
    }
    
    .steps-list li {
        padding-left: 3rem;
    }
    
    .format-options {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Animations */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.editor-section,
.results-section {
    animation: fadeIn 0.4s ease;
}

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

/* ============================================
   BATCH NAVIGATION BAR
   ============================================ */
.batch-nav-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 2rem;
    background: var(--bg-elevated);
    border-bottom: 1px solid var(--border);
    gap: 1rem;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.batch-nav-left {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.btn-nav {
    width: 36px;
    height: 36px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.btn-nav:hover:not(:disabled) {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

.btn-nav:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.batch-counter {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.batch-counter span {
    color: var(--primary);
}

/* Thumbnail Strip */
.batch-thumbnails {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    overflow-x: auto;
    padding: 0.4rem;
    justify-content: center;
    scrollbar-width: thin;
    scrollbar-color: var(--border) transparent;
}

.batch-thumbnails::-webkit-scrollbar {
    height: 4px;
}

.batch-thumbnails::-webkit-scrollbar-track {
    background: transparent;
}

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

.batch-thumb {
    position: relative;
    width: 48px;
    height: 48px;
    border-radius: var(--radius-sm);
    cursor: pointer;
    border: 2px solid transparent;
    flex-shrink: 0;
    background: 
        linear-gradient(45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(-45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(45deg, var(--checker-dark) 75%, var(--checker-light) 75%),
        linear-gradient(-45deg, var(--checker-dark) 75%, var(--checker-light) 75%);
    background-size: 8px 8px;
    background-position: 0 0, 0 4px, 4px -4px, -4px 0px;
    transition: all 0.2s ease;
}

.batch-thumb:hover {
    border-color: var(--primary-light);
    transform: scale(1.05);
}

.batch-thumb.active {
    border-color: var(--primary);
    box-shadow: 0 0 0 2px var(--primary-light);
}

.batch-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: inherit;
}

.batch-thumb-remove {
    position: absolute;
    top: -4px;
    right: -6px;
    width: 18px;
    height: 18px;
    border-radius: var(--radius-full);
    background: var(--danger);
    color: white;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    opacity: 0;
    transform: scale(0.8);
    transition: all 0.2s ease;
    z-index: 2;
}

.batch-thumb:hover .batch-thumb-remove {
    opacity: 1;
    transform: scale(1);
}

.batch-thumb-remove:hover {
    background: #dc2626;
    transform: scale(1.1);
}

/* Right side - Add button */
.batch-nav-right {
    display: flex;
    align-items: center;
}

.btn-add-more {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.5rem 1rem;
    border: 1px dashed var(--border);
    border-radius: var(--radius-md);
    background: var(--bg);
    color: var(--text-secondary);
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.btn-add-more:hover {
    border-color: var(--primary);
    background: var(--primary-light);
    color: var(--primary);
}

/* Note that settings apply to all */
.batch-settings-note {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    background: var(--primary-light);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--primary);
    margin-bottom: 1.5rem;
}

.batch-settings-note svg,
.batch-settings-note i {
    flex-shrink: 0;
}

/* ============================================
   BATCH RESULTS
   ============================================ */
.batch-results-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-bottom: 1.5rem;
    text-align: left;
    max-height: 350px;
    overflow-y: auto;
    padding-right: 0.5rem;
}

.batch-result-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.75rem 1rem;
    background: var(--bg-secondary);
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.batch-result-item:hover {
    border-color: var(--primary-light);
}

.batch-result-preview {
    width: 60px;
    height: 60px;
    min-width: 60px;
    min-height: 60px;
    flex-shrink: 0;
    border-radius: var(--radius-sm);
    overflow: hidden;
    background: 
        linear-gradient(45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(-45deg, var(--checker-light) 25%, var(--checker-dark) 25%),
        linear-gradient(45deg, var(--checker-dark) 75%, var(--checker-light) 75%),
        linear-gradient(-45deg, var(--checker-dark) 75%, var(--checker-light) 75%);
    background-size: 10px 10px;
    background-position: 0 0, 0 5px, 5px -5px, -5px 0px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--border);
}

.batch-result-preview img {
    width: 100%;
    height: 100%;
    max-width: 60px;
    max-height: 60px;
    object-fit: contain;
    display: block;
}

.batch-result-info {
    flex: 1;
    min-width: 0;
}

.batch-result-name {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--text);
    margin-bottom: 0.25rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.batch-result-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.batch-result-meta span {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.batch-result-change {
    font-weight: 600;
}

.batch-result-change.reduced {
    color: var(--success);
}

.batch-result-change.increased {
    color: var(--danger);
}

.batch-result-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    border-radius: var(--radius-full);
    text-decoration: none;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.batch-result-download:hover {
    background: var(--primary-dark) !important;
    transform: scale(1.1);
}

/* Batch Results Container */
.batch-results {
    margin-bottom: 2rem;
}

/* Batch Stats Summary */
.batch-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem;
    background: var(--summary-bg);
    border-radius: var(--radius-md);
    flex-wrap: wrap;
    border: 1px solid var(--border);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.batch-stat-item {
    text-align: center;
    padding: 0 1rem;
}

.batch-stat-item .stat-label {
    display: block;
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
}

.batch-stat-item .stat-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--text);
}

.batch-stat-item.highlight .stat-value {
    color: var(--success);
}

/* Total summary bar (alternative styling) */
.batch-total-summary {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 2rem;
    padding: 1.25rem;
    background: var(--highlight-bg);
    border-radius: var(--radius-md);
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.batch-total-item {
    text-align: center;
}

.batch-total-label {
    font-size: 0.75rem;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
}

.batch-total-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text);
}

.batch-total-value.highlight {
    color: var(--primary);
}

.batch-total-value.success {
    color: var(--success);
}

.batch-total-arrow {
    color: var(--text-muted);
}

/* Responsive adjustments for batch nav */
@media (max-width: 768px) {
    .batch-nav-bar {
        flex-wrap: wrap;
        padding: 1rem;
        gap: 0.75rem;
    }
    
    .batch-nav-left {
        order: 1;
    }
    
    .batch-nav-right {
        order: 2;
    }
    
    .batch-thumbnails {
        order: 3;
        width: 100%;
        justify-content: flex-start;
    }
    
    .batch-thumb {
        width: 64px;
        height: 64px;
    }
    
    .batch-result-item {
        flex-wrap: nowrap;
    }
    
    .batch-result-preview {
        width: 50px;
        height: 50px;
        min-width: 50px;
        min-height: 50px;
    }
    
    .batch-result-preview img {
        max-width: 50px;
        max-height: 50px;
    }
    
    .batch-result-meta {
        flex-direction: column;
        gap: 0.25rem;
    }
    
    .batch-total-summary {
        gap: 1rem;
    }
    
    .batch-total-arrow {
        transform: rotate(90deg);
    }
}

@media (max-width: 480px) {
    .batch-add-btn span {
        display: none;
    }
    
    .batch-counter {
        font-size: 0.8rem;
    }
}


/* ── URL Loader ─────────────────────────── */
.url-loader-row {
    margin-top: 0.75rem;
}
.url-loader-inner {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    padding: 0.4rem 0.75rem;
    transition: border-color var(--transition-speed), background-color var(--transition-speed);
}
.url-loader-inner:focus-within { border-color: var(--primary); }
.url-loader-inner svg,
.url-loader-inner i { color: var(--text-muted); flex-shrink: 0; }
.url-loader-input {
    flex: 1;
    border: none;
    outline: none;
    background: transparent;
    font-size: 0.85rem;
    color: var(--text);
}
.url-loader-input::placeholder { color: var(--text-muted); }
.url-loader-btn {
    background: var(--primary);
    color: #fff;
    border: none;
    border-radius: var(--radius-full);
    padding: 0.3rem 0.9rem;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.2s;
}
.url-loader-btn:hover { opacity: 0.85; }

/* ── Fit / Fill Toggle ───────────────────── */
.fit-fill-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-top: 0.625rem;
    flex-wrap: wrap;
}
.fit-fill-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
    white-space: nowrap;
}
.fit-fill-toggle {
    display: flex;
    gap: 0.35rem;
}
.fit-fill-btn {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}
.fit-fill-btn.active {
    border-color: var(--primary);
    background: var(--primary);
    color: #fff;
}
.fit-fill-btn:not(.active):hover { border-color: var(--primary); color: var(--primary); }

/* ── Filename Template ───────────────────── */
.filename-template-section {
    margin-bottom: 1rem;
}
.filename-template-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.4rem;
}
.filename-template-header label {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
}
.filename-hint {
    font-size: 0.75rem;
    color: var(--text-muted);
}
.filename-template-input {
    width: 100%;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-elevated);
    color: var(--text);
    font-size: 0.85rem;
    font-family: monospace;
    box-sizing: border-box;
    transition: border-color var(--transition-speed), background-color var(--transition-speed);
}
.filename-template-input:focus {
    outline: none;
    border-color: var(--primary);
}

/* ── Live Estimate Row ───────────────────── */
.live-estimate-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    margin-top: 0.625rem;
    font-size: 0.8rem;
    color: var(--text-secondary);
    justify-content: center;
}
.live-estimate-row svg,
.live-estimate-row i { color: var(--text-muted); }
.live-estimate-row strong { color: var(--primary); font-weight: 700; }

/* ── Comparison Slider ───────────────────── */
.comparison-slider-wrap {
    position: relative;
    width: 100%;
    max-width: 520px;
    margin: 0 auto 1.5rem;
    border-radius: var(--radius-md);
    overflow: hidden;
    user-select: none;
    touch-action: none;
    background: var(--bg-secondary);
    line-height: 0;
    cursor: col-resize;
}
.cs-before,
.cs-after {
    position: absolute;
    inset: 0;
    overflow: hidden;
}
.cs-before { z-index: 1; }
.cs-after  { z-index: 2; clip-path: inset(0 50% 0 0); }
.cs-before img,
.cs-after img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
    pointer-events: none;
}
/* placeholder height via before img */
.comparison-slider-wrap img:first-child { position: relative; visibility: hidden; }
.cs-before img { position: absolute; inset: 0; visibility: visible; }

.cs-divider {
    position: absolute;
    top: 0; bottom: 0;
    left: 50%;
    width: 2px;
    background: #fff;
    z-index: 3;
    transform: translateX(-50%);
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
}
.cs-handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 32px;
    height: 32px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    color: var(--primary);
}
.cs-label {
    position: absolute;
    bottom: 10px;
    z-index: 4;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.2rem 0.55rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    pointer-events: none;
}
.cs-label-before { left: 10px; }
.cs-label-after  { right: 10px; }

/* ── Keyboard Shortcuts Hint ─────────────── */
.keyboard-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0.35rem;
    font-size: 0.75rem;
    color: var(--text-muted);
    padding: 0.625rem 1rem;
    margin: 0.5rem 0 0;
}
.keyboard-hint svg,
.keyboard-hint i { color: var(--text-muted); }
.keyboard-hint kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.1rem 0.4rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
    font-size: 0.72rem;
    font-family: monospace;
    color: var(--text);
    transition: background-color var(--transition-speed);
}

/* ── Batch result placeholder (TIFF / HEIC / JXL / BMP) ── */
.batch-result-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-secondary);
    border-radius: var(--radius-sm);
}

.batch-result-placeholder span {
    font-size: 0.65rem;
    font-weight: 800;
    letter-spacing: 0.05em;
    color: var(--text-muted);
    text-transform: uppercase;
    line-height: 1;
    padding: 0.25rem 0.4rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: 4px;
}

/* ==========================================
   UI REFRESH - OPTION BLOCKS & COMPACT ADVANCED ROWS
   ========================================== */

/* Make sure [hidden] always wins over display rules */
[hidden] { display: none !important; }

/* ── Option block card (delimits each settings group) ── */
.opt-block {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    margin-bottom: 0.875rem;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.opt-block:last-of-type {
    margin-bottom: 0.875rem;
}

.opt-block .quality-header,
.opt-block > label {
    margin-bottom: 0.7rem;
}

.quality-section.opt-block,
.format-section.opt-block,
.resize-controls.opt-block {
    margin-bottom: 0.875rem;
}

/* Tighter format grid inside its card */
.format-section.opt-block .format-options {
    gap: 0.4rem;
}

/* ── Advanced options: compact one-line rows ── */
.adv-options {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 0.875rem;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.adv-row + .adv-row {
    border-top: 1px solid var(--border);
}

/* Static row (no expand) */
.adv-row-static {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    min-height: 44px;
}

/* Expandable row header - full width button, single line */
.adv-row-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.7rem 0.9rem;
    min-height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: var(--text);
    transition: background-color 0.15s ease;
}

.adv-row-head:hover {
    background: var(--bg-secondary);
}

.adv-row-head:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: -2px;
}

.adv-row-left,
.adv-row-right {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.adv-row-right {
    gap: 0.55rem;
    flex-shrink: 0;
}

.adv-row-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text);
    white-space: nowrap;
}

.adv-row-left i,
.adv-row-left svg,
.adv-toggle i,
.adv-toggle svg {
    width: 16px;
    height: 16px;
    color: var(--primary);
    flex-shrink: 0;
}

.adv-value {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary);
    background: var(--selected-bg);
    border-radius: var(--radius-sm);
    padding: 0.15rem 0.5rem;
    max-width: 190px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.adv-value-mono {
    font-family: monospace;
    font-weight: 500;
}

.adv-chevron {
    color: var(--text-muted);
    transition: transform 0.2s ease;
    flex-shrink: 0;
}

.adv-row.open .adv-chevron {
    transform: rotate(180deg);
}

.adv-row.open .adv-row-head {
    background: var(--bg-secondary);
}

.adv-row.open .adv-row-body {
    background: var(--bg-secondary);
}

/* Expandable body */
.adv-row-body {
    padding: 0.25rem 0.9rem 0.85rem;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
    animation: advReveal 0.18s ease;
}

@keyframes advReveal {
    from { opacity: 0; transform: translateY(-3px); }
    to   { opacity: 1; transform: translateY(0); }
}

.adv-row-body .dpi-options {
    margin: 0;
}

.adv-row-body .filename-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
}

/* Strip EXIF toggle row */
.adv-toggle {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    min-width: 0;
}

.adv-row-static .metadata-hint {
    font-size: 0.72rem;
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Switch-style checkbox */
.adv-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 38px;
    height: 22px;
    border-radius: var(--radius-full);
    background: var(--border);
    border: none;
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease;
}

.adv-switch::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 3px;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow: var(--shadow-sm);
    transition: transform 0.2s ease;
}

.adv-switch:checked {
    background: var(--primary);
}

.adv-switch:checked::after {
    transform: translateX(16px);
}

.adv-switch:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ── Recent history: explicit download action ── */
.recent-item {
    position: relative;
}

.recent-item-main {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    min-width: 0;
    flex: 1;
}

.recent-item-dl {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--primary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.recent-item-dl:hover {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.recent-item-dl svg,
.recent-item-dl i {
    width: 15px;
    height: 15px;
}

.recent-item.is-expired {
    opacity: 0.55;
}

.recent-hint {
    display: block;
    font-size: 0.7rem;
    color: var(--text-muted);
    margin-top: 0.5rem;
}

@media (max-width: 768px) {
    .adv-row-static,
    .adv-row-head {
        padding: 0.65rem 0.75rem;
    }

    .adv-row-static .metadata-hint,
    .adv-row-head .dpi-hint {
        display: none;
    }

    .adv-value {
        max-width: 120px;
    }

    .opt-block {
        padding: 0.85rem 0.85rem;
    }
}

/* Recent item sizing with the download action */
.recent-item {
    max-width: 260px;
    gap: 0.6rem;
    justify-content: space-between;
}

.recent-item-meta {
    white-space: nowrap;
}

.recent-item-name {
    max-width: 140px;
}

/* ==========================================
   CROP BEFORE RESIZE
   ========================================== */

.crop-toggle-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.crop-toggle-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.crop-toggle-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.crop-toggle-btn svg,
.crop-toggle-btn i {
    flex-shrink: 0;
}

/* Overlay is absolutely positioned over the rendered image by JS */
.crop-overlay {
    position: absolute;
    z-index: 5;
    overflow: hidden;
    border-radius: var(--radius-sm);
    touch-action: none;
}

.crop-box {
    position: absolute;
    box-sizing: border-box;
    border: 1px solid rgba(255, 255, 255, 0.95);
    box-shadow: 0 0 0 9999px rgba(15, 23, 42, 0.55);
    cursor: move;
}

.crop-box::before,
.crop-box::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    opacity: 0.45;
}

/* Rule-of-thirds guides */
.crop-box::before {
    background-image:
        linear-gradient(to right, transparent calc(33.333% - 0.5px), rgba(255,255,255,0.8) calc(33.333% - 0.5px), rgba(255,255,255,0.8) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
        linear-gradient(to right, transparent calc(66.666% - 0.5px), rgba(255,255,255,0.8) calc(66.666% - 0.5px), rgba(255,255,255,0.8) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}

.crop-box::after {
    background-image:
        linear-gradient(to bottom, transparent calc(33.333% - 0.5px), rgba(255,255,255,0.8) calc(33.333% - 0.5px), rgba(255,255,255,0.8) calc(33.333% + 0.5px), transparent calc(33.333% + 0.5px)),
        linear-gradient(to bottom, transparent calc(66.666% - 0.5px), rgba(255,255,255,0.8) calc(66.666% - 0.5px), rgba(255,255,255,0.8) calc(66.666% + 0.5px), transparent calc(66.666% + 0.5px));
}

.crop-handle {
    position: absolute;
    width: 12px;
    height: 12px;
    background: #ffffff;
    border: 2px solid var(--primary);
    border-radius: 3px;
    z-index: 2;
}

.crop-handle[data-handle="nw"] { top: -1px;  left: -1px;  cursor: nwse-resize; }
.crop-handle[data-handle="n"]  { top: -1px;  left: 50%; margin-left: -6px; cursor: ns-resize; }
.crop-handle[data-handle="ne"] { top: -1px;  right: -1px; cursor: nesw-resize; }
.crop-handle[data-handle="e"]  { top: 50%; margin-top: -6px; right: -1px; cursor: ew-resize; }
.crop-handle[data-handle="se"] { bottom: -1px; right: -1px; cursor: nwse-resize; }
.crop-handle[data-handle="s"]  { bottom: -1px; left: 50%; margin-left: -6px; cursor: ns-resize; }
.crop-handle[data-handle="sw"] { bottom: -1px; left: -1px;  cursor: nesw-resize; }
.crop-handle[data-handle="w"]  { top: 50%; margin-top: -6px; left: -1px; cursor: ew-resize; }

.crop-size-badge {
    position: absolute;
    top: 4px;
    left: 4px;
    background: var(--primary);
    color: #ffffff;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.15rem 0.45rem;
    border-radius: var(--radius-sm);
    white-space: nowrap;
    pointer-events: none;
    z-index: 3;
}

/* Crop toolbar */
.crop-toolbar {
    margin-top: 0.875rem;
    padding: 0.75rem 0.9rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    display: flex;
    flex-direction: column;
    gap: 0.7rem;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.crop-ratio-row {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: wrap;
}

.crop-ratio-label {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-right: 0.15rem;
}

.crop-ratio-btn {
    padding: 0.3rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.crop-ratio-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.crop-ratio-btn.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.crop-actions-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.btn-small {
    padding: 0.5rem 0.9rem;
    font-size: 0.82rem;
    border-radius: var(--radius-full);
}

.btn-small:hover {
    transform: none;
}

/* Applied crop badge */
.crop-applied-row {
    margin-top: 0.75rem;
    padding: 0.55rem 0.8rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    flex-wrap: wrap;
    background: var(--selected-bg);
    border: 1px solid var(--primary);
    border-radius: var(--radius-md);
}

.crop-applied-info {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.8rem;
    color: var(--primary);
    font-weight: 500;
}

.crop-applied-info strong {
    font-weight: 700;
}

.crop-reset-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.crop-reset-btn:hover {
    color: var(--danger);
    border-color: var(--danger);
}

.crop-hint {
    display: flex;
    align-items: flex-start;
    gap: 0.35rem;
    margin: 0.75rem 0 0;
    font-size: 0.75rem;
    color: var(--text-muted);
    line-height: 1.5;
}

.crop-hint svg,
.crop-hint i {
    flex-shrink: 0;
    margin-top: 0.15rem;
}

.crop-hint a {
    color: var(--primary);
    font-weight: 600;
}

/* ==========================================
   PER-IMAGE SETTINGS OVERRIDE
   ========================================== */

.override-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.65rem 0.9rem;
    margin-bottom: 0.875rem;
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.override-row.is-custom {
    border-color: var(--primary);
    background: var(--selected-bg);
}

.override-copy-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.25rem 0.55rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg-elevated);
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
}

.override-copy-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

/* Badges on batch thumbnails */
.batch-thumb-badge {
    position: absolute;
    top: 2px;
    left: 2px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 15px;
    height: 15px;
    border-radius: 4px;
    background: var(--primary);
    color: #ffffff;
    z-index: 2;
    pointer-events: none;
}

.batch-thumb-badge.crop-badge {
    left: auto;
    right: 2px;
    background: var(--success);
}

.batch-thumb-badge svg,
.batch-thumb-badge i {
    width: 10px !important;
    height: 10px !important;
}

/* ==========================================
   UPSCALE GUARD
   ========================================== */

.upscale-guard {
    display: flex;
    align-items: flex-start;
    gap: 0.6rem;
    margin-top: 0.75rem;
    padding: 0.75rem 0.9rem;
    border-radius: var(--radius-md);
    border: 1px solid var(--border);
    background: var(--bg-elevated);
    font-size: 0.8rem;
    line-height: 1.5;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.upscale-guard-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.upscale-guard-text strong {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text);
}

.upscale-guard-text span {
    color: var(--text-secondary);
}

.upscale-guard-text a {
    color: var(--primary);
    font-weight: 600;
}

.upscale-guard-icon {
    flex-shrink: 0;
    margin-top: 0.1rem;
    color: var(--text-muted);
}

.upscale-guard.level-notice {
    border-color: var(--primary);
    background: var(--selected-bg);
}

.upscale-guard.level-notice .upscale-guard-icon {
    color: var(--primary);
}

.upscale-guard.level-warning {
    border-color: var(--warning);
    background: rgba(245, 158, 11, 0.1);
}

.upscale-guard.level-warning .upscale-guard-icon {
    color: var(--warning);
}

.upscale-guard.level-warning .upscale-guard-text strong {
    color: var(--warning);
}

@media (max-width: 768px) {
    .crop-actions-row .btn-small {
        flex: 1 1 auto;
        justify-content: center;
    }

    .override-row {
        padding: 0.6rem 0.75rem;
    }

    .override-copy-btn span {
        display: none;
    }
}

.crop-hint > span {
    min-width: 0;
}

/* ==========================================
   QUICK PRESETS - label above, one row
   ========================================== */

.quick-select {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    align-items: stretch;
    gap: 0.4rem;
    margin-top: 1rem;
}

.quick-select .quick-label {
    grid-column: 1 / -1;
    margin-bottom: 0.1rem;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.quick-select .quick-btn,
.quick-select .quick-btn-dim,
.quick-select .quick-btn-fs {
    width: 100%;
    padding: 0.45rem 0.25rem;
    text-align: center;
    white-space: nowrap;
    border-radius: var(--radius-sm);
    font-size: 0.72rem;
    letter-spacing: -0.01em;
}

.quick-select .quick-btn-dim {
    font-size: 0.68rem;
}

/* ==========================================
   SWITCH - clearer on/off states
   ========================================== */

.adv-switch {
    appearance: none;
    -webkit-appearance: none;
    position: relative;
    width: 44px;
    height: 24px;
    min-width: 44px;
    margin: 0;
    border-radius: var(--radius-full);
    background: var(--switch-off-bg);
    border: 1px solid var(--switch-off-border);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
    cursor: pointer;
    flex-shrink: 0;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.adv-switch::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: #ffffff;
    border: 1px solid var(--switch-knob-border);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
    transition: transform 0.2s ease;
}

.adv-switch:hover {
    border-color: var(--primary);
}

.adv-switch:checked {
    background: var(--primary);
    border-color: var(--primary);
    box-shadow: none;
}

.adv-switch:checked::after {
    transform: translateX(20px);
    border-color: rgba(0, 0, 0, 0.08);
}

.adv-switch:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* Text state next to the switch so on/off is unambiguous */
.switch-state {
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-muted);
    min-width: 24px;
    text-align: right;
    transition: color var(--transition-speed);
}

.switch-state.is-on {
    color: var(--primary);
}

@media (max-width: 768px) {
    .quick-select {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

/* ==========================================
   SETTINGS PRESETS
   ========================================== */

.preset-bar {
    background: var(--bg-elevated);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    padding: 0.8rem 0.9rem;
    margin-bottom: 0.875rem;
    transition: background-color var(--transition-speed), border-color var(--transition-speed);
}

.preset-bar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.6rem;
}

.preset-bar-label {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    color: var(--text-muted);
}

.preset-bar-label svg,
.preset-bar-label i {
    color: var(--primary);
}

.preset-save-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.28rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.73rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-save-btn:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.preset-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.preset-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.35rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-full);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.preset-chip:hover {
    border-color: var(--primary);
    color: var(--primary);
}

.preset-chip.active {
    background: var(--primary);
    border-color: var(--primary);
    color: #ffffff;
}

.preset-chip.active .preset-chip-icon,
.preset-chip.active .preset-chip-remove {
    color: rgba(255, 255, 255, 0.85);
}

.preset-chip-icon {
    color: var(--primary);
    flex-shrink: 0;
}

.preset-chip-icon svg,
.preset-chip-icon i {
    width: 13px !important;
    height: 13px !important;
    display: block;
}

.preset-chip-remove {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-left: 0.1rem;
    padding: 0;
    border: none;
    background: none;
    color: var(--text-muted);
    cursor: pointer;
    border-radius: 3px;
    transition: color 0.2s ease;
}

.preset-chip-remove:hover {
    color: var(--danger);
}

.preset-chip-remove svg,
.preset-chip-remove i {
    width: 12px !important;
    height: 12px !important;
    display: block;
}

.preset-empty {
    font-size: 0.75rem;
    color: var(--text-muted);
}

.preset-save-row {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin-top: 0.6rem;
    flex-wrap: wrap;
}

.preset-name-input {
    flex: 1 1 160px;
    min-width: 0;
    padding: 0.45rem 0.7rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--bg-secondary);
    color: var(--text);
    font-size: 0.82rem;
    transition: border-color 0.2s ease, background-color var(--transition-speed);
}

.preset-name-input:focus {
    outline: none;
    border-color: var(--primary);
}

.preset-name-input::placeholder {
    color: var(--text-muted);
}

@media (max-width: 768px) {
    .preset-save-row .btn-small {
        flex: 1 1 auto;
        justify-content: center;
    }
}

/* ==========================================================
   SWITCH - override the global checkbox styling
   ----------------------------------------------------------
   styles/custom_styles.css forces every checkbox inside
   .tool-container to 20x20 with a 2px border and injects a
   "✓" through :checked:after. That block is more specific than
   a plain .adv-switch rule, so the switch rendered as a small
   square with a tick instead of a pill. Per the note in that
   file, prefixed tools must win with their own prefix selector
   plus !important - which is what this block does.
   ========================================================== */

.tool-container input[type="checkbox"].adv-switch,
input[type="checkbox"].adv-switch {
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 24px !important;
    min-height: 24px !important;
    padding: 0 !important;
    margin: 0 !important;
    border: 1px solid var(--switch-off-border) !important;
    border-radius: var(--radius-full) !important;
    background: var(--switch-off-bg) !important;
    background-color: var(--switch-off-bg) !important;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08) !important;
    cursor: pointer !important;
    flex-shrink: 0 !important;
    outline: none !important;
    transition: background-color 0.2s ease, border-color 0.2s ease !important;
}

.tool-container input[type="checkbox"].adv-switch:hover,
input[type="checkbox"].adv-switch:hover {
    border-color: var(--primary) !important;
}

.tool-container input[type="checkbox"].adv-switch:checked,
input[type="checkbox"].adv-switch:checked {
    background: var(--primary) !important;
    background-color: var(--primary) !important;
    border-color: var(--primary) !important;
    box-shadow: none !important;
}

/* Neutralise the injected tick and rebuild it as the knob */
.tool-container input[type="checkbox"].adv-switch::after,
.tool-container input[type="checkbox"].adv-switch:checked::after,
input[type="checkbox"].adv-switch::after,
input[type="checkbox"].adv-switch:checked::after {
    content: '' !important;
    position: absolute !important;
    top: 2px !important;
    left: 2px !important;
    right: auto !important;
    bottom: auto !important;
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
    padding: 0 !important;
    font-size: 0 !important;
    border-radius: 50% !important;
    border: 1px solid var(--switch-knob-border) !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    transform: none !important;
    transition: transform 0.2s ease !important;
}

.tool-container input[type="checkbox"].adv-switch:checked::after,
input[type="checkbox"].adv-switch:checked::after {
    transform: translateX(20px) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

.tool-container input[type="checkbox"].adv-switch:focus-visible,
input[type="checkbox"].adv-switch:focus-visible {
    outline: 2px solid var(--primary) !important;
    outline-offset: 2px !important;
}

/* ==========================================================
   STABLE EDITOR COLUMNS
   ----------------------------------------------------------
   "1fr" is minmax(auto, 1fr), so each track still respects its
   content's min-content width. The EXIF hint swaps between
   "Removes camera info, GPS, timestamps" and "Metadata
   preserved (server formats only)" and is nowrap, so toggling
   the switch changed the controls panel's min-content and the
   whole 50/50 split shifted sideways. minmax(0, 1fr) plus
   min-width: 0 pins the columns to a true half each.
   ========================================================== */

.editor-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}

.preview-panel,
.controls-panel {
    min-width: 0;
}

/* Keep the hint from forcing the panel wider - it truncates instead */
.adv-row-static .metadata-hint {
    flex: 0 1 auto;
    min-width: 0;
}

@media (max-width: 900px) {
    .editor-grid {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* ==========================================================
   ADVANCED ROWS - two-line layout
   ----------------------------------------------------------
   The small hints used to sit inline on the right, where they
   collided with the row title on narrower panels. They now
   live on their own line under the title, so they always have
   room to be read.
   ========================================================== */

.adv-row-text {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    min-width: 0;
    text-align: left;
}

.adv-row-hint {
    display: block;
    font-size: 0.72rem;
    font-weight: 400;
    line-height: 1.35;
    color: var(--text-muted);
    white-space: normal;
    transition: color var(--transition-speed);
}

.adv-row-hint.keep-mode {
    color: var(--warning);
}

.adv-row-static,
.adv-row-head {
    align-items: center;
    min-height: 52px;
    padding-top: 0.6rem;
    padding-bottom: 0.6rem;
}

.adv-toggle,
.adv-row-left {
    align-items: center;
    gap: 0.55rem;
    flex: 1 1 auto;
    min-width: 0;
}

.adv-row-title {
    white-space: normal;
}

/* Reset the earlier inline-hint styling now that hints are stacked */
.adv-row-static .metadata-hint {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    font-size: 0.72rem;
}

.adv-row-head .dpi-hint {
    font-style: normal;
}

.adv-row-head .dpi-hint.print-mode {
    color: var(--primary);
    font-weight: 600;
}

@media (max-width: 768px) {
    /* Hints have their own line now, so keep them visible on mobile */
    .adv-row-static .metadata-hint,
    .adv-row-head .dpi-hint,
    .adv-row-hint {
        display: block;
    }
}

/* ==========================================================
   COLLAPSED SECONDARY SETTINGS
   ----------------------------------------------------------
   Quality and Format now sit as rows in the same card as EXIF,
   DPI and Filename, all closed by default, so the panel opens
   on the resize controls alone. Each head carries the current
   value, so nothing is hidden - only the controls are.
   ========================================================== */

/* The old in-body headings are replaced by the row head */
.adv-row.quality-section .quality-header {
    display: none;
}

.adv-row.quality-section,
.adv-row.format-section {
    margin-bottom: 0;
}

.adv-row-body .quality-slider-wrapper {
    margin-bottom: 0.75rem;
}

.adv-row-body .format-options {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 0.4rem;
}

.adv-value.quality-value {
    font-size: 0.78rem;
    font-weight: 700;
}