/**
 * Image Scaler - Styles
 * Dark mode default with light mode toggle
 */

/* ========================================
   CSS Custom Properties (Theming)
   ======================================== */

:root {
    /* Color Scheme — tells the browser to render native controls (scrollbars, 
       resize handles, form elements) using dark mode styling */
    color-scheme: dark;

    /* Spacing */
    --spacing-xs: 0.25rem;
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 1.5rem;
    --spacing-xl: 2rem;
    --spacing-2xl: 3rem;

    /* Border Radius */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-full: 9999px;

    /* Transitions */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.2s ease;
    --transition-slow: 0.3s ease;

    /* Shadows */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.1);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.2);

    /* Typography */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif;
    --font-mono: 'SF Mono', 'Fira Code', 'Consolas', monospace;
    --font-size-xs: 0.75rem;
    --font-size-sm: 0.875rem;
    --font-size-base: 1rem;
    --font-size-lg: 1.125rem;
    --font-size-xl: 1.25rem;
    --font-size-2xl: 1.5rem;
}

/* Dark Theme (default) */
[data-theme="dark"] {
    --bg-primary: #0f0f0f;
    --bg-secondary: #1a1a1a;
    --bg-tertiary: #252525;
    --bg-hover: #2a2a2a;
    --bg-active: #333333;

    --text-primary: #f5f5f5;
    --text-secondary: #a0a0a0;
    --text-muted: #666666;

    --border-color: #333333;
    --border-hover: #444444;

    --accent-primary: #6366F1;
    --accent-primary-hover: #4F46E5;
    --accent-converted: #0D9488;
    --accent-converted-hover: #0F766E;
    --accent-success: #D4AF37;
    --accent-success-hover: #C5A028;
    --accent-warning: #F59E0B;
    --accent-error: #EF4444;
    
    /* Logo colors */
    --logo-primary: #4FAFC9;
    --logo-secondary: #B8972E;

    --drop-zone-bg: #1a1a1a;
    --drop-zone-border: #333333;
    --drop-zone-active: #6366F1;

    --slider-track: #333333;
    --slider-fill: #6366F1;
    --slider-thumb: #f5f5f5;

    /* Panel context submenu – elevated so it doesn’t blend into the panel */
    --panel-context-menu-bg: #252525;
    --panel-context-menu-border: #444444;
    --panel-context-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06);
    --panel-context-item-hover: #333333;
}

/* Light Theme */
[data-theme="light"] {
    color-scheme: light;

    --bg-primary: #ffffff;
    --bg-secondary: #f8f9fa;
    --bg-tertiary: #e9ecef;
    --bg-hover: #dee2e6;
    --bg-active: #ced4da;

    --text-primary: #1a1a1a;
    --text-secondary: #495057;
    --text-muted: #868e96;

    --border-color: #dee2e6;
    --border-hover: #adb5bd;

    --accent-primary: #4F46E5;
    --accent-primary-hover: #4338CA;
    --accent-converted: #0D9488;
    --accent-converted-hover: #0F766E;
    --accent-success: #B8972E;
    --accent-success-hover: #A68829;
    --accent-warning: #D97706;
    --accent-error: #DC2626;
    
    /* Logo colors */
    --logo-primary: #18657C;
    --logo-secondary: #96791F;

    --drop-zone-bg: #f8f9fa;
    --drop-zone-border: #dee2e6;
    --drop-zone-active: #4F46E5;

    --slider-track: #dee2e6;
    --slider-fill: #4F46E5;
    --slider-thumb: #1a1a1a;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.08);
    --shadow-lg: 0 10px 25px rgba(0, 0, 0, 0.1);

    /* Panel context submenu */
    --panel-context-menu-bg: #ffffff;
    --panel-context-menu-border: #adb5bd;
    --panel-context-menu-shadow: 0 8px 24px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.06);
    --panel-context-item-hover: #e9ecef;
}

/* ========================================
   Base Styles
   ======================================== */

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

html {
    font-size: 16px;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family);
    background-color: var(--bg-primary);
    color: var(--text-primary);
    line-height: 1.5;
    min-height: 100vh;
    transition: background-color var(--transition-normal), color var(--transition-normal);
}

/* ========================================
   Header
   ======================================== */

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-md) var(--spacing-xl);
    background-color: var(--bg-secondary);
    border-bottom: 1px solid var(--border-color);
    position: sticky;
    top: 0;
    z-index: 100;
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.header-left {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.logo-container {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.logo-icon {
    width: 32px;
    height: 32px;
    flex-shrink: 0;
    /* Snow Cap mark, drawn as a mask so it follows --logo-primary in both themes. */
    background-color: var(--logo-primary);
    -webkit-mask: url("data:image/png;base64,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") center / contain no-repeat;
    mask: url("data:image/png;base64,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") center / contain no-repeat;
}

.logo {
    font-size: var(--font-size-xl);
    font-weight: 600;
    letter-spacing: -0.02em;
}

.version-badge {
    font-size: var(--font-size-xs);
    font-family: var(--font-mono);
    padding: var(--spacing-xs) var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
    color: var(--text-secondary);
    transition: background-color var(--transition-normal);
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.header-context-wrap .panel-context-trigger {
    width: 40px;
    height: 40px;
    background-color: var(--bg-tertiary);
}

.header-context-wrap .panel-context-trigger:hover {
    background-color: var(--bg-hover);
}

.header-context-wrap .panel-context-trigger svg {
    width: 20px;
    height: 20px;
}

.header-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    width: 40px;
    height: 40px;
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast);
}

.header-btn--labeled {
    width: auto;
    padding: 0 var(--spacing-md);
    gap: var(--spacing-xs);
}

/* Home is an anchor, not a button. The browser's own a:link rule outranks a bare
   class selector, so the underline needs a selector that includes the element. */
a.header-btn,
a.header-btn:hover,
a.header-btn:visited {
    text-decoration: none;
}

.header-btn-label {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

.header-btn:hover {
    background-color: var(--bg-hover);
    transform: scale(1.05);
}

.header-btn:active {
    transform: scale(0.95);
}

.header-btn svg {
    width: 20px;
    height: 20px;
}

/* Show/hide sun/moon based on theme */
[data-theme="dark"] .icon-sun {
    display: block;
}

[data-theme="dark"] .icon-moon {
    display: none;
}

[data-theme="light"] .icon-sun {
    display: none;
}

[data-theme="light"] .icon-moon {
    display: block;
}

/* ========================================
   Header Status Tray (Processing Indicator)
   ======================================== */

.header-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
    margin-right: var(--spacing-md);
    animation: statusFadeIn 0.2s ease;
}

@keyframes statusFadeIn {
    from {
        opacity: 0;
        transform: translateX(10px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.header-status-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.header-status-text {
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Completed state */
.header-status.completed {
    background-color: color-mix(in srgb, var(--accent-success) 15%, var(--bg-tertiary));
}

.header-status.completed .header-status-spinner {
    border-color: var(--accent-success);
    border-top-color: var(--accent-success);
    animation: none;
}

.header-status.completed .header-status-text {
    color: var(--accent-success);
}

/* ========================================
   Main Layout
   ======================================== */

.main {
    max-width: 1400px;
    margin: 0 auto;
    padding: var(--spacing-xl);
}

/* ========================================
   Drop Zone
   ======================================== */

.drop-zone {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
    padding: var(--spacing-2xl);
    background-color: var(--drop-zone-bg);
    border: 2px dashed var(--drop-zone-border);
    border-radius: var(--radius-xl);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.drop-zone:hover,
.drop-zone.drag-over {
    border-color: var(--drop-zone-active);
    background-color: var(--bg-tertiary);
}

.drop-zone.drag-over {
    border-style: solid;
}

.drop-zone-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    text-align: center;
}

.drop-icon {
    width: 64px;
    height: 64px;
    color: var(--text-muted);
    transition: color var(--transition-fast), transform var(--transition-fast);
}

.drop-zone:hover .drop-icon,
.drop-zone.drag-over .drop-icon {
    color: var(--accent-primary);
    transform: translateY(-4px);
}

.drop-text {
    font-size: var(--font-size-lg);
    font-weight: 500;
    color: var(--text-primary);
}

.drop-subtext {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

/* Drop Zone Hero */
.drop-zone-hero {
    max-width: 500px;
    margin-bottom: var(--spacing-lg);
}

.hero-title {
    font-size: var(--font-size-2xl);
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    letter-spacing: -0.02em;
}

.hero-subtitle {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
}

/* Conversion Flow Graphic */
.conversion-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: var(--bg-tertiary);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-lg);
    flex-wrap: wrap;
}

.flow-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.format-stack {
    display: grid;
    grid-template-columns: repeat(4, auto);
    gap: var(--spacing-xs);
    justify-content: center;
}

.format-chip {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    font-family: var(--font-mono);
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.format-jpg {
    background: linear-gradient(135deg, #f59e0b22, #f59e0b11);
    color: #f59e0b;
    border: 1px solid #f59e0b44;
}

.format-png {
    background: linear-gradient(135deg, #22c55e22, #22c55e11);
    color: #22c55e;
    border: 1px solid #22c55e44;
}

.format-gif {
    background: linear-gradient(135deg, #a855f722, #a855f711);
    color: #a855f7;
    border: 1px solid #a855f744;
}

.format-webp {
    background: linear-gradient(135deg, #3b82f622, #3b82f611);
    color: #3b82f6;
    border: 1px solid #3b82f644;
}

.format-bmp {
    background: linear-gradient(135deg, #78716c22, #78716c11);
    color: #a8a29e;
    border: 1px solid #78716c44;
}

.format-tiff {
    background: linear-gradient(135deg, #8b5cf622, #8b5cf611);
    color: #a78bfa;
    border: 1px solid #8b5cf644;
}

.format-svg {
    background: linear-gradient(135deg, #f43f5e22, #f43f5e11);
    color: #f43f5e;
    border: 1px solid #f43f5e44;
}

.format-webp-out {
    background: linear-gradient(135deg, #3b82f644, #3b82f622);
    color: #3b82f6;
    border: 1px solid #3b82f688;
    box-shadow: 0 0 8px #3b82f633;
}

.format-avif {
    background: linear-gradient(135deg, #06b6d422, #06b6d411);
    color: #06b6d4;
    border: 1px solid #06b6d444;
}

.format-avif-out {
    background: linear-gradient(135deg, #06b6d444, #06b6d422);
    color: #06b6d4;
    border: 1px solid #06b6d488;
    box-shadow: 0 0 8px #06b6d433;
}

.format-jpg-out {
    background: linear-gradient(135deg, #f59e0b44, #f59e0b22);
    color: #f59e0b;
    border: 1px solid #f59e0b88;
    box-shadow: 0 0 8px #f59e0b33;
}

.format-png-out {
    background: linear-gradient(135deg, #22c55e44, #22c55e22);
    color: #22c55e;
    border: 1px solid #22c55e88;
    box-shadow: 0 0 8px #22c55e33;
}

.output-stack .format-chip {
    animation: pulse-glow 2s ease-in-out infinite;
}

.output-stack .format-chip:nth-child(2) {
    animation-delay: 0.2s;
}

.output-stack .format-chip:nth-child(3) {
    animation-delay: 0.4s;
}

.output-stack .format-chip:nth-child(4) {
    animation-delay: 0.6s;
}

@keyframes pulse-glow {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

.flow-label {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    font-weight: 500;
}

.flow-arrow {
    color: var(--text-muted);
    opacity: 0.6;
}

.flow-arrow svg {
    width: 24px;
    height: 24px;
}

.flow-scaler {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
}

.scaler-icon {
    width: 48px;
    height: 48px;
    color: var(--logo-primary);
    animation: balance 2s ease-in-out infinite;
}

.scaler-icon svg {
    width: 100%;
    height: 100%;
}

@keyframes balance {
    0%, 100% { transform: rotate(0deg); }
    25% { transform: rotate(-3deg); }
    75% { transform: rotate(3deg); }
}

/* Feature Badges */
.feature-badges {
    display: flex;
    gap: var(--spacing-md);
    flex-wrap: wrap;
    justify-content: center;
    margin-bottom: var(--spacing-xl);
}

.feature-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.feature-badge svg {
    width: 16px;
    height: 16px;
    opacity: 0.7;
}

.feature-badge:hover {
    color: var(--text-primary);
    border-color: var(--border-hover);
}

/* Feature Badge Tooltips */
.feature-badge[data-tooltip] {
    position: relative;
    cursor: default;
}

.feature-badge[data-tooltip]::before,
.feature-badge[data-tooltip]::after {
    position: absolute;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity var(--transition-fast), visibility var(--transition-fast), transform var(--transition-fast);
    z-index: 10;
}

.feature-badge[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-xs);
    font-weight: 400;
    line-height: 1.4;
    color: #f5f5f5;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: var(--radius-md);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
    white-space: nowrap;
    max-width: 250px;
    white-space: normal;
    text-align: center;
}

[data-theme="light"] .feature-badge[data-tooltip]::before {
    color: #f5f5f5;
    background: #1f2937;
    border-color: #374151;
}

.feature-badge[data-tooltip]::after {
    content: '';
    bottom: calc(100% + 2px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    border: 6px solid transparent;
    border-top-color: #444;
}

[data-theme="light"] .feature-badge[data-tooltip]::after {
    border-top-color: #374151;
}

.feature-badge[data-tooltip]:hover::before,
.feature-badge[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

/* Drop Zone Upload Section */
.drop-zone-upload {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
    width: 100%;
    max-width: 400px;
}

/* ========================================
   Buttons
   ======================================== */

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-lg);
    font-family: var(--font-family);
    font-size: var(--font-size-base);
    font-weight: 500;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), transform var(--transition-fast), box-shadow var(--transition-fast);
}

.btn:hover {
    transform: translateY(-1px);
}

.btn:active {
    transform: translateY(0);
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.btn-sm {
    padding: var(--spacing-xs) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-md) var(--spacing-xl);
    font-size: var(--font-size-lg);
}

.btn-icon {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.btn-icon svg {
    width: 20px;
    height: 20px;
}

#downloadAllBtn svg {
    width: 22px;
}

.btn-primary {
    background-color: var(--accent-primary);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background-color: var(--accent-primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background-color: var(--bg-tertiary);
    color: var(--text-primary);
}

.btn-secondary:hover:not(:disabled) {
    background-color: var(--bg-hover);
}

.btn-cta {
    background-color: var(--accent-success);
    color: white;
    font-weight: 600;
}

.btn-cta:hover:not(:disabled) {
    background-color: var(--accent-success-hover);
    box-shadow: var(--shadow-md);
}

.btn-success {
    background-color: var(--accent-success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background-color: var(--accent-success-hover);
    box-shadow: var(--shadow-md);
}

/* ========================================
   Workspace Layout
   ======================================== */

.workspace {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: var(--spacing-xl);
    min-height: 600px;
}

/* ========================================
   Options Panel
   ======================================== */

.options-panel {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    border: 1px solid var(--border-color);
    height: fit-content;
    align-self: start;
    position: sticky;
    /* top set via JS to match header + main padding so sticky doesn’t jump */
    top: var(--options-panel-sticky-top, 80px);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

/* When left column is taller than viewport, scroll with page instead of sticking */
.options-panel.options-panel--scroll-sync {
    position: relative;
    top: auto;
}

.panel-context-wrap {
    position: relative;
    flex-shrink: 0;
}

.panel-context-trigger {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    background: transparent;
    border: 1px solid transparent;
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
}

.panel-context-trigger:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
    border-color: var(--border-hover);
}

.panel-context-trigger svg {
    width: 18px;
    height: 18px;
}

.panel-context-menu {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    min-width: 180px;
    padding: var(--spacing-xs);
    background-color: var(--panel-context-menu-bg, var(--bg-tertiary));
    border: 1px solid var(--panel-context-menu-border, var(--border-hover));
    border-radius: var(--radius-md);
    box-shadow: var(--panel-context-menu-shadow, var(--shadow-lg));
    z-index: 100;
}

.panel-context-menu[hidden] {
    display: none;
}

.panel-context-item {
    display: block;
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    text-align: left;
    font-size: var(--font-size-sm);
    line-height: 1.35;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    min-height: 32px;
    box-sizing: border-box;
}

.panel-context-item:hover:not(:disabled) {
    background-color: var(--panel-context-item-hover, var(--bg-hover));
}

.panel-context-item:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.panel-context-item[hidden] {
    display: none;
}

.option-group {
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
    margin-bottom: var(--spacing-md);
}

.option-group:last-of-type {
    margin-bottom: 0;
}

/* Single mode styling - amber/orange accent for option groups */
.options-panel.single-mode .option-group:not(#scopeToggle) {
    border-left: 3px solid var(--accent-warning);
    background: linear-gradient(135deg, 
        color-mix(in srgb, var(--accent-warning) 8%, var(--bg-tertiary)),
        var(--bg-tertiary)
    );
}

/* Single mode - format buttons active state */
.options-panel.single-mode .format-btn.active {
    background-color: var(--accent-warning);
    border-color: var(--accent-warning);
}

.options-panel.single-mode .format-btn.active:hover:not(:disabled) {
    background-color: #d97706;
    border-color: #d97706;
}

/* Single mode - preset buttons active state */
.options-panel.single-mode .preset-btn.active {
    background-color: var(--accent-warning);
    border-color: var(--accent-warning);
}

.options-panel.single-mode .preset-btn.active:hover {
    background-color: #d97706;
    border-color: #d97706;
}

/* Single mode - aspect lock active state */
.options-panel.single-mode .aspect-lock.active {
    background-color: var(--accent-warning);
    border-color: var(--accent-warning);
}

/* Single mode - toggle buttons active state (EXIF, filename dims) */
.options-panel.single-mode .toggle-btn.active:not([data-scope]) {
    background-color: var(--accent-warning);
    border-color: var(--accent-warning);
}

.options-panel.single-mode .toggle-btn.active:not([data-scope]):hover {
    background-color: #d97706;
    border-color: #d97706;
}

/* Single mode - quality slider accent */
.options-panel.single-mode .quality-slider::-webkit-slider-thumb {
    border-color: var(--accent-warning);
}

.options-panel.single-mode .quality-slider::-moz-range-thumb {
    border-color: var(--accent-warning);
}

/* Single mode - resize input focus state */
.options-panel.single-mode .resize-input:focus {
    border-color: var(--accent-warning);
}

.options-panel.single-mode .resize-input.manually-edited {
    border-color: var(--accent-warning);
    background-color: color-mix(in srgb, var(--accent-warning) 8%, var(--bg-secondary));
}

.options-panel.single-mode .resize-input.manually-edited:focus {
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-warning) 20%, transparent);
}

.option-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

/* Format Buttons */
.format-buttons {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--spacing-xs);
}

.format-btn {
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.format-btn:hover:not(:disabled):not(.active) {
    background-color: var(--bg-hover);
    border-color: var(--border-hover);
}

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

.format-btn.active:hover:not(:disabled) {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

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

/* Tooltip wrapper for disabled buttons */
.btn-tooltip-wrapper {
    position: relative;
}

.btn-tooltip-wrapper > .format-btn {
    width: 100%;
}

.btn-tooltip-wrapper[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    color: #f5f5f5;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    width: 220px;
    text-align: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 99999;
}

.btn-tooltip-wrapper[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Quality Header */
.quality-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-sm);
}

.quality-header .option-label {
    margin-bottom: 0;
}

/* Auto Quality Button Group */
.auto-quality-buttons {
    display: flex;
    gap: 2px;
}

.auto-quality-buttons .auto-quality-btn:first-child {
    border-radius: var(--radius-sm) 0 0 var(--radius-sm);
}

.auto-quality-buttons .auto-quality-btn:last-child {
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.auto-quality-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-xs);
    font-weight: 500;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.auto-quality-btn:hover:not(.active) {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

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

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

.auto-quality-btn.calculating {
    opacity: 0.7;
    cursor: wait;
}

.auto-quality-btn.calculating svg {
    animation: spin 1s linear infinite;
}

.auto-quality-btn.disabled,
.auto-quality-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

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

.size-estimate-text {
    width: 100%;
}

.auto-badge {
    display: inline-block;
    padding: 3px 8px;
    font-size: var(--font-size-xs);
    font-weight: 500;
    background-color: var(--accent-primary);
    color: white;
    border-radius: var(--radius-sm);
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Quality Slider */
.quality-slider {
    width: 100%;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--slider-track);
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

.quality-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-thumb);
    border: 2px solid var(--accent-primary);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.quality-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.quality-slider::-moz-range-thumb {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--slider-thumb);
    border: 2px solid var(--accent-primary);
    cursor: pointer;
}

.size-estimate {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    margin-bottom: var(--spacing-sm);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* ========================================
   SVG Tracing Controls
   ======================================== */

.svg-controls-group {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.svg-preset-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    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='%239ca3af' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 32px;
}

.svg-preset-select:hover {
    border-color: var(--border-hover);
}

.svg-preset-select:focus {
    outline: none;
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.svg-details {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.svg-details-summary {
    display: flex;
    align-items: center;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    user-select: none;
    background-color: var(--bg-secondary);
    transition: background-color var(--transition-fast);
    list-style: none;
}

.svg-details-summary::-webkit-details-marker {
    display: none;
}

.svg-details-summary::before {
    content: '▶';
    font-size: 10px;
    margin-right: var(--spacing-sm);
    transition: transform 0.15s ease;
    color: var(--text-secondary);
}

.svg-details[open] > .svg-details-summary::before {
    transform: rotate(90deg);
}

.svg-details-summary:hover {
    background-color: var(--bg-hover);
}

.svg-details-summary-text {
    flex: 1;
}

.svg-section-reset-btn {
    position: relative;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    margin-left: var(--spacing-sm);
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color var(--transition-fast), background-color var(--transition-fast);
}
.svg-section-reset-btn[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    padding: 6px 10px;
    font-size: 12px;
    line-height: 1.4;
    white-space: nowrap;
    color: #f5f5f5;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 99999;
}
.svg-section-reset-btn[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}
.svg-section-reset-btn:hover:not(:disabled) {
    color: var(--text-primary);
    background-color: var(--bg-hover);
}
.svg-section-reset-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.svg-details-body {
    padding: var(--spacing-sm) var(--spacing-md) var(--spacing-md);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.svg-control-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.svg-control-row label {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-weight: 500;
}

.svg-val {
    color: var(--accent-primary);
    font-family: var(--font-mono);
    font-weight: 600;
}

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

.svg-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slider-thumb);
    border: 2px solid var(--accent-primary);
    cursor: pointer;
    transition: transform var(--transition-fast);
}

.svg-slider::-webkit-slider-thumb:hover {
    transform: scale(1.1);
}

.svg-slider::-moz-range-thumb {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: var(--slider-thumb);
    border: 2px solid var(--accent-primary);
    cursor: pointer;
}

.svg-number-input {
    width: 80px;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
}

.svg-number-input:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px rgba(99, 102, 241, 0.2);
}

.svg-control-row-checkbox {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.svg-checkbox {
    width: 18px;
    height: 18px;
    accent-color: var(--accent-primary);
    cursor: pointer;
}

.btn-trace {
    width: 100%;
    margin-top: var(--spacing-sm);
    background-color: var(--accent-primary);
    color: white;
    font-weight: 600;
}

.btn-trace:hover:not(:disabled) {
    background-color: var(--accent-primary-hover);
    box-shadow: var(--shadow-md);
}

.btn-trace:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.svg-trace-status {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) 0;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.svg-trace-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

.svg-downscale-note {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-style: italic;
    margin: 0;
}

/* Resize Presets */
.resize-presets {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-md);
}

.preset-btn {
    flex: 1;
    padding: var(--spacing-xs) var(--spacing-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background-color: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.svg-presets .preset-btn {
    flex: 0 1 auto;
}

.preset-btn:hover:not(.active) {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

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

.preset-btn.active:hover {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

/* Resize Dimensions */
.resize-dimensions {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-xs);
}

.dimension-input {
    position: relative;
    display: flex;
    align-items: center;
}

.dimension-input label {
    position: absolute;
    left: 10px;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    font-weight: 600;
    text-transform: uppercase;
    pointer-events: none;
}

.resize-input {
    width: 90px;
    padding: var(--spacing-sm);
    padding-left: 28px;
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    outline: none;
    transition: border-color var(--transition-fast);
}

.resize-input:focus {
    border-color: var(--accent-primary);
}

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

/* Manually edited dimension indicator */
.resize-input.manually-edited {
    border-color: var(--accent-primary);
    background-color: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-secondary));
}

.resize-input.manually-edited:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.aspect-lock {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.aspect-lock svg {
    width: 18px;
    height: 18px;
}

.aspect-lock .unlock-icon {
    display: block;
}

.aspect-lock .lock-icon {
    display: none;
}

.aspect-lock.active .unlock-icon {
    display: none;
}

.aspect-lock.active .lock-icon {
    display: block;
}

.aspect-lock:hover {
    background-color: var(--bg-hover);
}

.aspect-lock.active {
    background-color: var(--accent-primary);
    border-color: var(--accent-primary);
    color: white;
}

/* Toggle Group */
.toggle-group {
    display: flex;
    gap: var(--spacing-xs);
}

/* Filename dimensions toggle - allow wrapping within panel */
#filenameDimsGroup .toggle-group {
    flex-wrap: wrap;
    width: 100%;
}

#filenameDimsGroup .toggle-btn {
    flex: 0 1 auto;
    white-space: nowrap;
}

.toggle-btn {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-sm);
    font-family: var(--font-family);
    font-size: var(--font-size-sm);
    font-weight: 500;
    background-color: var(--bg-secondary);
    color: var(--text-primary);
    border: 1px solid var(--border-color);
    white-space: nowrap;
    text-align: center;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toggle-btn:hover:not(.active) {
    background-color: var(--bg-hover);
}

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

.toggle-btn.active:hover {
    background-color: var(--accent-primary-hover);
    border-color: var(--accent-primary-hover);
}

/* "This image" scope button - amber/orange when active */
.toggle-btn[data-scope="single"].active {
    background-color: var(--accent-warning);
    border-color: var(--accent-warning);
}

.toggle-btn[data-scope="single"].active:hover {
    background-color: #d97706;
    border-color: #d97706;
}

/* Small toggle group variant */
.toggle-group-sm .toggle-btn {
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
}

/* Apply to All button - shows when current image has different settings */
.btn-apply-to-all {
    margin-top: var(--spacing-sm);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: #fff;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    border: none;
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all 0.2s ease;
    width: 100%;
}

.btn-apply-to-all:hover {
    background: linear-gradient(135deg, #fbbf24, #f59e0b);
    transform: translateY(-1px);
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.3);
}

.btn-apply-to-all:active {
    transform: translateY(0);
}


/* Toggle Button Tooltips */
.toggle-btn[data-tooltip] {
    position: relative;
}

.toggle-btn[data-tooltip]::before,
.toggle-btn[data-tooltip]::after {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 99999;
}

.toggle-btn[data-tooltip]::before {
    content: attr(data-tooltip);
    bottom: calc(100% + 8px);
    padding: 10px 14px;
    font-size: 13px;
    font-weight: 400;
    line-height: 1.5;
    white-space: normal;
    word-wrap: break-word;
    color: #f5f5f5;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
    width: 220px;
    text-align: center;
}

.toggle-btn[data-tooltip]::after {
    content: '';
    bottom: calc(100% - 6px);
    border: 8px solid transparent;
    border-top-color: #1a1a1a;
    filter: drop-shadow(0 1px 0 #444);
}

[data-theme="light"] .toggle-btn[data-tooltip]::before {
    background: #1f2937;
    border-color: #374151;
}

[data-theme="light"] .toggle-btn[data-tooltip]::after {
    border-top-color: #1f2937;
    filter: drop-shadow(0 1px 0 #374151);
}

.toggle-btn[data-tooltip]:hover::before,
.toggle-btn[data-tooltip]:hover::after {
    opacity: 1;
    visibility: visible;
}

.exif-no-data {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
    margin: var(--spacing-xs) 0 0 0;
}

.option-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-sm);
    line-height: 1.4;
}

/* Action Buttons */
.action-buttons {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.batch-total-estimate {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    text-align: center;
    margin: 0;
}

/* ========================================
   Preview Area
   ======================================== */

.preview-area {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    min-height: 0;
}

.preview-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    min-height: 280px;
    height: 40vh; /* CSS fallback — overridden by JS dynamic sizing on first render */
    max-height: 85vh;
    resize: vertical;
    overflow: hidden;
}

/* info-row removed — metadata panel now sits below batch results */

/* ========================================
   Metadata Panel
   ======================================== */

.metadata-panel {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
    transition: background-color var(--transition-normal), border-color var(--transition-normal);
}

.metadata-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin-bottom: var(--spacing-md);
}

.metadata-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.metadata-section {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-md);
}

.metadata-section-exif {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
}

.metadata-section-header {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.metadata-section-title {
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.metadata-section-badge {
    font-size: var(--font-size-xs);
    font-weight: 500;
    padding: 2px 8px;
    border-radius: var(--radius-full);
}

.metadata-section-badge.has-data {
    background-color: var(--accent-primary);
    color: white;
}

.metadata-section-badge.no-data {
    background-color: var(--bg-tertiary);
    color: var(--text-muted);
}

.metadata-exif-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm) var(--spacing-md);
}

.metadata-no-exif {
    font-size: var(--font-size-sm);
    color: var(--text-muted);
    font-style: italic;
}

.metadata-item {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

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

.metadata-value {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    font-family: var(--font-mono);
    word-break: break-all;
}

/* ========================================
   Comparison Slider
   ======================================== */

.comparison-container {
    position: relative;
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    overflow: hidden;
    border: 1px solid var(--border-color);
}

.comparison-container:not(.actual-pixel-size) .comparison-wrapper {
    align-self: stretch;
    flex: 1 1 0%;
    min-height: 0;
}

.preview-corner-actions {
    position: absolute;
    top: var(--spacing-md);
    right: var(--spacing-md);
    z-index: 10;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--spacing-sm);
}

/* Preview size dropdown */
.preview-size-dropdown {
    position: relative;
}

.preview-size-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
    z-index: 20;
    min-width: 220px;
    padding: 4px;
    /* Closed: hidden by default */
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease, visibility 0.15s ease;
}

/* Ghost preview on hover (when menu closed) — opaque backdrop, faint text */
.preview-size-dropdown:hover:not(.menu-open) .preview-size-menu {
    opacity: 1;
    visibility: visible;
    background: rgba(26, 26, 26, 0.92);
    border-color: rgba(68, 68, 68, 0.6);
}
.preview-size-dropdown:hover:not(.menu-open) .preview-size-menu .preview-size-menu-item {
    color: rgba(255, 255, 255, 0.3);
}
.preview-size-dropdown:hover:not(.menu-open) .preview-size-menu .preview-size-menu-item[aria-checked="true"] {
    color: rgba(99, 102, 241, 0.35);
}
.preview-size-dropdown:hover:not(.menu-open) .preview-size-menu .menu-item-default {
    color: rgba(255, 255, 255, 0.225);
}

[data-theme="light"] .preview-size-dropdown:hover:not(.menu-open) .preview-size-menu {
    background: rgba(248, 249, 250, 0.94);
    border-color: rgba(173, 181, 189, 0.6);
}
[data-theme="light"] .preview-size-dropdown:hover:not(.menu-open) .preview-size-menu .preview-size-menu-item {
    color: rgba(26, 26, 26, 0.325);
}
[data-theme="light"] .preview-size-dropdown:hover:not(.menu-open) .preview-size-menu .preview-size-menu-item[aria-checked="true"] {
    color: rgba(79, 70, 229, 0.375);
}
[data-theme="light"] .preview-size-dropdown:hover:not(.menu-open) .preview-size-menu .menu-item-default {
    color: rgba(26, 26, 26, 0.25);
}

/* Hover-open: user hovered button then moved to menu — keep menu visible and clickable */
.preview-size-dropdown.hover-open:not(.menu-open) .preview-size-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
.preview-size-dropdown.hover-open:not(.menu-open) .preview-size-menu .preview-size-menu-item {
    color: var(--text-primary);
}
.preview-size-dropdown.hover-open:not(.menu-open) .preview-size-menu .preview-size-menu-item[aria-checked="true"] {
    color: var(--accent-primary);
}
.preview-size-dropdown.hover-open:not(.menu-open) .preview-size-menu .menu-item-default {
    color: var(--text-muted);
}
[data-theme="light"] .preview-size-dropdown.hover-open:not(.menu-open) .preview-size-menu {
    background: var(--bg-secondary);
    border-color: var(--border-color);
}
[data-theme="light"] .preview-size-dropdown.hover-open:not(.menu-open) .preview-size-menu .preview-size-menu-item {
    color: var(--text-primary);
}
[data-theme="light"] .preview-size-dropdown.hover-open:not(.menu-open) .preview-size-menu .preview-size-menu-item[aria-checked="true"] {
    color: var(--accent-primary);
}
[data-theme="light"] .preview-size-dropdown.hover-open:not(.menu-open) .preview-size-menu .menu-item-default {
    color: var(--text-muted);
}

/* Full menu when open (click) */
.preview-size-dropdown.menu-open .preview-size-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    animation: log-menu-in 0.12s ease-out;
}

/* Same dimensions: show only "Show Actual Pixels"; hide Original/Converted and their Default */
.preview-size-dropdown.preview-size-dims-same .preview-size-menu-item-when-scaled,
.preview-size-dropdown.preview-size-dims-same #previewSizeDefaultConverted {
    display: none;
}
/* Scaled: show Original/Converted; hide "Show Actual Pixels" and its Default */
.preview-size-dropdown.preview-size-dims-scaled .preview-size-menu-item-when-same,
.preview-size-dropdown.preview-size-dims-scaled #previewSizeDefaultActual {
    display: none;
}
/* Vector output (SVG): hide "Show as Converted" and "Show Actual Pixels", show only Fit + Original */
.preview-size-dropdown.preview-size-vector-output .preview-size-menu-item-when-same,
.preview-size-dropdown.preview-size-vector-output #previewSizeDefaultActual,
.preview-size-dropdown.preview-size-vector-output #previewSizeDefaultConverted,
.preview-size-dropdown.preview-size-vector-output [data-mode="converted"] {
    display: none;
}

.preview-size-menu-item {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    text-align: left;
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.1s;
}

.preview-size-menu-item:hover {
    background: var(--bg-hover);
}

.preview-size-menu-item[aria-checked="true"] {
    background: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    color: var(--accent-primary);
}

.preview-size-menu-item .menu-item-default {
    margin-left: auto;
    padding-left: 12px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.preview-reset-size-btn,
.preview-actual-size-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xs) var(--spacing-sm);
    color: var(--text-primary);
    background-color: rgba(0, 0, 0, 0.6);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

/* Preview mode icon states: converted=default (dark), fit=purple, original=teal */
.preview-actual-size-btn[data-preview-mode="fit"] {
    background-color: var(--accent-primary);
    color: white;
    border-color: var(--accent-primary);
}

.preview-actual-size-btn[data-preview-mode="original"] {
    background-color: var(--accent-converted);
    color: white;
    border-color: var(--accent-converted);
}

.preview-actual-size-btn[data-preview-mode="converted"] {
    background-color: rgba(0, 0, 0, 0.6);
    color: var(--text-primary);
    border-color: var(--border-color);
}

.preview-actual-size-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.preview-actual-size-btn:hover {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
}

.preview-actual-size-btn[data-preview-mode="fit"]:hover {
    background-color: var(--accent-primary-hover);
    color: white;
    border-color: var(--accent-primary-hover);
}

.preview-actual-size-btn[data-preview-mode="original"]:hover {
    background-color: var(--accent-converted-hover);
    color: white;
    border-color: var(--accent-converted-hover);
}

.preview-actual-size-btn[data-preview-mode="converted"]:hover {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
    border-color: var(--border-color);
}

.preview-reset-size-btn,
.preview-actual-size-btn {
    position: relative;
}

.preview-reset-size-btn[data-tooltip]::before {
    content: attr(data-tooltip);
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    left: auto;
    transform: none;
    padding: 8px 12px;
    font-size: 13px;
    line-height: 1.4;
    white-space: nowrap;
    color: #f5f5f5;
    background: #1a1a1a;
    border: 1px solid #444;
    border-radius: var(--radius-sm);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.4);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 99999;
}

.preview-reset-size-btn[data-tooltip]:hover::before {
    opacity: 1;
    visibility: visible;
}

/* Preview size button: no tooltip (ghost menu on hover instead) */
.preview-actual-size-btn[data-tooltip]::before {
    content: none !important;
    display: none !important;
}

.preview-reset-size-btn:hover {
    background-color: rgba(0, 0, 0, 0.75);
    color: white;
}

.preview-reset-size-btn svg {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

/* Actual pixel size: wrapper is a fixed viewport (never expands pane); image centered and clipped */
.comparison-container.actual-pixel-size .comparison-wrapper {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    flex: none;
}

.comparison-container.actual-pixel-size .comparison-before,
.comparison-container.actual-pixel-size .comparison-after {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(calc(-50% + var(--pan-x, 0px)), calc(-50% + var(--pan-y, 0px)));
    width: var(--preview-natural-width);
    height: var(--preview-natural-height);
    max-width: none;
    max-height: none;
    object-fit: none;
    object-position: center;
}

/* After image: use contain so resized conversions scale to match the before image's display area.
   When dimensions match (no resize), contain and none produce identical results.
   When the after is smaller (resize applied), contain scales it up to fill the CSS box,
   keeping the comparison slider aligned. */
.comparison-container.actual-pixel-size .comparison-after {
    object-fit: contain;
}

/* Show as Converted: box uses converted dimensions; before (original) scales to fit */
.comparison-container.actual-pixel-size.preview-converted-size .comparison-before {
    object-fit: contain;
}

/* Pan cursor for actual pixel size when image is clipped */
.comparison-container.actual-pixel-size.pannable .comparison-wrapper {
    cursor: grab;
}

.comparison-container.actual-pixel-size.panning .comparison-wrapper {
    cursor: grabbing;
}

/* Keep comparison handle cursor regardless of pan state */
.comparison-container.actual-pixel-size.pannable .comparison-handle,
.comparison-container.actual-pixel-size.panning .comparison-handle {
    cursor: ew-resize;
}

/* Hide the drag handle (circle) while panning; keep the bar visible */
.comparison-container.actual-pixel-size.panning .comparison-handle .handle-circle {
    visibility: hidden;
}

.comparison-wrapper {
    position: relative;
    z-index: 1;
    flex: 1 1 0%;
    min-height: 0;
    min-width: 0;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    user-select: none;
}

.comparison-before {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    background-color: var(--bg-tertiary);
}

.comparison-after-wrapper {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    clip-path: inset(0 0 0 50%);
    /* No background - let the before image show through */
}

.comparison-after {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    object-fit: contain;
    object-position: center;
    /* No background on after image - prevents visual artifacts in clipped area */
}

.comparison-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 4px;
    background-color: white;
    cursor: ew-resize;
    z-index: 10;
    transform: translateX(-50%);
}

.handle-line {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 2px;
    background-color: white;
    transform: translateX(-50%);
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

.handle-circle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 44px;
    height: 44px;
    background-color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-lg);
}

.handle-circle svg {
    width: 16px;
    height: 16px;
    color: var(--bg-primary);
}

.comparison-label {
    position: absolute;
    bottom: var(--spacing-md);
    padding: var(--spacing-xs) var(--spacing-sm);
    font-size: var(--font-size-xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    background-color: rgba(0, 0, 0, 0.7);
    color: white;
    border-radius: var(--radius-sm);
}

.label-before {
    left: var(--spacing-md);
}

.label-after {
    right: var(--spacing-md);
}

/* ========================================
   File Queue (Batch Mode)
   ======================================== */

.file-queue {
    position: relative;
    display: flex;
    flex-direction: column;
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 2px solid var(--border-color);
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.queue-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.queue-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
}

.queue-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.queue-action-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    border: none;
    border-radius: var(--radius-md);
    background-color: var(--bg-tertiary);
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 500;
    cursor: pointer;
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.queue-action-btn:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.queue-action-btn svg {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
}

.queue-action-btn.add-files-btn {
    color: var(--success-color);
}

.queue-action-btn.add-files-btn:hover {
    background-color: rgba(34, 197, 94, 0.1);
    color: var(--success-color);
}

.queue-action-btn.close-all-btn:hover {
    background-color: rgba(239, 68, 68, 0.1);
    color: var(--error-color);
}

.queue-drop-hint {
    display: none;
    flex-direction: column;
    gap: var(--spacing-sm);
    position: absolute;
    inset: 0;
    background-color: rgba(15, 15, 15, 0.85);
    backdrop-filter: blur(4px);
    border-radius: var(--radius-lg);
    align-items: center;
    justify-content: center;
    pointer-events: none;
    z-index: 10;
}

[data-theme="light"] .queue-drop-hint {
    background-color: rgba(255, 255, 255, 0.9);
}

.queue-drop-hint-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-xl);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.15), rgba(59, 130, 246, 0.05));
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-lg);
}

.queue-drop-icon {
    width: 48px;
    height: 48px;
    color: var(--accent-primary);
}

.queue-drop-hint span {
    font-size: var(--font-size-lg);
    font-weight: 600;
    color: var(--accent-primary);
    letter-spacing: 0.02em;
}

/* Show drop zone indicator when dragging anywhere on viewport */
.file-queue.drag-over {
    border-color: var(--accent-primary);
    border-style: dashed;
    background-color: rgba(59, 130, 246, 0.05);
}

.file-queue.drag-over .queue-drop-hint {
    display: flex;
    background-color: rgba(59, 130, 246, 0.15);
}

/* Gold highlight when hovering directly over the Files section */
.file-queue.drag-over-direct {
    border-color: var(--accent-warning);
    background-color: rgba(245, 158, 11, 0.08);
}

.file-queue.drag-over-direct .queue-drop-hint {
    background-color: rgba(245, 158, 11, 0.2);
}

.file-queue.drag-over-direct .queue-drop-hint-content {
    border-color: var(--accent-warning);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.2), rgba(245, 158, 11, 0.08));
}

.file-queue.drag-over-direct .queue-drop-icon,
.file-queue.drag-over-direct .queue-drop-hint span {
    color: var(--accent-warning);
}

.queue-list {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-sm);
    align-content: start;
}

/* Queue Pagination */
.queue-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    margin-top: var(--spacing-md);
    padding-top: var(--spacing-md);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.queue-pagination[hidden] {
    display: none !important;
}

.queue-page-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.queue-page-btn:hover:not(:disabled) {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.queue-page-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.queue-page-btn svg {
    width: 16px;
    height: 16px;
}

.queue-page-info {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    min-width: 60px;
    text-align: center;
}

.queue-item {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    cursor: pointer;
    transition: background-color var(--transition-fast);
    min-height: 48px;
}

.queue-item:hover {
    background-color: var(--bg-hover);
}

.queue-item.active {
    background-color: var(--accent-primary);
    color: white;
}


/* Thumbnail wrapper for positioning the extension pill */
.queue-item-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
}

.queue-item-thumb {
    width: 32px;
    height: 32px;
    object-fit: cover;
    border-radius: var(--radius-sm);
}

/* Extension pill - overlays thumbnail upper-left */
.queue-item-ext {
    position: absolute;
    top: -4px;
    left: -4px;
    font-size: 8px;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 1px 4px;
    border-radius: 3px;
    line-height: 1.2;
    z-index: 1;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.15);
}

.queue-item-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    font-size: 0.75rem;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}

.queue-item-remove {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    background: none;
    border: none;
    color: inherit;
    opacity: 0.5;
    cursor: pointer;
    transition: opacity var(--transition-fast);
    font-size: 14px;
    line-height: 1;
}

.queue-item-remove:hover {
    opacity: 1;
}

/* Extension pill colors - opaque background with colored border */
.queue-item-ext.ext-jpg,
.queue-item-ext.ext-jpeg,
.result-item-ext.ext-jpg,
.result-item-ext.ext-jpeg {
    background: #1a1a1a;
    color: #f59e0b;
    border: 1px solid #f59e0b;
}

.queue-item-ext.ext-png,
.result-item-ext.ext-png {
    background: #1a1a1a;
    color: #22c55e;
    border: 1px solid #22c55e;
}

.queue-item-ext.ext-gif,
.result-item-ext.ext-gif {
    background: #1a1a1a;
    color: #a855f7;
    border: 1px solid #a855f7;
}

.queue-item-ext.ext-webp,
.result-item-ext.ext-webp {
    background: #1a1a1a;
    color: #3b82f6;
    border: 1px solid #3b82f6;
}

.queue-item-ext.ext-avif,
.result-item-ext.ext-avif {
    background: #1a1a1a;
    color: #06b6d4;
    border: 1px solid #06b6d4;
}

.queue-item-ext.ext-bmp,
.result-item-ext.ext-bmp {
    background: #1a1a1a;
    color: #a8a29e;
    border: 1px solid #78716c;
}

.queue-item-ext.ext-tiff,
.queue-item-ext.ext-tif,
.result-item-ext.ext-tiff,
.result-item-ext.ext-tif {
    background: #1a1a1a;
    color: #a78bfa;
    border: 1px solid #8b5cf6;
}

.queue-item-ext.ext-svg,
.result-item-ext.ext-svg {
    background: #1a1a1a;
    color: #f43f5e;
    border: 1px solid #f43f5e;
}

/* ========================================
   Viewport Drop Overlay
   ======================================== */

.viewport-drop-overlay {
    position: fixed;
    inset: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(15, 15, 15, 0.8);
    backdrop-filter: blur(6px);
    animation: overlayFadeIn 0.15s ease;
}

[data-theme="light"] .viewport-drop-overlay {
    background-color: rgba(255, 255, 255, 0.85);
}

@keyframes overlayFadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

.viewport-drop-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-2xl) var(--spacing-2xl);
    border: 2px dashed var(--accent-primary);
    border-radius: var(--radius-xl);
    background: linear-gradient(135deg, rgba(99, 102, 241, 0.12), rgba(99, 102, 241, 0.04));
    pointer-events: none;
}

.viewport-drop-icon {
    width: 64px;
    height: 64px;
    color: var(--accent-primary);
}

.viewport-drop-content span {
    font-size: var(--font-size-xl);
    font-weight: 600;
    color: var(--accent-primary);
    letter-spacing: 0.02em;
}

/* Dismiss button for viewport drop overlay */
.viewport-drop-dismiss {
    position: absolute;
    top: var(--spacing-lg);
    right: var(--spacing-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-md);
    color: var(--text-secondary);
    cursor: pointer;
    pointer-events: auto;
    transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast);
    z-index: 1;
}

.viewport-drop-dismiss:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.5);
    color: #ef4444;
}

.viewport-drop-dismiss svg {
    width: 20px;
    height: 20px;
}

[data-theme="light"] .viewport-drop-dismiss {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.15);
    color: var(--text-muted);
}

[data-theme="light"] .viewport-drop-dismiss:hover {
    background: rgba(239, 68, 68, 0.15);
    border-color: rgba(239, 68, 68, 0.4);
    color: #dc2626;
}

/* ========================================
   Batch Results
   ======================================== */

.batch-results {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-lg);
    border: 1px solid var(--border-color);
}

.batch-results-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--spacing-md);
    gap: var(--spacing-md);
}

.batch-results-actions {
    display: flex;
    gap: var(--spacing-sm);
}

.results-title {
    font-size: var(--font-size-base);
    font-weight: 600;
    margin: 0;
}

.results-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.result-item {
    display: flex;
    flex-direction: column;
    min-height: 0;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-md);
    overflow: hidden;
    border: 1px solid var(--border-color);
    cursor: pointer;
    transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

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

.result-item.active {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

/* Thumbnail wrapper for positioning ext pill + close button */
.result-thumb-wrap {
    position: relative;
    width: 100%;
    flex-shrink: 0;
}

.result-thumb {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: contain;
    background-color: var(--bg-primary);
    display: block;
}

/* Extension pill on result thumbnail */
.result-item-ext {
    position: absolute;
    top: 6px;
    left: 6px;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    padding: 2px 5px;
    border-radius: 3px;
    line-height: 1.2;
    z-index: 2;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(0, 0, 0, 0.15);
}

/* Close button on result thumbnail */
.result-item-close {
    position: absolute;
    top: 4px;
    right: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    background: rgba(0, 0, 0, 0.6);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-sm);
    color: rgba(255, 255, 255, 0.8);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    opacity: 0;
    transition: opacity var(--transition-fast), background-color var(--transition-fast), color var(--transition-fast);
    z-index: 2;
}

.result-item:hover .result-item-close {
    opacity: 1;
}

.result-item-close:hover {
    background: rgba(239, 68, 68, 0.85);
    border-color: rgba(239, 68, 68, 0.5);
    color: white;
}

.result-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: var(--spacing-sm);
}

.result-name {
    font-size: 0.75rem;
    font-weight: 500;
    margin-bottom: var(--spacing-xs);
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    white-space: normal;
    word-break: break-word;
}

.result-size {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    font-family: var(--font-mono);
    margin-bottom: var(--spacing-md);
}

.result-download {
    width: 100%;
    margin-top: auto;
    border: 1px solid var(--border-color);
}

.result-download:hover:not(:disabled) {
    border-color: var(--border-hover);
}

/* Result item processing states */
.result-item {
    position: relative;
}

.result-item.processing .result-thumb,
.result-item.queued .result-thumb {
    opacity: 0.4;
}

.result-item.processing::before,
.result-item.queued::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    pointer-events: none;
}

/* Processing spinner overlay - centered on thumbnail area */
.result-item.processing::after {
    content: '';
    position: absolute;
    top: 37.5%;
    left: 50%;
    width: 64px;
    height: 64px;
    margin-top: -32px;
    margin-left: -32px;
    border: 4px solid var(--border-color);
    border-top-color: var(--accent-primary);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    z-index: 2;
}

/* Queued state - subtle indicator centered on thumbnail */
.result-item.queued::after {
    content: '';
    position: absolute;
    top: 37.5%;
    left: 50%;
    width: 48px;
    height: 48px;
    margin-top: -24px;
    margin-left: -24px;
    border: 3px solid var(--text-muted);
    border-radius: 50%;
    opacity: 0.5;
    z-index: 2;
}

/* Hide Save button while processing/queued */
.result-item.processing .result-download,
.result-item.queued .result-download {
    opacity: 0.3;
    pointer-events: none;
}

/* Placeholder text for queued items */
.result-item.queued .result-size,
.result-item.processing .result-size {
    color: var(--text-muted);
}

/* ========================================
   Toast Notifications
   ======================================== */

.toast-container {
    position: fixed;
    bottom: var(--spacing-xl);
    right: var(--spacing-xl);
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    z-index: 1000;
    pointer-events: none;
}

.toast {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-lg);
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    pointer-events: auto;
    animation: slideIn 0.3s ease;
}

.toast.success {
    border-left: 4px solid var(--accent-success);
}

.toast.error {
    border-left: 4px solid var(--accent-error);
}

.toast.warning {
    border-left: 4px solid var(--accent-warning);
}

.toast-message {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.toast-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    background: none;
    border: none;
    color: var(--text-muted);
    cursor: pointer;
    transition: color var(--transition-fast);
}

.toast-close:hover {
    color: var(--text-primary);
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateX(100%);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

@keyframes slideOut {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(100%);
    }
}

.toast.hiding {
    animation: slideOut 0.3s ease forwards;
}

/* ========================================
   Progress Overlay
   ======================================== */

.progress-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

.progress-modal {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    min-width: 300px;
    text-align: center;
    box-shadow: var(--shadow-lg);
}

.progress-modal h3 {
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-lg);
}

.progress-bar {
    width: 100%;
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--spacing-md);
}

.progress-fill {
    height: 100%;
    background-color: var(--accent-primary);
    border-radius: var(--radius-full);
    transition: width 0.3s ease;
    width: 0%;
}

.progress-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    font-family: var(--font-mono);
}

/* ========================================
   Settings Modal
   ======================================== */

.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 1000;
    backdrop-filter: blur(4px);
}

/* Confirmation / stacked dialogs that can open on top of Settings or Dev Center */
.modal-overlay--stacked {
    z-index: 1100;
}

.modal {
    background-color: var(--bg-secondary);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    max-width: 500px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
}

.settings-modal {
    width: min(90vw, 1100px);
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.settings-modal .modal-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
}

.settings-modal .modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border-top: 1px solid var(--border-color);
    flex-shrink: 0;
}

.settings-modal .modal-footer-actions--left {
    display: flex;
    gap: var(--spacing-sm);
}

.settings-version-label {
    font-size: 0.55em;
    font-weight: 400;
    color: var(--text-muted, #666);
    opacity: 0.45;
    user-select: none;
    margin-left: 0.35em;
    vertical-align: baseline;
}

.btn-reset-defaults {
    background: #450a0a;
    color: white;
    border: none;
}

.btn-reset-defaults:hover {
    background: #7f1d1d;
}

.modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--spacing-lg);
    border-bottom: 1px solid var(--border-color);
}

.modal-header h2 {
    font-size: var(--font-size-xl);
    font-weight: 600;
    margin: 0;
}

.modal-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    background: none;
    border: none;
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast);
}

.modal-close:hover {
    background-color: var(--bg-hover);
    color: var(--text-primary);
}

.modal-close:disabled {
    opacity: 0.5;
    color: var(--text-muted);
    cursor: not-allowed;
    background: none;
}

.modal-body {
    padding: var(--spacing-lg);
}

.settings-grid {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.settings-span-full {
    grid-column: 1 / -1;
}

.settings-group {
    margin-bottom: 0;
    padding: var(--spacing-md);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-lg);
    background-color: var(--bg-tertiary);
}

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

.settings-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--spacing-sm);
    position: relative;
}

.settings-primary {
    border-color: color-mix(in srgb, var(--border-color) 70%, var(--accent-primary));
}

.settings-dependent {
    border-left: 3px solid color-mix(in srgb, var(--accent-primary) 65%, transparent);
    background: linear-gradient(90deg, color-mix(in srgb, var(--accent-primary) 8%, transparent), var(--bg-tertiary));
}

.settings-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-sm);
}

.settings-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.settings-buttons {
    margin-top: var(--spacing-sm);
}

.directory-display {
    flex: 1;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.directory-path {
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    display: block;
}

.settings-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    margin-bottom: 0;
}

.settings-format-buttons {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--spacing-sm);
}

.settings-quality-mode {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
    margin-bottom: var(--spacing-sm);
}

.radio-option {
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: border-color var(--transition-fast), background-color var(--transition-fast);
}

.radio-option:hover {
    border-color: var(--border-hover);
}

.radio-option:has(input:checked) {
    border-color: var(--accent-primary);
    background-color: rgba(59, 130, 246, 0.1);
}

.radio-option input[type="radio"] {
    margin-top: 3px;
    accent-color: var(--accent-primary);
}

.radio-label {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.radio-label strong {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
}

.radio-desc {
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
}

.settings-quality-slider {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-sm) 0;
}

.settings-quality-slider .quality-slider {
    flex: 1;
}

.settings-quality-slider .quality-value {
    font-family: var(--font-mono);
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    min-width: 40px;
    text-align: right;
}

.settings-quality-slider.disabled {
    opacity: 0.5;
    pointer-events: none;
}

.settings-toggle-group {
    display: flex;
    gap: var(--spacing-xs);
}

.settings-toggle-group .toggle-btn {
    flex: 1;
}

/* Input file type toggles: selection = purple outline only (not fill), to differentiate from other settings selections */
.settings-input-type-toggles .input-type-toggle.active {
    background-color: transparent;
    color: var(--text-primary);
    border: 2px solid var(--accent-primary);
    box-shadow: 0 0 0 1px var(--accent-primary);
}

.settings-input-type-toggles .input-type-toggle.active:hover {
    background-color: color-mix(in srgb, var(--accent-primary) 12%, transparent);
    border-color: var(--accent-primary);
    color: var(--text-primary);
}

.settings-subgroup {
    margin-bottom: var(--spacing-sm);
}

.settings-subtitle {
    display: block;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    margin-bottom: var(--spacing-xs);
}

.settings-select {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
    margin-bottom: var(--spacing-md);
}

.settings-input-panel {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

#settingsInputRasterPanel,
#settingsInputSvgPanel {
    margin-bottom: var(--spacing-sm);
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease, margin-bottom 0.25s ease;
}

#settingsInputRasterPanel.is-hidden,
#settingsInputSvgPanel.is-hidden {
    margin-bottom: 0;
}

.settings-inline-inputs {
    gap: var(--spacing-sm);
}

.settings-animatable {
    overflow: hidden;
    max-height: 400px;
    opacity: 1;
    transform: translateY(0);
    transition: max-height 0.25s ease, opacity 0.2s ease, transform 0.2s ease;
}

.settings-animatable.is-hidden {
    max-height: 0;
    opacity: 0;
    transform: translateY(-6px);
    pointer-events: none;
}

.settings-input {
    flex: 1;
    min-width: 0;
    padding: var(--spacing-sm);
    background-color: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
}

.settings-input.manually-edited {
    border-color: var(--accent-primary);
    background-color: color-mix(in srgb, var(--accent-primary) 8%, var(--bg-tertiary));
}

.settings-input.manually-edited:focus {
    border-color: var(--accent-primary);
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent-primary) 20%, transparent);
}

.settings-input-divider {
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
}

.settings-preset-group {
    flex-wrap: wrap;
}

.settings-preset-group .toggle-btn {
    flex: 1 1 calc(20% - var(--spacing-xs));
}

.settings-reset {
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.settings-reset-buttons {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

.btn-danger-text {
    color: var(--accent-error);
}

.btn-danger-text:hover {
    background-color: var(--accent-error);
    color: white;
}

/* Confirmation Modal */
.confirm-modal {
    max-width: 400px;
}

.confirm-message {
    font-size: var(--font-size-base);
    color: var(--text-secondary);
    line-height: 1.6;
    margin-bottom: var(--spacing-lg);
}

.confirm-actions {
    display: flex;
    gap: var(--spacing-sm);
    justify-content: flex-end;
}

.confirm-actions .btn {
    min-width: 120px;
}

/* ========================================
   Responsive Design
   ======================================== */

@media (max-width: 1024px) {
    .workspace {
        grid-template-columns: 280px 1fr;
    }
}

@media (max-width: 768px) {
    .header {
        padding: var(--spacing-md);
    }

    .main {
        padding: var(--spacing-md);
    }

    .workspace {
        grid-template-columns: 1fr;
        display: flex;
        flex-direction: column;
    }

    .options-panel {
        position: static;
        order: 2;
    }

    .preview-area {
        display: contents;
    }

    .preview-container {
        display: contents;
    }

    .comparison-container {
        order: 3;
    }

    #downloadBtn {
        order: 4;
    }

    .batch-results {
        order: 4;
    }

    .drop-zone {
        min-height: auto;
        padding: var(--spacing-xl);
    }

    .drop-icon {
        width: 48px;
        height: 48px;
    }

    .hero-title {
        font-size: var(--font-size-xl);
    }

    .hero-subtitle {
        font-size: var(--font-size-sm);
    }

    .conversion-flow {
        gap: var(--spacing-sm);
        padding: var(--spacing-md);
    }

    .flow-arrow {
        display: none;
    }

    .flow-group, .flow-scaler {
        flex: 1;
        min-width: 80px;
    }

    .format-stack {
        grid-template-columns: repeat(2, auto);
    }

    .scaler-icon {
        width: 36px;
        height: 36px;
    }

    .feature-badges {
        gap: var(--spacing-sm);
    }

    .feature-badge {
        font-size: var(--font-size-xs);
        padding: var(--spacing-xs) var(--spacing-sm);
    }

    .metadata-section,
    .metadata-exif-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .format-buttons {
        grid-template-columns: repeat(5, 1fr);
    }

    .resize-dimensions {
        flex-wrap: wrap;
    }
    
    .resize-presets {
        flex-wrap: wrap;
    }
}

@media (max-width: 900px) {
    .settings-pair {
        grid-template-columns: 1fr;
    }

    .settings-dependent {
        border-left: 1px solid var(--border-color);
        background: var(--bg-tertiary);
    }
}

@media (max-width: 480px) {
    .logo-icon {
        width: 24px;
        height: 24px;
    }

    .logo {
        font-size: var(--font-size-lg);
    }

    .version-badge {
        display: none;
    }

    .metadata-section,
    .metadata-exif-grid {
        grid-template-columns: 1fr;
    }

    .format-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .resize-input {
        width: 70px;
        padding-left: 24px;
    }

    .settings-format-buttons {
        grid-template-columns: repeat(2, 1fr);
    }

    .settings-row {
        flex-direction: column;
        align-items: stretch;
    }

    .directory-display {
        width: 100%;
    }
}

/* ========================================
   Developer Center
   ======================================== */

/* Dev Gutter (localhost-only tray in header) */
.dev-gutter {
    display: flex;
    align-items: center;
    gap: 2px;
    height: 40px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 0 3px;
    margin-right: var(--spacing-sm);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.15);
}

.dev-gutter-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-secondary);
    font-size: var(--font-size-xs);
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color var(--transition-fast), color var(--transition-fast);
    line-height: 1;
}

.dev-gutter-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.dev-gutter-btn:active {
    transform: scale(0.96);
}

.dev-gutter-btn svg {
    flex-shrink: 0;
}

.dev-gutter-btn.dev-center-btn {
    color: var(--accent-warning);
}

.dev-gutter-btn.dev-center-btn:hover {
    background: var(--bg-hover);
    color: var(--accent-warning);
}

.dev-gutter-btn--danger:hover {
    color: var(--accent-error, #ef4444);
}

.dev-center-modal {
    width: 90vw;
    max-width: 900px;
    height: 90vh;
    display: flex;
    flex-direction: column;
}

.dev-center-modal .modal-body {
    flex: 1;
    overflow-y: auto;
    padding: var(--spacing-lg);
    min-height: 0; /* Allow flex child to shrink */
}

.dev-tab-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

/* Dev Center Tabs */
.dev-center-tabs {
    display: flex;
    align-items: center;
    gap: 2px;
    margin-bottom: var(--spacing-lg);
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: 3px;
    width: fit-content;
}

/* Log Capture */
.log-capture-wrap {
    position: relative;
}

.log-capture-menu {
    position: absolute;
    right: 0;
    top: calc(100% + 6px);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    z-index: 100;
    min-width: 220px;
    padding: 4px;
    animation: log-menu-in 0.12s ease-out;
}

@keyframes log-menu-in {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

.log-capture-option {
    display: flex;
    flex-direction: column;
    width: 100%;
    padding: 8px 12px;
    background: none;
    border: none;
    border-radius: var(--radius-sm);
    text-align: left;
    cursor: pointer;
    color: var(--text-primary);
    transition: background 0.1s;
}

.log-capture-option:hover {
    background: var(--bg-hover);
}

.log-capture-option-label {
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.log-capture-option-desc {
    font-size: 11px;
    color: var(--text-muted);
    margin-top: 1px;
}

/* Dev Center Toast */
.dev-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    padding: 8px 16px;
    border-radius: var(--radius-md);
    font-size: var(--font-size-sm);
    font-weight: 500;
    color: #fff;
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    box-shadow: 0 4px 16px rgba(0,0,0,0.4);
    z-index: 10000;
    opacity: 0;
    transition: opacity 0.2s, transform 0.2s;
    pointer-events: none;
}

.dev-toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.dev-toast-success { border-color: #10b981; }
.dev-toast-warning { border-color: var(--accent-warning); }
.dev-toast-error { border-color: #ef4444; }

.dev-tab {
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: var(--text-secondary);
    font-size: var(--font-size-sm);
    font-weight: 600;
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: background-color var(--transition-fast), color var(--transition-fast), box-shadow var(--transition-fast);
}

.dev-tab:hover {
    color: var(--text-primary);
    background: var(--bg-hover);
}

.dev-tab.active {
    color: white;
    background: var(--accent-primary);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Test Controls */
.test-controls {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    flex-wrap: wrap;
}

.test-controls-left,
.test-controls-right {
    display: flex;
    gap: var(--spacing-sm);
    flex-wrap: wrap;
}

/* Test Progress */
.test-progress {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
}

.test-progress-bar {
    flex: 1;
    height: 8px;
    background: var(--bg-hover);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.test-progress-fill {
    height: 100%;
    background: var(--accent-primary);
    transition: width var(--transition-fast);
    border-radius: var(--radius-full);
}

.test-progress-text {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    white-space: nowrap;
}

/* Test Filters */
.test-filters {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

.test-search {
    flex: 1;
    min-width: 200px;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    color: var(--text-primary);
    font-size: var(--font-size-sm);
}

.test-search:focus {
    outline: none;
    border-color: var(--accent-primary);
}

.test-filter-toggles {
    display: flex;
    gap: var(--spacing-md);
}

.test-filter-toggle {
    display: flex;
    align-items: center;
    gap: var(--spacing-xs);
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    cursor: pointer;
}

.test-filter-toggle input {
    accent-color: var(--accent-primary);
}

/* Failed Tests (above Test Registry) — collapsible, formatted like Test Registry */
.failed-tests-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 3px solid #ef4444;
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.failed-tests-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: background 0.15s;
}

.failed-tests-header:hover {
    background: var(--bg-hover);
}

.failed-tests-header::marker,
.failed-tests-header::-webkit-details-marker {
    display: none;
}

.failed-tests-header::before {
    content: '▶';
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-xs);
    transition: transform 0.15s;
    color: var(--text-muted);
}

.failed-tests-section[open] .failed-tests-header::before {
    transform: rotate(90deg);
}

.failed-tests-title {
    font-weight: 600;
    color: var(--text-primary);
}

.failed-tests-header-right {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-left: auto;
}

.failed-tests-count {
    font-size: var(--font-size-xs);
    color: #ef4444;
    font-weight: 600;
}

.failed-tests-header-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.failed-tests-body {
    max-height: 320px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-xs) var(--spacing-md);
}

.failed-tests-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--spacing-sm);
    padding: 3px 0;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

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

.failed-tests-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
}

.failed-tests-actions {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

.failed-tests-retest {
    padding: 2px 8px;
    font-size: 11px;
}

/* Test Registry */
.test-registry {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    overflow: hidden;
}

.test-registry-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    cursor: pointer;
    user-select: none;
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
    transition: background 0.15s;
}

.test-registry-header:hover {
    background: var(--bg-hover);
}

.test-registry-header::marker,
.test-registry-header::-webkit-details-marker {
    display: none;
}

.test-registry-header::before {
    content: '▶';
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-xs);
    transition: transform 0.15s;
    color: var(--text-muted);
}

.test-registry[open] .test-registry-header::before {
    transform: rotate(90deg);
}

.test-registry-title {
    font-weight: 600;
    color: var(--text-primary);
}

.test-registry-count {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-left: auto;
    padding-left: var(--spacing-sm);
}

.test-registry-body {
    max-height: 320px;
    overflow-y: auto;
    border-top: 1px solid var(--border-color);
    padding: var(--spacing-xs) 0;
}

.registry-date-group {
    padding: 0 var(--spacing-md);
}

.registry-date-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: var(--spacing-xs) 0;
    margin-top: var(--spacing-xs);
    border-bottom: 1px solid var(--border-subtle, rgba(255,255,255,0.06));
}

.registry-date-group:first-child .registry-date-label {
    margin-top: 0;
}

.registry-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 3px 0;
    font-size: var(--font-size-xs);
    color: var(--text-secondary);
    line-height: 1.4;
}

.registry-icon {
    flex-shrink: 0;
    width: 16px;
    text-align: center;
    font-size: 12px;
    font-weight: 700;
}

.registry-icon-unrun {
    color: var(--text-muted);
    opacity: 0.4;
}

.registry-icon-passed {
    color: #10b981;
}

.registry-icon-failed {
    color: #ef4444;
}

.registry-icon-skipped {
    color: var(--accent-warning);
}

.registry-item-suite {
    color: var(--text-muted);
}

.registry-item-sep {
    color: var(--text-muted);
    opacity: 0.4;
}

.registry-item-name {
    color: var(--text-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.registry-jump-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0;
    background: none;
    border: none;
    color: inherit;
    font: inherit;
    font-size: var(--font-size-xs);
    cursor: pointer;
    border-radius: var(--radius-sm);
    transition: color 0.2s;
    white-space: nowrap;
}

.registry-jump-btn .registry-item-suite {
    transition: color 0.2s;
}

.registry-jump-btn .registry-item-sep {
    transition: color 0.2s, transform 0.2s;
    display: inline-block;
}

.registry-jump-btn:hover .registry-item-suite {
    color: var(--accent-primary);
}

.registry-jump-btn:hover .registry-item-sep {
    color: var(--accent-primary);
    transform: translateX(2px);
}

@keyframes jump-highlight {
    0%   { background: rgba(99, 102, 241, 0.25); }
    100% { background: transparent; }
}

.registry-jump-highlight {
    animation: jump-highlight 1.5s ease-out;
}

/* Test Summary Card */
.test-summary-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-left: 4px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md) var(--spacing-lg);
    margin-bottom: var(--spacing-md);
}

.test-summary-card.test-summary-passed {
    border-left-color: #22c55e;
}

.test-summary-card.test-summary-failed {
    border-left-color: #ef4444;
}

.test-summary-card.test-summary-running {
    border-left-color: var(--accent-primary);
}

.test-summary-progress {
    margin: var(--spacing-sm) 0;
    margin-bottom: 0;
}

.test-summary-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
}

.test-summary-title {
    display: flex;
    align-items: baseline;
    gap: var(--spacing-sm);
}

#summaryStatusText {
    font-weight: 700;
    font-size: var(--font-size-sm);
}

.test-summary-count {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.test-summary-counts {
    font-size: var(--font-size-sm);
    color: var(--text-secondary);
}

.test-summary-counts #summaryPassedCount {
    color: #22c55e;
    font-weight: 600;
}

.test-summary-counts #summaryFailedCount {
    font-weight: 600;
}

.test-summary-failed .test-summary-counts #summaryFailedCount,
.test-summary-running .test-summary-counts #summaryFailedCount {
    color: #ef4444;
}

.test-summary-divider {
    height: 1px;
    background: var(--border-color);
    margin: var(--spacing-sm) 0;
}

.test-summary-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.test-summary-meta-row {
    display: flex;
    justify-content: space-between;
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.test-summary-report-btn {
    margin-top: var(--spacing-sm);
}

/* Test Results */
.test-results {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
    flex: 1;
    overflow-y: auto;
    min-height: 200px;
}

.test-empty-state {
    text-align: center;
    padding: var(--spacing-2xl);
    color: var(--text-muted);
}

/* Test Suite (category) */
.test-suite {
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.test-suite-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    cursor: pointer;
    font-size: var(--font-size-sm);
    font-weight: 500;
}

.test-suite-header:hover {
    background: var(--bg-hover);
}

.test-suite-header::marker,
.test-suite-header::-webkit-details-marker {
    display: none;
}

.test-suite-header::before {
    content: '▶';
    margin-right: var(--spacing-sm);
    font-size: var(--font-size-xs);
    transition: transform var(--transition-fast);
}

.test-suite[open] .test-suite-header::before {
    transform: rotate(90deg);
}

.suite-name {
    flex: 1;
}

.suite-count {
    color: var(--text-muted);
    font-size: var(--font-size-xs);
    margin-right: var(--spacing-sm);
}

.suite-summary {
    display: flex;
    gap: var(--spacing-xs);
}

.test-suite-body {
    border-top: 1px solid var(--border-color);
}

/* Test Row */
.test-row {
    padding: var(--spacing-sm) var(--spacing-md);
    border-bottom: 1px solid var(--border-color);
}

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

.test-row-main {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

.test-name {
    flex: 1;
    font-size: var(--font-size-sm);
    font-family: var(--font-mono);
}

.test-description {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
    padding-left: var(--spacing-md);
}

.test-error {
    font-size: var(--font-size-xs);
    color: #ef4444;
    margin-top: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-sm);
    background: rgba(239, 68, 68, 0.1);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    white-space: pre-wrap;
    word-break: break-word;
}

.test-duration {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: var(--spacing-xs);
}

.test-actions {
    display: flex;
    gap: var(--spacing-xs);
}

/* Status Pills */
.pill {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.pill-passed {
    background: rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.pill-failed {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}

.pill-skipped {
    background: rgba(245, 158, 11, 0.2);
    color: var(--accent-warning);
}

/* Icon button for test actions */
.btn-icon-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    cursor: pointer;
    transition: all var(--transition-fast);
}

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

.btn-icon-sm svg {
    width: 14px;
    height: 14px;
}

.copy-fail-report:hover {
    color: #10b981;
}

/* Test row status colors */
.test-passed {
    border-left: 3px solid #10b981;
}

.test-failed {
    border-left: 3px solid #ef4444;
    background: rgba(239, 68, 68, 0.03);
}

.test-skipped {
    border-left: 3px solid var(--accent-warning);
}

.test-unrun {
    border-left: 3px solid var(--border-color);
}

/* Dev Info Tab */
.dev-info-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-md);
}

.dev-info-card {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    padding: var(--spacing-md);
}

.dev-info-card h4 {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-sm);
    color: var(--text-primary);
}

.dev-info-list {
    display: grid;
    gap: var(--spacing-xs);
}

.dev-info-list dt {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.dev-info-list dd {
    font-size: var(--font-size-sm);
    color: var(--text-primary);
    margin-bottom: var(--spacing-xs);
}

/* Dev Center Actions */
.dev-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    margin-top: var(--spacing-lg);
    padding-top: var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

.dev-action-hint {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

/* Test Failure Report Modal */
.test-report-modal {
    width: 90vw;
    max-width: 700px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
}

.test-report-modal .modal-body {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: var(--spacing-lg);
}

.test-report-modal .modal-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-lg);
    border-top: 1px solid var(--border-color);
}

/* Report Header */
.report-header {
    margin-bottom: var(--spacing-md);
}

.report-icon-row {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.report-warning-icon {
    width: 36px;
    height: 36px;
    color: #ef4444;
    flex-shrink: 0;
}

.report-title-text {
    font-size: var(--font-size-lg);
    font-weight: 700;
}

.report-date {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    margin-top: 2px;
}

/* Report Summary Bar */
.report-summary-bar {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-md);
    font-size: var(--font-size-sm);
    font-weight: 600;
}

.report-count-failed { color: #ef4444; }
.report-count-passed { color: #22c55e; }
.report-count-skipped { color: #f59e0b; }
.report-divider { color: var(--text-muted); font-weight: 400; }

/* Report Environment */
.report-env {
    display: flex;
    flex-wrap: wrap;
    gap: var(--spacing-xs) var(--spacing-md);
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-secondary);
    border: 1px solid var(--border-color);
    border-radius: var(--radius-md);
    margin-bottom: var(--spacing-lg);
    font-size: var(--font-size-xs);
    color: var(--text-muted);
}

.report-env strong {
    color: var(--text-primary);
}

/* Report Suite */
.report-suite {
    margin-bottom: var(--spacing-lg);
}

.report-suite-header {
    font-size: var(--font-size-sm);
    font-weight: 700;
    text-transform: uppercase;
    color: #ef4444;
    margin-bottom: var(--spacing-sm);
    padding-bottom: var(--spacing-xs);
    border-bottom: 1px solid color-mix(in srgb, #ef4444 30%, transparent);
}

/* Report Failure Item */
.report-failure {
    padding: var(--spacing-sm) var(--spacing-md);
    background: var(--bg-tertiary);
    border-radius: var(--radius-md);
    border-left: 3px solid #ef4444;
    margin-bottom: var(--spacing-sm);
}

.report-failure-name {
    font-size: var(--font-size-sm);
    font-weight: 600;
    margin-bottom: var(--spacing-xs);
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-xs);
}

.report-x {
    color: #ef4444;
    font-weight: 700;
    flex-shrink: 0;
}

.report-failure-error {
    background: var(--bg-secondary);
    color: var(--text-muted);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: var(--font-size-xs);
    white-space: pre-wrap;
    word-break: break-word;
    margin: var(--spacing-xs) 0 0 0;
    line-height: 1.5;
}

.report-stack-details {
    margin-top: var(--spacing-xs);
}

.report-stack-details summary {
    font-size: var(--font-size-xs);
    color: var(--text-muted);
    cursor: pointer;
    user-select: none;
}

.report-stack-details summary:hover {
    color: var(--text-primary);
}

.report-failure-stack {
    background: var(--bg-secondary);
    color: var(--text-muted);
    padding: var(--spacing-xs) var(--spacing-sm);
    border-radius: var(--radius-sm);
    font-family: var(--font-mono);
    font-size: 11px;
    white-space: pre-wrap;
    word-break: break-word;
    max-height: 150px;
    overflow-y: auto;
    margin-top: var(--spacing-xs);
    line-height: 1.4;
}

/* Copy button feedback */
.btn-copied {
    color: #22c55e !important;
    border-color: #22c55e !important;
}

/* View Report button in summary */
.btn-sm {
    padding: 4px 10px;
    font-size: var(--font-size-xs);
    border-radius: var(--radius-sm);
}

.btn-danger {
    background: #ef4444;
    color: white;
    border: none;
    cursor: pointer;
    font-weight: 600;
}

.btn-danger:hover {
    background: #dc2626;
}

/* ========================================
   Prevent Internal Images from Being Draggable
   ======================================== */

.result-thumb,
.queue-item-thumb {
    -webkit-user-drag: none;
    user-drag: none;
}

/* ========================================
   Utility Classes
   ======================================== */

[hidden] {
    display: none !important;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}