/* === UI/UX AESTHETICS ENHANCED === */
body.i18n-loading { visibility: hidden; }
html.i18n-english-default body.i18n-loading { visibility: visible !important; }

:root {
    --primary-color: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: rgba(37, 99, 235, 0.15);
    --success-color: #10B981;
    --error-color: #FF2828;
    --warning-color: #F59E0B;
    
    --bg-color: #0F172A;
    --bg-secondary-color: #1E293B;
    --bg-tertiary-color: #334155;
    
    --border-color: #334155;
    --border-color-light: rgba(255, 255, 255, 0.08);
    
    /* High contrast adjustments */
    --text-color: #F8FAFC;
    --text-muted-color: #CBD5E1; 
    
    --font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
    
    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
    --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
    --shadow-primary: 0 4px 14px 0 rgba(37, 99, 235, 0.3);
    
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 20px;
    
    --transition-smooth: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-color-scheme: light) {
    :root {
        --primary-color: #2563EB;
        --primary-hover: #1D4ED8;
        --primary-light: rgba(37, 99, 235, 0.08);
        --success-color: #10B981;
        --error-color: #FF2828;
        --bg-color: #F8FAFC; 
        --bg-secondary-color: #FFFFFF;
        --bg-tertiary-color: #E2E8F0; 
        --border-color: #CBD5E1; 
        --border-color-light: rgba(0, 0, 0, 0.06); 
        /* High contrast adjustments for Light Mode */
        --text-color: #0F172A;
        --text-muted-color: #475569; 
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.08), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04);
        --shadow-primary: 0 4px 14px 0 rgba(37, 99, 235, 0.25);
    }
    html.dark-mode { 
        --primary-color: #2563EB;
        --primary-hover: #1D4ED8;
        --primary-light: rgba(37, 99, 235, 0.15);
        --success-color: #10B981;
        --error-color: #FF2828;
        --bg-color: #0F172A;
        --bg-secondary-color: #1E293B;
        --bg-tertiary-color: #334155;
        --border-color: #334155;
        --border-color-light: rgba(255, 255, 255, 0.08);
        --text-color: #F8FAFC;
        --text-muted-color: #CBD5E1;
        --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.2);
        --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.25), 0 2px 4px -2px rgba(0, 0, 0, 0.15);
        --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -4px rgba(0, 0, 0, 0.2);
        --shadow-primary: 0 4px 14px 0 rgba(37, 99, 235, 0.3);
    }
}

html.light-mode { 
    --primary-color: #2563EB;
    --primary-hover: #1D4ED8;
    --primary-light: rgba(37, 99, 235, 0.08);
    --success-color: #10B981;
    --error-color: #FF2828;
    --bg-color: #F8FAFC; 
    --bg-secondary-color: #FFFFFF;
    --bg-tertiary-color: #E2E8F0; 
    --border-color: #CBD5E1; 
    --border-color-light: rgba(0, 0, 0, 0.06); 
    /* High contrast adjustments for Light Mode */
    --text-color: #0F172A;
    --text-muted-color: #475569; 
}

*:focus:not(:focus-visible) { outline: none; }
*:focus-visible { outline: 2px solid var(--primary-color); outline-offset: 2px; }

*, *::before, *::after { box-sizing: border-box; }
body {
    font-family: var(--font-family);
    background-color: var(--bg-color);
    color: var(--text-color);
    margin: 0; padding: 0;
    transition: background-color 0.3s ease, color 0.3s ease;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: grid;
    grid-template-columns: 1fr auto; 
    min-height: 100vh;
    
    /* Text Selection Disabled */
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

input, textarea, select { user-select: auto; }

#app-container { grid-column: 1 / 2; display: flex; flex-direction: column; min-width: 0; }

#sidebar-promos {
    grid-column: 2 / 3; width: 160px; position: sticky; top: 0; height: 100vh;
    background-color: transparent; z-index: 1000; display: flex; justify-content: center; align-items: center;
}

header {
    padding: 1rem 2.5rem; background-color: var(--bg-secondary-color);
    border-bottom: 1px solid var(--border-color-light); display: flex;
    justify-content: space-between; align-items: center; z-index: 20; position: relative;
}

.logo-title { display: flex; align-items: center; gap: 12px; }
.logo { width: 34px; height: 34px; filter: drop-shadow(0 2px 4px rgba(37,99,235,0.2)); }

.header-active-title {
    display: none; font-size: 1.25rem; font-weight: 700; color: var(--text-color); letter-spacing: -0.02em; margin:0;
    animation: fadeIn 0.4s ease;
    will-change: transform, opacity; /* PERFORMANCE OPTIMIZATION */
}
.header-active-title span { color: var(--text-color); font-weight: 500; font-size: 1rem; margin-left: 8px; opacity: 0.9; }
header h1 { font-size: 1.5rem; margin: 0; color: var(--primary-color); font-weight: 700; letter-spacing: -0.02em; transition: var(--transition-smooth); }

body.has-files header h1 { display: none; }
body.has-files .header-active-title { display: block; }
@keyframes fadeIn { from{opacity:0; transform:translateY(5px);} to{opacity:1; transform:translateY(0);} }

.header-controls { display: flex; align-items: center; gap: 1.25rem; }

.theme-toggle { 
    background: none; border: none; cursor: pointer; color: var(--text-color); 
    border-radius: 50%; transition: var(--transition-smooth);
    display: flex; align-items: center; justify-content: center;
    position: relative; width: 44px; height: 44px; /* WCAG 2.1 Hit Target */
}
.theme-toggle:hover { background-color: var(--bg-tertiary-color); color: var(--text-color); }
.theme-toggle:active { transform: scale(0.9); }
.theme-toggle svg { 
    width: 24px; height: 24px; stroke: currentColor; fill: none;
    position: absolute; top: 50%; left: 50%; margin-top: -12px; margin-left: -12px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.theme-toggle #theme-icon-sun { opacity: 1; transform: rotate(0deg); }
.theme-toggle #theme-icon-moon { opacity: 0; transform: rotate(-90deg); }
html.light-mode .theme-toggle #theme-icon-sun, 
html:not(.dark-mode):not(.light-mode) .theme-toggle #theme-icon-sun { opacity: 0; transform: rotate(90deg); }
html.light-mode .theme-toggle #theme-icon-moon,
html:not(.dark-mode):not(.light-mode) .theme-toggle #theme-icon-moon { opacity: 1; transform: rotate(0deg); }
@media (prefers-color-scheme: light) {
    html:not(.dark-mode) .theme-toggle #theme-icon-sun { opacity: 0; transform: rotate(90deg); }
    html:not(.dark-mode) .theme-toggle #theme-icon-moon { opacity: 1; transform: rotate(0deg); }
}

/* Native Select Setup */
.native-lang-wrapper { position: relative; display: flex; align-items: center; }
#lang-selector {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    background-color: var(--bg-color); color: var(--text-color);
    border: 1px solid var(--border-color); border-radius: var(--radius-sm);
    padding: 6px 36px 6px 12px; font-size: 0.9rem; font-weight: 600; cursor: pointer;
    transition: var(--transition-smooth); outline: none;
}
#lang-selector:hover { border-color: var(--text-color); }
#lang-selector:focus { border-color: var(--primary-color); box-shadow: 0 0 0 3px var(--primary-light); }
.native-lang-wrapper svg {
    position: absolute; right: 10px; pointer-events: none; width: 16px; height: 16px;
    color: var(--text-color); transition: transform 0.2s;
}

main {
    flex-grow: 1; padding: 3rem 2.5rem; display: flex; flex-direction: column; gap: 1.5rem;
    max-width: 1400px; margin: 0 auto; width: 100%;
}

.header-content-wrapper {
    transition: opacity 0.3s ease, max-height 0.4s cubic-bezier(0.4, 0, 0.2, 1), margin 0.3s ease, transform 0.3s ease;
    max-height: 500px; overflow: hidden; display: flex; flex-direction: column; align-items: center; justify-content: center;
    will-change: max-height, opacity, transform; /* PERFORMANCE OPTIMIZATION */
}
.header-content-wrapper.collapsed { max-height: 0; opacity: 0; margin: 0; transform: translateY(-20px); pointer-events: none; }

.main-title { color: var(--text-color); font-size: 2.5rem; margin: 0; font-weight: 800; letter-spacing: -0.04em; text-align: center; }
.description { text-align: center; margin: 0.5rem auto 0 auto; max-width: 600px; color: var(--text-color); font-size: 1.1rem; font-weight: 500; opacity: 0.9; }

/* Fullscreen Overlay - Solid No Blur for performance */
#fullscreen-drag-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.95);
    z-index: 9999; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease; pointer-events: none;
    will-change: opacity; /* PERFORMANCE OPTIMIZATION */
}
#fullscreen-drag-overlay.active { opacity: 1; visibility: visible; }
.overlay-content {
    border: 4px dashed var(--primary-color); border-radius: var(--radius-xl); padding: 4rem;
    font-size: 2rem; font-weight: 700; color: #fff; text-align: center; transform: scale(0.95);
    transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
    will-change: transform; /* PERFORMANCE OPTIMIZATION */
}
#fullscreen-drag-overlay.active .overlay-content { transform: scale(1); }

/* Loading Overlay for Processing Files */
#loading-overlay {
    position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(15, 23, 42, 0.85);
    z-index: 10000; display: flex; flex-direction: column; align-items: center; justify-content: center;
    opacity: 0; visibility: hidden;
    backdrop-filter: blur(4px); pointer-events: none;
}
#loading-overlay.active { opacity: 1; visibility: visible; pointer-events: all; }

.loading-hourglass {
    width: 120px; height: 120px; max-width: 80vw; max-height: 80vh;
}

.loading-text { font-weight: 600; font-size: 1.1rem; margin-top: 1rem; }

#drop-zone {
    border: 2px dashed var(--border-color); background-color: var(--bg-secondary-color); border-radius: var(--radius-xl);
    padding: 3rem 2rem; text-align: center; color: var(--text-color); transition: var(--transition-smooth);
    cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1rem;
}
#drop-zone:hover, #drop-zone:focus-visible { border-color: var(--primary-color); background-color: var(--primary-light); color: var(--primary-color); }
#drop-zone.drag-over { transform: scale(1.02); border-color: var(--primary-color); background-color: var(--primary-light); color: var(--primary-color); }
.drop-icon { width: 64px; height: 64px; opacity: 0.9; transition: var(--transition-smooth); margin-bottom: 0.5rem; color: var(--primary-color); }
#drop-zone:hover .drop-icon, #drop-zone:focus-visible .drop-icon, #drop-zone.drag-over .drop-icon { transform: translateY(-4px); opacity: 1; }

.browse-pill {
    background-color: var(--primary-color); color: white; padding: 8px 24px; border-radius: 20px; font-size: 1rem; font-weight: 600; transition: var(--transition-smooth);
    will-change: transform; /* PERFORMANCE OPTIMIZATION */
}
#drop-zone:hover .browse-pill, #drop-zone.drag-over .browse-pill { background-color: var(--primary-hover); transform: translateY(-2px); box-shadow: var(--shadow-sm); }

/* Compact Dropzone State */
body.has-files #drop-zone {
    padding: 1rem 2rem; flex-direction: row; border-radius: var(--radius-md); font-size: 1rem;
    background-color: transparent; border-width: 1px; min-height: 60px; display: flex; margin-bottom: -0.5rem;
}
body.has-files #drop-zone .drop-icon { width: 24px; height: 24px; margin-bottom: 0; display: block; }
body.has-files #drop-zone-text { flex-direction: row; font-size: 1rem; }

/* Command Center Controls */
.controls-wrapper { display: flex; flex-direction: column; gap: 1rem; margin: 0; transition: var(--transition-smooth); }
.controls-bar { 
    display: flex; flex-wrap: wrap; gap: 1.5rem; align-items: center; justify-content: center;
    background: var(--bg-secondary-color); padding: 1.5rem; border-radius: var(--radius-xl);
    border: 1px solid var(--border-color-light); box-shadow: var(--shadow-md);
}

.scale-selector { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.scale-selector-row { display: flex; align-items: center; gap: 1rem; font-weight: 700; color: var(--text-color); }
.segmented-control { position: relative; display: flex; background-color: var(--bg-color); border: 1px solid var(--border-color); border-radius: var(--radius-lg); padding: 4px; z-index: 1; }
.segmented-control input[type="radio"] { display: none; }
.segmented-control-bg { position: absolute; top: 4px; bottom: 4px; width: calc(50% - 4px); background-color: var(--primary-color); border-radius: var(--radius-md); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); z-index: -1; box-shadow: var(--shadow-sm); }

/* Explicit LTR / RTL logic for scale toggle */
.segmented-control input#scale-2x:checked ~ .segmented-control-bg { left: 4px; }
.segmented-control input#scale-4x:checked ~ .segmented-control-bg { left: 50%; }
[dir="rtl"] .segmented-control input#scale-2x:checked ~ .segmented-control-bg { left: auto; right: 4px; }
[dir="rtl"] .segmented-control input#scale-4x:checked ~ .segmented-control-bg { left: auto; right: 50%; }

/* Fitts's Law Full Click Area */
.segmented-control label {
    display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    padding: 8px 24px; cursor: pointer; border-radius: var(--radius-md); color: var(--text-color); transition: color 0.3s ease; font-weight: 700; font-size: 1.05rem; text-align: center; flex: 1; opacity: 1;
}
.segmented-control label:active { transform: scale(0.96); }
.segmented-control input[type="radio"]:checked + label { color: #ffffff; opacity: 1; font-weight: 800; text-shadow: 0 1px 2px rgba(0,0,0,0.2); }

#global-progress-container { display: none; width: 100%; text-align: center; }
/* Custom Progress Bar Elements */
.custom-progress-track { width: 100%; height: 6px; border-radius: 4px; overflow: hidden; background-color: var(--bg-tertiary-color); margin-bottom: 8px; position: relative; }
.custom-progress-fill { height: 100%; background-color: var(--primary-color); transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1); width: 0%; will-change: width; }
#global-progress-text { font-size: 0.9rem; color: var(--text-color); font-weight: 600; }

/* Queue Header & Actions */
.queue-header { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 1rem; margin-bottom: -0.5rem; flex-wrap: wrap; gap: 8px; max-width: 100%; }
.queue-header h3 { margin: 0; font-size: 1.2rem; font-weight: 700; color: var(--text-color); }
.queue-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* The Constrained Viewport */
#image-queue-scroll-container {
    max-height: 60vh; overflow-y: auto; overflow-x: hidden; padding: 4px; border-radius: var(--radius-xl);
    /* Custom Scrollbar Blue Fix */
    scrollbar-width: thin; scrollbar-color: var(--primary-color) transparent;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
}
#image-queue-scroll-container::-webkit-scrollbar { width: 8px; }
#image-queue-scroll-container::-webkit-scrollbar-track { background: transparent; }
#image-queue-scroll-container::-webkit-scrollbar-thumb { background-color: var(--primary-color); border-radius: 8px; }

#image-queue { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1.25rem; width: 100%; }

/* List View Mode */
#image-queue.list-mode { grid-template-columns: 1fr; gap: 0.75rem; }
#image-queue.list-mode .thumbnail-card { flex-direction: row; min-height: 64px; height: auto; align-items: center; padding: 8px 12px; max-width: 100%; overflow: hidden; }
#image-queue.list-mode .thumbnail-image-wrapper { width: 44px; height: 44px; min-width: 44px; border-radius: var(--radius-sm); border: none; }
#image-queue.list-mode .thumbnail-info { flex-direction: row; align-items: center; padding: 0 0 0 12px; flex: 1 1 auto; min-width: 0; justify-content: space-between; gap: 8px; width: 100%; overflow: hidden; }
#image-queue.list-mode .thumbnail-info-header { align-items: center; }
#image-queue.list-mode .thumbnail-name-container { flex: 1 1 auto; min-width: 0; overflow: hidden; }
#image-queue.list-mode .thumbnail-actions { margin-top: 0; width: auto; min-height: 0; flex-shrink: 0; }
#image-queue.list-mode .status-badge { position: static; padding: 2px 8px; font-size: 0.75rem; box-shadow: none; border-radius: 12px; min-width: 0; flex-shrink: 0; }

/* Pagination Bar */
.pagination-bar { display: none; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; color: var(--text-color); font-weight: 600; font-size: 0.95rem; }
.page-btn { background: var(--bg-secondary-color); border: 1px solid var(--border-color); color: var(--text-color); border-radius: var(--radius-md); padding: 6px 12px; cursor: pointer; transition: var(--transition-smooth); display: flex; align-items: center; justify-content: center; }
.page-btn:hover:not(:disabled) { background: var(--bg-tertiary-color); border-color: var(--text-muted-color); color: var(--text-color); }
.page-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.page-btn:active:not(:disabled) { transform: scale(0.92); }

@keyframes slideUp { from { opacity: 0; transform: translateY(15px) translateZ(0); } to { opacity: 1; transform: translateY(0) translateZ(0); } }

.thumbnail-card {
    background-color: var(--bg-secondary-color); border: 1px solid var(--border-color-light); border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm); display: flex; flex-direction: column; overflow: hidden;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s ease; position: relative;
    animation: slideUp 0.35s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards;
    padding-bottom: 4px; /* Space for the absolute progress line */
    -webkit-font-smoothing: subpixel-antialiased;
    contain: paint layout;
    backface-visibility: hidden;
    transform: translateZ(0);
}
.thumbnail-card:hover { box-shadow: var(--shadow-md); transform: translateY(-2px); }

/* Ghost Card for Add More */
.ghost-add-card { border: 2px dashed var(--border-color); background-color: transparent; cursor: pointer; display: flex; align-items: center; justify-content: center; min-height: 220px; box-shadow: none; padding: 0; }
.ghost-add-card:hover { border-color: var(--primary-color); background-color: var(--primary-light); color: var(--primary-color); box-shadow: none; transform: none; }
#image-queue.list-mode .ghost-add-card { min-height: 64px; }

/* Checkerboard - Adaptive to theme */
.thumbnail-image-wrapper {
    width: 100%; height: 140px; position: relative; display: flex; align-items: center; justify-content: center;
    background-color: transparent;
    background-image: 
        linear-gradient(45deg, var(--border-color-light) 25%, transparent 25%, transparent 75%, var(--border-color-light) 75%, var(--border-color-light)),
        linear-gradient(45deg, var(--border-color-light) 25%, transparent 25%, transparent 75%, var(--border-color-light) 75%, var(--border-color-light));
    background-size: 20px 20px; background-position: 0 0, 10px 10px;
}
.thumbnail-image { width: 100%; height: 100%; object-fit: contain; }

.status-badge {
    padding: 4px 10px; border-radius: 16px; font-size: 0.75rem; min-width: 90px; text-align: center; justify-content: center;
    font-weight: 700; letter-spacing: 0.02em; color: white; display: flex; align-items: center; gap: 6px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2); white-space: nowrap; flex-shrink: 0;
}
.status-badge .icon { width: 14px; height: 14px; fill: white; }
/* High Contrast Uploading Badge */
.status-badge.uploading { background: rgba(245, 158, 11, 1); border: 1px solid var(--warning-color); color: #0F172A; }
.status-badge.uploading .css-dot-pulse { background-color: #0F172A; }
.status-badge.queued { background: rgba(51, 65, 85, 1); border: 1px solid var(--text-color); }
.status-badge.processing { background: rgba(37, 99, 235, 1); border: 1px solid var(--primary-color); }
.status-badge.done { background: rgba(16, 185, 129, 1); border: 1px solid var(--success-color); color: white; }
.status-badge.done .icon { fill: white; }
.status-badge.error { background: rgba(255, 40, 40, 1); border: 1px solid var(--error-color); }

/* Minimal CSS Pulse */
.css-dot-pulse { width: 8px; height: 8px; background-color: currentColor; border-radius: 50%; animation: dot-pulse 1s infinite alternate; }
@keyframes dot-pulse { 0% { opacity: 0.3; transform: scale(0.8); } 100% { opacity: 1; transform: scale(1.2); } }

.thumbnail-progress-container { width: 100%; height: 4px; background-color: var(--bg-tertiary-color); position: absolute; bottom: 0; left: 0; right: 0; border: none; z-index: 10; border-radius: 0 0 var(--radius-lg) var(--radius-lg); overflow: hidden; }
.thumbnail-progress { height: 100%; background: var(--primary-color); transition: width 0.3s ease, background-color 0.3s ease; width: 0%; will-change: width, background-color; }

.thumbnail-progress.pulse-loading { animation: progress-pulse 1.5s infinite; }
@keyframes progress-pulse { 0% { opacity: 0.4; } 50% { opacity: 1; } 100% { opacity: 0.4; } }

.thumbnail-info { padding: 1rem; flex-grow: 1; display: flex; flex-direction: column; gap: 8px; }
.thumbnail-info-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; flex: 1 1 auto; min-width: 0; width: 100%; }
.thumbnail-name-container { min-width: 0; width: 100%; }

/* CSS Truncation */
.thumbnail-name { font-size: 0.9rem; font-weight: 700; color: var(--text-color); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; direction: ltr; text-align: left; line-height: 1.2; }
.thumbnail-details { font-size: 0.8rem; color: var(--text-muted-color); font-weight: 600; margin-top: 2px; }

.thumbnail-actions { display: flex; gap: 8px; margin-top: auto; align-items: center; }

/* Fixed Sizing for actions buttons to prevent resizing */
.thumbnail-actions .btn {
    height: 38px !important;
    min-height: 38px !important;
    padding: 0 0.75rem;
    font-size: 0.85rem;
    border-radius: var(--radius-sm);
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    white-space: nowrap;
}

/* Actions Area Remove Button */
.thumbnail-remove {
    flex: 0 0 38px !important; width: 38px !important; height: 38px !important; display: flex; align-items: center; justify-content: center; padding: 0 !important; border-radius: var(--radius-sm); 
    background-color: var(--error-color) !important; color: white !important; border: none !important;
}
.thumbnail-remove:hover {
    filter: brightness(0.9);
}

/* Buttons & Controls */
.btn {
    padding: 0.75rem 1.5rem; border-radius: var(--radius-md); border: 1px solid transparent; font-size: 0.95rem; font-weight: 700;
    letter-spacing: 0.02em; cursor: pointer; transition: var(--transition-smooth); display: inline-flex; align-items: center; justify-content: center; gap: 8px;
}
.btn:active { transform: scale(0.96) translateY(0) !important; filter: brightness(0.9); }
.btn:hover:not(:disabled) { transform: translateY(-2px); }
.btn-primary { background-color: var(--primary-color); color: white; box-shadow: var(--shadow-primary); }
.btn-primary:hover { background-color: var(--primary-hover); box-shadow: 0 6px 20px 0 rgba(37,99,235,0.4); }
.btn-success { background-color: var(--success-color); color: white; }
.btn-success:hover { background-color: #059669; }
.btn-ghost { background-color: transparent; color: var(--text-color); border: 1px solid var(--border-color); }
.btn-ghost:hover:not(:disabled) { color: var(--text-color); border-color: var(--text-muted-color); background-color: var(--bg-tertiary-color); }
.btn-danger { background-color: var(--error-color); color: white; box-shadow: 0 4px 14px 0 rgba(255, 40, 40, 0.3); }
.btn-danger:hover { filter: brightness(0.9); }
.btn:disabled { opacity: 0.5; cursor: not-allowed; transform: none !important; filter: none !important; }

#start-bulk-btn { min-width: 280px; min-height: 48px; font-size: 1.05rem; padding: 1rem 2rem; text-align: center; }

footer {
    background-color: var(--bg-secondary-color); border-top: 1px solid var(--border-color-light);
    display: flex; justify-content: space-between; align-items: center; font-size: 0.95rem; font-weight: 500; color: var(--text-color);
    padding: 1.5rem 2.5rem calc(1.5rem + 90px + env(safe-area-inset-bottom)) 2.5rem; flex-wrap: wrap; margin-top: auto;
}
.footer-links { display: flex; gap: 1.5rem; }
.footer-disclosure { width: 100%; text-align: center; margin-top: 1.5rem; font-size: 0.85rem; opacity: 0.9; }

#footer-promo-placeholder {
    position: fixed; bottom: 0; left: 0; right: 160px; height: 90px; background-color: transparent; display: flex; align-items: flex-end; justify-content: center; z-index: 999; pointer-events: none;
}
#footer-promo-placeholder > * { pointer-events: auto; }
footer a { color: var(--text-color); text-decoration: none; transition: var(--transition-smooth); font-weight: 600; }
footer a:hover { color: var(--primary-color); }

#right-displayUnit-container, #bottom-displayUnit-container { overflow: hidden; position: relative; background-color: transparent; }
#right-displayUnit-container a, #bottom-displayUnit-container a { display: block; line-height: 0; width: 100%; height: 100%; }
#right-displayUnit-container img, #bottom-displayUnit-container img { width: 100%; height: 100%; object-fit: fill; }
#right-displayUnit-container { width: 160px; height: 600px; }
#bottom-displayUnit-container { width: 728px; max-width: 100%; height: 90px; }

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

#mobile-add-fab, #mobile-top-fab {
    display: none;
}

@media (max-width: 768px) {
    body { 
        grid-template-columns: 1fr;
    }
    body.has-files {
        /* Allow scrolling to the very bottom, not hidden behind sticky elements */
        padding-bottom: calc(120px + env(safe-area-inset-bottom));
    }
    #sidebar-promos, #right-displayUnit-container { display: none !important; } 
    
    #footer-promo-placeholder {
        right: 0; left: 0; position: fixed;
        height: calc(50px + env(safe-area-inset-bottom)) !important;
        padding-bottom: env(safe-area-inset-bottom);
    }
    #bottom-displayUnit-container { width: 100%; max-width: 100%; height: 50px !important; }

    /* Header adjustments for single line scaling */
    header { flex-wrap: nowrap; padding: 0.75rem 1rem; gap: 0.5rem; overflow: hidden; white-space: nowrap; }
    .logo-title { flex-shrink: 1; min-width: 0; }
    .header-active-title, header h1 { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .header-active-title span { display: none !important; }
    .header-controls { flex-shrink: 0; gap: 0.75rem; }
    
    main { padding: 1.5rem 1.25rem; gap: 1.5rem; }
    .main-title { font-size: 2rem; }
    
    body.has-files #drop-zone { display: none; }
    
    .desktop-drop-text { display: none !important; }
    .mobile-drop-text { display: inline !important; }

    .controls-bar {
        flex-direction: column; gap: 1rem; align-items: stretch; border: none; padding: 0; background: transparent; box-shadow: none;
    }
    .scale-selector-row { background: var(--bg-secondary-color); padding: 1rem; border-radius: var(--radius-xl); border: 1px solid var(--border-color-light); box-shadow: var(--shadow-md); width: 100%; }
    
    .mobile-action-row { 
        display: flex; flex-direction: row; gap: 8px; width: 100%;
        position: fixed; bottom: calc(50px + env(safe-area-inset-bottom)); left: 0; right: 0;
        background: var(--bg-secondary-color); padding: 12px 16px; 
        border-top: 1px solid var(--border-color-light); box-shadow: 0 -4px 10px rgba(0,0,0,0.05); z-index: 990;
    }
    #start-bulk-btn { width: 100%; min-width: 0; }

    footer { padding: 1.5rem 1.5rem calc(1.5rem + 120px + env(safe-area-inset-bottom)) 1.5rem !important; flex-direction: column; gap: 1rem; text-align: center; border-top: none; }
    
    #image-queue-scroll-container { max-height: none !important; overflow: visible !important; padding: 0; }
    
    /* Hide the ghost card entirely on mobile since the + FAB handles adding images */
    .ghost-add-card { display: none !important; }

    /* Touch Targets Enhancements */
    .thumbnail-actions .btn, .thumbnail-remove {
        height: 48px !important; min-height: 48px !important;
    }
    .thumbnail-remove {
        width: 48px !important; flex: 0 0 48px !important;
    }
    .thumbnail-actions { gap: 8px !important; }
    .page-btn { min-width: 44px; min-height: 44px; }
    .segmented-control { min-height: 48px; }
    .segmented-control label { padding: 12px 24px; }
    
    /* Typography Scale Adjustments */
    .status-badge { font-size: 0.875rem !important; padding: 6px 12px; }
    [data-i18n-key="scaleHelper"] { font-size: 0.875rem !important; }
    .thumbnail-details-size { font-size: 0.875rem !important; }

    #mobile-add-fab, #mobile-top-fab {
        display: flex;
        position: fixed;
        bottom: calc(126px + env(safe-area-inset-bottom));
        width: 56px; height: 56px;
        border-radius: 50%; padding: 0;
        z-index: 995;
        box-shadow: 0 4px 12px rgba(0,0,0,0.3);
        align-items: center; justify-content: center;
    }
    #mobile-add-fab { right: 16px; }
    #mobile-top-fab { left: 16px; }
    body:not(.has-files) #mobile-add-fab, 
    body:not(.has-files) #mobile-top-fab { display: none !important; }
}

@media (max-width: 400px) {
    .scale-selector-row { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
    .segmented-control { width: 100%; }
}