/* CSS Property for animated gradient angle */
@property --glow-angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false;
}

@property --glow-position {
    syntax: '<percentage>';
    initial-value: 0%;
    inherits: false;
}

:root {
    /* ===== iOS Color Palette ===== */
    --ios-blue: #007AFF;
    --ios-purple: #AF52DE;
    --ios-pink: #FF2D55;
    --ios-orange: #FF9500;
    --ios-green: #34C759;
    --ios-green-soft: #30D158;
    --ios-red: #FF3B30;
    --ios-red-soft: #FF453A;
    --ios-teal: #5AC8FA;
    --ios-blue-rgb: 0, 122, 255;
    --ios-green-rgb: 52, 199, 89;
    --ios-red-rgb: 255, 59, 48;
    --ios-red-light: #FF6B6B;
    
    /* ===== Glassmorphism ===== */
    --glass-bg: rgba(255, 255, 255, 0.72);
    --glass-border: rgba(255, 255, 255, 0.18);
    
    /* ===== Text Colors ===== */
    --text-primary: #000000;
    --text-secondary: #3C3C43;
    --text-tertiary: #636366; /* WCAG AA compliant: ~5.8:1 on white */
    
    /* ===== Background Colors ===== */
    --bg-primary: #F2F2F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E5E5EA;
    
    /* ===== Shadows ===== */
    --shadow-sm: 0 2px 16px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 8px 32px rgba(0, 0, 0, 0.12);
    --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.16);
    --glow-blue: 0 0 20px rgba(var(--ios-blue-rgb), 0.3);
    
    /* ===== Primary Theme ===== */
    --primary-color: #007AFF;
    --primary-gradient: linear-gradient(135deg, #007AFF, #5856D6);
    
    /* ===== Spacing Scale (consistent padding/margin) ===== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 32px;
    
    /* ===== Border Radius Scale ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 20px;
    --radius-full: 9999px;
    
    /* ===== Typography Scale ===== */
    --text-xs: 10px;
    --text-sm: 12px;
    --text-base: 14px;
    --text-lg: 16px;
    --text-xl: 18px;
    --text-2xl: 20px;
    --text-3xl: 22px;
    
    /* ===== Font Weights ===== */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;
    
    /* ===== Font Family ===== */
    --font-system: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    
    /* ===== Transitions ===== */
    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s ease;
    --transition-slow: 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* ===== Z-index Scale ===== */
    --z-base: 1;
    --z-dropdown: 100;
    --z-sticky: 200;
    --z-overlay: 10000;
    --z-modal: 10001;
    --z-confirm: 10002;
    --z-toast: 10003;
    --z-loader: 10005;
}

/* Light mode (default) */

/* ============================================================
   BASE MODAL STYLES (shared across all modals)
   Use these classes instead of duplicating overlay styles.
   ============================================================ */

/* Base overlay - extend this with specific modal classes */
.modal-overlay-base,
[class*="-modal-overlay"],
[class*="-overlay"].modal-type {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity var(--transition-normal);
    padding: var(--spacing-xl);
}

.modal-overlay-base.active,
[class*="-modal-overlay"].active,
[class*="-overlay"].modal-type.active {
    opacity: 1;
}

/* Base panel styles */
.modal-panel-base {
    width: 100%;
    max-width: 400px;
    max-height: 85vh;
    background: var(--glass-bg, rgba(28, 28, 30, 0.95));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.1));
    border-radius: var(--radius-xl);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.35);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: transform;
}

.active .modal-panel-base,
[class*="-modal-overlay"].active > [class*="-panel"],
[class*="-modal-overlay"].active > [class*="-modal"] {
    transform: translateY(0) scale(1);
}

body.light-mode .modal-panel-base {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

/* Base modal header */
.modal-header-base {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-bottom: 1px solid var(--glass-border);
    flex-shrink: 0;
}

/* Base modal title */
.modal-title-base {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--text-primary);
    flex: 1;
    margin: 0;
}

/* Base modal body */
.modal-body-base {
    padding: var(--spacing-lg) var(--spacing-xl);
    overflow-y: auto;
    flex: 1;
    scrollbar-width: thin;
}

/* Base modal footer */
.modal-footer-base {
    display: flex;
    gap: var(--spacing-sm);
    padding: var(--spacing-lg) var(--spacing-xl);
    border-top: 1px solid var(--glass-border);
    flex-shrink: 0;
}

/* Base close button */
.modal-close-base {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, 0.1);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    flex-shrink: 0;
}

.modal-close-base:hover {
    background: rgba(255, 255, 255, 0.2);
    color: var(--text-primary);
}

body.light-mode .modal-close-base {
    background: rgba(0, 0, 0, 0.06);
}

body.light-mode .modal-close-base:hover {
    background: rgba(0, 0, 0, 0.12);
}

/* Modal button styles (for modal-utils.js) */
.modal-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    border-radius: var(--radius-md);
    font-size: var(--text-base);
    font-weight: var(--font-medium);
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

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

.modal-btn-primary:hover {
    filter: brightness(1.1);
}

.modal-btn-secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
}

body.light-mode .modal-btn-secondary {
    background: rgba(0, 0, 0, 0.06);
}

.modal-btn-danger {
    background: var(--ios-red);
    color: white;
}

.modal-btn-danger:hover {
    background: var(--ios-red-soft);
}

/* Modal message text */
.modal-message {
    font-size: var(--text-base);
    color: var(--text-primary);
    text-align: center;
    margin: 0;
    line-height: 1.5;
}

/* Modal input field */
.modal-input {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    border: 1px solid var(--glass-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: var(--text-base);
    margin-top: var(--spacing-md);
}

.modal-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--ios-blue-rgb), 0.2);
}

body.light-mode .modal-input {
    background: rgba(0, 0, 0, 0.04);
}

/* Loading modal spinner */
.loading-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--spacing-lg);
    padding: var(--spacing-xl);
}

.loading-spinner {
    width: 32px;
    height: 32px;
    border: 3px solid rgba(255, 255, 255, 0.1);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

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

.loading-message {
    font-size: var(--text-base);
    color: var(--text-secondary);
    margin: 0;
}

/* Modal buttons container */
.modal-buttons {
    display: flex;
    gap: var(--spacing-sm);
    padding-top: var(--spacing-lg);
    justify-content: flex-end;
}

/* ============================================================
   END BASE MODAL STYLES
   ============================================================ */

/* Globalna czcionka dla wszystkich pól edycji */
input,
textarea,
select,
button {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}

/* iOS Safari zoom fix — font-size >= 16px prevents auto-zoom on focus */
@supports (-webkit-touch-callout: none) {
    input,
    textarea,
    select {
        font-size: 16px;
    }
}
body.light-mode {
    --glass-bg: rgba(255, 255, 255, 0.95);
    --glass-border: rgba(0, 0, 0, 0.12);
    --text-primary: #000000;
    --text-secondary: #3C3C43;
    --text-tertiary: #636366; /* WCAG AA compliant: ~5.8:1 on white */
    --bg-primary: #F2F2F7;
    --bg-secondary: #FFFFFF;
    --bg-tertiary: #E5E5EA;
    --bg-gradient: radial-gradient(ellipse at top, #FFFFFF 0%, #F2F2F7 50%, #E5E5EA 100%);
    background: var(--bg-gradient);
}

/* Light mode - frosted glass for tiles and widgets */
body.light-mode .seller-tile {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Desktop: restore light mode glass effect */
@media (min-width: 769px) {
    body.light-mode .seller-tile {
        background: rgba(255, 255, 255, 0.72);
        border: 1px solid rgba(0, 0, 0, 0.06);
        box-shadow:
            0 2px 8px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.8);
    }
}

body.light-mode .seller-tile::before {
    display: none;
}

body.light-mode .seller-tile:hover {
    box-shadow:
        0 4px 16px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .info-widget {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .info-widget::before {
    display: none;
}

/* Light mode header - styles moved to .header-card block */

body.light-mode .glass-card {
    background: rgba(255, 255, 255, 0.72);
    border: 1px solid rgba(0, 0, 0, 0.06);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.04),
        0 8px 32px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .glass-card::before {
    display: none;
}

/* Dark mode */
body.dark-mode {
    --glass-bg: rgba(28, 28, 30, 0.85);
    --glass-border: rgba(255, 255, 255, 0.1);
    --text-primary: #FFFFFF;
    --text-secondary: #EBEBF5;
    --text-tertiary: #AEAEB2; /* WCAG AA compliant: ~5.6:1 on dark bg */
    --bg-primary: #000000;
    --bg-secondary: #1C1C1E;
    --bg-tertiary: #2C2C2E;
    --bg-gradient: radial-gradient(ellipse at top, #071018 0%, #030508 50%, #000000 100%);
    background: var(--bg-gradient);
}

/* Accent colors with glass-like gradients */
body.accent-blue { 
    --primary-color: #007AFF; 
    --primary-color-secondary: #5AC8FA;
    --primary-gradient: linear-gradient(135deg, #007AFF 0%, #5AC8FA 100%);
    --primary-gradient-glass: linear-gradient(135deg, rgba(var(--ios-blue-rgb), 0.4), rgba(90, 200, 250, 0.3));
    --primary-glow: rgba(var(--ios-blue-rgb), 0.4);
    --glass-tint: rgba(var(--ios-blue-rgb), 0.12);
    --glass-tint-strong: rgba(var(--ios-blue-rgb), 0.2);
    --primary-rgb: 0, 122, 255;
    --secondary-rgb: 90, 200, 250;
    --bg-gradient: radial-gradient(ellipse at top, #071018 0%, #030810 50%, #000000 100%);
}
body.accent-pink { 
    --primary-color: #FF2D55; 
    --primary-color-secondary: #A855F7;
    --primary-gradient: linear-gradient(135deg, #FF2D55 0%, #A855F7 100%);
    --primary-gradient-glass: linear-gradient(135deg, rgba(255, 45, 85, 0.4), rgba(168, 85, 247, 0.3));
    --primary-glow: rgba(255, 45, 85, 0.4);
    --glass-tint: rgba(255, 45, 85, 0.12);
    --glass-tint-strong: rgba(255, 45, 85, 0.2);
    --primary-rgb: 255, 45, 85;
    --secondary-rgb: 168, 85, 247;
    --bg-gradient: radial-gradient(ellipse at top, #1a0c12 0%, #0d060a 50%, #000000 100%);
}
body.accent-green { 
    --primary-color: #7FFF00; 
    --primary-color-secondary: #FFD700;
    --primary-gradient: linear-gradient(135deg, #7FFF00 0%, #FFD700 100%);
    --primary-gradient-glass: linear-gradient(135deg, rgba(127, 255, 0, 0.4), rgba(255, 215, 0, 0.3));
    --primary-glow: rgba(127, 255, 0, 0.5);
    --glass-tint: rgba(127, 255, 0, 0.15);
    --glass-tint-strong: rgba(127, 255, 0, 0.25);
    --primary-rgb: 127, 255, 0;
    --secondary-rgb: 255, 215, 0;
    --bg-gradient: radial-gradient(ellipse at top, #0a1808 0%, #080a02 50%, #000000 100%);
}
body.accent-orange { 
    --primary-color: #FF8C00; 
    --primary-color-secondary: #FF3B3B;
    --primary-gradient: linear-gradient(135deg, #FFD200 0%, #FF8C00 50%, #FF3B3B 100%);
    --primary-gradient-glass: linear-gradient(135deg, rgba(255, 210, 0, 0.4), rgba(255, 140, 0, 0.35), rgba(255, 59, 59, 0.3));
    --primary-glow: rgba(255, 140, 0, 0.4);
    --glass-tint: rgba(255, 140, 0, 0.12);
    --glass-tint-strong: rgba(255, 140, 0, 0.2);
    --primary-rgb: 255, 140, 0;
    --secondary-rgb: 255, 59, 59;
    --bg-gradient: radial-gradient(ellipse at top, #1a1008 0%, #0d0804 50%, #000000 100%);
}
body.accent-red { 
    --primary-color: var(--ios-red); 
    --primary-color-secondary: #FFB347;
    --primary-gradient: linear-gradient(135deg, #FF3B30 0%, #FFB347 100%);
    --primary-gradient-glass: linear-gradient(135deg, rgba(var(--ios-red-rgb), 0.4), rgba(255, 179, 71, 0.3));
    --primary-glow: rgba(var(--ios-red-rgb), 0.4);
    --glass-tint: rgba(var(--ios-red-rgb), 0.12);
    --glass-tint-strong: rgba(var(--ios-red-rgb), 0.2);
    --primary-rgb: 255, 59, 48;
    --secondary-rgb: 255, 179, 71;
    --bg-gradient: radial-gradient(ellipse at top, #1a0808 0%, #0d0404 50%, #000000 100%);
}

/* Apple Fitness Rings Accent - 3 Color Vibrant */
body.accent-fitness { 
    --primary-color: #FF2D55;
    --primary-color-secondary: #30D158;
    --primary-color-tertiary: #00D4FF;
    --primary-gradient: linear-gradient(135deg, #FF2D55 0%, #30D158 50%, #00D4FF 100%);
    --primary-gradient-glass: linear-gradient(135deg, rgba(255, 45, 85, 0.35), rgba(48, 209, 88, 0.35), rgba(0, 212, 255, 0.35));
    --primary-glow: rgba(255, 45, 85, 0.4);
    --glass-tint: rgba(48, 209, 88, 0.12);
    --glass-tint-strong: rgba(48, 209, 88, 0.2);
    --primary-rgb: 255, 45, 85;
    --secondary-rgb: 48, 209, 88;
    --tertiary-rgb: 0, 212, 255;
    --bg-gradient: radial-gradient(ellipse at top, #100808 0%, #081008 50%, #000000 100%);
}

/* Light mode background gradients for all accents */
body.light-mode.accent-blue,
body.light-mode.accent-pink,
body.light-mode.accent-green,
body.light-mode.accent-orange,
body.light-mode.accent-red,
body.light-mode.accent-fitness {
    --bg-gradient: radial-gradient(ellipse at top, #FFFFFF 0%, #F2F2F7 50%, #E5E5EA 100%);
    background: var(--bg-gradient);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
    -webkit-touch-callout: none;
}

/* ====== GLOBAL DATE INPUT STYLES ====== */
/* Universal styles for all date inputs across the app */
input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background: rgba(255, 255, 255, 0.12) !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}

input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    font-size: 16px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

/* Light mode override for date inputs */
body.light-mode input[type="date"] {
    color-scheme: light;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 1;
}

body.light-mode input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

/* ====== CUSTOM DATE PICKER ====== */
.custom-datepicker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10002;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.3s ease;
}

.custom-datepicker-overlay.active {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.custom-datepicker {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 20px;
    min-width: min(320px, calc(100vw - 40px));
    max-width: min(360px, calc(100vw - 40px));
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-datepicker-overlay.active .custom-datepicker {
    transform: scale(1) translateY(0);
    animation: modalBounceIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.datepicker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 15px;
    border-bottom: 1px solid var(--glass-border);
}

.datepicker-month-year {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.datepicker-nav-btn {
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.datepicker-nav-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary-color);
}

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

.datepicker-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
    margin-bottom: 10px;
}

.datepicker-weekdays div {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    padding: 8px 0;
}

.datepicker-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 4px;
}

.datepicker-day {
    aspect-ratio: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.datepicker-day:hover:not(.empty):not(.selected) {
    background: var(--glass-tint);
}

.datepicker-day.empty {
    cursor: default;
}

.datepicker-day.today {
    border: 2px solid var(--primary-color);
}

.datepicker-day.selected {
    background: var(--primary-gradient);
    color: white;
    font-weight: 600;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.4);
}

.datepicker-day.other-month {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.datepicker-day.past {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.datepicker-footer {
    display: flex;
    gap: 10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid var(--glass-border);
}

.datepicker-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.datepicker-btn.secondary {
    background: var(--glass-tint);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
}

.datepicker-btn.secondary:hover {
    background: var(--glass-tint-strong);
    color: var(--text-primary);
}

.datepicker-btn.primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.3);
}

.datepicker-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.4);
}

.datepicker-btn:active {
    transform: scale(0.97);
}

/* Light mode adjustments */
body.light-mode .custom-datepicker {
    background: var(--bg-primary);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
}

body.light-mode .datepicker-day.selected {
    color: white;
}

/* ====== FREEZE BACKGROUND ANIMATIONS WHEN MODAL IS OPEN ====== */
/* body.modal-open is toggled by JS — avoids expensive body:has() selectors */
body.modal-open .seller-panel,
body.modal-open .header-card {
    animation-play-state: paused !important;
}
body.modal-open .seller-panel *,
body.modal-open .header-card * {
    animation-play-state: paused !important;
}

/* ====== GLOBAL MODAL BOUNCE ANIMATION ====== */
@keyframes modalBounceIn {
    0% {
        opacity: 0;
        transform: scale(0.85);
    }
    50% {
        transform: scale(1.02);
    }
    70% {
        transform: scale(0.98);
    }
    100% {
        opacity: 1;
        transform: scale(1);
    }
}

@keyframes modalSlideUp {
    0% {
        opacity: 0;
        transform: translateY(30px) scale(0.95);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

/* Smooth scrolling and momentum */
html, body {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden;
    scrollbar-width: none; /* Firefox */
    -ms-overflow-style: none; /* IE/Edge */
}

/* Hide scrollbar but keep scrolling */
html::-webkit-scrollbar,
body::-webkit-scrollbar,
*::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
    background: transparent;
}

/* Hide scrollbar for all elements */
* {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    background: var(--bg-primary);
    min-height: 100vh;
    min-height: 100dvh; /* Dynamic viewport height for mobile browsers */
    padding: 12px;
    padding-top: max(12px, env(safe-area-inset-top));
    padding-bottom: max(12px, env(safe-area-inset-bottom));
    padding-left: max(12px, env(safe-area-inset-left));
    padding-right: max(12px, env(safe-area-inset-right));
    transition: background 0.6s cubic-bezier(0.4, 0, 0.2, 1);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
    line-height: 1.5;
    font-size: 16px; /* Prevents zoom on iOS */
    position: relative;
}

/* Background Effects Container — ambient mesh gradient orbs */
body::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(ellipse 50% 40% at 10% 15%, rgba(var(--primary-rgb), 0.07) 0%, transparent 70%),
        radial-gradient(ellipse 40% 35% at 90% 20%, rgba(var(--secondary-rgb), 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 55% 30% at 50% 85%, rgba(var(--primary-rgb), 0.05) 0%, transparent 70%),
        radial-gradient(ellipse 35% 40% at 70% 55%, rgba(var(--secondary-rgb), 0.04) 0%, transparent 70%),
        var(--bg-gradient);
    transition: background 0.5s ease;
}

/* Plasma Background Effect */
body.bg-plasma::before {
    background: 
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(var(--primary-rgb), 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(var(--secondary-rgb), 0.2) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 50% 80%, rgba(var(--primary-rgb), 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 70% 60%, rgba(var(--secondary-rgb), 0.15) 0%, transparent 50%),
        var(--bg-gradient);
    background-size: 
        200% 200%,
        200% 200%,
        200% 200%,
        200% 200%,
        100% 100%;
}

/* Aurora Background Effect */
body.bg-aurora::before {
    background: var(--bg-gradient);
}

body.bg-aurora::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: -1;
    pointer-events: none;
    background: 
        /* Ciemny overlay na dole */
        linear-gradient(180deg,
            transparent 0%,
            transparent 50%,
            rgba(0, 0, 0, 0.4) 80%,
            rgba(0, 0, 0, 0.7) 100%
        ),
        /* Główne pionowe kurtyny zorzy */
        linear-gradient(180deg,
            rgba(var(--primary-rgb), 0.35) 0%,
            rgba(var(--primary-rgb), 0.15) 25%,
            rgba(var(--secondary-rgb), 0.08) 40%,
            transparent 60%
        ),
        /* Kurtyna 1 - lewa */
        radial-gradient(ellipse 25% 55% at 15% 15%, 
            rgba(var(--secondary-rgb), 0.3) 0%, 
            rgba(var(--primary-rgb), 0.1) 40%,
            transparent 70%
        ),
        /* Kurtyna 2 - środkowa lewa */
        radial-gradient(ellipse 20% 60% at 35% 10%, 
            rgba(var(--primary-rgb), 0.25) 0%, 
            rgba(var(--secondary-rgb), 0.08) 50%,
            transparent 70%
        ),
        /* Kurtyna 3 - środek */
        radial-gradient(ellipse 30% 55% at 55% 20%, 
            rgba(var(--secondary-rgb), 0.3) 0%, 
            rgba(var(--primary-rgb), 0.1) 45%,
            transparent 70%
        ),
        /* Kurtyna 4 - prawa */
        radial-gradient(ellipse 22% 65% at 80% 8%, 
            rgba(var(--primary-rgb), 0.25) 0%, 
            rgba(var(--secondary-rgb), 0.08) 40%,
            transparent 70%
        );
    background-size: 
        100% 100%,
        100% 100%,
        200% 150%,
        200% 150%,
        200% 150%,
        200% 150%;
    filter: blur(25px) saturate(1.2);
    opacity: 0.85;
}



/* Static Background Effect */
body.bg-static::before {
    background: 
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(var(--primary-rgb), 0.12) 0%, transparent 70%),
        var(--bg-gradient);
    animation: none;
}



/* Light mode plasma - more visible colors */
body.light-mode.bg-plasma::before {
    background: 
        radial-gradient(ellipse 80% 50% at 20% 20%, rgba(var(--primary-rgb), 0.25) 0%, transparent 50%),
        radial-gradient(ellipse 60% 40% at 80% 30%, rgba(var(--secondary-rgb), 0.20) 0%, transparent 50%),
        radial-gradient(ellipse 70% 60% at 50% 80%, rgba(var(--primary-rgb), 0.18) 0%, transparent 50%),
        radial-gradient(ellipse 50% 50% at 70% 60%, rgba(var(--secondary-rgb), 0.15) 0%, transparent 50%),
        var(--bg-gradient);
}

/* Light mode aurora - stronger colors */
body.light-mode.bg-aurora::before {
    background: var(--bg-gradient);
}

body.light-mode.bg-aurora::after {
    background: 
        linear-gradient(180deg,
            rgba(var(--primary-rgb), 0.5) 0%,
            rgba(var(--primary-rgb), 0.3) 30%,
            rgba(var(--secondary-rgb), 0.15) 50%,
            transparent 80%
        ),
        radial-gradient(ellipse 25% 70% at 15% 20%, 
            rgba(var(--secondary-rgb), 0.45) 0%, 
            rgba(var(--primary-rgb), 0.2) 40%,
            transparent 70%
        ),
        radial-gradient(ellipse 20% 80% at 35% 15%, 
            rgba(var(--primary-rgb), 0.4) 0%, 
            rgba(var(--secondary-rgb), 0.15) 50%,
            transparent 70%
        ),
        radial-gradient(ellipse 30% 75% at 55% 25%, 
            rgba(var(--secondary-rgb), 0.45) 0%, 
            rgba(var(--primary-rgb), 0.2) 45%,
            transparent 70%
        ),
        radial-gradient(ellipse 22% 85% at 80% 10%, 
            rgba(var(--primary-rgb), 0.4) 0%, 
            rgba(var(--secondary-rgb), 0.18) 40%,
            transparent 70%
        ),
        radial-gradient(ellipse 100% 40% at 50% 100%, 
            rgba(var(--primary-rgb), 0.08) 0%, 
            transparent 60%
        );
    opacity: 0.95;
    filter: blur(35px) saturate(1.4);
}

/* Light mode static - stronger glow */
body.light-mode.bg-static::before {
    background: 
        radial-gradient(ellipse 120% 60% at 50% 0%, rgba(var(--primary-rgb), 0.2) 0%, transparent 70%),
        var(--bg-gradient);
}

.container {
    max-width: 520px;
    width: 100%;
    margin: 0 auto;
    padding-bottom: env(safe-area-inset-bottom);
}

/* Inventory / Messages panel expanded — wider for master-detail */
.container.inventory-expanded {
    max-width: 1100px;
}

/* Admin panels (inventory, sales, photos) — 30% wider than default 520px */
.container.admin-expanded {
    max-width: 676px;
}

/* Professional touch feedback for interactive elements */
@media (hover: none) and (pointer: coarse) {
    .seller-tile:active {
        opacity: 0.85;
        transition: opacity 0.1s ease;
    }
    .preset-btn:active,
    .currency-btn:active,
    .numpad-btn:active,
    .segmented-btn:active,
    .round-option:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }
    
    .glass-card:active {
        transform: scale(0.995);
    }
}

.glass-card {
    background: rgba(20, 20, 25, 0.55);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 20px;
    padding: clamp(16px, 4vw, 20px);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.1),
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
    margin-bottom: 16px;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
}

/* Glass card gradient border - simplified */
.glass-card::before {
    display: none;
}

/* Scroll-triggered reveal animations */
.scroll-reveal {
    opacity: 0;
    transform: translateY(20px);
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                transform 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.scroll-reveal.revealed {
    opacity: 1;
    transform: translateY(0);
}

.scroll-reveal:nth-child(2) { transition-delay: 60ms; }
.scroll-reveal:nth-child(3) { transition-delay: 120ms; }
.scroll-reveal:nth-child(4) { transition-delay: 180ms; }
.scroll-reveal:nth-child(5) { transition-delay: 240ms; }

/* Tab content animations */
.tab-content {
    display: none;
}

.tab-content.active {
    display: block;
    animation: panelFadeIn 0.4s ease-out both;
}

/* Panel transitions */
@keyframes panelFadeIn {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes tilesSlideBack {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

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

/* Keyboard active state */
body.keyboard-active .hide-on-keyboard {
    opacity: 0;
    max-height: 0;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden;
    transform: translateY(-10px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.hide-on-keyboard {
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

body.keyboard-active .glass-card {
    display: flex;
    flex-direction: column;
}

body.keyboard-active .result-container {
    order: 1;
}

body.keyboard-active .numpad {
    order: 3;
    margin-top: 16px;
    margin-bottom: 0;
}

body.keyboard-active .input-display {
    order: 2;
}

.input-display {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.keyboard-active .input-display {
    opacity: 1;
    max-height: 200px;
}

/* Disable system keyboard on mobile - only for calculator inputs */
body.keyboard-active .calculator-section input[type="text"],
body.keyboard-active .calculator-section input[type="number"] {
    -webkit-user-select: none;
    user-select: none;
    pointer-events: none;
}

body.keyboard-active #targetPrice {
    pointer-events: auto;
    caret-color: transparent;
}

.header-card {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 16px auto 20px;
    padding: 0 8px 0 20px;
    height: 52px;
    max-width: 100%;
    box-sizing: border-box;
    position: relative;
    z-index: 100;
    overflow: visible;
    background: rgba(20, 20, 25, 0.65);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 100px;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.15),
        0 8px 32px rgba(0, 0, 0, 0.12),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Light mode header */
body.light-mode .header-card {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        0 8px 32px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

/* Remove old gradient border pseudo-element */
.header-card::before {
    display: none;
}

.header-left {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 1;
    min-width: 0;
    overflow: hidden;
    transition: transform 0.3s ease;
}

.header-title {
    font-size: 17px;
    font-weight: 500;
    letter-spacing: -0.2px;
    display: flex;
    align-items: center;
    gap: 0;
    line-height: 1.2;
    white-space: nowrap;
    overflow: visible;
    text-overflow: ellipsis;
    color: var(--text-primary);
}

.header-title .header-separator {
    color: var(--text-primary);
    opacity: 0.3;
    font-weight: 300;
    margin: 0 6px;
}

.header-title .header-panel-name {
    display: inline-block;
    font-weight: 400;
    opacity: 0.85;
}

.header-site-name {
    background: linear-gradient(135deg, #60a5fa 0%, #a78bfa 50%, #f472b6 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 700;
    letter-spacing: -0.3px;
}



.header-buttons {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
    position: relative;
    z-index: 101;
    flex-shrink: 0;
}

/* Sync indicator spinner */
.sync-indicator {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    opacity: 0.6;
}

.sync-spinner {
    animation: spin 1s linear infinite;
}

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

@keyframes ovokoCatFlash {
    0% { background-color: rgba(34,197,94,0.25); }
    100% { background-color: transparent; }
}

/* Offline connection banner */
.offline-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 16px;
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.25);
    border-radius: 12px;
    color: #f87171;
    font-size: 0.82rem;
    font-weight: 500;
    margin-bottom: 8px;
    animation: offlineFadeIn 0.3s ease;
}
.offline-banner svg {
    flex-shrink: 0;
    color: #ef4444;
}
@keyframes offlineFadeIn {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
}

.seller-login-btn {
    background: rgba(255, 255, 255, 0.08);
    border: none;
    border-radius: 100px;
    padding: 0 14px;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 6px;
    color: var(--text-primary);
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    user-select: none;
    -webkit-user-select: none;
    position: relative;
    z-index: 10;
    height: 36px;
    min-width: auto;
    flex-shrink: 0;
}

body.light-mode .seller-login-btn {
    background: rgba(0, 0, 0, 0.04);
}

.seller-login-btn .seller-login-icon {
    width: 14px;
    height: 14px;
    stroke: var(--text-secondary);
}

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

.seller-login-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

body.light-mode .seller-login-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

.seller-login-btn:hover .seller-login-icon {
    animation: lockWiggle 0.5s ease-in-out;
}

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

/* Touch feedback on mobile */
@media (hover: none) and (pointer: coarse) {
    .seller-login-btn:active {
        background: rgba(255, 255, 255, 0.12);
    }
}

.seller-login-btn.logged-in {
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
}

.seller-logout-btn {
    background: var(--bg-secondary);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    width: 40px;
    height: 40px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ios-red);
    position: relative;
    z-index: 102;
    flex-shrink: 0;
    aspect-ratio: 1;
}

.seller-logout-btn:hover {
    background: rgba(var(--ios-red-rgb), 0.15);
    border-color: rgba(var(--ios-red-rgb), 0.3);
}

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

.seller-logout-btn svg {
    transition: transform 0.2s ease;
}

.header-back-btn {
    width: 0;
    height: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    margin-right: 0;
    flex-shrink: 0;
    overflow: hidden;
    padding: 0;
    opacity: 0;
    transition: width 0.3s ease-out,
                margin-right 0.3s ease-out,
                opacity 0.3s ease-out,
                background 0.2s ease,
                transform 0.2s ease;
    pointer-events: none;
}

.header-back-btn.visible {
    width: 36px;
    margin-right: 10px;
    opacity: 1;
    pointer-events: auto;
    transition: width 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                margin-right 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94),
                opacity 0.3s ease-out,
                background 0.2s ease,
                transform 0.2s ease;
}

.header-back-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.header-back-btn:active {
    transform: scale(0.92);
    background: rgba(var(--primary-rgb), 0.2);
}

.header-back-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 2;
    transition: transform 0.2s ease;
}

.header-back-btn:hover svg {
    transform: translateX(-2px);
}

/* Light mode back button */
body.light-mode .header-back-btn {
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .header-back-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Public Tiles (for logged out users) */
.public-tiles {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0;
    width: 100%;
    max-width: 600px;
    margin-left: auto;
    margin-right: auto;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.public-tiles.hidden {
    display: none;
}

.public-tile {
    flex: 1;
    max-width: 200px;
    /* MOBILE-FIRST: no blur, solid background */
    background: rgba(30, 35, 45, 0.95);
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 16px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.public-tile::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: var(--glass-tint);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.public-tile.active::before {
    opacity: 1;
}

.public-tile:hover {
    transform: translateY(-1px);
    border-color: rgba(var(--primary-rgb), 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.public-tile:hover::before {
    opacity: 1;
}

.public-tile:active {
    transform: translateY(0);
}

.public-tile-icon {
    font-size: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
    position: relative;
    z-index: 1;
}

.public-tile-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--primary-color);
}

.public-tile-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    position: relative;
    z-index: 1;
}

/* Seller Panel */
.seller-panel {
    display: none;
}

.seller-panel.active {
    display: block;
    opacity: 1;
    transform: none;
}

.seller-panel.tiles-returning {
    animation: tilesSlideBack 0.4s ease-out both;
}

.seller-panel.tiles-exiting {
    display: none;
}

/* Prevent scrollbar flash during panel transitions */
body:has(.seller-panel.tiles-exiting),
body:has(.seller-panel.tiles-returning),
body:has(.panel-entering) {
    overflow: hidden;
}

/* Hide back button when in seller panel main view (tiles) */
.seller-panel > .back-button {
    display: none !important;
}

/* Hide seller-panel-header - we use main header-card instead */
.seller-panel-header {
    display: none !important;
}

.seller-panel-header .header-buttons {
    position: static;
    transform: none;
    display: flex;
    gap: 8px;
    align-items: center;
}

.seller-panel-header .settings-btn {
    position: static;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.3s ease;
    flex-shrink: 0;
    aspect-ratio: 1;
}

.seller-panel-header .settings-btn:hover {
    background: var(--bg-tertiary);
}

.seller-panel-header .settings-btn:active {
    background: var(--bg-tertiary);
}

.seller-panel-header .seller-logout-btn {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.3s ease;
    color: var(--text-primary);
    flex-shrink: 0;
    aspect-ratio: 1;
}

.seller-panel-header .seller-logout-btn:hover {
    background: rgba(var(--ios-red-rgb, 255, 59, 48), 0.2);
    border-color: rgba(var(--ios-red-rgb, 255, 59, 48), 0.3);
}

/* Panel header buttons - Apple pill style */
.panel-header-btn {
    width: 36px;
    height: 36px;
    min-width: 36px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-secondary);
    flex-shrink: 0;
}

.panel-header-btn svg {
    width: 18px;
    height: 18px;
    stroke-width: 1.8;
}

.panel-header-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

.panel-header-btn:active {
    transform: scale(0.92);
    background: rgba(255, 255, 255, 0.12);
}

.panel-header-btn.logout {
    color: rgba(255, 100, 100, 0.9);
}

.panel-header-btn.logout:hover {
    background: rgba(255, 100, 100, 0.15);
    color: #ff6b6b;
}

/* Light mode buttons */
body.light-mode .panel-header-btn {
    background: rgba(0, 0, 0, 0.04);
    color: rgba(0, 0, 0, 0.5);
}

body.light-mode .panel-header-btn:hover {
    background: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.7);
}

body.light-mode .panel-header-btn.logout {
    color: rgba(220, 50, 50, 0.8);
}

body.light-mode .panel-header-btn.logout:hover {
    background: rgba(220, 50, 50, 0.1);
    color: #dc3232;
}

/* Make header-buttons relative for dropdown positioning */
.header-buttons {
    position: relative;
}

.tile-save-btn {
    background: var(--primary-color, #007AFF);
    color: #fff;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    letter-spacing: -0.1px;
}

.tile-save-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 0, 122, 255), 0.28);
}

.tile-save-btn:active {
    filter: brightness(0.94);
    transform: scale(0.97);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.save-btn {
    /* Apple-style pill, używa primary accentu zamiast krzykliwej zieleni.
       Dopasowuje się do estetyki .panel-header-btn (okrągłych pill iconów). */
    background: var(--primary-color, #007AFF);
    color: #fff;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 999px;
    border: none;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
    transition: filter 0.18s ease, transform 0.12s ease, box-shadow 0.18s ease;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    margin-left: 8px;
    letter-spacing: -0.1px;
}

.save-btn:hover {
    filter: brightness(1.06);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb, 0, 122, 255), 0.28);
}

.save-btn:active {
    filter: brightness(0.94);
    transform: scale(0.97);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}

.seller-panel-title {
    text-align: left;
    font-size: 22px;
    font-weight: 400;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    gap: 0;
    line-height: 1;
    white-space: nowrap;
}

.seller-panel-title .header-separator {
    color: var(--text-primary);
    opacity: 0.4;
    font-weight: 400;
    margin: 0 2px;
}

.seller-panel-title .header-panel-name {
    display: inline-block;
    font-weight: 400;
}

.seller-panel-title .header-panel-name.title-changing {
    animation: titleFade 0.35s ease-out forwards;
}

@keyframes titleFade {
    0% {
        opacity: 0;
        transform: translateY(6px);
    }
    100% {
        opacity: 1;
        transform: translateY(0);
    }
}

.seller-panel-title .header-site-name {
    background: var(--primary-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
    background-size: 200% 200%;
    animation: headerGradientFlow 4s ease-in-out infinite;
}

@keyframes gradientShift {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}

@keyframes plasmaFlow {
    0% {
        background-position: 0% 50%;
    }
    25% {
        background-position: 100% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    75% {
        background-position: 0% 100%;
    }
    100% {
        background-position: 0% 50%;
    }
}

/* Daily Dashboard KPIs */
.seller-tiles {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-bottom: 20px;
    padding: 12px 0;
    max-width: 100%;
    justify-content: center;
}

/* Section dividers for tile groups */
.seller-tiles-section {
    grid-column: 1 / -1;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: -0.1px;
    text-transform: none;
    color: var(--text-primary);
    padding: 16px 4px 6px;
    margin-top: 4px;
    display: flex;
    align-items: center;
    gap: 8px;
    border-top: none;
}

.seller-tiles-section:first-child {
    border-top: none;
    margin-top: 0;
    padding-top: 4px;
}

.seller-tiles-section > svg:not([class]) {
    display: none;
}

.seller-tiles-section span {
    opacity: 1;
}

/* Administrator category - pomarańczowy kolor jak DOKUMENTY, ale z możliwością kliknięcia */
.seller-tiles-section[data-category="admin"] {
    color: var(--ios-orange, #FF9500);
    border-top-color: rgba(255, 149, 0, 0.15);
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}

.seller-tiles-section[data-category="admin"]:hover {
    color: #FFB800;
}

.seller-tiles-section[data-category="admin"]:active {
    opacity: 0.8;
}

.seller-tiles-section[data-category="admin"] .admin-lock-icon {
    opacity: 0.7;
    transition: opacity 0.2s ease;
    width: 18px;
    height: 18px;
}

.seller-tiles-section[data-category="admin"]:hover .admin-lock-icon {
    opacity: 0.85;
}

.seller-tiles-section[data-category="admin"] .admin-unlock-icon {
    display: none;
    opacity: 0.8;
    width: 18px;
    height: 18px;
}

/* Unlocked state - zielony kolor */
.seller-tiles-section[data-category="admin"]:not(.seller-tiles-section--locked) {
    cursor: default;
    color: var(--ios-green, #34C759);
    border-top-color: rgba(52, 199, 89, 0.15);
}

.seller-tiles-section[data-category="admin"]:not(.seller-tiles-section--locked) .admin-lock-icon {
    display: none;
}

.seller-tiles-section[data-category="admin"]:not(.seller-tiles-section--locked) .admin-unlock-icon {
    display: block;
    animation: unlockIconPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.seller-tiles-section[data-category="admin"]:not(.seller-tiles-section--locked) .admin-unlock-hint {
    display: none;
}

.seller-tiles-section[data-category="admin"]:not(.seller-tiles-section--locked):hover {
    color: var(--ios-green, #34C759);
}

@keyframes unlockIconPop {
    0% { transform: scale(0.5) rotate(-15deg); opacity: 0; }
    60% { transform: scale(1.2) rotate(5deg); opacity: 1; }
    100% { transform: scale(1) rotate(0deg); opacity: 0.8; }
}

/* Lock button - visible only when unlocked */
.admin-lock-btn {
    display: none;
    margin-left: auto;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    padding: 5px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    font-family: inherit;
    line-height: 1;
    backdrop-filter: blur(10px);
}

.admin-lock-btn svg {
    flex-shrink: 0;
}

.admin-lock-btn:hover {
    color: var(--ios-orange, #FF9500);
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.2);
}

.admin-lock-btn:active {
    opacity: 0.7;
}

.seller-tiles-section[data-category="admin"]:not(.seller-tiles-section--locked) .admin-lock-btn {
    display: inline-flex;
    animation: lockBtnFadeIn 0.4s ease 0.3s both;
}

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

body.light-mode .admin-lock-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .admin-lock-btn:hover {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.2);
}

.seller-tiles-section[data-category="admin"] span {
    opacity: 0.85;
    font-weight: 500;
}

/* Unlock hint badge */
.admin-unlock-hint {
    margin-left: auto;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 1px;
    color: var(--ios-orange, #FF9500);
    background: rgba(255, 149, 0, 0.08);
    border: 1px solid rgba(255, 149, 0, 0.15);
    padding: 4px 14px;
    border-radius: 20px;
    text-transform: uppercase;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    backdrop-filter: blur(10px);
}

.seller-tiles-section[data-category="admin"]:hover .admin-unlock-hint {
    background: rgba(255, 149, 0, 0.12);
    border-color: rgba(255, 149, 0, 0.25);
}

/* Hidden admin tiles */
.seller-tile.admin-hidden {
    display: none !important;
}

/* Admin tiles revealed with animation — slide down from admin header */
.seller-tile[data-category="admin"].admin-revealed {
    display: block !important;
    animation: adminTileReveal 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
    transform-origin: top center;
}

@keyframes adminTileReveal {
    0% {
        opacity: 0;
        transform: translateY(-30px) scale(0.92);
        filter: blur(6px);
    }
    60% {
        filter: blur(0px);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0px);
    }
}

/* Admin section unlock flash effect */
.seller-tiles-section[data-category="admin"].admin-unlock-flash::after {
    content: '';
    position: absolute;
    inset: -2px;
    border-radius: 16px;
    background: radial-gradient(ellipse at 50% 50%, rgba(52, 199, 89, 0.2) 0%, transparent 70%);
    animation: unlockFlash 0.8s ease-out forwards;
    pointer-events: none;
}

@keyframes unlockFlash {
    0% { opacity: 0; transform: scale(0.95); }
    30% { opacity: 1; transform: scale(1.02); }
    100% { opacity: 0; transform: scale(1.05); }
}

/* Admin tiles - orange themed */
.seller-tile[data-category="admin"] {
    background: linear-gradient(145deg,
        rgba(255, 149, 0, 0.14) 0%,
        rgba(255, 149, 0, 0.06) 50%,
        rgba(255, 149, 0, 0.03) 100%);
    border-color: rgba(255, 149, 0, 0.18);
    transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1),
                border-color 0.3s ease,
                box-shadow 0.3s ease;
}

.seller-tile[data-category="admin"] .seller-tile-icon svg {
    stroke: var(--ios-orange, #FF9500);
}

.seller-tile[data-category="admin"] .seller-tile-label {
    color: rgba(255, 149, 0, 0.85);
}

body.light-mode .seller-tile[data-category="admin"] {
    background: linear-gradient(145deg,
        rgba(255, 149, 0, 0.1) 0%,
        rgba(255, 149, 0, 0.04) 50%,
        rgba(255, 149, 0, 0.02) 100%);
    border-color: rgba(255, 149, 0, 0.2);
}

body.light-mode .seller-tile[data-category="admin"] .seller-tile-label {
    color: rgba(180, 100, 0, 0.9);
}

body.light-mode .seller-tile[data-category="admin"]:hover {
    background: linear-gradient(145deg,
        rgba(255, 214, 0, 0.14) 0%,
        rgba(255, 214, 0, 0.06) 100%);
    border-color: rgba(255, 200, 0, 0.4);
    box-shadow: 
        0 0 16px 3px rgba(255, 214, 0, 0.12),
        0 0 30px 8px rgba(255, 214, 0, 0.06);
}

/* Light mode */
body.light-mode .seller-tiles-section {
    border-top-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .seller-tiles-section[data-category="admin"] {
    border-top-color: rgba(255, 149, 0, 0.15);
}

body.light-mode .seller-tiles-section[data-category="admin"]:not(.seller-tiles-section--locked) {
    border-top-color: rgba(52, 199, 89, 0.15);
}

/* Special fitness accent hover - triple color glow */
body.accent-fitness .seller-tile:hover {
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 
        0 0 20px 4px rgba(var(--primary-rgb), 0.35),
        0 0 35px 8px rgba(var(--secondary-rgb), 0.25),
        0 0 50px 12px rgba(var(--tertiary-rgb), 0.2);
    animation: fitnessGlow 3s ease-in-out infinite;
}

@keyframes fitnessGlow {
    0%, 100% {
        box-shadow: 
            0 0 20px 4px rgba(250, 45, 87, 0.4),
            0 0 35px 8px rgba(44, 250, 94, 0.25),
            0 0 50px 12px rgba(0, 212, 255, 0.2);
    }
    33% {
        box-shadow: 
            0 0 20px 4px rgba(44, 250, 94, 0.4),
            0 0 35px 8px rgba(0, 212, 255, 0.25),
            0 0 50px 12px rgba(250, 45, 87, 0.2);
    }
    66% {
        box-shadow: 
            0 0 20px 4px rgba(0, 212, 255, 0.4),
            0 0 35px 8px rgba(250, 45, 87, 0.25),
            0 0 50px 12px rgba(44, 250, 94, 0.2);
    }
}

/* Fitness accent - colorful tiles with different gradients */
body.accent-fitness .seller-tile:nth-child(6n+1) {
    background: linear-gradient(145deg, rgba(250, 45, 87, 0.12) 0%, rgba(168, 85, 247, 0.06) 100%);
    border-color: rgba(250, 45, 87, 0.25);
}
body.accent-fitness .seller-tile:nth-child(6n+2) {
    background: linear-gradient(145deg, rgba(168, 85, 247, 0.12) 0%, rgba(0, 212, 255, 0.06) 100%);
    border-color: rgba(168, 85, 247, 0.25);
}
body.accent-fitness .seller-tile:nth-child(6n+3) {
    background: linear-gradient(145deg, rgba(0, 212, 255, 0.12) 0%, rgba(44, 250, 94, 0.06) 100%);
    border-color: rgba(0, 212, 255, 0.25);
}
body.accent-fitness .seller-tile:nth-child(6n+4) {
    background: linear-gradient(145deg, rgba(44, 250, 94, 0.12) 0%, rgba(var(--ios-blue-rgb), 0.06) 100%);
    border-color: rgba(44, 250, 94, 0.25);
}
body.accent-fitness .seller-tile:nth-child(6n+5) {
    background: linear-gradient(145deg, rgba(var(--ios-blue-rgb), 0.12) 0%, rgba(250, 45, 87, 0.06) 100%);
    border-color: rgba(var(--ios-blue-rgb), 0.25);
}
body.accent-fitness .seller-tile:nth-child(6n+6) {
    background: linear-gradient(145deg, rgba(255, 149, 0, 0.12) 0%, rgba(250, 45, 87, 0.06) 100%);
    border-color: rgba(255, 149, 0, 0.25);
}

/* Fitness accent - smaller, subtler hover glow */
body.accent-fitness .seller-tile:hover {
    animation: none;
    box-shadow: 
        0 0 8px 2px rgba(var(--primary-rgb), 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

body.accent-fitness .seller-tile:nth-child(6n+1):hover {
    border-color: rgba(250, 45, 87, 0.25);
    box-shadow: 
        0 0 8px 2px rgba(250, 45, 87, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}
body.accent-fitness .seller-tile:nth-child(6n+2):hover {
    border-color: rgba(168, 85, 247, 0.25);
    box-shadow: 
        0 0 8px 2px rgba(168, 85, 247, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}
body.accent-fitness .seller-tile:nth-child(6n+3):hover {
    border-color: rgba(0, 212, 255, 0.25);
    box-shadow: 
        0 0 8px 2px rgba(0, 212, 255, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}
body.accent-fitness .seller-tile:nth-child(6n+4):hover {
    border-color: rgba(44, 250, 94, 0.25);
    box-shadow: 
        0 0 8px 2px rgba(44, 250, 94, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}
body.accent-fitness .seller-tile:nth-child(6n+5):hover {
    border-color: rgba(var(--ios-blue-rgb), 0.25);
    box-shadow: 
        0 0 8px 2px rgba(var(--ios-blue-rgb), 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}
body.accent-fitness .seller-tile:nth-child(6n+6):hover {
    border-color: rgba(255, 149, 0, 0.25);
    box-shadow: 
        0 0 8px 2px rgba(255, 149, 0, 0.15),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

.seller-tile:active {
    transition-duration: 0.1s;
    transform: translateY(0) scale(0.985);
    border-color: rgba(var(--secondary-rgb), 0.3);
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.06),
        0 0 6px 2px rgba(var(--secondary-rgb), 0.15);
}

/* Admin tiles hover override - must be after general hover rules */
.seller-tile[data-category="admin"]:hover,
body.accent-fitness .seller-tile[data-category="admin"]:hover {
    border-color: rgba(255, 180, 0, 0.25) !important;
    background: linear-gradient(145deg,
        rgba(255, 180, 0, 0.08) 0%,
        rgba(255, 120, 0, 0.04) 50%,
        rgba(255, 80, 0, 0.02) 100%) !important;
    animation: none !important;
    box-shadow: 
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        0 0 20px 6px rgba(255, 160, 0, 0.12),
        0 4px 24px rgba(0, 0, 0, 0.15) !important;
}

.seller-tile[data-category="admin"]:hover .seller-tile-icon svg,
body.accent-fitness .seller-tile[data-category="admin"]:hover .seller-tile-icon svg {
    stroke: #FFD600 !important;
}

.seller-tile[data-category="admin"]:hover .seller-tile-label,
body.accent-fitness .seller-tile[data-category="admin"]:hover .seller-tile-label {
    color: rgba(255, 200, 0, 0.95) !important;
    text-shadow: none !important;
}

.seller-tile[data-category="admin"]:active {
    border-color: rgba(230, 80, 0, 0.5) !important;
    box-shadow: 0 0 20px 4px rgba(230, 80, 0, 0.3) !important;
}

/* Badge container for top badges (new, overdue) */
.seller-tile-badges-top {
    position: absolute;
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 4px;
    justify-content: center;
    flex-wrap: wrap;
    z-index: 3;
}

/* Count badge - top right, frosted glass style */
.seller-tile-count {
    position: absolute;
    top: 8px;
    right: 8px;
    background: rgba(255, 255, 255, 0.12);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    border-radius: 50%;
    width: 22px;
    height: 22px;
    padding: 0;
    font-size: 10px;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.1);
    z-index: 2;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

/* Unread messages count - blue accent */
.seller-tile-count-unread {
    background: rgba(0, 122, 255, 0.25);
    border-color: rgba(0, 122, 255, 0.4);
    color: #5ac8fa;
    box-shadow: 
        0 2px 8px rgba(0, 122, 255, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

body.light-mode .seller-tile-count-unread {
    background: rgba(0, 122, 255, 0.15);
    border-color: rgba(0, 122, 255, 0.3);
    color: #007aff;
}

/* New badge - frosted glass red style */
.seller-tile-new {
    position: relative;
    background: var(--ios-red, #FF3B30);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: transparent;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    display: none;
    box-shadow: 0 0 6px rgba(var(--ios-red-rgb), 0.4);
    border: none;
    animation: none;
    white-space: nowrap;
    line-height: 0;
    overflow: hidden;
}

/* Overdue badge - solid orange dot */
.seller-tile-overdue {
    position: relative;
    background: var(--ios-orange, #FF9500);
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    color: transparent;
    border-radius: 50%;
    width: 8px;
    height: 8px;
    padding: 0;
    font-size: 0;
    font-weight: 700;
    letter-spacing: 0;
    text-transform: none;
    display: none;
    box-shadow: 0 0 6px rgba(255, 149, 0, 0.4);
    border: none;
    animation: none;
    white-space: nowrap;
    line-height: 0;
    overflow: hidden;
}

/* Beta badge - silver frosted glass style */
.beta-badge {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(180, 190, 200, 0.25);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: #c0c8d0;
    border-radius: 8px;
    padding: 2px 8px;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 1px;
    text-transform: uppercase;
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(200, 210, 220, 0.25);
    white-space: nowrap;
    line-height: 1;
    z-index: 5;
}

/* When both badges are shown — dots stay same size */
.seller-tile-new.compact,
.seller-tile-overdue.compact {
    width: 6px;
    height: 6px;
    padding: 0;
    font-size: 0;
}

@keyframes overdueBadgePulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 
            0 2px 12px rgba(255, 149, 0, 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 
            0 4px 16px rgba(255, 149, 0, 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
}

@keyframes newBadgePulse {
    0%, 100% { 
        transform: scale(1); 
        box-shadow: 
            0 2px 12px rgba(var(--ios-red-rgb), 0.3),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    50% { 
        transform: scale(1.05); 
        box-shadow: 
            0 4px 16px rgba(var(--ios-red-rgb), 0.5),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
}

.seller-tile-beta {
    position: absolute;
    top: 6px;
    left: 50%;
    transform: translateX(-50%);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.9), rgba(255, 94, 58, 0.9));
    color: white;
    border-radius: 8px;
    padding: 2px 6px;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: 0.3px;
    text-transform: uppercase;
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.3);
}

/* ====== INFO WIDGETS ====== */
.info-widgets {
    display: flex;
    gap: 12px;
    margin-bottom: 16px;
    padding: 0;
}

.info-widget {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

/* Widget gradient border - removed */
.info-widget::before {
    display: none;
}

.info-widget.weather-widget {
    flex: 1;
    min-width: 0;
}

/* ====== DATE & TIME WIDGET ====== */
.datetime-widget {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    flex-shrink: 0;
}

.datetime-time {
    font-size: 20px;
    font-weight: 700;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    line-height: 1;
    white-space: nowrap;
    flex-shrink: 0;
}

.datetime-separator {
    width: 1px;
    height: 28px;
    background: var(--text-tertiary);
    opacity: 0.15;
}

.datetime-date {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.datetime-day {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.datetime-full {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* ====== WEATHER WIDGET ====== */
.weather-widget {
    display: flex;
    align-items: center;
    padding: 10px 16px;
    gap: 16px;
    flex: 1;
    min-width: 0;
}

.weather-current {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-right: 16px;
    border-right: 1px solid rgba(255, 255, 255, 0.1);
}

.weather-icon {
    font-size: 32px;
    line-height: 1;
}

.weather-info {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.weather-temp {
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.5px;
    color: var(--text-primary);
    line-height: 1.1;
}

.weather-desc {
    font-size: 10px;
    color: var(--text-secondary);
    font-weight: 500;
    max-width: 80px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weather-forecast {
    display: flex;
    flex: 1;
    justify-content: space-evenly;
    align-items: center;
}

.forecast-day {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    min-width: 34px;
}

.forecast-name {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.forecast-icon {
    font-size: 18px;
    line-height: 1;
}

.forecast-temp {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
}

/* Hover effects */
.info-widget:hover {
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow:
        inset 0 1px 0 rgba(255, 255, 255, 0.08),
        0 4px 16px rgba(0, 0, 0, 0.1);
}

/* ====== QUICK STATS WIDGET ====== */
.quick-stats {
    margin-bottom: 16px;
    padding: 0;
}

.quick-stats-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 8px;
    padding: 0 2px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    text-transform: none;
    letter-spacing: -0.1px;
    cursor: pointer;
    user-select: none;
}

.quick-stats-chevron {
    margin-left: auto;
    opacity: 0.5;
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s;
}

.quick-stats-header:hover .quick-stats-chevron {
    opacity: 0.9;
}

.quick-stats.collapsed .quick-stats-chevron {
    transform: rotate(-90deg);
}

.quick-stats-grid-wrapper {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
    opacity: 1;
}

.quick-stats.collapsed .quick-stats-grid-wrapper {
    grid-template-rows: 0fr;
    opacity: 0;
}

.quick-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    overflow: hidden;
    padding: 2px 0;
}

.quick-stats-header svg {
    opacity: 0.6;
}

.quick-stat-card {
    background: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 8px 10px 7px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: all 0.25s ease;
    cursor: default;
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

.quick-stat-card::before {
    display: none;
}

.quick-stat-card:hover {
    border-color: rgba(255, 255, 255, 0.1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

#statAllegroOrders,
#statOvokoOrders {
    cursor: pointer;
}

#statAllegroOrders:hover,
#statOvokoOrders:hover {
    transform: none;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

#statAllegroOrders::after,
#statOvokoOrders::after {
    content: '›';
    position: absolute;
    top: 6px;
    right: 8px;
    font-size: 16px;
    font-weight: 300;
    color: var(--text-tertiary);
    opacity: 0;
    transition: opacity 0.2s ease;
    pointer-events: none;
    z-index: 3;
}

#statAllegroOrders:hover::after,
#statOvokoOrders:hover::after {
    opacity: 0.7;
}

.quick-stat-card:hover::before {
    display: none;
}



/* ── Orders Detail Modal ─────────────────────────────────────────── */
.orders-modal-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0,0,0,0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    padding: 20px;
}

.orders-modal-overlay.active {
    opacity: 1;
}

.orders-modal-panel {
    width: 100%;
    max-width: 480px;
    max-height: 80vh;
    background: var(--glass-bg, rgba(28,28,30,0.95));
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    transform: translateY(20px) scale(0.96);
    transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}

.orders-modal-overlay.active .orders-modal-panel {
    transform: translateY(0) scale(1);
}

body.light-mode .orders-modal-panel {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

.orders-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

body.light-mode .orders-modal-header {
    border-bottom-color: rgba(0,0,0,0.08);
}

.orders-modal-icon {
    font-size: 20px;
}

.orders-modal-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    flex: 1;
}

.orders-modal-close {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.orders-modal-close:hover {
    background: rgba(255,255,255,0.12);
}

body.light-mode .orders-modal-close {
    background: rgba(0,0,0,0.04);
    color: #333;
}

.orders-modal-body {
    flex: 1;
    overflow-y: auto;
    padding: 16px 18px;
    scrollbar-width: none;
}

.orders-modal-body::-webkit-scrollbar {
    display: none;
}

.orders-modal-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--text-tertiary, #666);
    font-size: 13px;
}

.orders-modal-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 40px 0;
    color: var(--text-tertiary, #666);
    text-align: center;
}

.orders-modal-empty-icon {
    font-size: 36px;
    opacity: 0.5;
}

.orders-modal-empty p {
    margin: 0;
    font-size: 14px;
}

.orders-modal-count {
    font-size: 11px;
    font-weight: 700;
    color: var(--text-tertiary, #666);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 14px;
    padding-left: 2px;
}

.orders-modal-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.orders-modal-order {
    padding: 14px 14px 10px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: all 0.2s;
}

.orders-modal-order:hover {
    background: rgba(255,255,255,0.07);
}

body.light-mode .orders-modal-order {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

body.light-mode .orders-modal-order:hover {
    background: rgba(0,0,0,0.04);
}

.orders-modal-order-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-bottom: 10px;
}

.orders-modal-order-date {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color, #007aff);
    letter-spacing: 0.2px;
}

.orders-modal-order-buyer {
    font-size: 10px;
    color: var(--text-tertiary, #666);
    flex-shrink: 0;
}

.orders-modal-order-date-link {
    color: inherit;
    text-decoration: none;
    transition: opacity 0.15s;
}

.orders-modal-order-date-link:hover {
    opacity: 0.75;
    text-decoration: underline;
}

.orders-modal-order-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 0;
}

.orders-modal-order-item + .orders-modal-order-item {
    border-top: 1px solid rgba(255,255,255,0.05);
}

body.light-mode .orders-modal-order-item + .orders-modal-order-item {
    border-top-color: rgba(0,0,0,0.05);
}

/* ── Thumbnail ── */
.orders-modal-item-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

.orders-modal-item-thumb:hover {
    transform: scale(1.05);
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.orders-modal-item-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
    opacity: 0;
    filter: blur(4px);
    transform: scale(1.04);
    transition: opacity 0.35s ease, filter 0.4s ease, transform 0.4s cubic-bezier(0.25,1,0.5,1);
}

.orders-modal-item-thumb img.thumb-loaded {
    opacity: 1;
    filter: blur(0);
    transform: scale(1);
}

/* Loading spinner shown while image is being fetched */
.orders-modal-item-thumb.thumb-loading::after {
    content: '';
    position: absolute;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: rgba(255,255,255,0.5);
    animation: orderThumbSpin 0.7s linear infinite;
    z-index: 1;
}

body.light-mode .orders-modal-item-thumb.thumb-loading::after {
    border-color: rgba(0,0,0,0.08);
    border-top-color: rgba(0,0,0,0.35);
}

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

/* Hide spinner once image arrives */
.orders-modal-item-thumb:has(img.thumb-loaded)::after {
    display: none;
}

.orders-modal-item-thumb-placeholder {
    color: var(--text-tertiary, #555);
    opacity: 0.4;
}

body.light-mode .orders-modal-item-thumb {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}

/* ── Item info ── */
.orders-modal-item-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding-top: 2px;
}

.orders-modal-item-title {
    font-size: 12.5px;
    color: var(--text-primary, #fff);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

a.orders-modal-item-link {
    color: var(--primary-color, #007aff);
    text-decoration: none;
    transition: color 0.15s;
}

a.orders-modal-item-link:hover {
    color: var(--primary-hover, #339aff);
    text-decoration: underline;
}

.orders-modal-item-bottom {
    display: flex;
    align-items: center;
    gap: 8px;
}

.orders-modal-item-qty {
    font-size: 11px;
    color: var(--text-tertiary, #666);
    background: rgba(255,255,255,0.06);
    padding: 1px 6px;
    border-radius: 6px;
    font-weight: 500;
}

body.light-mode .orders-modal-item-qty {
    background: rgba(0,0,0,0.05);
}

.orders-modal-item-price {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary, #aaa);
}

/* ── Order summary (total + shipping) ── */
.orders-modal-order-summary {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
    padding: 8px 0 2px;
    margin-top: 4px;
    border-top: 1px dashed rgba(255,255,255,0.08);
    font-size: 12px;
}

body.light-mode .orders-modal-order-summary {
    border-top-color: rgba(0,0,0,0.08);
}

.orders-modal-summary-shipping {
    color: var(--text-tertiary, #666);
    font-size: 11px;
}

.orders-modal-summary-total {
    color: var(--text-primary, #fff);
    font-size: 13px;
}

.orders-modal-summary-total b {
    color: #34c759;
    font-weight: 700;
}

/* ── Lightbox ── */
.order-lightbox {
    position: fixed;
    inset: 0;
    z-index: 10010;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
}

.order-lightbox.active {
    opacity: 1;
}

.order-lightbox-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.85);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.order-lightbox-content {
    position: relative;
    max-width: 90vw;
    max-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

.order-lightbox-content img {
    max-width: 90vw;
    max-height: 85vh;
    border-radius: 16px;
    box-shadow: 0 20px 80px rgba(0,0,0,0.5);
    object-fit: contain;
    animation: lb-pop 0.3s cubic-bezier(0.22, 1, 0.36, 1) forwards;
}

@keyframes lb-pop {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

.order-lightbox-close {
    position: absolute;
    top: -12px;
    right: -12px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    z-index: 1;
}

.order-lightbox-close:hover {
    background: rgba(255,255,255,0.25);
    transform: scale(1.1);
}

@media (max-width: 500px) {
    .orders-modal-panel {
        max-height: 90vh;
        border-radius: 16px;
    }
    .orders-modal-item-thumb {
        width: 46px;
        height: 46px;
        border-radius: 10px;
    }
}

/* Accent colors per card */
.quick-stat-card:nth-child(1)::before { background: linear-gradient(90deg, #FF6B35, #FF8F5E); }
.quick-stat-card:nth-child(2)::before { background: linear-gradient(90deg, #00B4D8, #48CAE4); }
.quick-stat-card:nth-child(3)::before { background: linear-gradient(90deg, #06D6A0, #36E8BA); }
.quick-stat-card:nth-child(4)::before { background: linear-gradient(90deg, #8B5CF6, #A78BFA); }


.quick-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1;
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.5px;
    transition: transform 0.15s ease, opacity 0.15s ease;
}

.quick-stat-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.2;
    letter-spacing: 0.1px;
}

/* Loading shimmer for quick stats */
.quick-stat-value.loading {
    background: linear-gradient(90deg, 
        rgba(255,255,255,0.05) 25%, 
        rgba(255,255,255,0.12) 50%, 
        rgba(255,255,255,0.05) 75%);
    background-size: 200% 100%;
    animation: quickStatShimmer 1.5s infinite;
    border-radius: 6px;
    color: transparent;
    min-width: 30px;
    min-height: 28px;
}

@keyframes quickStatShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

/* Light mode */
body.light-mode .quick-stat-card {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

body.light-mode .quick-stat-card:hover {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

body.light-mode .quick-stats-header {
    color: var(--text-tertiary);
}

/* Responsive */
@media (max-width: 520px) {
    .info-widgets {
        display: grid;
        grid-template-columns: 1fr;
        gap: 8px;
    }
    
    .datetime-widget {
        width: 100%;
        padding: 8px 14px;
        justify-content: center;
    }
    
    .datetime-time {
        font-size: 20px;
        min-width: auto;
    }
    
    .weather-widget {
        padding: 8px 12px;
        gap: 12px;
    }
    
    .weather-current {
        padding-right: 12px;
    }
    
    .weather-icon {
        font-size: 26px;
    }
    
    .weather-temp {
        font-size: 18px;
    }
    
    .forecast-day {
        min-width: 40px;
    }
    
    .forecast-icon {
        font-size: 16px;
    }
}

/* iOS-style jiggle animation for edit mode */
@keyframes iosJiggle1 {
    0%  { transform: rotate(-1deg) translate(-0.5px, -0.5px); }
    25% { transform: rotate(1deg) translate(0.5px, 0px); }
    50% { transform: rotate(-0.5deg) translate(-0.5px, 0.5px); }
    75% { transform: rotate(0.8deg) translate(0.5px, -0.5px); }
    100% { transform: rotate(-1deg) translate(-0.5px, -0.5px); }
}

@keyframes iosJiggle2 {
    0%  { transform: rotate(0.8deg) translate(0.5px, 0.5px); }
    25% { transform: rotate(-1deg) translate(-0.5px, -0.5px); }
    50% { transform: rotate(0.6deg) translate(0px, 0.5px); }
    75% { transform: rotate(-0.8deg) translate(0.5px, 0px); }
    100% { transform: rotate(0.8deg) translate(0.5px, 0.5px); }
}

@keyframes iosJiggle3 {
    0%  { transform: rotate(-0.6deg) translate(0px, 0.5px); }
    25% { transform: rotate(0.9deg) translate(0.5px, -0.5px); }
    50% { transform: rotate(-1deg) translate(-0.5px, 0px); }
    75% { transform: rotate(0.5deg) translate(0px, 0.5px); }
    100% { transform: rotate(-0.6deg) translate(0px, 0.5px); }
}

.seller-tile.edit-mode {
    animation: iosJiggle1 0.25s ease-in-out infinite !important;
    cursor: grab;
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px var(--primary-glow), inset 0 0 0 1px var(--primary-color);
    user-select: none;
    -webkit-user-select: none;
    touch-action: none;
}

/* Alternate jiggle for organic feel — each tile slightly different */
.seller-tile.edit-mode:nth-child(even) {
    animation: iosJiggle2 0.28s ease-in-out infinite !important;
    animation-delay: -0.05s !important;
}

.seller-tile.edit-mode:nth-child(3n) {
    animation: iosJiggle3 0.23s ease-in-out infinite !important;
    animation-delay: -0.12s !important;
}

.seller-tile.edit-mode:nth-child(5n) {
    animation: iosJiggle1 0.26s ease-in-out infinite !important;
    animation-delay: -0.08s !important;
}

.seller-tile.edit-mode:active {
    cursor: grabbing;
}

/* Placeholder style when dragging */
.seller-tile.drag-placeholder {
    animation: none !important;
    opacity: 0.3 !important;
    transform: scale(0.92) !important;
    border-style: dashed !important;
    border-color: var(--primary-color) !important;
    background: transparent !important;
}

/* Floating drag clone */
.drag-clone {
    animation: none !important;
    border-radius: 16px;
    background: var(--primary-gradient-glass) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--primary-color) !important;
}

.seller-tile.dragging {
    opacity: 0.95;
    transform: scale(1.12) rotate(4deg) !important;
    z-index: 1000;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.35), 0 0 60px var(--primary-glow);
    animation: none !important;
    border-color: var(--primary-color);
    background: var(--primary-gradient-glass);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    transition: transform 0.05s ease, box-shadow 0.15s ease, opacity 0.1s ease;
}

.seller-tile.drag-over {
    transform: scale(0.92) !important;
    border-color: var(--primary-color);
    box-shadow: inset 0 0 30px var(--primary-glow), 0 0 20px var(--primary-glow);
    animation: none !important;
    opacity: 0.7;
    transition: all 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* Staggered animation for tiles */
@keyframes tileRevealIn {
    0% {
        opacity: 0;
        transform: translateY(24px) scale(0.92);
        filter: blur(6px);
    }
    60% {
        opacity: 1;
        transform: translateY(-4px) scale(1.02);
        filter: blur(0);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
        filter: blur(0);
    }
}

@keyframes sectionRevealIn {
    0% {
        opacity: 0;
        transform: translateX(-16px);
    }
    100% {
        opacity: 1;
        transform: translateX(0);
    }
}

.seller-tile.animate-in {
    opacity: 0;
    transform: translateY(24px) scale(0.92);
}

.seller-tile.animate-in.show {
    animation: tileRevealIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

.seller-tiles-section.animate-in {
    opacity: 0;
    transform: translateX(-16px);
}

.seller-tiles-section.animate-in.show {
    animation: sectionRevealIn 0.35s ease-out forwards;
}

/* hover/active glow handled above - no transform to avoid jumping */

.back-button {
    display: none;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    color: var(--primary-color);
    font-size: 24px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    opacity: 0;
    transform: scale(0.8);
}

.back-button.visible {
    display: flex;
    opacity: 1;
    transform: scale(1);
}

.back-button:hover {
    background: var(--glass-tint);
    border-color: rgba(var(--primary-rgb), 0.2);
    transform: scale(1.05);
}

.back-button:active {
    transform: scale(0.95);
}

.section-title {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
    transition: all 0.3s ease;
}

.section-title-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 12px;
}

.section-title-row .section-title {
    margin-bottom: 0;
}

.settings-btn {
    background: rgba(var(--primary-rgb), 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 12px;
    padding: 0;
    width: 34px;
    height: 34px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    flex-shrink: 0;
    aspect-ratio: 1;
}

.settings-btn.sync-btn svg {
    transition: transform 0.5s ease;
}

.settings-btn.sync-btn.syncing svg {
    animation: spin 1s linear infinite;
}

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

.settings-btn:hover {
    background: rgba(var(--primary-rgb), 0.18);
    border-color: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.settings-btn:active {
    transform: scale(0.95);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
}

/* Segmented Control for Mode Selection */
.segmented-control {
    display: flex;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
    position: relative;
}

.segmented-btn {
    flex: 1;
    padding: 12px 16px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border-radius: 10px;
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.segmented-control-3 .segmented-btn {
    padding: 10px 8px;
    font-size: 12px;
}

.segmented-btn:not(.active):hover {
    color: var(--text-primary);
}
.segmented-btn:not(.active):active {
    transform: scale(0.97);
}

.segmented-btn.active {
    color: white;
}

.segmented-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(50% - 4px);
    height: calc(100% - 8px);
    background: rgba(var(--primary-rgb), 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    transition: transform 0.25s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.segmented-slider-3 {
    width: calc(33.333% - 4px);
}

.segmented-slider.right {
    transform: translateX(100%);
}

.segmented-slider.center {
    transform: translateX(100%);
}

.segmented-slider-3.center {
    transform: translateX(100%);
}

.segmented-slider-3.right {
    transform: translateX(200%);
}

/* Mode Explanation Box */
.mode-explanation {
    background: var(--glass-tint);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 13px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.mode-explanation strong {
    color: var(--primary-color);
}

/* Toggle switches - GREEN when ON, RED when OFF */
.toggle-switch {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 16px;
    padding: 12px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.toggle-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    line-height: 1;
    display: flex;
    align-items: center;
    transition: color 0.4s ease;
}

.switch {
    position: relative;
    width: 51px;
    height: 31px;
    flex-shrink: 0;
    margin: 0;
    display: inline-flex;
    align-items: center;
}

.switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.slider-toggle {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background: var(--ios-red-soft);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 31px;
    display: flex;
    align-items: center;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.1);
}

.slider-toggle:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    top: 2px;
    background: white;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

input:checked + .slider-toggle {
    background: var(--ios-green-soft);
}

input:checked + .slider-toggle:before {
    transform: translateX(20px);
}

/* Small switches for inline toggles */
.switch-small {
    width: 34px;
    height: 20px;
    position: relative;
    display: inline-flex;
    align-items: center;
    flex-shrink: 0;
    margin: 0;
}

.switch-small input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.switch-small .slider-toggle {
    border-radius: 20px;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background: var(--ios-red-soft);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    display: flex;
    align-items: center;
}

.switch-small .slider-toggle:before {
    content: "";
    position: absolute;
    height: 16px;
    width: 16px;
    left: 2px;
    top: 2px;
    background: white;
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.switch-small input:checked + .slider-toggle {
    background: var(--ios-green-soft);
}

.switch-small input:checked + .slider-toggle:before {
    transform: translateX(14px);
}

.keyboard-toggle {
    width: 100%;
    padding: 12px;
    margin-bottom: 16px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--primary-color);
    font-weight: 600;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.keyboard-toggle:active {
    transform: scale(0.98);
}

/* Numpad - Beautiful Design */
.numpad {
    display: none;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    padding: 12px;
    background: var(--glass-tint);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    margin-top: 16px;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transform: translateY(20px) scale(0.95);
    transition: all 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
}

.numpad.active {
    display: grid;
    opacity: 1;
    max-height: 400px;
    transform: translateY(0) scale(1);
}

.numpad-btn {
    aspect-ratio: 1.3;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 20px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 50px;
    max-height: 58px;
    user-select: none;
    -webkit-user-select: none;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    overflow: hidden;
}

.numpad-btn.decimal {
    font-size: 24px;
    font-weight: 700;
}

.numpad-btn::before {
    content: '';
    position: absolute;
    inset: 0;
    background: var(--glass-tint);
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 14px;
}

.numpad-btn:hover::before {
    opacity: 1;
}

.numpad-btn:active {
    transform: scale(0.94);
    box-shadow: inset 0 1px 4px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.numpad-btn.action {
    background: rgba(var(--primary-rgb), 0.15);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    color: var(--primary-color);
    font-size: 18px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.numpad-btn.action:hover {
    background: rgba(var(--primary-rgb), 0.3);
}

.numpad-btn.action:active {
    transform: scale(0.94);
    box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.3);
}

.dark-mode .numpad {
    background: var(--glass-tint);
}

.input-group {
    margin-bottom: 12px;
    position: relative;
}

/* Modern Input Field Styling */
.input-wrapper {
    position: relative;
    overflow: hidden;
}

/* Input wrapper with inline button (e.g., phone field with + button) */
.input-wrapper:has(.input-inline-btn) {
    display: flex;
    align-items: center;
}

.input-wrapper:has(.input-inline-btn) input {
    flex: 1;
    min-width: 0;
    padding-right: 44px;
}

.input-inline-btn {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    z-index: 2;
}

.input-wrapper::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 12px;
    padding: 1px;
    background: linear-gradient(135deg, transparent, transparent);
    -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    z-index: 1;
}

.input-wrapper:focus-within::before {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
    opacity: 1;
}

.input-wrapper::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 50%;
    width: 0;
    height: 2px;
    background: var(--primary-color);
    transition: all 0.3s ease;
    transform: translateX(-50%);
    border-radius: 2px;
    z-index: 2;
}

.input-wrapper:focus-within::after {
    width: calc(100% - 24px);
}

/*
 * Global input baseline.
 *
 * Wrapped in :where() so the selector has 0 specificity. This means any
 * class-based rule (e.g. `.merge-search-input`, `.custom-modal-input`,
 * compact filter inputs) automatically overrides this baseline without
 * needing specificity tricks. Previously `input[type="text"]` had
 * specificity (0,1,1) and silently beat class-only rules, which caused
 * mobile `clamp(20px, 5.5vw, 24px)` font-size to leak into small
 * filter/search inputs and make them huge on phones.
 */
:where(input[type="number"], input[type="text"], input[type="date"], input[type="tel"]:not(.pin-tile)) {
    width: 100%;
    padding: clamp(12px, 3vw, 14px) clamp(45px, 12vw, 60px) clamp(12px, 3vw, 14px) clamp(12px, 3vw, 14px);
    font-size: clamp(20px, 5.5vw, 24px);
    font-weight: 600;
    border-radius: 12px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
    appearance: textfield;
    -moz-appearance: textfield;
    position: relative;
}

:where(input[type="number"], input[type="text"], input[type="date"], input[type="tel"]:not(.pin-tile)):hover:not(:focus) {
    border-color: rgba(var(--primary-rgb), 0.3);
    background: rgba(var(--primary-rgb), 0.03);
}

:where(input[type="number"], input[type="text"], input[type="date"], input[type="tel"]:not(.pin-tile)):focus {
    outline: none;
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 
        0 0 0 3px rgba(var(--primary-rgb), 0.12),
        0 2px 8px rgba(0, 0, 0, 0.06);
    background: rgba(var(--primary-rgb), 0.02);
}

/* Hide number spinner */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Floating label animation */
.input-group.floating-label {
    position: relative;
    margin-top: 20px;
}

.input-group.floating-label label {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    font-weight: 500;
    color: var(--text-tertiary);
    pointer-events: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    background: transparent;
    padding: 0 4px;
    z-index: 1;
}

.input-group.floating-label input:focus + label,
.input-group.floating-label input:not(:placeholder-shown) + label {
    top: 0;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--bg-primary);
    letter-spacing: 0.3px;
}

/* Input icon styling */
.input-with-icon {
    position: relative;
}

.input-with-icon .input-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 18px;
    color: var(--text-tertiary);
    transition: all 0.3s ease;
    z-index: 1;
    pointer-events: none;
}

.input-with-icon input {
    padding-left: 44px;
}

.input-with-icon:focus-within .input-icon {
    color: var(--primary-color);
    transform: translateY(-50%) scale(1.1);
}

/* Success state animation */
input.success {
    border-color: var(--ios-green) !important;
    box-shadow: 0 0 0 3px rgba(var(--ios-green-rgb), 0.2) !important;
    animation: inputSuccess 0.5s ease;
}

@keyframes inputSuccess {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

/* Shake animation for invalid input */
input.invalid {
    border-color: var(--ios-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--ios-red-rgb), 0.2) !important;
    animation: inputShake 0.4s ease;
}

@keyframes inputShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-6px); }
    40% { transform: translateX(6px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Text typing effect placeholder */
input::placeholder {
    color: var(--text-tertiary);
    transition: all 0.3s ease;
}

input:focus::placeholder {
    opacity: 0.5;
    transform: translateX(4px);
}

/* Textarea styling */
.input-wrapper textarea {
    width: 100%;
    padding: clamp(12px, 3vw, 14px);
    font-size: 16px;
    font-weight: 500;
    border-radius: 12px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    transition: all 0.3s ease;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    box-sizing: border-box;
    line-height: 1.5;
}

.input-wrapper textarea:hover:not(:focus) {
    border-color: rgba(var(--primary-rgb), 0.3);
}

.input-wrapper textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 
        0 0 0 3px rgba(var(--primary-rgb), 0.15),
        0 4px 12px rgba(var(--primary-rgb), 0.1);
}

/* Character count for inputs */
.input-char-count {
    position: absolute;
    right: 12px;
    bottom: -18px;
    font-size: 11px;
    color: var(--text-tertiary);
    transition: color 0.2s ease;
}

.input-char-count.warning {
    color: #FFB340;
}

.input-char-count.error {
    color: var(--ios-red-light);
}

.edit-part-form {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Kompaktowy formularz edycji części */
.edit-part-form-compact {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.edit-field-compact {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-field-compact label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.edit-input-compact {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: all 0.2s ease;
    font-family: inherit;
    box-sizing: border-box;
}

.edit-input-compact:focus {
    outline: none;
    background: var(--bg-secondary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.edit-input-compact::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.edit-price-compact {
    position: relative;
    display: flex;
    align-items: center;
}

.edit-price-compact .edit-input-compact {
    padding-right: 40px;
}

.edit-currency {
    position: absolute;
    right: 14px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    pointer-events: none;
}

/* Legacy Modern Edit Part Modal */
.edit-part-form-modern {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.edit-part-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--glass-border);
}

.edit-part-icon {
    font-size: 32px;
    animation: bounceIn 0.5s ease;
}

@keyframes bounceIn {
    0% { transform: scale(0); opacity: 0; }
    50% { transform: scale(1.2); }
    100% { transform: scale(1); opacity: 1; }
}

.edit-part-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.edit-part-fields {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.edit-field-group {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
}

.edit-field-group:focus-within {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.3);
    transform: translateX(4px);
}

.edit-field-icon {
    font-size: 20px;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border-radius: 8px;
    flex-shrink: 0;
    margin-top: 2px;
}

.edit-field-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.edit-field-content label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 0;
}

.edit-input-modern {
    width: 100%;
    padding: 10px 12px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    transition: all 0.2s ease;
    font-family: inherit;
}

.edit-input-modern:focus {
    outline: none;
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.edit-input-modern::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.edit-price-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.edit-price-wrapper .edit-input-modern {
    padding-right: 36px;
}

.edit-price-currency {
    position: absolute;
    right: 12px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    pointer-events: none;
}

/* Transfer car model modal */
.transfer-model-form {
    text-align: left;
}

.transfer-model-desc {
    font-size: 14px;
    color: var(--text-primary);
    margin-bottom: 16px;
    line-height: 1.5;
}

.transfer-model-hint {
    font-size: 12px;
    color: var(--text-secondary);
    margin-top: 12px;
    padding: 10px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 8px;
    border-left: 3px solid var(--primary-color);
    line-height: 1.4;
}

/* Mniejsza czcionka podczas edycji dla lepszej widoczności */
.edit-input-small {
    font-size: 15px;
    padding: 12px 14px;
    letter-spacing: 0.2px;
}

.edit-input-small:focus {
    font-size: 15px;
}

label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    transition: all 0.3s ease;
}

label.fade-out {
    opacity: 0;
    transform: translateY(-5px);
}

label.fade-in {
    animation: fadeInLabel 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes fadeInLabel {
    from {
        opacity: 0;
        transform: translateY(5px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.section-title.fade-out {
    opacity: 0;
    transform: translateY(-5px);
}

.section-title.fade-in {
    animation: fadeInLabel 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.result-label {
    font-size: 11px;
    opacity: 0.85;
    text-transform: uppercase;
    letter-spacing: 1px;
    font-weight: 600;
    margin-bottom: 8px;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.result-label.fade-out {
    opacity: 0;
    transform: translateY(-5px);
}

.result-label.fade-in {
    animation: fadeInLabel 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.detail-row span:first-child {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.detail-row.fade-out span:first-child {
    opacity: 0;
    transform: translateY(-3px);
}

.detail-row.fade-in span:first-child {
    animation: fadeInLabel 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.input-with-toggle {
    display: flex;
    align-items: stretch;
    gap: 12px;
}

.input-with-toggle .input-wrapper {
    flex: 1;
}

.validation-error {
    color: var(--ios-red);
    font-size: 11px;
    font-weight: 600;
    margin-left: 6px;
    display: none;
    background: rgba(var(--ios-red-rgb), 0.1);
    padding: 1px 5px;
    border-radius: 4px;
    border: 1px solid rgba(var(--ios-red-rgb), 0.2);
    white-space: nowrap;
    vertical-align: middle;
}

.validation-error.visible {
    display: inline;
}

.section-separator {
    border: none;
    height: 0;
    background: transparent;
    margin: 20px 0;
    border-radius: 0;
}

.currency {
    position: absolute;
    right: clamp(12px, 3vw, 14px);
    top: 50%;
    transform: translateY(-50%);
    font-size: clamp(20px, 5.5vw, 24px);
    font-weight: 600;
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Presets with beautiful glow */
.presets {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 6px;
    margin-bottom: 20px;
}

.preset-btn {
    padding: 12px 8px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    font-weight: 600;
    font-size: 13px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.preset-btn::before {
    display: none;
}

.preset-btn:hover::before,
.preset-btn:active::before {
    display: none;
}

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

.preset-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    border-color: rgba(var(--primary-rgb), 0.25);
}

.dark-mode .preset-btn.active {
    background: rgba(255, 255, 255, 0.15);
    color: var(--primary-color);
}

.percent-row {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.percent-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.percent-btn {
    width: 36px;
    height: 36px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--primary-color);
    font-size: 22px;
    font-weight: 400;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
    position: relative;
    padding: 0;
    margin: 0;
    line-height: 0;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
}

.percent-btn::before {
    display: none;
}

.percent-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.percent-btn:hover::before {
    display: none;
}

.percent-btn:active::before {
    display: none;
}

.percent-btn:active {
    transform: scale(0.92);
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.dark-mode .percent-btn {
    color: white;
}

.dark-mode .percent-btn:active {
    background: rgba(255, 255, 255, 0.18);
    color: var(--primary-color);
}

.percent-btn.bounce {
    animation: buttonBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes buttonBounce {
    0% { transform: scale(1); }
    30% { transform: scale(0.85); }
    50% { transform: scale(1.1); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Copyright Modal */
.copyright-modal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    padding: 20px;
    opacity: 0;
    visibility: hidden;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.copyright-modal.active {
    opacity: 1;
    visibility: visible;
}

.copyright-content {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    padding: 32px 24px;
    max-width: 400px;
    width: 100%;
    box-shadow: var(--shadow-lg);
    text-align: center;
    transform: scale(0.9);
    transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.copyright-modal.active .copyright-content {
    transform: scale(1);
    animation: modalBounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.copyright-title {
    font-size: 28px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
    margin-top: 8px;
}

.copyright-title::after {
    content: '®';
    font-size: 14px;
    vertical-align: super;
    margin-left: 2px;
}

h1::after {
    content: '®';
    font-size: 14px;
    vertical-align: super;
    margin-left: 2px;
}

.copyright-subtitle {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 24px;
}

.copyright-message {
    font-size: 15px;
    line-height: 1.6;
    color: var(--text-primary);
    margin-bottom: 24px;
    padding: 16px;
    background: var(--glass-tint);
    border-radius: 12px;
    border: 1px solid var(--primary-color);
}

.copyright-accept-btn {
    width: 100%;
    padding: 14px 24px;
    background: rgba(var(--primary-rgb), 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    border-radius: 12px;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 24px var(--primary-glow);
}

.copyright-accept-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 0 32px var(--primary-glow);
    background: rgba(var(--primary-rgb), 0.3);
}

.copyright-accept-btn:active {
    transform: scale(0.98);
}

.percent-input-wrapper {
    position: relative;
    display: inline-block;
}

.percent-input {
    width: 90px !important;
    padding: 10px 4px !important;
    font-size: 16px;
    font-weight: 600;
    border-radius: 10px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--primary-color);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--glass-border);
    appearance: textfield;
    -moz-appearance: textfield;
}

.percent-input::-webkit-outer-spin-button,
.percent-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.percent-input:focus {
    outline: none;
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.percent-symbol {
    position: absolute;
    right: 6px !important;
    top: 50%;
    transform: translateY(-50%);
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
    pointer-events: none;
}

.result-value-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 16px;
    gap: 12px;
}

.result-value {
    font-size: clamp(24px, 7vw, 36px);
    font-weight: 700;
    letter-spacing: -1px;
    flex: 1;
    line-height: 1.1;
    transition: all 0.2s ease;
}

.vat-toggle-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: -8px;
}

/* Smaller toggle variant */
.vat-toggle-inline.vat-toggle-small {
    gap: 6px;
    padding: 4px 8px;
    border-radius: 14px;
}

.vat-toggle-inline.vat-toggle-small .vat-toggle-label {
    font-size: 11px;
}

.vat-toggle-inline.toggle-disabled {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.vat-toggle-inline.toggle-disabled .slider-toggle {
    background: rgba(255, 255, 255, 0.2);
}

.vat-toggle-inline:active {
    transform: scale(0.96);
}

.summary-toggles {
    display: flex;
    gap: 8px;
    align-items: center;
}

.discount-toggle-inline {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 6px 8px;
    background: rgba(255, 255, 255, 0.15);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-top: -8px;
}

.discount-toggle-inline:active {
    transform: scale(0.96);
}

.discount-toggle-label {
    font-size: 10px;
    font-weight: 600;
    color: white;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    display: flex;
    align-items: center;
}

.vat-toggle-label {
    font-size: 10px;
    font-weight: 600;
    color: white;
    opacity: 0.95;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    line-height: 1;
    display: flex;
    align-items: center;
}

/* VAT Number input field - declarations */
.vat-number-input {
    flex: 1;
    padding: 14px 16px;
    background: var(--bg-secondary) !important;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary) !important;
    font-size: 16px;
    -webkit-text-fill-color: var(--text-primary) !important;
    opacity: 1 !important;
    -webkit-opacity: 1 !important;
    transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

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

.vat-number-input::placeholder {
    color: var(--text-tertiary);
    -webkit-text-fill-color: var(--text-tertiary);
    opacity: 0.7;
}

/* Fix for iOS/Safari input visibility */
.dark-mode .vat-number-input {
    background: var(--bg-tertiary) !important;
    color: #FFFFFF !important;
    -webkit-text-fill-color: #FFFFFF !important;
}

.dark-mode .vat-number-input::placeholder {
    color: #8E8E93;
    -webkit-text-fill-color: #8E8E93;
}

/* Invoice number field - EU xxx /2026 format */
.invoice-number-wrapper {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: nowrap;
}

.invoice-prefix {
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    font-size: 16px;
    flex-shrink: 0;
}

/* Phone field - standard input (prefix dropdown removed) */

/* Invoice number input - completely rewritten for iOS compatibility */
.invoice-number-input {
    width: 70px;
    min-width: 60px;
    max-width: 80px;
    flex: 0 0 70px;
    height: 48px;
    padding: 0 8px;
    margin: 0;
    background-color: var(--bg-secondary);
    border: 2px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 2px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    box-sizing: border-box;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.invoice-number-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.5;
    font-weight: 400;
}

.invoice-number-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

/* Dark mode invoice input */
.dark-mode .invoice-number-input {
    background-color: var(--bg-tertiary);
    color: #FFFFFF;
    border-color: rgba(255, 255, 255, 0.15);
}

.dark-mode .invoice-number-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
}

.dark-mode .invoice-number-input:focus {
    border-color: var(--primary-color);
}

.dynamic-year {
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
    font-size: 16px;
    flex-shrink: 0;
}

/* VAT fields wrapper - horizontal layout with compact country select */
.vat-fields-wrapper {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.vat-fields-row {
    display: flex;
    flex-direction: row;
    gap: 8px;
    align-items: center;
}

.country-select-full {
    width: auto;
    min-width: 80px;
    max-width: 90px;
    flex-shrink: 0;
    padding: 14px 12px;
    padding-right: 32px;
}

.vat-number-input-full {
    flex: 1 !important;
    width: auto !important;
    min-width: 0;
}

.vat-validation-message {
    font-size: 12px;
    min-height: 18px;
    padding: 2px 0;
    margin-bottom: 8px;
    text-align: center;
    transition: all 0.2s ease;
}

.vat-validation-message.valid {
    color: #5CDB7B;
}

.vat-validation-message.invalid {
    color: var(--ios-red-light);
}

/* Field validation error styles */
.field-error {
    border: 2px solid var(--ios-red-light) !important;
    box-shadow: 0 0 10px rgba(var(--ios-red-rgb), 0.3) !important;
    animation: shake 0.4s ease;
}

.field-error-message {
    color: var(--ios-red-light);
    font-size: 11px;
    margin-top: 4px;
    display: block;
    text-align: left;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* Apple-style shake animation for validation errors */
.shake {
    animation: shake 0.4s ease;
}

@media (prefers-reduced-motion: reduce) {
    .shake {
        animation: none;
    }
}

/* Wizard field validation error */
.wizard-field-error label {
    color: var(--ios-red-light) !important;
    transition: color 0.3s ease;
}

.wizard-field-error .custom-modal-input,
.wizard-field-error input {
    border-color: var(--ios-red-light) !important;
    box-shadow: 0 0 8px rgba(var(--ios-red-rgb), 0.25) !important;
}

.wizard-tiles-error {
    border-radius: 12px;
    box-shadow: 0 0 0 2px var(--ios-red-light), 0 0 12px rgba(255, 107, 107, 0.25) !important;
    animation: shake 0.4s ease;
}

/* Invoice number wrapper */
.invoice-number-wrapper {
    display: flex;
    gap: 12px;
    align-items: center;
    width: 100%;
}

.result {
    background: rgba(var(--primary-rgb), 0.08);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: clamp(14px, 3.5vw, 16px);
    padding: clamp(16px, 4vw, 20px);
    color: white;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}

.result::before {
    display: none;
}

body.keyboard-active .result {
    padding: clamp(14px, 3.5vw, 16px);
}

.result-details {
    font-size: clamp(11px, 2.8vw, 13px);
    opacity: 0.9;
}

.result-details.commission-breakdown {
    margin-top: 8px;
}

.detail-row {
    display: flex;
    justify-content: space-between;
    padding: clamp(6px, 1.5vw, 8px) 0;
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    font-weight: 500;
}

.detail-row.detail-divider {
    padding: 0;
    margin: 4px 0;
    border-top: 2px solid rgba(255, 255, 255, 0.3);
}

.detail-row.result-netto,
.detail-row.result-brutto {
    font-weight: 700;
    font-size: clamp(13px, 3.2vw, 15px);
    padding: clamp(8px, 2vw, 12px) 8px;
    margin: 0 -8px;
    border-radius: 8px;
    transition: all 0.2s ease;
}

.detail-row.result-netto {
    background: rgba(var(--ios-green-rgb), 0.1);
    border-top: none;
}

.detail-row.result-brutto {
    background: rgba(var(--primary-rgb), 0.15);
    border-top: none;
    color: var(--primary-color);
}

.detail-row.clickable-result {
    cursor: pointer;
}

/* VAT and rounding detail rows in commission calculator */
.detail-row.vat-detail-row {
    background: rgba(var(--ios-green-rgb), 0.1);
    padding: 8px 10px;
    margin: 4px -10px 0;
    border-radius: 8px;
    border-top: none;
    color: var(--ios-green);
    font-weight: 600;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 10px;
    margin: 0 -10px;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-row.vat-detail-row.show {
    max-height: 50px;
    opacity: 1;
    padding: 8px 10px;
    margin: 4px -10px 0;
}

.detail-row.round-detail-row {
    background: rgba(255, 149, 0, 0.1);
    padding: 8px 10px;
    margin: 4px -10px 0;
    border-radius: 8px;
    border-top: none;
    color: var(--ios-orange);
    font-weight: 600;
    overflow: hidden;
    max-height: 0;
    opacity: 0;
    padding: 0 10px;
    margin: 0 -10px;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                margin 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.detail-row.round-detail-row.show {
    max-height: 50px;
    opacity: 1;
    padding: 8px 10px;
    margin: 4px -10px 0;
}

.detail-row.clickable-result:hover {
    transform: scale(1.02);
}

.detail-row.clickable-result:active {
    transform: scale(0.98);
}

.detail-row.copied-row {
    background: rgba(var(--ios-green-rgb), 0.3) !important;
}

body.keyboard-active .detail-row {
    padding: clamp(5px, 1.2vw, 6px) 0;
    font-size: clamp(10px, 2.5vw, 12px);
}

.control-row {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 8px;
    margin-top: 16px;
    align-items: stretch;
}

.control-row:has(.ios-button:only-child) {
    display: flex;
    justify-content: center;
}

.control-row:has(.ios-button:only-child) .ios-button {
    max-width: 200px;
}

.ios-button-icon {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 0;
    width: 44px;
    height: 44px;
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: var(--shadow-sm);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-button-icon:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-color: rgba(var(--primary-rgb), 0.2);
    background: rgba(var(--primary-rgb), 0.08);
}

.ios-button-icon:active {
    transform: scale(0.95);
}

.ios-button-icon.secondary {
    background: rgba(var(--ios-red-rgb), 0.1);
    color: var(--ios-red);
    border-color: rgba(var(--ios-red-rgb), 0.2);
}

.ios-button-icon.secondary:hover {
    background: rgba(var(--ios-red-rgb), 0.15);
    box-shadow: 0 6px 20px rgba(var(--ios-red-rgb), 0.2);
}

.ios-button-icon.secondary:active {
    background: rgba(var(--ios-red-rgb), 0.2);
}

.ios-button-icon.highlight-red {
    animation: glow-red 2s infinite;
}

@keyframes glow-red {
    0%, 100% { box-shadow: 0 0 10px rgba(var(--ios-red-rgb), 0.5); }
    50% { box-shadow: 0 0 20px rgba(var(--ios-red-rgb), 0.8); }
}

.ios-button {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    color: var(--primary-color);
    padding: 12px 16px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    text-align: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.ios-button:active {
    transform: scale(0.97);
}

.ios-button:hover {
    transform: translateY(-1px);
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.2);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.ios-button.copied {
    background: var(--ios-green);
}

.ios-button.highlight {
    background: rgba(var(--primary-rgb), 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.ios-button.highlight:hover {
    background: rgba(var(--primary-rgb), 0.18);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Secondary button style for light mode compatibility */
.ios-button.secondary {
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
    box-shadow: var(--shadow-sm);
}

.ios-button.secondary:hover {
    transform: translateY(-2px);
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
    color: var(--primary-color);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.2);
}

.ios-button.secondary:active {
    transform: scale(0.97);
}

/* Disabled button state */
.ios-button:disabled,
.ios-button.btn-disabled {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.ios-button:disabled:hover,
.ios-button.btn-disabled:hover {
    transform: none;
    background: var(--glass-bg);
}

.auto-round-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 12px;
    white-space: nowrap;
}

.auto-round-toggle .toggle-label {
    font-size: 13px;
    color: white;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
}

.auto-round-toggle .switch {
    flex-shrink: 0;
    margin: 0;
}

.round-options {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-top: 12px;
}

.round-options.disabled .round-option {
    opacity: 0.4;
    pointer-events: none;
    cursor: not-allowed;
}

.round-option {
    background: rgba(255, 255, 255, 0.2);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.25);
    color: white;
    padding: 12px 10px;
    border-radius: 10px;
    font-weight: 600;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
}

.round-option:active {
    transform: scale(0.96);
}

.round-option.active {
    background: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    border-color: rgba(255, 255, 255, 0.5);
}

/* Currency Converter Styles */
.currency-selector {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 20px;
}

.currency-btn {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    position: relative;
    overflow: hidden;
}

.currency-btn::before {
    display: none;
}

.currency-btn:active::before {
    display: none;
}

.currency-btn.active {
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: inset 0 0 20px var(--glass-tint-strong),
                0 8px 32px var(--primary-glow);
    transform: scale(1.05);
}

.currency-flag {
    font-size: 32px;
}

.currency-code {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.currency-btn.active .currency-code {
    color: var(--primary-color);
}

.dark-mode .currency-btn.active {
    background: rgba(255, 255, 255, 0.18);
    color: white;
}

.dark-mode .currency-btn.active .currency-code {
    color: var(--primary-color);
}

.currency-results {
    display: grid;
    grid-template-columns: 1fr;
    gap: 12px;
    margin: 20px 0;
}

.currency-result-card {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 16px;
    transition: all 0.2s ease;
    animation: slideInLeft 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}

.currency-result-card:nth-child(2) {
    animation-delay: 0.1s;
}

.currency-result-card:nth-child(3) {
    animation-delay: 0.2s;
}

@keyframes slideInLeft {
    from {
        opacity: 0;
        transform: translateX(-20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.currency-result-flag {
    font-size: 40px;
    flex-shrink: 0;
}

.currency-result-info {
    flex: 1;
}

.currency-result-code {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    margin-bottom: 4px;
}

.currency-result-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
}

.exchange-rate-info {
    text-align: center;
    padding: 12px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-top: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exchange-rate-info > .exchange-rate-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}

.current-rates-display {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
}

.rate-item {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 600;
}

.rate-item span {
    color: var(--primary-color);
    font-weight: 700;
}

.rate-separator {
    color: var(--text-tertiary);
    font-size: 10px;
}

.exchange-rate-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
}

#exchangeRateDate {
    color: var(--text-secondary);
    font-weight: 600;
}

.refresh-rates-btn {
    background: var(--glass-tint);
    border: 1px solid var(--primary-color);
    color: var(--primary-color);
    padding: 8px 14px;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.refresh-rates-btn:active {
    transform: scale(0.95);
    background: var(--glass-tint-strong);
}

.refresh-rates-btn.loading {
    opacity: 0.6;
    pointer-events: none;
}

/* Discount tiers info box */
.discount-tiers-info {
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.discount-tiers-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.discount-tiers-title::before {
    content: '💰';
    font-size: 14px;
}

.discount-tier {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    font-size: 13px;
    color: #8E8E93;
    color: var(--text-secondary, #8E8E93);
}

/* Light mode overrides for discount tiers */
body:not(.dark-mode) .discount-tier {
    color: #3C3C43;
    color: var(--text-secondary, #3C3C43);
}

.discount-tier span {
    display: inline-block;
    visibility: visible !important;
    opacity: 1 !important;
}

.discount-tier-value {
    font-weight: 600;
    color: var(--ios-green);
    color: var(--ios-green, #34C759);
}

/* Summary / Zestawienie Styles */
.parts-input-section {
    margin-bottom: 20px;
}

/* Prices List for Discount Calculator */
.price-add-row {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.price-add-row .ios-button {
    min-width: 50px;
    padding: 12px 16px;
}

.prices-list {
    margin: 16px 0;
}

.prices-list-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.prices-list-empty-icon {
    font-size: 36px;
    margin-bottom: 8px;
    display: block;
}

.price-item {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    animation: fadeInScale 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.price-item-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

/* Price item prices row - matching part-item-prices */
.price-item-prices {
    display: flex;
    gap: 12px;
    font-size: 14px;
    color: var(--text-secondary);
    align-items: center;
    flex-wrap: wrap;
}

.price-item-price-original {
    opacity: 0.6;
    font-weight: 600;
    color: var(--text-primary);
}

.price-item-price-original.strikethrough {
    text-decoration: line-through;
}

.price-item-price-discounted {
    color: var(--ios-green);
    font-weight: 600;
}

.price-item-value {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}

.price-item-discount {
    font-size: 11px;
    color: var(--ios-green);
}

.price-item-actions {
    display: flex;
    gap: 6px;
}

.price-item-delete {
    background: rgba(var(--ios-red-rgb), 0.1);
    border: none;
    color: var(--ios-red);
    width: 44px;
    height: 44px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.price-item-delete:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
    transform: scale(1.05);
}

/* Price item rounding annotation styles - matching part-annotation */
.price-item-annotation {
    font-size: 10px;
    color: var(--text-secondary);
    margin-left: 4px;
}

.price-item-adjusted {
    font-size: 14px;
    font-weight: 600;
    color: var(--ios-green);
    margin-top: 2px;
}

.price-item.rounded-item {
    border-color: var(--ios-orange);
    background: rgba(255, 149, 0, 0.08);
}

.price-item-value.strikethrough {
    text-decoration: line-through;
    opacity: 0.6;
}

.price-summary-section .control-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.price-summary-section .control-row.price-actions-row {
    display: flex;
    gap: 10px;
}

.price-summary-section .control-row.price-actions-row .ios-button {
    flex: 1;
}

.price-summary-section .control-row .ios-button {
    flex: 1;
}

.price-summary-section .control-row .ios-button.secondary {
    background: rgba(var(--ios-red-rgb), 0.1);
    color: var(--ios-red);
}

.parts-list {
    margin: 20px 0;
}

.parts-actions {
    display: flex;
    justify-content: center;
    margin: 16px 0;
}

.parts-actions .ios-button {
    min-width: 150px;
}

.parts-list-empty {
    text-align: center;
    padding: 24px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.parts-list-empty-icon {
    font-size: 40px;
    margin-bottom: 8px;
    display: block;
}

.part-item {
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.08) 0%,
        rgba(255, 255, 255, 0.03) 50%,
        rgba(255, 255, 255, 0.06) 100%
    );
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 16px;
    padding: 12px 14px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    opacity: 0;
    transform: translateY(-8px) scale(0.98);
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 
        0 2px 8px rgba(0, 0, 0, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.1),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    position: relative;
    overflow: hidden;
}

.part-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 1px;
    background: linear-gradient(90deg, 
        transparent 0%, 
        rgba(255, 255, 255, 0.15) 20%, 
        rgba(255, 255, 255, 0.2) 50%, 
        rgba(255, 255, 255, 0.15) 80%, 
        transparent 100%
    );
}

.part-item.animate-in {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.part-item:hover {
    border-color: rgba(255, 255, 255, 0.18);
    background: linear-gradient(
        135deg,
        rgba(255, 255, 255, 0.1) 0%,
        rgba(255, 255, 255, 0.05) 50%,
        rgba(255, 255, 255, 0.08) 100%
    );
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.1),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 -1px 0 rgba(0, 0, 0, 0.05);
    transform: translateY(-1px);
}

.part-item.removing {
    opacity: 0;
    transform: translateX(20px) scale(0.96);
    transition: all 0.25s cubic-bezier(0.4, 0, 1, 1);
}

.part-item.rounded-item {
    border-color: rgba(255, 149, 0, 0.3);
    background: linear-gradient(
        135deg,
        rgba(255, 149, 0, 0.12) 0%,
        rgba(255, 149, 0, 0.06) 50%,
        rgba(255, 149, 0, 0.1) 100%
    );
}

.part-item-info {
    flex: 1;
    min-width: 0;
}

.part-item-name {
    font-weight: 600;
    font-size: 15px;
    letter-spacing: -0.3px;
    color: var(--text-primary);
    margin-bottom: 2px;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.part-name-text {
    font-weight: 600;
    line-height: 1.3;
}

.part-model-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    padding: 3px 8px;
    border-radius: 6px;
    width: fit-content;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

/* ── Part Item Action Buttons (Apple-style) ── */
.part-item-actions {
    display: flex;
    gap: 6px;
    align-items: center;
}

.part-item-duplicate,
.part-item-edit,
.part-item-remove {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
    font-size: 15px;
    border: 1px solid transparent;
    position: relative;
    overflow: hidden;
}

.part-item-duplicate::before,
.part-item-edit::before,
.part-item-remove::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.2s ease;
    border-radius: inherit;
}

.part-item-duplicate {
    background: rgba(48, 209, 88, 0.12);
    color: #30d158;
    border-color: rgba(48, 209, 88, 0.2);
}

.part-item-duplicate::before {
    background: radial-gradient(circle at center, rgba(48, 209, 88, 0.3) 0%, transparent 70%);
}

.part-item-duplicate:hover {
    background: rgba(48, 209, 88, 0.18);
    border-color: rgba(48, 209, 88, 0.35);
    transform: scale(1.05);
}

.part-item-duplicate:hover::before {
    opacity: 1;
}

.part-item-edit {
    background: rgba(10, 132, 255, 0.12);
    color: #0a84ff;
    border-color: rgba(10, 132, 255, 0.2);
}

.part-item-edit::before {
    background: radial-gradient(circle at center, rgba(10, 132, 255, 0.3) 0%, transparent 70%);
}

.part-item-edit:hover {
    background: rgba(10, 132, 255, 0.18);
    border-color: rgba(10, 132, 255, 0.35);
    transform: scale(1.05);
}

.part-item-edit:hover::before {
    opacity: 1;
}

.part-item-remove {
    background: rgba(255, 69, 58, 0.12);
    color: #ff453a;
    border-color: rgba(255, 69, 58, 0.2);
}

.part-item-remove::before {
    background: radial-gradient(circle at center, rgba(255, 69, 58, 0.3) 0%, transparent 70%);
}

.part-item-remove:hover {
    background: rgba(255, 69, 58, 0.18);
    border-color: rgba(255, 69, 58, 0.35);
    transform: scale(1.05);
}

.part-item-remove:hover::before {
    opacity: 1;
}

.part-item-duplicate:active,
.part-item-edit:active,
.part-item-remove:active {
    transform: scale(0.92);
    transition: transform 0.1s ease;
}

/* SVG icons in buttons */
.part-item-duplicate svg,
.part-item-edit svg,
.part-item-remove svg {
    width: 16px;
    height: 16px;
    pointer-events: none;
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
}

.part-item-edit-input,
input[type="text"].part-item-edit-input {
    width: 100%;
    min-width: 200px;
    max-width: calc(100% - 100px);
    padding: 10px 14px;
    margin-right: 8px;
    border: 2px solid var(--primary-color);
    border-radius: 10px;
    font-size: 14px !important;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--text-primary);
    background: var(--bg-secondary);
    outline: none;
    box-shadow: 
        0 0 0 3px rgba(var(--primary-rgb), 0.15),
        var(--shadow-sm);
}

.part-item-edit-input.visible {
    opacity: 1;
    transform: scale(1);
}

.part-item-edit-input:focus {
    border-color: var(--primary-color);
    box-shadow: 
        0 0 0 4px rgba(var(--primary-rgb), 0.25),
        0 4px 12px rgba(var(--primary-rgb), 0.15);
}

.part-item-prices {
    display: flex;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
}

.part-item-price-original {
    opacity: 0.6;
}

.part-item-price-original.strikethrough {
    text-decoration: line-through;
}

.part-item-price-discounted {
    color: var(--ios-green);
    font-weight: 600;
}

.part-item-price-discount-amount {
    color: var(--ios-red);
    font-weight: 600;
    margin: 0 4px;
}

.part-item-save {
    background: rgba(48, 209, 88, 0.12);
    color: #30d158;
    border: 1px solid rgba(48, 209, 88, 0.25);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 15px;
    font-weight: bold;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.part-item-save:hover {
    background: rgba(48, 209, 88, 0.2);
    border-color: rgba(48, 209, 88, 0.4);
    transform: scale(1.05);
}

.part-item-save:active {
    transform: scale(0.92);
}

.part-item-cancel {
    background: rgba(142, 142, 147, 0.12);
    color: #8e8e93;
    border: 1px solid rgba(142, 142, 147, 0.25);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 16px;
    transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.part-item-cancel:hover {
    background: rgba(142, 142, 147, 0.2);
    border-color: rgba(142, 142, 147, 0.4);
    transform: scale(1.05);
}

.part-item-cancel:active {
    transform: scale(0.92);
}

/* Prevent SVG from capturing click events */
.part-item-save svg,
.part-item-cancel svg {
    pointer-events: none;
}

.part-item-actions {
    display: flex;
    gap: 4px;
}

.part-annotation {
    font-size: 10px;
    color: var(--text-secondary);
    margin-left: 4px;
}

.summary-section {
    margin-top: 20px;
}

.summary-actions {
    margin-top: 20px;
}

.summary-total {
    border-top: 2px solid var(--glass-border);
    padding-top: 12px;
    margin-top: 8px;
    font-weight: 700;
    font-size: 16px;
}

/* ====== MODERN SELECT MODAL (Employee/Courier) ====== */
.select-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-confirm);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.select-modal-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.select-modal {
    width: min(380px, 90vw);
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    box-shadow: 
        0 25px 60px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.95) translateY(20px);
    transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

.select-modal-overlay.active .select-modal {
    transform: scale(1) translateY(0);
    animation: modalBounceIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.select-modal-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 18px 20px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-tertiary);
}

.select-modal-icon {
    font-size: 24px;
}

.select-modal-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.2px;
}

.select-modal-body {
    padding: 16px 20px;
}

.select-modal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.select-modal-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 14px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 0;
    min-height: 90px;
}

.select-modal-tile:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.select-modal-tile:active {
    transform: scale(0.95);
}

.select-tile-icon {
    font-size: 28px;
    line-height: 1;
}

.select-tile-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.2;
}

.select-modal-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px 16px;
    border-top: 1px solid var(--glass-border);
}

.select-modal-cancel,
.select-modal-later {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.select-modal-cancel {
    background: rgba(var(--ios-red-rgb), 0.15);
    color: var(--ios-red);
}

.select-modal-cancel:hover {
    background: rgba(var(--ios-red-rgb), 0.25);
}

.select-modal-later {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
}

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

.select-modal-confirm-green {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
}

.select-modal-confirm-green:hover {
    background: rgba(var(--ios-green-rgb), 0.25);
}

.select-modal-confirm-green:active,
.select-modal-cancel:active {
    transform: scale(0.97);
}

/* ====== LABEL TYPE SELECTION MODAL ====== */
.label-type-modal {
    max-width: 420px;
}

.label-type-desc {
    font-size: 13px;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 16px 0;
    line-height: 1.5;
}

.label-type-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
}

.label-type-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    padding: 16px 12px;
    background: var(--bg-secondary);
    border: 2px solid var(--glass-border);
    border-radius: 16px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.label-type-btn:hover {
    background: var(--bg-tertiary);
    border-color: rgba(var(--primary-rgb), 0.2);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.label-type-btn:active {
    transform: scale(0.98);
}

.label-type-preview {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 16px;
    background: white;
    border-radius: 10px;
    border: 1px solid #e0e0e0;
    min-width: 100px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.preview-package,
.preview-courier {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: #f8f8f8;
    border-radius: 6px;
    width: 100%;
    justify-content: center;
}

.preview-package .preview-icon {
    font-size: 16px;
}

.preview-courier .preview-icon {
    font-size: 16px;
}

.preview-size {
    font-size: 11px;
    font-weight: 700;
    color: #333;
}

.preview-divider {
    width: 80%;
    height: 1px;
    background: repeating-linear-gradient(
        to right,
        #ccc,
        #ccc 4px,
        transparent 4px,
        transparent 8px
    );
    margin: 4px 0;
}

.preview-courier.compact-courier {
    padding: 4px 12px;
    background: #e8f4ff;
}

.preview-courier.compact-courier .preview-size {
    font-size: 13px;
    color: var(--primary-color);
    font-weight: 800;
}

.label-type-name {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.label-type-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    text-align: center;
    line-height: 1.3;
}

/* Dark mode adjustments for label type preview */
body.dark-mode .label-type-preview {
    background: #2c2c2e;
    border-color: #3a3a3c;
}

body.dark-mode .preview-package,
body.dark-mode .preview-courier {
    background: #1c1c1e;
}

body.dark-mode .preview-size {
    color: #fff;
}

body.dark-mode .preview-courier.compact-courier {
    background: rgba(var(--ios-blue-rgb), 0.2);
}

/* ====== LABEL CLEAR COUNTDOWN MODAL ====== */
.label-clear-countdown-modal {
    max-width: 340px;
    text-align: center;
    padding-top: 28px;
}

.label-clear-countdown-number {
    font-size: 64px;
    font-weight: 800;
    background: linear-gradient(135deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    line-height: 1;
    margin-bottom: 16px;
}

.label-clear-progress-bar {
    width: 100%;
    height: 6px;
    background: var(--bg-secondary);
    border-radius: 3px;
    overflow: hidden;
    margin-bottom: 20px;
}

.label-clear-progress-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, #6366f1, #a855f7);
    border-radius: 3px;
    transition: width 1s linear;
}

.label-clear-countdown-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.label-clear-countdown-title .countdown-seconds {
    background: linear-gradient(135deg, #6366f1, #a855f7);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 800;
}

.label-clear-countdown-subtitle {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    line-height: 1.4;
    padding: 0 12px;
}

.label-clear-cancel-btn {
    width: 100%;
    max-width: 200px;
    margin: 0 auto;
}

/* Custom Modal Dialog */
.custom-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: none;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    transition: opacity 0.3s ease;
}

/* Glassmorphism v2 — accent color bleed on modal overlays */
.custom-modal-overlay::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(var(--primary-rgb, 0,122,255), 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(var(--primary-rgb, 0,122,255), 0.06) 0%, transparent 50%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.4s ease;
}
.custom-modal-overlay.active::before {
    opacity: 1;
}

.custom-modal-overlay.active {
    display: flex;
    opacity: 1;
}

.custom-modal {
    position: relative;
    background: rgba(30, 30, 35, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 20px;
    max-width: 360px;
    width: 90%;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: none;           /* Firefox */
    -ms-overflow-style: none;        /* IE/Edge */
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    transform: scale(0.92);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-modal::-webkit-scrollbar {
    display: none;                   /* Chrome/Safari */
}

/* ── Bulk table expanded modal ── */
.custom-modal.bulk-table-mode {
    max-width: 600px;
    width: 94%;
    padding: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    max-height: 90vh;
    height: 85vh;
}

/* Single item bulk modal — auto height */
.custom-modal.bulk-table-mode.bulk-single-item {
    height: auto;
    max-height: 90vh;
}

/* Center loader in bulk modal */
.custom-modal.bulk-table-mode .wizard-gemini-loader {
    min-height: 300px;
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

body.light-mode .custom-modal {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        0 0 0 0.5px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

body.light-mode .custom-modal-overlay {
    background: rgba(0, 0, 0, 0.25);
}

/* Modal close button – glass matte pill (Apple style) */
.modal-close-x {
    position: absolute;
    top: 12px;
    right: 14px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    padding: 0;
    border: 1px solid rgba(var(--ios-red-rgb), 0.22);
    border-radius: 50%;
    background: rgba(var(--ios-red-rgb), 0.18);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 100, 90, 0.92);
    font-size: 16px;
    font-weight: 400;
    letter-spacing: 0;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 10;
    box-shadow: 0 1px 6px rgba(var(--ios-red-rgb), 0.12),
               inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
    -webkit-font-smoothing: antialiased;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
}

.modal-close-x:hover {
    background: rgba(var(--ios-red-rgb), 0.35);
    border-color: rgba(var(--ios-red-rgb), 0.3);
    color: rgba(255, 90, 80, 1);
    box-shadow: 0 2px 10px rgba(var(--ios-red-rgb), 0.2),
               inset 0 0.5px 0 rgba(255, 255, 255, 0.12);
    transform: scale(1.03);
}

.modal-close-x:active {
    background: rgba(var(--ios-red-rgb), 0.42);
    transform: scale(0.96);
    box-shadow: 0 1px 3px rgba(var(--ios-red-rgb), 0.15);
}

body.light-mode .modal-close-x {
    background: rgba(var(--ios-red-rgb), 0.1);
    border-color: rgba(var(--ios-red-rgb), 0.15);
    color: rgba(220, 50, 40, 0.85);
    box-shadow: 0 1px 4px rgba(var(--ios-red-rgb), 0.08);
}

body.light-mode .modal-close-x:hover {
    background: rgba(var(--ios-red-rgb), 0.18);
    color: rgba(220, 40, 30, 1);
}

/* Body scroll lock when modal is open */
body.modal-open {
    overflow: hidden !important;
}

.custom-modal-overlay.active .custom-modal {
    transform: scale(1);
    animation: modalBounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.custom-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 4px;
    text-align: center;
    letter-spacing: -0.3px;
}

.custom-modal-message {
    font-size: 13.5px;
    color: var(--text-secondary);
    margin-bottom: 20px;
    line-height: 1.55;
    text-align: center;
    opacity: 0.85;
}

.login-auth-info {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    margin-top: 4px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    color: rgba(255, 255, 255, 0.35);
    font-size: 11.5px;
    line-height: 1.4;
}
.login-auth-info svg {
    flex-shrink: 0;
    opacity: 0.4;
}
body.light-mode .login-auth-info {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
    color: rgba(0, 0, 0, 0.38);
}

/* Login modal premium header */
.login-header-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    margin: 0 auto 16px;
    border-radius: 20px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0,122,255), 0.15), rgba(var(--primary-rgb, 0,122,255), 0.05));
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.2);
    color: var(--primary-color, #007AFF);
    box-shadow: 0 8px 32px rgba(var(--primary-rgb, 0,122,255), 0.12);
}
body.light-mode .login-header-icon {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0,122,255), 0.1), rgba(var(--primary-rgb, 0,122,255), 0.04));
    box-shadow: 0 8px 32px rgba(var(--primary-rgb, 0,122,255), 0.08);
}

.login-form-title {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    margin-bottom: 4px;
    letter-spacing: -0.5px;
}

.login-form-subtitle {
    font-size: 13.5px;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 24px;
    opacity: 0.7;
}

.login-inputs-group {
    display: flex;
    flex-direction: column;
    gap: 0;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.1);
    margin-bottom: 12px;
}
body.light-mode .login-inputs-group {
    border-color: rgba(0, 0, 0, 0.1);
}

.login-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}
.login-input-wrapper:not(:last-child) {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.light-mode .login-input-wrapper:not(:last-child) {
    border-bottom-color: rgba(0, 0, 0, 0.08);
}

.login-input-icon {
    position: absolute;
    left: 14px;
    color: var(--primary-color, #007AFF);
    opacity: 0.7;
    pointer-events: none;
    transition: opacity 0.2s, color 0.2s;
    z-index: 2;
}
.login-input-wrapper:focus-within .login-input-icon {
    opacity: 1;
    color: var(--primary-color, #007AFF);
}

.login-input.custom-modal-input {
    border: none;
    border-radius: 0;
    margin-bottom: 0;
    padding-left: 42px;
    background: rgba(255, 255, 255, 0.04);
}
.login-input.custom-modal-input:focus {
    box-shadow: none;
    background: rgba(255, 255, 255, 0.08);
}
body.light-mode .login-input.custom-modal-input {
    background: rgba(0, 0, 0, 0.02);
}
body.light-mode .login-input.custom-modal-input:focus {
    background: rgba(0, 0, 0, 0.04);
}

.custom-modal-input {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 18px;
    transition: all 0.25s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.light-mode .custom-modal-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

/* PIN Tiles - iOS Style */
.pin-tiles-container {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-bottom: 20px;
}

.pin-tile {
    width: 56px;
    height: 64px;
    background: rgba(255, 255, 255, 0.06);
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    color: var(--text-primary);
    font-size: 28px;
    font-weight: 600;
    text-align: center;
    caret-color: var(--primary-color);
    transition: all 0.2s ease;
    -webkit-text-security: disc;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.light-mode .pin-tile {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.12);
}

.pin-tile:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 4px var(--glass-tint), 0 4px 12px var(--primary-glow);
    transform: scale(1.05);
}

.pin-tile.filled {
    border-color: var(--primary-color);
    background: var(--glass-tint);
}

.pin-tile.error {
    border-color: rgba(var(--ios-red-rgb), 0.6);
    animation: pinShake 0.4s ease;
    background: rgba(var(--ios-red-rgb), 0.15);
    box-shadow: 0 0 0 3px rgba(var(--ios-red-rgb), 0.2);
}

@keyframes pinShake {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-6px); }
    80% { transform: translateX(6px); }
}

.custom-modal-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.custom-modal-input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12) !important;
}

.custom-modal-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    font-size: 16px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.custom-modal-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

body.light-mode .custom-modal-input[type="date"] {
    color-scheme: light;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .custom-modal-input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 1;
}

body.light-mode .custom-modal-input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

.custom-modal-textarea {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 18px;
    transition: all 0.25s ease;
    resize: vertical;
    min-height: 80px;
    font-family: inherit;
    box-sizing: border-box;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.light-mode .custom-modal-textarea {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.custom-modal-textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.custom-modal-select {
    width: 100%;
    padding: 13px 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 16px;
    margin-bottom: 18px;
    transition: all 0.25s ease;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 9L1 4h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 16px center;
    padding-right: 40px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.light-mode .custom-modal-select {
    background-color: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.custom-modal-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.custom-modal-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 10px;
}

.custom-modal-buttons {
    display: flex;
    gap: 10px;
    margin-top: 18px;
}

.custom-modal-btn {
    flex: 1;
    padding: 13px 20px;
    border: none;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.1, 0.25, 1);
    letter-spacing: -0.1px;
    position: relative;
    overflow: hidden;
}

.custom-modal-btn.primary {
    background: var(--primary-color);
    color: #fff;
    border: none;
    box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.3);
}

.custom-modal-btn.primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 4px 18px rgba(var(--primary-rgb), 0.35);
}

.custom-modal-btn.primary:active {
    transform: scale(0.97) translateY(0);
    filter: brightness(0.95);
}

body.light-mode .custom-modal-btn.primary {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 12px rgba(var(--primary-rgb), 0.2);
}

.custom-modal-btn.secondary {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border: none;
}

.custom-modal-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.12);
}

.custom-modal-btn.secondary:active {
    transform: scale(0.97);
    opacity: 0.7;
}

body.light-mode .custom-modal-btn.secondary {
    background: rgba(0, 0, 0, 0.06);
}

/* Cancel button - neutral grey */
.custom-modal-btn.cancel {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border: none;
}

.custom-modal-btn.cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}

.custom-modal-btn.cancel:active {
    transform: scale(0.97);
    opacity: 0.7;
}

body.light-mode .custom-modal-btn.cancel {
    background: rgba(0, 0, 0, 0.06);
    color: var(--text-secondary);
}

/* Danger button style for delete actions */
.custom-modal-btn.danger,
.custom-modal-btn.primary.danger {
    background: rgba(var(--ios-red-rgb), 0.12);
    color: var(--ios-red);
    border: 1px solid rgba(var(--ios-red-rgb), 0.2);
}

.custom-modal-btn.danger:hover,
.custom-modal-btn.primary.danger:hover {
    background: rgba(var(--ios-red-rgb), 0.22);
}

.custom-modal-btn.danger:active,
.custom-modal-btn.primary.danger:active {
    transform: scale(0.97);
    background: rgba(var(--ios-red-rgb), 0.28);
}

/* Disabled state for modal buttons */
.custom-modal-btn:disabled,
.custom-modal-btn.btn-disabled {
    opacity: 0.35;
    cursor: not-allowed;
    pointer-events: none;
}

.custom-modal-checkbox {
    margin: 10px 0 25px 0;
}

.remember-me-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 10px;
}

.remember-me-label input[type="checkbox"] {
    display: none;
}

.remember-me-label .checkmark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--glass-border);
    background: var(--secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

.reservation-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 10px;
    margin: 15px 0 5px 0;
}

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

.reservation-checkbox-label .reservation-checkmark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--glass-border);
    background: var(--secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

.reservation-modal-checkbox-label {
    display: flex;
    align-items: center;
    cursor: pointer;
    user-select: none;
    gap: 10px;
    margin: 15px 0 5px 0;
}

.reservation-modal-checkbox-label input[type="checkbox"] {
    display: none;
}

.reservation-modal-checkbox-label .reservation-modal-checkmark {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    border: 2px solid var(--glass-border);
    background: var(--secondary-bg);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

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

.remember-me-label input[type="checkbox"]:checked + .checkmark::after {
    content: '✓';
    color: white;
    font-size: 14px;
    font-weight: bold;
}

.remember-me-text {
    font-size: 14px;
    color: var(--text-secondary);
}

/* Settlement Modal Styles */
.settlement-modal {
    max-width: 550px;
    width: 95%;
}

.settlement-date-range {
    display: flex;
    gap: 10px;
    margin-bottom: 16px;
    align-items: flex-end;
}

.settlement-date-field {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.settlement-date-label {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
    text-align: center;
}

.settlement-date-separator {
    color: var(--text-secondary);
    font-size: 18px;
    padding-bottom: 12px;
    flex-shrink: 0;
}

.settlement-modal .settlement-date-range input {
    width: 100%;
    padding: 10px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 13px !important;
    text-align: center;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1.2;
    height: 42px;
}

.settlement-modal .settlement-date-range input::placeholder {
    color: var(--text-secondary);
    opacity: 0.7;
    font-size: 13px !important;
}

.settlement-date-range input:focus {
    outline: none;
    border-color: var(--primary-color);
}

body.light-mode .settlement-date-range input {
    background: rgba(0, 0, 0, 0.04);
}

.settlement-summary {
    background: linear-gradient(135deg, rgba(var(--ios-green-rgb), 0.1), rgba(var(--ios-green-rgb), 0.05));
    border: 1px solid rgba(var(--ios-green-rgb), 0.2);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 16px;
}

.settlement-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.settlement-summary-row:last-child {
    border-bottom: none;
    padding-top: 12px;
    margin-top: 4px;
    border-top: 2px solid rgba(var(--ios-green-rgb), 0.3);
}

.settlement-summary-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.settlement-summary-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.settlement-summary-row:last-child .settlement-summary-label {
    font-weight: 700;
    color: var(--ios-green);
}

.settlement-summary-row:last-child .settlement-summary-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--ios-green);
}

.settlement-courier-list {
    max-height: 300px;
    overflow-y: auto;
}

.settlement-courier-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.settlement-courier-card:last-child {
    margin-bottom: 20px;
}

.settlement-courier-card:hover {
    border-color: var(--primary-color);
}

.settlement-courier-card.settled {
    opacity: 0.5;
    border-color: var(--ios-green);
}
.settlement-courier-card.settled .settlement-courier-amount {
    text-decoration: line-through;
}
.settlement-settled-toggle {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid rgba(255,255,255,0.06);
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.settlement-settled-toggle input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ios-green);
    cursor: pointer;
    flex-shrink: 0;
}
.settlement-settled-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
    user-select: none;
}
.settlement-courier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.settlement-courier-name {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.settlement-courier-amount {
    font-size: 18px;
    font-weight: 800;
    color: var(--ios-green);
}

.settlement-courier-details {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.settlement-detail-item {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    padding: 6px 10px;
    background: var(--bg-tertiary);
    border-radius: 8px;
}

.settlement-detail-label {
    color: var(--text-tertiary);
}

.settlement-detail-value {
    font-weight: 600;
    color: var(--text-secondary);
}

.settlement-no-data {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-tertiary);
}

.settlement-no-data-icon {
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.settlement-no-data-icon svg {
    width: 40px;
    height: 40px;
    color: var(--text-tertiary);
}

.settlement-no-data-text {
    font-size: 14px;
}

/* Section header with settings button */
.section-header-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0;
}

.section-header-row .section-title {
    margin-bottom: 0;
}

/* Discount settings modal */
.discount-settings-list {
    max-height: 60vh;
    overflow-y: auto;
    margin: 15px 0;
    padding: 5px 0;
}

.discount-settings-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto;
    gap: 6px;
    align-items: center;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
}

.discount-settings-item:last-child {
    border-bottom: none;
}

.discount-settings-item input {
    width: 100%;
    padding: 12px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
}

.discount-settings-item input::-webkit-outer-spin-button,
.discount-settings-item input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.discount-settings-item input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.discount-settings-item input.discount-input {
    background: rgba(var(--ios-green-rgb), 0.15);
    border-color: rgba(var(--ios-green-rgb), 0.4);
    color: var(--ios-green);
    font-weight: 600;
}

.discount-settings-item .separator {
    font-size: 14px;
    color: var(--text-tertiary);
    text-align: center;
    min-width: 20px;
}

.discount-settings-item .unit {
    font-size: 13px;
    color: var(--text-secondary);
    min-width: 20px;
}

/* ================================
   Discount Edit Overlay Modal
   ================================ */
.discount-edit-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loader);
    opacity: 0;
    visibility: hidden;
    transition: all 0.2s ease;
    padding: 20px;
}

.discount-edit-overlay.active {
    opacity: 1;
    visibility: visible;
}

.discount-edit-modal {
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    width: 100%;
    max-width: 400px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.2s ease;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.discount-edit-overlay.active .discount-edit-modal {
    transform: scale(1) translateY(0);
}

.discount-edit-header {
    padding: 16px 20px 12px;
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

.discount-edit-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    color: var(--primary-color);
}

.discount-edit-header h3 {
    font-size: 17px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.discount-edit-body {
    padding: 16px 20px;
    overflow-y: auto;
    flex: 1;
}

.discount-edit-desc {
    font-size: 12px;
    color: var(--text-secondary);
    text-align: center;
    margin: 0 0 14px;
    line-height: 1.4;
}

.discount-edit-tiers {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.discount-edit-tier {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 14px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    position: relative;
    transition: all 0.2s ease;
}

.discount-edit-tier.removing {
    opacity: 0;
    transform: scale(0.9);
}

.discount-edit-tier.adding {
    opacity: 0;
    transform: translateY(-10px);
}

.tier-delete-btn {
    position: absolute;
    top: 6px;
    right: 6px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: rgba(var(--ios-red-rgb), 0.15);
    border: none;
    color: var(--ios-red);
    font-size: 14px;
    font-weight: 400;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    line-height: 1;
}

.tier-delete-btn:hover:not(.disabled) {
    background: rgba(var(--ios-red-rgb), 0.25);
    transform: scale(1.1);
}

.tier-delete-btn.disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.tier-add-btn {
    width: 100%;
    padding: 10px 16px;
    margin-top: 10px;
    background: var(--bg-secondary);
    border: 1.5px dashed var(--glass-border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    transition: all 0.15s ease;
}

.tier-add-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-secondary));
}

.tier-add-icon {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.15s ease;
}

.tier-add-btn:hover .tier-add-icon {
    background: var(--primary-color);
    color: white;
}

.tier-range {
    display: flex;
    align-items: center;
    gap: 8px;
    justify-content: center;
}

.tier-input-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.tier-input-group label {
    font-size: 9px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.tier-input-group input {
    width: 72px;
    padding: 8px 6px;
    background: var(--bg-tertiary);
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: all 0.15s ease;
}

.tier-input-group input::-webkit-outer-spin-button,
.tier-input-group input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.tier-input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: var(--bg-primary);
}

.tier-input-group input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.tier-currency {
    display: none;
}

.tier-separator {
    color: var(--text-tertiary);
    font-weight: 300;
    margin-top: 14px;
}

.tier-discount {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
}

.tier-discount label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
}

.tier-discount input {
    width: 60px;
    padding: 8px 6px;
    background: rgba(var(--ios-green-rgb), 0.15);
    border: 1px solid transparent;
    border-radius: 8px;
    color: var(--ios-green);
    font-size: 15px;
    font-weight: 600;
    text-align: center;
    appearance: textfield;
    -moz-appearance: textfield;
    transition: all 0.15s ease;
}

.tier-discount input::-webkit-outer-spin-button,
.tier-discount input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.tier-discount input:focus {
    outline: none;
    border-color: var(--ios-green);
    background: rgba(var(--ios-green-rgb), 0.25);
}

.tier-currency.discount,
.tier-discount .tier-currency {
    display: inline;
    color: var(--ios-green);
    position: static;
    font-size: 13px;
    font-weight: 600;
}

.discount-edit-error {
    text-align: center;
    font-size: 13px;
    color: var(--ios-red);
    margin-top: 12px;
    display: none;
}

.discount-edit-error.show {
    display: block;
}

.discount-edit-footer {
    padding: 12px 20px 16px;
    display: flex;
    gap: 10px;
    border-top: 1px solid var(--glass-border);
}

.discount-edit-btn {
    flex: 1;
    padding: 12px 16px;
    border-radius: 10px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    border: none;
}

.discount-edit-btn.cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.discount-edit-btn.cancel:hover {
    background: var(--bg-tertiary);
}

.discount-edit-btn.save {
    background: color-mix(in srgb, var(--primary-color) 25%, var(--glass-tint));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--primary-color);
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, transparent);
}

.discount-edit-btn.save:hover {
    background: color-mix(in srgb, var(--primary-color) 35%, var(--glass-tint));
    transform: translateY(-1px);
}

/* Personalization Settings Modal */
.settings-section {
    margin-bottom: 20px;
}

.settings-section-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 10px;
    padding-left: 4px;
}

.settings-option {
    background: var(--bg-secondary);
    border-radius: 12px;
    padding: 14px 16px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.settings-option-label {
    font-size: 15px;
    color: var(--text-primary);
}

.theme-selector {
    display: flex;
    gap: 8px;
}

.theme-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
}

.theme-btn.light {
    background: linear-gradient(135deg, #F2F2F7, #FFFFFF);
    border-color: #E5E5EA;
}

.theme-btn.dark {
    background: linear-gradient(135deg, #1C1C1E, #2C2C2E);
    border-color: #3A3A3C;
}

.theme-btn.auto {
    background: linear-gradient(135deg, #F2F2F7 50%, #1C1C1E 50%);
    border-color: #8E8E93;
}

.theme-btn.active {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-glow);
}

.accent-selector {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    justify-content: center;
}

.accent-btn {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3), inset 0 2px 4px rgba(255,255,255,0.25);
    background-size: 200% 200%;
    position: relative;
    overflow: hidden;
}

.accent-btn::before {
    display: none;
}

.accent-btn:hover::before {
    display: none;
}

.accent-btn::after {
    content: '';
    position: absolute;
    top: 4px;
    left: 4px;
    right: 4px;
    bottom: 55%;
    background: linear-gradient(to bottom, rgba(255,255,255,0.5), rgba(255,255,255,0.1));
    border-radius: 50% 50% 40% 40%;
    pointer-events: none;
    transition: all 0.3s ease;
}

@keyframes accentGradientShift {
    0% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

@keyframes accentShine {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.accent-btn:hover {
    transform: scale(1.2) translateY(-5px);
    box-shadow: 
        0 15px 35px rgba(0, 0, 0, 0.4),
        0 0 30px var(--primary-glow),
        inset 0 2px 4px rgba(255,255,255,0.3);
}

.accent-btn:hover::after {
    background: linear-gradient(to bottom, rgba(255,255,255,0.6), rgba(255,255,255,0.15));
}

.accent-btn:active {
    transform: scale(1.05) translateY(-2px);
    transition: all 0.1s ease;
}

.accent-btn.active {
    border-color: white;
    box-shadow: 
        0 0 0 3px var(--bg-primary), 
        0 0 25px rgba(255,255,255,0.4), 
        0 8px 25px rgba(0, 0, 0, 0.4),
        inset 0 0 15px rgba(255,255,255,0.2);
    transform: scale(1.1);
    animation: accentPulse 2s ease-in-out infinite;
}

@keyframes accentPulse {
    0%, 100% { box-shadow: 0 0 0 3px var(--bg-primary), 0 0 25px rgba(255,255,255,0.4), 0 8px 25px rgba(0, 0, 0, 0.4); }
    50% { box-shadow: 0 0 0 4px var(--bg-primary), 0 0 35px rgba(255,255,255,0.5), 0 10px 30px rgba(0, 0, 0, 0.45); }
}

.accent-btn.blue { background: linear-gradient(135deg, #007AFF 0%, #5856D6 33%, #007AFF 66%, #5856D6 100%); }
.accent-btn.pink { background: linear-gradient(135deg, #FF2D55 0%, #FF6482 33%, #FF2D55 66%, #FF6482 100%); }
.accent-btn.green { background: linear-gradient(135deg, #32CD32 0%, #7CFC00 33%, #ADFF2F 66%, #32CD32 100%); }
.accent-btn.orange { background: linear-gradient(135deg, #FF9500 0%, #FF5E3A 33%, #FF9500 66%, #FF5E3A 100%); }
.accent-btn.red { background: linear-gradient(135deg, #FF3B30 0%, #FF6B6B 33%, #FF3B30 66%, #FF6B6B 100%); }

/* Save button for tile editing */
.save-layout-btn {
    background: var(--primary-gradient);
    color: white;
    border: none;
    border-radius: 12px;
    padding: 12px 24px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
    position: relative;
    overflow: hidden;
}

.save-layout-btn::before {
    display: none;
}

.save-layout-btn:hover::before {
    display: none;
}

.save-layout-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.save-layout-btn:active {
    transform: translateY(-1px) scale(0.98);
    transition: all 0.1s ease;
}

@keyframes saveButtonGradient {
    0%, 100% { background-position: 0% 50%; }
    50% { background-position: 100% 50%; }
}


.save-layout-btn:hover {
    transform: scale(1.05);
}

/* Toast notification */
.toast-notification {
    position: fixed;
    top: max(20px, env(safe-area-inset-top, 20px));
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    padding: 14px 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    gap: 10px;
    z-index: 999999;
    opacity: 0;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    font-size: 14px;
    font-weight: 500;
    max-width: 90%;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

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

.toast-notification.error {
    background: rgba(var(--ios-red-rgb), 0.25);
    border: 1.5px solid rgba(var(--ios-red-rgb), 0.5);
    color: var(--ios-red-light);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.toast-notification.success {
    background: rgba(var(--ios-green-rgb), 0.25);
    border: 1.5px solid rgba(var(--ios-green-rgb), 0.5);
    color: #5CDB7B;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.toast-notification.warning {
    background: rgba(255, 149, 0, 0.25);
    border: 1.5px solid rgba(255, 149, 0, 0.5);
    color: #FFB340;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.toast-notification.info {
    background: rgba(var(--ios-blue-rgb), 0.25);
    border: 1.5px solid rgba(var(--ios-blue-rgb), 0.5);
    color: #5AC8FA;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* Undo Snackbar */
.undo-snackbar {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%) translateY(80px);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    border-radius: 14px;
    background: rgba(44, 44, 46, 0.92);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
    opacity: 0;
    transition: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 99999;
    pointer-events: none;
    max-width: 90vw;
}
.undo-snackbar.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
    pointer-events: auto;
}
.undo-snackbar-text {
    color: #fff;
    font-size: 14px;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.undo-snackbar-btn {
    padding: 6px 14px;
    border-radius: 8px;
    border: none;
    background: var(--accent);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    flex-shrink: 0;
    transition: transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.undo-snackbar-btn:active {
    transform: scale(0.93);
}

/* Modal inline error */
.modal-error {
    background: rgba(var(--ios-red-rgb), 0.2);
    border: 1.5px solid rgba(var(--ios-red-rgb), 0.4);
    color: var(--ios-red-light);
    padding: 12px 16px;
    border-radius: 12px;
    font-size: 13px;
    margin-top: 12px;
    margin-bottom: 16px;
    display: none;
    animation: shakeError 0.4s ease;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.modal-error.show {
    display: block;
}

@keyframes shakeError {
    0%, 100% { transform: translateX(0); }
    20% { transform: translateX(-8px); }
    40% { transform: translateX(8px); }
    60% { transform: translateX(-4px); }
    80% { transform: translateX(4px); }
}

/* Car Model Badge */
.car-model-badge {
    background: var(--glass-tint);
    border: 1px solid var(--primary-color);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* Recent Car Models */
.recent-models-bar {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.recent-model-chip {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.recent-model-chip:active {
    transform: scale(0.95);
    background: var(--glass-tint-strong);
}

.car-model-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.car-model-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.car-model-value {
    font-size: 14px;
    font-weight: 600;
    color: var(--primary-color);
}

.car-model-change {
    background: var(--glass-tint);
    color: var(--primary-color);
    border: 1px solid var(--primary-color);
    border-radius: 8px;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.car-model-change:active {
    transform: scale(0.95);
    background: var(--glass-tint-strong);
}

/* Warranty styles */
.warranty-presets {
    display: flex;
    gap: 6px;
    margin-top: 8px;
    flex-wrap: wrap;
}
.warranty-preset-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.warranty-preset-btn.active {
    background: var(--accent);
    color: #fff;
    border-color: var(--accent);
}
.warranty-preset-btn:active {
    transform: scale(0.95);
}
.warranty-info-box {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 16px;
    margin: 20px 0;
}

/* Warranty History */
.warranty-history-container {
    background: var(--bg-secondary);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

.warranty-history-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.warranty-history-list::-webkit-scrollbar {
    width: 6px;
}

.warranty-history-list::-webkit-scrollbar-track {
    background: transparent;
}

.warranty-history-list::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 3px;
}

.warranty-history-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all 0.3s ease;
    position: relative;
}

.warranty-history-item:last-child {
    margin-bottom: 0;
}

.warranty-history-item:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.warranty-history-item.expired {
    opacity: 0.6;
    border-left: 3px solid var(--ios-red);
}

.warranty-history-item.active {
    border-left: 3px solid var(--ios-green);
}

.warranty-history-info {
    flex: 1;
    min-width: 0;
}

.warranty-history-product {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 6px;
    word-break: break-word;
}

.warranty-history-details {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    font-size: 12px;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.warranty-history-detail {
    display: flex;
    align-items: center;
    gap: 4px;
}

.warranty-history-detail-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.warranty-history-detail-value {
    font-weight: 600;
    color: var(--text-primary);
}

.warranty-history-status {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
}

.warranty-history-status.active {
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
}

.warranty-history-status.expired {
    background: rgba(var(--ios-red-rgb), 0.15);
    color: var(--ios-red);
}

.warranty-history-actions {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    flex-shrink: 0;
}

.warranty-history-date {
    font-size: 11px;
    color: var(--text-tertiary);
}

.warranty-reprint-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.1));
    border: 1px solid rgba(var(--primary-rgb), 0.3);
    color: var(--primary-color);
    border-radius: 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
}

.warranty-reprint-btn:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25), rgba(var(--primary-rgb), 0.2));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px var(--primary-glow);
}

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

.warranty-reprint-btn svg {
    width: 14px;
    height: 14px;
}

.warranty-history-employee {
    font-size: 11px;
    color: var(--text-tertiary);
    font-style: italic;
}

body.light-mode .warranty-history-container {
    background: rgba(255, 255, 255, 0.6);
}

/* Discount Toggle */
.add-part-row {
    display: flex;
    gap: 24px;
    align-items: center;
    margin-top: 16px;
}

.add-part-row {
    display: flex;
    gap: 8px;
    align-items: center;
    flex-wrap: wrap;
}

.add-part-row .ios-button {
    flex: 0 0 auto;
    min-width: 120px;
}

.add-part-row .ios-button.compact {
    flex: 0 0 auto;
    width: 140px;
    padding: 12px 16px;
}

.discount-toggle-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 6px 10px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-left: auto;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    flex-shrink: 0;
}

.discount-toggle-container:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px var(--primary-glow);
    border-color: var(--primary-color);
}

.discount-toggle-container:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
}

.toggle-label-inline {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.toggle-label-inline span {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    display: flex;
    align-items: center;
}

.discount-toggle-switch {
    position: relative;
    width: 36px;
    height: 20px;
    flex-shrink: 0;
}

.discount-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(120, 120, 128, 0.32);
    transition: 0.3s;
    border-radius: 20px;
}

.toggle-slider:before {
    position: absolute;
    content: "";
    height: 16px;
    width: 16px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.discount-toggle-switch input:checked + .toggle-slider {
    background: var(--ios-green);
}

.discount-toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(16px);
}

.edit-toggle-switch {
    position: relative;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.edit-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.edit-toggle-switch .toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(120, 120, 128, 0.32);
    transition: 0.3s;
    border-radius: 20px;
    width: 44px;
    height: 24px;
}

.edit-toggle-switch .toggle-slider:active {
    transform: scale(0.95);
}

.edit-toggle-switch .toggle-slider:before {
    position: absolute;
    content: "";
    height: 20px;
    width: 20px;
    left: 2px;
    bottom: 2px;
    background-color: white;
    transition: 0.3s;
    border-radius: 50%;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

.edit-toggle-switch input:checked + .toggle-slider {
    background: var(--ios-green);
}

.edit-toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.edit-toggle-switch .toggle-text {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
    transition: color 0.3s ease;
}

.edit-toggle-switch input:checked ~ .toggle-text:last-child {
    color: var(--ios-green);
}

.edit-toggle-switch input:not(:checked) ~ .toggle-text:first-child {
    color: var(--text-primary);
}

/* Segmented control for edit reservation */
.segmented-control {
    display: flex;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 4px;
    margin-bottom: 16px;
}

.segmented-control .segment-btn {
    flex: 1;
    padding: 8px 12px;
    border: none;
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 8px;
    position: relative;
    z-index: 1;
}

.segmented-control .segment-btn:not(.active):hover {
    color: var(--text-primary);
    transform: scale(1.06);
}
.segmented-control .segment-btn:not(.active):active {
    transform: scale(0.97);
}

.segmented-control .segment-btn.active {
    background: var(--ios-green);
    color: white;
}

.segmented-control .segment-btn.bounce {
    animation: segmentedBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes segmentedBounce {
    0% { transform: scale(1); }
    30% { transform: scale(0.85); }
    50% { transform: scale(1.1); }
    70% { transform: scale(0.95); }
    100% { transform: scale(1); }
}

/* Page loader styles are in inline CSS in index.html */
/* Do not add any .page-loader styles here to avoid conflicts */

/* Login unlock animation - Activity Rings Style (Apple Watch) */
.unlock-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    z-index: var(--z-overlay);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.unlock-overlay.active {
    opacity: 1;
    pointer-events: all;
}

.activity-rings-container {
    position: relative;
    width: 160px;
    height: 160px;
    overflow: visible;
}

.activity-rings {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
    overflow: visible;
}

/* Ring backgrounds (track) */
.ring-bg {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
}

.ring-bg-outer {
    stroke: rgba(var(--ios-red-rgb), 0.2);
}

.ring-bg-middle {
    stroke: rgba(50, 215, 75, 0.2);
}

.ring-bg-inner {
    stroke: rgba(0, 199, 255, 0.2);
}

/* Active rings */
.ring {
    fill: none;
    stroke-width: 12;
    stroke-linecap: round;
    stroke-dasharray: 0, 999;
    transition: stroke-dasharray 0.1s ease-out;
}

.ring-outer {
    stroke: url(#gradient-red);
    stroke: var(--ios-red);
    filter: drop-shadow(0 0 8px rgba(var(--ios-red-rgb), 0.6));
}

.ring-middle {
    stroke: url(#gradient-green);
    stroke: #32D74B;
    filter: drop-shadow(0 0 8px rgba(50, 215, 75, 0.6));
}

.ring-inner {
    stroke: url(#gradient-blue);
    stroke: #00C7FF;
    filter: drop-shadow(0 0 8px rgba(0, 199, 255, 0.6));
}

/* Animation for rings closing — driven by JS, these are fallback */
.unlock-overlay.active .ring-outer {
    --ring-circumference: 327; /* 2 * PI * 52 */
}

.unlock-overlay.active .ring-middle {
    --ring-circumference: 251; /* 2 * PI * 40 */
}

.unlock-overlay.active .ring-inner {
    --ring-circumference: 176; /* 2 * PI * 28 */
}

@keyframes ringClose {
    0% {
        stroke-dasharray: 0, 999;
    }
    100% {
        stroke-dasharray: var(--ring-circumference), 999;
    }
}

/* Checkmark in center */
.rings-checkmark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 40px;
    height: 40px;
    color: #32D74B;
    opacity: 0;
}

.unlock-overlay.rings-complete .rings-checkmark {
    animation: checkmarkAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

@keyframes checkmarkAppear {
    0% {
        transform: translate(-50%, -50%) scale(0);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1);
        opacity: 1;
    }
}

.rings-checkmark svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(50, 215, 75, 0.8));
}

.rings-checkmark svg path {
    stroke-dasharray: 30;
    stroke-dashoffset: 30;
}

.unlock-overlay.rings-complete .rings-checkmark svg path {
    animation: checkmarkDraw 0.3s ease-out 0.15s forwards;
}

@keyframes checkmarkDraw {
    to {
        stroke-dashoffset: 0;
    }
}

.unlock-text {
    font-size: 22px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.5px;
    opacity: 0;
    transform: translateY(10px);
}

.unlock-overlay.rings-complete .unlock-text {
    animation: textAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
}

@keyframes textAppear {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Logout overlay - rings open up (reverse of closing) */
.logout-overlay .activity-rings {
    transform: rotate(-90deg);
}

/* Start with full rings */
.logout-overlay .ring {
    stroke-dasharray: 999, 999;
}

.logout-overlay.active .ring-outer {
    animation: ringOpen 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.1s forwards;
    --ring-circumference: 327;
}

.logout-overlay.active .ring-middle {
    animation: ringOpen 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.25s forwards;
    --ring-circumference: 251;
}

.logout-overlay.active .ring-inner {
    animation: ringOpen 0.8s cubic-bezier(0.4, 0, 0.2, 1) 0.4s forwards;
    --ring-circumference: 176;
}

@keyframes ringOpen {
    0% {
        stroke-dasharray: var(--ring-circumference), 999;
    }
    100% {
        stroke-dasharray: 0, 999;
    }
}

/* Lock icon for logout */
.rings-lock {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    width: 40px;
    height: 40px;
    color: var(--ios-red);
    opacity: 0;
}

.logout-overlay.active .rings-lock {
    animation: lockAppear 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) 1s forwards;
}

@keyframes lockAppear {
    0% {
        transform: translate(-50%, -50%) scale(0) rotate(0deg);
        opacity: 0;
    }
    50% {
        transform: translate(-50%, -50%) scale(1.3) rotate(-10deg);
        opacity: 1;
    }
    100% {
        transform: translate(-50%, -50%) scale(1) rotate(0deg);
        opacity: 1;
    }
}

.rings-lock svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 12px rgba(var(--ios-red-rgb), 0.8));
}

/* Light mode - Login/Logout overlays */
body.light-mode .unlock-overlay {
    background: rgba(255, 255, 255, 0.95);
}

body.light-mode .unlock-text {
    color: #000000;
}

body.light-mode .ring-bg-outer { stroke: rgba(var(--ios-red-rgb), 0.25); }
body.light-mode .ring-bg-middle { stroke: rgba(50, 215, 75, 0.25); }
body.light-mode .ring-bg-inner { stroke: rgba(0, 199, 255, 0.25); }

body.light-mode .ring-outer {
    filter: drop-shadow(0 0 12px rgba(var(--ios-red-rgb), 0.7)) drop-shadow(0 0 25px rgba(var(--ios-red-rgb), 0.4));
}
body.light-mode .ring-middle {
    filter: drop-shadow(0 0 12px rgba(50, 215, 75, 0.7)) drop-shadow(0 0 25px rgba(50, 215, 75, 0.4));
}
body.light-mode .ring-inner {
    filter: drop-shadow(0 0 12px rgba(0, 199, 255, 0.7)) drop-shadow(0 0 25px rgba(0, 199, 255, 0.4));
}

body.light-mode .rings-checkmark svg {
    filter: drop-shadow(0 0 15px rgba(50, 215, 75, 0.9));
}

body.light-mode .rings-lock svg {
    filter: drop-shadow(0 0 15px rgba(var(--ios-red-rgb), 0.9));
}

.warranty-info-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
}

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

.warranty-info-row span:first-child {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.warranty-info-row span:last-child {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Declaration styles */

/* Saved EU companies */
.saved-eu-companies-bar {
    margin-bottom: 12px;
}
.saved-companies-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}
.saved-companies-chips {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}
.saved-company-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}
.saved-company-chip:active {
    transform: scale(0.95);
    background: var(--glass-tint-strong);
}
.saved-company-chip .chip-delete {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255,59,48,0.15);
    color: var(--ios-red);
    font-size: 11px;
    line-height: 1;
    margin-left: 2px;
}
.save-eu-company-btn {
    padding: 8px 16px;
    border-radius: 10px;
    border: 1px dashed var(--glass-border);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.save-eu-company-btn:active {
    transform: scale(0.95);
    background: var(--glass-tint-strong);
}

/* Activity Log */
.activity-log-list {
    max-height: 300px;
    overflow-y: auto;
    border-radius: 12px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--glass-border);
}
.activity-log-item {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    padding: 8px 12px;
    font-size: 13px;
    color: var(--text-primary);
}
.activity-log-item + .activity-log-item {
    border-top: 1px solid rgba(255,255,255,0.05);
}
.activity-log-action {
    font-weight: 500;
    flex: 1;
}
.activity-log-details {
    color: var(--text-secondary);
    font-size: 12px;
    margin-left: 8px;
    max-width: 40%;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.activity-log-time {
    color: var(--text-tertiary);
    font-size: 11px;
    flex-shrink: 0;
    margin-left: 8px;
}

.declaration-type-selector {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-bottom: 20px;
}

.country-select {
    flex: 0 0 auto;
    min-width: 160px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none'%3E%3Cpath d='M4 6l4 4 4-4' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    padding-right: 40px;
}

.country-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.country-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 12px;
    font-size: 15px;
}

.declaration-type-btn {
    padding: 12px 16px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

.declaration-type-btn:hover {
    background: rgba(255, 255, 255, 0.15);
}

.declaration-type-btn.active {
    background: var(--glass-tint-strong);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Dynamic year span styling */
.dynamic-year {
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════════
   APPLE HIG-STYLE LABEL FORM REDESIGN
   Clean, minimal, spacious design inspired by Apple Human Interface Guidelines
   ══════════════════════════════════════════════════════════════════════════════ */

/* Label form container with more padding */
#labelPanel .card-content {
    padding: 20px 18px 28px;
}

/* Section titles - subtle, uppercase, spaced */
.form-section-title {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.5);
    text-transform: uppercase;
    letter-spacing: 0.8px;
    margin-bottom: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.form-section-title .section-icon {
    font-size: 14px;
    opacity: 0.8;
}

/* Section dividers with more breathing room */
.form-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    margin-top: 8px;
    padding-bottom: 0;
    border-bottom: none;
}

.form-section-title-row .form-section-title {
    margin-bottom: 0;
}

/* Section separators - more space */
#labelPanel .section-separator,
#labelPanel hr.section-separator {
    margin: 24px 0;
    border: none;
    height: 1px;
    background: rgba(255, 255, 255, 0.08);
}

/* Input groups spacing */
#labelPanel .input-group {
    margin-bottom: 16px;
}

/* Labels - clean and subtle */
#labelPanel .input-group label,
#labelPanel .postal-code-group label,
#labelPanel .city-group label {
    font-size: 13px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
    display: block;
    letter-spacing: -0.1px;
}

/* Fix payment labels - no colored labels */
#labelPanel .payment-amount-field.cod-mode label,
#labelPanel .payment-amount-field.paid-mode label {
    color: rgba(255, 255, 255, 0.6) !important;
}

/* Input fields - Apple frosted glass style */
#labelPanel input[type="text"],
#labelPanel input[type="tel"],
#labelPanel .input-wrapper input,
#labelPanel .city-group input {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 12px;
    padding: 14px 16px;
    font-size: 17px;
    font-weight: 400;
    color: var(--text-primary);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: none !important;
}

/* Disable the animated underline effect in label panel */
#labelPanel .input-wrapper::before,
#labelPanel .input-wrapper::after {
    display: none !important;
}

#labelPanel input[type="text"]:hover:not(:focus),
#labelPanel input[type="tel"]:hover:not(:focus),
#labelPanel .input-wrapper input:hover:not(:focus) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

#labelPanel input[type="text"]:focus,
#labelPanel input[type="tel"]:focus,
#labelPanel .input-wrapper input:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(10, 132, 255, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15) !important;
    outline: none;
}

/* Postal code digits - Apple style */
#labelPanel .postal-digit {
    background: rgba(255, 255, 255, 0.06) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px;
    font-size: 18px !important;
    font-weight: 600;
    transition: all 0.2s ease;
}

#labelPanel .postal-digit:focus {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(10, 132, 255, 0.6) !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.15) !important;
    transform: scale(1.02);
}

#labelPanel .postal-digit:hover:not(:focus) {
    background: rgba(255, 255, 255, 0.08) !important;
    border-color: rgba(255, 255, 255, 0.15) !important;
}

/* Postal separator */
#labelPanel .postal-separator {
    color: rgba(255, 255, 255, 0.3);
    font-weight: 500;
}

/* ── Label Parts Input Row (Nazwa części + Dodaj) ── */
#labelPanel .label-parts-input {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
}

#labelPanel .label-parts-input .input-wrapper {
    flex: 1;
}

/* Przycisk Dodaj - niebieski, płaski, systemowy Apple */
#labelPanel .label-parts-input .ios-button-icon,
#labelPanel #addPartBtn {
    background: rgba(10, 132, 255, 0.15) !important;
    border: none !important;
    color: #0a84ff !important;
    font-weight: 600;
    font-size: 14px;
    padding: 0 18px;
    height: 52px;
    border-radius: 12px;
    transition: all 0.2s ease;
}

#labelPanel .label-parts-input .ios-button-icon:hover,
#labelPanel #addPartBtn:hover {
    background: rgba(10, 132, 255, 0.25) !important;
    transform: none;
    box-shadow: none !important;
}

#labelPanel .label-parts-input .ios-button-icon:active,
#labelPanel #addPartBtn:active {
    background: rgba(10, 132, 255, 0.35) !important;
    transform: scale(0.98);
}

/* ── Dodaj z Allegro button - subtle, not screaming ── */
#labelPanel #addPartFromAllegro,
#labelPanel .ios-button-icon.secondary[id*="Allegro"] {
    background: rgba(255, 149, 0, 0.1) !important;
    border: none !important;
    color: #ff9f0a !important;
    font-weight: 600;
    font-size: 13px;
    padding: 10px 16px;
    border-radius: 10px;
    height: auto;
    min-height: 40px;
}

#labelPanel #addPartFromAllegro:hover {
    background: rgba(255, 149, 0, 0.18) !important;
    transform: none;
    box-shadow: none !important;
}

/* ── Form action buttons (Wyczyść, Zapisz, Drukuj) - Apple style ── */
.label-form-actions {
    display: flex;
    gap: 10px;
    margin-top: 28px;
    padding-top: 20px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.label-form-actions .ios-button {
    flex: 1;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 600;
    border-radius: 12px;
    border: none !important;
    box-shadow: none !important;
    transition: all 0.2s ease;
}

/* Wyczyść - gray */
.label-form-actions .ios-button.secondary,
.label-form-actions #clearLabelFormBtn {
    background: rgba(142, 142, 147, 0.12) !important;
    color: #8e8e93 !important;
    backdrop-filter: none !important;
}

.label-form-actions .ios-button.secondary:hover,
.label-form-actions #clearLabelFormBtn:hover {
    background: rgba(142, 142, 147, 0.2) !important;
    transform: none;
}

/* Zapisz - subtle blue tint */
.label-form-actions #saveLabelBtn {
    background: rgba(10, 132, 255, 0.12) !important;
    color: #0a84ff !important;
}

.label-form-actions #saveLabelBtn:hover {
    background: rgba(10, 132, 255, 0.2) !important;
    transform: none;
}

/* Drukuj - prominent blue */
.label-form-actions .ios-button.highlight,
.label-form-actions #generateLabelBtn {
    background: #0a84ff !important;
    color: #fff !important;
    font-weight: 600;
}

.label-form-actions .ios-button.highlight:hover,
.label-form-actions #generateLabelBtn:hover {
    background: #0077ed !important;
    transform: none;
    box-shadow: 0 4px 12px rgba(10, 132, 255, 0.3) !important;
}

.label-form-actions .ios-button.highlight:active,
.label-form-actions #generateLabelBtn:active {
    background: #006adc !important;
    transform: scale(0.98);
}

/* ── Toggle switch row ── */
#labelPanel .vat-toggle-inline {
    background: rgba(255, 255, 255, 0.06);
    padding: 6px 12px;
    border-radius: 20px;
    display: flex;
    align-items: center;
    gap: 8px;
}

#labelPanel .vat-toggle-label {
    font-size: 12px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* ── Currency suffix ── */
#labelPanel .currency {
    color: rgba(255, 255, 255, 0.4);
    font-weight: 500;
}

/* ── Placeholder styling ── */
#labelPanel input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
}

/* ══════════════════════════════════════════════════════════════════════════════
   END APPLE-STYLE LABEL FORM
   ══════════════════════════════════════════════════════════════════════════════ */

/* Old form-section-title styles (keep for other panels) */
.form-section-title:not(#labelPanel .form-section-title) {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: none;
    letter-spacing: -0.1px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.result-label-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
}

/* Postal code + City row */
.postal-city-row {
    display: flex;
    gap: 12px;
    align-items: flex-end;
    margin-bottom: 12px;
}

.postal-code-group {
    flex: 1;
    min-width: 0;
}

.postal-code-group label,
.city-group label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.city-group {
    flex: 1;
    min-width: 0;
}

.city-group .input-wrapper input {
    height: 50px;
    min-height: 50px;
    padding: 12px 14px;
    font-size: 18px;
}

.postal-code-inputs {
    display: flex;
    align-items: center;
    gap: 6px;
}

.postal-digit {
    flex: 1 1 0;
    min-width: 0;
    max-width: none;
    width: auto !important;
    height: 50px !important;
    min-height: 50px !important;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    font-size: 18px !important;
    font-weight: 700;
    text-align: center;
    color: var(--text-primary);
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: var(--shadow-sm);
    padding: 0 !important;
    caret-color: var(--primary-color);
    box-sizing: border-box;
}

.postal-digit:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 
        0 0 0 3px rgba(var(--primary-rgb), 0.15),
        0 4px 12px rgba(var(--primary-rgb), 0.1);
    transform: scale(1.05);
}

.postal-digit:hover:not(:focus) {
    border-color: rgba(var(--primary-rgb), 0.3);
}

.postal-digit.invalid {
    border-color: var(--ios-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--ios-red-rgb), 0.2) !important;
    animation: inputShake 0.4s ease;
}

.postal-digit.filled {
    background: rgba(var(--primary-rgb), 0.05);
    border-color: rgba(var(--primary-rgb), 0.3);
}

/* City field states */
.city-group .input-wrapper input.loading {
    background: linear-gradient(90deg, 
        var(--glass-bg) 0%, 
        rgba(var(--primary-rgb), 0.1) 50%, 
        var(--glass-bg) 100%);
    background-size: 200% 100%;
    animation: loadingShimmer 1.5s infinite;
}

.city-group .input-wrapper input.success {
    border-color: var(--ios-green) !important;
    box-shadow: 0 0 0 3px rgba(var(--ios-green-rgb), 0.2);
    animation: successPulse 0.5s ease;
}

/* City overrides button */
.label-with-action {
    display: flex;
    align-items: center;
    gap: 6px;
}

.label-with-action .validation-error {
    flex: 1;
}

/* ── "Nie podano" recipient toggle ─────────────────────────────── */
.label-with-recipient-toggle {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px 10px;
}
.label-with-recipient-toggle .label-text {
    flex: 0 0 auto;
}
.label-with-recipient-toggle .validation-error {
    flex: 1 1 auto;
}
.recipient-skip-wrap {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin-left: auto;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    line-height: 1;
    height: 17px;
}
.recipient-skip-wrap .recipient-skip-checkbox {
    appearance: none;
    -webkit-appearance: none;
    width: 17px;
    height: 17px;
    border-radius: 50%;
    border: 1.5px solid rgba(255, 255, 255, 0.3);
    background: rgba(255, 255, 255, 0.04);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    cursor: pointer;
    transition: background-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                border-color 0.25s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1),
                box-shadow 0.25s cubic-bezier(0.2, 0.8, 0.2, 1);
    flex-shrink: 0;
    vertical-align: middle;
    margin: 0;
}
.recipient-skip-wrap .recipient-skip-checkbox:hover {
    border-color: rgba(255, 255, 255, 0.55);
    background: rgba(255, 255, 255, 0.06);
}
.recipient-skip-wrap .recipient-skip-checkbox:active {
    transform: scale(0.88);
}
.recipient-skip-wrap .recipient-skip-checkbox:checked {
    background: var(--ios-blue, #0A84FF);
    border-color: var(--ios-blue, #0A84FF);
    box-shadow: 0 0 0 4px rgba(10, 132, 255, 0.22),
                0 2px 8px rgba(10, 132, 255, 0.35);
}
.recipient-skip-wrap .recipient-skip-checkbox:checked::after {
    content: '';
    position: absolute;
    left: 4.5px;
    top: 1.5px;
    width: 4.5px;
    height: 9px;
    border: solid #fff;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg) scale(0);
    animation: recipientSkipCheckIn 0.32s cubic-bezier(0.2, 0.9, 0.3, 1.2) forwards;
}
@keyframes recipientSkipCheckIn {
    0% { transform: rotate(45deg) scale(0); opacity: 0; }
    55% { transform: rotate(45deg) scale(1.25); opacity: 1; }
    100% { transform: rotate(45deg) scale(1); opacity: 1; }
}
.recipient-skip-wrap .recipient-skip-label,
#labelPanel .input-group .recipient-skip-wrap .recipient-skip-label {
    font-size: 12px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    cursor: pointer;
    letter-spacing: -0.01em;
    line-height: 17px;
    height: 17px;
    display: inline-flex;
    align-items: center;
    margin: 0 !important;
    padding: 0;
    transition: color 0.22s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.recipient-skip-wrap .recipient-skip-checkbox:checked + .recipient-skip-label {
    color: var(--ios-blue, #0A84FF);
}

/* Apple-style fade / disable of recipient input when "Nie podano" is checked */
.recipient-input-wrapper {
    position: relative;
}
.recipient-input-wrapper input {
    transition: opacity 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
                filter 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
                transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1),
                background-color 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.recipient-input-wrapper .recipient-unspecified-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 0 14px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.98);
    transition: opacity 0.28s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s,
                transform 0.32s cubic-bezier(0.2, 0.8, 0.2, 1) 0.05s;
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    letter-spacing: -0.01em;
}
.recipient-input-group.recipient-unspecified .recipient-input-wrapper input {
    cursor: not-allowed;
    background-color: rgba(255, 255, 255, 0.02);
    color: transparent;
    -webkit-text-fill-color: transparent;
    transition: color 0.2s ease, background-color 0.32s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.recipient-input-group.recipient-unspecified .recipient-input-wrapper input::placeholder {
    color: transparent;
    opacity: 0;
}
.recipient-input-group.recipient-unspecified .recipient-input-wrapper .recipient-unspecified-overlay {
    opacity: 1;
    transform: translateY(0) scale(1);
}
.recipient-input-wrapper input:disabled {
    pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
    .recipient-skip-wrap .recipient-skip-checkbox,
    .recipient-skip-wrap .recipient-skip-checkbox:checked::after,
    .recipient-input-wrapper input,
    .recipient-input-wrapper .recipient-unspecified-overlay {
        transition: none !important;
        animation: none !important;
    }
}

/* Light mode */
body.light-mode .recipient-skip-wrap .recipient-skip-checkbox {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.02);
}
body.light-mode .recipient-skip-wrap .recipient-skip-checkbox:hover {
    border-color: rgba(0, 0, 0, 0.35);
}
body.light-mode .recipient-skip-wrap .recipient-skip-label {
    color: rgba(0, 0, 0, 0.55);
}
body.light-mode .recipient-input-group.recipient-unspecified .recipient-input-wrapper input {
    background-color: rgba(0, 0, 0, 0.02);
}
body.light-mode .recipient-input-wrapper .recipient-unspecified-overlay {
    color: rgba(0, 0, 0, 0.65);
}

.city-overrides-btn {
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.5);
    font-size: 16px;
    padding: 2px 4px;
    cursor: pointer;
    opacity: 0.8;
    transition: opacity 0.2s, color 0.2s;
    margin-left: auto;
}
.city-overrides-btn:hover, .city-overrides-btn:active {
    opacity: 1;
    color: rgba(255, 255, 255, 0.7);
}

/* City overrides modal */
.city-overrides-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}
.city-overrides-modal {
    background: var(--bg-card, #1c1c1e);
    border-radius: 16px;
    padding: 24px;
    max-width: 400px;
    width: 100%;
    max-height: 70vh;
    overflow-y: auto;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}
.city-overrides-modal h3 {
    font-size: 17px;
    font-weight: 600;
    margin: 0 0 16px;
    color: var(--text-primary);
}
.city-overrides-empty {
    font-size: 14px;
    color: var(--text-tertiary);
    text-align: center;
    padding: 20px 0;
}
.city-override-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border-radius: 10px;
    margin-bottom: 8px;
}
.city-override-item:last-child { margin-bottom: 0; }
.city-override-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.city-override-postal {
    font-size: 13px;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.city-override-city {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}
.city-override-delete {
    background: none;
    border: none;
    color: var(--ios-red, #FF3B30);
    font-size: 18px;
    padding: 4px 8px;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity 0.2s;
    border-radius: 8px;
}
.city-override-delete:hover { opacity: 1; background: rgba(255,59,48,0.1); }
.city-overrides-close {
    display: block;
    width: 100%;
    margin-top: 16px;
    padding: 12px;
    background: rgba(255,255,255,0.08);
    border: none;
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
}
.city-overrides-close:hover { background: rgba(255,255,255,0.12); }

@keyframes loadingShimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

@keyframes successPulse {
    0% { transform: scale(1); }
    50% { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.postal-separator {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-tertiary);
    margin: 0 2px;
    user-select: none;
}

.label-parts-input {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 10px;
}

.label-parts-input .ios-button-icon {
    width: auto;
    min-width: 90px;
    height: 44px;
    padding: 0 16px;
    font-size: 14px;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    border-radius: 12px;
}

.label-parts-input .ios-button-icon:hover {
    background: rgba(255, 255, 255, 0.12);
    border-color: rgba(255, 255, 255, 0.25);
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

.label-parts-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 10px;
}

.label-part-remove {
    background: none;
    border: none;
    color: var(--ios-red);
    font-size: 18px;
    cursor: pointer;
    padding: 0 5px;
}

.form-section-title-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.form-section-title-row .form-section-title {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

/* Animacja przełączania pola Opłacono/Kwota pobrania */
.payment-amount-field {
    transition: all 0.3s ease;
}

.payment-amount-field.switching {
    opacity: 0.5;
    transform: scale(0.98);
}

/* Tryb opłacona kwota - zielona ramka */
.payment-amount-field.paid-mode label {
    color: var(--ios-green);
}

.payment-amount-field.paid-mode input {
    border-color: rgba(var(--ios-green-rgb), 0.4);
}

.payment-amount-field.paid-mode input:focus {
    border-color: var(--ios-green);
    box-shadow: 0 0 0 3px rgba(var(--ios-green-rgb), 0.15);
}

/* Tryb pobrania - pomarańczowa ramka */
.payment-amount-field.cod-mode label {
    color: #ff9500;
}

.payment-amount-field.cod-mode input {
    border-color: rgba(255, 149, 0, 0.4);
}

.payment-amount-field.cod-mode input:focus {
    border-color: #ff9500;
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

/* Sekcja przycisków formularza etykiet */
.label-form-actions {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 28px;
    padding-top: 24px;
    border-top: 1px solid var(--glass-border);
}

.label-form-actions .ios-button {
    flex: 1;
    min-width: 0;
    max-width: none;
    padding: 16px 20px;
    font-size: 15px;
    font-weight: 600;
}

/* Przycisk Drukuj - wyróżniony */
.label-form-actions .ios-button.highlight {
    background: rgba(var(--primary-rgb), 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: none;
}

.label-form-actions .ios-button.highlight:hover {
    background: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
    transform: translateY(-1px);
}

.label-form-actions .ios-button.highlight:active {
    transform: scale(0.98);
}

/* Stare style - do usunięcia w przyszłości */
.label-generate-centered {
    display: flex;
    justify-content: center;
    margin-top: 24px;
    gap: 10px;
    flex-wrap: wrap;
}

.label-generate-centered .ios-button {
    min-width: 0;
    flex: 1;
    max-width: none;
    padding: 14px 18px;
    font-size: 14px;
}

.label-generate-centered .ios-button:nth-child(4) {
    flex-basis: 100%;
}

/* Przycisk Generuj etykietę - wyróżniony */
.label-generate-centered .ios-button.highlight {
    background: rgba(var(--primary-rgb), 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
    font-weight: 700;
    letter-spacing: 0.3px;
    text-shadow: none;
}

.label-generate-centered .ios-button.highlight:hover {
    transform: translateY(-3px);
    background: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.2);
    filter: brightness(1.05);
}

.label-generate-centered .ios-button.highlight:active {
    transform: scale(0.98);
}

.label-generate-centered .ios-button.highlight svg {
    filter: none;
}

/* ==========================================
   SAVED LABELS - Apple Glass Card Design
   ========================================== */
#savedLabelsCard .section-title {
    color: var(--text-primary);
    font-weight: 700;
}

#savedLabelsCard .section-icon {
    opacity: 0.9;
    filter: brightness(1.3);
}

#savedLabelsCard .stats-description {
    color: var(--text-secondary);
    opacity: 0.8;
}

.saved-labels-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.saved-labels-count {
    background: rgba(var(--ios-blue-rgb), 0.1);
    border: 1px solid rgba(var(--ios-blue-rgb), 0.15);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 10px;
    border-radius: 12px;
    min-width: 24px;
    text-align: center;
}

.saved-labels-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 12px;
}

/* ── Card ── */
.slc-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    transition: all 0.25s ease;
    position: relative;
    overflow: hidden;
}

body.light-mode .slc-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.slc-card:hover {
    border-color: rgba(var(--ios-blue-rgb), 0.2);
    background: rgba(255, 255, 255, 0.05);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
}

body.light-mode .slc-card:hover {
    background: rgba(0, 0, 0, 0.01);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);
}

.slc-body {
    display: flex;
    align-items: stretch;
    gap: 0;
}

/* ── Info area ── */
.slc-info {
    flex: 1;
    min-width: 0;
    padding: 14px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.slc-recipient {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    line-height: 1.3;
}

.slc-meta {
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.slc-meta-item {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.slc-meta-item svg {
    flex-shrink: 0;
    opacity: 0.7;
}

/* ── Parts tags ── */
.slc-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-top: 2px;
}

.slc-part-tag {
    display: inline-block;
    padding: 3px 10px;
    background: rgba(var(--ios-blue-rgb), 0.08);
    border: 1px solid rgba(var(--ios-blue-rgb), 0.12);
    border-radius: 6px;
    font-size: 11px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 0.3px;
}

/* ── Footer: badges + date ── */
.slc-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    margin-top: 2px;
}

.slc-badges {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.slc-badge {
    display: inline-block;
    padding: 3px 8px;
    border-radius: 6px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.2px;
}

.slc-badge.cod {
    background: rgba(255, 149, 0, 0.1);
    color: #FF9500;
    border: 1px solid rgba(255, 149, 0, 0.15);
}

.slc-badge.paid {
    background: rgba(var(--ios-green-rgb), 0.1);
    color: var(--ios-green);
    border: 1px solid rgba(var(--ios-green-rgb), 0.15);
}

.slc-badge.courier {
    background: rgba(var(--ios-blue-rgb), 0.08);
    color: var(--primary-color);
    border: 1px solid rgba(var(--ios-blue-rgb), 0.12);
}

.slc-date {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
}

.slc-date svg {
    opacity: 0.4;
}

/* ── Action buttons column ── */
.slc-actions {
    display: flex;
    flex-direction: column;
    border-left: 1px solid rgba(255, 255, 255, 0.05);
    flex-shrink: 0;
}

body.light-mode .slc-actions {
    border-left-color: rgba(0, 0, 0, 0.05);
}

.slc-btn {
    flex: 1;
    width: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    color: var(--text-tertiary);
    position: relative;
}

.slc-btn + .slc-btn {
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

body.light-mode .slc-btn + .slc-btn {
    border-top-color: rgba(0, 0, 0, 0.04);
}

.slc-btn svg {
    transition: all 0.2s ease;
}

/* Print */
.slc-btn.print {
    color: var(--ios-green);
}
.slc-btn.print:hover {
    background: rgba(var(--ios-green-rgb), 0.1);
}
.slc-btn.print:hover svg {
    transform: scale(1.12);
}

/* Edit */
.slc-btn.edit {
    color: var(--primary-color);
}
.slc-btn.edit:hover {
    background: rgba(var(--ios-blue-rgb), 0.1);
}
.slc-btn.edit:hover svg {
    transform: scale(1.12);
}

/* Delete */
.slc-btn.delete {
    color: var(--ios-red);
}
.slc-btn.delete:hover {
    background: rgba(var(--ios-red-rgb), 0.08);
}
.slc-btn.delete:hover svg {
    transform: scale(1.12);
}

.slc-btn:active svg {
    transform: scale(0.9);
}

/* Mobile responsive */
@media (max-width: 480px) {
    .slc-btn {
        width: 42px;
    }
    .slc-info {
        padding: 12px 14px;
    }
}

/* ====== Edit Saved Label Modal ====== */
#editSavedLabelModal {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    z-index: var(--z-overlay);
    align-items: center;
    justify-content: center;
}

#editSavedLabelModal.active {
    display: flex;
}

/* ── Edit Label Modal — Apple Glass Redesign ── */
.edit-label-panel {
    width: min(520px, 92vw);
    max-height: 90vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: rgba(28, 28, 30, 0.78);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(255, 255, 255, 0.08),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    animation: editLabelModalIn 0.35s cubic-bezier(0.32, 0.72, 0, 1);
}

body.light-mode .edit-label-panel {
    background: rgba(255, 255, 255, 0.82);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        0 0 0 0.5px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

@keyframes editLabelModalIn {
    from {
        opacity: 0;
        transform: scale(0.92) translateY(16px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

@keyframes editLabelModalOut {
    from {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
    to {
        opacity: 0;
        transform: scale(0.92) translateY(16px);
    }
}

/* Header */
.edit-label-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 18px 22px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.light-mode .edit-label-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

.edit-label-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.edit-label-icon-wrap {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(var(--ios-blue-rgb), 0.12);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
}

.edit-label-icon-wrap svg {
    width: 18px;
    height: 18px;
}

.edit-label-title h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.3px;
}

.edit-label-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

body.light-mode .edit-label-close {
    background: rgba(0, 0, 0, 0.05);
}

.edit-label-close svg {
    width: 14px;
    height: 14px;
}

.edit-label-close:hover {
    background: rgba(var(--ios-red-rgb), 0.15);
    color: var(--ios-red);
    transform: scale(1.08);
}

/* Body */
.edit-label-body {
    flex: 1;
    overflow-y: auto;
    padding: 20px 22px;
    -webkit-overflow-scrolling: touch;
}

.edit-label-form {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

/* Sections */
.edit-label-section {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.edit-label-section-title {
    font-size: 13px;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.edit-label-section-icon {
    font-size: 14px;
}

/* Row pairs (side by side) */
.edit-label-row-pair {
    display: flex;
    gap: 12px;
}

.edit-label-row-pair > .edit-label-row {
    flex: 1;
    min-width: 0;
}

/* Single row */
.edit-label-row {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.edit-label-row label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

.edit-label-row input[type="text"],
.edit-label-row input[type="tel"],
.edit-label-row input[type="number"] {
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    transition: all 0.2s ease;
    width: 100%;
    box-sizing: border-box;
}

body.light-mode .edit-label-row input[type="text"],
body.light-mode .edit-label-row input[type="tel"],
body.light-mode .edit-label-row input[type="number"] {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.03);
}

.edit-label-row input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.04);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.edit-label-row input.invalid {
    border-color: var(--ios-red) !important;
    box-shadow: 0 0 0 3px rgba(var(--ios-red-rgb), 0.12) !important;
}

/* Input with unit (zł) */
.edit-label-input-unit {
    position: relative;
}

.edit-label-input-unit input {
    padding-right: 36px !important;
}

.edit-label-unit {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Payment header with toggle */
.edit-label-payment-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.edit-label-payment-header label:first-child {
    margin: 0;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* Parts tags */
.edit-label-parts {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    min-height: 36px;
    padding: 10px 12px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    align-items: flex-start;
}

body.light-mode .edit-label-parts {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.edit-label-part-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 10px 5px 12px;
    background: rgba(var(--ios-blue-rgb), 0.12);
    border: 1px solid rgba(var(--ios-blue-rgb), 0.2);
    border-radius: 8px;
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 0.2px;
    transition: all 0.15s ease;
}

.edit-label-part-tag:hover {
    background: rgba(var(--ios-blue-rgb), 0.18);
}

.edit-label-part-remove {
    cursor: pointer;
    opacity: 0.5;
    font-size: 14px;
    font-weight: 700;
    transition: all 0.15s;
    width: 18px;
    height: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.edit-label-part-remove:hover {
    opacity: 1;
    background: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-red);
}

/* Add part */
.edit-label-add-part {
    display: flex;
    gap: 8px;
}

.edit-label-add-part input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s ease;
}

body.light-mode .edit-label-add-part input {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.03);
}

.edit-label-add-part input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.edit-label-add-part button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    border: none;
    background: rgba(var(--ios-blue-rgb), 0.15);
    color: var(--primary-color);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    font-weight: 600;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.edit-label-add-part button:hover {
    background: rgba(var(--ios-blue-rgb), 0.25);
    transform: scale(1.05);
}

.edit-label-add-part button:active {
    transform: scale(0.95);
}

/* Footer */
.edit-label-footer {
    display: flex;
    gap: 10px;
    padding: 16px 22px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

body.light-mode .edit-label-footer {
    border-top-color: rgba(0, 0, 0, 0.06);
}

.edit-label-btn-cancel {
    flex: 1;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

body.light-mode .edit-label-btn-cancel {
    border-color: rgba(0, 0, 0, 0.08);
    background: rgba(0, 0, 0, 0.04);
}

.edit-label-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}

.edit-label-btn-cancel:active {
    transform: scale(0.98);
}

.edit-label-btn-save {
    flex: 1.5;
    height: 44px;
    border-radius: 12px;
    border: none;
    background: var(--primary-color);
    color: white;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s ease;
    box-shadow: 0 4px 16px rgba(var(--ios-blue-rgb), 0.3);
}

.edit-label-btn-save svg {
    width: 16px;
    height: 16px;
}

.edit-label-btn-save:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(var(--ios-blue-rgb), 0.4);
}

.edit-label-btn-save:active {
    transform: translateY(0) scale(0.98);
}

/* Toggle switch */
.edit-modal-switch {
    position: relative;
    display: inline-block;
    width: 44px;
    height: 26px;
    flex-shrink: 0;
}

.edit-modal-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.edit-modal-slider {
    position: absolute;
    cursor: pointer;
    inset: 0;
    background: rgba(120, 120, 128, 0.32);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 26px;
}

.edit-modal-slider:before {
    position: absolute;
    content: "";
    height: 22px;
    width: 22px;
    left: 2px;
    bottom: 2px;
    background: white;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    border-radius: 50%;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.edit-modal-switch input:checked + .edit-modal-slider {
    background: #34c759;
}

.edit-modal-switch input:checked + .edit-modal-slider:before {
    transform: translateX(18px);
}

/* Responsive */
@media (max-width: 480px) {
    .edit-label-row-pair {
        flex-direction: column;
        gap: 12px;
    }
    .edit-label-panel {
        border-radius: 16px;
    }
    .edit-label-header,
    .edit-label-body,
    .edit-label-footer {
        padding-left: 16px;
        padding-right: 16px;
    }
}

/* Empty state for saved labels */
.saved-labels-empty {
    text-align: center;
    padding: 30px 20px;
    color: var(--text-tertiary);
}

.saved-labels-empty-icon {
    font-size: 40px;
    margin-bottom: 10px;
    opacity: 0.5;
}

.saved-labels-empty-text {
    font-size: 14px;
}

/* Shipment History Styles */
/* ==========================================
   SHIPMENT HISTORY - Redesigned Panel
   ========================================== */

/* Header Row with Settlement Button */
.shipment-header-row {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-bottom: 16px;
    gap: 12px;
}

.settlement-btn {
    background: linear-gradient(135deg, rgba(var(--ios-green-rgb), 0.15), rgba(var(--ios-green-rgb), 0.1));
    border: 1px solid rgba(var(--ios-green-rgb), 0.3);
    color: var(--ios-green);
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
    white-space: nowrap;
    display: flex;
    align-items: center;
    gap: 6px;
}

.settlement-btn:hover {
    background: linear-gradient(135deg, rgba(var(--ios-green-rgb), 0.25), rgba(var(--ios-green-rgb), 0.2));
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--ios-green-rgb), 0.3);
}

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

/* Stats Grid */
.shipment-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.shipment-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    transition: border-color 0.2s ease;
}

.shipment-stat-card:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
}

.stat-card-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.stat-card-label {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 2px;
}

/* Search & Filter Section */
.shipment-filters-section {
    margin-bottom: 16px;
}

.shipment-search-box {
    position: relative;
    margin-bottom: 14px;
}

.shipment-search-box .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.shipment-search-box .search-icon svg {
    width: 18px;
    height: 18px;
}

.shipment-search-box input {
    width: 100%;
    padding: 14px 16px 14px 44px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    color: var(--text-primary);
    font-size: 15px;
    transition: all 0.3s ease;
}

.shipment-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.shipment-search-box input::placeholder {
    color: var(--text-tertiary);
}

.shipment-courier-filter {
    display: flex;
    align-items: center;
    gap: 10px;
}

.filter-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    white-space: nowrap;
}

.courier-filter-select {
    padding: 8px 32px 8px 12px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    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='%23888' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    min-width: 140px;
}

.courier-filter-select:hover {
    border-color: var(--primary-color);
}

.courier-filter-select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--primary-glow);
}

.courier-filter-select option {
    background: var(--bg-secondary);
    color: var(--text-primary);
    padding: 8px;
}

/* Auto-suggest dropdown */
.autosuggest-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 1000;
    background: rgba(44, 44, 46, 0.95);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    margin-top: 4px;
    max-height: 200px;
    overflow-y: auto;
    opacity: 0;
    transform: translateY(-4px);
    pointer-events: none;
    transition: all 0.2s ease;
    box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}
.autosuggest-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
.autosuggest-item {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
    -webkit-tap-highlight-color: transparent;
}
.autosuggest-item:first-child { border-radius: 12px 12px 0 0; }
.autosuggest-item:last-child { border-radius: 0 0 12px 12px; }
.autosuggest-item:only-child { border-radius: 12px; }
.autosuggest-item:active {
    background: rgba(255,255,255,0.1);
}
.autosuggest-item + .autosuggest-item {
    border-top: 1px solid rgba(255,255,255,0.06);
}

/* Pull-to-refresh indicator */
.pull-refresh-indicator {
    height: 0;
    overflow: hidden;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    opacity: 0;
    transition: height 0.25s ease, opacity 0.25s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 4px;
}
.pull-refresh-indicator.ready {
    color: var(--accent);
}

/* Shipment List Container */
.shipment-list-container {
    background: rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 16px;
    border: 1px solid var(--glass-border);
    overflow: hidden;
}

.shipment-list {
    max-height: 400px;
    overflow-y: auto;
    padding: 8px;
}

.shipment-list::-webkit-scrollbar {
    width: 6px;
}

.shipment-list::-webkit-scrollbar-track {
    background: transparent;
}

.shipment-list::-webkit-scrollbar-thumb {
    background: var(--text-tertiary);
    border-radius: 3px;
}

.shipment-item {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    transition: all 0.3s ease;
    position: relative;
}

.shipment-item.shipment-hidden {
    display: none !important;
}

.shipment-item:last-child {
    margin-bottom: 0;
}

.shipment-item:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.shipment-item.added-to-sales {
    border-left: 3px solid var(--ios-green);
}

/* Shipment Actions Bar */
.shipment-actions-bar {
    display: flex;
    justify-content: center;
    padding-top: 20px;
    margin-top: 16px;
    border-top: 1px solid var(--glass-border);
}

/* Statistics Section */
.stats-description {
    font-size: 13px;
    color: var(--text-tertiary);
    margin-bottom: 14px;
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

.stat-tile {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    transition: border-color 0.2s ease;
}

.stat-tile:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
}

.stat-tile-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.stat-tile-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.stat-tile-count {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
}

/* Legacy support */
.employee-stat-tile, .courier-stat-tile {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 16px 14px;
    text-align: center;
    transition: border-color 0.2s ease;
}

.employee-stat-tile:hover, .courier-stat-tile:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
}

.employee-stat-name, .courier-stat-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 6px;
}

.employee-stat-count, .courier-stat-count {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
}

.employee-courier-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 10px;
}

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

.shipment-recipient {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 15px;
    margin-bottom: 6px;
    padding-right: 140px;
    word-break: break-word;
}

.shipment-address {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    display: flex;
    align-items: flex-start;
}

.shipment-address svg {
    flex-shrink: 0;
    margin-top: 1px;
}

.shipment-detail-row {
    display: flex;
    align-items: baseline;
    gap: 6px;
    font-size: 12px;
    margin-top: 2px;
    color: var(--text-secondary);
    line-height: 1.4;
}

.shipment-detail-row .shipment-detail-label {
    margin-top: 0;
    margin-bottom: 0;
}

.shipment-detail-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-top: 6px;
    margin-bottom: 2px;
}

.shipment-detail-value {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 12px;
    line-height: 1.4;
}

.shipment-section-divider {
    height: 1px;
    background: var(--glass-border);
    margin: 8px 0;
    opacity: 0.6;
}

.shipment-parts-list {
    margin-top: 0;
    margin-bottom: 0;
}

.shipment-parts-list .shipment-detail-label {
    margin-top: 0;
    margin-bottom: 3px;
}

.shipment-part-line {
    font-size: 12px;
    color: var(--text-secondary);
    padding: 2px 0 2px 16px;
    position: relative;
    line-height: 1.4;
}

.shipment-part-line::before {
    content: '•';
    position: absolute;
    left: 4px;
    color: var(--text-tertiary);
}

.shipment-date {
    font-size: 11px;
    color: var(--text-tertiary);
    display: inline-flex;
    align-items: center;
}

/* Bottom section: parts + date in one row */
.shipment-bottom-section {
    display: flex;
    align-items: flex-end;
    gap: 10px;
}

.shipment-bottom-section .shipment-parts-list {
    flex: 1;
    min-width: 0;
}

.shipment-bottom-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    white-space: nowrap;
    align-self: flex-end;
    padding-bottom: 2px;
    /* Fixed width to prevent layout shift on hover */
    min-width: 145px;
    justify-content: flex-end;
}

.shipment-bottom-right .shipment-action-btn.sale,
.shipment-bottom-right .shipment-action-btn.done {
    display: none;
}

.shipment-item:hover .shipment-bottom-right .shipment-date {
    display: none;
}

.shipment-item:hover .shipment-bottom-right .shipment-action-btn.sale {
    display: inline-flex;
}

/* Always show done badge */
.shipment-item.added-to-sales .shipment-bottom-right .shipment-action-btn.done {
    display: inline-flex;
}

.shipment-item.added-to-sales .shipment-bottom-right .shipment-date {
    display: inline-flex;
}

/* For added-to-sales: date and done badge stay visible on hover */
.shipment-item.added-to-sales:hover .shipment-bottom-right .shipment-date {
    display: inline-flex;
}

.shipment-item.added-to-sales:hover .shipment-bottom-right .shipment-action-btn.done {
    display: inline-flex;
}

.shipment-item.added-to-sales:hover .shipment-bottom-right .shipment-action-btn.sale {
    display: none;
}

/* Amount confirmation modal - extends select-modal */
.amount-confirm-rows {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
}

.amount-confirm-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
}

.amount-confirm-label {
    font-size: 13px;
    color: var(--text-secondary);
    font-weight: 500;
}

.amount-confirm-value {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary);
}

.amount-confirm-value.cod {
    color: #FF9500;
}

.amount-confirm-value.paid {
    color: var(--ios-green);
}

.amount-confirm-info {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #FFD60A;
    padding: 10px 16px;
    background: rgba(255, 214, 10, 0.1);
    border: 1px solid rgba(255, 214, 10, 0.25);
    border-radius: 10px;
    line-height: 1.4;
}

.amount-confirm-info svg {
    flex-shrink: 0;
    stroke: #FFD60A;
}

/* Employee statistics in shipment history */
.employee-stats-container {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 16px 0;
    padding: 12px;
    background: var(--glass-tint);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.employee-stat-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--glass-bg);
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
}

.employee-stat-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px var(--primary-glow);
}

.employee-stat-icon {
    font-size: 20px;
}

.employee-stat-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.employee-stat-count {
    background: var(--glass-tint);
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 12px;
    min-width: 28px;
    text-align: center;
    border: 1px solid var(--glass-border);
}

.shipment-created-by {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--primary-color);
    font-weight: 500;
    background: var(--glass-tint);
    padding: 4px 10px;
    border-radius: 10px;
    line-height: 1;
}

.shipment-created-by svg {
    flex-shrink: 0;
}

.shipment-courier-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--ios-orange);
    font-weight: 500;
    background: rgba(255, 149, 0, 0.15);
    padding: 4px 10px;
    border-radius: 10px;
    line-height: 1;
}

.shipment-courier-badge svg {
    flex-shrink: 0;
}

/* Top-right area: badges + hover actions */
.shipment-top-right {
    position: absolute;
    top: 10px;
    right: 12px;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 6px;
    z-index: 2;
}

/* Badges always visible */
.shipment-badges {
    display: flex;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

.shipment-hover-actions {
    display: none;
    gap: 6px;
    align-items: center;
    justify-content: flex-end;
}

/* On hover: show action buttons below badges */
.shipment-item:hover .shipment-hover-actions {
    display: flex;
}

/* For added-to-sales: always show done indicator below badges */
.shipment-item.added-to-sales .shipment-hover-actions {
    display: flex;
}

.shipment-item.added-to-sales .shipment-hover-actions .shipment-action-btn:not(.done) {
    display: none;
}

.shipment-item.added-to-sales:hover .shipment-hover-actions .shipment-action-btn:not(.done) {
    display: inline-block;
}

.shipment-action-btn {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    padding: 5px 12px;
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    transition: all 0.2s;
    white-space: nowrap;
}

.shipment-action-btn.sale {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
}

.shipment-action-btn.sale:hover {
    background: rgba(var(--primary-rgb), 0.25);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.shipment-action-btn.copy:hover {
    background: rgba(var(--ios-blue-rgb), 0.1);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.shipment-action-btn.delete {
    color: var(--text-tertiary);
}

.shipment-action-btn.delete:hover {
    background: rgba(var(--ios-red-rgb), 0.1);
    border-color: var(--ios-red);
    color: var(--ios-red);
}

.shipment-action-btn.done {
    background: rgba(var(--ios-green-rgb), 0.12);
    border-color: rgba(var(--ios-green-rgb), 0.3);
    color: var(--ios-green);
    cursor: default;
    pointer-events: none;
}

.shipment-action-btn:active {
    transform: scale(0.96);
}

/* Payment status values */
.shipment-val-cod {
    color: #FF9500 !important;
    font-weight: 700 !important;
}

.shipment-val-paid {
    color: var(--ios-green) !important;
    font-weight: 700 !important;
}

.empty-state {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
}

.empty-state-icon {
    margin-bottom: 10px;
    opacity: 0.5;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    line-height: 1;
}

.empty-state-icon svg {
    width: 48px;
    height: 48px;
}

.empty-state-text {
    font-size: 16px;
    font-weight: 500;
    margin-bottom: 5px;
}

.empty-state-hint {
    font-size: 13px;
}

.empty-state-cta {
    margin-top: 14px;
    padding: 10px 24px;
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: 20px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.empty-state-cta:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: translateY(-1px);
}

/* ==========================================
   SHIPMENT -> SALES MODAL
   ========================================== */

.shipment-sales-modal {
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    width: min(440px, 92vw);
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.4);
    animation: modalSlideUp 0.25s ease;
}

@keyframes modalSlideUp {
    from { opacity: 0; transform: translateY(30px) scale(0.97); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

.shipment-sales-modal-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 20px 22px 14px;
    border-bottom: 1px solid var(--glass-border);
}

.shipment-sales-modal-header svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.shipment-sales-modal-header h3 {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.shipment-sales-modal-info {
    padding: 12px 22px;
    background: var(--glass-tint);
    border-bottom: 1px solid var(--glass-border);
}

.modal-info-recipient {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.modal-info-address {
    font-size: 12px;
    color: var(--text-secondary);
}

.shipment-sales-modal-body {
    padding: 18px 22px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.modal-form-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.modal-form-field input[type="text"],
.modal-form-field input[type="number"] {
    width: 100%;
    padding: 10px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    transition: border-color 0.2s;
    box-sizing: border-box;
}

.modal-form-field input:focus {
    border-color: var(--primary-color);
    outline: none;
}

.modal-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.modal-amount-wrap {
    position: relative;
}

.modal-amount-wrap input {
    padding-right: 34px !important;
}

.modal-amount-suffix {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 600;
    pointer-events: none;
}

.modal-payment-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.modal-pay-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-pay-tile:hover {
    border-color: var(--primary-color);
    background: rgba(var(--ios-blue-rgb), 0.06);
}

.modal-pay-tile.active {
    border-color: var(--primary-color);
    background: rgba(var(--ios-blue-rgb), 0.12);
    color: var(--primary-color);
}

.shipment-sales-modal-footer {
    display: flex;
    gap: 10px;
    padding: 14px 22px 20px;
    border-top: 1px solid var(--glass-border);
}

.modal-btn-cancel {
    flex: 1;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--bg-secondary);
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn-cancel:hover {
    background: var(--glass-tint);
}

.modal-btn-confirm {
    flex: 1.5;
    padding: 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.modal-btn-confirm:hover {
    background: rgba(var(--primary-rgb), 0.25);
}

.modal-btn-confirm:active {
    transform: scale(0.98);
}

/* ==========================================
   NOTES - Redesigned Panel
   ========================================== */

/* Stats Grid */
.notes-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.notes-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: all 0.3s ease;
}

.notes-stat-card:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
    transform: translateY(-1px);
}

.notes-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.notes-stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 2px;
}

/* Search Box */
.notes-search-box {
    position: relative;
    margin-bottom: 16px;
}

.notes-search-box .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.notes-search-box .search-icon svg {
    width: 18px;
    height: 18px;
}

.notes-search-box input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    transition: all 0.3s ease;
}

.notes-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

/* Quick Form */
.notes-quick-form {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px;
}

.notes-quick-form textarea {
    width: 100%;
    padding: 12px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    resize: vertical;
    min-height: 60px;
    margin-bottom: 10px;
    transition: all 0.3s ease;
}

.notes-quick-form textarea:focus {
    outline: none;
    border-color: var(--primary-color);
}

.notes-quick-form textarea::placeholder {
    color: var(--text-tertiary);
}

.notes-add-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* List Header */
.notes-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

/* Notes List */
.notes-list {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: visible;
    padding: 4px;
    margin: -4px;
}

.note-item {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    position: relative;
    transition: all 0.3s ease;
}

.note-item:last-child {
    margin-bottom: 0;
}

.note-item:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

.note-content {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.6;
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: 60px;
}

.note-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: stretch;
    margin-top: 10px;
}

.note-date,
.note-edited {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    padding: 6px 10px;
    border-radius: 8px;
    font-weight: 500;
    line-height: 1;
    box-sizing: border-box;
}

.note-date svg,
.note-edited svg {
    flex-shrink: 0;
    width: 12px !important;
    height: 12px !important;
    display: block;
}

.note-date {
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
}

.note-edited {
    color: var(--ios-orange);
    background: rgba(255, 149, 0, 0.15);
}

.note-actions {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    gap: 4px;
}

.note-actions button {
    background: var(--glass-tint);
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.note-edit {
    color: var(--primary-color);
}

.note-edit:hover {
    background: var(--glass-tint-strong);
}

.note-delete {
    color: var(--ios-red);
}

.note-delete:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
}

/* Pin button */
.note-pin {
    color: var(--text-tertiary);
}

.note-pin:hover {
    background: var(--glass-tint-strong);
    color: var(--primary-color);
}

.note-pin.active {
    color: var(--primary-color);
}

/* Pinned note styling */
.note-item.note-pinned {
    border-left: 3px solid var(--primary-color);
    background: linear-gradient(90deg, rgba(var(--primary-rgb), 0.08) 0%, transparent 100%);
}

/* Animation */
.note-item.new-note {
    animation: noteAdded 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
    overflow: hidden;
}

@keyframes noteAdded {
    0% {
        opacity: 0;
        transform: scale(0.8);
        box-shadow: inset 0 0 0 2px rgba(var(--primary-rgb), 0.4);
    }
    100% {
        opacity: 1;
        transform: scale(1);
        box-shadow: inset 0 0 0 0 rgba(var(--primary-rgb), 0);
    }
}

/* Legacy Notes Styles - keeping for compatibility */
.notes-input-section {
    margin-bottom: 20px;
}

.note-textarea {
    width: 100%;
    padding: 12px 15px;
    border: none;
    border-radius: 12px;
    background: var(--secondary-bg);
    color: var(--text-primary);
    font-size: 15px;
    font-family: inherit;
    resize: vertical;
    min-height: 80px;
    margin-bottom: 10px;
    box-sizing: border-box;
}

.note-textarea:focus {
    outline: none;
    box-shadow: 0 0 0 2px var(--accent-color);
}

.notes-list {
    max-height: 400px;
    overflow-y: auto;
}

.note-item {
    background: var(--secondary-bg);
    border-radius: 12px;
    padding: 12px 15px;
    margin-bottom: 10px;
    position: relative;
}

.note-content {
    color: var(--text-primary);
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    word-break: break-word;
    padding-right: 70px;
}

.note-date {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

.note-actions {
    position: absolute;
    top: 10px;
    right: 10px;
    display: flex;
    gap: 5px;
}

.note-actions button {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    border-radius: 8px;
    transition: all 0.2s;
}

.note-actions button:hover {
    background: rgba(var(--ios-red-rgb), 0.1);
    color: var(--ios-red);
}

.button-centered {
    display: flex;
    justify-content: center;
    margin-top: 20px;
}

.button-centered .ios-button {
    min-width: 200px;
}

.declaration-form {
    animation: fadeIn 0.3s ease;
}

/* Compact row layout for declaration forms */
.input-row-compact {
    display: flex;
    gap: 12px;
    width: 100%;
}

.input-row-compact .input-group-half {
    flex: 1;
    min-width: 0;
}

.input-row-compact .input-wrapper {
    width: 100%;
}

/* Make declaration form more compact */
.declaration-form .input-group {
    margin-bottom: 14px;
}

.declaration-form .input-row-compact {
    margin-bottom: 14px;
}

/* Apply compact layout to label-form as well */
.label-form .input-row-compact {
    margin-bottom: 14px;
}

.label-form .input-group {
    margin-bottom: 14px;
}

/* Unified input sizing for label form (remove large right padding meant for unit buttons) */
.label-form input[type="text"],
.label-form input[type="number"],
.label-form input[type="tel"],
.label-form input[type="date"],
.label-form select {
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 500;
    box-sizing: border-box;
}

/* Unified input height for declaration forms */
.declaration-form input[type="text"],
.declaration-form input[type="number"],
.declaration-form input[type="tel"],
.declaration-form input[type="date"],
.declaration-form select {
    height: 52px;
    padding: 14px 16px;
    font-size: 16px;
    font-weight: 500;
    border-radius: 14px;
    box-sizing: border-box;
}

/* Fix invoice number wrapper height in declaration form */
.declaration-form .invoice-number-wrapper {
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 0 16px;
    height: 52px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.declaration-form .invoice-number-wrapper .invoice-prefix,
.declaration-form .invoice-number-wrapper .dynamic-year {
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
}

.declaration-form .invoice-number-wrapper .invoice-number-input {
    width: 55px;
    height: 36px;
    padding: 6px 8px;
    font-size: 16px;
    font-weight: 600;
    border: 1px solid var(--glass-border);
    background: var(--bg-tertiary);
    border-radius: 8px;
}

/* Compact labels */
.declaration-form label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
    display: block;
}

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

/* ============================================================================
   MOBILE RESPONSIVENESS - CONSOLIDATED
   Organized by breakpoint for better maintainability
   ============================================================================ */

/* ===========================================
   GLOBAL MOBILE OPTIMIZATIONS
   =========================================== */

/* Safe area support for notched devices */
@supports (padding: max(0px)) {
    body {
        padding-left: max(12px, env(safe-area-inset-left));
        padding-right: max(12px, env(safe-area-inset-right));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        padding-top: max(12px, env(safe-area-inset-top));
    }
}

/* Smooth scrolling and touch optimization */
html {
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* ===========================================
   TOUCH DEVICE OPTIMIZATIONS
   =========================================== */
@media (hover: none) and (pointer: coarse) {
    /* Touch feedback */
    .seller-tile:not(.edit-mode):active,
    .public-tile:active,
    .numpad-btn:active,
    .ios-button:active,
    .preset-btn:active,
    .currency-btn:active {
        transform: scale(0.96);
        transition: transform 0.1s ease;
    }
    
    .glass-card:active {
        transform: scale(0.995);
    }
    
    /* Faster touch response */
    * {
        touch-action: manipulation;
    }
    
    /* MOBILE GPU OPTIMIZATION - NO BLUR for crisp tiles */
    .seller-tile,
    .public-tile {
        /* COMPLETELY DISABLE blur on mobile - causes blurriness */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Solid background instead */
        background: rgba(40, 42, 54, 0.95) !important;
        /* GPU acceleration hints */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Crisp text rendering */
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
    }
    
    body.light-mode .seller-tile,
    body.light-mode .public-tile {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    .glass-card {
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Header buttons - perfectly round on mobile */
    .panel-header-btn {
        border-radius: 50% !important;
    }
    
    /* Disable hover effects on touch */
    .seller-tile:not(.edit-mode):hover {
        box-shadow: var(--shadow-md);
    }
    
    /* Touch targets */
    .numpad-btn { min-height: 56px; }
    .ios-button { min-height: 50px; }
    
    button, .seller-tile, .numpad-btn, .ios-button, .preset-btn, .currency-btn, input, textarea, select {
        min-height: 44px;
        min-width: 44px;
    }
    
    /* Prevent callout */
    a, button, .seller-tile, .public-tile {
        -webkit-touch-callout: none;
    }
    
    /* Form inputs */
    input, textarea, select {
        font-size: 16px;
        padding: 12px;
        border-radius: 8px;
        border: 1px solid var(--border);
        background: var(--bg-secondary);
        color: var(--text-primary);
    }
    
    .delete-btn {
        padding: 10px 16px;
        min-height: 44px;
    }
}

/* ===========================================
   ACCESSIBILITY
   =========================================== */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    body::before,
    body::after {
        animation: none !important;
    }
    
    /* Disable backdrop-filter for reduced motion - better performance */
    .seller-tile,
    .glass-card,
    .public-tile {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Fallback for devices without backdrop-filter support */
@supports not (backdrop-filter: blur(1px)) {
    .seller-tile {
        background: rgba(30, 30, 35, 0.95) !important;
        border: 1px solid rgba(255, 255, 255, 0.15) !important;
    }
    
    body.light-mode .seller-tile {
        background: rgba(255, 255, 255, 0.95) !important;
        border: 1px solid rgba(0, 0, 0, 0.1) !important;
    }
    
    .glass-card {
        background: rgba(30, 30, 35, 0.98) !important;
    }
    
    body.light-mode .glass-card {
        background: rgba(255, 255, 255, 0.98) !important;
    }
}

@media (prefers-contrast: high) {
    .glass-card {
        border-width: 2px;
        -webkit-backdrop-filter: none;
        backdrop-filter: none;
        background: var(--bg-secondary);
    }
    
    .seller-tile {
        border-width: 2px;
        border-color: var(--text-primary);
    }
}

/* ===========================================
   PWA STANDALONE MODE
   =========================================== */
@media (display-mode: standalone) {
    body {
        padding-top: max(12px, env(safe-area-inset-top));
    }
    
    .header {
        padding-top: 4px;
    }
}

/* ===========================================
   DESKTOP (min-width: 769px)
   =========================================== */
@media (min-width: 769px) {
    /* Desktop: restore glass blur effect */
    .seller-tile {
        background: rgba(255, 255, 255, 0.03);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
    }
    
    .public-tile {
        background: var(--glass-bg);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    
    .keyboard-toggle {
        display: none;
    }

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

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

/* ===========================================
   TABLET (481px - 1024px)
   =========================================== */
@media (min-width: 481px) and (max-width: 1024px) {
    body {
        padding: 20px;
        padding-top: max(20px, env(safe-area-inset-top));
        padding-bottom: max(20px, env(safe-area-inset-bottom));
    }
    
    .container { max-width: 600px; }
    .container.inventory-expanded { max-width: 1100px; }
    
    .glass-card {
        border-radius: 28px;
        padding: 24px;
    }
    
    .seller-tiles {
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;
    }
    
    .seller-tile {
        padding: 16px 12px;
        min-height: 100px;
        border-radius: 18px;
    }
    
    .seller-tile-icon {
        font-size: 36px;
        margin-bottom: 8px;
    }
    
    .seller-tile-label { font-size: 14px; }
    h1 { font-size: 32px; }
    .seller-panel-title { font-size: 28px; }
    
    /* Form fields */
    .input-wrapper input[type="date"] {
        width: 100%;
        min-width: 0;
        max-width: 100%;
        font-size: 18px;
        padding: 14px 16px;
        box-sizing: border-box;
    }
    
    #declarations .input-group,
    #warranty .input-group,
    #declarations .input-wrapper,
    #warranty .input-wrapper {
        width: 100%;
        max-width: 100%;
    }
    
    .vat-fields-wrapper { width: 100%; }
    
    .vat-fields-row {
        display: flex;
        flex-direction: row;
        gap: 10px;
        width: 100%;
    }
    
    .country-select-full {
        min-width: 85px;
        max-width: 95px;
        flex-shrink: 0;
    }
    
    .vat-number-input-full {
        flex: 1;
        min-width: 0;
    }
    
    .invoice-number-wrapper {
        display: flex;
        flex-wrap: nowrap;
        gap: 10px;
        width: 100%;
    }
    
    .invoice-number-wrapper input {
        flex: 1;
        min-width: 0;
        max-width: 100px;
    }
}

/* ===========================================
   LARGE PHONES (410px - 480px)
   =========================================== */
@media (min-width: 410px) and (max-width: 480px) {
    .seller-tile-icon { font-size: 34px; }
    .seller-tile-label { font-size: 13px; }
}

/* ===========================================
   MOBILE (max-width: 480px)
   =========================================== */
@media (max-width: 480px) {
    /* Hide widgets on mobile - not needed */
    .info-widgets {
        display: none !important;
    }
    
    /* Notes - fix button overlap on mobile */
    .note-item {
        padding: 12px 14px 50px 14px; /* extra padding bottom for actions */
    }
    
    .note-content {
        padding-right: 0 !important; /* no right padding needed since actions at bottom */
    }
    
    .note-actions {
        position: absolute;
        top: auto !important;
        bottom: 10px !important;
        right: 10px;
        gap: 6px;
    }
    
    .note-actions button {
        padding: 6px 10px;
        font-size: 16px;
    }
    
    .note-meta {
        margin-top: 8px;
        padding-right: 90px; /* space for actions */
    }
    
    /* Base layout */
    body {
        padding: 10px;
        overscroll-behavior-y: contain;
    }
    
    .container { max-width: 100%; }
    .container.inventory-expanded,
    .container.admin-expanded { max-width: 100%; }
    
    /* Header */
    .header {
        position: sticky;
        top: 0;
        z-index: 100;
        padding: 8px 0 12px;
        margin: -12px -12px 16px -12px;
        padding-left: 12px;
        padding-right: 12px;
        background: linear-gradient(to bottom, var(--bg-primary) 80%, transparent);
        backdrop-filter: blur(8px);
        -webkit-backdrop-filter: blur(8px);
    }
    
    h1 {
        font-size: 22px;
        letter-spacing: -0.5px;
    }
    
    /* Glass cards */
    .glass-card {
        border-radius: 22px;
        padding: 16px;
        margin-bottom: 12px;
        box-shadow: 
            0 4px 24px rgba(0, 0, 0, 0.08),
            0 1px 2px rgba(0, 0, 0, 0.04);
    }
    
    /* Seller tiles */
    .seller-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }
    
    .seller-tile {
        padding: 12px 8px;
        border-radius: 14px;
        aspect-ratio: auto;
        min-height: 85px;
        /* MOBILE: NO BLUR - solid background for crisp rendering */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        /* Solid semi-transparent background */
        background: rgba(30, 35, 45, 0.92) !important;
        /* GPU layer promotion for smooth animations */
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        will-change: transform;
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
        /* Clear shadows */
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.25),
            0 1px 2px rgba(0, 0, 0, 0.15),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
        /* Crisp borders */
        border: 1px solid rgba(255, 255, 255, 0.1);
    }
    
    /* Light mode mobile tiles */
    body.light-mode .seller-tile {
        background: rgba(255, 255, 255, 0.92) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        border-color: rgba(0, 0, 0, 0.1);
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.08),
            0 1px 2px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.9);
    }
    
    /* Header buttons - round on mobile */
    .panel-header-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 50% !important;
    }
    
    /* DISABLED: Remove gradient overlay on mobile tiles */
    /* .seller-tile::after gradient removed */
    
    .seller-tile-icon {
        font-size: 32px;
        /* Crisp icon rendering */
        filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
        image-rendering: -webkit-optimize-contrast;
    }
    
    .seller-tile:active .seller-tile-icon {
        color: var(--primary-color-secondary);
    }
    
    .seller-tile-label {
        font-size: 12px;
        font-weight: 600;
        line-height: 1.2;
        text-align: center;
        word-break: break-word;
        hyphens: auto;
    }
    
    .seller-tile.edit-mode { animation-duration: 0.22s; }
    .seller-tile.drag-placeholder { border-width: 2px; }
    
    /* Seller panel header */
    .seller-panel-header { margin-bottom: 16px; }
    .seller-panel-title { font-size: 22px; }
    
    /* Public tiles */
    .public-tiles { gap: 10px; }
    
    .public-tile {
        padding: 10px 12px;
        border-radius: 14px;
    }
    
    .public-tile-icon { font-size: 20px; }
    .public-tile-label { font-size: 11px; }
    
    /* Postal code */
    .postal-city-row {
        flex-direction: column;
        gap: 12px;
    }
    
    .postal-digit {
        height: 46px !important;
        min-height: 46px !important;
        font-size: 18px !important;
        border-radius: 8px !important;
    }
    
    .postal-separator { font-size: 20px; }
    .postal-code-inputs { gap: 4px; }
    
    /* Result display */
    .result {
        padding: 14px;
        border-radius: 16px;
        position: relative;
        overflow: hidden;
    }
    
    .result::before {
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        right: 0;
        height: 1px;
        background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
        opacity: 0.5;
    }
    
    .result-value { font-size: 28px; }
    
    /* Numpad */
    .numpad {
        padding: 10px;
        gap: 8px;
        border-radius: 18px;
    }
    
    .numpad-btn {
        min-height: 54px;
        max-height: 62px;
        font-size: 22px;
        border-radius: 14px;
        font-weight: 500;
        box-shadow: 
            0 3px 8px rgba(0, 0, 0, 0.08),
            0 1px 2px rgba(0, 0, 0, 0.04),
            inset 0 1px 0 rgba(255, 255, 255, 0.4);
    }
    
    .numpad-btn:active {
        transform: scale(0.95);
        transition: transform 0.1s ease;
        box-shadow: inset 0 2px 6px rgba(0, 0, 0, 0.12);
    }
    
    .numpad-btn.action {
        box-shadow: 
            0 4px 16px var(--primary-glow),
            0 1px 2px rgba(0, 0, 0, 0.1),
            inset 0 1px 0 rgba(255, 255, 255, 0.2);
    }
    
    /* Buttons */
    .ios-button {
        padding: 14px 20px;
        font-size: 16px;
        border-radius: 12px;
        min-height: 50px;
    }
    
    /* Presets */
    .preset-btn {
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    
    /* Currency */
    .currency-btn {
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.06),
            inset 0 1px 0 rgba(255, 255, 255, 0.25);
    }
    
    /* Controls */
    .segmented-control {
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    .toggle-switch {
        box-shadow: 
            0 2px 8px rgba(0, 0, 0, 0.05),
            inset 0 1px 0 rgba(255, 255, 255, 0.3);
    }
    
    /* Modal */
    .modal-content {
        margin: 20px;
        border-radius: 20px;
        max-height: calc(100vh - 40px);
    }
    
    /* Settings */
    .settings-section { padding: 12px; }
    .theme-btn, .accent-btn { width: 44px; height: 44px; }
    
    /* Header buttons */
    .seller-login-btn {
        padding: 8px 12px;
        font-size: 12px;
        border-radius: 10px;
        height: 36px;
    }
    
    .header-back-btn.visible,
    .seller-logout-btn,
    .panel-header-btn {
        width: 38px;
        height: 38px;
        border-radius: 50%;
    }
    
    /* Settings button - round */
    .settings-btn {
        width: 38px;
        height: 38px;
        padding: 0;
        font-size: 18px;
        border-radius: 50%;
        background: rgba(60, 60, 70, 0.9);
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        border: 1px solid rgba(255, 255, 255, 0.12);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        display: flex;
        align-items: center;
        justify-content: center;
    }
    
    body.light-mode .settings-btn {
        background: rgba(255, 255, 255, 0.9);
        border-color: rgba(0, 0, 0, 0.1);
    }
    
    .seller-panel-header .settings-btn {
        position: absolute;
        right: 0;
        top: 50%;
        transform: translateY(-50%);
    }
    
    /* Label buttons */
    .label-generate-centered { gap: 6px; }
    
    .label-generate-centered .ios-button {
        min-width: 0;
        max-width: none;
        font-size: 14px;
        padding: 12px 16px;
    }
    
    /* Custom modal */
    .custom-modal {
        max-width: 95%;
        width: 95%;
        padding: 16px;
        max-height: 85vh;
        overflow-y: auto;
        margin: 10px;
    }
    
    .custom-modal-title { font-size: 18px; margin-bottom: 12px; }
    .custom-modal-message { font-size: 13px; margin-bottom: 16px; }
    .custom-modal-buttons { gap: 8px; }
    .custom-modal-btn { padding: 12px 16px; font-size: 15px; }
    
    /* Settings sections */
    .settings-section { margin-bottom: 16px; }
    .settings-section-title { font-size: 11px; margin-bottom: 8px; }
    .settings-option { padding: 12px; margin-bottom: 6px; }
    .settings-option-label { font-size: 14px; }
    
    /* Accent selector */
    .accent-selector { gap: 10px; }
    .accent-btn { width: 44px; height: 44px; }
    .theme-btn { width: 32px; height: 32px; }
    
    /* Employee list */
    .employee-management { max-height: 150px; overflow-y: auto; }
    .employee-item { padding: 10px 12px; font-size: 14px; }
    
    /* PIN tiles */
    .pin-tiles-container { gap: 8px; }
    .pin-tile {
        width: 48px;
        height: 56px;
        font-size: 24px;
        border-radius: 12px;
    }
    
    /* VAT fields */
    .vat-fields-wrapper {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }
    
    .vat-fields-row {
        display: flex;
        flex-direction: row;
        gap: 8px;
        align-items: center;
    }
    
    .country-select-full {
        width: auto !important;
        min-width: 70px !important;
        max-width: 80px !important;
        flex-shrink: 0;
        padding: 12px 10px;
        padding-right: 28px;
        font-size: 15px;
    }
    
    .vat-number-input-full {
        flex: 1 !important;
        width: auto !important;
        min-width: 0 !important;
        min-height: 48px;
        padding: 12px 14px;
        font-size: 17px !important;
        -webkit-text-fill-color: var(--text-primary) !important;
        color: var(--text-primary) !important;
        background: var(--bg-secondary) !important;
        border-radius: 12px;
        -webkit-appearance: none;
        appearance: none;
        text-align: left !important;
    }
    
    .dark-mode .vat-number-input-full {
        background: var(--bg-tertiary) !important;
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }
    
    .vat-number-input-full:focus {
        color: var(--text-primary) !important;
        -webkit-text-fill-color: var(--text-primary) !important;
        text-align: left !important;
    }
    
    .dark-mode .vat-number-input-full:focus {
        color: #FFFFFF !important;
        -webkit-text-fill-color: #FFFFFF !important;
    }
    
    .vat-validation-message { font-size: 12px; padding: 4px 0; }
    
    /* Invoice number */
    .invoice-number-wrapper {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        gap: 10px !important;
        align-items: center !important;
        justify-content: flex-start;
        width: 100%;
    }
    
    .invoice-prefix,
    .dynamic-year {
        font-size: 15px;
        flex-shrink: 0;
    }
    
    .invoice-number-input {
        width: 65px;
        min-width: 55px;
        max-width: 75px;
        flex: 0 0 65px;
        height: 44px;
        padding: 0 6px;
        font-size: 17px;
        text-align: center;
    }
    
    /* Input row compact */
    .input-row-compact {
        flex-direction: column;
        gap: 0;
    }
    
    .input-row-compact .input-group-half {
        width: 100%;
    }
}

/* Mobile dark mode enhancements */
@media (max-width: 480px) {
    body.dark-mode .glass-card {
        box-shadow: 
            0 4px 24px rgba(0, 0, 0, 0.4),
            0 1px 2px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.05);
    }
    
    body.dark-mode .seller-tile {
        box-shadow: 
            0 2px 12px rgba(0, 0, 0, 0.3),
            0 1px 3px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
    
    /* DISABLED: gradient removed for crisp mobile tiles */
    
    body.dark-mode .numpad-btn {
        box-shadow: 
            0 3px 8px rgba(0, 0, 0, 0.3),
            0 1px 2px rgba(0, 0, 0, 0.2),
            inset 0 1px 0 rgba(255, 255, 255, 0.08);
    }
}

/* Notch handling */
@supports (padding: max(0px)) {
    @media (max-width: 480px) {
        .header {
            padding-top: max(8px, env(safe-area-inset-top));
        }
    }
}

/* ===========================================
   MOBILE UI IMPROVEMENTS
   =========================================== */
@media (max-width: 480px) {
    /* Header card improvements */
    .header-card {
        margin: 14px 10px 18px 10px;
        padding: 10px 16px;
        height: 54px;
        border-radius: 22px;
    }
    
    .header-title {
        font-size: 17px;
    }
    
    .header-site-name {
        font-size: 17px;
    }
    
    /* Panel header buttons - perfectly round */
    .panel-header-btn {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: 50%;
    }
    
    .panel-header-btn svg {
        width: 16px;
        height: 16px;
    }
    
    /* Seller login button - rounded pill shape for logged out users */
    .seller-login-btn {
        padding: 0 14px;
        font-size: 12px;
        border-radius: 18px;
        height: 36px;
        gap: 6px;
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.08));
        border: 1px solid rgba(var(--primary-rgb), 0.3);
    }
    
    .seller-login-btn .seller-login-icon {
        width: 14px;
        height: 14px;
    }
    
    .seller-login-btn:hover,
    .seller-login-btn:active {
        background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25), rgba(var(--primary-rgb), 0.15));
        border-color: rgba(var(--primary-rgb), 0.5);
    }
    
    /* Seller panel header improvements */
    .seller-panel-header {
        margin: 14px 10px 20px 10px;
        padding: 10px 16px;
        height: 54px;
        border-radius: 22px;
    }
    
    .seller-panel-title {
        font-size: 17px;
    }
    
    /* Info widgets (date/time + weather) */
    .info-widgets {
        flex-direction: column;
        gap: 10px;
        margin: 0 10px 16px 10px;
    }
    
    .datetime-widget {
        padding: 12px 16px;
        border-radius: 16px;
    }
    
    .datetime-time {
        font-size: 22px;
    }
    
    .weather-widget {
        padding: 12px 14px;
        border-radius: 16px;
        gap: 12px;
    }
    
    .weather-icon {
        font-size: 28px;
    }
    
    .weather-temp {
        font-size: 20px;
    }
    
    .forecast-icon {
        font-size: 16px;
    }
    
    /* Public tiles for logged out users */
    .public-tiles {
        gap: 10px;
        padding: 0 10px;
        margin-bottom: 18px;
    }
    
    .public-tile {
        padding: 14px 12px;
        border-radius: 16px;
    }
    
    .public-tile-icon {
        font-size: 22px;
        margin-bottom: 6px;
    }
    
    .public-tile-icon svg {
        width: 26px;
        height: 26px;
    }
    
    .public-tile-label {
        font-size: 12px;
    }
    
    /* Badges improvements */
    .seller-tile-badges-top {
        top: 6px;
        gap: 3px;
    }
    
    .seller-tile-new,
    .seller-tile-overdue {
        padding: 2px 6px;
        font-size: 7px;
        border-radius: 6px;
        letter-spacing: 0.3px;
    }
    
    .seller-tile-count {
        top: 5px;
        right: 5px;
        width: 18px;
        height: 18px;
        padding: 0;
        font-size: 10px;
        border-radius: 50%;
    }
    
    .seller-tile-beta {
        top: 4px;
        padding: 2px 5px;
        font-size: 7px;
        border-radius: 6px;
    }
    
}

/* ===========================================
   SMALL PHONES (max-width: 380px)
   =========================================== */
@media (max-width: 380px) {
    body { padding: 8px; }
    
    .quick-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    /* Header further adjustments */
    .header-card {
        margin: 12px 8px 14px 8px;
        padding: 8px 12px;
        height: 50px;
        border-radius: 18px;
    }
    
    .header-title {
        font-size: 15px;
    }
    
    .seller-login-btn {
        padding: 0 10px;
        font-size: 11px;
        height: 34px;
        border-radius: 17px;
    }
    
    .panel-header-btn {
        width: 34px;
        height: 34px;
        min-width: 34px;
    }
    
    .seller-panel-header {
        margin: 12px 8px 16px 8px;
        padding: 8px 12px;
        height: 50px;
        border-radius: 18px;
    }
    
    .seller-panel-title {
        font-size: 15px;
    }
    
    /* Info widgets for small phones */
    .info-widgets {
        margin: 0 8px 14px 8px;
        gap: 8px;
    }
    
    .datetime-widget {
        padding: 10px 14px;
    }
    
    .datetime-time {
        font-size: 20px;
    }
    
    .weather-widget {
        padding: 10px 12px;
    }
    
    /* Public tiles for small phones */
    .public-tiles {
        padding: 0 8px;
        gap: 8px;
    }
    
    .public-tile {
        padding: 12px 10px;
        border-radius: 14px;
    }
    
    .public-tile-icon svg {
        width: 24px;
        height: 24px;
    }
    
    .public-tile-label {
        font-size: 11px;
    }
    
    /* Even smaller badges */
    .seller-tile-new,
    .seller-tile-overdue {
        padding: 2px 5px;
        font-size: 6px;
    }
    
    .seller-tile-count {
        width: 16px;
        height: 16px;
        font-size: 9px;
        border-radius: 50%;
    }

    .presets {
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .preset-btn {
        padding: 10px 6px;
        font-size: 12px;
    }
    
    .control-row {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .auto-round-toggle { width: 100%; }
    .ios-button { width: 100%; }

    .numpad {
        padding: 10px;
        gap: 7px;
    }

    .numpad-btn {
        min-height: 52px;
        max-height: 58px;
        font-size: 19px;
        border-radius: 12px;
    }

    .numpad-btn.action { font-size: 17px; }

    .currency-selector { gap: 6px; }
    .currency-btn { padding: 12px 8px; }
    .currency-flag { font-size: 28px; }
    .currency-code { font-size: 12px; }

    .round-option {
        padding: 10px 8px;
        font-size: 11px;
        min-height: 40px;
    }
    
    .seller-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .seller-tile {
        padding: 10px 6px;
        min-height: 78px;
        /* Small phones: NO blur for crisp tiles */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(30, 35, 45, 0.92) !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    body.light-mode .seller-tile {
        background: rgba(255, 255, 255, 0.92) !important;
    }
    
    .seller-tile-icon {
        font-size: 28px;
    }
    
    .seller-tile-label { font-size: 11px; }
    h1 { font-size: 18px; }
    .seller-panel-title { font-size: 16px; }
}

/* ===========================================
   TINY PHONES (max-width: 375px)
   =========================================== */
@media (max-width: 375px) {
    body {
        padding: 8px;
        padding-top: max(8px, env(safe-area-inset-top));
        padding-bottom: max(8px, env(safe-area-inset-bottom));
    }
    
    .glass-card {
        padding: 14px;
        border-radius: 18px;
        margin-bottom: 10px;
    }
    
    .seller-tiles { gap: 10px; }
    .personalization-modal-content { width: 98%; padding: 20px; }
    .seller-tile-label { font-size: 10px; }
    h1 { font-size: 18px; }
    .seller-panel-title { font-size: 14px; }
    
    .seller-tile {
        min-height: 72px;
        border-radius: 12px;
        padding: 10px 6px;
        /* Tiny phones: NO blur for crisp tiles */
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(30, 35, 45, 0.92) !important;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
    }
    
    body.light-mode .seller-tile {
        background: rgba(255, 255, 255, 0.92) !important;
    }
    
    .seller-tile-icon {
        font-size: 26px;
    }
    
    .numpad-btn {
        min-height: 46px;
        max-height: 52px;
        font-size: 18px;
        border-radius: 12px;
    }
    
    /* Header adjustments for tiny phones */
    .header-card {
        margin: 10px 6px 12px 6px;
        padding: 6px 10px;
        height: 46px;
        border-radius: 16px;
    }
    
    .header-title {
        font-size: 14px;
    }
    
    .seller-login-btn {
        padding: 0 8px;
        font-size: 10px;
        height: 32px;
        border-radius: 16px;
    }
    
    .panel-header-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        border-radius: 50%;
    }
    
    .panel-header-btn svg {
        width: 14px;
        height: 14px;
    }
    
    .seller-panel-header {
        margin: 10px 6px 14px 6px;
        padding: 6px 10px;
        height: 46px;
        border-radius: 16px;
    }
    
    /* Info widgets for tiny phones */
    .info-widgets {
        margin: 0 6px 12px 6px;
        gap: 6px;
    }
    
    .datetime-widget {
        padding: 8px 12px;
    }
    
    .datetime-time {
        font-size: 18px;
    }
    
    .datetime-day,
    .datetime-full {
        font-size: 10px;
    }
    
    /* Public tiles for tiny phones */
    .public-tiles {
        padding: 0 6px;
        gap: 6px;
    }
    
    .public-tile {
        padding: 10px 8px;
        border-radius: 12px;
    }
    
    .public-tile-icon svg {
        width: 22px;
        height: 22px;
    }
    
    .public-tile-label {
        font-size: 10px;
    }
}

/* ===========================================
   VERY SMALL PHONES (max-width: 340px)
   =========================================== */
@media (max-width: 340px) {
    body { padding: 6px; }

    .glass-card {
        padding: 12px;
        border-radius: 16px;
    }

    .numpad {
        padding: 8px;
        gap: 6px;
    }

    .numpad-btn {
        min-height: 48px;
        max-height: 54px;
        font-size: 18px;
        border-radius: 11px;
    }

    .numpad-btn.action { font-size: 16px; }
    h1 { font-size: 16px; }
    .preset-btn { padding: 9px 5px; font-size: 11px; }
    .currency-flag { font-size: 24px; }
    .currency-btn { padding: 10px 6px; }

    .round-option {
        padding: 8px 6px;
        font-size: 10px;
        min-height: 38px;
    }
    
    .seller-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    /* Header for very small phones */
    .header-card {
        margin: 8px 4px 10px 4px;
        height: 44px;
        border-radius: 14px;
    }
    
    .header-title {
        font-size: 13px;
    }
    
    .seller-login-btn {
        padding: 0 6px;
        font-size: 9px;
        height: 30px;
    }
    
    .panel-header-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
    }

    /* Public tiles for very small phones */
    .public-tiles {
        padding: 0 4px;
        gap: 5px;
    }
    
    .public-tile {
        padding: 8px 6px;
    }
    
    .public-tile-icon svg {
        width: 20px;
        height: 20px;
    }
    
    .public-tile-label {
        font-size: 9px;
    }
    
    .seller-tile {
        padding: 8px 5px;
        border-radius: 12px;
        min-height: 70px;
    }
    
    .seller-tile-icon {
        font-size: 24px;
    }
    
    .seller-tile-label {
        font-size: 10px;
        line-height: 1.1;
    }
    
    .seller-panel-header { margin-bottom: 8px; }
    .seller-panel-title { font-size: 14px; }
    .seller-login-btn { padding: 6px 10px; font-size: 11px; height: 32px; }
    
    /* Header for very small phones */
    .header-card {
        margin: 6px 4px 10px 4px;
        height: 44px;
        border-radius: 14px;
    }
    
    .header-title {
        font-size: 14px;
    }
    
    .panel-header-btn {
        width: 30px;
        height: 30px;
        min-width: 30px;
        border-radius: 50%;
    }
}

/* ===========================================
   HEIGHT-BASED QUERIES (Keyboard/Short screens)
   =========================================== */
@media (max-width: 480px) and (max-height: 700px) {
    .seller-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 10px;
    }
    
    .seller-tile-icon { font-size: 28px; }
    .seller-tile-label { font-size: 11px; }
    .seller-panel-header { margin-bottom: 10px; }
    .seller-panel-title { font-size: 18px; }
    .header { margin-bottom: 10px; }
}

@media (max-width: 480px) and (max-height: 600px) {
    body { padding: 8px; }
    
    .seller-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .seller-tile-icon { font-size: 26px; }
    .seller-tile-label { font-size: 10px; }
    .seller-panel-header { margin-bottom: 8px; }
    .seller-panel-title { font-size: 16px; }
    .header { margin-bottom: 8px; }
    h1 { font-size: 18px; }
}

@media (max-height: 700px) {
    body.keyboard-active .numpad { padding: 8px; gap: 5px; }
    body.keyboard-active .numpad-btn { min-height: 42px; max-height: 46px; font-size: 17px; }
    body.keyboard-active .glass-card { padding: 12px; }
    body.keyboard-active .result { padding: 10px; margin-bottom: 10px; }
}

@media (max-height: 650px) {
    body.keyboard-active .numpad { padding: 6px; gap: 4px; }
    body.keyboard-active .numpad-btn { min-height: 38px; max-height: 42px; font-size: 16px; }
    body.keyboard-active .result { padding: 8px; }
    body.keyboard-active .result-value { font-size: 22px; }
    body.keyboard-active .detail-row { padding: 4px 0; font-size: 10px; }
}

@media (max-height: 600px) {
    body.keyboard-active .numpad-btn { min-height: 36px; max-height: 40px; font-size: 15px; }
    body.keyboard-active .numpad { padding: 5px; gap: 3px; }
    body.keyboard-active .result { padding: 8px; }
    body.keyboard-active .glass-card { padding: 10px; }
    body.keyboard-active .result-value { font-size: 20px; }
}

/* ===========================================
   LANDSCAPE ORIENTATION
   =========================================== */
@media (max-height: 500px) and (orientation: landscape) {
    .seller-tiles {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }
    
    .seller-tile {
        padding: 8px 6px;
        aspect-ratio: unset;
        min-height: 65px;
    }
    
    .seller-tile-icon {
        font-size: 26px;
        margin-bottom: 3px;
    }
    
    .seller-tile-label { font-size: 10px; }
    .header { margin-bottom: 6px; }
    h1 { font-size: 16px; }
    .seller-panel-header { margin-bottom: 6px; }
    .seller-panel-title { font-size: 14px; }
}

/* ==========================================
   ALLEGRO REMOVED MODAL
   ========================================== */
.allegro-removed-modal {
    max-width: 340px !important;
}

.allegro-modal-desc {
    text-align: center;
    color: var(--text-secondary);
    margin-bottom: 16px;
    font-size: 14px;
}

.allegro-choice-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.allegro-choice-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 18px 16px;
    background: var(--bg-secondary);
    border: 2px solid var(--glass-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.allegro-choice-btn:hover {
    transform: translateY(-2px);
}

.allegro-choice-btn.yes:hover {
    border-color: var(--ios-green);
    background: rgba(var(--ios-green-rgb), 0.1);
}

.allegro-choice-btn.no:hover {
    border-color: var(--ios-red);
    background: rgba(var(--ios-red-rgb), 0.1);
}

.allegro-choice-btn .choice-icon {
    font-size: 28px;
    margin-bottom: 8px;
}

.allegro-choice-btn .choice-label {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 4px;
}

.allegro-choice-btn .choice-desc {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ==========================================
   DANGER CONFIRMATION MODAL
   ========================================== */
.danger-modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
}

.danger-modal-overlay.active {
    opacity: 1;
}

.danger-modal {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    width: 100%;
    max-width: 360px;
    transform: scale(0.9) translateY(20px);
    transition: transform 0.2s ease;
    overflow: hidden;
}

.danger-modal-overlay.active .danger-modal {
    transform: scale(1) translateY(0);
}

.danger-modal-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 24px 20px 16px;
    text-align: center;
}

.danger-modal-header .danger-modal-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    animation: dangerPulse 1.5s ease-in-out infinite;
}

.danger-modal-header .danger-modal-icon svg {
    width: 48px;
    height: 48px;
    color: #ff6b6b;
}

@keyframes dangerPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.danger-modal-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.danger-modal-body {
    padding: 0 24px 20px;
    text-align: center;
}

.danger-modal-body p {
    color: var(--text-secondary);
    font-size: 14px;
    line-height: 1.5;
    margin: 0;
}

.pin-input-modal {
    width: 100%;
    margin-top: 16px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 600;
    text-align: center;
    letter-spacing: 4px;
    transition: all 0.2s ease;
}

.pin-input-modal:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.pin-error-modal {
    margin-top: 10px;
    color: var(--ios-red);
    font-size: 13px;
    font-weight: 500;
}

.danger-modal-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--glass-border);
}

.danger-modal-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.danger-modal-btn.cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
}

.danger-modal-btn.cancel:hover {
    background: var(--bg-tertiary);
}

.danger-modal-btn.confirm {
    background: var(--ios-red);
    color: white;
}

.danger-modal-btn.confirm:hover {
    background: #ff2d20;
    transform: translateY(-1px);
}

/* ==========================================
   EDIT RESERVATION MODAL - Modern Style
   ========================================== */
.edit-reservation-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-overlay);
    opacity: 0;
    transition: opacity 0.2s ease;
    padding: 20px;
}

.edit-reservation-overlay.active {
    opacity: 1;
}

.edit-reservation-modal {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border-radius: 20px;
    border: 1px solid var(--glass-border);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    transform: scale(0.95) translateY(20px);
    transition: transform 0.2s ease;
}

.edit-reservation-overlay.active .edit-reservation-modal {
    transform: scale(1) translateY(0);
}

.edit-reservation-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid var(--glass-border);
}

.edit-reservation-header .edit-reservation-icon {
    font-size: 24px;
}

.edit-reservation-header h3 {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.edit-reservation-body {
    padding: 16px 20px;
}

.edit-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 12px;
}

.edit-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.edit-form-field.full-width {
    margin-bottom: 12px;
}

.edit-form-field label {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-secondary);
}

.edit-form-field input,
.edit-form-field select,
.edit-form-field textarea {
    padding: 12px 14px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.2s ease;
    width: 100%;
}

.edit-form-field input:focus,
.edit-form-field select:focus,
.edit-form-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.edit-form-field input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12) !important;
}

.edit-form-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    font-size: 16px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.edit-form-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

body.light-mode .edit-form-field input[type="date"] {
    color-scheme: light;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .edit-form-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 1;
}

body.light-mode .edit-form-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

.edit-form-field textarea {
    resize: vertical;
    min-height: 60px;
}

.edit-form-toggle {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px;
    margin-bottom: 12px;
}

.edit-form-toggle .toggle-question {
    display: block;
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 10px;
}

.edit-form-toggle .toggle-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.edit-form-toggle .toggle-btn {
    padding: 10px 14px;
    background: var(--glass-bg);
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
}

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

.edit-form-toggle .toggle-btn.active {
    background: var(--glass-tint);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.edit-form-error {
    color: var(--ios-red);
    font-size: 13px;
    text-align: center;
    padding: 8px;
    display: none;
}

.edit-form-error.show {
    display: block;
}

.edit-reservation-footer {
    display: flex;
    gap: 10px;
    padding: 16px 20px 20px;
    border-top: 1px solid var(--glass-border);
}

.edit-reservation-footer .edit-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.edit-reservation-footer .edit-btn.cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
    border: 1px solid var(--glass-border);
}

.edit-reservation-footer .edit-btn.cancel:hover {
    background: var(--bg-tertiary);
}

.edit-reservation-footer .edit-btn.save {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.edit-reservation-footer .edit-btn.save:hover {
    background: rgba(var(--primary-rgb), 0.25);
    transform: translateY(-1px);
}

@media (max-width: 480px) {
    .edit-reservation-modal {
        max-width: 100%;
        margin: 10px;
    }
    
    .edit-form-grid {
        grid-template-columns: 1fr;
    }
}

/* ==========================================
   RESERVATIONS - Redesigned Panel
   ========================================== */

/* Stats Grid */
.reservation-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.reservation-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: border-color 0.2s ease;
}

.reservation-stat-card:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
}

.reservation-stat-card.overdue-stat {
    border-color: rgba(255, 149, 0, 0.3);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.08), rgba(255, 204, 0, 0.05));
}

.reservation-stat-card.overdue-stat:hover {
    border-color: #FF9500;
}

.reservation-stat-card.overdue-stat .reservation-stat-value {
    color: #FF9500;
}

.reservation-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.reservation-stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 2px;
}

/* Search Box */
.reservation-search-box {
    position: relative;
    margin-bottom: 16px;
}

.reservation-search-box .search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 16px;
    line-height: 1;
    opacity: 0.6;
    pointer-events: none;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reservation-search-box .search-icon svg {
    width: 18px;
    height: 18px;
}

.reservation-search-box input {
    width: 100%;
    padding: 12px 16px 12px 44px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    transition: all 0.3s ease;
}

.reservation-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

/* Quick Form */
.reservation-quick-form {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px;
}

/* Reservation Type Toggle (Odbiór/Wysyłka) */
.reservation-type-toggle {
    display: flex;
    position: relative;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    padding: 3px;
    height: 46px;
    box-sizing: border-box;
    width: 100%;
}

.edit-form-field .reservation-type-toggle {
    background: var(--bg-secondary);
}

.res-type-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    border-radius: 8px;
    white-space: nowrap;
    padding: 0 6px;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    min-width: 0;
    overflow: hidden;
}

.res-type-btn svg {
    opacity: 0.6;
    transition: opacity 0.3s ease;
    flex-shrink: 0;
}

.res-type-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}

.res-type-btn.active svg {
    opacity: 1;
}

.res-type-btn:not(.active):hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-secondary);
}

.res-type-btn:not(.active):hover svg {
    opacity: 0.8;
}

body.light-mode .res-type-btn:not(.active):hover {
    background: rgba(0, 0, 0, 0.04);
}

.res-type-btn.bounce {
    animation: segmentedBounce 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.quick-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    margin-bottom: 10px;
}

.quick-form-row.single {
    grid-template-columns: 1fr;
}

.quick-form-field.full {
    grid-column: 1 / -1;
}

.quick-form-field input {
    width: 100%;
    padding: 12px 14px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
    height: 46px;
    box-sizing: border-box;
}

.quick-form-field input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
    background: rgba(255, 255, 255, 0.12) !important;
    height: 46px !important;
    min-height: 46px;
    max-height: 46px;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.quick-form-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(1);
    cursor: pointer;
    font-size: 16px;
    opacity: 1;
    transition: opacity 0.2s ease;
}

.quick-form-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

body.light-mode .quick-form-field input[type="date"] {
    color-scheme: light;
    background: rgba(0, 0, 0, 0.05) !important;
}

body.light-mode .quick-form-field input[type="date"]::-webkit-calendar-picker-indicator {
    filter: none;
    opacity: 1;
}

body.light-mode .quick-form-field input[type="date"]::-webkit-calendar-picker-indicator:hover {
    opacity: 0.7;
}

.quick-form-field input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.quick-form-field input::placeholder {
    color: var(--text-tertiary);
}

.reservation-add-btn {
    width: 100%;
    margin-top: 4px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

/* List Header */
.reservation-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
}

.history-count {
    background: linear-gradient(135deg, rgba(142, 142, 147, 0.3), rgba(142, 142, 147, 0.2));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-secondary);
    border-radius: 10px;
    padding: 4px 10px;
    font-size: 12px;
    font-weight: 600;
    border: 1px solid rgba(142, 142, 147, 0.2);
}

/* Reservations List */
.reservations-list {
    max-height: 500px;
    overflow-y: auto;
    overflow-x: visible;
    padding: 4px;
    margin: -4px;
}

/* Reservations History List */
.reservations-history-list {
    max-height: 400px;
    overflow-y: auto;
}

.history-item {
    background: var(--bg-tertiary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 14px;
    margin-bottom: 8px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    opacity: 0.8;
    transition: all 0.3s ease;
}

.history-item:last-child {
    margin-bottom: 0;
}

.history-item:hover {
    opacity: 1;
    border-color: rgba(var(--ios-red-rgb), 0.3);
}

.history-item .reservation-part {
    text-decoration: line-through;
    color: var(--text-secondary);
}

.history-item .reservation-info {
    flex: 1;
}

.history-item .history-completed-date {
    color: var(--ios-green);
    background: rgba(var(--ios-green-rgb), 0.15);
}

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

.history-undo-btn {
    background: linear-gradient(135deg, rgba(var(--ios-green-rgb), 0.15), rgba(var(--ios-green-rgb), 0.1));
    border: 1px solid rgba(var(--ios-green-rgb), 0.3);
    color: var(--ios-green);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-undo-btn:hover {
    background: linear-gradient(135deg, rgba(var(--ios-green-rgb), 0.25), rgba(var(--ios-green-rgb), 0.2));
    transform: scale(1.05);
}

.history-delete-btn {
    background: linear-gradient(135deg, rgba(var(--ios-red-rgb), 0.15), rgba(var(--ios-red-rgb), 0.1));
    border: 1px solid rgba(var(--ios-red-rgb), 0.3);
    color: var(--ios-red);
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.history-delete-btn:hover {
    background: linear-gradient(135deg, rgba(var(--ios-red-rgb), 0.25), rgba(var(--ios-red-rgb), 0.2));
    transform: scale(1.05);
}

.reservation-item {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.reservation-item:last-child {
    margin-bottom: 0;
}

.reservation-item:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.reservation-item.completed {
    opacity: 0.6;
    background: var(--bg-tertiary);
}

.reservation-item.completed .reservation-part {
    text-decoration: line-through;
}

.reservation-item.overdue {
    border-color: rgba(255, 149, 0, 0.5);
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.08), transparent);
}

.reservation-item.overdue:hover {
    border-color: rgba(255, 149, 0, 0.3);
    box-shadow: 0 2px 8px rgba(255, 149, 0, 0.08);
}

.reservation-overdue-badge {
    background: linear-gradient(135deg, #FF9500, #FFCC00);
    color: #000;
}

.reservation-due-date {
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
}

.reservation-due-date.overdue {
    color: #FF9500;
    background: rgba(255, 149, 0, 0.15);
    font-weight: 600;
}

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

.reservation-part {
    font-weight: 600;
    font-size: 15px;
    color: var(--text-primary);
    margin-bottom: 4px;
    word-break: break-word;
}

.reservation-client {
    font-size: 13px;
    color: var(--text-secondary);
    margin-bottom: 6px;
    word-break: break-word;
}

.reservation-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    align-items: center;
}

/* Common badge styles for reservation meta tags */
.reservation-meta > span {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    padding: 4px 10px;
    border-radius: 8px;
    font-weight: 500;
    line-height: 1;
    white-space: nowrap;
}

.reservation-meta > span svg {
    flex-shrink: 0;
    vertical-align: middle;
}

.reservation-employee {
    color: var(--primary-color);
    background: var(--glass-tint);
}

.reservation-date {
    color: var(--text-tertiary);
    background: var(--bg-tertiary);
}

.reservation-note-badge {
    color: var(--ios-orange);
    background: rgba(255, 149, 0, 0.15);
    cursor: pointer;
}

.reservation-allegro-badge {
    color: #ff5722;
    background: rgba(255, 87, 34, 0.15);
    cursor: pointer;
    transition: all 0.2s ease;
}

.reservation-allegro-badge:hover {
    background: rgba(255, 87, 34, 0.25);
}

.reservation-removed-badge {
    color: var(--ios-green);
    background: rgba(var(--ios-green-rgb), 0.15);
}

.reservation-not-removed-badge {
    color: var(--ios-orange);
    background: rgba(255, 149, 0, 0.15);
}

.reservation-actions {
    display: flex;
    gap: 4px;
    flex-shrink: 0;
}

.reservation-actions button {
    background: var(--glass-tint);
    border: none;
    padding: 8px 10px;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.reservation-complete {
    color: var(--ios-green);
}

.reservation-complete:hover {
    background: rgba(var(--ios-green-rgb), 0.2);
}

.reservation-edit {
    color: var(--primary-color);
}

.reservation-edit:hover {
    background: var(--glass-tint-strong);
}

.reservation-delete {
    color: var(--ios-red);
}

.reservation-delete:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
}

.reservation-call {
    color: var(--ios-green);
}

.reservation-call:hover {
    background: rgba(var(--ios-green-rgb), 0.2);
}

/* Animation */
.reservation-item.new-reservation {
    animation: reservationAdded 0.4s cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

@keyframes reservationAdded {
    0% { 
        opacity: 0;
        transform: scale(0.95);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

/* Mobile */
@media (max-width: 480px) {
    .quick-form-row {
        grid-template-columns: 1fr;
    }
    
    .reservation-stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: 6px;
    }
    
    .reservation-stat-value {
        font-size: 20px;
    }
}

/* Personalization Modal Styles */
.personalization-modal-content {
    max-width: 500px;
    max-height: 80vh;
    overflow: hidden; /* No scrolling */
    display: flex;
    flex-direction: column;
}

.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.custom-modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.modal-close-btn {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.modal-close-btn:hover {
    background: var(--bg-hover);
}

#personalizationTabs {
    margin-bottom: 20px;
}

#personalizationTabs .segmented-btn {
    flex: 1;
    font-size: 14px;
    padding: 10px;
}

.personalization-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Tab Content */
.tab-content-appearance,
.tab-content-employees,
.tab-content-couriers,
.tab-content-layout {
    display: none;
    flex: 1;
    animation: fadeIn 0.3s ease;
}

.tab-content-appearance.active,
.tab-content-employees.active,
.tab-content-couriers.active,
.tab-content-layout.active {
    display: flex;
    flex-direction: column;
}

/* Appearance Tab */
.appearance-section {
    margin-bottom: 20px;
}

.appearance-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

/* Theme/Accent selectors — consolidated at line ~12402 */

/* Employees/Couriers Tab */
.employee-list,
.courier-list {
    flex: 1;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 12px;
    margin-bottom: 20px;
}

.employee-item,
.courier-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.employee-info,
.courier-info {
    display: flex;
    align-items: center;
    gap: 8px;
}

.employee-icon,
.courier-icon {
    font-size: 20px;
}

.employee-name,
.courier-name {
    font-size: 14px;
    color: var(--text-primary);
}

.employee-actions,
.courier-actions {
    display: flex;
    gap: 8px;
}

.action-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.action-btn:hover {
    background: var(--bg-hover);
}

.add-btn {
    padding: 12px 16px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: center;
}

.add-btn:hover {
    background: rgba(var(--primary-rgb), 0.25);
    transform: scale(1.05);
}

/* Layout Tab */
.layout-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.edit-layout-btn {
    padding: 16px 24px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-layout-btn:hover {
    background: rgba(var(--primary-rgb), 0.25);
    transform: scale(1.05);
}

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

/* ====== REDESIGNED SETTINGS PANEL ====== */
.settings-panel {
    width: min(420px, 90vw);
    height: min(620px, 85vh);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 var(--glass-border);
    transform: scale(0.9);
    opacity: 0;
    transition: transform 0.3s ease, opacity 0.3s ease;
}

.custom-modal-overlay.active .settings-panel {
    transform: scale(1);
    opacity: 1;
    animation: modalBounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.settings-header {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 20px 24px 16px;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
}

.settings-header h2 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.3px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.settings-close-btn {
    position: absolute;
    right: 24px;
    top: 50%;
    transform: translateY(-50%);
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.settings-close-btn svg {
    width: 14px;
    height: 14px;
}

.settings-close-btn:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-red);
}

.settings-tabs {
    display: flex;
    gap: 4px;
    padding: 12px 16px;
    background: var(--bg-tertiary);
}

.settings-tab {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 10px 8px;
    border: none;
    border-radius: 12px;
    background: transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.settings-tab:hover {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.settings-tab.active {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
}

.settings-tab .tab-icon {
    font-size: 20px;
}

.settings-tab .tab-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.2px;
}

.settings-content {
    flex: 1;
    overflow-y: auto;
    padding: 16px 20px;
    min-height: 0;
}

/* Settings Sections */
.settings-section {
    margin-bottom: 24px;
}

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

.settings-section-title {
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 12px;
}

/* Theme Picker */
.theme-picker {
    display: flex;
    gap: 8px;
}

.theme-option {
    flex: 1;
    padding: 12px 8px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--bg-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.theme-option:hover {
    background: var(--bg-tertiary);
    border-color: var(--primary-color);
}

.theme-option.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
}

.theme-option-icon {
    font-size: 24px;
    display: block;
    margin-bottom: 6px;
}

.theme-option-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Accent Color Picker */
.accent-picker {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.accent-option {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 3px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.accent-option:hover {
    transform: scale(1.1);
}

.accent-option.active {
    border-color: var(--text-primary);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.3);
}

.accent-option.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.accent-option.blue { background: linear-gradient(135deg, #007AFF, #5856D6); }
.accent-option.pink { background: linear-gradient(135deg, #FF2D55, #FF6482); }
.accent-option.green { background: linear-gradient(135deg, #34C759, #30D158); }
.accent-option.orange { background: linear-gradient(135deg, #FF9500, #FF5E3A); }
.accent-option.red { background: linear-gradient(135deg, #FF3B30, #FF6B6B); }

/* Action Button */
.settings-action-btn {
    width: 100%;
    padding: 14px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.settings-action-btn:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
}

/* ====== COMPACT APPEARANCE TAB ====== */
.appearance-compact {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.appearance-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
}

.appearance-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Settings Toggle Switch (iOS style) */
.appearance-row .toggle-switch {
    position: relative;
    width: 51px;
    height: 31px;
    display: inline-block;
    margin: 0;
    padding: 0;
    background: transparent;
    border: none;
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
    border-radius: 0;
}

.appearance-row .toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
    position: absolute;
}

.appearance-row .toggle-slider {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    background: rgba(120, 120, 128, 0.32);
    transition: all 0.3s ease;
    border-radius: 31px;
}

.appearance-row .toggle-slider:before {
    position: absolute;
    content: "";
    height: 27px;
    width: 27px;
    left: 2px;
    top: 2px;
    background: white;
    transition: all 0.3s ease;
    border-radius: 50%;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.15);
}

.appearance-row .toggle-switch input:checked + .toggle-slider {
    background: var(--ios-green);
}

.appearance-row .toggle-switch input:checked + .toggle-slider:before {
    transform: translateX(20px);
}

.theme-picker-inline {
    display: flex;
    gap: 6px;
}

.theme-btn-compact {
    width: 40px;
    height: 40px;
    border: 2px solid transparent;
    border-radius: 10px;
    background: var(--bg-secondary);
    font-size: 18px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
}

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

.theme-btn-compact:hover {
    background: var(--bg-tertiary);
    transform: scale(1.05);
}

.theme-btn-compact.active {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary-color);
}

.accent-picker-inline {
    display: flex;
    gap: 8px;
}

.accent-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

.accent-dot:hover {
    transform: scale(1.15);
}

.accent-dot.active {
    box-shadow: 0 0 0 2px var(--bg-primary), 0 0 0 4px var(--text-primary);
}

.accent-dot.active::after {
    content: '✓';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 12px;
    font-weight: bold;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}

.accent-dot.blue { background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%); }
.accent-dot.pink { background: linear-gradient(135deg, #FF2D55 0%, #FF6B9D 100%); }
.accent-dot.green { background: linear-gradient(135deg, #34C759 0%, #FFD700 100%); }
.accent-dot.orange { background: linear-gradient(135deg, #FFD200 0%, #FF8C00 50%, #FF3B3B 100%); }
.accent-dot.red { background: linear-gradient(135deg, #FF3B30 0%, #FF6B6B 100%); }
.accent-dot.fitness { 
    background: conic-gradient(from 0deg, #FF2D55 0%, #FF2D55 33%, #30D158 33%, #30D158 66%, #00D4FF 66%, #00D4FF 100%);
    border: none;
    box-shadow: 0 0 8px rgba(255, 45, 85, 0.4);
}

/* Background Picker */
.background-picker-inline {
    display: flex;
    gap: 8px;
}

.bg-btn {
    width: 40px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255, 255, 255, 0.15);
    background: rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
}

.bg-btn:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    color: var(--text-primary);
}

.bg-btn.active {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

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

/* Light mode background picker */
.light-mode .bg-btn {
    border: 1px solid rgba(0, 0, 0, 0.15);
    background: rgba(0, 0, 0, 0.05);
}

.light-mode .bg-btn:hover {
    background: rgba(0, 0, 0, 0.1);
    border-color: rgba(0, 0, 0, 0.25);
}

.settings-buttons-row {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}

.settings-buttons-row .settings-action-btn.compact {
    flex: 1;
    margin-top: 0;
}

.settings-action-btn.compact {
    margin-top: 8px;
    padding: 12px;
}

/* People List (Employees/Couriers) */
.people-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 12px;
}

.person-card {
    min-height: 95px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 12px 8px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    position: relative;
    transition: all 0.2s ease;
}

.person-card:hover {
    background: var(--bg-tertiary);
}

.person-icon {
    font-size: 26px;
    margin-bottom: 4px;
}

.person-name {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-primary);
    text-align: center;
    width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
    line-height: 1.3;
}

.person-delete {
    position: absolute;
    top: 4px;
    right: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(var(--ios-red-rgb), 0.2);
    border: none;
    color: var(--ios-red);
    font-size: 14px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}

.person-card:hover .person-delete,
.person-card:hover .person-edit {
    opacity: 1;
}

.person-delete:hover {
    background: var(--ios-red);
    color: white;
}

.person-edit {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: rgba(var(--primary-rgb), 0.2);
    border: none;
    color: var(--primary-color);
    font-size: 12px;
    cursor: pointer;
    opacity: 0;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}

.person-edit:hover {
    background: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
}

.add-person-btn {
    width: 100%;
    padding: 12px;
    border: 1px dashed rgba(var(--primary-rgb), 0.4);
    border-radius: 12px;
    background: transparent;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
}

.add-person-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-style: solid;
}

/* Keep old modal styles for compatibility */
.personalization-modal-content {
    width: min(500px, 95vw);
    height: auto;
    max-height: 95vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 20px;
    padding: 24px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.custom-modal-overlay.active .personalization-modal-content {
    transform: scale(1);
    animation: modalBounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}


.custom-modal-overlay#personalizationModal {
    z-index: var(--z-overlay);
}

/* Confirm/Input modal should appear above settings panel */
.custom-modal-overlay#confirmModal {
    z-index: var(--z-toast);
}

.custom-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
}

.custom-modal-header h2 {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
}

.modal-close-btn {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background 0.2s ease;
}

.modal-close-btn:hover {
    background: var(--bg-hover);
}

.personalization-modal-content .segmented-control {
    margin-bottom: 20px;
}

.personalization-modal-content .segmented-btn {
    flex: 1;
    font-size: 14px;
    padding: 10px;
    min-width: 0;
}

.personalization-modal-content .segmented-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
}

.personalization-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Tab Content */
.tab-content-appearance,
.tab-content-employees,
.tab-content-couriers,
.tab-content-layout {
    display: none;
    flex: 1;
    flex-direction: column;
    animation: fadeIn 0.3s ease;
    overflow: hidden;
}

.tab-content-appearance.active,
.tab-content-employees.active,
.tab-content-couriers.active,
.tab-content-layout.active {
    display: flex;
}

/* Appearance Tab */
.appearance-section {
    margin-bottom: 20px;
}

.appearance-section h3 {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 12px;
}

.theme-selector {
    display: flex;
    gap: 8px;
    justify-content: center;
    flex-wrap: wrap;
}

.theme-btn {
    padding: 12px 16px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    flex: 1;
    min-width: 80px;
    text-align: center;
}

.theme-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}

.accent-selector {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}

.accent-btn {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: all 0.2s ease;
}

.accent-btn.active {
    border-color: var(--text-primary);
    transform: scale(1.1);
}

.accent-btn.blue { background: #007AFF; }
.accent-btn.pink { background: #FF2D55; }
.accent-btn.green { background: #34C759; }
.accent-btn.orange { background: #FF9500; }
.accent-btn.red { background: var(--ios-red); }

/* Employees/Couriers Tab */
.employee-list,
.courier-list {
    display: grid;
    grid-template-columns: repeat(3, 120px);
    gap: 12px;
    justify-content: center;
    max-width: 400px;
    margin: 0 auto 20px auto;
    overflow-y: auto;
    max-height: 300px;
}

.employee-item,
.courier-item {
    width: 120px;
    height: 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    position: relative;
}

.employee-info,
.courier-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    flex: 1;
    min-width: 0;
}

.employee-icon,
.courier-icon {
    font-size: 32px;
    flex-shrink: 0;
}

.employee-name,
.courier-name {
    font-size: 14px;
    color: var(--text-primary);
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.employee-actions,
.courier-actions {
    position: static;
    display: flex;
    justify-content: center;
    margin-top: auto;
    flex-shrink: 0;
}

.action-btn {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    transition: background 0.2s ease;
}

.action-btn:hover {
    background: var(--bg-hover);
}

.add-btn {
    padding: 12px 16px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    align-self: center;
    margin-top: auto;
}

.add-btn:hover {
    background: rgba(var(--primary-rgb), 0.25);
    transform: scale(1.05);
}

/* Layout Tab */
.layout-section {
    display: flex;
    justify-content: center;
    align-items: center;
    flex: 1;
}

.edit-layout-btn {
    padding: 16px 24px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    font-size: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-layout-btn:hover {
    background: rgba(var(--primary-rgb), 0.25);
    transform: scale(1.05);
}

/* Mobile adjustments */
@media (max-width: 600px) {
    .personalization-modal-content {
        width: 95%;
        height: auto;
        max-height: 60vh;
        padding: 16px;
    }

    .custom-modal-header h2 {
        font-size: 20px;
    }

    .personalization-modal-content .segmented-btn {
        font-size: 12px;
        padding: 8px;
    }

    .employee-list,
    .courier-list {
        grid-template-columns: repeat(2, 100px);
        max-width: 100%;
        max-height: 250px;
    }

    .employee-item,
    .courier-item {
        width: 100px;
        height: 100px;
    }

    .theme-selector {
        flex-direction: column;
        gap: 12px;
    }

    .theme-btn {
        min-width: auto;
    }

    .accent-selector {
        gap: 6px;
        justify-content: space-around;
    }

    .accent-btn {
        width: 32px;
        height: 32px;
    }

    .edit-layout-btn {
        padding: 12px 16px;
        font-size: 14px;
    }
}

@media (max-width: 400px) {
    .personalization-modal-content {
        width: 98%;
        padding: 12px;
        max-height: 70vh;
    }

    .custom-modal-header h2 {
        font-size: 18px;
    }

    .personalization-modal-content .segmented-control {
        flex-direction: column;
        gap: 4px;
    }

    .personalization-modal-content .segmented-btn {
        font-size: 14px;
        padding: 12px;
        flex: none;
    }

    .employee-list,
    .courier-list {
        grid-template-columns: repeat(1, 100px);
        justify-content: center;
    }

    .theme-selector {
        flex-direction: row;
        flex-wrap: wrap;
        gap: 8px;
    }

    .theme-btn {
        flex: 1;
        min-width: 80px;
    }

    .accent-selector {
        gap: 8px;
    }

    .appearance-section h3 {
        font-size: 16px;
        margin-bottom: 12px;
    }
}

/* Mobile fullscreen redesign */
@media (max-width: 600px) {
    #personalizationModal .custom-modal-overlay {
        background: var(--bg-primary);
        display: block;
    }

    #personalizationModal.active .custom-modal-overlay {
        opacity: 1;
    }

    .personalization-modal-content {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        max-width: none;
        max-height: none;
        border-radius: 0;
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    #personalizationModal.active .personalization-modal-content {
        transform: translateY(0);
    }

    .custom-modal-header {
        padding: 16px;
        border-bottom: 1px solid var(--border);
        background: var(--bg-primary);
        position: sticky;
        top: 0;
        z-index: 10;
    }

    .personalization-modal-content .segmented-control {
        padding: 16px;
        margin-bottom: 0;
        background: var(--bg-secondary);
        border-bottom: 1px solid var(--border);
        position: sticky;
        top: 73px; /* header height + padding */
        z-index: 9;
    }

    .personalization-content {
        padding: 16px;
        overflow-y: auto;
        flex: 1;
        background: var(--bg-primary);
    }

    .appearance-section {
        margin-bottom: 24px;
    }

    .appearance-section h3 {
        font-size: 18px;
        margin-bottom: 16px;
        color: var(--text-primary);
    }

    .theme-selector {
        display: flex;
        flex-direction: column;
        gap: 12px;
        margin-bottom: 24px;
    }

    .theme-btn {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 12px 16px;
        font-size: 16px;
        border-radius: 12px;
        width: 100%;
        min-height: 48px;
        justify-content: flex-start;
    }

    .accent-selector {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-bottom: 24px;
        justify-content: center;
    }

    .accent-btn {
        min-width: 80px;
        height: 48px;
        border-radius: 12px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: 600;
        color: white;
        flex-shrink: 0;
    }

    .employee-list,
    .courier-list {
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
        gap: 16px;
        margin-bottom: 16px;
        max-height: none;
    }

    .employee-item,
    .courier-item {
        width: 100%;
        height: 120px;
        border-radius: 12px;
    }

    .add-btn {
        width: 100%;
        padding: 16px;
        font-size: 16px;
        border-radius: 12px;
        margin-top: 16px;
    }

    .edit-layout-btn {
        width: 100%;
        padding: 16px;
        font-size: 16px;
        border-radius: 12px;
    }
}

/* Mobile-specific styles for personalization panel */
@media (max-width: 600px) {
    .mobile-layout {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    .mobile-section {
        display: flex;
        flex-direction: column;
        gap: 12px;
    }

    .mobile-label {
        font-size: 16px;
        font-weight: 600;
        color: var(--text-primary);
        margin-bottom: 8px;
    }

    .mobile-theme-selector {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .mobile-accent-selector {
        display: flex;
        justify-content: center;
        gap: 16px;
    }

    .mobile-square-btn {
        width: 60px;
        height: 60px;
        border-radius: 16px;
        border: 2px solid var(--border);
        background: var(--bg-secondary);
        color: var(--text-primary);
        font-size: 24px;
        cursor: pointer;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
    }

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

    .mobile-square-btn.active {
        border-color: var(--accent-color);
        background: rgba(var(--accent-rgb), 0.1);
    }

    .mobile-square-btn .color-circle {
        width: 32px;
        height: 32px;
        border-radius: 50%;
        position: relative;
        z-index: 1;
        animation: gradientPulse 3s ease-in-out infinite;
    }

    .mobile-square-btn .color-circle.blue { background: linear-gradient(45deg, #007AFF, #5856D6, #007AFF); }
    .mobile-square-btn .color-circle.pink { background: linear-gradient(45deg, #FF2D55, #FF6482, #FF2D55); }
    .mobile-square-btn .color-circle.green { background: linear-gradient(45deg, #32CD32, #7CFC00, #32CD32); }
    .mobile-square-btn .color-circle.orange { background: linear-gradient(45deg, #FF9500, #FF5E3A, #FF9500); }
    .mobile-square-btn .color-circle.red { background: linear-gradient(45deg, #FF3B30, #FF6B6B, #FF3B30); }

    @keyframes gradientPulse {
        0%, 100% { transform: scale(1); opacity: 1; }
        50% { transform: scale(1.1); opacity: 0.8; }
    }

    .mobile-edit-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 12px 16px;
        background: rgba(var(--primary-rgb), 0.15);
        color: var(--primary-color);
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: 12px;
        font-size: 14px;
        font-weight: 600;
        cursor: pointer;
        transition: all 0.2s ease;
        width: auto;
        margin: 0 auto;
    }

    .mobile-edit-btn:hover {
        background: rgba(var(--primary-rgb), 0.25);
        transform: scale(1.02);
    }

    .mobile-employee-list,
    .mobile-courier-list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 12px;
    }

    .mobile-add-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 12px;
        padding: 16px;
        background: rgba(var(--primary-rgb), 0.15);
        color: var(--primary-color);
        border: 1px solid rgba(var(--primary-rgb), 0.2);
        border-radius: 12px;
        font-size: 16px;
        font-weight: 600;
        cursor: pointer;
        width: 100%;
        margin-top: 16px;
    }

    .mobile-add-btn:hover {
        background: rgba(var(--primary-rgb), 0.25);
        transform: scale(1.02);
    }

    .mobile-employee-item,
    .mobile-courier-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        padding: 16px;
        background: var(--bg-secondary);
        border: 1px solid var(--border);
        border-radius: 12px;
        transition: all 0.2s ease;
        min-height: 100px;
    }

    .mobile-employee-item:hover,
    .mobile-courier-item:hover {
        background: var(--bg-hover);
    }

    .mobile-employee-item .employee-info,
    .mobile-courier-item .courier-info {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 8px;
        margin-bottom: 12px;
    }

    .mobile-employee-item .employee-icon,
    .mobile-courier-item .courier-icon {
        font-size: 32px;
    }

    .mobile-employee-item .employee-name,
    .mobile-courier-item .courier-name {
        font-size: 14px;
        font-weight: 500;
        color: var(--text-primary);
        text-align: center;
    }

    .mobile-employee-item .employee-actions,
    .mobile-courier-item .courier-actions {
        display: flex;
        justify-content: center;
        width: 100%;
    }

    .mobile-employee-item .delete-btn,
    .mobile-courier-item .delete-btn {
        padding: 8px 12px;
        font-size: 12px;
        min-width: 60px;
    }

    .mobile-employee-item.swiped,
    .mobile-courier-item.swiped {
        transform: translateX(-80px);
        transition: transform 0.3s ease;
    }

    .mobile-employee-item.swiped .employee-actions,
    .mobile-courier-item.swiped .courier-actions {
        opacity: 1;
    }
}

.delete-btn:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--ios-red-rgb), 0.3);
}

.delete-btn {
    background: rgba(var(--ios-red-rgb), 0.1);
    color: var(--ios-red);
    border: 1px solid rgba(var(--ios-red-rgb), 0.2);
    border-radius: 8px;
    padding: 4px 8px;
    font-size: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.edit-layout-btn {
    font-weight: 600 !important;
}

/* ====== MODERN LABEL PREVIEW MODAL ====== */
#labelPreviewModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: none;
    z-index: var(--z-overlay);
    align-items: center;
    justify-content: center;
}

#labelPreviewModal.active {
    display: flex;
}

.label-preview-panel {
    width: min(520px, 92vw);
    max-height: 85vh;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 24px;
    box-shadow: 
        0 25px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    animation: labelModalIn 0.3s ease;
}

@keyframes labelModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(20px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.label-preview-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 24px;
    border-bottom: 1px solid var(--glass-border);
    background: var(--bg-tertiary);
}

.label-preview-title {
    display: flex;
    align-items: center;
    gap: 12px;
}

.label-preview-icon {
    font-size: 28px;
    filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.2));
}

.label-preview-title h3 {
    font-size: 20px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.3px;
}

.label-preview-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-secondary);
    border: none;
    color: var(--text-secondary);
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.label-preview-close svg {
    width: 16px;
    height: 16px;
}

.label-preview-close:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-red);
    transform: scale(1.05);
}

.label-preview-body {
    flex: 1;
    overflow-y: auto;
    padding: 24px;
}

.label-preview-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    padding: 24px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    color: var(--text-primary);
    position: relative;
}

.label-preview-card .label-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--glass-border);
}

.label-preview-card .label-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.label-preview-card .label-section-title {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

.label-preview-card .label-value {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

.label-preview-card .label-value-large {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
}

.label-preview-footer {
    display: flex;
    gap: 12px;
    padding: 20px 24px;
    border-top: 1px solid var(--glass-border);
    background: var(--bg-tertiary);
}

.label-btn-secondary,
.label-btn-primary {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

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

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

.label-btn-primary {
    background: rgba(var(--primary-rgb), 0.15);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--primary-color);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.1);
}

.label-btn-primary:hover {
    transform: translateY(-2px);
    background: rgba(var(--primary-rgb), 0.25);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.2);
}

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

/* Scrollbar for label preview */
.label-preview-body::-webkit-scrollbar {
    width: 6px;
}

.label-preview-body::-webkit-scrollbar-track {
    background: transparent;
}

.label-preview-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.label-preview-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ====== LABEL PREVIEW CONTENT STYLING ====== */
.label-preview-card .label-section {
    margin-bottom: 0;
    padding: 0;
    border-bottom: none;
}

.label-preview-card .label-section + .label-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
}

.label-section-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 14px;
}

.label-section-icon {
    font-size: 20px;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}

.label-section-title {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-tertiary);
}

.label-parts-count {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.15);
    padding: 4px 10px;
    border-radius: 20px;
}

.label-section-content {
    padding-left: 30px;
}

/* Recipient styles */
.label-row {
    font-size: 14px;
    color: var(--text-secondary);
    margin-bottom: 4px;
    line-height: 1.5;
}

.label-row-name {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.label-row-phone {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 10px 14px;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 10px;
    width: fit-content;
}

.label-phone-icon {
    font-size: 14px;
}

.label-row-phone span:last-child {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    letter-spacing: 0.5px;
}

.label-empty {
    color: var(--text-tertiary);
    font-style: italic;
}

/* Parts list styles */
.label-parts-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.label-part-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: all 0.2s ease;
}

.label-part-number {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--primary-color);
    color: white;
    font-size: 12px;
    font-weight: 700;
    border-radius: 50%;
    flex-shrink: 0;
}

.label-part-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.label-empty-box {
    padding: 20px;
    text-align: center;
    color: var(--text-tertiary);
    font-style: italic;
    background: var(--bg-secondary);
    border: 1px dashed var(--glass-border);
    border-radius: 12px;
}

/* Payment styles */
.label-payment-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.label-payment-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 18px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
}

.label-payment-cod {
    background: rgba(var(--ios-green-rgb), 0.1);
    border-color: rgba(var(--ios-green-rgb), 0.2);
}

.label-payment-cod .label-payment-value {
    color: var(--ios-green);
}

.label-payment-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.label-payment-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

/* Old styles kept for compatibility */
.label-preview-modal {
    background: var(--bg-primary);
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
    max-width: 600px;
    width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
}

.label-preview {
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(var(--ios-blue-rgb), 0.015) 100%);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 20px;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', sans-serif;
    font-size: 14px;
    line-height: 1.5;
    white-space: pre-wrap;
    color: var(--text-primary);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1), 0 4px 12px rgba(0, 0, 0, 0.1), 0 0 12px rgba(var(--ios-blue-rgb), 0.08);
    overflow-y: visible;
    max-height: none;
    position: relative;
}

.label-preview::-webkit-scrollbar {
    display: none;
}

.label-preview::-webkit-scrollbar-track {
    display: none;
}

.label-preview::-webkit-scrollbar-thumb {
    display: none;
}

.label-preview::-webkit-scrollbar-thumb:hover {
    display: none;
}

.label-preview strong {
    font-weight: 600;
    color: #1d1d1f;
}

.label-preview .label-section {
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    position: relative;
}

.label-preview .label-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Emoji and symbols styling */
.label-preview {
    font-variant-emoji: unicode;
}

.label-preview::before {
    display: none;
}

.label-preview .label-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

/* Label Preview Modal */
#labelPreviewModal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    display: none;
    z-index: 1000;
    align-items: center;
    justify-content: center;
}

#labelPreviewModal.active {
    display: flex;
}

.label-preview-modal {
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(var(--ios-blue-rgb), 0.03) 100%);
    border: 1px solid var(--glass-border);
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3), 0 0 0 1px rgba(var(--ios-blue-rgb), 0.2), 0 0 35px rgba(var(--ios-blue-rgb), 0.15);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    max-width: 600px;
    width: 90vw;
    height: auto;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    position: relative;
    overflow: hidden;
}

.label-preview-modal::after {
    display: none;
}

.modal-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(var(--ios-blue-rgb), 0.008) 100%);
    position: relative;
}

.modal-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
}

.modal-close {
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    font-size: 24px;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 0;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.modal-close:hover {
    background: rgba(var(--ios-blue-rgb), 0.1);
    color: var(--text-primary);
    border-radius: 50%;
}

.modal-body {
    padding: 20px;
    overflow-y: visible;
    flex: 1;
    background: transparent;
}

.modal-footer {
    padding: 20px;
    border-top: 1px solid var(--border-color);
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    background: linear-gradient(145deg, var(--bg-secondary) 0%, rgba(var(--ios-blue-rgb), 0.008) 100%);
    position: relative;
}

/* Responsive adjustments for labels panel */
@media (max-width: 768px) {
    .part-item-save,
    .part-item-edit,
    .part-item-duplicate,
    .part-item-cancel,
    .part-item-remove {
        width: 32px;
        height: 32px;
        font-size: 14px;
    }
    
    .part-item-actions {
        gap: 2px;
        flex-shrink: 0;
    }
    
    .part-item-edit-input {
        min-width: 150px;
        max-width: calc(100% - 100px);
    }
    
    .part-item-info {
        min-width: 0;
        flex: 1;
    }
    
    .label-parts-input {
        flex-direction: column;
        gap: 8px;
    }
    
    .label-parts-input .input-wrapper {
        width: 100%;
    }
    
    .label-parts-input .ios-button-icon {
        width: 100%;
        max-width: 120px;
        align-self: flex-end;
    }
}

@media (max-width: 480px) {
    .part-item-save,
    .part-item-edit,
    .part-item-duplicate,
    .part-item-remove {
        width: 28px;
        height: 28px;
        font-size: 12px;
    }
    
    .part-item-actions {
        gap: 1px;
    }
    
    .part-item-edit-input {
        min-width: 120px;
        max-width: calc(100% - 80px);
    }
}

/* Global Notification */
.global-notification {
    position: fixed;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-red-light);
    padding: 12px 20px;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25);
    z-index: var(--z-overlay);
    display: flex;
    align-items: center;
    justify-content: space-between;
    min-width: min(300px, calc(100vw - 40px));
    max-width: 90vw;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1.5px solid rgba(var(--ios-red-rgb), 0.4);
    animation: slideDown 0.3s ease-out;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.global-notification.success {
    background: rgba(var(--ios-green-rgb), 0.2);
    border-color: rgba(var(--ios-green-rgb), 0.4);
    color: #5CDB7B;
}

.global-notification.warning {
    background: rgba(255, 149, 0, 0.2);
    border-color: rgba(255, 149, 0, 0.4);
    color: #FFB340;
}

.global-notification.info {
    background: rgba(var(--ios-blue-rgb), 0.2);
    border-color: rgba(var(--ios-blue-rgb), 0.4);
    color: #5AC8FA;
}

.notification-content {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.notification-icon {
    font-size: 18px;
    flex-shrink: 0;
}

.notification-text {
    font-weight: 500;
    font-size: 14px;
}

.notification-close {
    background: none;
    border: none;
    color: currentColor;
    font-size: 20px;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: background-color 0.2s;
    flex-shrink: 0;
    opacity: 0.7;
}

.notification-close:hover {
    background: rgba(255, 255, 255, 0.15);
    opacity: 1;
}

@keyframes slideDown {
    from {
        transform: translateX(-50%) translateY(-100%);
        opacity: 0;
    }
    to {
        transform: translateX(-50%) translateY(0);
        opacity: 1;
    }
}

@media (max-width: 768px) {
    .global-notification {
        top: 50px;
        min-width: 280px;
        padding: 10px 16px;
    }
    
    .notification-text {
        font-size: 13px;
    }
}

/* ============================================
   MOBILE UX OPTIMIZATION 2026 - MOVED TO mobile.css
   ============================================ */

/* Touch feedback enhancement - non-mobile specific */
@media (hover: none) and (pointer: coarse) {
    .settings-btn:active,
    .settings-btn.sync-btn:active,
    .header-back-btn:active,
    .seller-logout-btn:active,
    .seller-login-btn:active {
        transform: scale(0.95);
    }
    
    /* Sync button spinning state */
    .settings-btn.sync-btn.syncing {
        pointer-events: none;
        opacity: 0.7;
    }
}

/* ====== COMPANY DATA STYLES ====== */

/* Company data section */
.company-data-section {
    margin-bottom: 8px;
}

.company-data-card {
    background: var(--bg-tertiary);
    border-radius: 16px;
    overflow: hidden;
}

.company-data-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: linear-gradient(135deg, var(--glass-tint), transparent);
    border-bottom: 1px solid var(--glass-border);
}

.company-data-icon {
    font-size: 24px;
}

.company-data-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.company-data-content {
    padding: 12px 16px;
}

.company-data-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 10px 0;
    border-bottom: 1px solid var(--glass-border);
    position: relative;
}

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

.company-data-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.company-data-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.company-data-value-copy {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}

.company-data-value-copy span {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    padding-right: 44px;
}

/* Small copy button */
.company-data-value-copy .copy-btn-small {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
}

.company-data-value-copy .copy-btn-small:hover {
    transform: translateY(-50%);
}

.company-data-value-copy .copy-btn-small:active {
    transform: translateY(-50%) scale(0.95);
}

.contact-info-value-copy .copy-btn-small:hover {
    transform: translateY(-50%);
}

.contact-info-value-copy .copy-btn-small:active {
    transform: translateY(-50%) scale(0.95);
}

.copy-btn-small {
    width: 32px;
    height: 32px;
    border: none;
    background: var(--glass-tint);
    border-radius: 8px;
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.copy-btn-small:hover {
    background: var(--primary-color);
    transform: scale(1.05);
}

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

.copy-btn-small.copied {
    background: var(--ios-green);
    color: white;
}

/* Bank account cards */
.bank-account-card {
    background: var(--bg-tertiary);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 12px;
    border: 1px solid var(--glass-border);
    transition: all 0.2s ease;
}

.bank-account-card:last-child {
    margin-bottom: 0;
}

.bank-account-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb), 0.15);
}

.bank-account-card.pocztex-account {
    border-left: 4px solid #FF6600;
}

.bank-account-card.pln-account {
    border-left: 4px solid var(--ios-blue);
}

.bank-account-card.eur-account {
    border-left: 4px solid var(--ios-green);
}

.bank-account-header {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.bank-account-icon {
    font-size: 28px;
    line-height: 1;
}

.bank-account-info {
    flex: 1;
}

.bank-account-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 2px;
}

.bank-account-desc {
    font-size: 12px;
    color: var(--text-tertiary);
}

.bank-account-number {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--glass-border);
}

.account-number {
    flex: 1;
    font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
    font-size: 13px;
    color: var(--text-primary);
    letter-spacing: 0.5px;
    word-break: break-all;
}

.copy-btn-account {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(var(--primary-rgb), 0.15);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.copy-btn-account:hover {
    background: rgba(var(--primary-rgb), 0.25);
    transform: scale(1.02);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.15);
}

.copy-btn-account:active {
    transform: scale(0.98);
}

.copy-btn-account.copied {
    background: var(--ios-green);
}

.copy-btn-account .copy-icon {
    font-size: 14px;
}

.copy-btn-account .copy-text {
    display: inline;
}

/* Contact info grid */
.contact-info-grid {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-tertiary);
    border-radius: 12px;
    position: relative;
}

.contact-info-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.contact-info-content {
    flex: 1;
    min-width: 0;
    padding-right: 44px;
}

.contact-info-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

.contact-info-value-copy {
    display: flex;
    align-items: center;
    gap: 8px;
}

.contact-info-value-copy span {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-all;
}

.contact-info-value-copy .copy-btn-small {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
}

/* Responsive adjustments for company data */
@media (max-width: 500px) {
    .bank-account-number {
        flex-direction: column;
        align-items: stretch;
        gap: 10px;
    }
    
    .account-number {
        font-size: 12px;
        text-align: center;
    }
    
    .copy-btn-account {
        justify-content: center;
    }
    
    .company-data-value-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .copy-btn-small {
        align-self: flex-end;
    }
    
    .contact-info-content {
        padding-right: 0;
    }
    
    .contact-info-value-copy {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .contact-info-value-copy .copy-btn-small {
        position: static;
        transform: none;
        align-self: flex-end;
    }
}

/* ====== NEW COMPANY PANEL STYLES (Sales-like) ====== */

/* Quick Actions */
.company-quick-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.company-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.company-quick-btn span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.company-quick-btn svg {
    flex-shrink: 0;
    color: var(--primary-color);
}

.company-quick-btn.share {
    border-color: rgba(var(--primary-rgb), 0.35);
    color: var(--primary-color);
}

.company-quick-btn:active {
    background: rgba(var(--primary-rgb), 0.15);
    transform: scale(0.98);
}

/* Collapsible Sections */
.company-collapsible-section {
    overflow: hidden;
    transition: padding 0.35s ease-out;
}

.company-collapsible-section:not(.expanded) {
    padding: 14px clamp(16px, 4vw, 20px) !important;
}

.company-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0;
    min-height: 40px;
    transition: all 0.2s ease;
    user-select: none;
}

.company-collapsible-header h3.section-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: inherit;
    line-height: 1;
}

.company-collapsible-header:hover {
    opacity: 0.8;
}

.company-collapse-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    background: none !important;
    border: none !important;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.company-collapsible-section.expanded .company-collapse-icon {
    transform: rotate(0deg);
}

.company-collapsible-section:not(.expanded) .company-collapse-icon {
    transform: rotate(-90deg);
}

.company-collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease-out, padding 0.35s ease-out, opacity 0.25s ease-out;
    opacity: 0;
}

.company-collapsible-section.expanded .company-collapsible-content {
    grid-template-rows: 1fr;
    padding-top: 16px;
    opacity: 1;
}

.company-collapsible-content > .collapsible-inner {
    overflow: hidden;
    min-height: 0;
}

/* Company Info Card */
.company-info-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 4px 16px;
}

body.light-mode .company-info-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.company-info-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 12px 0;
    border-bottom: 1px solid var(--glass-border);
}

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

.company-info-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.company-info-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
}

.company-info-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Copy Button */
.company-copy-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(var(--primary-rgb), 0.1);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    color: var(--primary-color);
}

.company-copy-btn:hover {
    background: var(--primary-color);
    color: white;
}

.company-copy-btn:active {
    opacity: 0.85;
}

.company-copy-btn.copied {
    background: var(--ios-green);
    color: white;
}

/* Bank Cards Grid */
.bank-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.bank-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 16px;
    transition: all 0.2s ease;
}

body.light-mode .bank-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.bank-card:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
}

.bank-card.pocztex {
    border-left: 3px solid #FF6600;
}

.bank-card.pln {
    border-left: 3px solid var(--ios-blue);
}

.bank-card.eur {
    border-left: 3px solid var(--ios-green);
}

.bank-card-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.bank-card-icon {
    font-size: 20px;
}

.bank-card-info {
    flex: 1;
}

.bank-card-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.bank-card-desc {
    font-size: 11px;
    color: var(--text-tertiary);
}

.bank-card-number {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    background: rgba(0, 0, 0, 0.15);
    border-radius: 10px;
    font-family: 'SF Mono', 'Menlo', monospace;
    font-size: 12px;
    color: var(--text-secondary);
    letter-spacing: 0.5px;
}

body.light-mode .bank-card-number {
    background: rgba(0, 0, 0, 0.04);
}

/* Contact Cards Grid */
.contact-cards-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.contact-card {
    display: flex;
    align-items: center;
    gap: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    padding: 14px 16px;
}

body.light-mode .contact-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.contact-card-icon {
    font-size: 22px;
    flex-shrink: 0;
}

.contact-card-content {
    flex: 1;
    min-width: 0;
}

.contact-card-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
    display: block;
    margin-bottom: 4px;
}

.contact-card-value-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.contact-card-value {
    font-size: 14px;
    color: var(--text-primary);
    font-weight: 500;
    word-break: break-all;
}

/* ====== PWA & iOS STANDALONE APP STYLES ====== */
/* Styles for when app is added to home screen */

/* Detect standalone mode */
@media (display-mode: standalone) {
    body {
        /* Prevent overscroll bounce */
        overscroll-behavior: none;
        /* Ensure full height */
        min-height: 100vh;
        min-height: -webkit-fill-available;
    }
    
    /* Add extra padding for notch/dynamic island */
    .container {
        padding-top: max(20px, env(safe-area-inset-top));
    }
    
    /* Hide any browser UI hints */
    .browser-hint {
        display: none !important;
    }
}

/* iOS Safari standalone specific */
@supports (-webkit-touch-callout: none) {
    @media (display-mode: standalone) {
        html {
            /* Fix 100vh issue on iOS */
            height: -webkit-fill-available;
        }
        
        body {
            min-height: -webkit-fill-available;
        }
    }
}

/* ====== iPhone Pro Max / Large Phone Optimization ====== */
/* iPhone 17 Pro Max: 440x956 @3x (~1320x2868 physical) */
/* iPhone 16 Pro Max: 430x932 @3x */
/* iPhone 15 Pro Max: 430x932 @3x */
/* iPhone 14 Pro Max: 430x932 @3x */

@media screen and (min-width: 414px) and (max-width: 450px) and (min-height: 800px) {
    /* Optimized for large iPhones (Pro Max models) */
    
    .container {
        padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
    }
    
    /* Larger touch targets for big screens */
    .ios-button {
        padding: 16px 24px;
        font-size: 17px;
        min-height: 52px;
    }
    
    .seller-tile {
        padding: 18px;
        min-height: 95px;
    }
    
    .seller-tile-icon {
        font-size: 32px;
    }
    
    .seller-tile-title {
        font-size: 14px;
    }
    
    /* Better readable text */
    .input-label {
        font-size: 15px;
    }
    
    input[type="number"],
    input[type="text"],
    input[type="date"] {
        font-size: 17px;
        padding: 14px 16px;
    }
    
    /* Modal optimization */
    .custom-modal {
        padding: max(20px, env(safe-area-inset-top)) 16px max(20px, env(safe-area-inset-bottom));
    }
    
    .custom-modal-content {
        max-width: 400px;
        border-radius: 20px;
    }
    
    .custom-modal-title {
        font-size: 22px;
    }
    
    /* Results section */
    .result-card {
        padding: 20px;
    }
    
    .result-value {
        font-size: 28px;
    }
    
    /* Glass cards */
    .glass-card {
        padding: 20px;
        border-radius: 18px;
    }
    
    /* Section titles */
    .section-title {
        font-size: 22px;
    }
    
    /* Form fields in quick form */
    .quick-form-field input {
        height: 50px;
        font-size: 16px;
    }
    
    .quick-form-field input[type="date"] {
        height: 50px !important;
        min-height: 50px;
        max-height: 50px;
    }
}

/* ====== Dynamic Island Support ====== */
/* Extra top padding for devices with Dynamic Island */
@media screen and (min-width: 390px) and (min-height: 844px) {
    @supports (padding-top: env(safe-area-inset-top)) {
        .container {
            padding-top: max(20px, calc(env(safe-area-inset-top) + 8px));
        }
    }
}

/* ====== Large Screen Touch Optimization ====== */
@media screen and (min-width: 400px) and (pointer: coarse) {
    /* Touch-friendly spacing */
    .seller-tiles-grid {
        gap: 14px;
    }
    
    /* Swipe actions more visible */
    .swipe-action {
        min-width: 80px;
    }
    
    /* Better tap targets for lists */
    .reservation-item,
    .note-item,
    .shipment-item {
        padding: 16px;
        margin-bottom: 12px;
    }
    
    /* Larger toggle switches */
    .ios-toggle {
        width: 56px;
        height: 32px;
    }
    
    .ios-toggle::before {
        width: 28px;
        height: 28px;
    }
}

/* ====== Notch & Safe Area Handling ====== */
/* Ensure content doesn't go under notch/dynamic island */
@supports (padding-top: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    
    /* Fixed bottom elements */
    .bottom-nav,
    .fixed-bottom-bar {
        padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    
    /* Header with safe area */
    .header,
    .nav-header {
        padding-top: max(12px, env(safe-area-inset-top));
    }
}

/* ====== Haptic Feedback Visual Hints ====== */
/* Visual feedback for touch interactions */
@media (pointer: coarse) {
    .ios-button:active,
    .seller-tile:active,
    .glass-card:active {
        transform: scale(0.98);
        transition: transform 0.1s ease;
    }
    
    .reservation-item:active,
    .note-item:active,
    .shipment-item:active {
        background: var(--glass-tint);
        transition: background 0.1s ease;
    }
}

/* ====== Reduced Motion for Accessibility ====== */
/* ====== High Contrast Mode Support ====== */
@media (prefers-contrast: high) {
    :root {
        --glass-border: rgba(255, 255, 255, 0.3);
    }
    
    body.light-mode {
        --glass-border: rgba(0, 0, 0, 0.3);
    }
    
    .ios-button {
        border: 2px solid currentColor;
    }
}

/* ====== Dark Mode OLED Optimization ====== */
/* True black for OLED displays */
@media (prefers-color-scheme: dark) {
    body.dark-mode {
        background-color: #000000;
    }
    
    body.dark-mode .glass-card {
        background: linear-gradient(145deg, 
            rgba(var(--primary-rgb), 0.12) 0%, 
            rgba(var(--primary-rgb), 0.04) 50%,
            rgba(0, 0, 0, 0.2) 100%);
    }
}

/* ====== ONBOARDING MODAL ====== */
.onboarding-modal {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.9);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: var(--z-modal);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 20px;
}

.onboarding-modal.active {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
}

.onboarding-content {
    background: var(--glass-bg);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 32px 24px;
    max-width: 380px;
    width: 100%;
    text-align: center;
    box-shadow: 
        0 24px 80px rgba(0, 0, 0, 0.5),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onboarding-modal.active .onboarding-content {
    transform: scale(1) translateY(0);
    animation: modalBounceIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.onboarding-progress {
    height: 4px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin-bottom: 32px;
    overflow: hidden;
}

.onboarding-progress-bar {
    height: 100%;
    background: var(--primary-gradient);
    border-radius: 2px;
    width: calc(100% / 7);
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

.onboarding-slides {
    position: relative;
    /* Height set dynamically by JS to match tallest slide */
}

.onboarding-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    transform: translateX(30px);
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

.onboarding-slide.active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}

.onboarding-icon {
    font-size: 54px;
    line-height: 1;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    animation: onboardingBounce 2s ease-in-out infinite;
}

.onboarding-icon svg {
    width: 64px;
    height: 64px;
}

/* Universal icon styles */
.btn-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    line-height: 1;
    flex-shrink: 0;
}

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

.seg-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.kbd-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
}

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

.section-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

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

.section-icon-allegro { color: #ff9500; }
.section-icon-ovoko   { color: #bf5af2; }

.copy-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    line-height: 1;
    flex-shrink: 0;
}

.copy-icon svg {
    width: 16px;
    height: 100%;
}

.settings-title-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    color: rgba(var(--primary-rgb), 1);
}

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

.tab-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

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

.empty-state-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 42px;
    line-height: 1;
    margin-bottom: 12px;
}

.empty-state-icon svg {
    width: 48px;
    height: 48px;
}

@keyframes onboardingBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.onboarding-slide h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}

.onboarding-slide p {
    font-size: 15px;
    color: var(--text-secondary);
    line-height: 1.5;
    margin: 0;
}

.onboarding-dots {
    display: flex;
    justify-content: center;
    gap: 8px;
    margin: 24px 0;
}

.onboarding-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.2);
    cursor: pointer;
    transition: all 0.3s ease;
}

.onboarding-dot.active {
    background: var(--primary-color);
    width: 24px;
    border-radius: 4px;
}

.onboarding-dot:hover {
    background: rgba(255, 255, 255, 0.4);
}

.onboarding-dot.active:hover {
    background: var(--primary-color);
}

.onboarding-buttons {
    display: flex;
    gap: 12px;
    margin-top: 8px;
}

.onboarding-btn {
    flex: 1;
    padding: 14px 20px;
    border-radius: 14px;
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
    border: none;
}

.onboarding-btn.primary {
    background: var(--primary-gradient);
    color: white;
    box-shadow: 0 4px 16px var(--primary-glow);
}

.onboarding-btn.primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 24px var(--primary-glow);
}

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

.onboarding-btn.secondary {
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

.onboarding-btn.secondary:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
}

/* ====== SKELETON LOADING ====== */
.skeleton-loading {
    position: relative;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.1) !important;
    color: transparent !important;
    border-radius: 6px;
    min-width: 80px;
}

body.light-mode .skeleton-loading {
    background: rgba(0, 0, 0, 0.06) !important;
}

.skeleton-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(
        90deg,
        transparent,
        rgba(255, 255, 255, 0.15),
        transparent
    );
    animation: skeletonShimmer 1.5s infinite;
}

body.light-mode .skeleton-loading::after {
    background: linear-gradient(
        90deg,
        transparent,
        rgba(0, 0, 0, 0.06),
        transparent
    );
}

.skeleton-text {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    padding: 2px 8px;
    animation: skeletonPulse 1.5s ease-in-out infinite;
}

/* Skeleton utility shapes */
.skeleton-line {
    height: 14px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.08);
    margin-bottom: 10px;
    position: relative;
    overflow: hidden;
}

body.light-mode .skeleton-line {
    background: rgba(0, 0, 0, 0.06);
}

.skeleton-line::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    animation: skeletonShimmer 1.5s infinite;
}

.skeleton-line.short { width: 40%; }
.skeleton-line.medium { width: 70%; }
.skeleton-line.tall { height: 20px; }

.skeleton-circle {
    width: 40px; height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    position: relative;
    overflow: hidden;
    flex-shrink: 0;
}

.skeleton-circle::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; width: 100%; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.12), transparent);
    animation: skeletonShimmer 1.5s infinite;
}

.skeleton-card {
    display: flex;
    gap: 12px;
    padding: 14px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    margin-bottom: 10px;
}

.skeleton-card-lines {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    justify-content: center;
}

@keyframes skeletonShimmer {
    0% { left: -100%; }
    100% { left: 100%; }
}

@keyframes skeletonPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Responsive adjustments for tile sizes */
@media (max-width: 480px) {
    .seller-tile-icon {
        font-size: 28px !important;
    }
    
    .seller-tile-label {
        font-size: 11px !important;
    }
    
    .seller-tiles {
        gap: 12px !important;
    }
    
    .seller-panel-title {
        font-size: 22px !important;
    }
}

@media (max-width: 380px) {
    .seller-tile-icon {
        font-size: 24px !important;
    }
    
    .seller-tile-label {
        font-size: 10px !important;
    }
    
    .seller-tiles {
        gap: 10px !important;
    }
    
    .seller-panel-title {
        font-size: 20px !important;
    }
}

/* Landscape orientation adjustments */
@media (max-height: 500px) and (orientation: landscape) {
    .seller-tile-icon {
        font-size: 24px !important;
    }
    
    .seller-tile-label {
        font-size: 10px !important;
    }
    
    .seller-panel-title {
        font-size: 18px !important;
        padding: 8px 4px !important;
    }
}

/* ====== GLOBALNA WYSZUKIWARKA ====== */
.global-search-container {
    width: 100%;
    margin-bottom: 12px;
    position: relative;
    z-index: 100;
}

.global-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.global-search-icon-right {
    position: absolute;
    right: 14px;
    width: 20px;
    height: 20px;
    stroke: var(--text-tertiary);
    pointer-events: none;
    transition: stroke 0.2s ease;
    opacity: 0.6;
}

.global-search-input:focus ~ .global-search-icon-right {
    stroke: var(--primary-color);
    opacity: 1;
}

/* Uniwersalne pole wyszukiwania z ikoną po prawej */
.search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: all 0.3s ease;
}

.search-input-wrapper input[type="search"] {
    flex: 1;
    padding: 12px 44px 12px 16px;
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    background: transparent;
    border: none;
    outline: none;
    width: 100%;
}

.search-input-wrapper:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.search-icon-right {
    position: absolute;
    right: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 18px;
    height: 18px;
    stroke: var(--text-tertiary);
    pointer-events: none;
    transition: stroke 0.2s ease;
    opacity: 0.5;
}

.search-input-wrapper:focus-within .search-icon-right {
    stroke: var(--primary-color);
    opacity: 1;
}

body.light-mode .search-input-wrapper {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .search-icon-right {
    stroke: var(--text-secondary);
}

body.light-mode .search-input-wrapper:focus-within .search-icon-right {
    stroke: var(--primary-color);
}

.global-search-input {
    width: 100%;
    padding: 11px 48px 11px 18px;
    font-size: 15px;
    font-weight: 400;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 100px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.25s ease;
    outline: none;
}

.global-search-input:focus {
    border-color: rgba(var(--primary-rgb), 0.4);
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 0 0 4px rgba(var(--primary-rgb), 0.15);
}

.global-search-input::placeholder {
    color: rgba(255, 255, 255, 0.3);
    font-size: 14px;
    font-style: normal;
    font-weight: 400;
}

body.light-mode .global-search-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .global-search-input:focus {
    background: rgba(0, 0, 0, 0.06);
    border-color: rgba(var(--primary-rgb), 0.3);
}

/* Podświetlenie elementu z wyszukiwania */
.search-highlight {
    animation: searchHighlight 2s ease-out;
    position: relative;
}

@keyframes searchHighlight {
    0% {
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.6), 0 0 20px rgba(var(--primary-rgb), 0.4);
        transform: scale(1.02);
    }
    50% {
        box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.4), 0 0 15px rgba(var(--primary-rgb), 0.2);
        transform: scale(1.01);
    }
    100% {
        box-shadow: none;
        transform: scale(1);
    }
}

.global-search-results {
    position: absolute;
    top: calc(100% + 8px);
    left: 0;
    right: 0;
    background: rgba(15, 20, 30, 0.95);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4);
    max-height: 360px;
    overflow-y: auto;
    display: none;
    z-index: 1000;
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    cursor: pointer;
    transition: background 0.2s ease;
    border-bottom: 1px solid var(--glass-border);
}

.search-result-item:last-child {
    border-bottom: none;
}

.search-result-item:hover {
    background: rgba(var(--primary-rgb), 0.1);
}

.search-result-icon {
    font-size: 24px;
    flex-shrink: 0;
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.search-no-results {
    padding: 24px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 14px;
}

/* ====== PRZYCISK RAPORTU ====== */
.export-report-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.export-report-btn:hover {
    background: var(--glass-tint-strong);
    border-color: var(--primary-color);
    transform: translateY(-2px);
    box-shadow: 0 4px 15px rgba(var(--primary-rgb), 0.2);
}

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

.export-report-btn svg {
    width: 18px;
    height: 18px;
    stroke: var(--primary-color);
}

/* ====== MOBILE RESPONSYWNOŚĆ WYSZUKIWARKI ====== */
@media (max-width: 480px) {
    .global-search-container {
        margin-bottom: 12px;
    }
    
    .global-search-input {
        padding: 10px 44px 10px 14px;
        font-size: 14px;
        border-radius: 12px;
    }
    
    .global-search-icon-right {
        right: 12px;
        width: 18px;
        height: 18px;
    }
    
    .global-search-results {
        left: 0;
        right: 0;
        border-radius: 14px;
    }
}

/* ====== MODAL RAPORTU ====== */
.report-month-selector {
    margin: 20px 0;
}

.report-month-selector select {
    width: 100%;
    padding: 14px 16px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.report-month-selector select:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

/* ====== SHIPMENT ACTIONS BAR - WYŚRODKOWANIE ====== */
.shipment-actions-bar {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--glass-border);
}

@media (max-width: 480px) {
    .shipment-actions-bar {
        gap: 8px;
    }
    
    .export-excel-btn,
    .report-pdf-btn,
    .settlement-btn {
        flex: 1;
        min-width: 0;
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .export-excel-btn svg,
    .report-pdf-btn svg {
        width: 16px;
        height: 16px;
    }
}

/* ====== CUSTOM TOOLTIP ====== */
.custom-tooltip {
    position: fixed;
    z-index: 99999;
    padding: 6px 12px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1.4;
    color: var(--text-primary);
    background: rgba(30, 30, 35, 0.88);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    pointer-events: none;
    opacity: 0;
    transform: translateY(4px) scale(0.96);
    transition: opacity 0.2s ease, transform 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
    max-width: 300px;
    text-align: center;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
    white-space: normal;
    word-break: break-word;
}

body.light-mode .custom-tooltip {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.08);
    color: #1a1a2e;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.12);
}

.custom-tooltip.visible {
    opacity: 1;
    transform: translateY(0) scale(1);
}

/* ====== SUCCESS ANIMATION ====== */
.success-anim-overlay {
    position: fixed;
    inset: 0;
    z-index: 999999;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
}

.success-anim-overlay.active {
    opacity: 1;
}

.success-anim-overlay.hiding {
    opacity: 0;
}

.success-anim-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.success-anim-check {
    width: 80px;
    height: 80px;
}

.success-anim-circle {
    stroke: var(--primary-color, #06D6A0);
    stroke-width: 2.5;
    stroke-dasharray: 151;
    stroke-dashoffset: 151;
    animation: successCircle 0.5s 0.1s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-anim-tick {
    stroke: var(--primary-color, #06D6A0);
    stroke-width: 3;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-dasharray: 48;
    stroke-dashoffset: 48;
    animation: successTick 0.35s 0.45s cubic-bezier(0.65, 0, 0.45, 1) forwards;
}

.success-anim-text {
    font-size: 16px;
    font-weight: 600;
    color: #fff;
    text-align: center;
    opacity: 0;
    transform: translateY(8px);
    animation: successTextIn 0.35s 0.6s ease forwards;
}

@keyframes successCircle {
    to { stroke-dashoffset: 0; }
}

@keyframes successTick {
    to { stroke-dashoffset: 0; }
}

@keyframes successTextIn {
    to { opacity: 1; transform: translateY(0); }
}

/* ====== EMPTY STATE ====== */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    gap: 12px;
    animation: emptyStateIn 0.5s ease both;
}

.empty-state-icon {
    width: 56px;
    height: 56px;
    color: var(--text-tertiary);
    opacity: 0.35;
    margin-bottom: 4px;
}

.empty-state-title {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-secondary);
}

.empty-state-subtitle {
    font-size: 13px;
    color: var(--text-tertiary);
    max-width: 260px;
    line-height: 1.5;
}

@keyframes emptyStateIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ====== PULL TO REFRESH ====== */
.pull-to-refresh-indicator {
    position: fixed;
    top: -50px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 99990;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: top 0.2s ease, opacity 0.2s ease;
    opacity: 0;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.pull-to-refresh-indicator.pulling {
    opacity: 1;
}

.pull-to-refresh-indicator.refreshing {
    opacity: 1;
    top: 12px;
}

.pull-to-refresh-indicator svg {
    width: 18px;
    height: 18px;
    stroke: var(--primary-color);
    transition: transform 0.2s ease;
}

.pull-to-refresh-indicator.refreshing svg {
    animation: ptrSpin 0.8s linear infinite;
}

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

/* ====== OPTYMALIZACJE WYDAJNOŚCI ====== */

/* Reduce Motion - dla użytkowników preferujących mniej animacji */
/* Tryb oszczędzania energii - klasa dodawana przez JS */
body.reduce-motion *,
body.reduce-motion *::before,
body.reduce-motion *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.15s !important;
}

body.reduce-motion::before,
body.reduce-motion::after {
    animation: none !important;
    filter: none !important;
}

body.reduce-motion .seller-tile {
    transition: box-shadow 0.15s ease, border-color 0.15s ease !important;
}

/* ============================================================================
   CAR DELIVERIES / DOSTAWY AUT STYLES
   ============================================================================ */

/* Stats Grid */
.delivery-stats-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

.delivery-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
    transition: border-color 0.2s ease;
}

.delivery-stat-card:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
}

.delivery-stat-value {
    font-size: 22px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.delivery-stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 2px;
}

/* Search Box */
.delivery-search-box {
    position: relative;
    margin-bottom: 16px;
}

.delivery-search-box input {
    width: 100%;
    padding: 12px 16px 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    transition: all 0.3s ease;
    padding-right: 44px;
}

.delivery-search-box input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

/* Action Buttons Row */
.delivery-actions-row {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.delivery-actions-row .ios-button {
    flex: 1;
    justify-content: center;
}

/* List Header */
.delivery-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
}

/* Transport Groups */
.transport-group {
    margin-bottom: 20px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    overflow: hidden;
}

.transport-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 14px;
    background: linear-gradient(135deg, var(--glass-tint), transparent);
    border-bottom: 1px solid var(--glass-border);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.2s ease;
}

.transport-header:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.08), transparent);
}

.transport-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    text-transform: capitalize;
}

.transport-date svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.transport-meta {
    display: flex;
    align-items: center;
    gap: 12px;
}

.transport-car-count {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--glass-tint);
    padding: 4px 10px;
    border-radius: 20px;
}

.transport-delete-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(var(--ios-red-rgb), 0.1);
    border: 1px solid rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-red);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transport-delete-btn:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
    border-color: rgba(var(--ios-red-rgb), 0.4);
    transform: scale(1.05);
}

/* Cars List — collapsible */
.transport-cars-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

/* .transport-group.expanded .transport-cars-collapsible — max-height set inline via JS */

.transport-cars {
    padding: 10px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Chevron */
.transport-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    color: var(--text-tertiary);
}

.transport-group.expanded .transport-chevron {
    transform: rotate(180deg);
}

/* When collapsed, hide bottom border */
.transport-group:not(.expanded) .transport-header {
    border-bottom-color: transparent;
}

/* Car Card */
.car-card {
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 14px 16px;
    position: relative;
    transition: all 0.2s ease;
}

.car-card:hover {
    border-color: var(--primary-color);
    box-shadow: 0 4px 16px var(--glass-tint);
}

.car-card:hover .car-color {
    opacity: 0;
    pointer-events: none;
}

body.light-mode .car-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.car-main-info {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 28px;
}

.car-brand-model {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.car-name-row {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 6px;
}

.car-brand {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}

.car-model {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-secondary);
}

.car-year {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--glass-tint);
    padding: 2px 8px;
    border-radius: 6px;
}

.car-details {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.car-engine {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    letter-spacing: 0.3px;
}

.car-version {
    font-size: 11px;
    color: var(--primary-color);
    font-weight: 500;
    font-style: italic;
    letter-spacing: 0.3px;
    opacity: 0.85;
}

.car-color {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    color: var(--text-tertiary);
    font-weight: 500;
    transition: opacity 0.2s ease;
}

.car-color-dot {
    width: 14px;
    height: 14px;
    border-radius: 4px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
    flex-shrink: 0;
}

.car-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
    font-size: 13px;
    color: var(--text-tertiary);
    font-style: italic;
    line-height: 1.4;
}

.car-actions {
    position: absolute;
    top: 50%;
    right: 10px;
    transform: translateY(-50%);
    display: flex;
    gap: 6px;
    opacity: 0;
    transition: opacity 0.2s ease;
}

.car-card:hover .car-actions {
    opacity: 1;
}

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

.car-action-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.3);
    color: var(--primary-color);
}

.car-action-btn.delete:hover {
    background: var(--ios-red);
    border-color: var(--ios-red);
}

/* Car Form Modal */
.car-form-modal-overlay {
    z-index: var(--z-modal);
}

.car-form-modal {
    max-width: 480px;
    width: 92%;
    background: rgba(30, 30, 35, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.light-mode .car-form-modal {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.car-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin: 16px 0;
}

.car-form-row {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.car-form-row.two-cols {
    flex-direction: row;
    gap: 10px;
}

.car-form-row.two-cols .car-form-field {
    flex: 1;
}

.wiz-title-catalog-row {
    display: grid;
    grid-template-columns: minmax(320px, 1fr) minmax(180px, 0.42fr);
    gap: 10px;
    align-items: start;
}

.wiz-title-catalog-row .car-form-field {
    min-width: 0;
}

.wiz-signature-row {
    display: grid;
    grid-template-columns: minmax(160px, 0.38fr) minmax(260px, 1fr);
    gap: 10px;
    align-items: end;
}

.wiz-signature-row .car-form-field {
    min-width: 0;
}

@media (max-width: 640px) {
    .wiz-title-catalog-row,
    .wiz-signature-row {
        grid-template-columns: 1fr;
    }
}

/* ── Apple-style title builder (step 3) — compact ─────────────────── */
.wiz-title-preview-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0 2px 8px;
    margin: 2px 0 14px;
    box-shadow: none;
    transition: color 0.15s ease;
}
.wiz-title-preview-card.wiz-title-too-long {
    color: #ef4444;
}
.wiz-title-preview-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}
.wiz-title-preview-label {
    font-size: 10px;
    font-weight: 600;
    color: rgba(229, 231, 235, 0.48);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}
.wiz-title-preview-counter {
    font-size: 11px;
    color: rgba(229, 231, 235, 0.50);
    font-variant-numeric: tabular-nums;
}
.wiz-title-preview-card.wiz-title-too-long .wiz-title-preview-counter {
    color: #ef4444;
    font-weight: 600;
}
.wiz-title-preview-text {
    font-size: 20px;
    font-weight: 650;
    color: rgba(248, 250, 252, 0.96);
    line-height: 1.22;
    min-height: 24px;
    white-space: nowrap;
    overflow: visible;
    word-break: normal;
    letter-spacing: 0;
}
.wiz-title-preview-card.wiz-title-too-long .wiz-title-preview-text {
    color: #fca5a5;
}
.wiz-title-preview-empty {
    color: rgba(148, 163, 184, 0.65);
    font-weight: 400;
    font-style: italic;
    letter-spacing: 0;
}

.wiz-title-builder {
    display: grid;
    grid-template-columns: 1.1fr 1fr 1fr;
    gap: 14px;
    margin-bottom: 20px;
}
.wiz-title-builder[hidden] {
    display: none !important;
}
.wiz-title-builder-wheel {
    grid-template-columns: 1fr;
}
.wiz-title-builder .wiz-title-builder-card-fullrow {
    grid-column: 1 / -1;
}
.wiz-title-builder-card-full input {
    height: 46px;
    font-size: 16px;
    font-weight: 620;
}
.wiz-title-builder-card {
    background: transparent;
    border: 0;
    border-radius: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 7px;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    transition: none;
    min-width: 0;
}
.wiz-title-builder-card:focus-within {
    background: transparent;
    box-shadow: none;
    transform: none;
}
.wiz-title-builder-card label {
    font-size: 10px;
    font-weight: 650;
    color: rgba(229, 231, 235, 0.54);
    text-transform: uppercase;
    letter-spacing: 0.075em;
    margin: 0 0 0 2px;
}
.wiz-title-builder-card input {
    height: 42px;
    border: 1px solid rgba(255, 255, 255, 0.11);
    outline: none;
    padding: 0 13px;
    font-size: 15px;
    font-weight: 540;
    color: rgba(248, 250, 252, 0.96);
    background: rgba(255, 255, 255, 0.055);
    border-radius: 12px;
    width: 100%;
    font-family: inherit;
    letter-spacing: 0;
    min-width: 0;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.045), 0 1px 2px rgba(0, 0, 0, 0.16);
    appearance: none;
    -webkit-appearance: none;
    -webkit-text-fill-color: rgba(248, 250, 252, 0.96);
    transition: background 0.14s ease, border-color 0.14s ease, box-shadow 0.14s ease;
}
.wiz-title-builder-card input:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.15);
}
.wiz-title-builder-card input:focus {
    background: rgba(255, 255, 255, 0.09);
    border-color: rgba(59, 130, 246, 0.75);
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.wiz-title-builder-card.catalog-fit-ok label {
    color: rgba(74, 222, 128, 0.82);
}
.wiz-title-builder-card input.catalog-fit-ok {
    border-color: rgba(34, 197, 94, 0.78);
    background: rgba(34, 197, 94, 0.08);
    box-shadow: 0 0 0 1px rgba(34, 197, 94, 0.14), 0 0 22px rgba(34, 197, 94, 0.16), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.wiz-title-builder-card input.catalog-fit-ok:focus {
    border-color: rgba(34, 197, 94, 0.95);
    box-shadow: 0 0 0 3px rgba(34, 197, 94, 0.16), 0 0 26px rgba(34, 197, 94, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.wiz-title-builder-card.catalog-fit-warn label {
    color: rgba(251, 146, 60, 0.88);
}
.wiz-title-builder-card input.catalog-fit-warn {
    border-color: rgba(249, 115, 22, 0.82);
    background: rgba(249, 115, 22, 0.08);
    box-shadow: 0 0 0 1px rgba(249, 115, 22, 0.13), 0 0 22px rgba(249, 115, 22, 0.14), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.wiz-title-builder-card input.catalog-fit-warn:focus {
    border-color: rgba(249, 115, 22, 0.96);
    box-shadow: 0 0 0 3px rgba(249, 115, 22, 0.16), 0 0 26px rgba(249, 115, 22, 0.17), inset 0 1px 0 rgba(255, 255, 255, 0.055);
}
.wiz-catalog-fit-hint {
    min-height: 14px;
    margin: -2px 0 0 2px;
    font-size: 11px;
    font-weight: 500;
    line-height: 1.25;
    color: rgba(148, 163, 184, 0.62);
    letter-spacing: 0;
}
.wiz-catalog-fit-hint.catalog-fit-ok {
    color: rgba(134, 239, 172, 0.68);
}
.wiz-catalog-fit-hint.catalog-fit-warn {
    color: rgba(253, 186, 116, 0.72);
}
.wiz-title-builder-card input::placeholder {
    color: rgba(148, 163, 184, 0.56);
    font-weight: 400;
}

.wiz-title-builder-card #wizPartCatalogNumber::placeholder {
    color: rgba(148, 163, 184, 0.32);
    -webkit-text-fill-color: rgba(148, 163, 184, 0.32);
}

@media (max-width: 720px) {
    .wiz-title-builder {
        grid-template-columns: 1fr;
    }
    .wiz-title-preview-text {
        font-size: 17px;
    }
}
/* ── /title builder ─────────────────────────────────────────────────── */


.car-form-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.car-form-field label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    text-align: center;
}

.car-form-field input,
.car-form-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    transition: all 0.2s ease;
}

body.light-mode .car-form-field input,
body.light-mode .car-form-field textarea {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.car-form-field input:focus,
.car-form-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
    background: rgba(255, 255, 255, 0.08);
}

.car-form-field textarea {
    resize: vertical;
    min-height: 60px;
}

.car-form-field input[type="date"] {
    color-scheme: dark;
    cursor: pointer;
}

.car-form-field input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}

.car-form-field input[type="number"]::-webkit-outer-spin-button,
.car-form-field input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

/* Stats Modal */
.stats-modal-overlay {
    z-index: var(--z-modal);
}

.stats-modal {
    max-width: 500px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    background: rgba(30, 30, 35, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

body.light-mode .stats-modal {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
}

.stats-summary-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin: 16px 0;
}

.stats-summary-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    padding: 14px 10px;
    text-align: center;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

body.light-mode .stats-summary-card {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

.stats-summary-value {
    font-size: 26px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.stats-summary-label {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 4px;
}

.stats-sections {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.stats-section {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    padding: 14px;
}

body.light-mode .stats-section {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.stats-section-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.stats-breakdown {
    display: flex;
    flex-direction: column;
    gap: 6px;
    max-height: 200px;
    overflow-y: auto;
}

.stats-breakdown-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dotted var(--glass-border);
}

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

.stats-breakdown-label {
    font-size: 13px;
    color: var(--text-secondary);
}

.stats-breakdown-value {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.stats-empty {
    text-align: center;
    padding: 16px;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Light mode adjustments */
body.light-mode .car-form-field input[type="date"] {
    color-scheme: light;
}

body.light-mode .transport-delete-btn {
    background: rgba(var(--ios-red-rgb), 0.08);
}

body.light-mode .car-color-dot {
    border-color: rgba(0, 0, 0, 0.15);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}

/* Mobile styles for car deliveries */
@media (max-width: 767px) {
    .delivery-stats-grid {
        gap: 8px;
    }
    
    .delivery-stat-value {
        font-size: 20px;
    }
    
    .delivery-stat-label {
        font-size: 10px;
    }
    
    .delivery-actions-row {
        flex-direction: column;
    }
    
    .transport-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
    
    .transport-meta {
        width: 100%;
        justify-content: space-between;
    }
    
    .car-main-info {
        flex-direction: column;
        gap: 8px;
    }
    
    .car-details {
        width: 100%;
        justify-content: flex-start;
    }
    
    .car-actions {
        opacity: 1;
        position: static;
        transform: none;
        margin-top: 10px;
        padding-top: 10px;
        border-top: 1px solid var(--glass-border);
        justify-content: flex-end;
    }
    
    .car-form-row.two-cols {
        flex-direction: column;
    }
    
    .stats-summary-grid {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .stats-summary-value {
        font-size: 20px;
    }
}

/* ============================================================================
   DELIVERIES PANEL - NEW STYLES (transport-first redesign)
   ============================================================================ */

/* Quick Actions Bar - similar to sales panel */
.deliveries-quick-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
}

.deliveries-quick-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.deliveries-quick-btn:hover {
    background: var(--glass-tint);
    border-color: var(--primary-color);
    transform: translateY(-1px);
}

.deliveries-quick-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    border-color: transparent;
    color: #fff;
}

.deliveries-quick-btn.primary:hover {
    filter: brightness(1.1);
}

.deliveries-quick-btn svg {
    flex-shrink: 0;
}

/* Collapsible Summary Section */
.deliveries-collapsible-section {
    margin-bottom: 20px;
    overflow: hidden;
}

.deliveries-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    cursor: pointer;
    background: transparent;
    width: 100%;
    color: var(--text-primary);
    transition: opacity 0.2s ease;
}

.deliveries-collapsible-header:hover {
    opacity: 0.85;
}

.deliveries-collapse-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.3s ease;
    color: var(--text-tertiary);
}

.deliveries-collapsible-section.expanded .deliveries-collapse-icon {
    transform: rotate(180deg);
}

.deliveries-collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.deliveries-collapsible-section.expanded .deliveries-collapsible-content {
    max-height: 400px;
}

.collapsible-inner {
    padding-top: 16px;
}

.deliveries-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 10px;
}

.deliveries-stat-card {
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 10px;
    text-align: center;
    transition: all 0.2s ease;
}

.deliveries-stat-card:hover {
    border-color: var(--primary-color);
    transform: translateY(-2px);
}

.deliveries-stat-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.deliveries-stat-label {
    font-size: 10px;
    color: var(--text-tertiary);
    font-weight: 500;
    margin-top: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* Search Section */
.deliveries-list-section {
    display: flex;
    flex-direction: column;
}

.deliveries-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.deliveries-list-header .section-title {
    flex-shrink: 0;
}

.deliveries-search-wrapper {
    position: relative;
    flex: 1;
    max-width: 280px;
    min-width: 180px;
}

.deliveries-search-wrapper input {
    width: 100%;
    padding: 12px 16px 12px 40px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 15px;
    transition: all 0.2s ease;
}

.deliveries-search-wrapper input::placeholder {
    color: var(--text-tertiary);
}

.deliveries-search-wrapper input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px var(--glass-tint);
}

.deliveries-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    width: 16px;
    height: 16px;
    flex-shrink: 0;
}

/* Transport Card (Accordion) */
.transport-card {
    margin-bottom: 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    overflow: hidden;
    transition: all 0.2s ease;
}

.transport-card:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
}

.transport-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.2s ease;
}

.transport-card-header:hover {
    background: var(--glass-tint);
}

.transport-card-header:focus {
    outline: none;
    background: var(--glass-tint);
}

.transport-card-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.transport-card-date {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.transport-card-date svg {
    color: var(--primary-color);
    flex-shrink: 0;
}

.transport-card-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--glass-tint);
    padding: 4px 10px;
    border-radius: 20px;
}

.transport-card-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.transport-add-car-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transport-add-car-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: scale(1.05);
}

.transport-card-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    transition: transform 0.3s ease;
    color: var(--text-tertiary);
}

.transport-card.expanded .transport-card-chevron {
    transform: rotate(180deg);
}

/* Transport Card Content */
.transport-card-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.transport-cars-grid {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Car Card Item */
.car-card-item {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 14px;
    transition: all 0.2s ease;
}

body.light-mode .car-card-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.car-card-item:hover {
    border-color: var(--primary-color);
    box-shadow: 0 2px 12px var(--glass-tint);
}

.car-card-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.car-card-info {
    flex: 1;
    min-width: 0;
}

.car-card-title {
    display: flex;
    align-items: baseline;
    gap: 6px;
    flex-wrap: wrap;
}

.car-card-brand {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
}

.car-card-model {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-secondary);
}

.car-card-year {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
    background: var(--glass-tint);
    padding: 2px 8px;
    border-radius: 6px;
}

.car-card-details {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.car-card-engine,
.car-card-version {
    font-size: 11px;
    color: var(--text-tertiary);
}

.car-card-version {
    color: var(--primary-color);
    opacity: 0.8;
    font-style: italic;
}

.car-card-color {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--text-tertiary);
}

.car-card-color-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
    flex-shrink: 0;
}

body.light-mode .car-card-color-dot {
    border-color: rgba(0, 0, 0, 0.15);
}

.car-card-note {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--glass-border);
    font-size: 12px;
    color: var(--text-tertiary);
    font-style: italic;
}

.car-card-actions {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.car-card-action {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: transparent;
    color: var(--text-tertiary);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s ease;
}

.car-card-action:hover {
    background: var(--glass-tint);
    color: var(--primary-color);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.car-card-action.delete:hover {
    background: rgba(var(--ios-red-rgb), 0.1);
    color: var(--ios-red);
    border-color: rgba(var(--ios-red-rgb), 0.3);
}

/* Empty Hint in Transport */
.transport-empty-hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 16px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.transport-empty-add-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    background: rgba(var(--primary-rgb), 0.1);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 8px;
    color: var(--primary-color);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transport-empty-add-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.4);
}

/* Empty State */
.deliveries-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
}

.deliveries-empty-icon {
    font-size: 48px;
    margin-bottom: 16px;
    opacity: 0.6;
}

.deliveries-empty-text {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.deliveries-empty-hint {
    font-size: 13px;
    color: var(--text-tertiary);
}

/* Deliveries Modals */
.deliveries-modal-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: var(--z-modal);
    opacity: 0;
    visibility: hidden;
    transition: all 0.25s ease;
}

.deliveries-modal-overlay.active {
    opacity: 1;
    visibility: visible;
}

.deliveries-modal {
    max-width: 420px;
    width: 92%;
    max-height: 85vh;
    overflow-y: auto;
    background: rgba(30, 30, 35, 0.92);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.25s ease;
}

.deliveries-modal-overlay.active .deliveries-modal {
    transform: scale(1) translateY(0);
}

body.light-mode .deliveries-modal {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);
}

.deliveries-modal-header {
    padding: 24px 24px 16px;
    text-align: center;
    border-bottom: 1px solid var(--glass-border);
}

.deliveries-modal-icon {
    width: 52px;
    height: 52px;
    background: var(--glass-tint);
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    margin: 0 auto 12px;
}

.deliveries-modal-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
}

.deliveries-modal-subtitle {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0;
}

.deliveries-modal-body {
    padding: 20px 24px;
}

.deliveries-modal-footer {
    padding: 16px 24px 24px;
    display: flex;
    gap: 10px;
}

.deliveries-modal-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    border: none;
}

.deliveries-modal-btn.primary {
    background: linear-gradient(135deg, var(--primary-color), var(--primary-hover));
    color: #fff;
}

.deliveries-modal-btn.primary:hover {
    filter: brightness(1.1);
    transform: translateY(-1px);
}

.deliveries-modal-btn.secondary {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    color: var(--text-primary);
}

.deliveries-modal-btn.secondary:hover {
    background: var(--glass-tint);
}

/* ====== Car Modal Topbar ====== */
.car-modal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
}

.car-modal-cancel {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    transition: opacity 0.15s ease;
    min-width: 60px;
    text-align: left;
}

.car-modal-cancel:hover {
    opacity: 0.7;
}

.car-modal-save {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    transition: opacity 0.15s ease;
    min-width: 60px;
    text-align: right;
}

.car-modal-save:hover {
    opacity: 0.7;
}

.car-modal-topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.car-modal-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    text-align: center;
    padding: 10px 16px 0;
}

.car-modal-body {
    padding: 12px 20px 20px;
}

.car-modal-topbar-spacer {
    min-width: 60px;
}

.car-modal-footer {
    padding: 0 20px 20px;
    display: flex;
    gap: 10px;
}

.car-modal-back-btn {
    padding: 14px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-secondary);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.car-modal-back-btn:hover {
    background: rgba(var(--primary-rgb), 0.05);
    color: var(--text-primary);
}

.car-modal-action-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--glass-bg);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    box-shadow: 0 0 12px rgba(var(--primary-rgb), 0.15);
}

.car-modal-action-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 0 16px rgba(var(--primary-rgb), 0.25);
}

.car-modal-action-btn:active {
    transform: scale(0.98);
}

.add-car-modal,
.edit-car-modal {
    padding: 0 !important;
    overflow: hidden;
}

/* Step dots */
.car-step-dots {
    display: flex;
    gap: 8px;
    align-items: center;
}

.car-step-dot {
    width: 8px;
    height: 8px;
    border-radius: 4px;
    background: var(--glass-border);
    transition: width 0.3s ease-out, background-color 0.2s ease;
}

.car-step-dot.active {
    background: var(--primary-color);
}

.car-step-dot.current {
    width: 24px;
}

/* Step slides */
.car-modal-step {
    display: none;
    will-change: transform, opacity;
}

.car-modal-step.active {
    display: block;
    animation: stepFadeIn 0.2s ease;
}

.car-modal-step.slide-out-left {
    display: block;
    animation: stepSlideOutLeft 0.2s ease forwards;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

.car-modal-step.slide-out-right {
    display: block;
    animation: stepSlideOutRight 0.2s ease forwards;
    pointer-events: none;
    position: absolute;
    width: 100%;
}

.car-modal-step.slide-in-right {
    animation: stepSlideInRight 0.2s ease;
}

.car-modal-step.slide-in-left {
    animation: stepSlideInLeft 0.2s ease;
}

@keyframes stepFadeIn {
    from { opacity: 0; transform: translateY(8px); }
    to { opacity: 1; transform: translateY(0); }
}

@keyframes stepSlideOutLeft {
    from { transform: translateX(0); opacity: 1; }
    to { transform: translateX(-20px); opacity: 0; }
}

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

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

@keyframes stepSlideInLeft {
    from { transform: translateX(-20px); opacity: 0; }
    to { transform: translateX(0); opacity: 1; }
}

/* Step header */
.car-step-header {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 20px 20px 4px;
    gap: 4px;
}

.car-step-icon {
    font-size: 32px;
    line-height: 1;
}

.car-step-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.car-step-hint {
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 8px;
}

.field-optional {
    font-weight: 400;
    color: var(--text-tertiary);
    font-size: 11px;
}

/* ====== Transport Modal (Nowy transport) ====== */
.transport-modal {
    max-width: 380px;
    padding: 0 !important;
    overflow: hidden;
}

.transport-modal-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--glass-border);
}

.transport-modal-cancel {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 500;
    cursor: pointer;
    padding: 4px 8px;
    margin: -4px -8px;
    border-radius: 8px;
    transition: opacity 0.15s ease;
}

.transport-modal-cancel:hover {
    opacity: 0.7;
}

.transport-modal-topbar-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
}

.transport-modal-content {
    padding: 24px 24px 20px;
    text-align: center;
}

.transport-modal-icon {
    width: 56px;
    height: 56px;
    background: var(--glass-tint);
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    margin: 0 auto 12px;
}

.transport-modal-desc {
    font-size: 13px;
    color: var(--text-tertiary);
    margin: 0 0 20px;
}

.transport-modal-date-field {
    margin-bottom: 16px;
}

.transport-modal-date-field input[type="date"] {
    width: 100%;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 500;
    color-scheme: dark;
    transition: all 0.2s ease;
    text-align: center;
}

body.light-mode .transport-modal-date-field input[type="date"] {
    color-scheme: light;
}

.transport-modal-date-field input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.transport-modal-presets {
    display: flex;
    gap: 8px;
}

.transport-preset-btn {
    flex: 1;
    padding: 11px 12px;
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transport-preset-btn:hover,
.transport-preset-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.transport-modal-action {
    padding: 16px 24px 24px;
}

.transport-modal-create-btn {
    width: 100%;
    padding: 14px 20px;
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 12px;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 10px rgba(var(--primary-rgb), 0.2);
}

.transport-modal-create-btn:hover {
    transform: translateY(-2px);
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 6px 20px rgba(var(--primary-rgb), 0.2);
}

.transport-modal-create-btn:active {
    transform: scale(0.96);
}

/* Legacy date styles kept for compatibility */
.deliveries-date-field {
    margin-bottom: 16px;
}

.deliveries-date-field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.deliveries-date-field input[type="date"] {
    width: 100%;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    color-scheme: dark;
    transition: all 0.2s ease;
}

body.light-mode .deliveries-date-field input[type="date"] {
    color-scheme: light;
}

.deliveries-date-field input:focus {
    outline: none;
    border-color: var(--primary-color);
}

/* Add Car Form */
.add-car-row {
    margin-bottom: 14px;
}

.add-car-row.two-cols {
    display: flex;
    gap: 10px;
}

.add-car-row.two-cols .add-car-field {
    flex: 1;
}

.add-car-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.add-car-field label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
}

.add-car-field input,
.add-car-field textarea {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
    transition: all 0.2s ease;
}

body.light-mode .add-car-field input,
body.light-mode .add-car-field textarea {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

.add-car-field input:focus,
.add-car-field textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}

.add-car-field input::placeholder,
.add-car-field textarea::placeholder {
    color: var(--text-tertiary);
    opacity: 0.7;
}

.add-car-field textarea {
    resize: vertical;
    min-height: 60px;
}

.add-car-field.year-field {
    flex: 0 0 100px;
}

/* Year Quick Grid */
.year-quick-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    flex: 1;
    align-self: flex-end;
    margin-top: 10px;
}

.year-quick-btn {
    padding: 10px 8px;
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.year-quick-btn:hover,
.year-quick-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

/* Color Input Row */
.color-input-row {
    display: flex;
    gap: 10px;
    align-items: center;
}

.color-input-row input {
    flex: 1;
}

.color-input-row-centered {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 16px;
}

.color-input-row-centered input {
    flex: 1;
    height: 44px;
    padding: 0 14px;
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 15px;
}

.color-input-row-centered input::placeholder {
    color: var(--text-tertiary);
}

.color-input-row-centered .metalic-toggle {
    flex-shrink: 0;
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.metalic-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}

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

.metalic-toggle-track {
    position: relative;
    width: 40px;
    height: 24px;
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    transition: background 0.25s ease, border-color 0.25s ease;
    flex-shrink: 0;
}

.metalic-toggle-thumb {
    position: absolute;
    top: 2px;
    left: 2px;
    width: 18px;
    height: 18px;
    background: var(--text-tertiary);
    border-radius: 50%;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), 
                background 0.2s ease,
                width 0.15s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.metalic-toggle input[type="checkbox"]:active + .metalic-toggle-track .metalic-toggle-thumb {
    width: 22px;
}

.metalic-toggle input[type="checkbox"]:checked:active + .metalic-toggle-track .metalic-toggle-thumb {
    transform: translateX(12px);
}

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

.metalic-toggle input[type="checkbox"]:checked + .metalic-toggle-track .metalic-toggle-thumb {
    transform: translateX(16px);
    background: #fff;
}

.metalic-toggle-label {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 500;
}

/* Color Quick Grid */
.color-quick-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 10px;
}

.color-quick-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-quick-btn:hover,
.color-quick-btn.active {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.3);
    color: var(--text-primary);
}

.color-quick-btn .color-dot {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    border: 1px solid rgba(255, 255, 255, 0.2);
}

body.light-mode .color-quick-btn .color-dot {
    border-color: rgba(0, 0, 0, 0.15);
}

/* Stats Modal Styles */
.stats-modal {
    max-width: 460px;
}

.stats-body {
    padding: 16px 24px;
}

.stats-summary-cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 20px;
}

.stats-summary-card {
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px 10px;
    text-align: center;
}

.stats-summary-card .stats-summary-value {
    font-size: 24px;
    font-weight: 700;
    color: var(--primary-color);
    line-height: 1.2;
}

.stats-summary-card .stats-summary-label {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

.stats-sections {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.stats-section {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 14px;
}

body.light-mode .stats-section {
    background: rgba(0, 0, 0, 0.02);
}

.stats-section-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--glass-border);
}

.stats-section-content {
    max-height: 180px;
    overflow-y: auto;
}

.stats-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px dotted rgba(255, 255, 255, 0.05);
}

body.light-mode .stats-row {
    border-bottom-color: rgba(0, 0, 0, 0.05);
}

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

.stats-row-label {
    font-size: 12px;
    color: var(--text-secondary);
}

.stats-row-value {
    font-size: 12px;
    font-weight: 600;
    color: var(--primary-color);
}

.stats-empty {
    text-align: center;
    padding: 16px;
    color: var(--text-tertiary);
    font-size: 12px;
}

/* Print Modal Styles */
.print-modal {
    max-width: 400px;
}

.print-list {
    padding: 16px 20px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 350px;
    overflow-y: auto;
}

.print-transport-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--glass-tint);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    width: 100%;
}

.print-transport-option:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: var(--primary-color);
}

.print-option-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.print-option-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.print-option-text strong {
    font-weight: 600;
    color: var(--text-primary);
}

.print-option-text span {
    font-size: 12px;
    color: var(--text-tertiary);
}

.print-transport-option svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

/* Mobile Responsive - Deliveries Panel */
@media (max-width: 767px) {
    .deliveries-quick-actions {
        flex-direction: column;
    }
    
    .deliveries-quick-btn {
        padding: 14px;
    }
    
    .deliveries-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .deliveries-stat-value {
        font-size: 20px;
    }
    
    .transport-card-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .transport-card-right {
        width: 100%;
        justify-content: flex-end;
    }
    
    .car-card-main {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .car-card-actions {
        margin-top: 10px;
        align-self: flex-end;
    }
    
    .add-car-row.two-cols {
        flex-direction: column;
    }
    
    .add-car-row .year-quick-grid {
        margin-top: 10px;
    }
    
    .year-quick-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

/* ============================================================================
   CAR WIZARD MODAL STYLES
   ============================================================================ */

.car-wizard-modal {
    max-width: 400px;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding-bottom: 8px;
}

.wizard-progress {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 16px;
}

/* Progress bar style (like onboarding) — DEPRECATED, replaced by ring */
.wizard-progress-bar-container {
    display: none;
}

.wizard-progress-bar {
    display: none;
}

/* Wizard Header Row — Zamknij + Ring */
.wizard-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 4px 8px;
    min-height: 40px;
}

.wizard-header-cancel {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    padding: 6px 8px;
    font-family: inherit;
    transition: opacity 0.2s;
    white-space: nowrap;
    position: relative;
    z-index: 10;
    pointer-events: auto;
}

.wizard-header-cancel:active {
    opacity: 0.5;
}

.wizard-dots {
    display: flex;
    align-items: center;
    gap: 6px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    contain: layout style;
}

.wizard-dot {
    height: 8px;
    width: 8px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.15);
    transition: width 0.3s ease, background-color 0.25s ease;
    will-change: width;
}

body.light-mode .wizard-dot {
    background: rgba(0, 0, 0, 0.12);
}

.wizard-dot.active {
    width: 24px;
    background: var(--primary-color);
}

.wizard-dot.done {
    background: var(--primary-color);
    opacity: 0.6;
}

.offer-wizard-overlay .wizard-dot {
    transition: background-color 0.16s ease, opacity 0.16s ease;
    will-change: auto;
}

.wizard-header-right {
    display: flex;
    align-items: center;
    gap: 4px;
}

/* Wizard Suggestions Button — minimal icon */
.wizard-suggestions-btn {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 6px;
    border-radius: 50%;
    transition: all 0.2s;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-suggestions-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: var(--primary-color);
}

.wizard-suggestions-btn:active {
    opacity: 0.5;
}

body.light-mode .wizard-suggestions-btn:hover {
    background: rgba(0, 0, 0, 0.05);
}

/* Edit Modal Header Row */
.edit-modal-header-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
}
.edit-modal-header-row .custom-modal-title {
    margin-bottom: 0;
    flex: 1;
}
.edit-suggestions-btn {
    background: rgba(100, 210, 255, 0.10);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(100, 210, 255, 0.18);
    color: #64D2FF;
    font-size: 0.68rem;
    font-weight: 600;
    cursor: pointer;
    padding: 4px 11px;
    border-radius: 50px;
    transition: all 0.22s cubic-bezier(0.4, 0, 0.2, 1);
    font-family: inherit;
    display: flex;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
    flex-shrink: 0;
}
.edit-suggestions-btn svg {
    flex-shrink: 0;
}
.edit-suggestions-btn:hover {
    background: rgba(100, 210, 255, 0.20);
    transform: translateY(-1px);
}
.edit-suggestions-btn:active {
    transform: scale(0.95);
}
body.light-mode .edit-suggestions-btn {
    background: rgba(0, 122, 255, 0.06);
    border-color: rgba(0, 122, 255, 0.13);
    color: #007AFF;
}
body.light-mode .edit-suggestions-btn:hover {
    background: rgba(0, 122, 255, 0.14);
}

/* ===== SUGGESTIONS MANAGEMENT PANEL ===== */
.suggestions-panel-overlay {
    z-index: 100010;
}
.suggestions-panel-modal {
    max-width: 520px;
    width: 92vw;
    max-height: 85vh;
    display: flex;
    flex-direction: column;
    background: rgba(28, 28, 35, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.55);
    overflow: hidden;
}
body.light-mode .suggestions-panel-modal {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.14);
}

.suggestions-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    position: relative;
}
body.light-mode .suggestions-panel-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}
.suggestions-panel-header h3 {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    white-space: nowrap;
}
.suggestions-panel-cancel {
    background: none;
    border: none;
    color: var(--primary-color);
    font-size: 15px;
    font-weight: 400;
    cursor: pointer;
    padding: 4px 8px;
    font-family: inherit;
    transition: opacity 0.2s;
    z-index: 1;
}
.suggestions-panel-cancel:active {
    opacity: 0.5;
}
.suggestions-panel-header-spacer {
    width: 60px;
    flex-shrink: 0;
}

.suggestions-panel-search {
    position: relative;
    padding: 8px 16px;
    display: flex;
    align-items: center;
    gap: 0;
}
.suggestions-panel-search svg {
    position: absolute;
    left: 28px;
    flex-shrink: 0;
    opacity: 0.35;
    pointer-events: none;
}
.suggestions-panel-search input {
    flex: 1;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    border-radius: 10px;
    padding: 10px 12px 10px 36px;
    font-size: 15px;
    color: var(--text-primary);
    outline: none;
    font-family: inherit;
    transition: background 0.2s;
}
.suggestions-panel-search input::placeholder {
    color: var(--text-tertiary);
}
.suggestions-panel-search input:focus {
    background: rgba(255, 255, 255, 0.1);
}
body.light-mode .suggestions-panel-search input {
    background: rgba(0, 0, 0, 0.04);
}
body.light-mode .suggestions-panel-search input:focus {
    background: rgba(0, 0, 0, 0.06);
}

.suggestions-panel-content {
    flex: 1;
    overflow-y: auto;
    padding: 4px 16px 16px;
    overscroll-behavior: contain;
}

.suggestions-section {
    margin-bottom: 20px;
}
.suggestions-section:last-child {
    margin-bottom: 0;
}
.suggestions-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 10px;
    padding: 8px 0 6px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
body.light-mode .suggestions-section-header {
    border-bottom-color: rgba(0, 0, 0, 0.04);
}
.suggestions-count {
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: none;
    letter-spacing: 0;
}

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

.suggestion-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    padding: 6px 8px 6px 10px;
    font-size: 13px;
    color: var(--text-primary);
    transition: all 0.2s ease;
    max-width: 100%;
}
.suggestion-tag:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.15);
}
body.light-mode .suggestion-tag {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}
body.light-mode .suggestion-tag:hover {
    background: rgba(0, 0, 0, 0.07);
}

.suggestion-tag.excluded {
    background: rgba(255, 69, 58, 0.06);
    border-color: rgba(255, 69, 58, 0.1);
    opacity: 0.5;
}
.suggestion-tag.excluded .suggestion-tag-text {
    text-decoration: line-through;
    color: var(--text-tertiary);
}
.suggestion-tag.excluded:hover {
    opacity: 0.8;
    background: rgba(255, 69, 58, 0.10);
}

.suggestion-tag-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 220px;
}

.suggestion-tag-edit,
.suggestion-tag-delete,
.suggestion-tag-restore,
.suggestion-tag-confirm,
.suggestion-tag-cancel-btn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 6px;
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.18s ease;
    flex-shrink: 0;
    line-height: 1;
    min-width: 28px;
    min-height: 28px;
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
}
.suggestion-tag-edit {
    color: var(--text-tertiary);
    opacity: 0.7;
}
.suggestion-tag-edit svg {
    width: 14px;
    height: 14px;
}
.suggestion-tag-edit:hover {
    opacity: 1;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
}
.suggestion-tag-delete {
    color: var(--text-tertiary);
    font-size: 18px;
    font-weight: 600;
    opacity: 0.6;
    line-height: 0.8;
}
.suggestion-tag-delete:hover {
    opacity: 1;
    color: #FF453A;
    background: rgba(255, 69, 58, 0.1);
}
.suggestion-tag-restore {
    color: var(--primary-color);
    opacity: 0.7;
}
.suggestion-tag-restore:hover {
    opacity: 1;
    background: rgba(var(--primary-rgb), 0.1);
}
.suggestion-tag-confirm {
    color: #30D158;
    background: rgba(48, 209, 88, 0.1);
}
.suggestion-tag-confirm svg {
    width: 14px;
    height: 14px;
}
.suggestion-tag-confirm:hover {
    background: rgba(48, 209, 88, 0.2);
}
.suggestion-tag-cancel-btn {
    color: #FF453A;
    background: rgba(255, 69, 58, 0.1);
}
.suggestion-tag-cancel-btn svg {
    width: 14px;
    height: 14px;
}
.suggestion-tag-cancel-btn:hover {
    background: rgba(255, 69, 58, 0.2);
}

.suggestion-tag-edit-input {
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1.5px solid rgba(100, 210, 255, 0.4) !important;
    border-radius: 6px !important;
    padding: 4px 8px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
    color: var(--text-primary) !important;
    outline: none !important;
    font-family: inherit !important;
    min-width: 80px;
    max-width: 180px;
    flex: 1;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    -webkit-user-select: text;
    user-select: text;
    touch-action: manipulation;
}
.suggestion-tag-edit-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}
body.light-mode .suggestion-tag-edit-input {
    background: rgba(0, 0, 0, 0.03) !important;
    border-color: rgba(0, 122, 255, 0.4) !important;
}

.suggestions-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
    gap: 8px;
}
.suggestions-empty svg {
    opacity: 0.3;
}
.suggestions-empty p {
    font-size: 0.82rem;
    margin: 0;
}

.wizard-ring-wrapper {
    position: relative;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-ring-svg {
    display: block;
}

.wizard-ring-bg {
    stroke: rgba(255, 255, 255, 0.08);
}

body.light-mode .wizard-ring-bg {
    stroke: rgba(0, 0, 0, 0.08);
}

.wizard-ring-fill {
    stroke: var(--ios-green);
    transition: stroke-dashoffset 0.6s cubic-bezier(0.4, 0, 0.2, 1), stroke 0.6s ease;
}

.wizard-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.wizard-step-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--glass-border);
    transition: all 0.3s ease;
}

.wizard-step-dot.active {
    background: var(--primary-color);
    transform: scale(1.2);
    box-shadow: 0 0 8px var(--primary-color);
}

.wizard-step-dot.completed {
    background: var(--success-color);
}

/* Add Another Prompt */
.add-another-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    padding: 0;
    text-align: center;
    flex: 1;
    min-height: 0;
}

.add-another-success-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex: 1;
    padding: 32px 24px 20px;
    gap: 16px;
}

.add-another-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(var(--ios-green-rgb), 0.15);
    border: 1px solid rgba(var(--ios-green-rgb), 0.25);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: successPop 0.5s cubic-bezier(0.34, 1.56, 0.64, 1);
}

body.light-mode .add-another-icon {
    background: rgba(var(--ios-green-rgb), 0.1);
    border-color: rgba(var(--ios-green-rgb), 0.2);
}

.add-another-icon svg {
    width: 28px;
    height: 28px;
    stroke: var(--ios-green);
    stroke-width: 2.5;
}

.add-another-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
}

.add-another-actions {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 20px;
    padding: 0 24px 32px;
    width: 100%;
    box-sizing: border-box;
}

.add-another-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    max-width: 260px;
    padding: 15px 24px;
    font-size: 1rem;
    font-weight: 600;
    color: white;
    background:
        linear-gradient(135deg, rgba(0, 184, 217, 0.7), rgba(180, 80, 220, 0.7));
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow:
        0 2px 12px rgba(0, 184, 217, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15);
    letter-spacing: -0.01em;
}

.add-another-btn:hover {
    transform: translateY(-1px);
    box-shadow:
        0 4px 20px rgba(0, 184, 217, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2);
    background:
        linear-gradient(135deg, rgba(0, 184, 217, 0.8), rgba(180, 80, 220, 0.8));
}

.add-another-btn:active {
    transform: scale(0.97);
    box-shadow:
        0 1px 6px rgba(0, 184, 217, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.add-another-btn svg {
    width: 17px;
    height: 17px;
    flex-shrink: 0;
}

.add-identical-btn {
    background:
        linear-gradient(135deg, rgba(52, 199, 89, 0.7), rgba(48, 176, 199, 0.7)) !important;
    box-shadow:
        0 2px 12px rgba(52, 199, 89, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}

.add-identical-btn:hover {
    background:
        linear-gradient(135deg, rgba(52, 199, 89, 0.85), rgba(48, 176, 199, 0.85)) !important;
    box-shadow:
        0 4px 20px rgba(52, 199, 89, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ── "Dodaj na Ovoko" button in success prompt ── */
.add-to-ovoko-btn {
    background:
        linear-gradient(135deg, rgba(251, 146, 60, 0.7), rgba(245, 158, 11, 0.7)) !important;
    box-shadow:
        0 2px 12px rgba(251, 146, 60, 0.2),
        inset 0 1px 0 rgba(255, 255, 255, 0.15) !important;
}
.add-to-ovoko-btn:hover {
    background:
        linear-gradient(135deg, rgba(251, 146, 60, 0.85), rgba(245, 158, 11, 0.85)) !important;
    box-shadow:
        0 4px 20px rgba(251, 146, 60, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.2) !important;
}

/* ═══════════════════════════════════════════════════════════
   Success Prompt (Tile-based)
   ═══════════════════════════════════════════════════════════ */
.success-prompt {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 32px 28px;
    text-align: center;
    animation: successPromptIn 0.3s ease-out;
    width: 100%;
    box-sizing: border-box;
}

@keyframes successPromptIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* New clean checkmark icon */
.success-icon-wrapper {
    width: 64px;
    height: 64px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
}

.success-icon-bg {
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(16, 185, 129, 0.05) 100%);
    border: 2px solid #10b981;
    animation: successPulse 0.4s ease-out;
}

@keyframes successPulse {
    0% { transform: scale(0.8); opacity: 0; }
    50% { transform: scale(1.05); }
    100% { transform: scale(1); opacity: 1; }
}

.success-icon {
    width: 32px;
    height: 32px;
    color: #10b981;
    position: relative;
    z-index: 1;
    animation: successCheckIn 0.3s ease-out 0.1s both;
}

@keyframes successCheckIn {
    0% { 
        opacity: 0;
        transform: scale(0.5);
    }
    100% { 
        opacity: 1;
        transform: scale(1);
    }
}

.success-title {
    font-size: 1.35rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.02em;
    margin-bottom: 24px;
}

/* Action tiles grid — full-width gradient buttons */
.success-actions-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
    width: 100%;
    max-width: 340px;
    margin: 0 auto;
}

.success-action-tile {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 24px;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
    font-size: 15px;
    font-weight: 600;
    color: white;
    position: relative;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.success-action-tile:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.success-action-tile:active {
    transform: scale(0.98);
}

.success-action-tile svg {
    width: 18px;
    height: 18px;
}

/* New tile — blue-purple gradient */
.success-new-tile {
    background: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
}

/* Identical tile — teal gradient */
.success-identical-tile {
    background: linear-gradient(135deg, #10b981 0%, #14b8a6 100%);
}

/* Ovoko tile — orange gradient */
.success-ovoko-tile {
    background: linear-gradient(135deg, #f59e0b 0%, #f97316 100%);
}

.success-tile-icon {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.success-tile-icon svg {
    stroke: currentColor;
    opacity: 0.95;
}

.success-tile-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

.success-tile-label {
    font-size: 15px;
    font-weight: 600;
    color: inherit;
}

.success-tile-desc {
    display: none; /* Hide description for cleaner look */
}

/* Countdown */
.success-countdown-area {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    width: 100%;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
}

.success-countdown-text {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
}

.success-countdown-text .countdown-number {
    font-weight: 600;
    color: var(--primary-color);
}

.success-countdown-bar {
    width: 100%;
    height: 4px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

body.light-mode .success-countdown-bar {
    background: rgba(0, 0, 0, 0.06);
}

.success-countdown-fill {
    height: 100%;
    width: 100%;
    background: linear-gradient(90deg, var(--primary-color), #a855f7);
    border-radius: 2px;
    transform-origin: left;
}

/* Keyboard shortcuts hint */
.success-shortcuts {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    width: 100%;
    max-width: 340px;
}

.success-shortcut {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.success-shortcut kbd {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    padding: 3px 6px;
    font-size: 11px;
    font-family: inherit;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
}

body.light-mode .success-shortcuts {
    border-top-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .success-shortcut kbd {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Light mode adjustments */
body.light-mode .success-prompt {
    background: transparent;
}

body.light-mode .success-action-tile {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

/* Mobile */
@media (max-width: 480px) {
    .success-prompt {
        padding: 28px 24px 24px;
    }

    .success-icon-wrapper {
        width: 56px;
        height: 56px;
    }

    .success-icon {
        width: 28px;
        height: 28px;
    }

    .success-title {
        font-size: 1.25rem;
        margin-bottom: 20px;
    }

    .success-actions-grid {
        max-width: 100%;
    }

    .success-action-tile {
        padding: 14px 20px;
        font-size: 14px;
    }

    .success-shortcuts {
        gap: 16px;
        max-width: 100%;
    }
}

/* ═══════════════════════════════════════════════════════════
   Ovoko Wizard Preview (OWP)
   ═══════════════════════════════════════════════════════════ */
.ovoko-preview-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--text-secondary);
    font-size: 14px;
}

/* ═══════════════════════════════════════════════════════════════════
   OWP MODAL — Ovoko Wizard Preview (modern design)
   ═══════════════════════════════════════════════════════════════════ */

.owp-modal {
    display: flex;
    flex-direction: column;
    width: 100%;
    max-width: 520px;
    max-height: 90vh;
    margin: 0 auto;
    background: var(--bg-secondary);
    border-radius: 14px;
    overflow: hidden;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.5);
    animation: owpModalIn 0.2s ease-out;
}

@keyframes owpModalIn {
    from {
        opacity: 0;
        transform: scale(0.95) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

/* OWP Header */
.owp-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-color);
}

.owp-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 8px;
    background: #10b981;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.owp-header-icon svg {
    color: white;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.2));
}

.owp-header-text {
    flex: 1;
    min-width: 0;
}

.owp-title {
    font-size: 15px;
    font-weight: 600;
    margin: 0;
    color: var(--text-primary);
}

.owp-subtitle {
    font-size: 11px;
    color: var(--text-tertiary);
    margin: 0;
}

.owp-close-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: none;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.owp-close-btn svg {
    color: var(--text-tertiary);
    transition: color 0.15s;
}

.owp-close-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

.owp-close-btn:hover svg {
    color: var(--text-primary);
}

/* OWP Body */
.owp-body {
    flex: 1;
    overflow-y: auto;
    padding: 10px 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* Source card */
.owp-source-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    background: rgba(255, 102, 0, 0.06);
    border: 1px solid rgba(255, 102, 0, 0.12);
    border-radius: 8px;
}

.owp-source-thumb {
    width: 40px;
    height: 40px;
    border-radius: 6px;
    overflow: hidden;
    background: var(--bg-tertiary);
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.owp-source-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.owp-source-thumb.owp-thumb-empty {
    background: var(--bg-tertiary);
}

.owp-source-thumb.owp-thumb-empty svg {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.owp-source-info {
    flex: 1;
    min-width: 0;
}

.owp-source-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #ff6600;
    margin-bottom: 2px;
}

.owp-source-title {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
    line-height: 1.2;
}

.owp-source-price {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
}

.owp-source-price svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.owp-price-allegro {
    color: var(--text-tertiary);
    text-decoration: line-through;
    font-weight: 500;
}

.owp-price-ovoko {
    color: #10b981;
    font-weight: 700;
}

/* Form sections */
.owp-form {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.owp-section {
    background: var(--bg-tertiary);
    border: 1px solid var(--border-color);
    border-radius: 8px;
    overflow: hidden;
}

.owp-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.02);
    border-bottom: 1px solid var(--border-color);
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.owp-section-header svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.owp-section-content {
    padding: 8px 10px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Grid layouts */
.owp-grid {
    display: grid;
    gap: 6px;
}

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

/* 3-col grid */
.owp-grid-3 { 
    grid-template-columns: repeat(3, 1fr);
}

/* Form fields */
.owp-field {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.owp-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-secondary);
}

.owp-required {
    color: #ef4444;
}

.owp-input,
.owp-modal input[type="text"],
.owp-modal input[type="number"],
.owp-modal select,
.owp-modal textarea {
    width: 100% !important;
    min-width: 0 !important;
    padding: 6px 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    color: var(--text-primary);
    background: var(--bg-primary) !important;
    border: 1px solid var(--border-color) !important;
    border-radius: 6px !important;
    outline: none;
    transition: all 0.15s ease;
    box-sizing: border-box;
    box-shadow: none !important;
}

.owp-input:focus,
.owp-modal input[type="text"]:focus,
.owp-modal input[type="number"]:focus {
    border-color: #10b981 !important;
    box-shadow: 0 0 0 2px rgba(16, 185, 129, 0.15) !important;
}

.owp-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.owp-select {
    cursor: pointer;
    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='%23888' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 28px;
}

.owp-textarea {
    min-height: 36px;
    resize: vertical;
    line-height: 1.3;
}

/* Category trigger */
.owp-cat-trigger {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 6px;
    padding: 6px 8px;
    background: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.owp-cat-trigger:hover {
    border-color: var(--border-hover);
    background: rgba(255, 255, 255, 0.02);
}

.owp-cat-trigger svg {
    color: var(--text-tertiary);
    flex-shrink: 0;
    transition: transform 0.2s;
}

.owp-cat-text {
    flex: 1;
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.owp-cat-trigger.has-cat .owp-cat-text {
    color: var(--text-primary);
    font-weight: 500;
}

/* Price wrap */
.owp-price-wrap {
    position: relative;
    display: flex;
    align-items: center;
}

.owp-price-wrap .owp-input {
    padding-right: 36px;
}

.owp-price-suffix {
    position: absolute;
    right: 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Part number wrap */
.owp-partnum-wrap {
    display: flex;
    gap: 6px;
}

.owp-partnum-wrap .owp-input {
    flex: 1;
}

.owp-add-partnum,
.owp-remove-partnum {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid var(--border-color);
    background: var(--bg-primary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.owp-add-partnum svg,
.owp-remove-partnum svg {
    color: var(--text-tertiary);
    transition: color 0.15s;
}

.owp-add-partnum:hover {
    border-color: #10b981;
    background: rgba(16, 185, 129, 0.1);
}

.owp-add-partnum:hover svg {
    color: #10b981;
}

.owp-remove-partnum:hover {
    border-color: #ef4444;
    background: rgba(239, 68, 68, 0.1);
}

.owp-remove-partnum:hover svg {
    color: #ef4444;
}

.owp-partnum2-row {
    margin-top: 4px;
}

/* Car match */
.owp-car-match {
    margin-top: 4px;
    padding: 6px 8px;
    border-radius: 6px;
    font-size: 11px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.owp-car-match.loading {
    background: var(--bg-primary);
    color: var(--text-tertiary);
}

.owp-car-match.found {
    background: rgba(16, 185, 129, 0.1);
    border: 1px solid rgba(16, 185, 129, 0.2);
    color: #10b981;
}

.owp-car-match.not-found {
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    color: #f59e0b;
}

/* Footer */
.owp-footer {
    display: flex;
    gap: 8px;
    padding: 10px 14px;
    border-top: 1px solid var(--border-color);
}

.owp-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 12px;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    border: none;
    cursor: pointer;
    transition: all 0.15s ease;
}

.owp-btn svg {
    flex-shrink: 0;
}

.owp-btn-cancel {
    background: rgba(255, 255, 255, 0.05);
    color: var(--text-secondary);
    border: 1px solid var(--border-color);
}

.owp-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: var(--border-hover);
}

.owp-btn-submit {
    background: #10b981;
    color: white;
}

.owp-btn-submit:hover {
    background: #059669;
}

.owp-btn-submit:active {
    transform: scale(0.98);
}

/* Light mode */
body.light-mode .owp-modal {
    background: #ffffff;
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12);
}

body.light-mode .owp-close-btn {
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .owp-close-btn:hover {
    background: rgba(0, 0, 0, 0.08);
}

body.light-mode .owp-source-card {
    background: linear-gradient(135deg, rgba(255, 102, 0, 0.06) 0%, rgba(255, 102, 0, 0.02) 100%);
    border-color: rgba(255, 102, 0, 0.12);
}

body.light-mode .owp-section {
    background: #fafafa;
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .owp-section-header {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .owp-input {
    background: white;
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .owp-cat-trigger {
    background: white;
}

body.light-mode .owp-cat-trigger:hover {
    background: rgba(0, 0, 0, 0.02);
}

body.light-mode .owp-btn-cancel {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .owp-btn-cancel:hover {
    background: rgba(0, 0, 0, 0.08);
}

/* Mobile */
@media (max-width: 600px) {
    .owp-modal {
        max-width: 100%;
        border-radius: 12px 12px 0 0;
        max-height: 95vh;
    }

    .owp-header {
        padding: 8px 12px;
    }

    .owp-header-icon {
        width: 32px;
        height: 32px;
        border-radius: 6px;
    }

    .owp-header-icon svg {
        width: 16px;
        height: 16px;
    }

    .owp-title {
        font-size: 14px;
    }

    .owp-body {
        padding: 8px 12px;
    }

    .owp-grid-2,
    .owp-grid-3 {
        grid-template-columns: 1fr 1fr;
    }

    .owp-footer {
        padding: 8px 12px;
    }

    .owp-btn {
        padding: 10px;
    }
}

.add-another-countdown-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.add-another-countdown {
    font-size: 13px;
    color: var(--text-tertiary);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.countdown-number {
    font-weight: 600;
    color: var(--primary-color);
    font-size: 13px;
}

.countdown-bar {
    width: 120px;
    height: 3px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 2px;
    overflow: hidden;
}

body.light-mode .countdown-bar {
    background: rgba(0, 0, 0, 0.06);
}

.countdown-bar-fill {
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, var(--primary-color), rgba(180, 80, 220, 0.6));
    border-radius: 2px;
}

@keyframes countdownShrink {
    from { width: 100%; }
    to { width: 0%; }
}

@keyframes successPop {
    0% {
        transform: scale(0);
        opacity: 0;
    }
    50% {
        transform: scale(1.2);
    }
    100% {
        transform: scale(1);
        opacity: 1;
    }
}

/* wizard-subtitle removed — replaced by ring progress */

.car-wizard-step {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin: 16px 0;
    flex: 1;
    justify-content: center;
}

.car-wizard-step .car-form-field {
    margin-bottom: 0;
}

.car-wizard-step .car-form-field.year-field {
    text-align: center;
}

.car-wizard-step .car-form-field.year-field input {
    text-align: center;
    font-size: 24px;
    font-weight: 700;
    padding: 16px;
}

/* Year Quick Buttons */
.year-quick-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.year-quick-btn {
    padding: 10px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.year-quick-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
}

/* Engine Suggestions */
.engine-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
}

.engine-suggest-btn {
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.engine-suggest-btn:hover {
    background: var(--glass-hover);
    border-color: var(--primary-color);
}

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

/* Version Suggestions */
.version-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    justify-content: center;
    margin-top: 4px;
}

.version-suggest-btn {
    padding: 6px 10px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 12px;
    font-style: italic;
    cursor: pointer;
    transition: all 0.2s ease;
}

.version-suggest-btn:hover {
    background: var(--glass-hover);
    border-color: var(--primary-color);
}

.version-suggest-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    font-style: normal;
}

/* Color Suggestions */
.color-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-top: 8px;
}

.color-suggest-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 12px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.color-suggest-btn:hover {
    background: var(--glass-hover);
    border-color: var(--primary-color);
}

.color-suggest-btn.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
}

.color-suggest-btn .color-dot {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    flex-shrink: 0;
}

/* Metalic Toggle */
.metalic-toggle {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--glass-border);
}

.metalic-switch-row {
    display: flex;
    align-items: center;
    gap: 12px;
}

.metalic-switch-label {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.toggle-checkbox {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

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

.toggle-checkbox .toggle-label {
    font-size: 14px;
    color: var(--text-primary);
}

/* Wizard Buttons */
.wizard-buttons {
    display: flex;
    gap: 16px;
    justify-content: center;
    position: relative;
    z-index: 10;
    min-height: 44px;
    flex-shrink: 0;
    padding: 28px 48px 12px;
    margin-top: auto;
    pointer-events: auto;
}

.wizard-buttons .custom-modal-btn {
    flex: 0 0 auto !important;
    width: 130px !important;
    max-width: 130px !important;
}

.wizard-buttons .custom-modal-btn.disabled {
    opacity: 0.35;
    cursor: not-allowed;
    filter: grayscale(0.5);
}

/* Wizard button layout modes */
.wizard-buttons .wizard-next-btn {
    transition: flex 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                opacity 0.3s ease,
                max-width 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                padding 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                margin 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                border-width 0.35s ease;
    overflow: hidden;
    white-space: nowrap;
}

.wizard-buttons .wizard-next-btn.wizard-next-visible {
    flex: 0 0 auto !important;
    width: 130px !important;
    max-width: 130px !important;
    opacity: 1;
    padding: 12px 16px;
}

.wizard-buttons .wizard-next-btn.wizard-next-hidden {
    flex: 0;
    max-width: 0;
    min-width: 0;
    opacity: 0;
    padding: 0;
    border-width: 0;
    margin: 0;
    pointer-events: none;
}

.wizard-buttons .wizard-cancel-btn {
    flex: 0 0 auto !important;
    width: 130px !important;
    max-width: 130px !important;
    transition: all 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    white-space: nowrap;
}

.wizard-buttons .wizard-cancel-btn.wizard-cancel-full {
    flex: 0 0 auto !important;
    width: 180px !important;
    max-width: 180px !important;
}

.wizard-buttons.single-btn {
    gap: 0;
}

/* Mobile styles moved to mobile.css */

/* ============================================================================
   SALES PANEL STYLES
   ============================================================================ */

/* Month Header */
.sales-month-header,
.sales-day-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    margin-bottom: 16px;
}

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

.sales-month-nav:hover {
    background: var(--glass-hover);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sales-month-display {
    font-size: 18px;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
    text-align: center;
    cursor: pointer;
    border-radius: 10px;
    padding: 4px 8px;
    transition: background 0.2s ease;
}

.sales-month-display:hover {
    background: var(--glass-hover);
}

.sales-month-display:active {
    background: var(--glass-bg);
}

/* Sales Picker Modal (Day & Month) */
.sales-picker-overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
    padding: 20px;
}

.sales-picker-overlay.active {
    opacity: 1;
}

.sales-picker-modal {
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
    border-radius: 18px;
    padding: 20px;
    width: 100%;
    max-width: 360px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
    transform: scale(0.9) translateY(20px);
    transition: transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.sales-picker-overlay.active .sales-picker-modal {
    transform: scale(1) translateY(0);
}

.sp-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.sp-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    flex: 1;
}

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

.sp-nav:hover {
    background: var(--glass-hover);
    color: var(--primary-color);
    border-color: var(--primary-color);
}

.sp-weekdays {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 2px;
    margin-bottom: 6px;
}

.sp-weekdays span {
    text-align: center;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-tertiary);
    padding: 4px 0;
}

.sp-days {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    gap: 3px;
}

.sp-day {
    aspect-ratio: 1;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

.sp-day:hover {
    background: var(--glass-hover);
}

.sp-day.other-month {
    color: var(--text-tertiary);
    opacity: 0.5;
}

.sp-day.today {
    background: var(--glass-bg);
    border: 1.5px solid var(--primary-color);
    font-weight: 700;
}

.sp-day.selected {
    background: var(--ios-blue);
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(var(--ios-blue-rgb), 0.3);
}

.sp-day.has-activity:not(.selected)::after {
    content: '';
    position: absolute;
    bottom: 3px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-color);
}

.sp-months {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 16px;
}

.sp-month {
    padding: 14px 8px;
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s ease;
    text-align: center;
}

.sp-month:hover {
    background: var(--glass-hover);
    border-color: var(--primary-color);
}

.sp-month.today {
    border-color: var(--primary-color);
    background: var(--glass-bg);
    font-weight: 600;
}

.sp-month.selected {
    background: var(--ios-blue);
    color: white;
    border-color: var(--ios-blue);
    font-weight: 700;
    box-shadow: 0 2px 8px rgba(var(--ios-blue-rgb), 0.3);
}

.sp-footer {
    display: flex;
    gap: 10px;
    margin-top: 16px;
}

.sp-btn {
    flex: 1;
    padding: 10px;
    border-radius: 10px;
    border: 1px solid var(--glass-border);
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sp-btn.sp-today {
    background: var(--ios-blue);
    color: white;
    border-color: var(--ios-blue);
}

.sp-btn.sp-today:hover {
    opacity: 0.85;
}

.sp-btn.sp-cancel {
    background: var(--bg-secondary);
    color: var(--text-secondary);
}

.sp-btn.sp-cancel:hover {
    background: var(--glass-hover);
}

/* Stats Grid */
.sales-stats-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 16px;
}

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

.sales-stats-grid.sales-stats-3-2 {
    grid-template-columns: repeat(3, 1fr);
}

.sales-stats-grid.sales-stats-3-2 .sales-stat-card {
    grid-column: span 1;
}

.sales-stats-grid.sales-stats-daily {
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.sales-stat-card.cash {
    border-color: rgba(var(--ios-green-rgb), 0.3);
}

.sales-stat-card.cash .sales-stat-value {
    color: var(--ios-green);
    font-size: 14px;
}

.sales-stats-grid.sales-stats-6 {
    grid-template-columns: repeat(3, 1fr);
}

.sales-stat-card {
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 12px 8px;
    text-align: center;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sales-stat-value {
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sales-stat-card.warn {
    border-color: rgba(255, 149, 0, 0.25);
}

.sales-stat-card.warn .sales-stat-value {
    color: #ff9500;
    font-size: 16px;
}

.sales-stat-card.danger {
    border-color: rgba(var(--ios-red-rgb), 0.25);
}

.sales-stat-card.danger .sales-stat-value {
    color: var(--ios-red);
    font-size: 16px;
}

.sales-stat-card.delivery-cost {
    border-color: rgba(175, 130, 255, 0.25);
}

.sales-stat-card.delivery-cost .sales-stat-value {
    color: #af82ff;
    font-size: 16px;
}

.sales-stat-card.insight {
    border-color: rgba(100, 160, 255, 0.2);
}

.sales-stat-card.insight .sales-stat-value {
    color: #64a0ff;
    font-size: 16px;
}

.sales-stat-card.comparison {
    border-color: rgba(var(--ios-green-rgb), 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.sales-stat-card.comparison .sales-prev-value {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

.sales-stat-card.highlight {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.sales-stat-card.highlight .sales-stat-value,
.sales-stat-card.highlight .sales-stat-label {
    color: var(--primary-color);
}

.sales-stat-value.negative-value {
    color: var(--ios-red) !important;
}

/* Hero Stat Card — full-width primary metric */
.sales-stat-card.hero-stat {
    grid-column: 1 / -1;
    padding: 20px 16px;
    text-align: center;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.1) 0%, rgba(var(--primary-rgb), 0.03) 100%);
    border-color: rgba(var(--primary-rgb), 0.2);
    border-radius: 16px;
}

.sales-stat-card.hero-stat .sales-stat-value {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    color: var(--primary-color);
}

.sales-stat-card.hero-stat .sales-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-top: 4px;
}

.sales-stat-label {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 4px;
}

/* Actions Row */
.sales-actions-row {
    display: flex;
    gap: 10px;
}

.sales-actions-row .ios-button {
    flex: 1;
}

/* ====== SALES QUICK ACTIONS ====== */
.sales-quick-actions {
    display: flex;
    gap: 8px;
    margin-bottom: 16px;
    padding: 2px 0;
}

/* Sync indicator */
.sync-indicator {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 0;
    background: rgba(var(--primary-rgb), 0.1);
    border: none;
    border-radius: 12px;
    margin-bottom: 0;
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.3s ease;
}
.sync-indicator.show {
    opacity: 1;
    max-height: 50px;
    padding: 10px 16px;
    margin-bottom: 12px;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}
.sync-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(var(--primary-rgb), 0.3);
    border-top-color: var(--primary-color);
    border-radius: 50%;
    animation: syncSpin 0.8s linear infinite;
}
@keyframes syncSpin {
    to { transform: rotate(360deg); }
}
.sync-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--primary-color);
}

.sales-quick-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex: 1 1 0;
    padding: 10px 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 22px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.sales-quick-btn span {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.sales-quick-btn svg {
    flex-shrink: 0;
}

.sales-quick-btn.sale {
    border-color: rgba(40, 167, 69, 0.35);
    color: #34c759;
}

.sales-quick-btn.sale:active {
    background: rgba(40, 167, 69, 0.15);
}

.sales-quick-btn.shipment {
    border-color: rgba(var(--ios-blue-rgb), 0.35);
    color: var(--ios-blue);
}

.sales-quick-btn.shipment:active {
    background: rgba(var(--ios-blue-rgb), 0.15);
}

.sales-quick-btn.refund {
    border-color: rgba(255, 149, 0, 0.35);
    color: #ff9500;
}

.sales-quick-btn.refund:active {
    background: rgba(255, 149, 0, 0.15);
}

.sales-quick-btn.expense {
    border-color: rgba(var(--ios-red-rgb), 0.35);
    color: var(--ios-red);
}

.sales-quick-btn.expense:active {
    background: rgba(var(--ios-red-rgb), 0.15);
}

/* ====== COLLAPSIBLE SECTIONS ====== */
.sales-collapsible-section {
    overflow: hidden;
    transition: padding 0.35s ease-out;
}

/* Override glass-card padding when collapsed - compact style */
.sales-collapsible-section:not(.expanded) {
    padding: 14px clamp(16px, 4vw, 20px) !important;
    height: 56px !important;
    box-sizing: border-box;
}

.sales-collapsible-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    padding: 0;
    height: 28px;
    transition: all 0.2s ease;
    user-select: none;
}

.sales-collapsible-header h3.section-title {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: inherit;
    line-height: 1;
}

.sales-collapsible-header h3.section-title .section-icon {
    font-size: 1.2em;
    line-height: 1;
}

.sales-collapsible-header:hover {
    opacity: 0.8;
}

.sales-collapse-icon {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
    background: none !important;
    border: none !important;
    border-radius: 0 !important;
    transition: transform 0.3s ease;
    flex-shrink: 0;
}

.sales-collapsible-section.expanded .sales-collapse-icon {
    transform: rotate(0deg);
}

.sales-collapsible-section:not(.expanded) .sales-collapse-icon {
    transform: rotate(-90deg);
}

.sales-collapsible-content {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows 0.35s ease-out, padding 0.35s ease-out, opacity 0.25s ease-out;
    opacity: 0;
}

.sales-collapsible-section.expanded .sales-collapsible-content {
    grid-template-rows: 1fr;
    padding-top: 16px;
    opacity: 1;
}

.sales-collapsible-content > .collapsible-inner {
    overflow: hidden;
    min-height: 0;
}

.sales-collapsible-section.expanded .collapsible-inner {
    overflow: visible;
}

.sales-collapsible-content > .payout-calculator {
    overflow: hidden;
    min-height: 0;
    padding: 0;
}

.sales-collapsible-section.expanded .payout-calculator {
    padding: 8px 0;
}

/* Payout Calculator */
.payout-calculator {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.payout-row {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 16px;
    padding: 12px 0;
}

.payout-row.total {
    padding-top: 20px;
    margin-top: 8px;
    border-top: 2px solid var(--primary-color);
}

.payout-row.total .payout-label {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.payout-row.total .payout-value {
    font-size: 20px;
    font-weight: 800;
}

.payout-row.cash {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2) 0%, rgba(22, 163, 74, 0.3) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    margin: 16px 0 0 0;
    padding: 20px;
    border-radius: 16px;
    border: 1px solid rgba(74, 222, 128, 0.3);
    box-shadow: 
        0 4px 24px rgba(34, 197, 94, 0.15),
        inset 0 1px 0 rgba(255, 255, 255, 0.1);
}

.payout-row.cash .payout-label {
    color: #86efac;
    font-weight: 700;
    font-size: 15px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.payout-row.cash .payout-value {
    color: #4ade80;
    font-weight: 800;
    font-size: 1.7rem;
    text-shadow: 0 0 30px rgba(74, 222, 128, 0.6);
}

.payout-label {
    font-size: 15px;
    color: var(--text-primary);
    font-weight: 500;
}

.payout-input-group {
    display: flex;
    align-items: center;
    gap: 8px;
}

.payout-input-group input {
    width: 80px;
    padding: 12px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 16px;
    font-weight: 700;
    text-align: center;
    transition: all 0.2s ease;
}

.payout-input-group input:focus {
    outline: none;
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.payout-rate {
    font-size: 14px;
    color: var(--text-secondary);
    white-space: nowrap;
}

.payout-value {
    font-size: 18px;
    font-weight: 700;
    color: var(--primary-color);
    min-width: 95px;
    text-align: right;
}

.payout-value.highlight {
    color: #facc15;
    text-shadow: 0 0 12px rgba(250, 204, 21, 0.3);
}

.payout-value.cash-value {
    font-size: 1.5rem;
}

.payout-value.negative {
    color: #ef4444;
}

.payout-divider {
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--glass-border), transparent);
    margin: 4px 0;
}

/* Sales Search */
.sales-search-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    margin-top: 8px;
}

.sales-search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-tertiary);
    pointer-events: none;
}

.sales-search-input {
    width: 100%;
    padding: 8px 32px 8px 32px !important;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-primary);
    font-size: 15px !important;
    outline: none;
    transition: all 0.2s ease;
}

.sales-search-input:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.sales-search-input::placeholder {
    color: var(--text-tertiary);
}

.sales-search-clear {
    position: absolute;
    right: 32px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-tertiary);
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sales-search-clear:hover {
    background: var(--bg-elevated);
    color: var(--text-primary);
}

/* Sales Tabs */
.sales-tabs {
    display: flex;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    padding: 4px;
    margin: 12px 0;
    position: relative;
}

.sales-tab {
    flex: 1;
    padding: 10px 12px;
    background: transparent;
    border: none;
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.25s ease, transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 1;
}

.sales-tab:not(.active):hover {
    color: var(--text-primary);
    transform: scale(1.06);
}
.sales-tab:not(.active):active {
    transform: scale(0.97);
}

.sales-tab.active {
    color: white;
}

/* Sales Tabs Slider */
.sales-tabs-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc(25% - 4px);
    height: calc(100% - 8px);
    background: rgba(var(--primary-rgb), 0.4);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    transition: transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 0 12px var(--primary-glow);
}

.sales-tabs-slider.pos-1 {
    transform: translateX(100%);
}

.sales-tabs-slider.pos-2 {
    transform: translateX(200%);
}

.sales-tabs-slider.pos-3 {
    transform: translateX(300%);
}

/* Sales List */
.sales-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.sales-date-group {
    display: flex;
    flex-direction: column;
}

.sales-date-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid var(--glass-border);
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: all 0.2s ease;
}

.sales-date-header:hover {
    background: rgba(0, 0, 0, 0.25);
    border-color: rgba(var(--primary-rgb), 0.3);
}

.sales-date-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.sales-date-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.sales-date-summary {
    display: flex;
    align-items: center;
    gap: 8px;
}

.sales-date-count {
    font-size: 12px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.sales-date-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}

.sales-date-total.positive {
    color: var(--ios-green, #34c759);
}

.sales-date-total.negative {
    color: var(--ios-red);
}

.sales-date-chevron {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    color: var(--text-tertiary);
    transition: transform 0.3s ease;
}

.sales-date-group.expanded .sales-date-chevron {
    transform: rotate(180deg);
}

.sales-date-group.expanded .sales-date-header {
    border-color: rgba(var(--primary-rgb), 0.25);
    background: rgba(var(--primary-rgb), 0.06);
    border-radius: 10px 10px 0 0;
}

.sales-items-collapsible {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease;
}

.sales-date-group.expanded .sales-items-collapsible {
    border-left: 1px solid var(--glass-border);
    border-right: 1px solid var(--glass-border);
    border-bottom: 1px solid var(--glass-border);
    border-radius: 0 0 10px 10px;
    background: rgba(0, 0, 0, 0.08);
}

.sales-items-collapsible > .sales-items {
    padding: 8px;
}

.sales-date-day {
    font-size: 13px;
    font-weight: 600;
    color: var(--primary-color);
}

.sales-date-full {
    font-size: 13px;
    color: var(--text-tertiary);
}

.sales-items {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Load More Button */
.sales-load-more-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 16px 0 4px;
}

.sales-load-more-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 24px;
    font-size: 14px;
    font-weight: 500;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    border-radius: 20px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.sales-load-more-btn:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.4);
    transform: translateY(-1px);
}

.sales-load-more-btn:active {
    transform: translateY(0);
}

.sales-load-more-btn svg {
    flex-shrink: 0;
}

.sales-load-more-info {
    font-size: 11px;
    color: var(--text-tertiary);
}

/* ====== NEW SALE CARDS ====== */
.sale-card {
    display: flex;
    align-items: center;
    padding: 12px 14px;
    min-height: 52px;
    box-sizing: border-box;
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 12px;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.sale-card:hover {
    border-color: rgba(var(--primary-rgb), 0.35);
    background: rgba(255, 255, 255, 0.06);
    cursor: pointer;
}

.sale-card-left {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    overflow: hidden;
}

.sale-card-title {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}

.sale-card-title span {
    display: inline-block;
    white-space: nowrap;
    transition: transform 0.3s ease;
}

.sale-card-title.overflowing {
    text-overflow: clip;
}

.sale-card:hover .sale-card-title.overflowing span {
    animation: marquee-carousel var(--scroll-duration, 6s) linear infinite;
}

/* Unified carousel marquee — smooth continuous loop, no bounce */
@keyframes marquee-carousel {
    0% { transform: translateX(0); }
    5% { transform: translateX(0); }
    45% { transform: translateX(var(--overflow, var(--marquee-offset, -100px))); }
    55% { transform: translateX(var(--overflow, var(--marquee-offset, -100px))); }
    95% { transform: translateX(0); }
    100% { transform: translateX(0); }
}

.sale-card-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sale-card-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
    margin-left: 12px;
    min-height: 28px;
}

.sale-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 4px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.sale-badge.payu,
.sale-badge.online,
.sale-badge.przelew {
    background: rgba(0, 122, 255, 0.12);
    color: #5ac8fa;
}

.sale-badge.pobranie {
    background: rgba(255, 204, 0, 0.12);
    color: #ffcc00;
}

.sale-badge.gotówka {
    background: rgba(52, 199, 89, 0.12);
    color: #34c759;
}

.sale-badge.allegro {
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
}

.sale-badge.konto {
    background: rgba(90, 200, 250, 0.12);
    color: #5ac8fa;
}

.sale-badge.courier {
    background: rgba(175, 82, 222, 0.12);
    color: #bf5af2;
}

.sale-badge.refund-type {
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
}

.sale-badge.vat-yes {
    background: rgba(52, 199, 89, 0.12);
    color: #34c759;
}

.sale-badge.vat-no {
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
}

.sale-card-amount {
    font-size: 15px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    min-width: 70px;
    text-align: right;
    line-height: 28px;
}

.sale-card-amount.negative {
    color: #ff453a;
}

/* Action buttons - replace price on hover */
.sale-card .sale-item-actions {
    display: none;
    gap: 4px;
    min-width: 70px;
    height: 28px;
    justify-content: flex-end;
    align-items: center;
}

.sale-card:hover .sale-item-actions {
    display: flex;
}

.sale-card:hover .sale-card-amount {
    display: none;
}

.sale-card .sale-action-btn {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.15s ease;
}

.sale-card .sale-action-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sale-card .sale-action-btn.delete:hover {
    background: rgba(255, 69, 58, 0.2);
    border-color: #ff453a;
    color: #ff453a;
}

/* ====== NEW SELECTION (handle + action sheet) ====== */

.sale-card {
    position: relative;
    transition: padding-left .25s cubic-bezier(.2,.85,.25,1),
                background-color .18s ease,
                border-color .18s ease,
                box-shadow .18s ease;
}

/* Floating select handle on the left edge of every card */
.sale-select-handle {
    position: absolute;
    left: 10px;
    top: 50%;
    transform: translate(-14px, -50%) scale(.85);
    width: 24px;
    height: 24px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, 0.22);
    background: rgba(255, 255, 255, 0.04);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .15s ease,
                transform .25s cubic-bezier(.4, 1.8, .5, 1),
                background-color .15s ease,
                border-color .15s ease;
    z-index: 2;
}

.sale-select-handle:focus-visible {
    outline: 2px solid var(--primary-color, #007AFF);
    outline-offset: 2px;
}

.sale-select-handle-check {
    opacity: 0;
    transform: scale(.6);
    transition: opacity .15s ease, transform .2s cubic-bezier(.4, 1.8, .5, 1);
}

/* Reveal handle on hover (desktop) — usunięte na życzenie usera (brzydkie kółko).
   Handle jest teraz widoczne tylko gdy aktywny jest tryb zaznaczania
   (body.sales-has-selection) — wtedy user widzi gdzie odznaczyć pozycję.
   Sam klik w kartę toggluje zaznaczenie (patrz attachSalesListeners w sales.js). */

/* Reveal all handles whenever selection is active */
body.sales-has-selection .sale-select-handle {
    opacity: 1;
    pointer-events: auto;
    transform: translate(0, -50%) scale(1);
}

/* Make room for the handle when selection is active */
body.sales-has-selection .sale-card {
    padding-left: 46px;
}

/* Gdy aktywny tryb zaznaczania, dolny action sheet (≈280-340px wys.) zasłania
   listę — dodajemy padding-bottom, żeby user mógł doscrollować do każdej pozycji.
   Wartość pokrywa: handle (88px nad nawigacją) + ~3 wiersze sheeta + margines. */
body.sales-has-selection #salesList {
    padding-bottom: 360px;
    scroll-padding-bottom: 360px;
}
body.sales-has-selection .sale-card {
    scroll-margin-bottom: 360px;
    scroll-margin-top: 12px;
}

/* Checked state */
.sale-select-handle.checked {
    background: var(--primary-color, #007AFF);
    border-color: var(--primary-color, #007AFF);
    color: #fff;
}

.sale-select-handle.checked .sale-select-handle-check {
    opacity: 1;
    transform: scale(1);
}

/* Selected card visual */
.sale-card.is-selected {
    background: rgba(var(--primary-rgb), 0.12) !important;
    border-color: rgba(var(--primary-rgb), 0.55) !important;
    box-shadow: inset 3px 0 0 var(--primary-color, #007AFF);
}

/* While selecting, hide the hover-only action buttons so taps go to selection */
body.sales-has-selection .sale-card .sale-item-actions {
    display: none !important;
}
body.sales-has-selection .sale-card:hover .sale-card-amount {
    display: inline-flex !important;
}

/* Light mode */
body.light-mode .sale-card {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .sale-card:hover {
    background: rgba(255, 255, 255, 0.85);
}

body.light-mode .sale-card.is-selected {
    background: rgba(var(--primary-rgb), 0.10) !important;
    border-color: rgba(var(--primary-rgb), 0.55) !important;
}

body.light-mode .sale-select-handle {
    border-color: rgba(0, 0, 0, 0.22);
    background: rgba(0, 0, 0, 0.03);
    color: var(--text-primary);
}

body.light-mode .sale-select-handle.checked {
    color: #fff;
}

body.light-mode .sale-card .sale-action-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
    color: rgba(0, 0, 0, 0.4);
}

/* OLD sale-item styles - kept for compatibility */
.sale-item {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 14px 16px;
    background: rgba(0, 0, 0, 0.25);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    transition: all 0.2s ease;
}

.sale-item:hover {
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.3);
}

.sale-item-right {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
}

.sale-badge-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 70px;
    justify-content: flex-end;
}

.sale-badge-actions .sale-payment-badge,
.sale-badge-actions .sale-type-badge {
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.sale-badge-actions .sale-item-actions {
    display: none;
}

.sale-item:hover .sale-badge-actions .sale-payment-badge,
.sale-item:hover .sale-badge-actions .sale-type-badge {
    display: none;
}

.sale-item:hover .sale-badge-actions .sale-item-actions {
    display: flex;
    opacity: 1;
}

.sale-item-amount.negative {
    color: var(--ios-red) !important;
}

.sale-type-icon {
    margin-right: 6px;
}

.sale-type-icon-svg {
    vertical-align: middle;
    margin-right: 6px;
    opacity: 0.75;
}

.sale-item.refund .sale-type-icon-svg {
    color: #ff9500;
}

.sale-item.expense .sale-type-icon-svg {
    color: var(--ios-red);
}

.sale-type-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sale-type-badge.refund {
    background: rgba(255, 149, 0, 0.2);
    color: #ff9500;
}

.sale-type-badge.expense {
    background: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-red);
}

.sale-type-badge.deductible {
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
}

.sale-type-badge.not-deductible {
    background: rgba(255, 149, 0, 0.15);
    color: #ff9500;
}

/* Deductible label under amount */
.sale-amount-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.sale-deductible-label {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
    padding: 2px 8px;
    border-radius: 20px;
}

.sale-deductible-label svg {
    flex-shrink: 0;
}

.sale-deductible-label.deductible {
    color: var(--ios-green);
    background: rgba(var(--ios-green-rgb), 0.12);
}

.sale-deductible-label.not-deductible {
    color: #ff9500;
    background: rgba(255, 149, 0, 0.12);
}

.sale-category {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--glass-bg);
    padding: 2px 8px;
    border-radius: 4px;
}

/* Expense category tiles */
.expense-category-tiles {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 4px;
}

.expense-category-tile {
    padding: 8px 14px;
    border-radius: 8px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.expense-category-tile:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2);
    transform: scale(1.03);
}

.expense-category-tile.active {
    border-color: var(--primary-color);
    outline: 2px solid var(--primary-color);
    outline-offset: -2px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
    transform: scale(1.03);
}

.sale-item-main {
    flex: 1;
    min-width: 0;
}

.sale-item-name {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.sale-item-car {
    font-size: 12px;
    color: var(--text-tertiary);
}

.sale-purchase-date {
    font-size: 11px;
    color: var(--text-tertiary);
    background: none;
    padding: 0;
    border-radius: 0;
}

.sale-item-details {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    flex-wrap: wrap;
}

.sale-item-transport {
    margin-top: 4px;
}

.sale-courier {
    font-size: 11px;
    color: var(--text-secondary);
    background: var(--glass-bg);
    padding: 2px 8px;
    border-radius: 4px;
}

.sale-transport-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 4px;
    background: rgba(40, 167, 69, 0.2);
    color: #28a745;
}

.sale-payment-badge {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 20px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.sale-payment-badge.payu {
    background: rgba(0, 122, 255, 0.12);
    color: #5ac8fa;
}

.sale-payment-badge.pobranie {
    background: rgba(255, 204, 0, 0.12);
    color: #ffcc00;
}

.sale-payment-badge.przelew {
    background: rgba(90, 200, 250, 0.12);
    color: #5ac8fa;
}

.sale-payment-badge.gotówka {
    background: rgba(52, 199, 89, 0.12);
    color: var(--ios-green);
}

.sale-payment-badge.allegro {
    background: rgba(255, 149, 0, 0.12);
    color: #ff9500;
}

.sale-payment-badge.online,
.sale-payment-badge.payu {
    background: rgba(0, 122, 255, 0.12);
    color: #5ac8fa;
}

.sale-payment-badge.konto {
    background: rgba(90, 200, 250, 0.12);
    color: #5ac8fa;
}

.sale-payment-badge.vip {
    background: rgba(255, 214, 10, 0.12);
    color: #ffd60a;
}

.sale-item-amount {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    white-space: nowrap;
    letter-spacing: -0.3px;
}

.sale-item-amounts {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 2px;
}

.sale-shipping-cost {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.5);
    white-space: nowrap;
}

.sale-item-actions {
    display: flex;
    gap: 6px;
}

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

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

.sale-action-btn.delete:hover {
    border-color: #dc3545;
    color: #dc3545;
    background: rgba(220, 53, 69, 0.1);
}

/* Sale Form Modal */
.sale-form-modal-overlay {
    z-index: var(--z-modal);
    /* Reduce blur radius for wizard overlay — 10px full-viewport convolution was
       causing step-transition jank (kropki postępu i slajd gubiły klatki).
       Darker semi-transparent bg compensates visually. */
    background: rgba(0, 0, 0, 0.88) !important;
    backdrop-filter: blur(4px) !important;
    -webkit-backdrop-filter: blur(4px) !important;
}

.sale-form-modal {
    max-width: 450px;
    width: 92%;
    background: rgba(30, 30, 35, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
}

.sale-wizard-modal {
    position: relative;
    max-width: 440px;
    width: 94%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    background: rgba(30, 30, 35, 0.96);
    /* backdrop-filter removed — bg is 96% opaque, blur was invisible but forced full-screen
       convolution repaint on every step transition (widoczne zacinanie na iOS/Safari). */
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    overflow: hidden;
    padding-bottom: 8px;
    isolation: isolate;
    contain: layout paint;
    /* Promote to its own GPU layer so slide/layout changes inside the modal
       don't force the overlay's full-viewport backdrop-filter: blur(10px) to repaint. */
    transform: translateZ(0);
    -webkit-transform: translateZ(0);
    will-change: transform;
}

/* Wizard buttons — narrower and spaced from fields */
.sale-wizard-modal .wizard-buttons {
    padding: 28px 48px 12px !important;
    justify-content: center !important;
    gap: 16px !important;
}
.sale-wizard-modal .wizard-buttons .custom-modal-btn {
    flex: 0 0 auto !important;
    width: 130px !important;
    max-width: 130px !important;
}

body.light-mode .sale-form-modal,
body.light-mode .sale-wizard-modal {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

/* Wizard slides container (like onboarding) */
.wizard-slides {
    position: relative;
    display: flex;
    flex-direction: column;
    min-height: 200px;
    margin: 8px 0;
    z-index: 2;
    overflow: hidden;
    flex: 1 1 auto;
    /* Isolate reflow/repaint from the rest of the modal (title, dots, buttons, shadow) */
    contain: layout paint style;
}

.wizard-slide {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    opacity: 0;
    visibility: hidden;
    transform: none !important;
    transition: none !important;
    animation: none !important;
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
}

.wizard-slide.active {
    position: relative;
    opacity: 1;
    visibility: visible;
    transform: none !important;
}

/* Fixed content area for smooth transitions */
.wizard-content-area {
    position: relative;
    min-height: 200px;
    overflow: hidden;
}

.sale-wizard-step {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex: 1;
    justify-content: flex-start;
}

/* ====== iOS-STYLE WIZARD ====== */
.ios-wizard-step {
    gap: 16px;
    padding: 0 8px;
}

/* iOS Date Picker */
.ios-date-picker {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 12px 0 20px;
}

.ios-date-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: none;
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

.ios-date-arrow:hover {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    transform: scale(1.1);
}

.ios-date-arrow:active {
    transform: scale(0.95);
}

.ios-date-display {
    background: none;
    border: none;
    cursor: pointer;
    padding: 12px 24px;
    border-radius: 16px;
    transition: all 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.ios-date-display:hover {
    background: rgba(var(--primary-rgb), 0.1);
    transform: scale(1.05);
}

.ios-date-display:active {
    transform: scale(0.98);
}

.ios-date-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: -0.5px;
}

.ios-date-bounce {
    animation: iosDateBounce 0.2s cubic-bezier(0.34, 1.56, 0.64, 1);
}

@keyframes iosDateBounce {
    0% { transform: scale(1); }
    50% { transform: scale(1.08); }
    100% { transform: scale(1); }
}

/* iOS Form Fields */
.ios-form-field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ios-form-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

.ios-form-field input {
    padding: 14px 20px;
    font-size: 16px;
    font-weight: 500;
    text-align: center;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.ios-form-field input::placeholder {
    color: rgba(255, 255, 255, 0.25);
    font-weight: 400;
}

.ios-form-field input:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    outline: none;
}

/* iOS Amount Field */
.ios-amount-field {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 16px 0;
}

.ios-amount-field label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

.ios-amount-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ios-amount-wrapper input {
    width: 100%;
    padding: 16px 50px 16px 20px;
    font-size: 2rem;
    font-weight: 700;
    text-align: center;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    transition: all 0.2s ease;
}

.ios-amount-wrapper input::placeholder {
    color: var(--text-muted);
    font-weight: 400;
}

.ios-amount-wrapper input:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    outline: none;
}

.ios-amount-suffix {
    position: absolute;
    right: 20px;
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--primary-color);
    pointer-events: none;
}

/* iOS Payment Section */
.ios-payment-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ios-payment-section label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
    text-align: center;
}

.ios-payment-tiles {
    display: flex;
    gap: 10px;
}

.ios-payment-tile {
    flex: 1;
    padding: 12px 16px;
    border-radius: 16px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    transition: all 0.2s ease;
}

.ios-payment-tile:hover {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.ios-payment-tile:active {
    transform: scale(0.97);
}

.ios-payment-tile.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.ios-payment-icon {
    font-size: 22px;
}

.ios-payment-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

.ios-payment-tile.active .ios-payment-label {
    color: var(--primary-color);
}

/* Light mode adjustments */
body.light-mode .ios-date-arrow {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .ios-date-arrow:hover {
    background: rgba(var(--primary-rgb), 0.12);
}

body.light-mode .ios-form-field input,
body.light-mode .ios-amount-wrapper input,
body.light-mode .ios-payment-tile {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .ios-form-field input::placeholder {
    color: rgba(0, 0, 0, 0.3);
}

body.light-mode .ios-form-field input:focus,
body.light-mode .ios-amount-wrapper input:focus {
    background: rgba(0, 0, 0, 0.02);
}

/* Amount input - larger and nicer */
.sale-wizard-step .car-form-field input[type="number"],
.wizard-slide .car-form-field input[type="number"] {
    padding: 12px 20px;
    font-size: 1.2rem;
    font-weight: 600;
    text-align: center;
    letter-spacing: 0.5px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.sale-wizard-step .car-form-field input[type="number"]:focus,
.wizard-slide .car-form-field input[type="number"]:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
    background: rgba(255, 255, 255, 0.07);
}

.sale-wizard-step .car-form-field input[type="number"]::placeholder,
.wizard-slide .car-form-field input[type="number"]::placeholder {
    font-weight: 400;
    font-size: 1rem;
    color: var(--text-muted);
}

/* Amount input wrapper with suffix */
.amount-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.amount-input-wrapper input {
    padding-right: 50px !important;
}

.amount-suffix {
    position: absolute;
    right: 20px;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--primary-color);
    pointer-events: none;
    text-shadow: 0 0 10px rgba(var(--primary-rgb), 0.3);
}

.amount-field label {
    text-align: center;
    font-size: 0.85rem !important;
}

/* Shipment wizard larger */
.shipment-wizard {
    max-width: 420px;
}

/* Shipment edit modal */
.shipment-edit-modal {
    max-width: 480px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

.shipment-edit-modal .car-form,
.part-edit-modal .car-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    flex: 1;
    overflow-y: auto;
    padding-bottom: 4px;
}

.part-edit-modal {
    max-width: 450px;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
}

/* Edit modal buttons — sticky at bottom */
.shipment-edit-modal > .custom-modal-buttons,
.part-edit-modal > .custom-modal-buttons {
    flex-shrink: 0;
    padding-top: 12px;
    margin-top: auto;
}

/* Date inline row — input + quick button side by side */
.date-inline-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.date-inline-row .custom-modal-input {
    flex: 1;
    min-width: 0;
    margin-bottom: 0;
    box-sizing: border-box;
}

.date-inline-row .date-quick-btn {
    flex: 0 0 auto;
    padding: 12px 16px;
    background: rgba(var(--primary-rgb), 0.1);
    border: none;
    border-radius: 12px;
    color: var(--primary-color);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.2;
    box-sizing: border-box;
}

.date-inline-row .date-quick-btn:hover {
    background: rgba(var(--primary-rgb), 0.18);
}

.date-inline-row .date-quick-btn.active {
    background: var(--primary-color);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.25);
}

/* Payment type tiles */
.payment-type-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 4px;
}

.payment-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 12px 10px;
    background: rgba(40, 40, 45, 0.95);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.22s ease;
}

body.light-mode .payment-tile {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(0, 0, 0, 0.1);
}

.payment-tile:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.payment-tile.active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
}

.payment-tile-icon {
    font-size: 20px;
}

.payment-tile-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.payment-tile-desc {
    font-size: 10px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.3;
    text-align: center;
    margin-top: 2px;
}

.payment-type-tiles.three-col {
    grid-template-columns: repeat(3, 1fr);
}

/* Payment section label - centered */
.payment-section-label {
    text-align: center;
    display: block;
    margin-bottom: 4px;
    font-size: 0.85rem;
}

/* Quick payment grid - compact layout for fast selections */
.quick-payment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
    margin-bottom: 2px;
    padding: 2px;
}

/* 5 items: first 3 on top row, 2 below centered */
.quick-payment-grid.five-items {
    grid-template-columns: repeat(6, 1fr);
}

.quick-payment-grid.five-items .allegro-payment-btn:nth-child(1) {
    grid-column: 1 / 3;
}
.quick-payment-grid.five-items .allegro-payment-btn:nth-child(2) {
    grid-column: 3 / 5;
}
.quick-payment-grid.five-items .allegro-payment-btn:nth-child(3) {
    grid-column: 5 / 7;
}
.quick-payment-grid.five-items .allegro-payment-btn:nth-child(4) {
    grid-column: 1 / 4;
}
.quick-payment-grid.five-items .allegro-payment-btn:nth-child(5) {
    grid-column: 4 / 7;
}

.quick-payment-grid .allegro-payment-btn {
    padding: 6px 4px;
    text-align: center;
    align-items: center;
    flex-direction: column;
    gap: 1px;
}

.quick-payment-grid .quick-payment-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    margin-bottom: 0;
}

.quick-payment-grid .quick-payment-icon svg {
    width: 18px;
    height: 18px;
}

.quick-payment-grid .allegro-payment-btn-title {
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    width: 100%;
    line-height: 1.15;
}

.quick-payment-grid .allegro-payment-btn-desc {
    font-size: 9px;
    color: var(--text-tertiary);
    text-align: center;
    width: 100%;
    line-height: 1.15;
}

/* Other payments toggle button */
.other-payments-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    width: 100%;
    padding: 6px 16px;
    margin-top: 4px;
    margin-bottom: 4px;
    background: transparent;
    border: 1px dashed var(--glass-border);
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
}

.other-payments-toggle:hover {
    border-color: var(--primary-color);
    color: var(--text-secondary);
    background: rgba(var(--primary-rgb), 0.05);
}

.other-payments-toggle .toggle-chevron {
    transition: transform 0.3s ease;
}

.other-payments-toggle .toggle-chevron.rotated {
    transform: rotate(180deg);
}

.other-payments-toggle.back-toggle {
    border-style: dashed;
    margin-top: 12px;
}

/* Payment switcher - fade animation */
.payment-flipper {
    position: relative;
}

.payment-flipper-inner {
    position: relative;
    width: 100%;
}

.payment-flipper-front,
.payment-flipper-back {
    transition: opacity 0.25s ease;
}

.payment-flipper-back {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
}

.payment-flipper-front {
    opacity: 1;
    pointer-events: auto;
}

.payment-flipper-back {
    opacity: 0;
    pointer-events: none;
}

/* When switched to other payments */
.payment-flipper.flipped .payment-flipper-front {
    opacity: 0;
    pointer-events: none;
}

.payment-flipper.flipped .payment-flipper-back {
    opacity: 1;
    pointer-events: auto;
}

/* Step 2 validation message */
.wizard-step2-validation-msg {
    background: linear-gradient(135deg, rgba(255,149,0,0.15), rgba(255,149,0,0.08));
    border: 1px solid rgba(255,149,0,0.3);
    border-radius: 10px;
    padding: 10px 14px;
    margin-bottom: 14px;
    font-size: 13px;
    color: #ffa500;
    text-align: center;
    animation: validationPulse 0.4s ease;
}

@keyframes validationPulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.02); }
}

.wizard-step2-validation-msg svg {
    width: 16px;
    height: 16px;
    vertical-align: -3px;
    margin-right: 6px;
}

/* Allegro payment rectangular buttons */
.allegro-payment-btns {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 4px;
    padding: 4px;
}

.allegro-payment-btn {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.22s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    text-align: left;
    width: 100%;
}

body.light-mode .allegro-payment-btn {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.1);
}

.allegro-payment-btn:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
}

.allegro-payment-btn.active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
}

.allegro-payment-btn-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.allegro-payment-btn-desc {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-tertiary);
    line-height: 1.3;
}

.payment-type-tiles.two-by-two {
    grid-template-columns: repeat(2, 1fr);
}

/* Container wrapping allegro + regular payment tiles */
.all-payment-options {
    padding: 4px;
    margin: -4px;
}

/* Reset nested padding/margin when inside .all-payment-options */
.all-payment-options > .allegro-payment-btns {
    padding: 0;
    margin: 0 0 4px 0;
}

.all-payment-options > .payment-type-tiles {
    padding: 0;
    margin: 0;
}

/* Order type badges in sales list */
.sale-order-type-badge {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 6px;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.3px;
}

.sale-order-type-badge.online {
    background: rgba(var(--ios-blue-rgb), 0.12);
    color: var(--ios-blue);
}

.sale-order-type-badge.firmowe {
    background: rgba(255, 149, 0, 0.12);
    color: #FF9500;
}

/* Transport type switch */
.transport-type-switch {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    padding: 4px;
}

.transport-type-switch.three-cols,
.shipment-edit-modal .transport-type-switch {
    grid-template-columns: repeat(3, 1fr);
}

.transport-type-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 12px 10px;
    background: var(--bg-secondary);
    border: 2px solid var(--glass-border);
    border-radius: 10px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transport-type-btn:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.transport-type-btn.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
}

/* Courier tiles */
.courier-tiles {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    padding: 4px;
}

.courier-tiles.with-icons {
    gap: 10px;
}

.courier-tile {
    padding: 10px 8px;
    background: var(--bg-secondary);
    border: 2px solid var(--glass-border);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: center;
}

.courier-tile.with-icon {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    padding: 8px 6px;
    border-radius: 10px;
    font-size: 11px;
    min-width: 0;
    overflow: hidden;
}

.courier-tile-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    color: var(--text-secondary);
    transition: color 0.2s ease;
}

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

.courier-tile.with-icon.active .courier-tile-icon,
.courier-tile.with-icon:hover .courier-tile-icon {
    color: var(--primary-color);
}

.courier-tile-name {
    font-weight: 600;
    line-height: 1.2;
    width: 100%;
    word-break: break-word;
    overflow-wrap: break-word;
    hyphens: auto;
}

.courier-tile:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.courier-tile.active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
}

/* Keyboard highlight for tile navigation (Tab/Enter) */
.kbd-highlight {
    border-color: var(--primary-color) !important;
    outline: 2px solid var(--primary-color) !important;
    outline-offset: -2px;
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25) !important;
    background: rgba(var(--primary-rgb), 0.1) !important;
}

/* When a tile group has a kbd-highlighted tile, reset the rest to default look (no dimming) */
.payment-type-tiles:has(.kbd-highlight) .payment-tile:not(.kbd-highlight),
.transport-type-switch:has(.kbd-highlight) button:not(.kbd-highlight),
.expense-category-tiles:has(.kbd-highlight) .expense-category-tile:not(.kbd-highlight),
.courier-tiles:has(.kbd-highlight) .courier-tile:not(.kbd-highlight) {
    border-color: var(--glass-border) !important;
    box-shadow: none !important;
    outline: none !important;
}

/* ========================================
   MODERN SHIPMENT EDIT MODAL - REDESIGN
   ======================================== */

.shipment-edit-modal.modern-modal {
    max-width: 420px;
    padding: 16px 18px;
    border-radius: 18px;
    background: var(--bg-primary);
    border: 1px solid var(--glass-border);
}

/* Modal header - compact with icon */
.modal-header-compact {
    display: flex;
    align-items: center;
    gap: 10px;
    padding-bottom: 12px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.15);
}

.modal-header-icon {
    font-size: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.modal-header-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

/* Compact form */
.compact-form {
    gap: 10px !important;
    padding-bottom: 8px !important;
}

.compact-form .form-section {
    padding: 10px 12px;
    background: rgba(var(--primary-rgb), 0.03);
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
}

.compact-form .payment-section,
.compact-form .shipping-section {
    background: transparent;
    border: none;
    padding: 6px 0;
}

.compact-form .section-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
}

.compact-form .section-label span {
    font-size: 14px;
}

/* Compact form fields */
.car-form-field.compact {
    margin-bottom: 0;
}

.car-form-field.compact label {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.car-form-field.compact input {
    padding: 10px 12px;
    font-size: 14px;
    border-radius: 10px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--glass-border);
    transition: all 0.2s ease;
}

.car-form-field.compact input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

.car-form-field.compact input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.car-form-row.two-cols.tight {
    gap: 10px;
}

/* Modern payment options */
.payment-options-modern {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.allegro-btns-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.allegro-btn-modern {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 10px;
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.08), rgba(255, 90, 0, 0.03));
    border: 1.5px solid rgba(255, 90, 0, 0.2);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.allegro-btn-modern:hover {
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.15), rgba(255, 90, 0, 0.08));
    border-color: rgba(255, 90, 0, 0.4);
    transform: translateY(-1px);
}

.allegro-btn-modern.active {
    background: linear-gradient(135deg, rgba(255, 90, 0, 0.2), rgba(255, 90, 0, 0.12));
    border-color: #ff5a00;
    box-shadow: 0 2px 12px rgba(255, 90, 0, 0.25);
}

.allegro-btn-icon {
    font-size: 16px;
}

.allegro-btn-text {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
}

/* Payment chips - small inline buttons */
.payment-tiles-row {
    display: flex;
    gap: 6px;
}

.payment-chip {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 10px 8px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--glass-border);
    border-radius: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.payment-chip:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    background: rgba(var(--primary-rgb), 0.05);
}

.payment-chip.active {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: var(--primary-color);
    color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.2);
}

/* Modern transport switch */
.transport-type-switch.modern-switch {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
    padding: 0;
}

.transport-type-btn.modern {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    padding: 10px 6px;
    background: var(--bg-secondary);
    border: 1.5px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.transport-type-btn.modern .btn-icon {
    font-size: 18px;
    line-height: 1;
}

.transport-type-btn.modern .btn-label {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.transport-type-btn.modern:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.05);
    transform: translateY(-1px);
}

.transport-type-btn.modern:hover .btn-label {
    color: var(--text-primary);
}

.transport-type-btn.modern.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    box-shadow: 0 3px 12px rgba(var(--primary-rgb), 0.3);
}

.transport-type-btn.modern.active .btn-icon {
    filter: brightness(1.5);
}

.transport-type-btn.modern.active .btn-label {
    color: white;
}

/* Compact buttons */
.compact-buttons {
    padding-top: 10px !important;
    gap: 10px;
}

.compact-buttons .custom-modal-btn {
    padding: 12px 20px;
    font-size: 13px;
    border-radius: 10px;
}

/* Courier area inside modern modal */
.shipment-edit-modal.modern-modal #courierSelectionArea {
    margin-top: 8px;
}

.shipment-edit-modal.modern-modal #courierSelectionArea p {
    font-size: 12px !important;
    margin: 4px 0 !important;
    padding: 8px 12px;
    background: rgba(var(--primary-rgb), 0.05);
    border-radius: 8px;
}

.shipment-edit-modal.modern-modal .courier-tiles {
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.shipment-edit-modal.modern-modal .courier-tile {
    padding: 8px 6px;
    font-size: 10px;
    border-radius: 8px;
}

/* COD toggle */
.cod-toggle-field {
    margin-top: 8px;
}

.cod-toggle-label {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.cod-toggle-label:hover {
    border-color: var(--primary-color);
}

.cod-toggle-label input[type="checkbox"] {
    width: 20px;
    height: 20px;
    accent-color: var(--primary-color);
}

.cod-toggle-text {
    font-size: 14px;
    font-weight: 500;
    color: var(--text-primary);
}

/* COD switch row in shipment modal */
.cod-switch-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    background: var(--bg-secondary);
    border-radius: 12px;
    border: 1px solid var(--border-color);
}

.cod-switch-label {
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Mobile responsive for sales */
@media (max-width: 480px) {
    .sales-quick-actions {
        grid-template-columns: repeat(2, 1fr);
        gap: 8px;
    }
    
    .sales-quick-btn {
        padding: 10px 12px;
        gap: 10px;
    }
    
    .sales-quick-icon {
        width: 32px;
        height: 32px;
        font-size: 14px;
        border-radius: 8px;
    }
    
    .sales-quick-icon svg {
        width: 16px;
        height: 16px;
    }
    
    .sales-quick-label {
        font-size: 12px;
    }

    .sales-quick-desc {
        font-size: 10px;
    }

    .sales-stat-card.hero-stat .sales-stat-value {
        font-size: 26px;
    }
    
    .sales-stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: 8px;
    }

    .sales-stats-grid.sales-stats-5 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .sales-stat-card {
        padding: 10px 6px;
    }
    
    .sales-stat-value {
        font-size: 16px;
    }

    .sales-stat-card.warn .sales-stat-value,
    .sales-stat-card.danger .sales-stat-value {
        font-size: 13px;
    }
    
    .sales-stat-label {
        font-size: 10px;
    }
    
    .payout-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    
    .payout-value {
        text-align: left;
    }
    
    .sale-item-actions {
        opacity: 1;
    }
    
    .sale-item {
        flex-wrap: wrap;
    }
    
    .sale-item-amount {
        order: -1;
        width: 100%;
        margin-bottom: 8px;
    }

    .sales-chart-container {
        display: none;
    }
}

/* ====== SUMMARY TABS ====== */
.summary-tabs {
    margin: 0 0 12px 0 !important;
}

.summary-tabs-slider {
    width: calc(33.333% - 4px) !important;
}

.summary-tabs-slider.center {
    transform: translateX(100%);
}

.summary-tabs-slider.right-half {
    transform: translateX(200%);
}

.summary-tab-content {
    display: none;
    opacity: 0;
    transform: translateY(8px);
    transition: opacity 0.35s cubic-bezier(0.25, 0.1, 0.25, 1),
                transform 0.35s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.summary-tab-content.active {
    display: block;
    opacity: 1;
    transform: translateY(0);
    animation: summaryTabFadeIn 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
}

.summary-tab-content.active .sales-progress-section {
    opacity: 1;
    transform: translateY(0);
    animation: summaryChildFadeUp 0.45s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.summary-tab-content.active .sales-progress-section {
    animation-delay: 0.08s;
}

.summary-tab-content.active .sales-stats-grid {
    opacity: 1;
    transform: translateY(0);
    animation: summaryChildFadeUp 0.4s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

.summary-tab-content.active .sales-month-header,
.summary-tab-content.active .sales-day-header {
    opacity: 1;
    transform: translateY(0);
    animation: summaryChildFadeUp 0.35s cubic-bezier(0.25, 0.1, 0.25, 1) both;
}

@keyframes summaryTabFadeIn {
    from {
        opacity: 0;
        transform: translateY(6px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes summaryChildFadeUp {
    from {
        opacity: 0;
        transform: translateY(12px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Readonly date inputs should look normal */
input[type="date"][readonly] {
    opacity: 1;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

/* ====== AUTOCOMPLETE DROPDOWN ====== */
.autocomplete-dropdown {
    position: fixed;
    background: var(--bg-elevated, #1c1c1e);
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 99999;
    max-height: 380px;
    overflow-y: auto;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.autocomplete-option {
    padding: 10px 14px;
    font-size: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: background 0.15s ease;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    display: flex;
    align-items: center;
    gap: 8px;
}

.autocomplete-option-text {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.autocomplete-option-delete {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    background: transparent;
    color: var(--text-tertiary, rgba(255,255,255,0.3));
    font-size: 16px;
    line-height: 1;
    border-radius: 50%;
    cursor: pointer;
    opacity: 0;
    transition: opacity 0.15s ease, background 0.15s ease, color 0.15s ease;
    padding: 0;
}

.autocomplete-option:hover .autocomplete-option-delete {
    opacity: 1;
}

.autocomplete-option-delete:hover {
    background: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-red);
}

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

.autocomplete-option:hover,
.autocomplete-option.selected {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}

/* ====== PAYOUT SETTINGS BUTTON ====== */
.payout-settings-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--glass-border);
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.payout-settings-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.1);
}

/* Hide gear icon when section is collapsed */
.sales-collapsible-section:not(.expanded) .payout-settings-btn {
    display: none;
}

/* Starsze przeglądarki - fallback bez backdrop-filter */
@supports not (backdrop-filter: blur(10px)) {
    .glass-card,
    .seller-tile,
    .header-card,
    .custom-modal {
        background: var(--glass-bg) !important;
    }
}

/* ============================================================================
   MOBILE STYLES MOVED TO mobile.css
   Wszystkie style mobilne zostały przeniesione do osobnego pliku mobile.css
   dla lepszej organizacji kodu i wydajności.
   ============================================================================ */

/* ============================================================================
   SALES PANEL — iOS 26 PREMIUM REDESIGN
   Frosted glass, depth, refined typography, smooth animations
   ============================================================================ */

/* ====== INSIGHTS ROW (Average + Forecast + Comparison) ====== */
.sales-insights-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 10px;
    margin-top: 14px;
}

.sales-insight-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    transition: all 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sales-insight-card:hover {
    border-color: rgba(255, 255, 255, 0.15);
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.06) 0%, rgba(255, 255, 255, 0.02) 100%);
    transform: translateY(-1px);
}

.sales-insight-icon {
    font-size: 20px;
    flex-shrink: 0;
}

.sales-insight-data {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.sales-insight-value {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.sales-insight-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-top: 2px;
}

.sales-prev-value {
    font-size: 10px;
    color: var(--text-tertiary);
    margin-top: 2px;
}

/* Change Badge */
.sales-change-badge {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 8px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.2px;
}

.sales-change-badge.positive {
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
}

.sales-change-badge.negative {
    background: rgba(var(--ios-red-rgb), 0.15);
    color: var(--ios-red);
}

/* Light mode */
body.light-mode .sales-insight-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .sales-insight-card:hover {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.04) 0%, rgba(0, 0, 0, 0.02) 100%);
    border-color: rgba(0, 0, 0, 0.12);
}

/* ====== PROGRESS BAR ====== */
.sales-progress-section {
    margin-top: 16px;
    padding: 14px 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    transition: all 0.3s ease;
}

body.light-mode .sales-progress-section {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.01) 100%);
    border-color: rgba(0, 0, 0, 0.08);
}

.sales-progress-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}

.sales-progress-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}

.sales-goal-settings-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 6px;
    background: transparent;
    border: 1px solid var(--glass-border);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

.sales-goal-settings-btn:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.sales-progress-bar {
    height: 8px;
    background: rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    overflow: hidden;
    position: relative;
}

body.light-mode .sales-progress-bar {
    background: rgba(0, 0, 0, 0.06);
}

.sales-progress-fill {
    height: 100%;
    border-radius: 10px;
    background: linear-gradient(90deg, #007aff, #5ac8fa);
    transition: width 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
    position: relative;
    box-shadow: 0 0 12px rgba(var(--ios-blue-rgb), 0.4);
}

.sales-progress-fill.mid {
    background: linear-gradient(90deg, #ff9500, #ffcc00);
    box-shadow: 0 0 12px rgba(255, 149, 0, 0.4);
}

.sales-progress-fill.high {
    background: linear-gradient(90deg, #34c759, #30d158);
    box-shadow: 0 0 12px rgba(var(--ios-green-rgb), 0.4);
}

.sales-progress-fill.complete {
    background: linear-gradient(90deg, #34c759, #30d158, #5ac8fa);
    box-shadow: 0 0 16px rgba(var(--ios-green-rgb), 0.5);
    animation: progressPulse 2s ease-in-out infinite;
}

@keyframes progressPulse {
    0%, 100% { box-shadow: 0 0 12px rgba(var(--ios-green-rgb), 0.4); }
    50% { box-shadow: 0 0 24px rgba(var(--ios-green-rgb), 0.7); }
}

.sales-progress-labels {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 8px;
}

.sales-progress-current {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
}

.sales-progress-percent {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
}

.sales-progress-target {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary);
}

/* ====== TOP 5 RANKINGS ====== */
.top-rankings-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.top-ranking-card {
    padding: 16px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.04) 0%, rgba(255, 255, 255, 0.01) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 16px;
}

body.light-mode .top-ranking-card {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.02) 0%, rgba(0, 0, 0, 0.005) 100%);
    border-color: rgba(0, 0, 0, 0.06);
}

.top-ranking-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding-bottom: 10px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

body.light-mode .top-ranking-header {
    border-color: rgba(0, 0, 0, 0.06);
}

.top-ranking-icon {
    font-size: 18px;
}

.top-ranking-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.2px;
}

.top-ranking-period {
    margin-left: auto;
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    letter-spacing: -0.1px;
    white-space: nowrap;
}

.top-ranking-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.top-rank-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 0;
}

.top-rank-pos {
    font-size: 14px;
    width: 24px;
    text-align: center;
    flex-shrink: 0;
    font-weight: 600;
    color: var(--text-tertiary);
}

.top-rank-info {
    flex: 1;
    min-width: 0;
}

.top-rank-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 4px;
}

.top-rank-bar-wrapper {
    height: 4px;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 4px;
    overflow: hidden;
}

body.light-mode .top-rank-bar-wrapper {
    background: rgba(0, 0, 0, 0.06);
}

.top-rank-bar {
    height: 100%;
    border-radius: 4px;
    background: linear-gradient(90deg, #007aff, #5ac8fa);
    transition: width 0.6s ease;
}

.top-rank-bar.parts {
    background: linear-gradient(90deg, #ff9500, #ffcc00);
}

.top-rank-stats {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    flex-shrink: 0;
}

.top-rank-count {
    font-size: 13px;
    font-weight: 700;
    color: var(--primary-color);
}

.top-rank-amount {
    font-size: 11px;
    color: var(--text-tertiary);
}

.top-empty {
    padding: 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
}

/* ====== EXPORT SECTION ====== */
.sales-export-section {
    padding: 8px clamp(10px, 3vw, 14px) !important;
}

.sales-export-header {
    margin-bottom: 5px;
}

.sales-export-header .section-title {
    font-size: 14px !important;
}

/* Export date range picker */
/* ====== Export Sheet ====== */

.export-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 10000;
    background: rgba(0, 0, 0, 0);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    transition: background 0.35s ease;
    -webkit-tap-highlight-color: transparent;
}

.export-sheet-overlay.active {
    background: rgba(0, 0, 0, 0.5);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}

.export-sheet {
    width: 100%;
    max-width: 420px;
    background: #1c1c1e;
    border-radius: 20px 20px 0 0;
    padding: 12px 20px 28px;
    transform: translateY(100%);
    transition: transform 0.4s cubic-bezier(0.32, 0.72, 0, 1);
    max-height: 88vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.export-sheet.active {
    transform: translateY(0);
}

.export-sheet-handle {
    width: 36px;
    height: 5px;
    border-radius: 3px;
    background: rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.35);
    margin: 0 auto 16px;
}

.export-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
}

.export-sheet-header h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.3px;
}

.export-sheet-close {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.12);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.export-sheet-close:hover {
    background: rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.2);
}

/* Format toggle */
.export-sheet-format {
    display: flex;
    gap: 8px;
    margin-bottom: 20px;
    background: rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.08);
    border-radius: 12px;
    padding: 4px;
}

.export-format-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 12px;
    border: none;
    border-radius: 10px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.export-format-btn.active {
    background: #2c2c2e;
    color: var(--primary-color);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1), 0 0 1px rgba(0, 0, 0, 0.06);
}

.export-format-btn svg {
    flex-shrink: 0;
}

/* Section labels */
.export-sheet-section-label {
    font-size: 11px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}

/* Scope pills */
.export-sheet-scopes {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.export-scope-pill {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.15);
    background: transparent;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    white-space: nowrap;
}

.export-scope-pill:hover {
    background: rgba(var(--primary-rgb), 0.06);
    border-color: rgba(var(--primary-rgb), 0.2);
}

.export-scope-pill.active {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: var(--primary-color);
    color: var(--primary-color);
    font-weight: 600;
}

/* Custom date range */
.export-sheet-custom-range {
    display: flex;
    align-items: flex-end;
    gap: 10px;
    margin-bottom: 16px;
    animation: exportFadeIn 0.25s ease;
}

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

.export-range-field {
    flex: 1;
    min-width: 0;
}

.export-range-field label {
    display: block;
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    color: var(--text-tertiary);
    margin-bottom: 6px;
}

.export-range-btn {
    width: 100%;
    padding: 14px 16px;
    border-radius: 12px;
    border: 1px solid rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.2);
    background: rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.08);
    color: var(--text-primary);
    font-size: 15px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: center;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.export-range-btn:hover {
    background: rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.12);
    border-color: rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.3);
}

.export-range-btn:active {
    transform: scale(0.98);
}

.export-range-sep {
    color: var(--text-tertiary);
    font-size: 14px;
    padding-bottom: 14px;
    flex-shrink: 0;
}

/* Type checkboxes */
.export-sheet-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 16px;
}

.export-type-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 20px;
    border: 1px solid rgba(var(--text-tertiary-rgb, 142, 142, 147), 0.12);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
}

.export-type-check:has(input:checked) {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.25);
}

.export-type-check input {
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: var(--primary-color);
    cursor: pointer;
}

.export-type-check span {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
}

/* Preview count */
.export-sheet-preview {
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary);
    margin-bottom: 16px;
    font-weight: 500;
}

/* Action button */
.export-sheet-action {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: var(--primary-color);
    color: #fff;
    font-size: 16px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    letter-spacing: -0.2px;
}

.export-sheet-action:hover:not(:disabled) {
    filter: brightness(1.08);
    transform: scale(1.01);
}

.export-sheet-action:active:not(:disabled) {
    transform: scale(0.98);
}

.export-sheet-action:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.export-sheet-action svg {
    flex-shrink: 0;
}

/* Light mode */
body.light-mode .export-sheet {
    background: #fff;
    box-shadow: 0 -4px 32px rgba(0, 0, 0, 0.12);
}

body.light-mode .export-format-btn.active {
    background: #fff;
    box-shadow: 0 1px 6px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.04);
}

/* Desktop */
@media (min-width: 769px) {
    .export-sheet-overlay {
        align-items: center;
    }

    .export-sheet {
        border-radius: 20px;
        max-height: 80vh;
    }

    .export-sheet-handle {
        display: none;
    }
}

/* Print delivery modal - scrollable list */
.print-delivery-modal {
    max-width: 380px;
}

.print-delivery-list {
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

.print-delivery-list::-webkit-scrollbar {
    width: 4px;
}

.print-delivery-list::-webkit-scrollbar-track {
    background: transparent;
}

.print-delivery-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.15);
    border-radius: 4px;
}

.sales-export-buttons {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.sales-export-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s ease;
}

body.light-mode .sales-export-btn {
    background: linear-gradient(135deg, rgba(0, 0, 0, 0.03) 0%, rgba(0, 0, 0, 0.01) 100%);
    border-color: rgba(0, 0, 0, 0.08);
}

.sales-export-btn:hover {
    background: linear-gradient(135deg, rgba(var(--ios-blue-rgb), 0.1) 0%, rgba(var(--ios-blue-rgb), 0.05) 100%);
    border-color: rgba(var(--ios-blue-rgb), 0.3);
    color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(var(--ios-blue-rgb), 0.15);
}

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

.sales-export-btn svg {
    color: var(--primary-color);
}

/* ====== SALES SCOPE BAR (D / T / M segmented control) ====== */
.sales-scope-bar {
    margin: 12px 0 8px;
}

.sales-scope-tabs {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 3px;
    position: relative;
}

body.light-mode .sales-scope-tabs {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}

.sales-scope-tab {
    flex: 1;
    padding: 7px 10px;
    background: transparent;
    border: none;
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.2s ease;
    position: relative;
    z-index: 1;
    -webkit-tap-highlight-color: transparent;
}

.sales-scope-tab.active {
    color: white;
}

body.light-mode .sales-scope-tab.active {
    color: white;
}

.sales-scope-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    width: calc(33.333% - 3px);
    height: calc(100% - 6px);
    background: rgba(var(--primary-rgb), 0.5);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border-radius: 8px;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
    box-shadow: 0 0 10px var(--primary-glow);
}

.sales-scope-slider.pos-1 {
    transform: translateX(100%);
}

.sales-scope-slider.pos-2 {
    transform: translateX(200%);
}

/* ====== CALENDAR STRIP ====== */
.sales-calendar-strip {
    display: flex;
    align-items: center;
    gap: 4px;
    margin: 6px 0;
    position: relative;
    overflow: hidden;
}

.sales-strip-nav {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: none;
    border-radius: 50%;
    color: var(--text-secondary);
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

/* A11y: powiększ touch target do 44x44px (Apple HIG) bez zmiany wizualnego rozmiaru */
.sales-strip-nav::before {
    content: '';
    position: absolute;
    inset: -8px;
    border-radius: 50%;
}

.sales-strip-nav:hover {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
}

.sales-strip-nav:active {
    transform: scale(0.9);
}

.sales-strip-track {
    flex: 1;
    display: flex;
    gap: 2px;
    overflow: hidden;
    touch-action: pan-x;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    transition: transform 0.3s cubic-bezier(0.25, 0.1, 0.25, 1);
}

.sales-strip-day {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 6px 2px 8px;
    border-radius: 10px;
    background: transparent;
    border: none;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
}

.sales-strip-day:hover {
    background: rgba(var(--primary-rgb), 0.08);
}

.sales-strip-day:active {
    transform: scale(0.92);
}

.sales-strip-day-name {
    font-size: 10px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    line-height: 1;
}

.sales-strip-day-num {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1;
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    transition: all 0.2s ease;
}

.sales-strip-day.today .sales-strip-day-num {
    color: var(--primary-color);
    font-weight: 700;
}

.sales-strip-day.selected .sales-strip-day-num {
    background: var(--primary-color);
    color: white;
    box-shadow: 0 2px 8px var(--primary-glow);
}

.sales-strip-day.today.selected .sales-strip-day-num {
    background: var(--primary-color);
    color: white;
}

.sales-strip-day.in-range:not(.selected) {
    background: rgba(var(--primary-rgb), 0.06);
}

.sales-strip-day.in-range:not(.selected) .sales-strip-day-num {
    color: var(--primary-color);
}

/* Activity dots */
.sales-strip-dots {
    display: flex;
    gap: 2px;
    height: 4px;
    align-items: center;
    justify-content: center;
}

.sales-strip-dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--primary-color);
    opacity: 0.6;
}

.sales-strip-day.selected .sales-strip-dot {
    background: white;
    opacity: 0.8;
}

/* Weekend styling */
.sales-strip-day.weekend .sales-strip-day-name {
    color: var(--ios-red);
    opacity: 0.6;
}

/* ====== SCOPE HEADER ====== */
.sales-scope-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 2px 4px;
}

.sales-scope-label {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.2px;
    cursor: pointer;
}

.sales-scope-label:hover {
    color: var(--primary-color);
}

.sales-scope-summary {
    display: none;
}

/* ====== PAYMENT FILTER CHIPS ====== */
.sales-filter-chips {
    display: flex;
    gap: 6px;
    margin: 10px 0 4px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding: 2px 0;
}

.sales-filter-chips::-webkit-scrollbar {
    display: none;
}

.sales-filter-chip {
    flex-shrink: 0;
    padding: 6px 14px;
    background: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.25s ease;
    white-space: nowrap;
}

body.light-mode .sales-filter-chip {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

.sales-filter-chip:hover {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.2);
    color: var(--text-primary);
}

.sales-filter-chip.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: rgba(var(--primary-rgb), 0.4);
    color: var(--primary-color);
    font-weight: 600;
    box-shadow: 0 0 8px rgba(var(--primary-rgb), 0.15);
}

/* ====== SALES LIST HEADER + OVERFLOW MENU ====== */
.sales-list-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.sales-overflow-wrapper {
    position: relative;
    display: flex;
    align-items: center;
    gap: 4px;
}

.sales-overflow-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
}

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

.sales-overflow-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 4px;
    min-width: 180px;
    background: var(--bg-elevated, #2c2c2e);
    border: 1px solid var(--glass-border);
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
    z-index: 100;
    overflow: hidden;
    animation: overflowFadeIn 0.15s ease;
}

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

body.light-mode .sales-overflow-menu {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
}

.sales-overflow-menu.active {
    display: block;
}

.sales-overflow-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 12px 16px;
    background: transparent;
    border: none;
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: background 0.15s ease;
}

.sales-overflow-item:hover {
    background: rgba(var(--primary-rgb), 0.1);
}

.sales-overflow-item + .sales-overflow-item {
    border-top: 1px solid var(--glass-border);
}

/* ====== BATCH SELECTION MODE ====== */

.sales-selection-toggle {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: transparent;
    border: 1px solid transparent;
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.2s ease;
    margin-right: 4px;
}

.sales-selection-toggle:hover {
    background: var(--glass-bg);
    border-color: var(--glass-border);
    color: var(--text-secondary);
}

.sales-selection-toggle.active {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary);
    color: var(--primary);
}

/* E2: usunięto orphan .sale-item .sale-checkbox* — stary system zaznaczania
   został wymieniony na .sale-select-handle (zobacz wyżej w pliku).
   Pozostawiamy tylko jeden komentarz, by ułatwić git-blame. */

/* ====== SALES SELECTION ACTION SHEET ====== */
.sales-action-sheet {
    position: fixed;
    left: 50%;
    bottom: -120%;
    transform: translateX(-50%);
    width: min(560px, calc(100vw - 24px));
    background: var(--surface-elev-1, #1e1e20);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 22px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5);
    z-index: 1000;
    padding: 6px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: bottom .35s cubic-bezier(.2, .85, .25, 1);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}

.sales-action-sheet.visible {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
}

body.light-mode .sales-action-sheet {
    background: rgba(255, 255, 255, 0.98);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow: 0 18px 48px rgba(0, 0, 0, 0.18);
}

.sas-handle {
    width: 38px;
    height: 4px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
    margin: 6px auto 2px;
}

body.light-mode .sas-handle { background: rgba(0, 0, 0, 0.14); }

.sas-row { display: flex; align-items: center; gap: 10px; }

.sas-row-info { justify-content: space-between; }

.sas-info { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; min-width: 0; }

.sas-count {
    font-weight: 800;
    font-size: 22px;
    line-height: 1;
    color: var(--primary-color, #007AFF);
    font-variant-numeric: tabular-nums;
}

.sas-count-label { color: var(--text-secondary); font-size: 13px; font-weight: 500; }

.sas-sep { color: var(--text-tertiary); }

.sas-sum {
    font-weight: 700;
    font-size: 15px;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.sas-sum.positive { color: #34c759; }
.sas-sum.negative { color: #ef4444; }

.sas-close {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.10);
    color: var(--text-secondary);
    display: grid;
    place-items: center;
    cursor: pointer;
    transition: all .15s ease;
}
.sas-close:hover { background: rgba(239, 68, 68, 0.18); color: #ef4444; border-color: rgba(239, 68, 68, 0.4); }
body.light-mode .sas-close { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); }

.sas-row-move { flex-direction: column; align-items: stretch; gap: 8px; }

.sas-section-label {
    font-size: 11px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 700;
}

.sas-chips {
    display: flex;
    gap: 8px;
    overflow-x: auto;
    padding: 2px 0 4px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.sas-chips::-webkit-scrollbar { display: none; }

.sas-chip {
    flex: 1 0 auto;
    min-width: 96px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    color: var(--text-primary);
    cursor: pointer;
    transition: all .15s ease;
    font-family: inherit;
}
.sas-chip:hover {
    background: rgba(var(--primary-rgb), 0.15);
    border-color: var(--primary-color);
    transform: translateY(-1px);
    box-shadow: 0 6px 16px rgba(var(--primary-rgb), 0.18);
}
.sas-chip-label { font-weight: 700; font-size: 13px; }
.sas-chip-date { font-size: 11px; color: var(--text-tertiary); text-transform: capitalize; }
body.light-mode .sas-chip { background: rgba(0, 0, 0, 0.03); border-color: rgba(0, 0, 0, 0.07); }

.sas-row-actions { display: flex; gap: 8px; }

.sas-btn {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 11px 14px;
    border-radius: 12px;
    border: none;
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all .15s ease;
}
.sas-btn-calendar { background: rgba(var(--primary-rgb), 0.14); color: var(--primary-color); }
.sas-btn-calendar:hover { background: rgba(var(--primary-rgb), 0.24); }
.sas-btn-delete { background: rgba(239, 68, 68, 0.14); color: #ef4444; }
.sas-btn-delete:hover { background: rgba(239, 68, 68, 0.24); }

/* Inline mini-calendar */
.sas-calendar {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-top: 12px;
    margin-top: 2px;
    animation: sasCalIn .2s ease;
}
@keyframes sasCalIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
body.light-mode .sas-calendar { border-color: rgba(0, 0, 0, 0.06); }

.sas-cal-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.sas-cal-nav {
    width: 30px; height: 30px; border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    display: grid; place-items: center;
    cursor: pointer;
    transition: all .15s ease;
}
.sas-cal-nav:hover { background: rgba(var(--primary-rgb), 0.15); color: var(--primary-color); border-color: var(--primary-color); }
body.light-mode .sas-cal-nav { background: rgba(0, 0, 0, 0.04); border-color: rgba(0, 0, 0, 0.08); }

.sas-cal-title { font-weight: 700; font-size: 14px; text-transform: capitalize; color: var(--text-primary); }
.sas-cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.sas-cal-wd { text-align: center; font-size: 10px; color: var(--text-tertiary); padding: 4px 0; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }
.sas-cal-cell {
    aspect-ratio: 1 / 1;
    display: grid; place-items: center;
    border-radius: 10px;
    background: transparent;
    border: none;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    cursor: pointer;
    transition: all .12s ease;
    font-family: inherit;
    font-variant-numeric: tabular-nums;
}
.sas-cal-cell.empty { visibility: hidden; cursor: default; }
.sas-cal-cell.day:hover { background: rgba(var(--primary-rgb), 0.2); color: var(--primary-color); transform: scale(1.05); }
.sas-cal-cell.today { color: var(--primary-color); box-shadow: inset 0 0 0 1.5px var(--primary-color); }
.sas-cal-cell.past { color: var(--text-tertiary); }
.sas-cal-cell.past:hover { color: var(--primary-color); }

@media (max-width: 480px) {
    .sales-action-sheet {
        width: calc(100vw - 16px);
        padding: 4px 12px 14px;
        border-radius: 20px;
    }
    .sas-chip { min-width: 80px; padding: 8px 10px; }
    .sas-chip-label { font-size: 12px; }
    .sas-btn { padding: 12px; font-size: 13px; }
    .sas-count { font-size: 20px; }
}

.sales-overflow-item svg {
    color: var(--text-secondary);
    flex-shrink: 0;
}

/* ====== SWIPE-TO-ACTION ====== */
/* A1: selektory zmienione z .sale-item (legacy) na .sale-card. */
.sale-card {
    position: relative;
    overflow: visible;
    will-change: transform;
}

.sale-card.swipe-delete {
    background: linear-gradient(90deg, rgba(var(--ios-red-rgb), 0.2), rgba(var(--ios-red-rgb), 0.05)) !important;
    border-color: rgba(var(--ios-red-rgb), 0.4) !important;
}

.sale-card.swipe-edit {
    background: linear-gradient(90deg, rgba(var(--ios-blue-rgb), 0.05), rgba(var(--ios-blue-rgb), 0.2)) !important;
    border-color: rgba(var(--ios-blue-rgb), 0.4) !important;
}

/* B14: flash-new — podkreślenie nowo dodanej karty. */
/* B14: flash-new — podkreślenie nowo dodanej karty. */
@keyframes saleFlashNew {
    0%   { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0.55), 0 0 0 0 rgba(var(--primary-rgb), 0.35); background-color: rgba(var(--primary-rgb), 0.12); }
    60%  { box-shadow: 0 0 0 6px rgba(var(--primary-rgb), 0.0), 0 0 24px 4px rgba(var(--primary-rgb), 0.0); background-color: rgba(var(--primary-rgb), 0.04); }
    100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb), 0); background-color: transparent; }
}
.sale-card.flash-new {
    animation: saleFlashNew 1.5s ease-out;
}

/* C2: powierzchnia dotyku selection-handle ≥44×44 px (WCAG). */
.sale-select-handle::before {
    content: '';
    position: absolute;
    inset: -10px;
    border-radius: 50%;
}

/* B4: podświetlenie tokenów wyszukiwania w treści kart. */
.sale-search-mark {
    background: rgba(var(--primary-rgb), 0.22);
    color: inherit;
    padding: 0 2px;
    border-radius: 3px;
    font-weight: 700;
}
body.light-mode .sale-search-mark {
    background: rgba(var(--primary-rgb), 0.18);
}

/* ====== PREMIUM GLASS CARD REFINEMENTS (iOS 26 — Simplified) ====== */
#sales .glass-card {
    background: rgba(255, 255, 255, 0.04);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

body.light-mode #sales .glass-card {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
}

/* Premium stat cards */
#sales .sales-stat-card {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 14px 10px;
    transition: all 0.2s ease;
}

body.light-mode #sales .sales-stat-card {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}

/* Premium quick action buttons */
#sales .sales-quick-btn {
    border-radius: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.2s ease;
}

#sales .sales-quick-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

#sales .sales-quick-icon {
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

/* Sale items with left border color indicator */
#sales .sale-item {
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-left: 3px solid var(--primary-color);
    transition: all 0.2s ease;
}

#sales .sale-item.shipment {
    border-left-color: var(--ios-blue);
}

#sales .sale-item.refund {
    border-left-color: #ff9500;
}

#sales .sale-item.expense {
    border-left-color: var(--ios-red);
}

body.light-mode #sales .sale-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.05);
}

body.light-mode #sales .sale-item.shipment { border-left-color: var(--ios-blue); }
body.light-mode #sales .sale-item.refund { border-left-color: #ff9500; }
body.light-mode #sales .sale-item.expense { border-left-color: var(--ios-red); }
body.light-mode #sales .sale-item:not(.shipment):not(.refund):not(.expense) { border-left-color: var(--primary-color); }

#sales .sale-item:hover {
    border-color: rgba(var(--primary-rgb), 0.15);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06);
}

/* Prominent amount */
#sales .sale-item-amount {
    font-size: 16px;
    font-weight: 700;
}

/* Premium month/day navigation */
#sales .sales-month-display,
#sales .sales-day-header .sales-month-display {
    font-weight: 700;
    letter-spacing: -0.3px;
}

/* Premium collapsible sections */
#sales .sales-collapsible-section {
    border-radius: 20px;
}

/* Lighter date group headers */
#sales .sales-date-header {
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.04);
}

body.light-mode #sales .sales-date-header {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
}

#sales .sales-date-group.expanded .sales-date-header {
    border-radius: 10px 10px 0 0;
    background: rgba(var(--primary-rgb), 0.06);
    border-color: rgba(var(--primary-rgb), 0.12);
}

#sales .sales-date-group.expanded .sales-items-collapsible {
    border-radius: 0 0 10px 10px;
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(255, 255, 255, 0.04);
}

body.light-mode #sales .sales-date-group.expanded .sales-items-collapsible {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.04);
}

/* Tabs */
#sales .sales-tabs {
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
}

body.light-mode #sales .sales-tabs {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.05);
}

/* Premium payout */
#sales .payout-row.cash {
    border-radius: 18px;
    border: 1px solid rgba(74, 222, 128, 0.25);
    box-shadow:
        0 4px 24px rgba(34, 197, 94, 0.12),
        0 1px 4px rgba(34, 197, 94, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}

/* ============================================================================
   ALLEGRO INTEGRATION STYLES
   ============================================================================ */

/* Orange "Dodaj z Allegro" button in form header */
/* ── Apple-style Allegro Import Button ── */
.allegro-import-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: rgba(255, 149, 0, 0.12);
    color: #ff9f0a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.2s ease;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none;
    letter-spacing: 0.2px;
}

.allegro-import-btn svg {
    flex-shrink: 0;
    min-width: 14px;
    min-height: 14px;
    stroke: currentColor;
}

.allegro-import-btn:hover {
    background: rgba(255, 149, 0, 0.2);
    box-shadow: none;
}

.allegro-import-btn:active {
    transform: scale(0.96);
    background: rgba(255, 149, 0, 0.28);
}

/* Light mode */
body.light-mode .allegro-import-btn {
    background: rgba(255, 149, 0, 0.1);
    color: #e08600;
    box-shadow: none;
}

body.light-mode .allegro-import-btn:hover {
    background: rgba(255, 149, 0, 0.18);
    box-shadow: none;
}

/* Yellow highlight for unfilled fields (Allegro import) */
.allegro-unfilled {
    border-color: rgba(255, 204, 0, 0.4) !important;
}

.allegro-unfilled:focus {
    border-color: #ffcc00 !important;
    box-shadow: 0 0 0 3px rgba(255, 204, 0, 0.15) !important;
}

/* ── Allegro Orders Modal ──────────────────────────────────────────── */

.allegro-orders-panel {
    background: linear-gradient(165deg, rgba(20, 20, 30, 0.97) 0%, rgba(10, 10, 20, 0.99) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 149, 0, 0.15);
    border-radius: 24px;
    width: 95vw;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6), 0 0 40px rgba(255, 149, 0, 0.08);
    transform: translateY(20px);
    opacity: 0;
    animation: allegroSlideIn 0.3s ease forwards;
}

body.light-mode .allegro-orders-panel {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 250, 0.99) 100%);
    border-color: rgba(255, 149, 0, 0.2);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15), 0 0 40px rgba(255, 149, 0, 0.05);
}

@keyframes allegroSlideIn {
    to { transform: translateY(0); opacity: 1; }
}

.allegro-orders-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 149, 0, 0.12);
}

.allegro-orders-title {
    display: flex;
    align-items: center;
    gap: 10px;
}

.allegro-orders-icon {
    font-size: 22px;
}

.allegro-orders-title h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.allegro-orders-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 16px;
    transition: all 0.2s ease;
}

body.light-mode .allegro-orders-close {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.08);
}

.allegro-orders-close:hover {
    background: rgba(var(--ios-red-rgb), 0.15);
    color: var(--ios-red);
}

.allegro-orders-body {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    -webkit-overflow-scrolling: touch;
}

/* Loading state */
.allegro-orders-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 16px;
    padding: 60px 20px;
    color: var(--text-tertiary);
    font-size: 14px;
}

.allegro-spinner {
    width: 36px;
    height: 36px;
    border: 3px solid rgba(255, 149, 0, 0.15);
    border-top-color: var(--ios-orange);
    border-radius: 50%;
    animation: allegroSpin 0.8s linear infinite;
}

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

/* Empty state */
.allegro-orders-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 60px 20px;
    color: var(--text-tertiary);
}

.allegro-orders-empty-icon {
    font-size: 48px;
}

.allegro-orders-empty p {
    margin: 0;
    font-size: 15px;
}

/* Orders list */
.allegro-orders-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.allegro-order-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: all 0.25s ease;
}

body.light-mode .allegro-order-item {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.allegro-order-item:hover {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.15);
}

.allegro-order-item:active {
    opacity: 0.85;
}

/* ── Allegro order thumbnail ── */
.allegro-order-thumb {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    border-radius: 12px;
    overflow: hidden;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.allegro-order-thumb:hover {
    transform: scale(1.03);
    box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.allegro-order-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 11px;
}

.allegro-order-thumb-ph {
    color: var(--text-tertiary, #555);
    opacity: 0.4;
}

body.light-mode .allegro-order-thumb {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}

.allegro-order-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.allegro-order-name {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.allegro-order-more {
    font-size: 11px;
    font-weight: 600;
    color: var(--ios-orange);
    background: rgba(255, 149, 0, 0.12);
    padding: 1px 6px;
    border-radius: 6px;
    margin-left: 4px;
}

.allegro-order-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 12px;
    color: var(--text-tertiary);
}

.allegro-order-date {
    opacity: 0.8;
}

.allegro-order-buyer {
    opacity: 0.7;
}

.allegro-order-amount {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.allegro-order-badge {
    font-size: 10px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.allegro-order-badge.paid {
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
    border: 1px solid rgba(var(--ios-green-rgb), 0.2);
}

.allegro-order-badge.unpaid {
    background: rgba(255, 149, 0, 0.15);
    color: var(--ios-orange);
    border: 1px solid rgba(255, 149, 0, 0.2);
}

.allegro-order-arrow {
    flex-shrink: 0;
    color: var(--text-tertiary);
    opacity: 0.5;
}

/* ── Allegro Auth Modal ──────────────────────────────────────────── */

.allegro-auth-panel {
    background: linear-gradient(165deg, rgba(20, 20, 30, 0.97) 0%, rgba(10, 10, 20, 0.99) 100%);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 149, 0, 0.15);
    border-radius: 24px;
    width: 95vw;
    max-width: 440px;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
    transform: translateY(20px);
    opacity: 0;
    animation: allegroSlideIn 0.3s ease forwards;
}

body.light-mode .allegro-auth-panel {
    background: linear-gradient(165deg, rgba(255, 255, 255, 0.98) 0%, rgba(245, 245, 250, 0.99) 100%);
    border-color: rgba(255, 149, 0, 0.2);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.15);
}

.allegro-auth-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 24px 16px;
    border-bottom: 1px solid rgba(255, 149, 0, 0.12);
}

.allegro-auth-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
}

.allegro-auth-close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary);
    font-size: 16px;
    transition: all 0.2s ease;
}

.allegro-auth-close:hover {
    background: rgba(var(--ios-red-rgb), 0.15);
    color: var(--ios-red);
}

.allegro-auth-body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.allegro-auth-body p {
    margin: 0;
    font-size: 14px;
    color: var(--text-secondary);
    line-height: 1.5;
}

.allegro-auth-link {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 20px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.2), rgba(255, 149, 0, 0.1));
    border: 1px solid rgba(255, 149, 0, 0.3);
    color: var(--ios-orange);
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.25s ease;
}

.allegro-auth-link:hover {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.3), rgba(255, 149, 0, 0.15));
    border-color: rgba(255, 149, 0, 0.5);
    transform: translateY(-1px);
}

.allegro-auth-code {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(255, 149, 0, 0.06);
    border: 1px solid rgba(255, 149, 0, 0.12);
}

.allegro-auth-code-label {
    font-size: 12px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.allegro-auth-code-value {
    font-size: 28px;
    font-weight: 800;
    color: var(--ios-orange);
    letter-spacing: 4px;
    font-family: 'SF Mono', 'Menlo', monospace;
}

.allegro-auth-waiting {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    padding: 12px;
    color: var(--text-tertiary);
    font-size: 13px;
}

.allegro-auth-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 149, 0, 0.15);
    border-top-color: var(--ios-orange);
    border-radius: 50%;
    animation: allegroSpin 0.8s linear infinite;
}

/* ── Allegro Settings Tab ──────────────────────────────────────── */

.allegro-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
}

body.light-mode .allegro-status-row {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.allegro-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.allegro-status-dot.connected {
    background: var(--ios-green);
    box-shadow: 0 0 8px rgba(var(--ios-green-rgb), 0.5);
}

.allegro-status-dot.disconnected {
    background: var(--text-tertiary);
    opacity: 0.5;
}

.allegro-status-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.allegro-settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.allegro-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.allegro-field input[type="text"],
.allegro-field input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.allegro-field input[type="text"]:focus,
.allegro-field input[type="password"]:focus {
    outline: none;
    border-color: rgba(255, 149, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

.allegro-env-label {
    display: flex !important;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-size: 13px !important;
    color: var(--text-secondary) !important;
}

.allegro-env-label input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ios-orange);
}

.allegro-settings-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.allegro-save-btn,
.allegro-connect-btn,
.allegro-disconnect-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid;
    flex: 1;
    justify-content: center;
    min-width: 140px;
}

.allegro-save-btn {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
}

.allegro-save-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.35);
}

.allegro-connect-btn {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.15), rgba(255, 149, 0, 0.08));
    border-color: rgba(255, 149, 0, 0.25);
    color: var(--ios-orange);
}

.allegro-connect-btn:hover {
    background: linear-gradient(135deg, rgba(255, 149, 0, 0.25), rgba(255, 149, 0, 0.15));
    border-color: rgba(255, 149, 0, 0.4);
}

.allegro-disconnect-btn {
    background: rgba(var(--ios-red-rgb), 0.1);
    border-color: rgba(var(--ios-red-rgb), 0.2);
    color: var(--ios-red);
}

.allegro-disconnect-btn:hover {
    background: rgba(var(--ios-red-rgb), 0.18);
    border-color: rgba(var(--ios-red-rgb), 0.35);
}

.allegro-help-text {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 149, 0, 0.05);
    border: 1px solid rgba(255, 149, 0, 0.1);
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.6;
}

.allegro-help-text p {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: var(--text-secondary);
}

.allegro-help-text ol {
    margin: 0;
    padding-left: 18px;
}

.allegro-help-text li {
    margin-bottom: 4px;
}

.allegro-help-text a {
    color: var(--ios-orange);
    text-decoration: none;
    font-weight: 600;
}

.allegro-help-text a:hover {
    text-decoration: underline;
}


/* ============================================================================
   ALLEGRO PHOTOS PANEL
   ============================================================================ */

/* Search bar */
.allegro-photos-search {
    width: 100%;
    margin-top: 12px;
    position: relative;
}

.allegro-photos-search-input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.allegro-photos-search-icon {
    position: absolute;
    right: 14px;
    width: 20px;
    height: 20px;
    stroke: var(--text-tertiary);
    pointer-events: none;
    transition: stroke 0.2s ease;
    opacity: 0.6;
}

.allegro-photos-search-input:focus ~ .allegro-photos-search-icon {
    stroke: var(--primary-color);
    opacity: 1;
}

.allegro-photos-search-input {
    width: 100%;
    padding: 12px 48px 12px 18px;
    font-size: 15px;
    font-weight: 500;
    color: var(--text-primary);
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 14px;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    outline: none;
}

.allegro-photos-search-input:focus {
    border-color: var(--primary-color);
    background: rgba(0, 0, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.15);
}

.allegro-photos-search-input::placeholder {
    color: rgba(255, 255, 255, 0.35);
    font-size: 13px;
    font-style: normal;
}

body.light-mode .allegro-photos-search-input {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
    color: var(--text-primary);
}

body.light-mode .allegro-photos-search-input::placeholder {
    color: rgba(0, 0, 0, 0.35);
}

body.light-mode .allegro-photos-search-input:focus {
    background: rgba(0, 0, 0, 0.06);
    border-color: var(--primary-color);
}

/* Sort */
.allegro-photos-sort-select {
    height: 34px;
    box-sizing: border-box;
    padding: 0 28px 0 12px;
    font-size: 12px;
    line-height: 34px;
    color: var(--text-primary);
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    outline: none;
    cursor: pointer;
    transition: all 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(255,255,255,0.4)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    white-space: nowrap;
}

.allegro-photos-sort-select:hover {
    border-color: rgba(255, 255, 255, 0.2);
}

.allegro-photos-sort-select:focus {
    border-color: var(--primary-color);
}

body.light-mode .allegro-photos-sort-select {
    border-color: rgba(0, 0, 0, 0.12);
    color: var(--text-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='rgba(0,0,0,0.35)' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Photos header */
.allegro-photos-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.allegro-photos-header .section-title {
    margin-bottom: 0;
}

/* Toolbar */
.allegro-photos-toolbar {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 10px 0;
}

.allegro-photos-toolbar-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.allegro-photos-select-all-label {
    display: flex;
    align-items: center;
    gap: 7px;
    font-size: 12px;
    height: 34px;
    color: var(--text-secondary);
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    padding: 0;
    transition: color 0.2s ease;
}

.allegro-photos-select-all-label:hover {
    color: var(--text-primary);
}

.allegro-photos-custom-checkbox {
    position: relative;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
}

.allegro-photos-custom-checkbox input[type="checkbox"] {
    position: absolute;
    width: 18px;
    height: 18px;
    margin: 0;
    opacity: 0;
    cursor: pointer;
    z-index: 2;
}

.allegro-photos-custom-checkbox::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 5px;
    border: 2px solid rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.04);
    transition: all 0.2s ease;
}

.allegro-photos-custom-checkbox input:checked ~ .allegro-photos-check-icon {
    opacity: 1;
    transform: scale(1);
}

.allegro-photos-custom-checkbox input:indeterminate ~ .allegro-photos-check-icon {
    opacity: 0;
}

.allegro-photos-custom-checkbox:has(input:indeterminate)::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 2px;
    background: #fff;
    border-radius: 1px;
    z-index: 1;
}

.allegro-photos-custom-checkbox:has(input:checked)::before,
.allegro-photos-custom-checkbox:has(input:indeterminate)::before {
    background: var(--accent-color, #007AFF);
    border-color: var(--accent-color, #007AFF);
}

.allegro-photos-check-icon {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    transform: scale(0.5);
    transition: all 0.2s ease;
    pointer-events: none;
    z-index: 1;
}

body.light-mode .allegro-photos-custom-checkbox::before {
    border-color: rgba(0, 0, 0, 0.18);
    background: rgba(0, 0, 0, 0.03);
}

.allegro-photos-selected-count {
    font-size: 11px;
    color: var(--text-tertiary);
    white-space: nowrap;
    opacity: 0.7;
}

.allegro-photos-download-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    height: 38px;
    margin-top: 8px;
    background: linear-gradient(135deg, #34C759, #30B550);
    color: white;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.allegro-photos-download-btn:not(:disabled):hover {
    filter: brightness(1.1);
    box-shadow: 0 4px 14px rgba(var(--ios-green-rgb), 0.35);
}

.allegro-photos-download-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.allegro-photos-download-btn:not(:disabled):active {
    transform: scale(0.98);
    filter: brightness(0.95);
}

/* Results container */
.allegro-photos-results {
    min-height: 120px;
}

.allegro-photos-loading,
.allegro-photos-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1rem;
    text-align: center;
    gap: 8px;
}

.allegro-photos-empty-icon {
    font-size: 40px;
    opacity: 0.5;
}

.allegro-photos-empty p {
    color: var(--text-secondary);
    font-size: 14px;
    margin: 0;
}

.allegro-photos-hint {
    font-size: 12px !important;
    color: var(--text-tertiary) !important;
}

/* Photo cards grid */
.allegro-photos-grid {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.allegro-photo-card {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 7px 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, transform 0.15s ease;
    position: relative;
    user-select: none;
}

.allegro-photo-card:active {
    transform: scale(0.985);
}

.allegro-photo-card:hover {
    background: rgba(255, 255, 255, 0.06);
}

.allegro-photo-card.selected {
    background: rgba(var(--ios-blue-rgb), 0.08);
    border-color: rgba(var(--ios-blue-rgb), 0.25);
}

body.light-mode .allegro-photo-card {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .allegro-photo-card:hover {
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .allegro-photo-card.selected {
    background: rgba(var(--ios-blue-rgb), 0.06);
    border-color: rgba(var(--ios-blue-rgb), 0.2);
}

/* Card checkbox */
.allegro-photo-card-check {
    position: relative;
    flex-shrink: 0;
}

.allegro-photo-card-check input[type="checkbox"] {
    width: 20px;
    height: 20px;
    opacity: 0;
    position: absolute;
    cursor: pointer;
}

.allegro-photo-card-checkmark {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.15);
    border-radius: 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    background: rgba(255, 255, 255, 0.03);
}

body.light-mode .allegro-photo-card-checkmark {
    border-color: rgba(0, 0, 0, 0.12);
    background: rgba(0, 0, 0, 0.02);
}

.allegro-photo-card.selected .allegro-photo-card-checkmark {
    background: var(--accent-color, #007AFF);
    border-color: var(--accent-color, #007AFF);
    color: white;
}

.allegro-photo-card-checkmark svg {
    opacity: 0;
    transition: opacity 0.15s ease;
}

.allegro-photo-card.selected .allegro-photo-card-checkmark svg {
    opacity: 1;
}

/* Thumbnail */
.allegro-photo-card-thumb {
    width: 42px;
    height: 42px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
}

.allegro-photo-card-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.allegro-photo-card-no-img {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    opacity: 0.4;
}

body.light-mode .allegro-photo-card-thumb {
    background: rgba(0, 0, 0, 0.04);
}

/* Card info */
.allegro-photo-card-info {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 10px;
}

.allegro-photo-card-name-wrap {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, black 90%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 90%, transparent 100%);
}

.allegro-photo-card-name {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    line-height: 1.4;
    display: inline-block;
    transition: none;
}

/* Marquee animation for long names on hover */
.allegro-photo-card:hover .allegro-photo-card-name.is-overflowing {
    animation: marquee-carousel var(--marquee-duration, 6s) linear infinite;
}

.allegro-photo-card-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.allegro-photo-card-price {
    font-size: 12px;
    font-weight: 700;
    color: var(--accent-color, #007AFF);
    white-space: nowrap;
}

.allegro-photo-card-date {
    font-size: 10px;
    color: var(--text-tertiary);
    white-space: nowrap;
}

.allegro-photo-card-status {
    font-size: 9px;
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

.allegro-photo-card-status.active {
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
}

.allegro-photo-card-status.ended {
    background: rgba(255, 149, 0, 0.15);
    color: #FF9500;
}

.allegro-photo-card-status.inactive {
    background: rgba(142, 142, 147, 0.15);
    color: var(--text-tertiary);
}

body.light-mode .allegro-photo-card-status.active {
    background: rgba(var(--ios-green-rgb), 0.12);
    color: #28a745;
}

body.light-mode .allegro-photo-card-status.ended {
    background: rgba(255, 149, 0, 0.12);
    color: #e67e00;
}

/* Pagination */
.allegro-photos-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 12px 0;
    flex-wrap: wrap;
}

.allegro-photos-page-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}

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

.allegro-photos-page-btn.active {
    background: var(--accent-color, #007AFF);
    border-color: var(--accent-color, #007AFF);
    color: white;
}

.allegro-photos-page-btn.prev,
.allegro-photos-page-btn.next {
    width: auto;
    padding: 0 10px;
}

body.light-mode .allegro-photos-page-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

.allegro-photos-page-dots {
    color: var(--text-tertiary);
    font-size: 13px;
    padding: 0 2px;
}

.allegro-photos-page-info {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-left: 6px;
}

/* ============================================================================
   GLOBAL TOUCH & ACCESSIBILITY IMPROVEMENTS
   ============================================================================ */
button,
a,
input,
select,
textarea,
[role="button"],
.seller-tile,
.nav-tab,
.settings-tab,
.toggle-btn,
.datepicker-nav-btn {
    touch-action: manipulation;
}

/* ============================================================================
   INVENTORY / ASORTYMENT PANEL
   ============================================================================ */

/* ── Sub-tabs ─────────────────────────────────────────────────────── */

.inv-tabs {
    display: flex;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    border: 1px solid var(--glass-border);
    border-radius: 14px;
    padding: 4px;
    margin-bottom: 20px;
    position: relative;
    height: 52px;
    isolation: isolate;
    z-index: 5; /* wyżej niż glass-card::before */
}

body.light-mode .inv-tabs {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.08);
}

.inv-tab-btn {
    flex: 1;
    padding: 0 10px;
    border: none;
    background: transparent;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    font-size: 13px;
    font-weight: 600;
    border-radius: 10px;
    cursor: pointer;
    transition: color 0.2s ease, transform 0.15s ease;
    -webkit-tap-highlight-color: transparent;
    position: relative;
    z-index: 10; /* wysoki z-index żeby zawsze był klikalny */
    white-space: nowrap;
    letter-spacing: -0.01em;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    /* Zapewnienie że przycisk jest zawsze klikalny */
    pointer-events: auto;
}

/* "Dodane" — widoczna w panelu Ovoko po rozdzieleniu paneli */

.inv-tab-btn:not(.active):hover {
    color: var(--text-primary);
    transform: scale(1.08);
}
.inv-tab-btn:not(.active):active {
    opacity: 0.7;
    transform: scale(0.98);
}

body.light-mode .inv-tab-btn:hover {
    background: transparent;
}

.inv-tab-btn.active {
    color: white;
    background: transparent;
    box-shadow: none;
}

body.light-mode .inv-tab-btn.active {
    color: white;
}

/* Inv Tabs Slider — 5 tabs (Dodane ukryta) */
.inv-tabs-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc((100% - 8px) / 5);
    height: calc(100% - 8px);
    background: rgba(var(--primary-rgb), 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    /* Subtle spring bounce */
    transition: transform 0.35s cubic-bezier(0.34, 1.25, 0.64, 1);
    box-shadow: 0 0 12px var(--primary-glow);
    pointer-events: none !important; /* NIGDY nie przechwytuje kliknięć */
    z-index: 1;
    will-change: transform; /* optymalizacja animacji */
}

/* Pozycje slidera dla 5 zakładek: Dodawanie(0), Katalog(1), Kolejka(2), Porównanie(3), Cennik(4) */
.inv-tabs-slider.pos-1 {
    transform: translateX(100%);
}

.inv-tabs-slider.pos-2 {
    transform: translateX(200%);
}

.inv-tabs-slider.pos-3 {
    transform: translateX(300%);
}

.inv-tabs-slider.pos-4 {
    transform: translateX(400%);
}

.inv-tab-panel {
    display: none;
}

.inv-tab-panel.active {
    display: block;
    animation: fadeInScale 0.25s ease;
}

/* Inv Tabs Slider — 6 tabs (Dodane ukryta) */
.inv-tabs-slider {
    position: absolute;
    top: 4px;
    left: 4px;
    width: calc((100% - 8px) / 6);
    height: calc(100% - 8px);
    background: rgba(var(--primary-rgb), 0.5);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    border-radius: 10px;
    /* Subtle spring bounce */
    transition: transform 0.35s cubic-bezier(0.34, 1.25, 0.64, 1);
    box-shadow: 0 0 12px var(--primary-glow);
    pointer-events: none !important; /* NIGDY nie przechwytuje kliknięć */
    z-index: 1;
    will-change: transform; /* optymalizacja animacji */
}

/* Pozycje slidera dla 6 zakładek: Dodawanie(0), Katalog(1), Kolejka(2), Porównanie(3), Cennik(4), Scalanie(5) */
.inv-tabs-slider.pos-1 {
    transform: translateX(100%);
}

.inv-tabs-slider.pos-2 {
    transform: translateX(200%);
}

.inv-tabs-slider.pos-3 {
    transform: translateX(300%);
}

.inv-tabs-slider.pos-4 {
    transform: translateX(400%);
}

.inv-tabs-slider.pos-5 {
    transform: translateX(500%);
}

.inv-tab-panel {
    display: none;
}

.inv-tab-panel.active {
    display: block;
    animation: fadeInScale 0.25s ease;
}

/* ══ MERGE TAB STYLES — Apple redesign ═════════════════════════════ */

.merge-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 14px;
}

.merge-header-info {
    flex: 1;
    min-width: 0;
}

.merge-title {
    margin: 0 0 4px;
    font-size: 1.05rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--text-primary);
}

.merge-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    line-height: 1.4;
}
.merge-subtitle strong {
    color: var(--text-primary);
    font-weight: 600;
}

.merge-refresh-btn {
    flex-shrink: 0;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    color: var(--text-secondary);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.1s;
}
.merge-refresh-btn:hover {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}
.merge-refresh-btn:active { transform: scale(0.94); }
body.light-mode .merge-refresh-btn {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}

/* Idle / scanning / empty states */
.merge-idle, .merge-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 2.5rem 1.5rem;
    text-align: center;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}
body.light-mode .merge-idle,
body.light-mode .merge-empty {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.06);
}

.merge-idle-icon, .merge-empty-icon {
    width: 56px; height: 56px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
    margin-bottom: 4px;
}
.merge-empty-icon {
    background: rgba(52, 199, 89, 0.15);
    color: #34c759;
}

.merge-idle-text {
    margin: 0;
    font-size: 0.88rem;
    color: var(--text-secondary);
}
.merge-empty-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.merge-empty-sub {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
}

.merge-primary-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: transform 0.08s, filter 0.15s;
    margin-top: 4px;
}
.merge-primary-btn:hover { filter: brightness(1.08); }
.merge-primary-btn:active { transform: scale(0.97); }

.merge-scanning {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2.5rem 1.5rem;
    gap: 8px;
    text-align: center;
    background: rgba(255,255,255,0.02);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
}
body.light-mode .merge-scanning {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.06);
}
.merge-scan-spinner {
    width: 28px; height: 28px;
    border-radius: 50%;
    border: 2.5px solid rgba(var(--primary-rgb), 0.18);
    border-top-color: var(--primary-color);
    animation: mergeSpin 0.8s linear infinite;
    margin-bottom: 6px;
}
@keyframes mergeSpin { to { transform: rotate(360deg); } }
.merge-scan-status { margin: 0; font-size: 0.9rem; font-weight: 600; color: var(--text-primary); }
.merge-scan-detail { margin: 0; font-size: 0.78rem; color: var(--text-tertiary); }
.merge-scan-track {
    margin-top: 10px;
    width: 240px;
    height: 4px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
}
body.light-mode .merge-scan-track { background: rgba(0,0,0,0.08); }
.merge-scan-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    border-radius: 999px;
    transition: width 0.3s ease;
}

/* Toolbar: select-all + search */
.merge-toolbar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 12px;
}
.merge-select-all {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    user-select: none;
    padding: 8px 10px 8px 8px;
    border-radius: 10px;
    transition: background 0.12s;
    flex-shrink: 0;
}
.merge-select-all:hover { background: rgba(255,255,255,0.04); }
body.light-mode .merge-select-all:hover { background: rgba(0,0,0,0.03); }
.merge-select-all input { position: absolute; opacity: 0; pointer-events: none; }
.merge-select-all-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
    font-weight: 500;
}
.merge-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.merge-search-icon {
    position: absolute;
    left: 12px;
    color: var(--text-tertiary);
    pointer-events: none;
}
.merge-search-input {
    width: 100%;
    padding: 9px 14px 9px 34px;
    background: rgba(255,255,255,0.05);
    border: 1px solid transparent;
    border-radius: 10px;
    color: var(--text-primary);
    /* 16px prevents iOS zoom-on-focus; stays compact vs. the global clamp() */
    font-size: 16px;
    font-weight: 500;
    line-height: 1.2;
    outline: none;
    transition: background 0.15s, border-color 0.15s;
    box-sizing: border-box;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}
.merge-search-input:focus {
    background: rgba(255,255,255,0.08);
    border-color: rgba(var(--primary-rgb), 0.4);
}
body.light-mode .merge-search-input {
    background: rgba(0,0,0,0.04);
}
body.light-mode .merge-search-input:focus {
    background: rgba(0,0,0,0.06);
}

/* Apple-style checkbox (shared) */
.merge-checkbox-visual {
    display: inline-block;
    width: 20px;
    height: 20px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    border: 1.5px solid rgba(255,255,255,0.22);
    position: relative;
    transition: background 0.15s, border-color 0.15s, transform 0.08s;
    flex-shrink: 0;
}
body.light-mode .merge-checkbox-visual {
    background: #fff;
    border-color: rgba(0,0,0,0.22);
}
.merge-checkbox-visual::after {
    content: "";
    position: absolute;
    top: 50%; left: 50%;
    width: 10px; height: 6px;
    border-left: 2px solid #fff;
    border-bottom: 2px solid #fff;
    transform: translate(-50%, -70%) rotate(-45deg) scale(0);
    transition: transform 0.15s;
}
.merge-select-all input:checked + .merge-checkbox-visual,
.merge-group-checkbox:checked + .merge-checkbox-visual {
    background: var(--primary-color);
    border-color: var(--primary-color);
}
.merge-select-all input:checked + .merge-checkbox-visual::after,
.merge-group-checkbox:checked + .merge-checkbox-visual::after {
    transform: translate(-50%, -70%) rotate(-45deg) scale(1);
}
.merge-select-all input:focus-visible + .merge-checkbox-visual,
.merge-group-checkbox:focus-visible + .merge-checkbox-visual {
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.25);
}

/* List + cards */
.merge-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-bottom: 8px;
}

.merge-group {
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    overflow: hidden;
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.merge-group:hover {
    background: rgba(255,255,255,0.04);
    border-color: rgba(var(--primary-rgb), 0.25);
}
.merge-group.is-selected {
    background: rgba(var(--primary-rgb), 0.07);
    border-color: rgba(var(--primary-rgb), 0.45);
    box-shadow: 0 0 0 1px rgba(var(--primary-rgb), 0.15) inset;
}
body.light-mode .merge-group {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
}
body.light-mode .merge-group:hover {
    border-color: rgba(var(--primary-rgb), 0.3);
}
body.light-mode .merge-group.is-selected {
    background: rgba(var(--primary-rgb), 0.05);
    border-color: rgba(var(--primary-rgb), 0.5);
}

.merge-group-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
}

.merge-group-check {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 6px;
    margin: -6px;
    flex-shrink: 0;
}
.merge-group-check input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.merge-group-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.merge-group-titleline {
    display: flex;
    align-items: baseline;
    gap: 8px;
    min-width: 0;
}

.merge-group-name {
    font-weight: 600;
    font-size: 0.92rem;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.005em;
}
.merge-group-year {
    font-size: 0.78rem;
    color: var(--text-secondary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.merge-group-meta {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    line-height: 1.4;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.merge-group-mainid {
    font-variant-numeric: tabular-nums;
    color: var(--text-secondary);
    font-weight: 600;
}

.merge-group-stats {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}
.merge-group-badge {
    background: rgba(var(--primary-rgb), 0.12);
    color: var(--primary-color);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 999px;
    white-space: nowrap;
    letter-spacing: -0.01em;
}
.merge-group-parts {
    font-size: 0.74rem;
    color: var(--text-tertiary);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.merge-execute-btn {
    flex-shrink: 0;
    padding: 7px 16px;
    background: rgba(var(--primary-rgb), 0.14);
    color: var(--primary-color);
    border: none;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, transform 0.08s, filter 0.15s;
    letter-spacing: -0.005em;
}
.merge-execute-btn:hover {
    background: rgba(var(--primary-rgb), 0.22);
}
.merge-execute-btn:active { transform: scale(0.96); }
.merge-execute-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.merge-group-status {
    padding: 0 14px 12px;
    font-size: 0.78rem;
}
.merge-group-status .merge-inline-bar {
    width: 100%;
    height: 3px;
    background: rgba(255,255,255,0.08);
    border-radius: 999px;
    overflow: hidden;
    margin-bottom: 6px;
}
body.light-mode .merge-group-status .merge-inline-bar { background: rgba(0,0,0,0.08); }
.merge-inline-fill {
    height: 100%;
    background: var(--primary-color);
    border-radius: 999px;
    transition: width 0.25s ease;
    width: 0%;
}
.merge-inline-text {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}
.merge-group-status.is-running .merge-inline-text { color: var(--primary-color); font-weight: 500; }
.merge-group-status.is-ok .merge-inline-text { color: #34c759; font-weight: 500; }
.merge-group-status.is-warn .merge-inline-text { color: #ff9f0a; font-weight: 500; }

/* Sticky bulk bar */
.merge-bulk-bar {
    position: sticky;
    bottom: 12px;
    z-index: 20;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 10px 14px 10px 18px;
    margin-top: 14px;
    background: rgba(28, 28, 30, 0.92);
    backdrop-filter: saturate(180%) blur(20px);
    -webkit-backdrop-filter: saturate(180%) blur(20px);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 14px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.25);
    opacity: 0;
    transform: translateY(8px);
    pointer-events: none;
    transition: opacity 0.2s, transform 0.2s;
}
.merge-bulk-bar.is-visible {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}
body.light-mode .merge-bulk-bar {
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 10px 30px rgba(0,0,0,0.12);
}
.merge-bulk-left {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    min-width: 0;
}
.merge-bulk-count {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.merge-bulk-label {
    font-size: 0.82rem;
    color: var(--text-secondary);
}
.merge-bulk-right {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.merge-bulk-clear {
    padding: 8px 14px;
    background: transparent;
    color: var(--text-secondary);
    border: none;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}
.merge-bulk-clear:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
}
body.light-mode .merge-bulk-clear:hover { background: rgba(0,0,0,0.05); }
.merge-bulk-run {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: var(--primary-color);
    color: #fff;
    border: none;
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    cursor: pointer;
    transition: filter 0.15s, transform 0.08s;
}
.merge-bulk-run:hover { filter: brightness(1.08); }
.merge-bulk-run:active { transform: scale(0.97); }

/* Inline queue panel (non-blocking, at top of merge tab) */
.merge-queue-panel {
    margin: 0 0 14px;
    padding: 12px 14px;
    background: rgba(var(--primary-rgb), 0.08);
    border: 1px solid rgba(var(--primary-rgb), 0.28);
    border-radius: 14px;
    position: sticky;
    top: 8px;
    z-index: 5;
    backdrop-filter: saturate(180%) blur(12px);
    -webkit-backdrop-filter: saturate(180%) blur(12px);
}
body.light-mode .merge-queue-panel {
    background: rgba(var(--primary-rgb), 0.06);
    border-color: rgba(var(--primary-rgb), 0.25);
}
.merge-queue-panel-row {
    display: flex;
    align-items: center;
    gap: 12px;
}
.merge-queue-panel-icon {
    flex-shrink: 0;
    width: 36px; height: 36px;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb), 0.18);
}
.merge-queue-mini-spinner {
    width: 18px; height: 18px;
    border-radius: 50%;
    border: 2px solid rgba(var(--primary-rgb), 0.25);
    border-top-color: var(--primary-color);
    animation: mergeSpin 0.8s linear infinite;
}
.merge-queue-panel-body {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.merge-queue-panel-top {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 8px;
}
.merge-queue-panel-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.005em;
}
.merge-queue-panel-counter {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--primary-color);
    font-variant-numeric: tabular-nums;
}
.merge-queue-panel-track {
    width: 100%;
    height: 4px;
    background: rgba(255,255,255,0.1);
    border-radius: 999px;
    overflow: hidden;
    margin: 2px 0 4px;
}
body.light-mode .merge-queue-panel-track { background: rgba(0,0,0,0.08); }
.merge-queue-panel-fill {
    height: 100%;
    width: 0%;
    background: var(--primary-color);
    border-radius: 999px;
    transition: width 0.3s ease;
}
.merge-queue-panel-current {
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.merge-queue-panel-sub {
    font-size: 0.74rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Pagination */
.merge-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin: 12px 0 8px;
    padding: 8px 2px;
}
.merge-page-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary);
    border: 1px solid transparent;
    border-radius: 999px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s, color 0.15s, transform 0.08s;
    letter-spacing: -0.005em;
}
.merge-page-btn:hover:not(:disabled) {
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
}
.merge-page-btn:active:not(:disabled) { transform: scale(0.96); }
.merge-page-btn:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}
body.light-mode .merge-page-btn {
    background: rgba(0,0,0,0.04);
}
.merge-page-info {
    font-size: 0.78rem;
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
}

/* Queued tag inline on group title */
.merge-group-queued-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.15);
    color: var(--primary-color);
    font-size: 0.68rem;
    font-weight: 700;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    margin-left: 4px;
}
.merge-group.is-queued {
    background: rgba(var(--primary-rgb), 0.05);
    border-color: rgba(var(--primary-rgb), 0.3);
}
.merge-group.is-queued .merge-group-check { opacity: 0.5; }

/* Small screens */
@media (max-width: 520px) {
    .merge-group-row { flex-wrap: wrap; }
    .merge-group-stats { order: 3; }
    .merge-execute-btn { order: 4; margin-left: auto; }
    .merge-group-main { flex-basis: 100%; min-width: 0; }
    .merge-group-meta { white-space: normal; }
    .merge-toolbar { flex-direction: column; align-items: stretch; }
    .merge-select-all { align-self: flex-start; }
}

/* ── Section ──────────────────────────────────────────────────────── */

.inv-section {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.08);
}

.inv-section-title {
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #000);
    margin: 0 0 10px 0;
    letter-spacing: 0.3px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-section-title svg {
    opacity: 0.5;
}

.inv-section-desc {
    font-size: 12px;
    color: var(--text-secondary, #3C3C43);
    opacity: 0.7;
    margin: -4px 0 14px 0;
    line-height: 1.4;
}

/* ── Import search ────────────────────────────────────────────────── */

.inv-import-search-wrapper {
    position: relative;
    margin-bottom: 10px;
}

.inv-search-input {
    width: 100%;
    padding: 10px 12px 10px 36px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.15);
    border-radius: 12px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.04);
    color: var(--text-primary, #000);
    font-size: 14px;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.inv-search-input:focus {
    border-color: var(--ios-blue, #007AFF);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.12);
}

.inv-search-icon {
    position: absolute;
    left: 11px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    opacity: 0.4;
    pointer-events: none;
}

/* ── Import results ───────────────────────────────────────────────── */

.inv-import-results {
    max-height: 380px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}
.inv-import-results::-webkit-scrollbar {
    display: none;
}

.inv-import-footer {
    text-align: center;
    padding: 10px 0 6px;
    font-size: 0.75rem;
    color: var(--text-secondary);
    opacity: 0.6;
    letter-spacing: 0.3px;
}

/* Load more button */
.wiz-load-more-btn {
    display: block;
    width: 100%;
    padding: 14px 20px;
    margin: 12px 0 8px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.15);
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.35);
    border-radius: 12px;
    color: #5ac8fa;
    font-size: 0.9rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
}
body.light-mode .wiz-load-more-btn {
    color: var(--primary);
}
.wiz-load-more-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.25);
    transform: translateY(-1px);
}
.wiz-load-more-btn:active {
    transform: translateY(0);
}

/* ═══════════════════════════════════════════════════════════════════
   PHOTO GALLERY MODAL — For viewing offer images
   ═══════════════════════════════════════════════════════════════════ */
.photo-gallery-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.photo-gallery-overlay.active {
    opacity: 1;
    pointer-events: auto;
}
.photo-gallery-overlay.loading {
    justify-content: center;
}

.photo-gallery-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
}

.photo-gallery-modal {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 90vw;
    max-height: 90vh;
    position: relative;
}

.photo-gallery-close {
    position: absolute;
    top: -50px;
    right: 0;
    background: none;
    border: none;
    color: rgba(255,255,255,0.7);
    cursor: pointer;
    padding: 8px;
    transition: color 0.2s;
    z-index: 10;
}
.photo-gallery-close:hover {
    color: #fff;
}

.photo-gallery-main {
    display: flex;
    align-items: center;
    gap: 20px;
}

.photo-gallery-nav {
    background: rgba(255,255,255,0.1);
    border: none;
    color: #fff;
    cursor: pointer;
    padding: 12px;
    border-radius: 50%;
    transition: all 0.2s;
    flex-shrink: 0;
}
.photo-gallery-nav:hover {
    background: rgba(255,255,255,0.2);
}

.photo-gallery-image-wrap {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 70vw;
    max-height: 65vh;
}

.photo-gallery-image {
    max-width: 100%;
    max-height: 65vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.5);
}

.photo-gallery-counter {
    margin-top: 16px;
    font-size: 14px;
    color: rgba(255,255,255,0.6);
    font-weight: 500;
}

.photo-gallery-thumbs {
    display: flex;
    gap: 8px;
    margin-top: 16px;
    overflow-x: auto;
    max-width: 80vw;
    padding: 8px 0;
}
.photo-gallery-thumbs::-webkit-scrollbar {
    height: 4px;
}
.photo-gallery-thumbs::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.2);
    border-radius: 2px;
}

.photo-gallery-thumb {
    width: 60px;
    height: 60px;
    object-fit: cover;
    border-radius: 6px;
    cursor: pointer;
    opacity: 0.5;
    transition: all 0.2s;
    border: 2px solid transparent;
    flex-shrink: 0;
}
.photo-gallery-thumb:hover {
    opacity: 0.8;
}
.photo-gallery-thumb.active {
    opacity: 1;
    border-color: var(--primary, #007AFF);
}

.photo-gallery-title {
    margin-top: 16px;
    font-size: 13px;
    color: rgba(255,255,255,0.5);
    max-width: 70vw;
    text-align: center;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 600px) {
    .photo-gallery-nav {
        padding: 8px;
    }
    .photo-gallery-nav svg {
        width: 20px;
        height: 20px;
    }
    .photo-gallery-thumb {
        width: 48px;
        height: 48px;
    }
    .photo-gallery-close {
        top: -40px;
    }
}

.inv-import-offer {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.08);
    margin-bottom: 8px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.02);
    transition: background 0.15s, opacity 0.15s;
    animation: offerResultSlideIn 0.35s cubic-bezier(0.22, 1, 0.36, 1) both;
}

/* Staggered entrance for search results */
.inv-import-offer:nth-child(1)  { animation-delay: 0s; }
.inv-import-offer:nth-child(2)  { animation-delay: 0.035s; }
.inv-import-offer:nth-child(3)  { animation-delay: 0.07s; }
.inv-import-offer:nth-child(4)  { animation-delay: 0.1s; }
.inv-import-offer:nth-child(5)  { animation-delay: 0.13s; }
.inv-import-offer:nth-child(6)  { animation-delay: 0.155s; }
.inv-import-offer:nth-child(7)  { animation-delay: 0.18s; }
.inv-import-offer:nth-child(8)  { animation-delay: 0.2s; }
.inv-import-offer:nth-child(9)  { animation-delay: 0.22s; }
.inv-import-offer:nth-child(10) { animation-delay: 0.24s; }
.inv-import-offer:nth-child(n+11) { animation-delay: 0.26s; }

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

.inv-import-offer:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
}

/* Thumbnail wrapper with hover overlay */
.inv-import-thumb-wrap {
    position: relative;
    flex-shrink: 0;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
}
.inv-import-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #fff;
}
.inv-import-thumb-wrap:hover .inv-import-thumb-overlay {
    opacity: 1;
}

.inv-import-thumb {
    width: 90px;
    height: 90px;
    border-radius: 10px;
    object-fit: cover;
    background: rgba(0,0,0,0.05);
    flex-shrink: 0;
    display: block;
}

/* Broken / empty image placeholder — shared across all thumbnail types */
.img-broken {
    display: flex !important;
    align-items: center;
    justify-content: center;
    background: rgba(var(--primary-rgb, 0,122,255), 0.06) !important;
    color: var(--text-tertiary);
    font-size: 1.4rem;
    opacity: 0.45;
    border: 1px dashed rgba(var(--primary-rgb, 0,122,255), 0.15);
}
.img-broken::after {
    content: '📦';
}
/* When it's an <img> with empty src — hide the broken icon completely */
.img-broken[src=""] {
    color: transparent;
}

.inv-import-info {
    flex: 1 !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

.inv-import-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #000);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    line-height: 1.3;
    margin-bottom: 0;
}

.inv-import-price {
    font-size: 13px;
    color: var(--ios-green, #34C759);
    font-weight: 600;
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s, box-shadow 0.15s;
    background: rgba(52, 199, 89, 0.08);
    display: inline-flex;
    align-items: center;
    min-height: 30px;
    line-height: 1.4;
    touch-action: manipulation;
    -webkit-tap-highlight-color: rgba(52, 199, 89, 0.2);
    user-select: none;
    -webkit-user-select: none;
    position: relative;
}
.inv-import-price:hover {
    background: rgba(52, 199, 89, 0.18);
    box-shadow: 0 0 0 2px rgba(52, 199, 89, 0.15);
}
.inv-import-price:active {
    background: rgba(52, 199, 89, 0.25);
    transform: scale(0.97);
}
.inv-import-price:empty {
    display: none;
}

input.inv-import-price-inline,
input[type="text"].inv-import-price-inline {
    width: 60px !important;
    max-width: 60px !important;
    padding: 4px 8px !important;
    border: 1.5px solid var(--ios-green, #34C759) !important;
    border-radius: 6px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    background: transparent !important;
    color: var(--ios-green, #34C759) !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    min-height: 0 !important;
    height: 22px !important;
    line-height: 1.4 !important;
    appearance: none !important;
    -moz-appearance: none !important;
    -webkit-appearance: none !important;
    box-sizing: border-box !important;
    margin: 0 !important;
}
input.inv-import-price-inline:focus,
input[type="text"].inv-import-price-inline:focus {
    border-color: var(--ios-green, #34C759) !important;
    background: transparent !important;
    box-shadow: none !important;
}
body.light-mode input.inv-import-price-inline,
body.light-mode input[type="text"].inv-import-price-inline {
    background: #fff !important;
}

/* ── Price edit widget v3: [input] zł [✓] ─────────────────────────
   Uses .price-editing parent for specificity to beat global
   input[type="text"] rule (0,0,1,1). Parent+child = (0,0,2,0).
   All layout properties use !important to guarantee override.
   ─────────────────────────────────────────────────────────────── */
.price-editing {
    display: inline-flex !important;
    align-items: center !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: rgba(52, 199, 89, 0.10) !important;
    border-radius: 7px !important;
    border: 1.5px solid rgba(52, 199, 89, 0.3) !important;
    width: fit-content !important;
    min-width: 0 !important;
    max-width: 150px !important;
    height: 28px !important;
    overflow: visible !important;
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    box-sizing: border-box !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    position: relative !important;
}

/* Input — high specificity selector to beat input[type="text"] */
.price-editing .price-edit-input,
.price-editing input[type="text"].price-edit-input {
    width: 56px !important;
    max-width: 56px !important;
    min-width: 36px !important;
    flex: 0 0 56px !important;
    height: 100% !important;
    min-height: 0 !important;
    padding: 0 1px 0 6px !important;
    margin: 0 !important;
    border: none !important;
    border-radius: 0 !important;
    background: transparent !important;
    color: #fff !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    text-align: left !important;
    line-height: 28px !important;
    outline: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    box-sizing: border-box !important;
    transition: none !important;
}
.price-editing .price-edit-input::placeholder {
    color: rgba(255, 255, 255, 0.35) !important;
    font-weight: 400 !important;
}
.price-editing .price-edit-input:focus {
    outline: none !important;
    border: none !important;
    box-shadow: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
}
.price-editing .price-edit-input:hover {
    border: none !important;
    background: transparent !important;
}

/* Currency suffix */
.price-editing .price-edit-suffix {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.45) !important;
    padding: 0 3px 0 0 !important;
    user-select: none !important;
    -webkit-user-select: none !important;
    white-space: nowrap !important;
    line-height: 28px !important;
    flex-shrink: 0 !important;
}

/* Confirm button */
.price-editing .price-edit-confirm {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 26px !important;
    min-width: 26px !important;
    align-self: stretch !important;
    background: rgba(52, 199, 89, 0.25) !important;
    border: none !important;
    border-left: 1px solid rgba(52, 199, 89, 0.2) !important;
    border-radius: 0 5px 5px 0 !important;
    color: #30D158 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    transition: background 0.15s !important;
    flex-shrink: 0 !important;
}
.price-editing .price-edit-confirm:hover {
    background: rgba(52, 199, 89, 0.45) !important;
}
.price-editing .price-edit-confirm:active {
    background: rgba(52, 199, 89, 0.6) !important;
}

/* Price change indicator: "449 zł → 299 zł" — below the widget */
.price-change-info {
    display: flex;
    align-items: center;
    gap: 3px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    position: absolute;
    top: calc(100% + 2px);
    left: 0;
    animation: priceChangeSlide 0.3s ease-out;
    z-index: 2;
}
.price-change-old {
    color: #FF453A;
    opacity: 0.85;
}
.price-change-arrow {
    color: #FFD60A;
    font-weight: 700;
}
.price-change-new {
    color: #30D158;
}
@keyframes priceChangeSlide {
    from { opacity: 0; transform: translateY(-4px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Light mode overrides */
body.light-mode .price-editing {
    background: rgba(52, 199, 89, 0.07) !important;
    border-color: rgba(52, 199, 89, 0.25) !important;
}
body.light-mode .price-editing .price-edit-input {
    color: #1a1a1a !important;
}
body.light-mode .price-editing .price-edit-input::placeholder {
    color: rgba(0, 0, 0, 0.3) !important;
}
body.light-mode .price-editing .price-edit-suffix {
    color: rgba(0, 0, 0, 0.45) !important;
}
body.light-mode .price-editing .price-edit-confirm {
    background: rgba(52, 199, 89, 0.15) !important;
    color: #28a745 !important;
}
body.light-mode .price-change-old { color: #d32f2f; }
body.light-mode .price-change-arrow { color: #f9a825; }
body.light-mode .price-change-new { color: #2e7d32; }

.inv-import-cat-row {
    margin-top: 4px;
    display: block !important;
    width: 100% !important;
    flex-shrink: 0 !important;
}

.inv-import-meta {
    display: flex !important;
    align-items: center;
    gap: 10px;
    margin-top: 4px;
    flex-wrap: wrap;
    width: 100% !important;
    flex-shrink: 0 !important;
}

.inv-import-cat-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color, #007AFF);
    background: rgba(0, 122, 255, 0.12);
    border-radius: 4px;
    padding: 1px 6px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

body.light-mode .inv-import-cat-badge {
    background: rgba(0, 122, 255, 0.1);
    color: #0066d6;
}

/* Ovoko badge — oferta już dodana na Ovoko */
.inv-import-ovoko-badge {
    font-size: 10px;
    font-weight: 700;
    color: #fb923c;
    background: rgba(234, 88, 12, 0.15);
    border-radius: 4px;
    padding: 1px 7px;
    letter-spacing: 0.3px;
    white-space: nowrap;
}

/* Bulk Ovoko — status pill dla ofert nieaktywnych / w trakcie aktywacji.
   Informuje, że Allegro jeszcze sprawdza ofertę, ale i tak można ją wybrać. */
.bulk-offer-status {
    font-size: 10px;
    font-weight: 700;
    border-radius: 4px;
    padding: 1px 7px;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-transform: uppercase;
}
.bulk-offer-status-inactive {
    color: #f59e0b;
    background: rgba(245, 158, 11, 0.15);
}
.bulk-offer-status-activating {
    color: #38bdf8;
    background: rgba(56, 189, 248, 0.15);
}
body.light-mode .bulk-offer-status-inactive {
    color: #b45309;
    background: rgba(245, 158, 11, 0.18);
}
body.light-mode .bulk-offer-status-activating {
    color: #0369a1;
    background: rgba(56, 189, 248, 0.2);
}

body.light-mode .inv-import-ovoko-badge {
    background: rgba(234, 88, 12, 0.12);
    color: #ea580c;
}

.inv-import-on-ovoko {
    opacity: 0.5;
    order: 999;
    position: relative;
}

.inv-import-on-ovoko:hover {
    opacity: 0.8;
}

.inv-import-on-ovoko .ovoko-import-btn {
    background: rgba(100, 100, 100, 0.15) !important;
    border-color: rgba(100, 100, 100, 0.3) !important;
    color: var(--text-tertiary) !important;
}

.inv-import-date {
    font-size: 12px;
    color: var(--text-secondary, #8e8e93);
    font-weight: 400;
    opacity: 0.7;
}

.inv-import-status {
    font-size: 10px;
    padding: 2px 6px;
    border-radius: 5px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 0.2s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.2s, filter 0.2s;
    display: inline-block;
    cursor: pointer;
}

a.inv-import-status:hover {
    transform: scale(1.12);
    filter: brightness(1.25);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}
a.inv-import-status:active {
    transform: scale(0.95);
}

.inv-import-status.active {
    background: rgba(var(--ios-green-rgb), 0.15);
    color: var(--ios-green);
}

.inv-import-status.ended {
    background: rgba(255, 149, 0, 0.15);
    color: #FF9500;
}

.inv-import-status.inactive {
    background: rgba(142, 142, 147, 0.15);
    color: var(--text-tertiary, #8e8e93);
}

body.light-mode .inv-import-status.active {
    background: rgba(var(--ios-green-rgb), 0.12);
    color: #28a745;
}

body.light-mode .inv-import-status.ended {
    background: rgba(255, 149, 0, 0.12);
    color: #e67e00;
}

.inv-import-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 8px 14px;
    border: none;
    background: linear-gradient(135deg, #5856D6, #007AFF);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: opacity 0.15s, transform 0.15s;
    width: 100%;
}

.inv-import-btn:hover {
    filter: brightness(1.1);
}

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

/* Quick duplicate button ("Zdjęcia") */
.inv-quick-dup-btn {
    padding: 6px 10px;
    width: auto;
    font-size: 12px;
    font-weight: 500;
    background: linear-gradient(135deg, #34c759, #30d158);
}
.inv-quick-dup-btn:hover {
    filter: brightness(1.15);
}

/* Actions column — right side */
.inv-import-actions-col {
    display: flex;
    flex-direction: column;
    gap: 6px;
    flex-shrink: 0;
    min-width: 90px;
    justify-content: center;
    align-self: stretch;
}

.inv-import-view-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 6px 10px;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary);
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 6px;
    text-decoration: none;
    transition: all 0.15s;
    white-space: nowrap;
}
body.light-mode .inv-import-view-link {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}
.inv-import-view-link:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary);
}
body.light-mode .inv-import-view-link:hover {
    background: rgba(0,0,0,0.08);
}

/* ── Import offer actions row ─────────────────────────────────────── */
.inv-import-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.inv-import-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    font-size: 11px;
    font-weight: 500;
    color: var(--ios-blue, #007AFF);
    background: rgba(var(--ios-blue-rgb), 0.1);
    border-radius: 6px;
    text-decoration: none;
    transition: background 0.15s;
    white-space: nowrap;
}

.inv-import-view-btn:hover {
    background: rgba(var(--ios-blue-rgb), 0.18);
}

.inv-import-view-btn svg {
    flex-shrink: 0;
}

.inv-import-price-edit {
    display: flex;
    align-items: center;
    gap: 4px;
    background: rgba(var(--ios-green-rgb), 0.1);
    border-radius: 6px;
    padding: 2px 6px 2px 2px;
}

.inv-import-price-input {
    width: 70px !important;
    padding: 4px 6px !important;
    font-size: 12px !important;
    font-weight: 600;
    color: var(--ios-green, #34C759);
    background: transparent !important;
    border: none !important;
    outline: none;
    text-align: right;
    -moz-appearance: textfield;
    appearance: textfield;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.inv-import-price-input::-webkit-outer-spin-button,
.inv-import-price-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

.inv-import-price-input::placeholder {
    color: var(--text-tertiary, #8e8e93);
    font-weight: 400;
}

.inv-import-price-input:focus {
    background: rgba(255, 255, 255, 0.1) !important;
    box-shadow: none !important;
    border: none !important;
}

.inv-import-price-suffix {
    font-size: 11px;
    font-weight: 500;
    color: var(--ios-green, #34C759);
    opacity: 0.8;
}

.inv-import-save-price-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    margin-left: 2px;
    background: rgba(var(--ios-green-rgb), 0.2);
    border: none;
    border-radius: 5px;
    color: var(--ios-green, #34C759);
    cursor: pointer;
    transition: all 0.2s ease;
    opacity: 0.7;
}

.inv-import-save-price-btn:hover {
    opacity: 1;
    background: rgba(var(--ios-green-rgb), 0.35);
}

.inv-import-save-price-btn.saving {
    opacity: 0.5;
    pointer-events: none;
    animation: inv-save-pulse 0.8s infinite;
}

.inv-import-save-price-btn.saved {
    background: var(--ios-green, #34C759);
    color: #fff;
    opacity: 1;
}

@keyframes inv-save-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(0.9); }
}

body.light-mode .inv-import-price-edit {
    background: rgba(var(--ios-green-rgb), 0.08);
}

body.light-mode .inv-import-price-input {
    color: #28a745;
}

body.light-mode .inv-import-price-suffix {
    color: #28a745;
}

body.light-mode .inv-import-view-btn {
    background: rgba(var(--ios-blue-rgb), 0.08);
}

body.light-mode .inv-import-save-price-btn {
    background: rgba(40, 167, 69, 0.15);
    color: #28a745;
}

body.light-mode .inv-import-save-price-btn:hover {
    background: rgba(40, 167, 69, 0.25);
}

body.light-mode .inv-import-save-price-btn.saved {
    background: #28a745;
    color: #fff;
}

/* ═══════════════════════════════════════════════════════════════════
   PRICING PANEL — Cennik
   ═══════════════════════════════════════════════════════════════════ */

.pricing-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 12px;
    gap: 10px;
}
.pricing-title {
    font-size: 17px;
    font-weight: 700;
    margin: 0;
    color: var(--text-primary);
}
.pricing-count {
    font-size: 12px;
    color: var(--text-secondary);
    font-weight: 600;
    white-space: nowrap;
}
.pricing-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

/* Toolbar — search + sort */
.pricing-toolbar {
    margin-bottom: 10px;
}
.pricing-search-row {
    display: flex;
    gap: 8px;
    align-items: center;
}
.pricing-search-wrap {
    flex: 1;
    position: relative;
    display: flex;
    align-items: center;
}
.pricing-search-icon {
    position: absolute;
    left: 10px;
    color: var(--text-tertiary);
    pointer-events: none;
}
.pricing-search-input {
    width: 100%;
    padding: 8px 10px 8px 10px;
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.04);
    color: var(--text-primary);
    font-size: 13px !important;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
}
/* Override iOS Safari 16px zoom-fix and mobile media overrides */
@supports (-webkit-touch-callout: none) {
    .pricing-search-input { font-size: 13px !important; }
}
.pricing-search-input:focus {
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.1);
}
.pricing-search-clear {
    position: absolute;
    right: 6px;
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    font-size: 14px;
    padding: 4px;
    line-height: 1;
}
.pricing-select {
    padding: 8px 10px;
    border: 1px solid rgba(var(--primary-rgb), 0.15);
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.04);
    color: var(--text-primary);
    font-size: 12px;
    outline: none;
    cursor: pointer;
    white-space: nowrap;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238e8e93'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}

/* Select bar */
.pricing-select-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 6px 0;
    margin-bottom: 4px;
    font-size: 12px;
    color: var(--text-secondary);
}
.pricing-select-all-label {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    user-select: none;
}
.pricing-select-all-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    cursor: pointer;
}
/* Category browser section */
.pricing-category-section {
    margin-bottom: 8px;
}
.pricing-cat-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 8px 12px;
    border: 1px solid rgba(var(--primary-rgb), 0.10);
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.02);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.pricing-cat-toggle:hover {
    background: rgba(var(--primary-rgb), 0.06);
}
.pricing-cat-toggle-icon {
    font-size: 14px;
}
.pricing-cat-toggle-text {
    flex: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.pricing-cat-toggle-arrow {
    font-size: 16px;
    font-weight: 600;
    color: var(--text-tertiary);
    transition: transform 0.2s;
}
.pricing-cat-toggle-arrow.open {
    transform: rotate(90deg);
}
.pricing-cat-browser {
    margin-top: 6px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.02);
    overflow: hidden;
}
.pricing-cat-breadcrumb {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 12px;
    font-size: 11px;
    color: var(--text-tertiary);
    flex-wrap: wrap;
    border-bottom: 1px solid rgba(var(--primary-rgb), 0.06);
}
.pricing-cat-tree {
    max-height: 220px;
    overflow-y: auto;
    padding: 4px;
}
.pricing-cat-tree .inv-category-item {
    padding: 7px 10px;
    font-size: 12px;
    border-radius: 8px;
}
.pricing-cat-tree .inv-category-item:last-child {
    border-bottom: none;
}

/* Offer list */
.pricing-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-height: 100px;
}
.pricing-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 0;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ══════════════════════════════════════════════════════════════════
   PRICING ROW — Apple-inspired clean layout (v267)
   Grid: [check] [thumb] [info-column flex:1] [price-widget]
   Info column stacks three rows: name • meta (date+stats) • actions
   ══════════════════════════════════════════════════════════════════ */
.pricing-row {
    display: grid;
    grid-template-columns: auto 64px 1fr auto;
    align-items: center;
    gap: 14px;
    padding: 12px 14px;
    border-radius: 14px;
    border: 1px solid rgba(var(--primary-rgb), 0.08);
    background: linear-gradient(180deg, rgba(var(--primary-rgb),0.025), rgba(var(--primary-rgb),0.01));
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    animation: offerResultSlideIn 0.25s cubic-bezier(0.22, 1, 0.36, 1) both;
    cursor: pointer;
    -webkit-user-select: none;
    user-select: none;
}
.pricing-row:hover {
    background: rgba(var(--primary-rgb), 0.05);
    border-color: rgba(var(--primary-rgb), 0.14);
}
.pricing-row.stale {
    border-left: 3px solid #FFD60A;
}
.pricing-row-check {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
    cursor: pointer;
    flex-shrink: 0;
    margin: 0;
}
.pricing-thumb-wrap {
    position: relative;
    cursor: pointer;
    border-radius: 10px;
    overflow: hidden;
    width: 64px;
    height: 64px;
    background: rgba(255,255,255,0.04);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2px;
    box-sizing: border-box;
}
.pricing-thumb-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.55);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s ease;
    color: #fff;
}
.pricing-thumb-wrap:hover .pricing-thumb-overlay {
    opacity: 1;
}
.pricing-row-thumb {
    max-width: 100%;
    max-height: 100%;
    width: auto;
    height: auto;
    border-radius: 8px;
    object-fit: contain;
    display: block;
}
.pricing-row-thumb.img-broken {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 20px;
}

/* Info column — three stacked rows, evenly spaced */
.pricing-row-info {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.pricing-row-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    letter-spacing: -0.01em;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.32;
}

/* Meta row — dates + age chip inline; flex-nowrap so chip never drops */
.pricing-row-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 11px;
    color: var(--text-tertiary);
    min-width: 0;
    flex-wrap: nowrap;
    overflow: hidden;
}
.pricing-row-date {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pricing-row-dates {
    display: inline-flex;
    align-items: baseline;
    gap: 0;
    white-space: nowrap;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    flex-shrink: 1;
}
.pricing-row-modified {
    white-space: nowrap;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.pricing-row-modified[hidden] { display: none; }
.pricing-row-modified .prm-date {
    color: var(--text-secondary);
    font-weight: 500;
}
.pr-spacer {
    flex: 1 1 auto;
    min-width: 8px;
}
.pr-stats {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    font-size: 11px;
    color: rgba(255,255,255,0.55);
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.pr-stats .prs-visits { white-space: nowrap; }
.pr-stats .prs-watchers {
    white-space: nowrap;
    color: rgba(255,120,120,0.72);
}

/* Inline warning chip (stale age) */
.pr-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 7px;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.5;
    flex-shrink: 0;
}
.pr-chip-warn {
    color: #FFD60A;
    background: rgba(255, 214, 10, 0.12);
}
.pr-chip-neutral {
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.06);
}
.pr-chip-danger {
    color: #FF453A;
    background: rgba(255, 69, 58, 0.14);
    animation: priceStaleFlash 2s ease-in-out infinite;
}

/* Actions row — dedicated line, no overlap with meta */
.pricing-row-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.pricing-row-allegro {
    font-size: 10.5px;
    font-weight: 600;
    color: #FF6723;
    text-decoration: none;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(255, 103, 35, 0.12);
    transition: background 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}
.pricing-row-allegro:hover {
    background: rgba(255, 103, 35, 0.24);
}
.pricing-check-price {
    font-size: 10.5px;
    font-weight: 600;
    color: var(--primary);
    padding: 3px 10px;
    border-radius: 999px;
    background: rgba(var(--primary-rgb), 0.12);
    border: none;
    cursor: pointer;
    transition: background 0.15s;
    white-space: nowrap;
    line-height: 1.4;
}
.pricing-check-price:hover {
    background: rgba(var(--primary-rgb), 0.24);
}

/* Price history + stale badges — sit inline in actions row */
.pricing-price-history {
    font-size: 10px;
    font-weight: 500;
    color: #fff;
    background: rgba(48, 209, 88, 0.15);
    padding: 3px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
    white-space: nowrap;
    line-height: 1.4;
}
.pricing-price-history .ph-old {
    color: #FFD60A;
    font-weight: 600;
}
.pricing-price-history .ph-arrow {
    color: rgba(255,255,255,0.7);
    margin: 0 2px;
}
.pricing-price-history .ph-new {
    color: #30D158;
    font-weight: 600;
}
.pricing-price-history .ph-meta {
    color: rgba(255,255,255,0.6);
}
.pricing-price-history .ph-meta.ph-stale {
    color: #FF453A;
    font-weight: 600;
    cursor: help;
}
.pricing-price-stale {
    font-size: 10px;
    font-weight: 600;
    color: #FF453A;
    background: rgba(255, 69, 58, 0.14);
    padding: 3px 8px;
    border-radius: 999px;
    display: inline-flex;
    align-items: center;
    white-space: nowrap;
    line-height: 1.4;
    animation: priceStaleFlash 2s ease-in-out infinite;
}
@keyframes priceStaleFlash {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.65; }
}

.pricing-price-widget {
    flex-shrink: 0;
}
.pricing-price-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex-shrink: 0;
}

/* Pagination */
.pricing-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 0 4px;
    flex-wrap: wrap;
}
.pricing-page-btn {
    min-width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.03);
    color: var(--text-primary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    padding: 0 6px;
}
.pricing-page-btn:hover {
    background: rgba(var(--primary-rgb), 0.1);
}
.pricing-page-btn.active {
    background: var(--primary-color);
    color: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}
.pricing-page-btn:disabled {
    opacity: 0.35;
    cursor: default;
}
.pricing-page-ellipsis {
    padding: 0 4px;
    color: var(--text-tertiary);
    font-size: 12px;
}

/* Bulk bar */
/* Widget fade-out when row selected — entire widget fades, badge replaces */
.pricing-widget-hidden {
    background: transparent !important;
    border-color: transparent !important;
}
.pricing-widget-hidden > .price-edit-input,
.pricing-widget-hidden > .price-edit-suffix,
.pricing-widget-hidden > .price-edit-confirm {
    opacity: 0 !important;
    pointer-events: none !important;
    transition: opacity 0.15s ease-out, visibility 0s 0.15s !important;
    visibility: hidden !important;
}
.pricing-price-widget {
    position: relative;
    transition: background 0.2s ease-out, border-color 0.2s ease-out;
}
.pricing-price-widget > .price-edit-input,
.pricing-price-widget > .price-edit-suffix,
.pricing-price-widget > .price-edit-confirm {
    transition: opacity 0.15s ease-out;
}

/* Colored price label — shown only during bulk selection */
/* Positioned over the hidden widget so row height never changes */
.pricing-static-price {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    padding: 0 8px;
    border-radius: 7px;
    height: 28px;
    box-sizing: border-box;
    opacity: 0;
}
.pricing-static-price.psp-enter {
    opacity: 1;
    transition: opacity 0.2s ease-out;
}
/* Color states */
.pricing-static-price.psp-green  { color: #30D158; background: rgba(48,209,88,0.10); }
.pricing-static-price.psp-yellow { color: #FFD60A; background: rgba(255,214,10,0.10); }
.pricing-static-price.psp-red    { color: #FF453A; background: rgba(255,69,58,0.10); }

/* ── "Zmiana ceny" filter checkbox in pricing header ── */
.pricing-filter-check {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    padding: 4px 10px;
    border-radius: 8px;
    background: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--primary-rgb), 0.12);
    transition: all 0.2s ease;
    user-select: none;
    -webkit-user-select: none;
    white-space: nowrap;
    margin-left: 6px;
}
.pricing-filter-check:hover {
    background: rgba(var(--primary-rgb), 0.12);
}
.pricing-filter-check:has(input:checked) {
    background: rgba(255, 69, 58, 0.12);
    border-color: rgba(255, 69, 58, 0.35);
    color: #FF6961;
}
.pricing-filter-check input[type="checkbox"] {
    width: 14px;
    height: 14px;
    accent-color: #FF453A;
    margin: 0;
    cursor: pointer;
}

/* Row bounce disabled — clean selection without distractions */

/* Bulk action controls — inline in select bar */
.pricing-bulk-inline {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: auto;
    opacity: 0;
    transform: translateX(8px);
    transition: opacity 0.25s ease-out, transform 0.25s ease-out;
}
.pricing-bulk-inline.pbbar-visible {
    opacity: 1;
    transform: translateX(0);
}
.pricing-bulk-count {
    font-size: 11px;
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
}
.pricing-bulk-open-btn {
    margin-left: auto;
    padding: 5px 12px;
    border: none;
    background: linear-gradient(135deg, #FFD60A, #f5c518);
    color: #1a1a1a;
    font-size: 11px;
    font-weight: 700;
    border-radius: 8px;
    cursor: pointer;
    white-space: nowrap;
    transition: transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 2px 6px rgba(255, 214, 10, 0.25);
}
.pricing-bulk-open-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(255, 214, 10, 0.4);
}
.pricing-bulk-open-btn:active {
    transform: scale(0.96);
}
.pricing-bulk-cancel {
    background: none;
    border: none;
    color: var(--text-tertiary);
    font-size: 14px;
    cursor: pointer;
    padding: 2px 6px;
    border-radius: 6px;
    transition: background 0.15s;
    line-height: 1;
}
.pricing-bulk-cancel:hover {
    background: rgba(255,69,58,0.12);
    color: #ff453a;
}


/* ── Bulk price modal — Apple glassmorphism ───────────────────── */
.pricing-bulk-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.82);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    padding: 20px;
    animation: pbmOverlayIn 0.3s ease-out;
}
.pbm-accent-bleed {
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at 30% 20%, rgba(var(--primary-rgb), 0.08) 0%, transparent 60%),
                radial-gradient(ellipse at 70% 80%, rgba(var(--primary-rgb), 0.06) 0%, transparent 50%);
    pointer-events: none;
    animation: pbmBleedIn 0.4s ease-out;
}
@keyframes pbmOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes pbmBleedIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.pricing-bulk-modal {
    position: relative;
    background: rgba(30, 30, 35, 0.72);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 24px;
    padding: 24px 22px 20px;
    width: 100%;
    max-width: 420px;
    max-height: 90vh;
    overflow-y: auto;
    scrollbar-width: none;
    -ms-overflow-style: none;
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    animation: pbmModalIn 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.pricing-bulk-modal::-webkit-scrollbar { display: none; }
@keyframes pbmModalIn {
    from { transform: scale(0.92) translateY(20px); opacity: 0; }
    to   { transform: scale(1) translateY(0); opacity: 1; }
}

/* Close pill — Apple style */
.pbm-close {
    position: absolute;
    top: 12px;
    right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 18px;
    padding: 0 8px;
    border: 1px solid rgba(var(--ios-red-rgb, 255,69,58), 0.18);
    border-radius: 9999px;
    background: rgba(var(--ios-red-rgb, 255,69,58), 0.22);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    color: rgba(255, 100, 90, 0.92);
    font-size: 6px;
    font-weight: 700;
    letter-spacing: 0.5px;
    cursor: pointer;
    transition: all 0.22s cubic-bezier(0.25, 0.1, 0.25, 1);
    z-index: 10;
    box-shadow: 0 1px 6px rgba(var(--ios-red-rgb, 255,69,58), 0.12),
               inset 0 0.5px 0 rgba(255, 255, 255, 0.08);
    -webkit-font-smoothing: antialiased;
    user-select: none;
    white-space: nowrap;
    line-height: 1;
    text-transform: lowercase;
}
.pbm-close:hover {
    background: rgba(var(--ios-red-rgb, 255,69,58), 0.35);
    border-color: rgba(var(--ios-red-rgb, 255,69,58), 0.3);
    color: rgba(255, 90, 80, 1);
    transform: scale(1.03);
}
.pbm-close:active {
    background: rgba(var(--ios-red-rgb, 255,69,58), 0.42);
    transform: scale(0.96);
}

/* Header */
.pbm-header {
    text-align: center;
    margin-bottom: 20px;
}
.pbm-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.18), rgba(var(--primary-rgb), 0.06));
    color: var(--primary-color);
    margin-bottom: 10px;
}
.pbm-title {
    font-size: 18px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    letter-spacing: -0.3px;
}
.pbm-subtitle {
    font-size: 13px;
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.85;
}

/* Sections */
.pbm-section {
    margin-bottom: 14px;
}
.pbm-section-label {
    display: block;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

/* Segmented control — Apple style */
.pbm-segmented {
    display: flex;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 2px;
    gap: 2px;
}
.pbm-seg {
    flex: 1;
    padding: 7px 4px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
}
.pbm-seg:hover {
    color: var(--text-primary);
}
.pbm-seg.active {
    background: rgba(var(--primary-rgb), 0.18);
    color: var(--primary-color);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}
.pbm-seg-icon {
    font-size: 13px;
    font-weight: 700;
}
.pbm-segmented-sm .pbm-seg {
    padding: 6px 4px;
    font-size: 12px;
}

/* Input with suffix */
.pbm-input-wrap {
    position: relative;
    display: flex;
    align-items: center;
}
.pbm-input {
    width: 100%;
    padding: 10px 40px 10px 14px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    font-size: 18px;
    font-weight: 700;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
    letter-spacing: -0.3px;
}
.pbm-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
    opacity: 0.5;
}
.pbm-input:focus {
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}
.pbm-input-suffix {
    position: absolute;
    right: 14px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-tertiary);
    pointer-events: none;
}

/* Toggle switches — iOS style */
.pbm-toggles {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.pbm-toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    cursor: pointer;
    transition: background 0.15s;
    -webkit-tap-highlight-color: transparent;
}
.pbm-toggle:hover {
    background: rgba(255, 255, 255, 0.06);
}
.pbm-toggle-text {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary);
    flex: 1;
    min-width: 0;
}
.pbm-toggle-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 400;
    margin-left: 4px;
}
.pbm-toggle input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}
.pbm-toggle-track {
    position: relative;
    width: 42px;
    height: 24px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.12);
    flex-shrink: 0;
    transition: background 0.25s ease;
    margin-left: 10px;
}
.pbm-toggle-track::after {
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}
.pbm-toggle input:checked + .pbm-toggle-track {
    background: #34C759;
}
.pbm-toggle input:checked + .pbm-toggle-track::after {
    transform: translateX(18px);
}

/* Preview list */
.pbm-preview {
    max-height: 200px;
    overflow-y: auto;
    scrollbar-width: none;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.02);
    padding: 4px;
}
.pbm-preview::-webkit-scrollbar { display: none; }
.pbm-preview-empty {
    text-align: center;
    padding: 20px 16px;
    font-size: 12px;
    color: var(--text-tertiary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
}
.pbm-preview-empty-icon {
    font-size: 20px;
    opacity: 0.5;
}
.pbm-preview-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 12px;
    transition: background 0.15s;
}
.pbm-preview-row:nth-child(odd) {
    background: rgba(255, 255, 255, 0.03);
}
.pbm-preview-name {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--text-primary);
    margin-right: 10px;
    font-weight: 500;
}
.pbm-preview-change {
    white-space: nowrap;
    font-weight: 600;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
}
.pbm-preview-old {
    color: var(--text-tertiary);
}
.pbm-preview-arrow {
    color: var(--text-tertiary);
    font-size: 10px;
}
.pbm-preview-change.pbm-down .pbm-preview-new { color: #FF453A; }
.pbm-preview-change.pbm-up .pbm-preview-new   { color: #30D158; }
.pbm-preview-change.pbm-same .pbm-preview-new  { color: var(--text-tertiary); }
.pbm-preview-more {
    text-align: center;
    padding: 8px;
    font-size: 11px;
    color: var(--text-tertiary);
}

/* Summary badge */
.pbm-summary {
    margin-bottom: 14px;
}
.pbm-summary-badge {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 14px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.06);
    border: 1px solid rgba(var(--primary-rgb), 0.1);
    font-size: 12px;
    color: var(--text-secondary);
}
.pbm-summary-stat strong {
    color: var(--text-primary);
    font-weight: 700;
}
.pbm-summary-divider {
    color: var(--text-tertiary);
}

/* Action buttons */
.pbm-actions {
    display: flex;
    gap: 8px;
}
.pbm-btn {
    flex: 1;
    padding: 12px;
    border: none;
    border-radius: 12px;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.pbm-btn-cancel {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}
.pbm-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.1);
}
.pbm-btn-apply {
    background: linear-gradient(135deg, #34C759, #28a745);
    color: #fff;
    box-shadow: 0 4px 16px rgba(52, 199, 89, 0.25);
}
.pbm-btn-apply:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(52, 199, 89, 0.35);
}
.pbm-btn-apply:active {
    transform: scale(0.97);
}
.pbm-btn-apply:disabled {
    opacity: 0.35;
    cursor: default;
    transform: none;
    box-shadow: none;
}

/* ── Bulk price change — Progress UI ── */
.pbm-progress {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px 20px 24px;
    gap: 12px;
    text-align: center;
    animation: pbmProgressIn 0.35s ease-out;
}
@keyframes pbmProgressIn {
    from { opacity: 0; transform: scale(0.92); }
    to   { opacity: 1; transform: scale(1); }
}
.pbm-progress-ring {
    position: relative;
    width: 110px;
    height: 110px;
}
.pbm-ring-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}
.pbm-ring-bg {
    fill: none;
    stroke: rgba(255, 255, 255, 0.06);
    stroke-width: 6;
}
.pbm-ring-fg {
    fill: none;
    stroke: #34C759;
    stroke-width: 6;
    stroke-linecap: round;
    transition: stroke-dashoffset 0.35s ease-out;
}
.pbm-ring-text {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 0;
}
.pbm-ring-count {
    font-size: 28px;
    font-weight: 800;
    color: #fff;
    line-height: 1;
}
.pbm-ring-total {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-tertiary);
    line-height: 1.2;
}
.pbm-progress-title {
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary);
    margin: 4px 0 0;
}
.pbm-progress-sub {
    font-size: 12px;
    color: var(--text-secondary);
    margin: 0;
    font-weight: 600;
    min-height: 16px;
}
.pbm-progress-bar-wrap {
    width: 100%;
    max-width: 260px;
    height: 4px;
    border-radius: 4px;
    background: rgba(255, 255, 255, 0.06);
    overflow: hidden;
}
.pbm-progress-bar {
    height: 100%;
    background: linear-gradient(90deg, #34C759, #30D158);
    border-radius: 4px;
    transition: width 0.3s ease-out;
}
.pbm-progress-name {
    font-size: 11px;
    color: var(--text-tertiary);
    max-width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-height: 15px;
}

/* ── Light mode ── */
body.light-mode .pricing-bulk-overlay {
    background: rgba(0, 0, 0, 0.25);
}
body.light-mode .pricing-bulk-modal {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        0 0 0 0.5px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.light-mode .pbm-close {
    background: rgba(var(--ios-red-rgb, 255,69,58), 0.1);
    border-color: rgba(var(--ios-red-rgb, 255,69,58), 0.15);
    color: rgba(220, 50, 40, 0.85);
}
body.light-mode .pbm-segmented {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .pbm-seg.active {
    background: rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 1px 4px rgba(0,0,0,0.08);
}
body.light-mode .pbm-input {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .pbm-toggle {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .pbm-toggle-track {
    background: rgba(0, 0, 0, 0.12);
}
body.light-mode .pbm-preview {
    background: rgba(0, 0, 0, 0.015);
    border-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .pbm-preview-row:nth-child(odd) {
    background: rgba(0, 0, 0, 0.025);
}
body.light-mode .pbm-btn-cancel {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Light mode overrides */
body.light-mode .pricing-search-input,
body.light-mode .pricing-select {
    background: #fff;
    border-color: #e0e0e0;
}
body.light-mode .pricing-row {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .pricing-price-history {
    background: rgba(48, 209, 88, 0.1);
    color: #333;
}
body.light-mode .pricing-price-history .ph-old { color: #b8860b; }
body.light-mode .pricing-price-history .ph-arrow { color: #555; }
body.light-mode .pricing-price-history .ph-new { color: #2e7d32; }
body.light-mode .pricing-price-history .ph-meta { color: rgba(0,0,0,0.55); }
body.light-mode .pricing-price-history .ph-meta.ph-stale { color: #d32f2f; }
body.light-mode .pricing-price-stale {
    color: #d32f2f;
    background: rgba(211, 47, 47, 0.08);
}
body.light-mode .pricing-row-stats {
    color: rgba(0,0,0,0.35);
}
body.light-mode .pricing-row-stats .prs-watchers {
    color: rgba(180,50,50,0.5);
}

/* ── Form sections ────────────────────────────────────────────────── */

.inv-form {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.inv-form-section {
    padding: 16px 0;
    border-bottom: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
}

.inv-form-section:last-of-type {
    border-bottom: none;
}

.inv-form-section-header {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-bottom: 12px;
    font-size: 14px;
    font-weight: 700;
    color: var(--text-primary, #000);
}

.inv-form-section-icon {
    font-size: 16px;
}

.inv-form-section-hint {
    font-size: 11px;
    font-weight: 400;
    color: var(--text-secondary, #3C3C43);
    opacity: 0.6;
    margin-left: auto;
}

/* ── Signature toggle ── */
.inv-signature-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 8px;
}
.inv-toggle-label {
    font-size: 13px;
    color: var(--text-secondary, #3C3C43);
    opacity: 0.8;
}
.inv-toggle-switch {
    position: relative;
    display: inline-block;
    width: 36px;
    height: 20px;
}
.inv-toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}
.inv-toggle-slider {
    position: absolute;
    cursor: pointer;
    top: 0; left: 0; right: 0; bottom: 0;
    background: var(--bg-tertiary, #e0e0e0);
    border-radius: 20px;
    transition: background 0.25s;
}
.inv-toggle-slider::before {
    content: '';
    position: absolute;
    width: 16px;
    height: 16px;
    left: 2px;
    bottom: 2px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.25s;
}
.inv-toggle-switch input:checked + .inv-toggle-slider {
    background: var(--accent, #007AFF);
}
.inv-toggle-switch input:checked + .inv-toggle-slider::before {
    transform: translateX(16px);
}

.inv-form-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
    margin-bottom: 10px;
}

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

.inv-form-label {
    font-size: 12px;
    font-weight: 700;
    color: var(--text-secondary, #3C3C43);
    text-transform: uppercase;
    letter-spacing: 0.8px;
}

.inv-required {
    color: var(--ios-red, #FF3B30);
}

.inv-form-input,
.inv-form-select,
.inv-form-textarea {
    width: 100%;
    padding: 10px 12px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.15);
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.04);
    color: var(--text-primary, #000);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none;
    appearance: none;
}

.inv-form-input:focus,
.inv-form-select:focus,
.inv-form-textarea:focus {
    border-color: var(--ios-blue, #007AFF);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.12);
}

.inv-form-input.inv-mono {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 600;
    color: var(--ios-blue, #007AFF);
}

.inv-form-select {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 30px;
}

.inv-form-textarea {
    resize: vertical;
    min-height: 80px;
}

.inv-form-row {
    display: flex;
    gap: 10px;
    margin-bottom: 10px;
}

.inv-form-half {
    flex: 1;
    min-width: 0;
}

.inv-char-counter {
    text-align: right;
    font-size: 11px;
    font-weight: 500;
    color: var(--text-secondary, #3C3C43);
    opacity: 0.5;
    margin-top: -2px;
}

/* ── Checkbox group ───────────────────────────────────────────────── */

.inv-form-check-group {
    flex-direction: row;
    align-items: center;
}

.inv-form-check {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    font-size: 14px;
    color: var(--text-primary, #000);
}

.inv-form-check input[type="checkbox"] {
    width: 18px;
    height: 18px;
    accent-color: var(--ios-blue, #007AFF);
}

/* ── Photos grid (drag & drop) ────────────────────────────────────── */

.inv-photos-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 90px;
    position: relative;
}

.inv-photo-item {
    position: relative;
    width: 132px;
    height: 132px;
    border-radius: 12px;
    overflow: hidden;
    border: 2px solid rgba(var(--primary-rgb, 0,122,255), 0.1);
    cursor: grab;
    transition: transform 0.3s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.3s ease, border-color 0.2s ease, opacity 0.2s ease;
    animation: photoFadeIn 0.25s ease both;
    will-change: transform;
    -webkit-user-select: none;
    user-select: none;
    touch-action: none;
}

/* Staggered entrance — fast and subtle */
.inv-photo-item:nth-child(1)  { animation-delay: 0s; }
.inv-photo-item:nth-child(2)  { animation-delay: 0.03s; }
.inv-photo-item:nth-child(3)  { animation-delay: 0.06s; }
.inv-photo-item:nth-child(4)  { animation-delay: 0.09s; }
.inv-photo-item:nth-child(5)  { animation-delay: 0.12s; }
.inv-photo-item:nth-child(6)  { animation-delay: 0.15s; }
.inv-photo-item:nth-child(7)  { animation-delay: 0.18s; }
.inv-photo-item:nth-child(8)  { animation-delay: 0.21s; }
.inv-photo-item:nth-child(9)  { animation-delay: 0.24s; }
.inv-photo-item:nth-child(10) { animation-delay: 0.27s; }
.inv-photo-item:nth-child(n+11) { animation-delay: 0.30s; }

@keyframes photoFadeIn {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

.inv-photo-item:active {
    cursor: grabbing;
}

.inv-photo-item.inv-photo-main {
    border-color: var(--ios-blue, #007AFF);
    box-shadow: 0 2px 12px rgba(0,122,255,0.25);
}

/* ── iOS-style drag states ─────────────────────────────────────────── */

/* Element being dragged — lifted, scaled, shadowed, with animated pulsing glow */
.inv-photo-item.photo-dragging {
    z-index: 200000;
    transform: scale(1.12) rotate(-2deg);
    box-shadow:
        0 20px 50px rgba(0,0,0,0.45),
        0 0 0 3px rgba(0,122,255,0.5),
        0 0 20px rgba(0,122,255,0.3);
    opacity: 1 !important;
    cursor: grabbing;
    transition: transform 0.2s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.2s ease, border-color 0.2s ease;
    border-color: var(--ios-blue, #007AFF);
    pointer-events: none;
    border-radius: 14px;
    animation: photoDragPulse 1.2s ease-in-out infinite;
}

@keyframes photoDragPulse {
    0%, 100% { box-shadow: 0 20px 50px rgba(0,0,0,0.45), 0 0 0 3px rgba(0,122,255,0.5), 0 0 20px rgba(0,122,255,0.3); }
    50% { box-shadow: 0 24px 60px rgba(0,0,0,0.5), 0 0 0 4px rgba(0,122,255,0.7), 0 0 30px rgba(0,122,255,0.4); }
}

/* Placeholder gap where dragged item was — ghosted outline */
.inv-photo-item.photo-drag-placeholder {
    opacity: 0.25;
    transform: scale(0.9);
    pointer-events: none;
    border: 2px dashed rgba(0,122,255,0.4);
    background: rgba(0,122,255,0.05);
    border-radius: 14px;
}

.inv-photo-item.photo-drag-placeholder img {
    opacity: 0.3 !important;
    filter: grayscale(0.5);
}

/* Item being hovered over — subtle shift + highlight border to indicate drop target */
.inv-photo-item.photo-drag-over {
    border-color: var(--ios-blue, #007AFF);
    box-shadow: 0 0 0 3px rgba(0,122,255,0.35), 0 4px 16px rgba(0,122,255,0.15);
    transform: scale(0.94);
    transition: transform 0.15s cubic-bezier(0.2, 0, 0, 1), box-shadow 0.15s ease, border-color 0.15s ease;
}

/* Legacy classes (keep compat) */
.inv-photo-item.dragging {
    opacity: 0.4;
    transform: scale(0.95);
}

.inv-photo-item.drag-over {
    border-color: var(--ios-green, #34C759);
    box-shadow: 0 0 0 3px rgba(52,199,89,0.2);
}

.inv-photo-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    pointer-events: none;
    opacity: 0;
    filter: blur(8px) saturate(1.2);
    transform: scale(1.06);
    transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1),
                filter 0.6s cubic-bezier(0.25, 1, 0.5, 1),
                transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
}

.inv-photo-item img.loaded {
    opacity: 1;
    filter: blur(0) saturate(1);
    transform: scale(1);
}

/* ── Apple-style skeleton: soft breathing pulse ── */
.inv-photo-item::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    border-radius: inherit;
    pointer-events: none;
    background: linear-gradient(135deg,
        rgba(255,255,255,0.03) 0%,
        rgba(255,255,255,0.06) 50%,
        rgba(255,255,255,0.03) 100%);
    animation: photoBreathePulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Centered photo icon hint while loading */
.inv-photo-item::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: inherit;
    pointer-events: none;
    background: radial-gradient(circle at center,
        rgba(255,255,255,0.04) 0%,
        transparent 70%);
    opacity: 1;
    transition: opacity 0.4s ease;
}

body.light-mode .inv-photo-item::before {
    background: linear-gradient(135deg,
        rgba(0,0,0,0.02) 0%,
        rgba(0,0,0,0.05) 50%,
        rgba(0,0,0,0.02) 100%);
}

body.light-mode .inv-photo-item::after {
    background: radial-gradient(circle at center,
        rgba(0,0,0,0.03) 0%,
        transparent 70%);
}

/* Hide placeholders once image loaded */
.inv-photo-item.photo-loaded::before,
.inv-photo-item.photo-loaded::after {
    animation: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

@keyframes photoBreathePulse {
    0%, 100% { opacity: 0.4; }
    50% { opacity: 1; }
}

/* ── Apple-style upload overlay: frosted glass + ring spinner ── */
.inv-photo-uploading {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: inherit;
    z-index: 2;
}

.inv-photo-upload-ring {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2.5px solid rgba(255,255,255,0.15);
    border-top-color: #fff;
    animation: photoRingSpin 0.8s cubic-bezier(0.4, 0, 0.2, 1) infinite;
    box-shadow: 0 0 12px rgba(255,255,255,0.1);
}

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

/* ── Photo caching overlay: subtle processing indicator ── */
.inv-photo-caching {
    opacity: 0.85;
}
.inv-photo-caching-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.25);
    backdrop-filter: blur(2px);
    -webkit-backdrop-filter: blur(2px);
    border-radius: inherit;
    z-index: 2;
}
.inv-photo-cache-ring {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.2);
    border-top-color: #34c759;
    animation: photoRingSpin 0.7s linear infinite;
}
/* Counter hint when caching */
.wizard-photo-count.caching {
    color: var(--text-secondary) !important;
}
.wizard-photo-count.caching::after {
    content: '';
    display: inline-block;
    width: 8px;
    height: 8px;
    margin-left: 6px;
    border-radius: 50%;
    border: 1.5px solid transparent;
    border-top-color: #34c759;
    animation: photoRingSpin 0.8s linear infinite;
    vertical-align: middle;
}

.inv-photo-badge {
    position: absolute;
    bottom: 4px;
    left: 4px;
    right: 4px;
    text-align: center;
    font-size: 9px;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, rgba(0,122,255,0.9), rgba(88,86,214,0.9));
    padding: 2px 4px;
    border-radius: 6px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.inv-photo-num {
    position: absolute;
    top: 4px;
    left: 4px;
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    background: rgba(0,0,0,0.5);
    border-radius: 50%;
}

.inv-photo-remove {
    position: absolute;
    top: 3px;
    right: 3px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(255,59,48,0.9);
    color: #fff;
    font-size: 14px;
    line-height: 22px;
    text-align: center;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
    z-index: 4;
}

.inv-photo-preview {
    position: absolute;
    top: 3px;
    right: 28px;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.6);
    color: #fff;
    cursor: pointer;
    padding: 0;
    opacity: 0;
    transition: opacity 0.15s;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 4;
}

.inv-photo-item:hover .inv-photo-remove,
.inv-photo-item:hover .inv-photo-preview {
    opacity: 1;
}

.inv-photo-add {
    width: 132px;
    height: 132px;
    border-radius: 12px;
    border: 2px dashed rgba(var(--primary-rgb, 0,122,255), 0.2);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    color: var(--text-secondary, #3C3C43);
    opacity: 0.6;
    transition: opacity 0.15s, border-color 0.15s;
    gap: 4px;
}

.inv-photo-add:hover {
    opacity: 1;
    border-color: var(--ios-blue, #007AFF);
}

.inv-photo-add span {
    font-size: 10px;
    font-weight: 600;
}

/* ── Catalog auto-badge ───────────────────────────────────────────── */

.inv-catalog-auto-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 6px 14px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(0,122,255,0.08), rgba(88,86,214,0.08));
    border: 1px solid rgba(0,122,255,0.15);
    margin-bottom: 10px;
    font-family: 'SF Mono', 'Fira Code', monospace;
}

.inv-auto-prefix {
    font-size: 14px;
    font-weight: 700;
    color: var(--ios-blue, #007AFF);
}

.inv-auto-number {
    font-size: 14px;
    font-weight: 700;
    color: var(--ios-purple, #5856D6);
}

.inv-auto-label {
    font-size: 10px;
    font-weight: 500;
    color: var(--ios-green, #34C759);
    margin-left: 8px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-family: inherit;
}

/* ── Description Editor (Allegro-style block editor) ──────────────── */

.inv-desc-tabs {
    display: flex;
    gap: 2px;
    margin-left: auto;
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
    border-radius: 8px;
    padding: 2px;
}

.inv-desc-tab {
    padding: 4px 12px;
    border: none;
    background: transparent;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary, #3C3C43);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s;
}

.inv-desc-tab.active {
    background: var(--ios-blue, #007AFF);
    color: #fff;
}

/* ── Block editor container ──────────────────────────────────────── */

.desc-editor {
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.12);
    border-radius: 14px;
    overflow: hidden;
    background: rgba(var(--primary-rgb, 0,122,255), 0.02);
}

/* ── Editor header with tabs ─────────────────────────────────────── */

.desc-editor-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.05);
    border-bottom: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.08);
}

.desc-editor-tabs {
    display: flex;
    gap: 2px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
    border-radius: 8px;
    padding: 2px;
}

.desc-editor-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #8E8E93);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}

.desc-editor-tab:hover {
    color: var(--text-secondary, #3C3C43);
}

.desc-editor-tab.active {
    background: rgba(255,255,255,0.8);
    color: var(--ios-blue, #007AFF);
    box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

.desc-section-count {
    font-size: 11px;
    font-weight: 500;
    color: var(--text-tertiary, #8E8E93);
    padding: 3px 8px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
    border-radius: 10px;
}

.desc-editor-body {
    display: flex;
    flex-direction: column;
}

/* ── Add-block toolbar ───────────────────────────────────────────── */

.desc-add-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 8px 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.03);
    border-bottom: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
}

.desc-add-btn {
    min-width: 36px;
    height: 30px;
    padding: 0 8px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.1);
    background: rgba(255,255,255,0.6);
    color: var(--text-secondary, #3C3C43);
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    transition: all 0.15s;
}

.desc-add-toolbar-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary, #8E8E93);
    white-space: nowrap;
    margin-right: 4px;
}

.desc-add-label {
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
}

@media (max-width: 480px) {
    .desc-add-label {
        display: none;
    }
    .desc-add-btn {
        padding: 0;
        min-width: 36px;
    }
    .desc-add-toolbar-label {
        display: none;
    }
    .desc-editor-tab {
        padding: 5px 10px;
        font-size: 11px;
    }
    .desc-editor-tab svg {
        width: 12px;
        height: 12px;
    }
    .desc-preview-split {
        flex-direction: column;
    }
    .desc-preview-split img {
        max-width: 100%;
    }
}

.desc-add-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.08);
    border-color: var(--ios-blue, #007AFF);
    color: var(--ios-blue, #007AFF);
}

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

/* ── Blocks container ────────────────────────────────────────────── */

.desc-blocks {
    min-height: 60px;
}

.desc-blocks:empty::before {
    content: 'Dodaj sekcję klikając ikonę powyżej ☝';
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    color: var(--text-tertiary, #8E8E93);
    font-size: 13px;
    pointer-events: none;
}

/* ── Single block ────────────────────────────────────────────────── */

.desc-block {
    position: relative;
    border-bottom: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
    transition: background 0.15s;
}

.desc-block:last-child {
    border-bottom: none;
}

.desc-block.desc-block-dragging {
    opacity: 0.5;
    background: rgba(var(--primary-rgb, 0,122,255), 0.05);
}

.desc-block.desc-block-dragover {
    border-top: 2px solid var(--ios-blue, #007AFF);
}

/* ── Block header (type icons + actions) ─────────────────────────── */

.desc-block-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.04);
    border-bottom: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
}

.desc-block-type-icons {
    display: flex;
    gap: 2px;
}

.desc-block-type-btn {
    width: 28px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #8E8E93);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.desc-block-type-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.08);
    color: var(--text-primary, #000);
}

.desc-block-type-btn.active {
    background: rgba(var(--primary-rgb, 0,122,255), 0.12);
    color: var(--ios-blue, #007AFF);
}

.desc-block-actions {
    display: flex;
    gap: 2px;
}

.desc-block-action {
    width: 26px;
    height: 24px;
    border: none;
    background: transparent;
    color: var(--text-tertiary, #8E8E93);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.12s;
}

.desc-block-action:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.08);
    color: var(--text-primary, #000);
}

.desc-block-action.desc-action-delete:hover {
    background: rgba(var(--ios-red-rgb), 0.1);
    color: var(--ios-red, #FF3B30);
}

/* ── Block body (content area) ───────────────────────────────────── */

.desc-block-body {
    padding: 0;
}

/* Text block */
.desc-block-text {
    min-height: 100px;
    max-height: 500px;
    overflow-y: auto;
    padding: 14px 16px;
    font-size: 14px;
    font-family: inherit;
    line-height: 1.7;
    color: #000;
    outline: none;
    background: #fff;
}

.desc-block-text:empty::before {
    content: attr(data-placeholder);
    color: #999;
    pointer-events: none;
}

.desc-block-text:focus {
    background: #fff;
}

.desc-block-text h1 {
    font-size: 20px;
    font-weight: 700;
    margin: 12px 0 6px;
    color: #000;
}

.desc-block-text h2 {
    font-size: 17px;
    font-weight: 700;
    margin: 10px 0 5px;
    color: #000;
}

.desc-block-text p {
    margin: 4px 0;
}

.desc-block-text ul,
.desc-block-text ol {
    padding-left: 22px;
    margin: 6px 0;
}

.desc-block-text b, .desc-block-text strong {
    font-weight: 700;
}

.desc-block-text img {
    max-width: 100%;
    border-radius: 6px;
}

/* Image block (full width) */
.desc-block-img-full {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100px;
    padding: 12px;
    cursor: pointer;
}

.desc-block-img-drop {
    width: 100%;
    min-height: 80px;
    border: 2px dashed rgba(var(--primary-rgb, 0,122,255), 0.15);
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    cursor: pointer;
    transition: all 0.2s;
    padding: 16px;
    color: var(--text-tertiary, #8E8E93);
    font-size: 12px;
}

.desc-block-img-drop:hover {
    border-color: var(--ios-blue, #007AFF);
    background: rgba(var(--primary-rgb, 0,122,255), 0.03);
}

.desc-block-img-drop svg {
    opacity: 0.4;
}

.desc-block-img-drop.has-image {
    border: none;
    padding: 0;
}

.desc-block-img-drop img {
    max-width: 100%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 8px;
}

/* Side-by-side layouts */
.desc-block-split {
    display: flex;
    gap: 0;
    min-height: 120px;
}

.desc-block-split-img {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: stretch;
    justify-content: center;
    padding: 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.02);
}

.desc-block-split-img .desc-block-img-drop {
    flex: 1;
}

.desc-block-split-text {
    flex: 1;
    min-width: 0;
}

.desc-block-split-text .desc-block-text {
    min-height: 120px;
    height: 100%;
    border-left: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
}

.desc-block-split.split-img-right .desc-block-split-text .desc-block-text {
    border-left: none;
    border-right: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
}

/* Two images side by side */
.desc-block-split.split-img-double {
    gap: 0;
}
.desc-block-split.split-img-double .desc-block-split-img {
    flex: 1;
    min-width: 0;
}
.desc-block-split.split-img-double .desc-block-split-img:first-child {
    border-right: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.08);
}

/* ── Block formatting toolbar (bottom) ───────────────────────────── */

.desc-block-toolbar {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 5px 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.03);
    border-top: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
}

.desc-toolbar-btn {
    width: 28px;
    height: 26px;
    border: none;
    background: transparent;
    color: var(--text-secondary, #3C3C43);
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 600;
    transition: all 0.12s;
}

.desc-toolbar-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.1);
}

.desc-toolbar-btn.active {
    background: var(--ios-blue, #007AFF);
    color: #fff;
}

.desc-toolbar-sep {
    width: 1px;
    height: 18px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.1);
    margin: 0 3px;
    align-self: center;
}

.desc-toolbar-select {
    height: 26px;
    padding: 0 8px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.1);
    border-radius: 5px;
    background: rgba(255,255,255,0.5);
    color: var(--text-secondary, #3C3C43);
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    outline: none;
    transition: all 0.12s;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
    padding-right: 20px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238E8E93' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 6px center;
}

.desc-toolbar-select:hover {
    border-color: var(--ios-blue, #007AFF);
}

/* ── Description preview pane ────────────────────────────────────── */

.desc-preview-body {
    padding: 20px 24px;
    background: #fff;
    font-size: 14px;
    line-height: 1.7;
    color: #1a1a1a;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    min-height: 120px;
}

.desc-preview-body h1 {
    font-size: 22px;
    font-weight: 700;
    margin: 14px 0 8px;
    color: #1a1a1a;
}

.desc-preview-body h2 {
    font-size: 18px;
    font-weight: 700;
    margin: 12px 0 6px;
    color: #1a1a1a;
}

.desc-preview-body p {
    margin: 4px 0;
}

.desc-preview-body ul,
.desc-preview-body ol {
    padding-left: 24px;
    margin: 6px 0;
}

.desc-preview-body b {
    font-weight: 700;
}

.desc-preview-section {
    margin-bottom: 16px;
}

.desc-preview-section:last-child {
    margin-bottom: 0;
}

.desc-preview-img {
    text-align: center;
}

.desc-preview-img img {
    max-width: 100%;
    max-height: 400px;
    object-fit: contain;
    border-radius: 6px;
}

.desc-preview-split {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}

.desc-preview-split img {
    max-width: 45%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 6px;
    flex-shrink: 0;
}

.desc-preview-split > div {
    flex: 1;
    min-width: 0;
}

.desc-preview-double {
    display: flex;
    gap: 12px;
    justify-content: center;
}

.desc-preview-double img {
    max-width: 48%;
    max-height: 300px;
    object-fit: contain;
    border-radius: 6px;
}

.desc-preview-empty {
    text-align: center;
    color: var(--text-tertiary, #8E8E93);
    font-size: 13px;
    padding: 40px 20px;
    font-family: inherit;
}

/* ── Allegro Preview ──────────────────────────────────────────────── */

.inv-allegro-preview {
    border-radius: 10px;
    overflow: hidden;
}

.inv-allegro-preview-frame {
    border: 1px solid #e0e0e0;
    border-radius: 10px;
    overflow: hidden;
    background: #fff;
}

.inv-allegro-preview-header {
    padding: 10px 14px;
    background: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    display: flex;
    align-items: center;
    gap: 6px;
}

.inv-allegro-preview-body {
    padding: 20px 24px;
    font-size: 14px;
    line-height: 1.7;
    color: #333;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.inv-allegro-preview-body h1 {
    font-size: 24px;
    font-weight: 700;
    margin: 16px 0 10px;
    color: #1a1a1a;
}

.inv-allegro-preview-body h2 {
    font-size: 20px;
    font-weight: 700;
    margin: 14px 0 8px;
    color: #1a1a1a;
}

.inv-allegro-preview-body ul,
.inv-allegro-preview-body ol {
    padding-left: 24px;
}

.inv-allegro-preview-body img {
    max-width: 100%;
    border-radius: 4px;
}

/* ── Title input — smaller font to show ~75 chars ─────────────────── */

.inv-title-input {
    font-size: 15px !important;
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', system-ui, sans-serif;
    letter-spacing: -0.2px;
    padding: 10px 12px;
    text-transform: uppercase;
}

/* ── Dark mode overrides for desc-editor ─────────────────────────── */

[data-theme="dark"] .desc-editor {
    border-color: rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.03);
}

[data-theme="dark"] .desc-editor-header {
    background: rgba(255,255,255,0.04);
    border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .desc-editor-tabs {
    background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .desc-editor-tab.active {
    background: rgba(255,255,255,0.12);
    color: var(--ios-blue, #007AFF);
    box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

[data-theme="dark"] .desc-section-count {
    background: rgba(255,255,255,0.06);
}

[data-theme="dark"] .desc-add-toolbar {
    background: rgba(255,255,255,0.03);
    border-bottom-color: rgba(255,255,255,0.06);
}

[data-theme="dark"] .desc-add-btn {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.08);
}

[data-theme="dark"] .desc-block-text {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary, #fff);
}

[data-theme="dark"] .desc-block-text:focus {
    background: rgba(255,255,255,0.07);
}

[data-theme="dark"] .desc-block-header {
    background: rgba(255,255,255,0.03);
}

[data-theme="dark"] .desc-block-toolbar {
    background: rgba(255,255,255,0.03);
}

[data-theme="dark"] .desc-block-img-drop {
    border-color: rgba(255,255,255,0.12);
}

[data-theme="dark"] .desc-toolbar-select {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
    color: var(--text-primary);
}

[data-theme="dark"] .desc-preview-body {
    background: rgba(255,255,255,0.04);
    color: var(--text-primary, #fff);
}

[data-theme="dark"] .desc-preview-body h1,
[data-theme="dark"] .desc-preview-body h2 {
    color: var(--text-primary, #fff);
}

/* ── Category browser ─────────────────────────────────────────────── */

.inv-selected-category {
    font-size: 13px;
    color: var(--text-primary, #000);
    padding: 8px 12px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.04);
    border-radius: 8px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.1);
    margin-bottom: 6px;
}

.inv-browse-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 14px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.2);
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
    color: var(--ios-blue, #007AFF);
    font-size: 13px;
    font-weight: 600;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
    margin-bottom: 8px;
}

.inv-browse-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.12);
}

.inv-category-breadcrumb {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    font-size: 12px;
    margin-bottom: 6px;
    min-height: 0;
}

.inv-bc-item {
    color: var(--ios-blue, #007AFF);
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 4px;
}

.inv-bc-item:hover {
    background: rgba(0,122,255,0.08);
}

.inv-bc-sep {
    color: var(--text-secondary, #3C3C43);
    opacity: 0.4;
    padding: 2px 0;
}

.inv-category-tree {
    max-height: 280px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-radius: 10px;
}

.inv-category-item {
    padding: 10px 12px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.05);
    font-size: 13px;
    color: var(--text-primary, #000);
    transition: background 0.12s;
}

.inv-category-item:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
}

.inv-category-item:last-child {
    border-bottom: none;
}

.inv-category-arrow {
    color: var(--text-secondary, #3C3C43);
    opacity: 0.4;
    font-size: 16px;
}

.inv-category-leaf-badge {
    font-size: 11px;
    font-weight: 600;
    color: var(--ios-green, #34C759);
    padding: 2px 8px;
    border-radius: 6px;
    background: rgba(52,199,89,0.1);
}

/* ── Category parameters ──────────────────────────────────────────── */

.inv-params-container {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.inv-param-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.inv-param-group.inv-param-required {
    border-left: 3px solid var(--ios-blue, #007AFF);
    padding-left: 10px;
}

.inv-param-group label {
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary, #3C3C43);
}

.inv-param-input {
    width: 100% !important;
    padding: 8px 10px !important;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.12) !important;
    border-radius: 8px !important;
    background: rgba(var(--primary-rgb, 0,122,255), 0.03) !important;
    color: var(--text-primary, #000) !important;
    font-size: 13px !important;
    height: auto !important;
    min-height: 0 !important;
    outline: none;
    transition: border-color 0.2s;
    box-sizing: border-box;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

select.inv-param-input {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23666' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 26px;
}

.inv-param-input:focus {
    border-color: var(--ios-blue, #007AFF) !important;
    box-shadow: 0 0 0 2px rgba(0,122,255,0.1) !important;
}

/* Auto-filled params — purple-blue gradient shimmer */
@keyframes autofilledShimmer {
    0%   { background-position: 200% center; }
    100% { background-position: -200% center; }
}

.inv-param-input[data-imported="true"] {
    border-color: rgba(138, 99, 255, 0.5) !important;
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.08) 0%,
        rgba(138, 99, 255, 0.15) 25%,
        rgba(99, 102, 241, 0.08) 50%,
        rgba(138, 99, 255, 0.15) 75%,
        rgba(99, 102, 241, 0.08) 100%
    ) !important;
    background-size: 200% 100%;
    animation: autofilledShimmer 3s ease-in-out infinite;
    box-shadow: inset 0 0 0 1px rgba(138, 99, 255, 0.1);
}

body.light-mode .inv-param-input[data-imported="true"] {
    border-color: rgba(99, 102, 241, 0.4) !important;
    background: linear-gradient(
        90deg,
        rgba(99, 102, 241, 0.06) 0%,
        rgba(138, 99, 255, 0.12) 25%,
        rgba(99, 102, 241, 0.06) 50%,
        rgba(138, 99, 255, 0.12) 75%,
        rgba(99, 102, 241, 0.06) 100%
    ) !important;
    background-size: 200% 100%;
    animation: autofilledShimmer 3s ease-in-out infinite;
}

.inv-param-input[data-imported="true"]:focus {
    border-color: var(--primary-color) !important;
    box-shadow: 0 0 0 3px rgba(138, 99, 255, 0.2) !important;
    animation: none;
}

/* ── Submit button ────────────────────────────────────────────────── */

.inv-submit-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px;
    border: none;
    border-radius: 14px;
    background: linear-gradient(135deg, #007AFF 0%, #5856D6 100%);
    color: #fff;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    margin-top: 16px;
    transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
    box-shadow: 0 4px 16px rgba(0,122,255,0.3);
}

.inv-submit-btn:hover {
    box-shadow: 0 6px 24px rgba(0,122,255,0.4);
    transform: translateY(-1px);
}

.inv-submit-btn:active {
    transform: scale(0.98);
}

.inv-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

/* ── Catalog Manager v2 ───────────────────────────────────────────── */

.cat-manager {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* ── Add Panel ── */
.cat-add-panel {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 14px;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.1),
        0 4px 16px rgba(0, 0, 0, 0.06);
    transition: box-shadow 0.3s ease;
}

/* ── Header ── */
.cat-add-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px 10px;
}

.cat-add-header-icon {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    background: var(--primary-gradient);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 2px 6px rgba(var(--primary-rgb), 0.25);
}

.cat-add-header-icon svg {
    stroke: #fff;
    filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.15));
    width: 15px;
    height: 15px;
}

.cat-add-title {
    font-size: 0.82rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0;
    letter-spacing: -0.01em;
    line-height: 1.2;
}

.cat-add-subtitle {
    font-size: 0.65rem;
    color: var(--text-tertiary);
    margin: 2px 0 0;
    line-height: 1.3;
    font-weight: 400;
}

/* ── Form Group (Settings-style) ── */
.cat-add-form-group {
    margin: 0 12px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.05);
    overflow: hidden;
}

.cat-add-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.05);
    margin: 0 12px;
}

/* ── Field ── */
.cat-add-field {
    padding: 10px 12px;
}

.cat-add-label {
    display: block;
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
}

/* ── Code Input (Apple-style) ── */
.cat-add-code-input {
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    background: rgba(0, 0, 0, 0.15);
    overflow: hidden;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    padding: 0 12px;
}

.cat-add-code-input:focus-within {
    border-color: rgba(var(--primary-rgb), 0.4);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.08);
    background: rgba(var(--primary-rgb), 0.03);
}

.cat-add-code-oe {
    padding: 8px 0;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    font-weight: 800;
    font-size: 0.78rem;
    color: var(--primary-color);
    user-select: none;
    flex-shrink: 0;
    letter-spacing: 0.02em;
}

.cat-add-code-sep {
    padding: 0 4px;
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    font-weight: 400;
    font-size: 0.78rem;
    color: var(--text-tertiary);
    opacity: 0.4;
    user-select: none;
}

.cat-add-code-input input {
    border: none;
    background: transparent;
    color: var(--text-primary);
    font-family: 'SF Mono', 'Fira Code', 'Menlo', monospace;
    font-weight: 700;
    font-size: 0.78rem;
    width: 70px;
    padding: 8px 0;
    outline: none;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    text-align: center;
}

.cat-add-code-input input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.35;
    font-weight: 500;
}

.cat-add-preview {
    display: none;
    font-size: 0.66rem;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--ios-green, #34C759);
    opacity: 0.8;
    margin-top: 6px;
    padding: 4px 8px;
    background: rgba(var(--ios-green-rgb), 0.08);
    border-radius: 6px;
    width: fit-content;
}

/* ── Category Selector (Disclosure style) ── */
.cat-add-selected-category {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 8px;
    min-height: 36px;
    cursor: pointer;
    transition: all 0.2s ease;
    user-select: none;
}

.cat-add-selected-category:hover {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(255, 255, 255, 0.1);
}

.cat-add-selected-category:active {
    transform: scale(0.985);
}

.cat-add-selected-category.has-value {
    background: rgba(var(--primary-rgb), 0.06);
    border-color: rgba(var(--primary-rgb), 0.15);
}

.cat-add-selected-icon {
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: rgba(var(--primary-rgb), 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: background 0.2s;
}

.cat-add-selected-icon svg {
    width: 12px;
    height: 12px;
}

.cat-add-selected-category.has-value .cat-add-selected-icon {
    background: rgba(var(--primary-rgb), 0.18);
}

.cat-add-selected-icon svg {
    stroke: var(--primary-color);
    opacity: 0.7;
}

.cat-add-selected-category.has-value .cat-add-selected-icon svg {
    opacity: 1;
}

.cat-add-selected-text {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color 0.2s;
}

.cat-add-selected-text.cat-add-selected-ok {
    color: var(--text-primary);
    font-weight: 500;
}

.cat-add-chevron {
    flex-shrink: 0;
    stroke: var(--text-tertiary);
    opacity: 0.4;
    transition: transform 0.25s ease, opacity 0.2s;
    width: 12px;
    height: 12px;
}

.cat-add-selected-category:hover .cat-add-chevron {
    opacity: 0.6;
}

.cat-add-selected-category.open .cat-add-chevron {
    transform: rotate(90deg);
    opacity: 0.7;
}

.cat-add-selected-clear {
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-tertiary);
    width: 24px;
    height: 24px;
    border-radius: 50%;
    font-size: 0.65rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: all 0.2s;
    opacity: 0.6;
}

.cat-add-selected-clear:hover {
    background: rgba(239, 68, 68, 0.15);
    color: #ef4444;
    opacity: 1;
}

/* ── Category Browser ── */
.cat-add-category-browser {
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    overflow: hidden;
    margin: 0 14px 4px;
    animation: catBrowserSlide 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes catBrowserSlide {
    from { opacity: 0; max-height: 0; margin-top: 0; }
    to { opacity: 1; max-height: 400px; margin-top: 0; }
}

.cat-add-category-browser .inv-category-breadcrumb {
    padding: 6px 10px;
    font-size: 0.65rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    background: rgba(255, 255, 255, 0.02);
}

.cat-add-category-browser .inv-category-tree {
    max-height: 180px;
    overflow-y: auto;
}

.cat-add-category-browser .inv-category-item {
    padding: 7px 12px;
    font-size: 0.72rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.025);
    transition: background 0.15s;
}

.cat-add-category-browser .inv-category-item:last-child {
    border-bottom: none;
}

.cat-add-category-browser .inv-category-item:hover {
    background: rgba(var(--primary-rgb), 0.08);
}

/* ── Submit Button ── */
.cat-add-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    margin: 10px 14px 14px;
    padding: 10px 14px;
    border: none;
    border-radius: 10px;
    background: var(--primary-gradient);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
    box-shadow:
        0 2px 8px rgba(var(--primary-rgb), 0.25),
        0 1px 2px rgba(0, 0, 0, 0.1);
    letter-spacing: 0.01em;
}

.cat-add-submit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0.15) 0%, transparent 50%);
    pointer-events: none;
    border-radius: inherit;
}

.cat-add-submit:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow:
        0 4px 14px rgba(var(--primary-rgb), 0.35),
        0 2px 4px rgba(0, 0, 0, 0.12);
}

.cat-add-submit:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
    box-shadow: 0 1px 4px rgba(var(--primary-rgb), 0.2);
}

.cat-add-submit:disabled {
    opacity: 0.35;
    cursor: not-allowed;
    box-shadow: none;
}

.cat-add-submit:not(:disabled) {
    opacity: 1;
}

.cat-add-submit-icon {
    filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.15));
}

.cat-add-submit.loading .cat-add-submit-icon {
    animation: catSpin 0.8s linear infinite;
}
.cat-add-submit.loading .cat-add-submit-text { opacity: 0.7; }

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

/* ── Catalog Quick-Add "+" button ── */
.inv-param-row {
    display: flex;
    align-items: center;
    gap: 6px;
}
.inv-param-row .inv-param-input {
    flex: 1;
    min-width: 0;
}
.cat-quick-add-btn {
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border: 1.5px solid rgba(var(--primary-rgb, 0,122,255), 0.25);
    border-radius: 8px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
    color: var(--ios-blue, #007AFF);
    font-size: 18px;
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    line-height: 1;
}
.cat-quick-add-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.14);
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.4);
    transform: scale(1.05);
}
.cat-quick-add-btn:active {
    transform: scale(0.95);
}

/* ── Catalog Quick-Add Modal ── */
.cqa-overlay {
    position: fixed;
    inset: 0;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.25s ease;
    pointer-events: none;
}
.cqa-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}
.cqa-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.cqa-modal {
    position: relative;
    width: 92%;
    max-width: 420px;
    max-height: 85vh;
    overflow-y: auto;
    background: var(--glass-bg, rgba(28, 28, 30, 0.92));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 18px;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(255, 255, 255, 0.06) inset;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    padding: 20px;
    transform: translateY(20px) scale(0.96);
    transition: transform 0.25s ease;
}
.cqa-overlay.visible .cqa-modal {
    transform: translateY(0) scale(1);
}
.cqa-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 16px;
}
.cqa-header-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0,122,255), 0.2), rgba(var(--primary-rgb, 0,122,255), 0.08));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ios-blue, #007AFF);
    flex-shrink: 0;
}
.cqa-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0;
    line-height: 1.2;
}
.cqa-subtitle {
    font-size: 11px;
    color: var(--text-tertiary, #8e8e93);
    margin: 2px 0 0;
    line-height: 1.2;
}
.cqa-close {
    margin-left: auto;
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #aaa);
    font-size: 14px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.cqa-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #fff);
}

.cqa-section-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary, #8e8e93);
    margin-bottom: 8px;
}
.cqa-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.cqa-cat-pill {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
    padding: 8px 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    cursor: pointer;
    transition: all 0.2s;
    min-width: 90px;
}
.cqa-cat-pill:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.1);
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.3);
    transform: translateY(-1px);
}
.cqa-cat-pill:active {
    transform: scale(0.97);
}
.cqa-cat-pill.loading {
    opacity: 0.6;
    pointer-events: none;
}
.cqa-pill-prefix {
    font-size: 12px;
    font-weight: 700;
    color: var(--ios-blue, #007AFF);
    letter-spacing: 0.3px;
}
.cqa-pill-name {
    font-size: 10px;
    color: var(--text-secondary, #aaa);
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cqa-pill-next {
    font-size: 10px;
    font-family: 'SF Mono', monospace;
    color: var(--text-tertiary, #8e8e93);
    opacity: 0.7;
}
.cqa-empty {
    font-size: 12px;
    color: var(--text-tertiary, #8e8e93);
    padding: 8px 0;
}

.cqa-divider {
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 16px 0;
}
.cqa-divider::before,
.cqa-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
}
.cqa-divider span {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary, #8e8e93);
    white-space: nowrap;
}

.cqa-new-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.cqa-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-tertiary, #8e8e93);
    margin-bottom: 4px;
    display: block;
}
.cqa-field-code {
    display: inline-block;
    max-width: 160px;
}
.cqa-code-input {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    width: auto;
    max-width: 140px;
}
.cqa-code-oe {
    font-size: 13px !important;
    font-weight: 800;
    color: var(--ios-blue, #007AFF);
    flex-shrink: 0;
}
.cqa-code-sep {
    font-size: 13px !important;
    color: var(--text-tertiary, #666);
    flex-shrink: 0;
}
input[type="text"].cqa-code-field,
.cqa-code-field {
    width: 50px !important;
    max-width: 50px !important;
    min-width: 50px !important;
    background: transparent !important;
    border: none !important;
    color: var(--text-primary, #fff) !important;
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    outline: none !important;
    padding: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}
.cqa-code-field::placeholder {
    color: var(--text-tertiary, #666);
    font-weight: 400;
}

.cqa-cat-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: rgba(0, 0, 0, 0.12);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s;
}
.cqa-cat-selector:hover {
    background: rgba(0, 0, 0, 0.18);
    border-color: rgba(255, 255, 255, 0.1);
}
.cqa-cat-selector.open {
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.3);
}
.cqa-cat-selector.has-value {
    border-color: rgba(52, 199, 89, 0.3);
    background: rgba(52, 199, 89, 0.06);
}
.cqa-cat-text {
    flex: 1;
    font-size: 12px;
    color: var(--text-tertiary, #8e8e93);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cqa-cat-text.selected {
    color: var(--text-primary, #fff);
    font-weight: 500;
}
.cqa-chevron {
    color: var(--text-tertiary, #666);
    flex-shrink: 0;
    transition: transform 0.2s;
}
.cqa-cat-selector.open .cqa-chevron {
    transform: rotate(90deg);
}

.cqa-browser {
    margin-top: 8px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    background: rgba(0, 0, 0, 0.12);
    padding: 8px;
    max-height: 220px;
    overflow-y: auto;
}
.cqa-browser-search {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 6px;
    margin-bottom: 6px;
}
.cqa-browser-search svg {
    flex-shrink: 0;
    color: var(--text-tertiary, #666);
}
.cqa-search-field {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary, #fff);
    font-size: 12px;
    outline: none;
}
.cqa-search-field::placeholder {
    color: var(--text-tertiary, #666);
}
.cqa-search-clear {
    background: none;
    border: none;
    color: var(--text-tertiary, #666);
    font-size: 12px;
    cursor: pointer;
    padding: 0 2px;
}
.cqa-breadcrumb {
    font-size: 10px;
    color: var(--text-tertiary, #8e8e93);
    margin-bottom: 6px;
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
}
.cqa-tree {
    max-height: 150px;
    overflow-y: auto;
}

.cqa-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    background: linear-gradient(135deg, var(--ios-blue, #007AFF), #0055CC);
    color: #fff;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
    margin-top: 4px;
}
.cqa-submit:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.cqa-submit:active:not(:disabled) {
    transform: scale(0.98);
}
.cqa-submit:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.cqa-submit.loading svg {
    animation: catSpin 0.8s linear infinite;
}

/* Category tree items in quick add modal */
.cqa-tree .cat-add-item,
.cat-add-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    cursor: pointer;
    transition: background 0.15s;
    font-size: 12px;
    color: var(--text-primary, #fff);
}
.cqa-tree .cat-add-item:hover,
.cat-add-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.cat-add-item-name {
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.cat-add-chevron {
    flex-shrink: 0;
    color: var(--text-tertiary, #666);
    opacity: 0.5;
}
.cat-add-item.cat-add-leaf {
    color: var(--ios-blue, #007AFF);
}
.cat-add-item.cat-add-leaf:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.12);
}
.cat-add-loading,
.cat-add-empty {
    padding: 12px;
    text-align: center;
    font-size: 11px;
    color: var(--text-tertiary, #8e8e93);
}

/* Breadcrumb in category browser */
.cqa-breadcrumb .inv-bc-item,
.cqa-breadcrumb span {
    font-size: 10px;
    color: var(--text-tertiary, #8e8e93);
    cursor: pointer;
}
.cqa-breadcrumb .inv-bc-item:hover {
    color: var(--ios-blue, #007AFF);
    text-decoration: underline;
}
.cqa-breadcrumb .inv-bc-sep {
    margin: 0 2px;
    color: var(--text-tertiary, #666);
    opacity: 0.5;
}

/* ── Category Search ── */
.cat-search-wrapper {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px;
    background: rgba(0, 0, 0, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    margin-bottom: 6px;
    transition: all 0.2s ease;
}

.cat-search-wrapper:focus-within {
    background: rgba(0, 0, 0, 0.2);
    border-color: rgba(var(--primary-rgb), 0.3);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.08);
}

.cat-search-icon {
    flex-shrink: 0;
    color: var(--text-tertiary);
    opacity: 0.6;
    transition: opacity 0.2s;
    width: 12px;
    height: 12px;
}

.cat-search-wrapper:focus-within .cat-search-icon {
    opacity: 0.9;
    color: var(--primary-color);
}

input[type="text"].cat-search-input {
    flex: 1;
    background: none !important;
    border: none !important;
    outline: none !important;
    color: var(--text-primary) !important;
    font-size: 0.72rem !important;
    font-family: inherit;
    padding: 0 !important;
    min-width: 0;
    height: auto !important;
    min-height: 0 !important;
    box-shadow: none !important;
}

input[type="text"].cat-search-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.6;
}

.cat-search-clear {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: var(--text-tertiary);
    font-size: 9px;
    cursor: pointer;
    padding: 0;
    transition: all 0.15s ease;
    flex-shrink: 0;
}

.cat-search-clear:hover {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}

/* Search result items */
.inv-category-search-result {
    flex-wrap: wrap !important;
    gap: 4px !important;
    padding: 10px 12px !important;
}

.inv-category-search-result .cat-search-result-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
    min-width: 0;
}

.inv-category-search-result .cat-search-result-name {
    font-weight: 600;
    font-size: 0.82rem;
    color: var(--text-primary);
}

.inv-category-search-result .cat-search-result-path {
    font-size: 0.68rem;
    color: var(--text-secondary);
    opacity: 0.6;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ── Light mode ── */
body.light-mode .cat-add-panel {
    background: rgba(255, 255, 255, 0.65);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.04),
        0 4px 16px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.light-mode .cat-add-form-group {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .cat-add-divider {
    background: rgba(0, 0, 0, 0.06);
}

body.light-mode .cat-add-code-input {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .cat-add-code-input:focus-within {
    background: #fff;
    border-color: rgba(var(--primary-rgb), 0.45);
}

body.light-mode .cat-add-selected-category {
    background: rgba(255, 255, 255, 0.6);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .cat-add-selected-category:hover {
    background: rgba(255, 255, 255, 0.85);
    border-color: rgba(0, 0, 0, 0.1);
}

body.light-mode .cat-add-category-browser {
    background: rgba(255, 255, 255, 0.5);
    border-color: rgba(0, 0, 0, 0.05);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.03);
}

body.light-mode .cat-add-category-browser .inv-category-breadcrumb {
    border-bottom-color: rgba(0, 0, 0, 0.05);
    background: rgba(0, 0, 0, 0.015);
}

body.light-mode .cat-add-category-browser .inv-category-item {
    border-bottom-color: rgba(0, 0, 0, 0.04);
}

body.light-mode .cat-add-selected-clear {
    background: rgba(0, 0, 0, 0.05);
    color: var(--text-tertiary);
}

body.light-mode .cat-add-preview {
    background: rgba(var(--ios-green-rgb), 0.06);
}

body.light-mode .cat-search-wrapper {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.08);
}

body.light-mode .cat-search-wrapper:focus-within {
    background: rgba(255, 255, 255, 0.8);
    border-color: rgba(var(--primary-rgb), 0.4);
}

body.light-mode .cat-search-clear {
    background: rgba(0, 0, 0, 0.06);
}

body.light-mode .cat-search-clear:hover {
    background: rgba(255, 82, 82, 0.15);
}

/* ── Catalog List ── */
.cat-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 14px;
    padding: 8px;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.cat-list-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 10px 8px;
    font-size: 0.58rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--text-tertiary);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
    margin-bottom: 4px;
}

.cat-lh-prefix { width: 58px; flex-shrink: 0; }
.cat-lh-name { flex: 1; min-width: 0; }
.cat-lh-next { flex-shrink: 0; text-align: right; }

.cat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.02);
    border: 1px solid transparent;
    transition: all 0.2s ease;
    overflow: hidden;
}

.cat-row:hover {
    background: rgba(var(--ios-blue-rgb), 0.06);
    border-color: rgba(var(--ios-blue-rgb), 0.15);
}

.cat-row-prefix {
    font-size: 0.72rem;
    font-weight: 700;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--ios-green, #34C759);
    white-space: nowrap;
    width: 58px;
    flex-shrink: 0;
}

.cat-row-name {
    flex: 1;
    font-size: 0.72rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    min-width: 0;
    cursor: default;
}

.cat-row-name[title]:hover {
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* Inline edit input */
.cat-row-edit-input {
    width: 100%;
    padding: 2px 6px;
    border: 1px solid var(--ios-blue, #007AFF);
    border-radius: 5px;
    background: rgba(var(--ios-blue-rgb), 0.06);
    color: var(--text-primary);
    font-size: 0.76rem;
    outline: none;
    box-shadow: 0 0 0 2px rgba(var(--ios-blue-rgb), 0.12);
}

body.light-mode .cat-row-edit-input {
    background: rgba(var(--ios-blue-rgb), 0.04);
}

.cat-row-next {
    font-size: 0.65rem;
    font-weight: 500;
    font-family: 'SF Mono', 'Fira Code', monospace;
    color: var(--text-tertiary);
    white-space: nowrap;
    flex-shrink: 0;
    text-align: right;
}

/* ── Right side wrapper: number + actions ── */
.cat-row-right {
    display: flex;
    align-items: center;
    gap: 0;
    flex-shrink: 0;
    margin-left: auto;
    position: relative;
    overflow: hidden;
}

.cat-row-right .cat-row-next {
    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.cat-row-right .cat-row-actions {
    display: flex;
    gap: 2px;
    flex-shrink: 0;
    width: 0;
    opacity: 0;
    overflow: hidden;
    transition: width 0.25s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.2s ease 0.05s,
                margin 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    margin-left: 0;
}

.cat-row:hover .cat-row-right .cat-row-actions {
    width: 48px;
    opacity: 1;
    margin-left: 6px;
}

.cat-row-next.cat-row-next-clickable {
    cursor: pointer;
    border-radius: 6px;
    padding: 4px 8px;
    transition: background 0.15s ease, color 0.15s ease;
}

.cat-row-next.cat-row-next-clickable:hover {
    background: rgba(var(--ios-blue-rgb), 0.1);
    color: var(--ios-blue, #007AFF);
}

.cat-row-next.cat-row-next-clickable:active {
    background: rgba(var(--ios-blue-rgb), 0.2);
}

.cat-row-next .cat-row-counter-input {
    width: 80px;
    height: 24px;
    min-height: 0 !important;
    padding: 2px 6px !important;
    border: 1px solid var(--ios-blue, #007AFF);
    border-radius: 6px;
    background: rgba(var(--ios-blue-rgb), 0.08);
    color: var(--text-primary);
    font-size: 0.65rem !important;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
    text-align: center;
    outline: none;
    -moz-appearance: textfield;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 0 2px rgba(var(--ios-blue-rgb), 0.15);
    -webkit-user-select: text !important;
    user-select: text !important;
    pointer-events: auto !important;
}

.cat-row-next .cat-row-counter-input::-webkit-inner-spin-button,
.cat-row-next .cat-row-counter-input::-webkit-outer-spin-button {
    -webkit-appearance: none;
    appearance: none;
    margin: 0;
}

.cat-row-counter-input {
    width: 80px;
    height: 24px;
    min-height: 0 !important;
    padding: 2px 6px !important;
    border: 1px solid var(--ios-blue, #007AFF);
    border-radius: 6px;
    background: rgba(var(--ios-blue-rgb), 0.08);
    color: var(--text-primary);
    font-size: 0.65rem !important;
    font-weight: 600;
    font-family: 'SF Mono', 'Fira Code', monospace;
    text-align: center;
    outline: none;
    -webkit-appearance: none;
    appearance: none;
    box-shadow: 0 0 0 2px rgba(var(--ios-blue-rgb), 0.15);
    -webkit-user-select: text !important;
    user-select: text !important;
    pointer-events: auto !important;
}

.cat-row-action {
    width: 22px;
    height: 22px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(var(--ios-blue-rgb), 0.08);
    color: var(--ios-blue, #007AFF);
    transition: background 0.15s, transform 0.15s;
}

.cat-row-action:hover { background: rgba(var(--ios-blue-rgb), 0.18); }
.cat-row-action:active { transform: scale(0.9); }

.cat-row-action-del {
    background: rgba(var(--ios-red-rgb), 0.08);
    color: var(--ios-red, #FF3B30);
}
.cat-row-action-del:hover { background: rgba(var(--ios-red-rgb), 0.18); }

/* Light mode list */
body.light-mode .cat-list {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .cat-row {
    background: rgba(0, 0, 0, 0.01);
    border-color: transparent;
}

body.light-mode .cat-row:hover {
    background: rgba(var(--ios-blue-rgb), 0.04);
    border-color: rgba(var(--ios-blue-rgb), 0.1);
}

body.light-mode .cat-row-next .cat-row-counter-input {
    background: rgba(var(--ios-blue-rgb), 0.06);
    border-color: var(--ios-blue, #007AFF);
}

/* ── Confirm modal ── */
.cat-confirm-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
    opacity: 0;
    transition: opacity 0.15s;
}

.cat-confirm-overlay.visible { opacity: 1; }

.cat-confirm-box {
    background: var(--card-bg, #1c1c1e);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 20px 22px;
    min-width: 280px;
    max-width: 360px;
    text-align: center;
    transform: scale(0.92);
    transition: transform 0.15s;
}

.cat-confirm-overlay.visible .cat-confirm-box { transform: scale(1); }

.cat-confirm-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin-bottom: 8px;
}

.cat-confirm-desc {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin-bottom: 18px;
    line-height: 1.4;
}

.cat-confirm-desc code {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 700;
    color: var(--ios-blue, #007AFF);
}

.cat-confirm-btns {
    display: flex;
    gap: 8px;
}

.cat-confirm-cancel,
.cat-confirm-del {
    flex: 1;
    padding: 8px 14px;
    border: none;
    border-radius: 8px;
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.15s;
}

.cat-confirm-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
}

.cat-confirm-cancel:hover { opacity: 0.8; }

.cat-confirm-del {
    background: var(--ios-red, #FF3B30);
    color: #fff;
}

.cat-confirm-del:hover { opacity: 0.88; }
.cat-confirm-del:active { transform: scale(0.95); }

body.light-mode .cat-confirm-box {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
}

body.light-mode .cat-confirm-cancel {
    background: rgba(0, 0, 0, 0.06);
}

body.light-mode .cat-list-header {
    border-bottom-color: rgba(0, 0, 0, 0.06);
}

/* ── Edit Category Allegro Modal ── */
.eca-modal {
    position: relative;
    width: 400px;
    max-width: 92vw;
    background: var(--glass-bg, rgba(28, 28, 30, 0.95));
    border: 1px solid var(--glass-border, rgba(255, 255, 255, 0.08));
    border-radius: 16px;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    overflow: hidden;
}
.eca-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
.eca-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary, #fff);
}
.eca-close {
    width: 26px;
    height: 26px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-secondary, #aaa);
    font-size: 13px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.eca-close:hover {
    background: rgba(255, 255, 255, 0.15);
    color: var(--text-primary, #fff);
}
.eca-current {
    padding: 10px 16px;
    background: rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    flex-wrap: wrap;
}
.eca-prefix {
    font-family: 'SF Mono', monospace;
    font-weight: 700;
    color: var(--ios-blue, #007AFF);
    padding: 2px 6px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.12);
    border-radius: 4px;
}
.eca-current-label {
    color: var(--text-tertiary, #8e8e93);
}
.eca-current-name {
    color: var(--text-secondary, #aaa);
}
.eca-selected {
    padding: 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 40px;
}
.eca-selected-placeholder {
    font-size: 12px;
    color: var(--text-tertiary, #8e8e93);
    font-style: italic;
}
.eca-selected.has-selection {
    background: rgba(52, 199, 89, 0.08);
    border-color: rgba(52, 199, 89, 0.15);
}
.eca-selected-label {
    font-size: 11px;
    color: var(--text-tertiary, #8e8e93);
}
.eca-selected-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--ios-green, #34C759);
}
.eca-selected-clear {
    margin-left: auto;
    width: 20px;
    height: 20px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary, #8e8e93);
    font-size: 11px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}
.eca-selected-clear:hover {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}
.eca-search {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background: rgba(0, 0, 0, 0.12);
    border-bottom: 1px solid rgba(255, 255, 255, 0.04);
}
.eca-search-icon {
    flex-shrink: 0;
    color: var(--text-tertiary, #8e8e93);
    opacity: 0.6;
}
.eca-search-input {
    flex: 1;
    background: transparent;
    border: none;
    color: var(--text-primary, #fff);
    font-size: 13px;
    outline: none;
    padding: 4px 0;
}
.eca-search-input::placeholder {
    color: var(--text-tertiary, #8e8e93);
    opacity: 0.6;
}
.eca-search-clear {
    width: 18px;
    height: 18px;
    border: none;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.1);
    color: var(--text-tertiary, #8e8e93);
    font-size: 10px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s;
}
.eca-search-clear:hover {
    background: rgba(255, 82, 82, 0.2);
    color: #ff5252;
}
.eca-breadcrumb {
    padding: 8px 16px;
    font-size: 11px;
    color: var(--text-tertiary, #8e8e93);
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    background: rgba(0, 0, 0, 0.08);
}
.eca-bc-item {
    cursor: pointer;
    transition: color 0.15s;
}
.eca-bc-item:hover {
    color: var(--ios-blue, #007AFF);
}
.eca-bc-sep {
    margin: 0 3px;
    opacity: 0.4;
}
.eca-list {
    max-height: 220px;
    overflow-y: auto;
    padding: 8px;
}
.eca-loading,
.eca-empty {
    padding: 24px 16px;
    text-align: center;
    font-size: 12px;
    color: var(--text-tertiary, #8e8e93);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}
.eca-cat-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.15s;
}
.eca-cat-item:hover {
    background: rgba(255, 255, 255, 0.06);
}
.eca-cat-name {
    font-size: 13px;
    color: var(--text-primary, #fff);
    flex: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.eca-cat-arrow {
    font-size: 14px;
    color: var(--text-tertiary, #666);
    opacity: 0.5;
}
.eca-cat-item.eca-cat-leaf .eca-cat-name {
    color: var(--ios-blue, #007AFF);
}
.eca-cat-item.eca-cat-leaf:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.12);
}
.eca-cat-select {
    font-size: 11px;
    font-weight: 600;
    color: var(--ios-blue, #007AFF);
    padding: 3px 8px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.1);
    border-radius: 4px;
}
.eca-footer {
    display: flex;
    gap: 10px;
    padding: 12px 16px;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.eca-btn {
    flex: 1;
    padding: 10px 16px;
    border: none;
    border-radius: 10px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
}
.eca-btn-cancel {
    background: rgba(255, 255, 255, 0.08);
    color: var(--text-primary, #fff);
}
.eca-btn-cancel:hover {
    background: rgba(255, 255, 255, 0.12);
}
.eca-btn-save {
    background: var(--ios-blue, #007AFF);
    color: #fff;
}
.eca-btn-save:hover:not(:disabled) {
    filter: brightness(1.1);
}
.eca-btn-save:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
body.light-mode .eca-modal {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.1);
}
body.light-mode .eca-current {
    background: rgba(0, 0, 0, 0.04);
}
body.light-mode .eca-search {
    background: rgba(0, 0, 0, 0.03);
}
body.light-mode .eca-search-input {
    color: var(--text-primary);
}
body.light-mode .eca-breadcrumb {
    background: rgba(0, 0, 0, 0.03);
}
body.light-mode .eca-cat-item:hover {
    background: rgba(0, 0, 0, 0.04);
}
body.light-mode .eca-btn-cancel {
    background: rgba(0, 0, 0, 0.06);
}

/* ── History ──────────────────────────────────────────────────────── */

.inv-history-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.inv-history-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.03);
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
}

.inv-history-info {
    flex: 1;
    min-width: 0;
}

.inv-history-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #000);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.inv-history-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 3px;
    font-size: 11px;
}

.inv-history-catalog {
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-weight: 600;
    color: var(--ios-blue, #007AFF);
}

.inv-history-price {
    color: var(--ios-green, #34C759);
    font-weight: 600;
}

.inv-history-date {
    color: var(--text-secondary, #3C3C43);
    opacity: 0.6;
}

.inv-history-mode {
    padding: 1px 6px;
    border-radius: 4px;
    font-weight: 600;
    font-size: 10px;
    text-transform: uppercase;
}

.inv-mode-active, .inv-st-active {
    background: rgba(52,199,89,0.12);
    color: var(--ios-green, #34C759);
}

.inv-mode-draft, .inv-st-ended {
    background: rgba(255,149,0,0.12);
    color: var(--ios-orange, #FF9500);
}

.inv-st-queued {
    background: rgba(142,142,147,0.12);
    color: var(--text-secondary, #8E8E93);
}

.inv-st-uploading, .inv-st-sending {
    background: rgba(0,122,255,0.12);
    color: var(--ios-blue, #007AFF);
    animation: inv-st-pulse 1.5s ease-in-out infinite;
}

.inv-st-submitted, .inv-st-checking {
    background: rgba(88,86,214,0.12);
    color: #5856D6;
    animation: inv-st-pulse 2s ease-in-out infinite;
}

.inv-st-error {
    background: rgba(255,59,48,0.12);
    color: var(--ios-red, #FF3B30);
}

.inv-st-unknown {
    background: rgba(142,142,147,0.12);
    color: var(--text-secondary, #8E8E93);
}

/* Ovoko car creation/reuse badge on completed items */
.inv-ovoko-car-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
}
.inv-ovoko-car-badge.reused {
    background: rgba(0,122,255,0.10);
    color: var(--ios-blue, #007AFF);
}
.inv-ovoko-car-badge.created {
    background: rgba(255,149,0,0.10);
    color: var(--ios-orange, #FF9500);
}

/* Ovoko part ID badge — shown after a successful import */
.inv-ovoko-id-badge {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 1px 5px;
    border-radius: 4px;
    font-size: 9px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.02em;
    white-space: nowrap;
    background: rgba(52,199,89,0.10);
    color: var(--ios-green, #34C759);
    text-decoration: none;
}

@keyframes inv-st-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* ══════════════════════════════════════════════════════════════════
   OVOKO QUEUE DELAY — Apple-style slider
   ══════════════════════════════════════════════════════════════════ */
.ovoko-delay-control {
    background: rgba(255, 149, 0, 0.06);
    border: 1px solid rgba(255, 149, 0, 0.12);
    border-radius: 14px;
    padding: 14px 16px 12px;
    margin-bottom: 10px;
}

.ovoko-delay-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.ovoko-delay-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 8px;
    background: rgba(255, 149, 0, 0.15);
    color: #ff9500;
    flex-shrink: 0;
}

.ovoko-delay-title {
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    flex: 1;
}

.ovoko-delay-value {
    font-size: 0.82rem;
    font-weight: 700;
    color: #ff9500;
    background: rgba(255, 149, 0, 0.12);
    padding: 3px 10px;
    border-radius: 20px;
    min-width: 42px;
    text-align: center;
    transition: transform 0.15s ease, background 0.2s;
}

/* ── Portal segmented control (Apple-style) ── */
.queue-delay-portal-selector {
    display: flex;
    position: relative;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 3px;
    margin-bottom: 12px;
    gap: 0;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.qdp-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 6px 8px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    background: transparent;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    position: relative;
    z-index: 2;
    transition: color 0.25s ease;
    -webkit-tap-highlight-color: transparent;
}

.qdp-btn.active {
    color: var(--text-primary);
}

.qdp-btn:hover:not(.active) {
    color: var(--text-secondary);
}

/* Sliding pill behind active button */
.qdp-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.1);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
    z-index: 1;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1), width 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: none;
}

/* Colored dots */
.qdp-dot {
    display: inline-block;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}

.qdp-dot-ovoko {
    background: #ff9500;
    box-shadow: 0 0 4px rgba(255, 149, 0, 0.4);
}

.qdp-dot-allegro {
    background: #ff5a30;
    box-shadow: 0 0 4px rgba(255, 90, 48, 0.4);
}

.qdp-dot-all {
    background: linear-gradient(135deg, #ff9500, #ff5a30);
    box-shadow: 0 0 4px rgba(255, 120, 40, 0.4);
}

/* Light mode */
body.light-mode .queue-delay-portal-selector {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode .qdp-slider {
    background: #ffffff;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 0.5px rgba(0, 0, 0, 0.04);
}

.ovoko-delay-slider-wrap {
    position: relative;
    padding: 0 2px;
}

/* Apple-style range slider */
.ovoko-delay-slider {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 6px;
    background: linear-gradient(to right,
        rgba(255, 149, 0, 0.25) 0%,
        rgba(255, 149, 0, 0.5) 100%);
    border-radius: 10px;
    outline: none;
    cursor: pointer;
    margin: 0;
    position: relative;
}

/* Track — WebKit */
.ovoko-delay-slider::-webkit-slider-runnable-track {
    height: 6px;
    border-radius: 10px;
    background: transparent;
}

/* Thumb — WebKit */
.ovoko-delay-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    margin-top: -9px;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ovoko-delay-slider::-webkit-slider-thumb:hover {
    transform: scale(1.08);
    box-shadow:
        0 2px 8px rgba(0, 0, 0, 0.3),
        0 0 0 1px rgba(0, 0, 0, 0.06),
        0 6px 16px rgba(0, 0, 0, 0.12);
}

.ovoko-delay-slider::-webkit-slider-thumb:active {
    transform: scale(1.12);
    box-shadow:
        0 2px 10px rgba(255, 149, 0, 0.4),
        0 0 0 4px rgba(255, 149, 0, 0.15),
        0 6px 16px rgba(0, 0, 0, 0.12);
}

/* Track — Firefox */
.ovoko-delay-slider::-moz-range-track {
    height: 6px;
    border-radius: 10px;
    background: linear-gradient(to right,
        rgba(255, 149, 0, 0.25) 0%,
        rgba(255, 149, 0, 0.5) 100%);
    border: none;
}

/* Thumb — Firefox */
.ovoko-delay-slider::-moz-range-thumb {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #ffffff;
    border: none;
    box-shadow:
        0 1px 4px rgba(0, 0, 0, 0.25),
        0 0 0 1px rgba(0, 0, 0, 0.04),
        0 4px 8px rgba(0, 0, 0, 0.1);
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.ovoko-delay-slider::-moz-range-thumb:hover {
    transform: scale(1.08);
}

/* Tick marks */
.ovoko-delay-ticks {
    display: flex;
    justify-content: space-between;
    padding: 6px 0 0;
    pointer-events: none;
}

.ovoko-delay-ticks span {
    font-size: 0.62rem;
    color: var(--text-tertiary);
    width: 18px;
    text-align: center;
    opacity: 0.7;
    font-variant-numeric: tabular-nums;
}

/* Countdown display */
.ovoko-delay-countdown {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
    padding: 8px 12px;
    background: rgba(255, 149, 0, 0.08);
    border-radius: 10px;
    animation: ovokoCountdownPulse 2s ease-in-out infinite;
}

.ovoko-countdown-ring {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.ovoko-countdown-ring circle:last-child {
    transition: stroke-dashoffset 0.3s ease;
}

.ovoko-countdown-text {
    font-size: 0.76rem;
    font-weight: 600;
    color: #ff9500;
    font-variant-numeric: tabular-nums;
}

.ovoko-countdown-skip {
    margin-left: auto;
    padding: 4px 10px;
    font-size: 0.7rem;
    font-weight: 600;
    color: #ff9500;
    background: rgba(255, 149, 0, 0.12);
    border: 1px solid rgba(255, 149, 0, 0.25);
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    line-height: 1.3;
}
.ovoko-countdown-skip:hover {
    background: rgba(255, 149, 0, 0.22);
    border-color: rgba(255, 149, 0, 0.4);
    transform: scale(1.04);
}
.ovoko-countdown-skip:active {
    transform: scale(0.96);
}

@keyframes ovokoCountdownPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.7; }
}

/* Light mode adjustments */
body.light-mode .ovoko-delay-control {
    background: rgba(255, 149, 0, 0.06);
    border-color: rgba(255, 149, 0, 0.15);
}

body.light-mode .ovoko-delay-slider::-webkit-slider-thumb {
    background: #ffffff;
    box-shadow:
        0 1px 3px rgba(0, 0, 0, 0.2),
        0 0 0 0.5px rgba(0, 0, 0, 0.08),
        0 3px 6px rgba(0, 0, 0, 0.08);
}

body.light-mode .ovoko-delay-countdown {
    background: rgba(255, 149, 0, 0.1);
}

body.light-mode .ovoko-countdown-skip {
    background: rgba(255, 149, 0, 0.1);
    border-color: rgba(255, 149, 0, 0.3);
}

/* ── Status list layout ── */
.inv-status-list {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

/* Queue tabs (Allegro / Ovoko) — card style */
.queue-tabs {
    display: flex;
    gap: 0;
    padding: 0;
    margin: 0 0 12px;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    overflow: hidden;
}

body.light-mode .queue-tabs {
    background: rgba(0, 0, 0, 0.04);
}

.queue-tab-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 16px;
    border: none;
    border-radius: 0;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    background: transparent;
    cursor: pointer;
    transition: all 0.2s ease;
    position: relative;
}

body.light-mode .queue-tab-btn {
    background: transparent;
}

.queue-tab-btn:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-primary);
}

body.light-mode .queue-tab-btn:hover {
    background: rgba(0, 0, 0, 0.06);
}

.queue-tab-btn.active {
    background: var(--primary-gradient);
    color: #fff;
    box-shadow: 0 2px 8px rgba(var(--primary-rgb), 0.3);
}

.queue-tab-btn svg {
    opacity: 0.7;
    width: 16px;
    height: 16px;
}

.queue-tab-btn.active svg {
    opacity: 1;
}

/* Queue progress bar */
.queue-progress-bar {
    padding: 10px 12px;
    margin-bottom: 8px;
}

.queue-progress-info {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.queue-progress-track {
    width: 100%;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}

body.light-mode .queue-progress-track {
    background: rgba(0, 0, 0, 0.06);
}

.queue-progress-fill {
    height: 100%;
    border-radius: 3px;
    background: var(--primary-gradient);
    transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
}

.queue-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0;
    width: 40px; height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
    animation: progressShine 2s ease-in-out infinite;
}

@keyframes progressShine {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

/* Bulk action toolbar & checkboxes */
.queue-bulk-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    margin-bottom: 8px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 10px;
}

body.light-mode .queue-bulk-bar {
    background: rgba(0, 0, 0, 0.02);
}

.inv-bulk-check,
.inv-bulk-check-all {
    display: flex;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex-shrink: 0;
    font-size: 12px;
    color: var(--text-secondary);
}

.inv-bulk-check input,
.inv-bulk-check-all input {
    display: none;
}

.inv-bulk-check span,
.inv-bulk-check-all span {
    width: 18px;
    height: 18px;
    border-radius: 5px;
    border: 1.5px solid rgba(255, 255, 255, 0.2);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

body.light-mode .inv-bulk-check span,
body.light-mode .inv-bulk-check-all span {
    border-color: rgba(0, 0, 0, 0.15);
}

.inv-bulk-check input:checked + span,
.inv-bulk-check-all input:checked + span {
    background: var(--primary-color);
    border-color: var(--primary-color);
}

.inv-bulk-check input:checked + span::after,
.inv-bulk-check-all input:checked + span::after {
    content: '✓';
    color: #fff;
    font-size: 11px;
    font-weight: 700;
}

.queue-bulk-delete {
    margin-left: auto;
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: rgba(255, 107, 107, 0.15);
    color: #FF6B6B;
    cursor: pointer;
    transition: all 0.2s ease;
}

.queue-bulk-delete:disabled {
    opacity: 0.3;
    cursor: default;
}

.queue-bulk-delete:not(:disabled):hover {
    background: rgba(255, 107, 107, 0.25);
}

/* Bulk retry / send-to-Ovoko buttons share queue-bulk-delete styling */
.queue-bulk-retry,
.queue-bulk-ovoko {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.queue-bulk-retry { background: rgba(0, 122, 255, 0.15); color: var(--primary-color, #007AFF); }
.queue-bulk-retry:disabled,
.queue-bulk-ovoko:disabled { opacity: 0.3; cursor: default; }
.queue-bulk-retry:not(:disabled):hover { background: rgba(0, 122, 255, 0.25); }
.queue-bulk-ovoko { background: rgba(255, 159, 10, 0.15); color: var(--ios-orange, #FF9F0A); }
.queue-bulk-ovoko:not(:disabled):hover { background: rgba(255, 159, 10, 0.25); }
.queue-bulk-delete { margin-left: auto; }

/* Undo toast for bulk delete */
.inv-bulk-undo-toast {
    position: fixed;
    bottom: 24px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    background: rgba(20, 20, 22, 0.96);
    color: #fff;
    border-radius: 12px;
    box-shadow: 0 8px 28px rgba(0,0,0,0.35);
    font-size: 13px;
    animation: invBulkUndoEnter 220ms ease-out;
}
.inv-bulk-undo-toast.is-leaving { opacity: 0; transition: opacity 200ms ease; }
.inv-bulk-undo-msg { font-weight: 500; }
.inv-bulk-undo-btn {
    background: rgba(0, 122, 255, 0.2);
    color: #4ea8ff;
    border: none;
    padding: 5px 12px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 600;
}
.inv-bulk-undo-btn:hover { background: rgba(0, 122, 255, 0.32); }
.inv-bulk-undo-close {
    background: transparent;
    color: rgba(255,255,255,0.6);
    border: none;
    font-size: 18px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 6px;
}
@keyframes invBulkUndoEnter {
    from { opacity: 0; transform: translate(-50%, 16px); }
    to   { opacity: 1; transform: translate(-50%, 0); }
}

/* Drafts manager modal rows */
.queue-drafts-btn {
    padding: 5px 12px;
    font-size: 11px;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: rgba(108, 99, 255, 0.12);
    color: #6c63ff;
    cursor: pointer;
    transition: all 0.2s ease;
}
.queue-drafts-btn:hover { background: rgba(108, 99, 255, 0.2); }

.inv-draft-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.04);
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.08);
    margin-bottom: 8px;
}
.inv-draft-info { flex: 1; min-width: 0; }
.inv-draft-name { font-weight: 600; font-size: 14px; }
.inv-draft-meta { font-size: 11px; color: var(--text-secondary); margin-top: 2px; }
.inv-draft-actions { display: flex; gap: 6px; flex-shrink: 0; }
.inv-draft-load-btn {
    padding: 6px 12px;
    border: none;
    background: var(--primary-color, #007AFF);
    color: #fff;
    border-radius: 8px;
    font-weight: 600;
    cursor: pointer;
    font-size: 12px;
}
.inv-draft-load-btn:hover { filter: brightness(1.05); }
.inv-draft-del-btn {
    width: 32px;
    height: 32px;
    border: none;
    background: rgba(255, 107, 107, 0.12);
    color: #FF6B6B;
    border-radius: 8px;
    cursor: pointer;
    font-size: 14px;
}
.inv-draft-del-btn:hover { background: rgba(255, 107, 107, 0.22); }

.inv-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.03);
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
    transition: background 0.2s;
}

.inv-status-row:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
}

/* Colored left accent per status */
.inv-status-row { border-left: 3px solid transparent; }
.inv-row-inv-st-active  { border-left-color: var(--ios-green, #34C759); }
.inv-row-inv-st-queued  { border-left-color: #8E8E93; }
.inv-row-inv-st-uploading,
.inv-row-inv-st-sending { border-left-color: var(--ios-blue, #007AFF); }
.inv-row-inv-st-submitted,
.inv-row-inv-st-checking { border-left-color: #5856D6; }
.inv-row-inv-st-error   { border-left-color: var(--ios-red, #FF3B30); }
.inv-row-inv-st-ended   { border-left-color: var(--ios-orange, #FF9500); }

/* Thumbnail — uses background-image for stability during DOM updates */
.inv-st-thumb {
    width: 40px;
    height: 40px;
    border-radius: 8px;
    overflow: hidden;
    flex-shrink: 0;
    background-color: rgba(var(--primary-rgb, 0,122,255), 0.06);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    display: flex;
    align-items: center;
    justify-content: center;
}

.inv-st-thumb.has-img {
    /* Hide placeholder content when background-image is set */
    color: transparent;
}

.inv-st-thumb.no-img {
    /* Show placeholder styling */
    color: var(--text-tertiary, #8E8E93);
}

.inv-st-thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.inv-st-no-img {
    font-size: 18px;
    opacity: 0.4;
}

/* Name with marquee scroll on hover */
.inv-st-name-wrap {
    overflow: hidden;
    position: relative;
    mask-image: linear-gradient(to right, black 88%, transparent 100%);
    -webkit-mask-image: linear-gradient(to right, black 88%, transparent 100%);
}

.inv-st-name {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-primary, #000);
    white-space: nowrap;
    display: inline-block;
    transition: none;
}

.inv-status-row:hover .inv-st-name.is-overflowing {
    animation: marquee-carousel var(--marquee-duration, 6s) linear infinite;
}

.inv-status-info {
    flex: 1;
    min-width: 0;
}

.inv-status-actions {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.inv-st-error-msg {
    font-size: 11px;
    color: var(--ios-red, #FF3B30);
    margin-top: 3px;
    word-break: break-word;
}

.inv-st-error-fields {
    font-size: 11px;
    margin-top: 4px;
    color: var(--text-secondary);
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    align-items: center;
}
.inv-st-fix-link {
    border: 1px solid rgba(255, 159, 10, 0.4);
    background: rgba(255, 159, 10, 0.1);
    color: var(--ios-orange, #FF9F0A);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 10px;
    cursor: pointer;
    line-height: 1.4;
}
.inv-st-fix-link:hover { background: rgba(255, 159, 10, 0.2); }
.inv-flash { box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.45); transition: box-shadow 200ms ease; border-radius: 6px; }

.inv-st-retry-btn {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(0,122,255,0.1);
    cursor: pointer;
    font-size: 14px;
}

.inv-st-retry-btn:hover {
    background: rgba(0,122,255,0.2);
}

.inv-st-remove-btn {
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 6px;
    background: rgba(142,142,147,0.1);
    color: var(--text-secondary, #8E8E93);
    cursor: pointer;
    font-size: 16px;
    line-height: 1;
}

.inv-history-link {
    width: 30px;
    height: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    background: rgba(0,122,255,0.1);
    color: var(--ios-blue, #007AFF);
    transition: background 0.15s;
    flex-shrink: 0;
}

.inv-history-link:hover {
    background: rgba(0,122,255,0.2);
}

/* ── Empty / Loading states ───────────────────────────────────────── */

.inv-empty {
    text-align: center;
    padding: 20px;
    font-size: 13px;
    color: var(--text-secondary, #3C3C43);
    opacity: 0.5;
}

.wiz-check-allegro-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 4px auto 12px;
    padding: 10px 20px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background: #ff5a00;
    border: none;
    border-radius: 10px;
    text-decoration: none;
    cursor: pointer;
    transition: background .15s, transform .1s;
    max-width: 300px;
}
.wiz-check-allegro-btn:hover { background: #e04f00; }
.wiz-check-allegro-btn:active { transform: scale(.97); }
.wiz-check-allegro-btn svg { flex-shrink: 0; }

.inv-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 20px;
    font-size: 13px;
    color: var(--text-secondary, #3C3C43);
}

/* ── Attention Tab (Stan ofert) ───────────────────────────────────── */

.attention-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

body.light-mode .attention-header {
    border-color: rgba(0,0,0,0.06);
}

.attention-header-info {
    flex: 1;
}

.attention-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 2px 0;
}

.attention-subtitle {
    font-size: 0.78rem;
    color: var(--text-secondary);
    margin: 0;
    opacity: 0.7;
}

.attention-refresh-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.attention-check-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border-radius: 10px;
    border: none;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    font-size: 0.8rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    flex-shrink: 0;
    box-shadow: 0 2px 8px rgba(168,85,247,0.3);
    transition: all 0.2s;
}
.attention-check-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 16px rgba(168,85,247,0.45);
}
.attention-check-btn:active { transform: scale(0.97); }
.attention-check-btn.spinning {
    opacity: 0.7;
    pointer-events: none;
}
.attention-check-btn.spinning svg {
    animation: attentionSpin 0.8s linear infinite;
}

.attention-idle {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 56px 20px;
    gap: 20px;
    color: var(--text-tertiary);
    text-align: center;
}
.attention-idle p {
    font-size: 0.85rem;
    margin: 0;
    opacity: 0.65;
    max-width: 280px;
    line-height: 1.5;
}

/* Przycisk Sprawdź wewnątrz placeholdera */
.attention-idle .attention-idle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 14px 32px;
    border-radius: 14px;
    border: none;
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.2), rgba(var(--primary-rgb), 0.08));
    color: var(--primary-color);
    font-size: 0.95rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
    backdrop-filter: blur(10px);
    border: 1px solid rgba(var(--primary-rgb), 0.2);
}
.attention-idle .attention-idle-btn:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.3), rgba(var(--primary-rgb), 0.15));
    border-color: rgba(var(--primary-rgb), 0.35);
    transform: scale(1.02);
}
.attention-idle .attention-idle-btn:active {
    transform: scale(0.98);
}
.attention-idle .attention-idle-btn.spinning {
    opacity: 0.6;
    pointer-events: none;
}
.attention-idle .attention-idle-btn.spinning svg {
    animation: attentionSpin 0.8s linear infinite;
}
.attention-idle .attention-idle-btn svg {
    opacity: 0.8;
}

.attention-refresh-btn:hover {
    background: rgba(var(--primary-rgb),0.15);
    color: var(--primary);
    border-color: rgba(var(--primary-rgb),0.3);
}

body.light-mode .attention-refresh-btn {
    border-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.03);
}

.attention-refresh-btn.spinning svg {
    animation: attentionSpin 0.8s linear infinite;
}

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

.attention-loading {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 30px 20px;
    font-size: 0.85rem;
    color: var(--text-secondary);
}

.attention-progress-wrap {
    width: 100%;
    max-width: 400px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.attention-progress-bar {
    width: 100%;
    height: 6px;
    border-radius: 99px;
    background: rgba(var(--primary-rgb), 0.12);
    overflow: hidden;
    position: relative;
}

.attention-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 99px;
    background: linear-gradient(90deg, var(--primary, #007AFF), #a855f7);
    transition: width 0.15s linear;
    position: relative;
}
.attention-progress-fill::after {
    content: '';
    position: absolute;
    top: 0; right: 0; bottom: 0;
    width: 40px;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3));
    border-radius: 0 99px 99px 0;
    animation: progressShine 1.2s ease-in-out infinite;
}
@keyframes progressShine {
    0%, 100% { opacity: 0; }
    50% { opacity: 1; }
}

.attention-progress-text {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    font-weight: 500;
}

.attention-progress-steps {
    display: flex;
    flex-wrap: wrap;
    gap: 6px 10px;
    justify-content: center;
    margin-top: 4px;
}
.att-step {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 2px 6px;
    border-radius: 5px;
    white-space: nowrap;
    transition: all 0.3s ease;
}
.attention-manual-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    user-select: all;
}

.attention-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(var(--primary-rgb),0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: attentionSpin 0.7s linear infinite;
}

.attention-spinner-small {
    width: 14px;
    height: 14px;
    border: 2px solid rgba(var(--primary-rgb),0.2);
    border-top-color: var(--primary);
    border-radius: 50%;
    animation: attentionSpin 0.7s linear infinite;
}

.attention-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 40px 20px;
    color: #22c55e;
    font-size: 0.85rem;
    text-align: center;
}

.attention-empty svg {
    opacity: 0.6;
}

.attention-empty span {
    color: var(--text-secondary);
    opacity: 0.7;
}

/* Przycisk odświeżania wewnątrz stanów pustego/listy */
.attention-empty .attention-idle-btn,
.attention-refresh-row .attention-idle-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 12px 24px;
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-rgb), 0.2);
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.15), rgba(var(--primary-rgb), 0.06));
    color: var(--primary-color);
    font-size: 0.9rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s ease;
}
.attention-empty .attention-idle-btn:hover,
.attention-refresh-row .attention-idle-btn:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb), 0.25), rgba(var(--primary-rgb), 0.12));
    border-color: rgba(var(--primary-rgb), 0.35);
    transform: scale(1.02);
}
.attention-refresh-row {
    display: flex;
    justify-content: center;
    padding: 16px 0 8px;
    border-top: 1px solid rgba(var(--border-rgb), 0.1);
    margin-top: 12px;
}

.ovoko-fetch-btn {
    margin-top: 10px;
    padding: 12px 28px;
    border-radius: 14px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.25);
    background: rgba(var(--primary-rgb, 0,122,255), 0.12);
    color: var(--primary-color, #007aff);
    font-size: 14px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.ovoko-fetch-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.22);
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.4);
    box-shadow: 0 4px 20px rgba(var(--primary-rgb, 0,122,255), 0.2);
    transform: translateY(-1px);
}

.ovoko-fetch-btn:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}

body.light-mode .ovoko-fetch-btn {
    background: rgba(var(--primary-rgb, 0,122,255), 0.08);
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.2);
}

body.light-mode .ovoko-fetch-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.15);
}

.attention-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Attention Cards (redesigned) ─────────────────────────────────── */
.att-card {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
}
.att-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 3px;
    border-radius: 14px 0 0 14px;
}
.att-card.att-sold-allegro::before { background: #3b82f6; }
.att-card.att-sold-ovoko::before  { background: #f97316; }
.att-card.att-ended-allegro::before { background: #ef4444; }
.att-card.att-ended-ovoko::before { background: #ef4444; }
.att-card.att-warning::before { background: #eab308; }

body.light-mode .att-card {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.06);
}
.att-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.1);
}
body.light-mode .att-card:hover {
    background: rgba(0,0,0,0.035);
    border-color: rgba(0,0,0,0.1);
}

/* Thumbnail */
.att-card-left { flex-shrink: 0; }
.att-thumb {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    object-fit: contain;
    background: rgba(255,255,255,0.05);
}
body.light-mode .att-thumb { background: rgba(0,0,0,0.04); }
.att-thumb-empty {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: rgba(255,255,255,0.05);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-tertiary);
}
body.light-mode .att-thumb-empty { background: rgba(0,0,0,0.04); }

/* Center content */
.att-card-center {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 5px;
}
.att-card-title {
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Status row */
.att-card-status {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.att-status-badge {
    font-size: 0.68rem;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 6px;
    white-space: nowrap;
    letter-spacing: 0.01em;
}
.att-status-badge.att-sold-allegro { background: rgba(59,130,246,0.12); color: #60a5fa; }
.att-status-badge.att-sold-ovoko  { background: rgba(249,115,22,0.12); color: #fb923c; }
.att-status-badge.att-ended-allegro { background: rgba(239,68,68,0.12); color: #f87171; }
.att-status-badge.att-ended-ovoko { background: rgba(239,68,68,0.12); color: #f87171; }
.att-status-badge.att-warning { background: rgba(234,179,8,0.12); color: #facc15; }
body.light-mode .att-status-badge.att-sold-allegro { background: rgba(59,130,246,0.1); color: #2563eb; }
body.light-mode .att-status-badge.att-sold-ovoko  { background: rgba(249,115,22,0.1); color: #ea580c; }
body.light-mode .att-status-badge.att-ended-allegro { background: rgba(239,68,68,0.08); color: #dc2626; }
body.light-mode .att-status-badge.att-ended-ovoko { background: rgba(239,68,68,0.08); color: #dc2626; }
body.light-mode .att-status-badge.att-warning { background: rgba(234,179,8,0.1); color: #ca8a04; }

.att-detail {
    font-size: 0.7rem;
    color: var(--text-secondary);
    font-style: italic;
}

/* IDs row */
.att-card-ids {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 1px;
}
.att-id {
    font-size: 0.65rem;
    font-weight: 600;
    padding: 1px 7px;
    border-radius: 5px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: 'SF Mono', 'Menlo', 'Monaco', monospace;
    letter-spacing: 0.02em;
    user-select: all;
    cursor: text;
}
.att-id-allegro {
    background: rgba(59,130,246,0.08);
    color: #60a5fa;
    border: 1px solid rgba(59,130,246,0.15);
}
.att-id-ovoko {
    background: rgba(249,115,22,0.08);
    color: #fb923c;
    border: 1px solid rgba(249,115,22,0.15);
}
body.light-mode .att-id-allegro {
    background: rgba(59,130,246,0.06);
    color: #2563eb;
    border-color: rgba(59,130,246,0.15);
}
body.light-mode .att-id-ovoko {
    background: rgba(249,115,22,0.06);
    color: #ea580c;
    border-color: rgba(249,115,22,0.15);
}
.att-price-tag {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--text-primary);
}
.att-date-tag {
    font-size: 0.65rem;
    color: var(--text-tertiary);
}

/* Right/Actions */
.att-card-right {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
    align-items: stretch;
}
.att-action-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 7px 14px;
    border-radius: 8px;
    border: 1px solid transparent;
    background: transparent;
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
}
.att-action-btn:hover {
    transform: translateY(-1px);
    filter: brightness(1.15);
}
.att-action-btn:active { transform: translateY(0); }

.att-action-primary {
    background: rgba(59,130,246,0.1);
    color: #60a5fa;
    border-color: rgba(59,130,246,0.2);
}
.att-action-primary:hover {
    background: rgba(59,130,246,0.18);
    border-color: rgba(59,130,246,0.3);
}
body.light-mode .att-action-primary {
    background: rgba(59,130,246,0.08);
    color: #2563eb;
    border-color: rgba(59,130,246,0.15);
}

.att-action-restore {
    background: rgba(34,197,94,0.1);
    color: #4ade80;
    border-color: rgba(34,197,94,0.2);
}
.att-action-restore:hover {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.3);
}
body.light-mode .att-action-restore {
    background: rgba(34,197,94,0.08);
    color: #16a34a;
    border-color: rgba(34,197,94,0.15);
}

.att-action-manual {
    background: rgba(249,115,22,0.1);
    color: #fb923c;
    border-color: rgba(249,115,22,0.2);
}
.att-action-manual:hover {
    background: rgba(249,115,22,0.18);
}
body.light-mode .att-action-manual {
    background: rgba(249,115,22,0.08);
    color: #ea580c;
    border-color: rgba(249,115,22,0.15);
}

.att-action-dismiss {
    background: rgba(255,255,255,0.04);
    color: var(--text-tertiary);
    border-color: rgba(255,255,255,0.08);
}
.att-action-dismiss:hover {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border-color: rgba(255,255,255,0.15);
}
body.light-mode .att-action-dismiss {
    background: rgba(0,0,0,0.03);
    color: var(--text-tertiary);
    border-color: rgba(0,0,0,0.08);
}
body.light-mode .att-action-dismiss:hover {
    background: rgba(0,0,0,0.06);
    color: var(--text-secondary);
    border-color: rgba(0,0,0,0.15);
}

.att-action-remove {
    background: rgba(239,68,68,0.1);
    color: #f87171;
    border-color: rgba(239,68,68,0.2);
}
.att-action-remove:hover {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.3);
}
body.light-mode .att-action-remove {
    background: rgba(239,68,68,0.08);
    color: #dc2626;
    border-color: rgba(239,68,68,0.15);
}

.attention-action-loading {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.78rem;
    color: var(--text-secondary);
    padding: 7px 14px;
}

/* ── Ovoko Added tab ──────────────────────────────────────────────── */
.ovoko-added-count {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    padding: 4px 0 8px;
    font-weight: 500;
}

/* ═══════ Sync Modal — Apple-style ═══════ */
.ovoko-sync-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.45);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.4s cubic-bezier(0.16, 1, 0.3, 1);
    padding: 20px;
}
.ovoko-sync-overlay.visible { opacity: 1; }

.ovoko-sync-modal {
    background: rgba(28,28,30,0.92);
    border: 0.5px solid rgba(255,255,255,0.12);
    border-radius: 22px;
    width: 100%;
    max-width: 440px;
    padding: 28px 28px 24px;
    box-shadow:
        0 0 0 0.5px rgba(255,255,255,0.05),
        0 4px 16px rgba(0,0,0,0.2),
        0 24px 80px rgba(0,0,0,0.45);
    transform: scale(0.88) translateY(20px);
    opacity: 0;
    transition:
        transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1),
        opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    will-change: transform, opacity;
}
.ovoko-sync-overlay.visible .ovoko-sync-modal {
    transform: scale(1) translateY(0);
    opacity: 1;
}

body.light-mode .ovoko-sync-modal {
    background: rgba(255,255,255,0.96);
    border-color: rgba(0,0,0,0.06);
    box-shadow:
        0 0 0 0.5px rgba(0,0,0,0.04),
        0 4px 16px rgba(0,0,0,0.06),
        0 24px 80px rgba(0,0,0,0.12);
}

/* Header */
.ovoko-sync-header {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 22px;
    animation: syncFadeSlideDown 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.15s both;
}
.ovoko-sync-icon {
    font-size: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(0,122,255,0.12);
    animation: syncIconPulse 2.5s ease-in-out infinite;
}
@keyframes syncIconPulse {
    0%, 100% { transform: scale(1); }
    50%      { transform: scale(1.06); }
}
.ovoko-sync-header h3 {
    margin: 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    letter-spacing: -0.4px;
}

/* Body / Steps container */
.ovoko-sync-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Individual step card */
.ovoko-sync-step {
    padding: 12px 14px;
    border-radius: 14px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.05);
    opacity: 0;
    transform: translateY(8px) scale(0.98);
    transition:
        opacity 0.45s cubic-bezier(0.16, 1, 0.3, 1),
        transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1),
        background 0.4s ease,
        border-color 0.4s ease,
        box-shadow 0.4s ease;
    will-change: transform, opacity;
}
/* Stagger entrance */
.ovoko-sync-overlay.visible .ovoko-sync-step:nth-child(1) { animation: syncStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.2s both; }
.ovoko-sync-overlay.visible .ovoko-sync-step:nth-child(2) { animation: syncStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.3s both; }
.ovoko-sync-overlay.visible .ovoko-sync-step:nth-child(3) { animation: syncStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.4s both; }
.ovoko-sync-overlay.visible .ovoko-sync-step:nth-child(4) { animation: syncStepIn 0.5s cubic-bezier(0.16, 1, 0.3, 1) 0.5s both; }

@keyframes syncStepIn {
    from { opacity: 0; transform: translateY(12px) scale(0.96); }
    to   { opacity: 0.4; transform: translateY(0) scale(1); }
}
@keyframes syncFadeSlideDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.ovoko-sync-step.active {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    background: rgba(0,122,255,0.06);
    border-color: rgba(0,122,255,0.2);
    box-shadow: 0 0 0 1px rgba(0,122,255,0.08), 0 4px 20px rgba(0,122,255,0.06);
    animation: syncStepActivePulse 3s ease-in-out infinite !important;
}
@keyframes syncStepActivePulse {
    0%, 100% { box-shadow: 0 0 0 1px rgba(0,122,255,0.08), 0 4px 20px rgba(0,122,255,0.06); }
    50%      { box-shadow: 0 0 0 1px rgba(0,122,255,0.15), 0 4px 24px rgba(0,122,255,0.1); }
}

.ovoko-sync-step.done {
    opacity: 0.75 !important;
    transform: translateY(0) scale(1) !important;
    border-color: rgba(52,199,89,0.25);
    background: rgba(52,199,89,0.04);
    box-shadow: none;
    animation: syncStepDonePop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both !important;
}
@keyframes syncStepDonePop {
    0%   { transform: scale(1); }
    40%  { transform: scale(1.02); }
    100% { transform: scale(1); }
}

.ovoko-sync-step.error {
    opacity: 1 !important;
    transform: translateY(0) scale(1) !important;
    border-color: rgba(239,68,68,0.25);
    background: rgba(239,68,68,0.04);
    box-shadow: none;
    animation: syncStepShake 0.45s cubic-bezier(0.36, 0.07, 0.19, 0.97) both !important;
}
@keyframes syncStepShake {
    10%, 90% { transform: translateX(-1px); }
    20%, 80% { transform: translateX(2px); }
    30%, 50%, 70% { transform: translateX(-3px); }
    40%, 60% { transform: translateX(3px); }
    100% { transform: translateX(0); }
}

body.light-mode .ovoko-sync-step {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.05);
}
body.light-mode .ovoko-sync-step.active {
    background: rgba(0,122,255,0.04);
    border-color: rgba(0,122,255,0.15);
    box-shadow: 0 0 0 1px rgba(0,122,255,0.06), 0 4px 20px rgba(0,122,255,0.04);
}
body.light-mode .ovoko-sync-step.done {
    background: rgba(52,199,89,0.04);
    border-color: rgba(52,199,89,0.15);
}

/* Step header */
.ovoko-sync-step-header {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}
.ovoko-sync-step-icon {
    font-size: 16px;
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.ovoko-sync-step.active .ovoko-sync-step-icon {
    animation: syncSpinnerPulse 1.2s ease-in-out infinite;
}
@keyframes syncSpinnerPulse {
    0%, 100% { transform: scale(1) rotate(0deg); opacity: 1; }
    50%      { transform: scale(1.15) rotate(10deg); opacity: 0.7; }
}
.ovoko-sync-step.done .ovoko-sync-step-icon {
    animation: syncCheckPop 0.45s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes syncCheckPop {
    0%   { transform: scale(0); opacity: 0; }
    50%  { transform: scale(1.3); }
    100% { transform: scale(1); opacity: 1; }
}

.ovoko-sync-step-label {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    letter-spacing: -0.15px;
}
.ovoko-sync-step-detail {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin-left: 24px;
    margin-top: 2px;
    min-height: 16px;
    transition: color 0.3s ease;
}
body.light-mode .ovoko-sync-step-detail {
    color: rgba(0,0,0,0.4);
}

/* Sub-steps (used in attention check step 2) */
.ovoko-sync-sub-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 8px;
    margin-left: 24px;
}
.ovoko-sync-sub-step {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 10.5px;
    color: rgba(255,255,255,0.35);
    transition: all 0.35s cubic-bezier(0.16, 1, 0.3, 1);
    transform: translateX(0);
}
.ovoko-sync-sub-step.done {
    color: rgba(52,199,89,0.75);
    transform: translateX(2px);
}
.ovoko-sync-sub-step.error {
    color: rgba(239,68,68,0.75);
    animation: syncSubShake 0.3s ease both;
}
@keyframes syncSubShake {
    25% { transform: translateX(-2px); }
    75% { transform: translateX(2px); }
    100% { transform: translateX(0); }
}
body.light-mode .ovoko-sync-sub-step { color: rgba(0,0,0,0.3); }
body.light-mode .ovoko-sync-sub-step.done { color: rgba(34,150,60,0.8); }
body.light-mode .ovoko-sync-sub-step.error { color: rgba(200,50,50,0.8); }

/* Progress bar */
.ovoko-sync-progress-bar {
    height: 4px;
    border-radius: 4px;
    background: rgba(255,255,255,0.06);
    margin-top: 10px;
    overflow: hidden;
    position: relative;
}
body.light-mode .ovoko-sync-progress-bar {
    background: rgba(0,0,0,0.05);
}
.ovoko-sync-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 4px;
    background: linear-gradient(90deg, #007aff, #5ac8fa, #007aff);
    background-size: 200% 100%;
    transition: width 0.6s cubic-bezier(0.16, 1, 0.3, 1);
    position: relative;
    animation: syncProgressShimmer 2s linear infinite;
}
@keyframes syncProgressShimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}
.ovoko-sync-step.done .ovoko-sync-progress-fill {
    background: linear-gradient(90deg, #34c759, #30d158);
    background-size: 100% 100%;
    width: 100% !important;
    animation: none;
}
.ovoko-sync-step.error .ovoko-sync-progress-fill {
    background: linear-gradient(90deg, #ef4444, #f87171);
    background-size: 100% 100%;
    animation: none;
}

/* Summary card */
.ovoko-sync-summary {
    margin-top: 18px;
    padding: 16px;
    border-radius: 14px;
    background: rgba(52,199,89,0.05);
    border: 1px solid rgba(52,199,89,0.15);
    display: flex;
    flex-direction: column;
    gap: 7px;
    animation: syncSummaryIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes syncSummaryIn {
    from { opacity: 0; transform: translateY(10px) scale(0.96); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.light-mode .ovoko-sync-summary {
    background: rgba(52,199,89,0.04);
    border-color: rgba(52,199,89,0.12);
}
.ovoko-sync-summary-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    animation: syncRowSlideIn 0.35s cubic-bezier(0.16, 1, 0.3, 1) both;
}
.ovoko-sync-summary-row:nth-child(1) { animation-delay: 0.05s; }
.ovoko-sync-summary-row:nth-child(2) { animation-delay: 0.1s; }
.ovoko-sync-summary-row:nth-child(3) { animation-delay: 0.15s; }
.ovoko-sync-summary-row:nth-child(4) { animation-delay: 0.2s; }
.ovoko-sync-summary-row:nth-child(5) { animation-delay: 0.25s; }
.ovoko-sync-summary-row:nth-child(6) { animation-delay: 0.3s; }
@keyframes syncRowSlideIn {
    from { opacity: 0; transform: translateX(-8px); }
    to   { opacity: 1; transform: translateX(0); }
}
body.light-mode .ovoko-sync-summary-row { color: rgba(0,0,0,0.5); }
.ovoko-sync-summary-row strong {
    color: var(--text-primary, #fff);
    font-weight: 700;
    font-size: 13px;
    font-variant-numeric: tabular-nums;
}

/* Footer / close button */
.ovoko-sync-footer {
    margin-top: 16px;
    display: flex;
    justify-content: center;
    animation: syncFooterIn 0.4s cubic-bezier(0.16, 1, 0.3, 1) 0.1s both;
}
@keyframes syncFooterIn {
    from { opacity: 0; transform: translateY(6px); }
    to   { opacity: 1; transform: translateY(0); }
}
.ovoko-sync-close-btn {
    padding: 9px 32px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
    letter-spacing: -0.1px;
}
.ovoko-sync-close-btn:hover {
    background: rgba(255,255,255,0.1);
    transform: scale(1.03);
}
.ovoko-sync-close-btn:active {
    transform: scale(0.97);
    transition-duration: 0.1s;
}
body.light-mode .ovoko-sync-close-btn {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    color: #333;
}

/* ═══════════════════════════════════════════════════════════════════
   ATTENTION CHECK MODAL — enhanced styles
   ═══════════════════════════════════════════════════════════════════ */

/* Header */
.att-check-header {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}
body.light-mode .att-check-header {
    border-bottom-color: rgba(0,0,0,0.06);
}
.att-check-header h3 {
    font-size: 16px;
    font-weight: 700;
    color: var(--text-primary, #fff);
    margin: 0;
    flex: 1;
    letter-spacing: -0.3px;
}
.att-check-icon {
    font-size: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(0,122,255,0.1);
    flex-shrink: 0;
}
.att-check-icon.att-check-spin {
    animation: attCheckPulse 1.5s ease-in-out infinite;
}
@keyframes attCheckPulse {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.08); opacity: 0.8; }
}
.att-check-badge {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(0,122,255,0.1);
    color: #5ac8fa;
    white-space: nowrap;
}
body.light-mode .att-check-badge {
    background: rgba(0,122,255,0.08);
    color: #007aff;
}

/* Step spinner (replaces emoji for active state) */
.att-step-spinner {
    display: inline-block;
    width: 14px;
    height: 14px;
    border: 2px solid rgba(0,122,255,0.2);
    border-top-color: #007aff;
    border-radius: 50%;
    animation: attSpinnerSpin 0.7s linear infinite;
}
@keyframes attSpinnerSpin {
    to { transform: rotate(360deg); }
}

/* Shimmer progress bar variant */
.att-check-progress {
    height: 5px;
    border-radius: 5px;
    background: rgba(255,255,255,0.04);
    margin-top: 8px;
}
body.light-mode .att-check-progress {
    background: rgba(0,0,0,0.04);
}
.att-check-fill {
    height: 100%;
    border-radius: 5px;
    background: linear-gradient(90deg, #007aff 0%, #5ac8fa 50%, #007aff 100%);
    background-size: 200% 100%;
    animation: attFillShimmer 1.5s linear infinite;
    transition: width 0.3s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 8px rgba(0,122,255,0.3);
}
@keyframes attFillShimmer {
    from { background-position: -200% 0; }
    to   { background-position: 200% 0; }
}
.ovoko-sync-step.done .att-check-fill {
    background: linear-gradient(90deg, #34c759, #30d158);
    background-size: 100% 100%;
    animation: none;
    box-shadow: 0 0 6px rgba(52,199,89,0.25);
}

/* Summary card — enhanced */
.att-check-summary {
    margin-top: 16px;
    padding: 14px 16px;
    border-radius: 12px;
    animation: attSummaryIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
@keyframes attSummaryIn {
    from { opacity: 0; transform: translateY(8px) scale(0.97); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}
.att-check-summary-header {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    margin-bottom: 10px;
}
.att-check-summary-icon {
    font-size: 18px;
}
.att-check-time {
    margin-left: auto;
    font-size: 11px;
    font-weight: 500;
    color: rgba(255,255,255,0.35);
    font-variant-numeric: tabular-nums;
}
body.light-mode .att-check-time {
    color: rgba(0,0,0,0.35);
}
.att-check-summary-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 8px;
}
.att-check-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 8px 6px;
    border-radius: 8px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    animation: attStatPop 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) both;
}
.att-check-stat:nth-child(1) { animation-delay: 0.1s; }
.att-check-stat:nth-child(2) { animation-delay: 0.2s; }
.att-check-stat:nth-child(3) { animation-delay: 0.3s; }
.att-check-stat:nth-child(4) { animation-delay: 0.4s; }
@keyframes attStatPop {
    from { opacity: 0; transform: scale(0.8); }
    to   { opacity: 1; transform: scale(1); }
}
body.light-mode .att-check-stat {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}
.att-stat-num {
    font-size: 20px;
    font-weight: 800;
    color: #ff9f0a;
    font-variant-numeric: tabular-nums;
    line-height: 1;
}
.att-stat-label {
    font-size: 10px;
    color: rgba(255,255,255,0.45);
    text-align: center;
    line-height: 1.2;
}
body.light-mode .att-stat-label {
    color: rgba(0,0,0,0.45);
}

/* Search bar */
.ovoko-added-search-wrap {
    display: flex;
    gap: 8px;
    align-items: stretch;
    margin-bottom: 12px;
}

.ovoko-added-search-field {
    position: relative;
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
}

.ovoko-added-search-input {
    width: 100%;
    padding: 10px 36px 10px 14px;
    border: 1px solid var(--glass-border);
    border-radius: 10px;
    background: var(--glass-bg);
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    color: var(--text-primary);
    font-size: 13px;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    box-sizing: border-box;
}

.ovoko-added-search-btn {
    padding: 0 16px;
    border: 1px solid rgba(var(--primary-rgb), 0.25);
    border-radius: 10px;
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary, #007AFF);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    white-space: nowrap;
    flex-shrink: 0;
}

.ovoko-added-search-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.4);
}

.ovoko-added-search-btn:active {
    transform: scale(0.96);
}

.ovoko-added-search-input::placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}

.ovoko-added-search-input:focus {
    border-color: rgba(var(--primary-rgb), 0.5);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.12);
}

body.light-mode .ovoko-added-search-input {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.1);
}

.ovoko-added-search-clear {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(var(--primary-rgb), 0.15);
    border: none;
    border-radius: 50%;
    width: 22px;
    height: 22px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-secondary);
    font-size: 16px;
    cursor: pointer;
    line-height: 1;
    padding: 0;
    transition: background 0.2s;
}

.ovoko-added-search-clear:hover {
    background: rgba(var(--primary-rgb), 0.3);
    color: var(--text-primary);
}

/* Pagination */
.ovoko-added-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    padding: 14px 0 4px;
}

.ovoko-added-page-btn {
    min-width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--glass-border);
    border-radius: 8px;
    background: var(--glass-bg);
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 0 8px;
}

.ovoko-added-page-btn:hover:not(:disabled):not(.active) {
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.3);
    color: var(--text-primary);
}

.ovoko-added-page-btn.active {
    background: rgba(var(--primary-rgb), 0.4);
    border-color: rgba(var(--primary-rgb), 0.5);
    color: white;
    box-shadow: 0 0 8px var(--primary-glow);
}

.ovoko-added-page-btn:disabled {
    opacity: 0.3;
    cursor: default;
}

.ovoko-added-page-dots {
    padding: 0 4px;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* ── Attention tab mobile ─────────────────────────────────────────── */
@media (max-width: 600px) {
    .att-card {
        flex-wrap: wrap;
        padding: 12px;
        gap: 10px;
    }
    .att-card-right {
        width: 100%;
        flex-direction: row;
        margin-top: 2px;
    }
    .att-action-btn {
        flex: 1;
        justify-content: center;
        padding: 8px 10px;
        font-size: 0.7rem;
    }
    .att-card-title { font-size: 0.78rem; }
    .att-thumb, .att-thumb-empty { width: 44px; height: 44px; }
    .att-card-ids { gap: 5px; }
    .att-id { font-size: 0.6rem; padding: 1px 5px; }
}

/* ── Description Photo Picker Modal ──────────────────────────────── */

.desc-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 10100;
    background: rgba(0,0,0,0.5);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
    pointer-events: none;
}

.desc-picker-overlay.active {
    opacity: 1;
    pointer-events: auto;
}

.desc-picker-modal {
    background: var(--bg-primary, #1c1c1e);
    border-radius: 16px;
    width: 90%;
    max-width: 520px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 20px 60px rgba(0,0,0,0.4);
    border: 1px solid rgba(255,255,255,0.08);
    transform: scale(0.95) translateY(10px);
    transition: transform 0.2s;
    overflow: hidden;
}

.desc-picker-overlay.active .desc-picker-modal {
    transform: scale(1) translateY(0);
}

.desc-picker-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.desc-picker-close {
    width: 28px;
    height: 28px;
    border: none;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary, #aaa);
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.desc-picker-close:hover {
    background: rgba(255,255,255,0.15);
}

.desc-picker-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 8px;
    padding: 16px;
    overflow-y: auto;
    max-height: 60vh;
}

.desc-picker-photo {
    aspect-ratio: 1;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    border: 2px solid transparent;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.desc-picker-photo:hover {
    border-color: var(--ios-blue, #007AFF);
    transform: scale(1.04);
    box-shadow: 0 4px 12px rgba(0,122,255,0.25);
}

.desc-picker-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Light mode */
body.light-mode .desc-picker-modal,
[data-theme="light"] .desc-picker-modal {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
}

body.light-mode .desc-picker-header,
[data-theme="light"] .desc-picker-header {
    border-bottom-color: rgba(0,0,0,0.06);
}

body.light-mode .desc-picker-close,
[data-theme="light"] .desc-picker-close {
    background: rgba(0,0,0,0.06);
    color: #666;
}

/* ═══════════════════════════════════════════════════════════════════
   OFFER WIZARD — Specific styles
   ═══════════════════════════════════════════════════════════════════ */

/* Wizard launch tiles — auto-fit grid (centers single tile after Allegro/Ovoko split) */
.inv-launch-tiles {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 260px));
    justify-content: center;
    gap: 14px;
    padding: 24px 16px;
    max-width: 520px;
    margin: 0 auto;
}

.inv-launch-tile {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 28px 18px 22px;
    border-radius: 18px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    cursor: pointer;
    transition: all 0.28s cubic-bezier(0.25, 0.1, 0.25, 1);
    overflow: hidden;
}

.inv-launch-tile::before {
    content: '';
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity 0.28s ease;
    border-radius: 18px;
    pointer-events: none;
}

.inv-launch-tile:hover {
    transform: translateY(-3px);
}

.inv-launch-tile:hover::before {
    opacity: 1;
}

.inv-launch-tile:active {
    transform: translateY(0) scale(0.98);
}

/* Allegro tile */
.inv-tile-allegro {
    background: linear-gradient(160deg, rgba(var(--ios-blue-rgb), 0.07), rgba(88, 86, 214, 0.04));
    border-color: rgba(var(--ios-blue-rgb), 0.15);
}
.inv-tile-allegro::before {
    background: linear-gradient(160deg, rgba(var(--ios-blue-rgb), 0.12), rgba(88, 86, 214, 0.08));
}
.inv-tile-allegro:hover {
    border-color: rgba(var(--ios-blue-rgb), 0.3);
    box-shadow: 0 8px 24px rgba(var(--ios-blue-rgb), 0.15);
}
.inv-tile-allegro .inv-tile-icon {
    background: linear-gradient(135deg, var(--ios-blue, #007AFF) 0%, #5856D6 100%);
    box-shadow: 0 4px 16px rgba(var(--ios-blue-rgb), 0.3);
}
.inv-tile-allegro .inv-tile-arrow {
    color: var(--ios-blue, #007AFF);
}

/* Ovoko tile */
.inv-tile-ovoko {
    background: linear-gradient(160deg, rgba(234, 88, 12, 0.07), rgba(249, 115, 22, 0.03));
    border-color: rgba(234, 88, 12, 0.15);
}
.inv-tile-ovoko::before {
    background: linear-gradient(160deg, rgba(234, 88, 12, 0.12), rgba(249, 115, 22, 0.08));
}
.inv-tile-ovoko:hover {
    border-color: rgba(234, 88, 12, 0.3);
    box-shadow: 0 8px 24px rgba(234, 88, 12, 0.15);
}
.inv-tile-ovoko .inv-tile-icon {
    background: linear-gradient(135deg, #ea580c 0%, #f59e0b 100%);
    box-shadow: 0 4px 16px rgba(234, 88, 12, 0.3);
}
.inv-tile-ovoko .inv-tile-arrow {
    color: #fb923c;
}

.inv-tile-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    margin-bottom: 14px;
    flex-shrink: 0;
}

.inv-tile-title {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 4px;
    line-height: 1.2;
}

.inv-tile-desc {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin: 0 0 12px;
    line-height: 1.35;
}

.inv-tile-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    transition: all 0.25s ease;
}

.inv-launch-tile:hover .inv-tile-arrow {
    transform: translateX(3px);
    background: rgba(255, 255, 255, 0.1);
}

@media (max-width: 400px) {
    .inv-launch-tiles {
        grid-template-columns: minmax(0, 1fr);
        padding: 16px 12px;
    }
}

/* Light mode overrides */
body.light-mode .inv-tile-allegro {
    background: linear-gradient(160deg, rgba(var(--ios-blue-rgb), 0.05), rgba(88, 86, 214, 0.03));
}
body.light-mode .inv-tile-ovoko {
    background: linear-gradient(160deg, rgba(234, 88, 12, 0.05), rgba(249, 115, 22, 0.02));
}
body.light-mode .inv-tile-arrow {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.08);
}

/* ═══════════════════════════════════════════════════════════════════
   OFFER WIZARD — Apple-style Comprehensive Layout
   ═══════════════════════════════════════════════════════════════════ */

/* Main modal — fixed viewport constraints */
.offer-wizard-overlay .sale-wizard-modal {
    max-width: 720px;
    width: 96%;
    height: 85vh;
    max-height: 800px;
    min-height: 500px;
    display: flex;
    flex-direction: column;
    overflow: visible;
    transition: none !important;
    will-change: auto;
}

/* Step 3 (title/category), Step 4 (params), Step 7 (price/shipping), Step 8 (publish) — auto-fit to content */
.offer-wizard-overlay .sale-wizard-modal:has(.wizard-slide[data-step="3"].active),
.offer-wizard-overlay .sale-wizard-modal:has(.wizard-slide[data-step="4"].active),
.offer-wizard-overlay .sale-wizard-modal:has(.wizard-slide[data-step="7"].active),
.offer-wizard-overlay .sale-wizard-modal:has(.wizard-slide[data-step="8"].active) {
    height: auto;
    max-height: 90vh;
    min-height: auto;
}

/* Success prompt — auto-fit to content */
.offer-wizard-overlay .sale-wizard-modal:has(.success-prompt) {
    height: auto;
    max-height: 90vh;
    min-height: auto;
}

/* Step 6 (description) — larger modal */
.offer-wizard-overlay .sale-wizard-modal:has(.wizard-slide[data-step="6"].active) {
    height: 90vh;
    max-height: 900px;
}

/* Wizard slides container — fills available space */
.offer-wizard-overlay .wizard-slides {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Each slide — flex layout with internal scroll */
.offer-wizard-overlay .wizard-slide {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    transition: none !important;
    transform: none !important;
}

.offer-wizard-overlay .wizard-slide.active {
    position: relative;
}

/* Step content — uniform padding, scrollable content */
.offer-wizard-overlay .sale-wizard-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    gap: 14px;
    padding: 12px 28px 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.offer-wizard-overlay .sale-wizard-step::-webkit-scrollbar {
    width: 5px;
}

.offer-wizard-overlay .sale-wizard-step::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.08);
    border-radius: 3px;
}

body.light-mode .offer-wizard-overlay .sale-wizard-step::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.06);
}

/* Labels — left-aligned, Apple typography */
.offer-wizard-overlay .sale-wizard-step .car-form-field label,
.offer-wizard-overlay .car-form-field label {
    text-align: left;
    font-size: 0.82rem;
    font-weight: 500;
    color: var(--text-secondary);
    letter-spacing: -0.01em;
}

/* ── STEP 1: Search/Import — flex layout with fixed height ── */
.offer-wizard-overlay .wizard-slide[data-step="1"] .sale-wizard-step {
    overflow: hidden; /* Results container handles scroll */
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── STEP 2: Car Assignment — constrained list ── */
.offer-wizard-overlay .wiz-car-assign-step {
    flex: 1;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.offer-wizard-overlay .wiz-car-list {
    flex: 1;
    min-height: 120px;
    max-height: 45vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.offer-wizard-overlay .wiz-car-list::-webkit-scrollbar {
    width: 5px;
}

.offer-wizard-overlay .wiz-car-list::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

body.light-mode .offer-wizard-overlay .wiz-car-list::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
}

/* ── STEP 3: Title & Category — tree constrained ── */
.offer-wizard-overlay .inv-category-tree {
    max-height: 42vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-right: 4px;
}

.offer-wizard-overlay .inv-category-tree::-webkit-scrollbar {
    width: 5px;
}

.offer-wizard-overlay .inv-category-tree::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

body.light-mode .offer-wizard-overlay .inv-category-tree::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.08);
}

/* ── STEP 4: Parameters — scrollable container ── */
.offer-wizard-overlay .wizard-params-step {
    overflow: visible;
}

.offer-wizard-overlay .wizard-params-step .inv-params-container {
    max-height: 52vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding-right: 4px;
}

.offer-wizard-overlay .wizard-params-step .inv-params-container::-webkit-scrollbar {
    width: 5px;
}

.offer-wizard-overlay .wizard-params-step .inv-params-container::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* ── STEP 5: Photos — grid constrained ── */
.offer-wizard-overlay .wizard-slide[data-step="5"] .sale-wizard-step {
    justify-content: flex-start;
    padding-top: 4px;
}

.offer-wizard-overlay .wiz-photo-step {
    flex: 1;
    min-height: 0;
}

.offer-wizard-overlay .inv-photos-grid {
    max-height: 48vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.offer-wizard-overlay .inv-photos-grid::-webkit-scrollbar {
    width: 5px;
}

.offer-wizard-overlay .inv-photos-grid::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

/* ── STEP 6: Description — editor constrained ── */
.offer-wizard-overlay .wizard-desc-step {
    flex: 1;
    min-height: 0;
    overflow: visible;
}

.offer-wizard-overlay .desc-editor {
    flex: 1;
    min-height: 0;
    max-height: 60vh;
    display: flex;
    flex-direction: column;
}

.offer-wizard-overlay .desc-editor-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.offer-wizard-overlay .desc-preview-body {
    flex: 1;
    min-height: 0;
    max-height: 55vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    border-radius: 10px;
}

.offer-wizard-overlay .desc-editor-body::-webkit-scrollbar {
    width: 5px;
}

.offer-wizard-overlay .desc-editor-body::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 3px;
}

.offer-wizard-overlay .desc-preview-body::-webkit-scrollbar {
    width: 5px;
}

.offer-wizard-overlay .desc-preview-body::-webkit-scrollbar-thumb {
    background: rgba(0, 0, 0, 0.15);
    border-radius: 3px;
}

/* ── STEP 7: Price/Shipping — normal scroll ── */
.offer-wizard-overlay .wizard-slide[data-step="7"] .sale-wizard-step {
    overflow-y: auto;
}

/* ── STEP 8: Publish — no scroll needed ── */
.offer-wizard-overlay .wizard-slide[data-step="8"] .sale-wizard-step {
    overflow: visible;
    justify-content: flex-start;
}

/* Wizard step hint text */
.wizard-step-hint {
    font-size: 0.82rem;
    color: var(--text-secondary);
    margin: 0 0 8px;
    line-height: 1.4;
}

/* Params loading indicator */
.params-loading-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 28px;
    padding: 60px 20px;
    min-height: 300px;
    flex: 1;
    width: 100%;
    box-sizing: border-box;
}

/* Wizard aurora loader — lightweight, composited, app-matched */
.wizard-flow-loader {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
    color: rgba(245, 247, 250, 0.82);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 13px;
    font-weight: 650;
    letter-spacing: 0;
}

.wizard-flow-loader--small {
    transform: translateZ(0) scale(0.92);
}

.wizard-flow-orbit {
    position: relative;
    width: 96px;
    height: 5px;
    overflow: hidden;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.075);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 0 24px rgba(10, 132, 255, 0.12);
    contain: layout paint style;
}

.wizard-flow-orbit::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(94, 176, 255, 0.2), rgba(191, 90, 242, 0.18), transparent);
    opacity: 0.75;
}

.wizard-flow-orbit span {
    position: absolute;
    inset: 0 auto 0 -46%;
    width: 46%;
    border-radius: inherit;
    background: linear-gradient(90deg, #5eb0ff, #0a84ff 42%, #8e5cff 72%, #bf5af2);
    box-shadow: 0 0 18px rgba(10, 132, 255, 0.36), 0 0 28px rgba(191, 90, 242, 0.22);
    animation: wizardAuroraSweep 1.05s cubic-bezier(0.45, 0, 0.2, 1) infinite;
    will-change: transform;
}

.wizard-flow-orbit--inline {
    width: 58px;
    height: 4px;
}

.wizard-flow-text,
.wizard-inline-loader span {
    color: rgba(245, 247, 250, 0.72);
}

.wizard-inline-loader {
    gap: 10px;
}

@keyframes wizardAuroraSweep {
    0%   { transform: translate3d(0, 0, 0); opacity: 0.25; }
    12%  { opacity: 1; }
    78%  { opacity: 1; }
    100% { transform: translate3d(318%, 0, 0); opacity: 0.25; }
}

body.light-mode .wizard-flow-loader {
    color: rgba(28, 28, 30, 0.76);
}

body.light-mode .wizard-flow-orbit {
    background: rgba(18, 24, 38, 0.08);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.55), 0 0 18px rgba(10, 132, 255, 0.12);
}

body.light-mode .wizard-flow-text,
body.light-mode .wizard-inline-loader span {
    color: rgba(28, 28, 30, 0.66);
}

@media (prefers-reduced-motion: reduce) {
    .wizard-flow-orbit span {
        animation: none;
        transform: translate3d(120%, 0, 0);
    }
}

/* Google Gemini-style loader */
.gemini-loader {
    position: relative;
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gemini-center {
    position: absolute;
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    box-shadow: 0 0 20px rgba(168,85,247,0.8), 0 0 40px rgba(236,72,153,0.4);
    z-index: 10;
}

.gemini-particle {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    box-shadow: 0 0 16px currentColor;
    animation: geminiOrbit 3s linear infinite;
}

/* Particle 1 - Różowy - orbita 45px */
.gemini-particle-1 {
    width: 12px;
    height: 12px;
    color: #ec4899;
    box-shadow: 0 0 20px rgba(236,72,153,0.9), 0 0 40px rgba(236,72,153,0.5);
    animation: geminiOrbit1 2.8s linear infinite;
}

/* Particle 2 - Niebieski - orbita 55px */
.gemini-particle-2 {
    width: 10px;
    height: 10px;
    color: #06b6d4;
    box-shadow: 0 0 18px rgba(6,182,212,0.8), 0 0 36px rgba(6,182,212,0.4);
    animation: geminiOrbit2 3.4s linear infinite;
}

/* Particle 3 - Zielony - orbita 48px */
.gemini-particle-3 {
    width: 11px;
    height: 11px;
    color: #22c55e;
    box-shadow: 0 0 19px rgba(34,197,94,0.8), 0 0 38px rgba(34,197,94,0.4);
    animation: geminiOrbit3 3.1s linear infinite;
}

/* Particle 4 - Żółty - orbita 52px */
.gemini-particle-4 {
    width: 10px;
    height: 10px;
    color: #eab308;
    box-shadow: 0 0 18px rgba(234,179,8,0.8), 0 0 36px rgba(234,179,8,0.4);
    animation: geminiOrbit4 3.5s linear infinite;
}

@keyframes geminiOrbit1 {
    0% { 
        transform: rotate(0deg) translateX(45px) scale(1);
        opacity: 1;
    }
    100% { 
        transform: rotate(360deg) translateX(45px) scale(1);
        opacity: 1;
    }
}

@keyframes geminiOrbit2 {
    0% { 
        transform: rotate(90deg) translateX(55px) scale(0.9);
        opacity: 0.9;
    }
    100% { 
        transform: rotate(450deg) translateX(55px) scale(0.9);
        opacity: 0.9;
    }
}

@keyframes geminiOrbit3 {
    0% { 
        transform: rotate(180deg) translateX(48px) scale(0.95);
        opacity: 0.95;
    }
    100% { 
        transform: rotate(540deg) translateX(48px) scale(0.95);
        opacity: 0.95;
    }
}

@keyframes geminiOrbit4 {
    0% { 
        transform: rotate(270deg) translateX(52px) scale(0.88);
        opacity: 0.88;
    }
    100% { 
        transform: rotate(630deg) translateX(52px) scale(0.88);
        opacity: 0.88;
    }
}

/* ═══ AI STARS LOADER — 3 gwiazdki z gradientami ═══ */
.ai-stars-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 32px;
}

.ai-star {
    filter: drop-shadow(0 0 6px currentColor);
}

.ai-star-1 {
    animation: aiPulse1 1.4s ease-in-out infinite;
    color: #818cf8;
}

.ai-star-2 {
    animation: aiPulse2 1.6s ease-in-out infinite;
    color: #a855f7;
}

.ai-star-3 {
    animation: aiPulse3 1.2s ease-in-out infinite;
    color: #c084fc;
}

@keyframes aiPulse1 {
    0%, 100% { 
        transform: scale(0.85) rotate(-10deg);
        opacity: 0.6;
    }
    50% { 
        transform: scale(1.15) rotate(10deg);
        opacity: 1;
    }
}

@keyframes aiPulse2 {
    0%, 100% { 
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
    }
    50% { 
        transform: scale(1.2) rotate(0deg);
        opacity: 1;
    }
}

@keyframes aiPulse3 {
    0%, 100% { 
        transform: scale(0.9) rotate(15deg);
        opacity: 0.5;
    }
    50% { 
        transform: scale(1.1) rotate(-5deg);
        opacity: 1;
    }
}

.ai-inline-loader {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

/* Reduced motion support for AI loader */
@media (prefers-reduced-motion: reduce) {
    .ai-star-1,
    .ai-star-2,
    .ai-star-3 {
        animation: none;
        opacity: 0.8;
        transform: none;
    }
    
    .ai-stars-loader {
        /* Simple opacity pulse instead of rotation/scale */
        animation: aiPulseSimple 2s ease-in-out infinite;
    }
}

@keyframes aiPulseSimple {
    0%, 100% { opacity: 0.6; }
    50% { opacity: 1; }
}

.params-loading-container .loader-text {
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, sans-serif;
    font-size: 16px;
    font-weight: 500;
    color: var(--text-secondary);
    opacity: 0.75;
    letter-spacing: -0.01em;
}

/* Params step — make params scrollable */
.wizard-params-step .inv-params-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.wizard-params-step .inv-param-group {
    margin-bottom: 0;
}

/* Title preview in description step */
.wiz-title-preview {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
    padding: 10px 14px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
    border-radius: 10px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.1);
    position: relative;
    transition: all 0.2s ease;
}

.wiz-title-preview:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.1);
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.2);
}

.wiz-title-label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-tertiary, #8e8e93);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
    flex-shrink: 0;
}

.wiz-title-display {
    flex: 1;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    cursor: pointer;
    padding: 4px 8px;
    border-radius: 6px;
    transition: background 0.15s ease;
    word-break: break-word;
    line-height: 1.3;
}

.wiz-title-display:hover {
    background: rgba(255, 255, 255, 0.1);
}

.wiz-title-display::after {
    content: '✎';
    margin-left: 8px;
    font-size: 12px;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.wiz-title-preview:hover .wiz-title-display::after {
    opacity: 0.5;
}

.wiz-title-empty {
    color: var(--text-tertiary, #8e8e93);
    font-style: italic;
    font-weight: 400;
}

.wiz-title-edit {
    display: none;
    flex: 1;
    padding: 6px 10px;
    font-size: 12px !important;
    font-weight: 500;
    color: var(--text-primary, #fff);
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid var(--ios-blue, #007AFF);
    border-radius: 8px;
    outline: none;
}

.wiz-title-counter {
    font-size: 11px;
    color: var(--text-tertiary, #8e8e93);
    white-space: nowrap;
    flex-shrink: 0;
}

.wiz-title-preview.editing .wiz-title-display {
    display: none;
}

.wiz-title-preview.editing .wiz-title-edit {
    display: block;
}

body.light-mode .wiz-title-preview {
    background: rgba(var(--ios-blue-rgb), 0.04);
    border-color: rgba(var(--ios-blue-rgb), 0.08);
}

body.light-mode .wiz-title-preview:hover {
    background: rgba(var(--ios-blue-rgb), 0.08);
}

body.light-mode .wiz-title-display {
    color: var(--text-primary, #1c1c1e);
}

body.light-mode .wiz-title-display:hover {
    background: rgba(0, 0, 0, 0.05);
}

body.light-mode .wiz-title-edit {
    color: var(--text-primary, #1c1c1e);
    background: #fff;
}

/* Description step — compact editor in wizard */
.wizard-desc-step .desc-editor {
    width: 100%;
    overflow: visible;
}

.wizard-desc-step .desc-blocks {
    max-height: none;
    overflow-y: visible;
}

/* Description step — modern work surface */
.offer-wizard-overlay .wizard-desc-step .wiz-title-preview {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    margin-bottom: 12px;
    padding: 11px 12px;
    background: rgba(255, 255, 255, 0.055);
    border: 1px solid rgba(255, 255, 255, 0.09);
    border-radius: 14px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 24px rgba(0, 0, 0, 0.18);
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-preview:hover {
    background: rgba(255, 255, 255, 0.075);
    border-color: rgba(255, 255, 255, 0.13);
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-meta,
.offer-wizard-overlay .wizard-desc-step .wiz-title-row {
    display: flex;
    align-items: center;
    min-width: 0;
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-meta {
    justify-content: space-between;
    gap: 12px;
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-row {
    gap: 8px;
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-label {
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0;
    color: rgba(245, 247, 250, 0.58);
    text-transform: uppercase;
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-display {
    flex: 1;
    min-width: 0;
    padding: 2px 0;
    font-size: 14px;
    font-weight: 650;
    line-height: 1.35;
    color: rgba(255, 255, 255, 0.94);
    background: transparent;
    border-radius: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: normal;
    cursor: text;
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-display:hover {
    background: transparent;
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-display::after {
    content: none;
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-counter {
    padding: 2px 7px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.065);
    color: rgba(245, 247, 250, 0.62);
    font-size: 10px;
    font-weight: 650;
}

.offer-wizard-overlay .wizard-desc-step .wiz-title-edit {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(10, 132, 255, 0.45);
    border-radius: 10px;
    color: rgba(255, 255, 255, 0.96);
    font-size: 13px !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}

.offer-wizard-overlay .wizard-desc-step .desc-editor {
    overflow: hidden;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.085);
    border-radius: 16px;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.055), 0 18px 38px rgba(0, 0, 0, 0.2);
}

.offer-wizard-overlay .wizard-desc-step .desc-editor-header {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.045);
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.offer-wizard-overlay .wizard-desc-step .desc-editor-tabs {
    background: rgba(255, 255, 255, 0.055);
    border-radius: 10px;
    padding: 3px;
}

.offer-wizard-overlay .wizard-desc-step .desc-editor-tab {
    height: 28px;
    padding: 0 10px;
    border-radius: 8px;
    color: rgba(245, 247, 250, 0.62);
    font-size: 11px;
}

.offer-wizard-overlay .wizard-desc-step .desc-editor-tab:hover {
    color: rgba(255, 255, 255, 0.9);
}

.offer-wizard-overlay .wizard-desc-step .desc-editor-tab.active {
    background: rgba(255, 255, 255, 0.14);
    color: #fff;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
}

.offer-wizard-overlay .wizard-desc-step .desc-section-count {
    background: rgba(255, 255, 255, 0.06);
    color: rgba(245, 247, 250, 0.56);
}

.offer-wizard-overlay .wizard-desc-step .desc-editor-body {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.025), rgba(255, 255, 255, 0.015));
}

.offer-wizard-overlay .wizard-desc-step .desc-add-toolbar {
    padding: 8px 10px;
    background: rgba(255, 255, 255, 0.025);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.offer-wizard-overlay .wizard-desc-step .desc-add-toolbar-label {
    color: rgba(245, 247, 250, 0.52);
}

.offer-wizard-overlay .wizard-desc-step .desc-add-btn {
    height: 30px;
    border-color: rgba(255, 255, 255, 0.075);
    background: rgba(255, 255, 255, 0.055);
    color: rgba(245, 247, 250, 0.72);
    border-radius: 9px;
}

.offer-wizard-overlay .wizard-desc-step .desc-add-btn:hover {
    background: rgba(10, 132, 255, 0.13);
    border-color: rgba(10, 132, 255, 0.28);
    color: #fff;
}

.offer-wizard-overlay .wizard-desc-step .desc-blocks {
    padding: 10px;
}

.offer-wizard-overlay .wizard-desc-step .desc-blocks:empty::before {
    min-height: 110px;
    color: rgba(245, 247, 250, 0.48);
}

.offer-wizard-overlay .wizard-desc-step .desc-block {
    overflow: hidden;
    margin-bottom: 10px;
    border: 1px solid rgba(255, 255, 255, 0.075);
    border-radius: 14px;
    background: rgba(255, 255, 255, 0.04);
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.14);
}

.offer-wizard-overlay .wizard-desc-step .desc-block:last-child {
    margin-bottom: 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.075);
}

.offer-wizard-overlay .wizard-desc-step .desc-block-header,
.offer-wizard-overlay .wizard-desc-step .desc-block-toolbar {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.06);
}

.offer-wizard-overlay .wizard-desc-step .desc-block-type-btn,
.offer-wizard-overlay .wizard-desc-step .desc-block-action,
.offer-wizard-overlay .wizard-desc-step .desc-toolbar-btn {
    color: rgba(245, 247, 250, 0.58);
}

.offer-wizard-overlay .wizard-desc-step .desc-block-type-btn:hover,
.offer-wizard-overlay .wizard-desc-step .desc-block-action:hover,
.offer-wizard-overlay .wizard-desc-step .desc-toolbar-btn:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
}

.offer-wizard-overlay .wizard-desc-step .desc-block-type-btn.active,
.offer-wizard-overlay .wizard-desc-step .desc-toolbar-btn.active {
    background: rgba(10, 132, 255, 0.16);
    color: #5eb0ff;
}

.offer-wizard-overlay .wizard-desc-step .desc-block-text {
    min-height: 112px;
    background: rgba(255, 255, 255, 0.055);
    color: rgba(248, 250, 252, 0.94);
    caret-color: #5eb0ff;
    font-size: 14px;
    line-height: 1.7;
}

.offer-wizard-overlay .wizard-desc-step .desc-block-text:focus {
    background: rgba(255, 255, 255, 0.075);
}

.offer-wizard-overlay .wizard-desc-step .desc-block-text h1,
.offer-wizard-overlay .wizard-desc-step .desc-block-text h2,
.offer-wizard-overlay .wizard-desc-step .desc-block-text b,
.offer-wizard-overlay .wizard-desc-step .desc-block-text strong {
    color: rgba(255, 255, 255, 0.96);
}

.offer-wizard-overlay .wizard-desc-step .desc-block-text:empty::before {
    color: rgba(245, 247, 250, 0.38);
}

.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value:not(.spec-ai-active):not(.spec-ai-instant),
.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value:not(.spec-ai-active):not(.spec-ai-instant) b,
.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value:not(.spec-ai-active):not(.spec-ai-instant) strong {
    background: none;
    color: rgba(255, 255, 255, 0.96) !important;
    -webkit-text-fill-color: rgba(255, 255, 255, 0.96);
    text-shadow: none;
    filter: none;
}

.offer-wizard-overlay .wizard-desc-step .desc-toolbar-select {
    background-color: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.09);
    color: rgba(245, 247, 250, 0.76);
}

.offer-wizard-overlay .wizard-desc-step .desc-toolbar-sep {
    background: rgba(255, 255, 255, 0.08);
}

.offer-wizard-overlay .wizard-desc-step .desc-block-img-drop {
    background: rgba(255, 255, 255, 0.035);
    border-color: rgba(255, 255, 255, 0.09);
    color: rgba(245, 247, 250, 0.58);
}

.offer-wizard-overlay .wizard-desc-step .desc-preview-body {
    background: #fff;
    color: #1a1a1a;
}

.offer-wizard-overlay .wizard-desc-step .desc-preview-body h1,
.offer-wizard-overlay .wizard-desc-step .desc-preview-body h2,
.offer-wizard-overlay .wizard-desc-step .desc-preview-body b,
.offer-wizard-overlay .wizard-desc-step .desc-preview-body strong {
    color: #1a1a1a;
}

body.light-mode .offer-wizard-overlay .wizard-desc-step .wiz-title-preview,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-editor {
    background: rgba(18, 24, 38, 0.045);
    border-color: rgba(18, 24, 38, 0.08);
    box-shadow: 0 10px 26px rgba(18, 24, 38, 0.08);
}

body.light-mode .offer-wizard-overlay .wizard-desc-step .wiz-title-label,
body.light-mode .offer-wizard-overlay .wizard-desc-step .wiz-title-counter,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-section-count,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-add-toolbar-label {
    color: rgba(60, 60, 67, 0.62);
}

body.light-mode .offer-wizard-overlay .wizard-desc-step .wiz-title-display,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block-text,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block-text h1,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block-text h2,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block-text b,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block-text strong {
    color: rgba(28, 28, 30, 0.94);
}

body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block-text {
    background: rgba(18, 24, 38, 0.045);
    caret-color: #006fff;
}

body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-editor-header,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-add-toolbar,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block-header,
body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block-toolbar {
    background: rgba(18, 24, 38, 0.032);
}

body.light-mode .offer-wizard-overlay .wizard-desc-step .desc-block {
    background: rgba(18, 24, 38, 0.032);
    border-color: rgba(18, 24, 38, 0.08);
}

@media (max-width: 560px) {
    .offer-wizard-overlay .wizard-desc-step .wiz-title-preview {
        padding: 10px;
    }

    .offer-wizard-overlay .wizard-desc-step .desc-blocks {
        padding: 8px;
    }

    .offer-wizard-overlay .wizard-desc-step .desc-add-toolbar {
        flex-wrap: wrap;
    }
}

/* Photo grid inside wizard */
.offer-wizard-overlay .inv-photos-grid {
    gap: 10px;
}

/* ── Fullscreen photo preview ── */
.inv-photo-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 100000;
    background: rgba(0,0,0,0.88);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: zoom-out;
    animation: fadeIn 0.2s ease;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

.inv-photo-fullscreen img {
    max-width: 92vw;
    max-height: 92vh;
    object-fit: contain;
    border-radius: 8px;
    box-shadow: 0 20px 60px rgba(0,0,0,0.6);
    animation: scaleIn 0.2s ease;
}

.inv-photo-fullscreen-close {
    position: absolute;
    top: 16px;
    right: 16px;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.15);
    color: #fff;
    font-size: 20px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s;
}

.inv-photo-fullscreen-close:hover {
    background: rgba(255,255,255,0.3);
}

@keyframes scaleIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}

@keyframes fadeInScale {
    from {
        opacity: 0;
        transform: scale(0.92);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}

/* ── Drag & Drop zone for photos from OS ──────────────────────────── */
.wiz-photo-step {
    position: relative;
}

.wiz-photo-dropzone {
    display: none;
    position: absolute;
    inset: 0;
    z-index: 20;
    border-radius: 16px;
    background: rgba(var(--ios-blue-rgb), 0.06);
    border: 3px dashed rgba(var(--ios-blue-rgb), 0.45);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    pointer-events: none;
    transition: opacity 0.2s;
}

.wiz-photo-dropzone.active {
    display: flex;
    align-items: center;
    justify-content: center;
    pointer-events: auto;
    animation: wizDropzonePulse 1.5s ease-in-out infinite;
}

.wiz-photo-dropzone-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    color: var(--ios-blue, #007AFF);
    pointer-events: none;
}

.wiz-photo-dropzone-inner svg {
    opacity: 0.7;
    stroke: var(--ios-blue, #007AFF);
    animation: wizDropBounce 1s ease-in-out infinite;
}

.wiz-photo-dropzone-inner span {
    font-size: 15px;
    font-weight: 700;
    letter-spacing: 0.3px;
}

@keyframes wizDropzonePulse {
    0%, 100% { border-color: rgba(var(--ios-blue-rgb), 0.45); background: rgba(var(--ios-blue-rgb), 0.06); }
    50% { border-color: rgba(var(--ios-blue-rgb), 0.7); background: rgba(var(--ios-blue-rgb), 0.1); }
}

@keyframes wizDropBounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-6px); }
}

/* Import results inside wizard — flex-fill remaining space, scroll internally */
.offer-wizard-overlay .inv-import-results {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
}

.offer-wizard-overlay .inv-import-results::-webkit-scrollbar {
    width: 4px;
}

.offer-wizard-overlay .inv-import-results::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 2px;
}

/* Fix text inputs in wizard to have normal size (NOT the large centered style) */
.offer-wizard-overlay .sale-wizard-step .car-form-field input[type="text"],
.offer-wizard-overlay .sale-wizard-step .car-form-field input[type="search"] {
    padding: 10px 14px;
    font-size: 0.85rem;
    font-weight: 400;
    text-align: left;
    letter-spacing: normal;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
}

body.light-mode .offer-wizard-overlay .sale-wizard-step .car-form-field input[type="text"],
body.light-mode .offer-wizard-overlay .sale-wizard-step .car-form-field input[type="search"] {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
}

/* Selects in wizard */
.offer-wizard-overlay .sale-wizard-step .car-form-field select {
    padding: 12px 14px;
    font-size: 0.95rem;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    width: 100%;
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    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='%23999' 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: 36px;
}

body.light-mode .offer-wizard-overlay .sale-wizard-step .car-form-field select {
    background-color: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
}

/* Char counter in wizard */
.offer-wizard-overlay .inv-char-counter {
    text-align: right;
    font-size: 0.75rem;
    color: var(--text-secondary);
    margin-top: 4px;
}

/* Title too long validation */
.wiz-title-too-long {
    border-color: #ff3b30 !important;
    box-shadow: 0 0 0 2px rgba(255, 59, 48, 0.25) !important;
    background: rgba(255, 59, 48, 0.06) !important;
}
.wiz-title-error {
    font-size: 11px;
    font-weight: 600;
    color: #ff3b30;
    margin-top: 4px;
    animation: wizTitleErrorIn 0.3s ease;
}
@keyframes wizTitleErrorIn {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Category display in wizard */
.offer-wizard-overlay .inv-selected-category {
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 0.85rem;
    color: var(--text-secondary);
    min-height: 22px;
}

body.light-mode .offer-wizard-overlay .inv-selected-category {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

/* Browse button in wizard */
.offer-wizard-overlay .inv-browse-btn {
    margin-top: 8px;
    padding: 8px 14px;
    font-size: 0.82rem;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-primary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.2s;
}

.offer-wizard-overlay .inv-browse-btn:hover {
    background: rgba(255, 255, 255, 0.1);
}

body.light-mode .offer-wizard-overlay .inv-browse-btn {
    background: rgba(0, 0, 0, 0.04);
    border-color: rgba(0, 0, 0, 0.1);
}

/* Number inputs in wizard — keep large centered for price, normal for qty */
.offer-wizard-overlay .sale-wizard-step .car-form-field input[type="number"] {
    padding: 14px 16px;
    font-size: 1.1rem;
    font-weight: 600;
    text-align: center;
}

/* Photo step: hint row with counter */
.wizard-step-hint-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 0;
}

.wizard-step-hint-row .wizard-step-hint {
    margin-bottom: 0;
}

.wizard-photo-count {
    font-size: 0.78rem;
    font-weight: 600;
    white-space: nowrap;
    padding: 3px 10px;
    border-radius: 20px;
    transition: all 0.3s ease;
}

.wizard-photo-count.has-photos {
    color: var(--ios-blue);
    background: rgba(var(--ios-blue-rgb, 0,122,255), 0.12);
}

.wizard-photo-count.no-photos {
    color: var(--ios-red);
    background: rgba(var(--ios-red-rgb, 255,59,48), 0.1);
}

/* Price + Qty row */
.offer-wizard-overlay .wizard-slide[data-step="7"] .sale-wizard-step {
    max-width: 930px;
    margin: 0 auto;
    padding-top: 4px;
}

.wizard-price-row {
    display: grid;
    grid-template-columns: minmax(132px, 170px) minmax(170px, 220px) 96px 112px;
    gap: 12px;
    align-items: flex-end;
    justify-content: center;
    width: 100%;
}

.wizard-price-row:has(.wizard-check-catnum-btn:not(.hidden)) {
    grid-template-columns: minmax(132px, 170px) minmax(170px, 220px) 96px 112px;
}

.wizard-price-row .car-form-field input,
.wizard-price-row .car-form-field select {
    height: 46px;
    box-sizing: border-box;
}

.wizard-price-row .car-form-field label,
.wizard-delivery-row .car-form-field label {
    margin-bottom: 8px;
    color: rgba(245, 245, 247, 0.82);
    font-size: 0.88rem !important;
    font-weight: 600;
}

body.light-mode .wizard-price-row .car-form-field label,
body.light-mode .wizard-delivery-row .car-form-field label {
    color: rgba(28, 28, 30, 0.76);
}

/* Wizard utility classes */
.wiz-flex-1 { flex: 1; }
.wiz-field-gap { margin-top: 8px; }
.wiz-field-gap-lg { margin-top: 10px; }

.wiz-required {
    color: var(--ios-red-light, #FF6B6B);
    font-weight: 700;
}

.wiz-required-hint {
    color: var(--ios-red-light, #FF6B6B);
    font-weight: 500;
    font-size: 0.85em;
}

.wiz-error-text {
    color: var(--ios-red) !important;
}

.wiz-qty-input {
    text-align: center;
    font-size: 1.08rem;
    font-weight: 650;
}

.wizard-qty-field {
    width: auto;
    min-width: 0;
    grid-column: 3;
    grid-row: 1;
}

.wizard-qty-field label {
    text-align: center;
}

.wizard-unit-field {
    width: auto;
    min-width: 0;
    grid-column: 4;
    grid-row: 1;
}

.wizard-unit-field label {
    text-align: center;
}

.wizard-price-row .amount-field {
    width: auto;
    min-width: 0;
    max-width: none;
    grid-column: 2;
    grid-row: 1;
}

.wizard-price-row:has(.wizard-check-catnum-btn:not(.hidden)) .amount-field {
    width: auto;
    min-width: 0;
    max-width: none;
}

.wizard-price-row:has(.wizard-check-catnum-btn:not(.hidden)) .amount-input-wrapper input {
    padding-right: 50px !important;
}

.wizard-price-row:has(.wizard-check-catnum-btn:not(.hidden)) .amount-suffix {
    right: 20px;
}

.wiz-unit-select {
    font-size: 0.96rem;
    padding: 6px 12px;
    height: 100%;
}

.wizard-price-row .amount-input-wrapper input,
.wizard-price-row .wiz-qty-input,
.wizard-price-row .wiz-unit-select,
.wizard-delivery-row .inv-form-select {
    background: rgba(255, 255, 255, 0.055) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06), 0 10px 28px rgba(0, 0, 0, 0.14);
}

.wizard-price-row .amount-input-wrapper input:focus,
.wizard-price-row .wiz-qty-input:focus,
.wizard-price-row .wiz-unit-select:focus,
.wizard-delivery-row .inv-form-select:focus {
    border-color: rgba(var(--primary-rgb), 0.64) !important;
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb), 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.wizard-price-row .amount-input-wrapper input,
.wizard-price-row .amount-suffix {
    transition: border-color 0.16s ease, box-shadow 0.16s ease, background-color 0.16s ease, color 0.16s ease;
}

.wizard-price-row .amount-field.price-import-identical .amount-input-wrapper input {
    border-color: rgba(52, 199, 89, 0.72) !important;
    background: rgba(52, 199, 89, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.wizard-price-row .amount-field.price-import-identical .amount-suffix {
    color: rgba(52, 199, 89, 0.92);
}

.wizard-price-row .amount-field.price-import-changed .amount-input-wrapper input {
    border-color: rgba(255, 59, 48, 0.78) !important;
    background: rgba(255, 59, 48, 0.1) !important;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.08) !important;
}

.wizard-price-row .amount-field.price-import-changed .amount-suffix {
    color: rgba(255, 59, 48, 0.92);
}

body.light-mode .wizard-price-row .amount-input-wrapper input,
body.light-mode .wizard-price-row .wiz-qty-input,
body.light-mode .wizard-price-row .wiz-unit-select,
body.light-mode .wizard-delivery-row .inv-form-select {
    background: rgba(255, 255, 255, 0.82) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.9), 0 10px 24px rgba(0, 0, 0, 0.08);
}

body.light-mode .wizard-price-row .amount-field.price-import-identical .amount-input-wrapper input {
    border-color: rgba(34, 150, 72, 0.72) !important;
    background: rgba(52, 199, 89, 0.13) !important;
    box-shadow: 0 0 0 3px rgba(52, 199, 89, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

body.light-mode .wizard-price-row .amount-field.price-import-changed .amount-input-wrapper input {
    border-color: rgba(214, 48, 38, 0.74) !important;
    background: rgba(255, 59, 48, 0.13) !important;
    box-shadow: 0 0 0 3px rgba(255, 59, 48, 0.18), inset 0 1px 0 rgba(255, 255, 255, 0.9) !important;
}

/* Delivery section in price step */
.wizard-delivery-section {
    margin-top: 26px;
}

.wizard-delivery-divider {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 18px;
    color: var(--text-tertiary);
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.wizard-delivery-divider::before,
.wizard-delivery-divider::after {
    content: '';
    flex: 1;
    height: 1px;
    background: rgba(255, 255, 255, 0.1);
}

body.light-mode .wizard-delivery-divider::before,
body.light-mode .wizard-delivery-divider::after {
    background: rgba(0, 0, 0, 0.1);
}

.wizard-delivery-row {
    display: grid;
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr) minmax(0, 0.92fr);
    gap: 14px;
}

.wizard-delivery-row .car-form-field {
    margin-top: 0;
}

.wizard-price-btns {
    display: flex;
    flex-direction: column;
    gap: 6px;
    grid-column: 1;
    grid-row: 1;
    align-self: flex-end;
    height: 46px;
    box-sizing: border-box;
    align-items: center;
    justify-content: flex-start;
    min-width: 0;
    width: 100%;
    padding: 5px;
    border-radius: 13px;
    background: rgba(255, 255, 255, 0.035);
    border: 1px solid rgba(255, 255, 255, 0.075);
}

.wizard-price-btns:has(.wizard-check-catnum-btn:not(.hidden)) {
    height: 74px;
}

/* Check price buttons — compact stack on the left of price fields */
.wizard-check-price-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    white-space: nowrap;
    flex: 1 1 0;
    min-width: 0;
    padding: 0 9px;
    font-size: 11px;
    font-weight: 650;
    color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.12);
    border: 1px solid rgba(var(--primary-rgb), 0.26);
    border-radius: 12px;
    cursor: pointer;
    transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
    width: 100%;
    height: 34px;
    box-sizing: border-box;
}

.wizard-price-btns:has(.wizard-check-catnum-btn:not(.hidden)) .wizard-check-price-btn {
    height: 30px;
    min-width: 0;
}

.wizard-price-btns:not(:has(.wizard-check-catnum-btn:not(.hidden))) .wizard-check-price-btn {
    height: 34px;
    min-width: 0;
}

.wizard-check-catnum-btn {
    color: var(--ios-green, #34C759);
    background: rgba(52, 199, 89, 0.12);
    border-color: rgba(52, 199, 89, 0.26);
}

.wizard-check-catnum-btn:hover {
    background: rgba(52, 199, 89, 0.18) !important;
    border-color: rgba(52, 199, 89, 0.4) !important;
}

.wizard-check-catnum-btn.hidden {
    display: none;
}

.wizard-check-price-btn:hover {
    background: rgba(var(--primary-rgb), 0.18);
    border-color: rgba(var(--primary-rgb), 0.42);
    transform: translateY(-1px);
}

.wizard-check-price-btn:active {
    transform: scale(0.98);
    background: rgba(var(--primary-rgb), 0.22);
}

.wizard-check-price-btn svg {
    flex-shrink: 0;
}

body.light-mode .wizard-check-price-btn {
    background: rgba(var(--primary-rgb), 0.08);
    border-color: rgba(var(--primary-rgb), 0.25);
}

body.light-mode .wizard-check-price-btn:hover {
    background: rgba(var(--primary-rgb), 0.12);
}

body.light-mode .wizard-price-btns {
    background: rgba(255, 255, 255, 0.52);
    border-color: rgba(0, 0, 0, 0.08);
}

@media (max-width: 760px) {
    .wizard-price-row {
        grid-template-columns: 1fr 88px 104px;
        gap: 14px;
        justify-content: stretch;
    }

    .wizard-price-row:has(.wizard-check-catnum-btn:not(.hidden)) {
        grid-template-columns: 1fr 88px 104px;
    }

    .wizard-price-btns {
        grid-column: 1 / -1;
        grid-row: 2;
        width: 100%;
        height: auto;
        flex-direction: row;
    }

    .wizard-price-btns:has(.wizard-check-catnum-btn:not(.hidden)) {
        height: 46px;
    }

    .wizard-price-btns:has(.wizard-check-catnum-btn:not(.hidden)) .wizard-check-price-btn,
    .wizard-price-btns:not(:has(.wizard-check-catnum-btn:not(.hidden))) .wizard-check-price-btn {
        flex: 1 1 0;
        min-width: 0;
    }

    .wizard-price-row .amount-field {
        grid-column: 1;
        grid-row: 1;
    }

    .wizard-qty-field {
        grid-column: 2;
        grid-row: 1;
    }

    .wizard-unit-field {
        grid-column: 3;
        grid-row: 1;
    }

    .wizard-delivery-row {
        grid-template-columns: 1fr;
    }
}

/* Publish tiles */
.wizard-publish-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    padding: 4px 0;
}

.wizard-publish-tile-wide {
    grid-column: 1 / -1;
}

.wizard-publish-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 20px 14px 18px;
    background: rgba(255, 255, 255, 0.05);
    border: 1.5px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.22s ease;
    color: var(--text-primary);
    font-family: inherit;
    font-size: inherit;
}

body.light-mode .wizard-publish-tile {
    background: rgba(0, 0, 0, 0.025);
    border-color: rgba(0, 0, 0, 0.1);
}

.wizard-publish-tile:hover {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.08);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.15);
    transform: translateY(-1px);
}

.wizard-publish-tile.active {
    border-color: var(--primary-color);
    background: rgba(var(--primary-rgb), 0.12);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.25);
}

.wizard-publish-tile:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.wizard-pub-icon {
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.wizard-pub-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.wizard-pub-label {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
}

.wizard-pub-desc {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    line-height: 1.4;
    text-align: center;
    max-width: 140px;
}

/* Schedule picker */
.wizard-schedule-picker {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 12px;
    animation: fadeInUp 0.2s ease;
}

body.light-mode .wizard-schedule-picker {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.08);
}

.wizard-schedule-picker label {
    display: block;
    font-size: 0.82rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}

.wizard-schedule-picker input[type="datetime-local"] {
    width: 100%;
    padding: 10px 14px;
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.95rem;
    font-family: inherit;
}

body.light-mode .wizard-schedule-picker input[type="datetime-local"] {
    background: #fff;
    border-color: rgba(0, 0, 0, 0.12);
    color: #1a1a2e;
}

.wizard-schedule-picker input[type="datetime-local"]:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 2px rgba(var(--primary-rgb), 0.2);
}

.wizard-schedule-submit {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin-top: 12px;
    padding: 12px 16px;
    background: var(--primary-color);
    border: none;
    border-radius: 10px;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s ease;
}

.wizard-schedule-submit:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(var(--primary-rgb), 0.3);
}

.wizard-schedule-submit:active {
    transform: scale(0.98);
}

/* Step 7 back button */
.wizard-step7-back {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 24px;
    padding: 10px 20px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 8px;
    color: var(--text-secondary);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s ease;
}

body.light-mode .wizard-step7-back {
    border-color: rgba(0, 0, 0, 0.12);
}

.wizard-step7-back:hover {
    border-color: var(--primary-color);
    color: var(--text-primary);
    background: rgba(var(--primary-rgb), 0.06);
}

.wizard-step7-back svg {
    opacity: 0.7;
}

.wizard-step7-back:hover svg {
    opacity: 1;
}

/* Wide publish tile — horizontal layout */
.wizard-publish-tile-wide {
    flex-direction: row !important;
    padding: 14px 18px !important;
    gap: 12px !important;
}

.wizard-publish-tile-wide .wizard-pub-text {
    align-items: flex-start;
}

.wizard-publish-tile-wide .wizard-pub-desc {
    text-align: left;
    max-width: none;
}

@media (max-width: 600px) {
    .inv-wizard-launch {
        padding: 24px 12px;
    }

    .inv-launch-card {
        flex-direction: column;
        text-align: center;
        padding: 24px 20px;
        gap: 14px;
    }

    .inv-launch-content p {
        white-space: normal;
    }

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

    .offer-wizard-overlay .sale-wizard-modal {
        height: 85vh;
        max-height: none;
        min-height: 400px;
        width: 98%;
    }

    .offer-wizard-overlay .inv-import-results {
        min-height: 0;
    }

    .offer-wizard-overlay .wiz-car-list {
        max-height: 40vh;
    }

    .offer-wizard-overlay .inv-category-tree {
        max-height: 35vh;
    }

    .offer-wizard-overlay .inv-photos-grid {
        max-height: 40vh;
    }

    .wizard-publish-tiles {
        grid-template-columns: 1fr;
    }

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

/* Hidden category display until selected */
.offer-wizard-overlay .inv-selected-category.hidden-cat {
    display: none;
}

.offer-wizard-overlay .inv-selected-category {
    animation: fadeInUp 0.15s ease;
}

/* Category search wrapper entrance */
.offer-wizard-overlay .cat-search-wrapper {
    animation: fadeInUp 0.15s ease;
}



/* Wizard Allegro connection badge (capsule/pill) */
.wiz-allegro-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.01em;
    margin-bottom: 4px;
    transition: all 0.3s ease;
    width: fit-content;
}
.wiz-allegro-badge.wiz-allegro-checking {
    background: rgba(var(--ios-blue-rgb, 0,122,255), 0.1);
    color: var(--ios-blue);
    border: 1px solid rgba(var(--ios-blue-rgb, 0,122,255), 0.2);
}
.wiz-allegro-badge.wiz-allegro-ok {
    background: rgba(var(--ios-green-rgb, 52,199,89), 0.1);
    color: var(--ios-green);
    border: 1px solid rgba(var(--ios-green-rgb, 52,199,89), 0.2);
}
.wiz-allegro-badge.wiz-allegro-error {
    background: rgba(var(--ios-red-rgb, 255,59,48), 0.1);
    color: var(--ios-red-light, #FF6B6B);
    border: 1px solid rgba(var(--ios-red-rgb, 255,59,48), 0.25);
}

/* Search step layout */
.wiz-search-step {
    display: flex;
    flex-direction: column;
    position: relative;
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.wiz-search-step.input-active,
.wiz-search-step.search-active {
    justify-content: flex-start;
}

.wiz-search-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 200px;
    padding: 20px 0 10px;
    transition:
        min-height 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        padding    0.55s cubic-bezier(0.22, 1, 0.36, 1),
        margin     0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform  0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: min-height, padding, transform;
}

/* When typing - move search to top with fluid spring effect */
.wiz-search-step.input-active .wiz-search-center,
.wiz-search-step.search-active .wiz-search-center {
    min-height: 0;
    padding: 0;
    margin-bottom: 8px;
}

/* Allegro badge — smooth collapse */
.wiz-allegro-badge {
    transition:
        opacity    0.4s  cubic-bezier(0.22, 1, 0.36, 1),
        max-height 0.5s  cubic-bezier(0.22, 1, 0.36, 1),
        margin     0.5s  cubic-bezier(0.22, 1, 0.36, 1),
        padding    0.5s  cubic-bezier(0.22, 1, 0.36, 1),
        transform  0.45s cubic-bezier(0.22, 1, 0.36, 1);
    max-height: 60px;
    transform: translateY(0);
    transform-origin: top center;
    overflow: hidden;
}

/* Centered badge — directly under search field */
.wiz-allegro-center {
    align-self: center;
    margin: 4px 0 0;
}

/* Hide allegro badge when typing — fluid slide-up */
.wiz-search-step.input-active .wiz-allegro-badge,
.wiz-search-step.search-active .wiz-allegro-badge {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding: 0;
    pointer-events: none;
    transform: translateY(-8px) scale(0.95);
}

/* ── Banner (steps 2-7, below wizard title) — Apple pill ── */
.wiz-car-banner {
    max-height: 0;
    opacity: 0;
    overflow: visible;
    transition: max-height 0.35s cubic-bezier(0.2, 0.8, 0.2, 1),
                opacity 0.25s ease,
                margin 0.3s ease;
    margin: 0 auto;
    padding: 0 20px;
}

.wiz-car-banner.wiz-banner-visible {
    max-height: 44px;
    opacity: 1;
    margin: 4px auto 8px;
    overflow: visible;
}

.wiz-banner-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 8px 5px 12px;
    border-radius: 100px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.08);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    font-size: 12px;
    color: var(--text-secondary, #ccc);
    white-space: nowrap;
    letter-spacing: -0.01em;
}

body.light-mode .wiz-banner-pill {
    background: rgba(0, 0, 0, 0.035);
    border-color: rgba(0, 0, 0, 0.06);
    color: #555;
}

.wiz-banner-label {
    font-weight: 500;
    font-size: 12px;
    color: var(--text-primary, #fff);
    opacity: 0.85;
}

body.light-mode .wiz-banner-label {
    color: #333;
}

.wiz-banner-dim {
    font-weight: 400;
    color: var(--text-tertiary, #888);
    font-size: 11px;
}

body.light-mode .wiz-banner-dim {
    color: #888;
}

.wiz-banner-x {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: var(--text-tertiary, #888);
    cursor: pointer;
    flex-shrink: 0;
    padding: 0;
    transition: all 0.15s;
}

.wiz-banner-x:hover {
    background: rgba(239, 68, 68, 0.12);
    color: #ef4444;
}

body.light-mode .wiz-banner-x {
    background: rgba(0, 0, 0, 0.04);
}

body.light-mode .wiz-banner-x:hover {
    background: rgba(239, 68, 68, 0.08);
    color: #dc2626;
}

/* Entrance animation */
@keyframes wizCarIn {
    from { opacity: 0; transform: translateY(-6px) scale(0.97); filter: blur(4px); }
    to   { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}

/* Search input field — styled */
.wiz-search-field-wrap {
    position: relative;
    width: 100%;
    max-width: 420px;
    margin-top: 14px;
    transition:
        max-width  0.55s cubic-bezier(0.22, 1, 0.36, 1),
        margin-top 0.55s cubic-bezier(0.22, 1, 0.36, 1),
        transform  0.55s cubic-bezier(0.22, 1, 0.36, 1);
    will-change: max-width, margin-top;
}
.wiz-search-field-wrap.no-transition {
    transition: none !important;
}

.wiz-search-step.input-active .wiz-search-field-wrap,
.wiz-search-step.search-active .wiz-search-field-wrap {
    margin-top: 0;
    max-width: 100%;
}

/* Responsive — ensure search input fits on small screens */
@media (max-width: 480px) {
    .wiz-search-field-wrap {
        max-width: calc(100% - 20px);
        padding: 0 10px;
        box-sizing: border-box;
    }
    .wiz-search-input {
        font-size: 0.85rem;
    }
}

.wiz-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--text-tertiary);
    pointer-events: none;
    opacity: 0.5;
    transition: opacity 0.2s;
}

.wiz-search-input {
    width: 100%;
    padding: 12px 14px 12px 44px;
    font-size: 0.92rem;
    font-weight: 400;
    font-family: inherit;
    color: var(--text-primary);
    background: rgba(255, 255, 255, 0.06);
    border: 1.5px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    outline: none;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
}
.wiz-search-input.no-focus-transition {
    transition: none !important;
}

.wiz-search-input:focus {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, 0.08);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0,122,255), 0.12), 0 4px 16px rgba(0,0,0,0.15);
}

.wiz-search-input:focus ~ .wiz-search-icon {
    opacity: 0.8;
    color: var(--primary-color);
}

.wiz-search-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.6;
}

body.light-mode .wiz-search-input {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.12);
}

body.light-mode .wiz-search-input:focus {
    background: #fff;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0,122,255), 0.1), 0 4px 16px rgba(0,0,0,0.06);
}

/* Hint text below search */
.wiz-search-hint {
    font-size: 0.75rem;
    color: var(--text-tertiary);
    margin-top: 10px;
    opacity: 0.7;
    max-height: 40px;
    transform: translateY(0);
    transition:
        opacity    0.4s  cubic-bezier(0.22, 1, 0.36, 1),
        max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        margin     0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform  0.4s  cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
}

.wiz-search-step.input-active .wiz-search-hint,
.wiz-search-step.search-active .wiz-search-hint {
    opacity: 0;
    max-height: 0;
    margin: 0;
    transform: translateY(-6px);
}

/* ══════════════════════════════════════════════════════
   Step 2: Car Assignment
   ══════════════════════════════════════════════════════ */
.wiz-car-assign-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    max-height: 100%;
    overflow: hidden;
}

.wiz-car-assign-hint {
    font-size: 0.8rem;
    color: var(--text-secondary);
    text-align: center;
    margin-bottom: 14px;
    line-height: 1.5;
    padding: 0 16px;
}

.wiz-car-search-wrap {
    position: relative;
    display: flex;
    align-items: center;
    background: var(--bg-secondary, rgba(255,255,255,0.05));
    border: 1.5px solid var(--border-color, rgba(255,255,255,0.1));
    border-radius: 14px;
    padding: 0 14px;
    margin-bottom: 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    flex-shrink: 0;
}
.wiz-car-search-wrap:focus-within {
    border-color: var(--primary-color, #6366f1);
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}
.wiz-car-search-wrap .wiz-search-input {
    border: none !important;
    background: transparent !important;
    box-shadow: none !important;
    padding-left: 6px !important;
}
.wiz-car-search-icon {
    flex-shrink: 0;
    opacity: 0.4;
    margin-right: 2px;
}

.wiz-car-list {
    flex: 1;
    min-height: 100px;
    max-height: 50vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 2px;
}
.wiz-car-list::-webkit-scrollbar { width: 4px; }
.wiz-car-list::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.1);
    border-radius: 4px;
}
body.light-mode .wiz-car-list::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.08);
}

.wiz-car-empty {
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.82rem;
    padding: 32px 0;
    opacity: 0.6;
}

/* Car color dot — rounded square style */
.wiz-car-dot {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    flex-shrink: 0;
    border: 1.5px solid rgba(255, 255, 255, 0.15);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2), inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.wiz-car-dot.metalic {
    background-image: linear-gradient(135deg, rgba(255,255,255,0.5) 0%, transparent 40%, rgba(255,255,255,0.2) 100%) !important;
}

body.light-mode .wiz-car-dot {
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1), inset 0 1px 0 rgba(255, 255, 255, 0.5);
}

.wiz-car-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 12px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.06);
    margin-bottom: 6px;
    background: rgba(var(--primary-rgb, 0,122,255), 0.02);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    animation: offerResultSlideIn 0.3s cubic-bezier(0.22, 1, 0.36, 1) both;
}
.wiz-car-item:nth-child(1)  { animation-delay: 0s; }
.wiz-car-item:nth-child(2)  { animation-delay: 0.03s; }
.wiz-car-item:nth-child(3)  { animation-delay: 0.06s; }
.wiz-car-item:nth-child(4)  { animation-delay: 0.09s; }
.wiz-car-item:nth-child(5)  { animation-delay: 0.11s; }
.wiz-car-item:nth-child(6)  { animation-delay: 0.13s; }
.wiz-car-item:nth-child(7)  { animation-delay: 0.15s; }
.wiz-car-item:nth-child(8)  { animation-delay: 0.17s; }
.wiz-car-item:nth-child(9)  { animation-delay: 0.19s; }
.wiz-car-item:nth-child(10) { animation-delay: 0.2s; }
.wiz-car-item:nth-child(n+11) { animation-delay: 0.22s; }

.wiz-car-item:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.06);
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.15);
}
.wiz-car-item:active {
    transform: scale(0.99);
}

/* Suggested car from title match */
.wiz-car-section-label {
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-tertiary);
    padding: 6px 4px 4px;
}
.wiz-car-section-suggested {
    color: #a855f7;
}
.wiz-car-item--suggested {
    border-color: rgba(168, 85, 247, 0.3);
    background: rgba(168, 85, 247, 0.04);
}
.wiz-car-item--suggested:hover {
    border-color: rgba(168, 85, 247, 0.45);
    background: rgba(168, 85, 247, 0.08);
}
body.light-mode .wiz-car-item--suggested {
    border-color: rgba(168, 85, 247, 0.25);
    background: rgba(168, 85, 247, 0.05);
}
body.light-mode .wiz-car-item--suggested:hover {
    border-color: rgba(168, 85, 247, 0.4);
    background: rgba(168, 85, 247, 0.08);
}
.wiz-car-item-selected {
    background: rgba(34, 197, 94, 0.08) !important;
    border-color: rgba(34, 197, 94, 0.2) !important;
    transform: scale(0.98);
    opacity: 0.7;
    transition: all 0.25s ease;
}

.wiz-car-item-info {
    flex: 1;
    min-width: 0;
}
.wiz-car-item-name {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
}
.wiz-car-item-details {
    font-size: 0.76rem;
    color: var(--text-secondary);
    margin-top: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.wiz-car-item-date {
    color: var(--text-tertiary);
    font-size: 0.72rem;
    margin-left: 4px;
}
.wiz-car-item-select {
    flex-shrink: 0;
    padding: 6px 14px;
    font-size: 0.78rem;
    font-weight: 600;
    border: none;
    border-radius: 8px;
    background: var(--primary-color, #6366f1);
    color: #fff;
    cursor: pointer;
    transition: opacity 0.15s, transform 0.1s;
}
.wiz-car-item-select:active {
    transform: scale(0.96);
}

/* Selected car confirmation */
.wiz-car-confirmed {
    background: rgba(34, 197, 94, 0.04);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 14px;
    padding: 14px 16px;
    animation: wizSelectedIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
.wiz-car-confirmed-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ios-green, #22c55e);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wiz-car-confirmed-body {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}
.wiz-car-confirmed-name {
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text-primary);
}
.wiz-car-confirmed-details {
    font-size: 0.78rem;
    color: var(--text-secondary);
}
.wiz-car-confirmed-change {
    display: inline-block;
    padding: 5px 14px;
    font-size: 0.75rem;
    font-weight: 500;
    border: 1px solid rgba(var(--primary-rgb, 99,102,241), 0.2);
    border-radius: 8px;
    background: transparent;
    color: var(--primary-color, #6366f1);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.wiz-car-confirmed-change:hover {
    background: rgba(var(--primary-rgb, 99,102,241), 0.06);
    border-color: rgba(var(--primary-rgb, 99,102,241), 0.35);
}
body.light-mode .wiz-car-confirmed {
    background: rgba(34, 197, 94, 0.04);
    border-color: rgba(34, 197, 94, 0.18);
}
body.light-mode .wiz-car-search-wrap {
    background: rgba(0,0,0,0.03);
}

.wiz-car-skip-hint {
    font-size: 0.73rem;
    color: var(--text-tertiary);
    text-align: center;
    margin-top: 8px;
    opacity: 0.5;
    flex-shrink: 0;
}

/* ── Search Mode Toggle — modern segmented control ── */
.wiz-search-mode-toggle {
    display: flex;
    position: relative;
    background: var(--bg-tertiary, rgba(255,255,255,0.06));
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 14px;
    padding: 3px;
    margin-bottom: 18px;
    width: fit-content;
    align-self: center;
    isolation: isolate;
    transition:
        opacity    0.4s  cubic-bezier(0.22, 1, 0.36, 1),
        max-height 0.45s cubic-bezier(0.22, 1, 0.36, 1),
        margin     0.45s cubic-bezier(0.22, 1, 0.36, 1),
        transform  0.4s  cubic-bezier(0.22, 1, 0.36, 1);
    overflow: hidden;
    max-height: 56px;
}

/* Collapse toggle when typing */
.wiz-search-step.input-active .wiz-search-mode-toggle,
.wiz-search-step.search-active .wiz-search-mode-toggle {
    opacity: 0;
    max-height: 0;
    margin: 0;
    padding-top: 0;
    padding-bottom: 0;
    pointer-events: none;
    transform: translateY(-6px) scale(0.97);
}

/* Animated slider pill — gradient */
.wiz-mode-slider {
    position: absolute;
    top: 3px;
    left: 3px;
    height: calc(100% - 6px);
    border-radius: 11px;
    background: linear-gradient(135deg, var(--primary-color, #6366f1), #818cf8);
    box-shadow: 0 2px 10px rgba(99, 102, 241, 0.35), 0 1px 3px rgba(0,0,0,0.12);
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                width     0.35s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 0;
    will-change: transform, width;
    pointer-events: none;
}
.wiz-mode-slider.no-transition {
    transition: none !important;
}

.wiz-mode-btn {
    position: relative;
    z-index: 1;
    padding: 8px 20px;
    border: none;
    border-radius: 11px;
    background: transparent;
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 600;
    cursor: pointer;
    transition: color 0.3s ease;
    white-space: nowrap;
    -webkit-tap-highlight-color: transparent;
    user-select: none;
    display: flex;
    align-items: center;
    gap: 6px;
}
.wiz-mode-btn.active {
    color: #fff;
}
.wiz-mode-btn:not(.active):hover {
    color: var(--text-primary);
}

/* Mode button icons */
.wiz-mode-icon {
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    opacity: 0.65;
    transition: opacity 0.3s ease;
}
.wiz-mode-btn.active .wiz-mode-icon {
    opacity: 1;
}

body.light-mode .wiz-search-mode-toggle {
    background: #f0f0f5;
    border-color: rgba(0,0,0,0.04);
}
body.light-mode .wiz-mode-slider {
    box-shadow: 0 2px 8px rgba(99, 102, 241, 0.22), 0 1px 2px rgba(0,0,0,0.06);
}

/* ── Catalog Preview container (scrollable) ── */
.wiz-catalog-preview {
    flex: 1 1 0;
    min-height: 0;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    padding: 2px;
}
/* When showing selected product confirmation, shrink to content */
.wiz-catalog-preview:has(.wiz-catalog-selected) {
    flex: 0 0 auto;
    overflow-y: visible;
    margin-bottom: 0;
}
.wiz-catalog-preview::-webkit-scrollbar {
    width: 4px;
}
.wiz-catalog-preview::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.12);
    border-radius: 4px;
}
body.light-mode .wiz-catalog-preview::-webkit-scrollbar-thumb {
    background: rgba(0,0,0,0.1);
}

/* ── Catalog Preview (product cards) ── */
.wiz-catalog-results-header {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-bottom: 10px;
    padding: 0 2px;
    font-weight: 500;
    letter-spacing: 0.01em;
}
/* ── Catalog cards use shared .inv-import-offer layout ── */
.wiz-catalog-offer {
    cursor: pointer;
}
.wiz-catalog-offer:active {
    transform: scale(0.99);
}
.wiz-catalog-offer .inv-import-thumb-wrap {
    cursor: pointer;
}
.wiz-catalog-offer .wiz-cat-product-params {
    margin-top: 4px;
}
.wiz-cat-product-params {
    display: flex;
    flex-wrap: wrap;
    gap: 3px 8px;
}
.wiz-cat-param {
    font-size: 0.73rem;
    color: var(--text-secondary);
    line-height: 1.4;
    white-space: nowrap;
}
.wiz-cat-param b {
    color: var(--text-primary);
    font-weight: 500;
}

/* ── Catalog Selected Confirmation ── */
.wiz-catalog-selected {
    background: rgba(34, 197, 94, 0.04);
    border: 1px solid rgba(34, 197, 94, 0.15);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 0;
    animation: wizSelectedIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) both;
}
@keyframes wizSelectedIn {
    from { opacity: 0; transform: scale(0.97); }
    to   { opacity: 1; transform: scale(1); }
}
.wiz-catalog-selected-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--ios-green, #22c55e);
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.wiz-catalog-change-btn {
    margin-left: auto;
    padding: 3px 12px;
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--primary-color, #6366f1);
    background: transparent;
    border: 1.5px solid var(--primary-color, #6366f1);
    border-radius: 8px;
    cursor: pointer;
    text-transform: none;
    letter-spacing: 0;
    transition: background 0.15s, color 0.15s;
}
.wiz-catalog-change-btn:hover {
    background: var(--primary-color, #6366f1);
    color: #fff;
}
.wiz-catalog-selected-name {
    font-size: 0.84rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 8px;
    line-height: 1.35;
    word-break: break-word;
}
.wiz-catalog-selected .wiz-cat-product-params {
    gap: 4px 10px;
}
body.light-mode .wiz-catalog-selected {
    background: rgba(34, 197, 94, 0.04);
    border-color: rgba(34, 197, 94, 0.18);
}

/* ── Template Search Section ── */
.wiz-template-section {
    display: flex;
    flex-direction: column;
    flex: 1 1 0;
    min-height: 0;
    padding: 0;
    animation: wizTemplateIn 0.45s cubic-bezier(0.2, 0.8, 0.2, 1) both;
    animation-delay: 0.08s;
}

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

.wiz-template-divider {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 8px 0 6px;
}
.wiz-template-divider-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--border-color, rgba(255,255,255,0.1)), transparent);
}
.wiz-template-divider-text {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
    white-space: nowrap;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.wiz-template-hint {
    font-size: 0.73rem;
    color: var(--text-tertiary);
    text-align: center;
    margin-bottom: 8px;
    opacity: 0.6;
}

.wiz-template-field-wrap {
    margin-top: 0 !important;
    max-width: 100% !important;
}

.wiz-template-section .inv-import-results {
    flex: 1 1 0;
    min-height: 60px;
    max-height: none;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
}

/* Wizard import loading overlay */
.wizard-import-loading {
    position: absolute;
    inset: 0;
    z-index: 100;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    background:
        linear-gradient(180deg, rgba(30, 33, 42, 0.92), rgba(20, 22, 30, 0.94)),
        radial-gradient(80% 55% at 50% 18%, rgba(10, 132, 255, 0.12), transparent 68%);
    backdrop-filter: blur(18px) saturate(1.15);
    -webkit-backdrop-filter: blur(18px) saturate(1.15);
    border-radius: inherit;
    color: #fff;
    font-size: 0.92rem;
    font-weight: 500;
    letter-spacing: 0.3px;
    animation: wizLoadFadeIn 0.14s ease;
}
body.light-mode .wizard-import-loading {
    background:
        linear-gradient(180deg, rgba(245, 247, 250, 0.88), rgba(238, 241, 246, 0.92)),
        radial-gradient(80% 55% at 50% 18%, rgba(10, 132, 255, 0.13), transparent 68%);
    color: #1a1a1a;
}
@keyframes wizLoadFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* ====== ALLEGRO MESSAGES PANEL ====== */

.amsg-panel {
    padding: 0 !important;
    overflow: visible;
}

.amsg-panel > .section-title {
    padding: 20px 20px 0;
    margin-bottom: 0;
}

/* ── Main tabs (Wiadomości, Dyskusje, Opinie, Ustawienia) ───────── */

.amsg-main-tabs {
    display: flex;
    justify-content: center;
    gap: 2px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.02);
    border-bottom: 1px solid rgba(255,255,255,0.06);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.amsg-main-tab {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 9px 20px;
    border-radius: 10px;
    border: 1px solid transparent;
    background: transparent;
    color: var(--text-tertiary, #888);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.25, 0.46, 0.45, 0.94);
    white-space: nowrap;
    flex-shrink: 0;
    position: relative;
}

.amsg-main-tab svg {
    width: 16px;
    height: 16px;
    flex-shrink: 0;
    transition: transform 0.25s ease;
}

.amsg-main-tab:hover {
    background: rgba(255,255,255,0.05);
    color: var(--text-secondary, #aaa);
    border-color: rgba(255,255,255,0.06);
}

.amsg-main-tab:hover svg {
    transform: scale(1.1);
}

.amsg-main-tab:active {
    transform: scale(0.96);
}

.amsg-main-tab.active {
    background: rgba(var(--primary-rgb, 0,122,255), 0.12);
    color: var(--primary-color, #007aff);
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.2);
    box-shadow: 0 0 12px rgba(var(--primary-rgb, 0,122,255), 0.1);
    font-weight: 600;
}

body.light-mode .amsg-main-tabs {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

body.light-mode .amsg-main-tab {
    color: #666;
}

body.light-mode .amsg-main-tab:hover {
    background: rgba(0,0,0,0.04);
    color: #333;
    border-color: rgba(0,0,0,0.06);
}

body.light-mode .amsg-main-tab.active {
    background: rgba(var(--primary-rgb), 0.1);
    color: var(--primary-color);
    border-color: rgba(var(--primary-rgb), 0.18);
}

/* Tab panels */

.amsg-tab-panel {
    display: none;
    padding: 16px 20px;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.amsg-tab-panel::-webkit-scrollbar {
    width: 0 !important;
    display: none !important;
    -webkit-appearance: none;
}

.amsg-tab-panel.active {
    display: block;
}

.amsg-tab-panel .amsg-toolbar {
    padding: 0;
    margin-bottom: 14px;
}

/* ── Discussions tab ─────────────────────────────────────────────── */

.amsg-discussions-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* ── Reviews tab (przeprojektowany 2026-05) ──────────────────────── */

/* Hero header */
.rev-hero {
    display: flex;
    align-items: flex-start;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    background: linear-gradient(135deg, rgba(255,204,0,0.10), rgba(255,149,0,0.05));
    border: 1px solid rgba(255,204,0,0.18);
    margin-bottom: 16px;
}
.rev-hero-icon {
    flex-shrink: 0;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255,204,0,0.18);
    color: #ffcc00;
}
.rev-hero-text { flex: 1; min-width: 0; }
.rev-hero-text h3 {
    margin: 0 0 4px 0;
    font-size: 16px;
    font-weight: 600;
    color: var(--text-primary);
}
.rev-hero-text p {
    margin: 0;
    font-size: 12.5px;
    color: var(--text-tertiary);
    line-height: 1.5;
}

/* Stats cards */
.rev-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    margin-bottom: 14px;
}
.rev-stat {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    text-align: left;
    transition: background 0.15s, border-color 0.15s;
}
.rev-stat-num {
    font-size: 24px;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.1;
    margin-bottom: 4px;
    font-variant-numeric: tabular-nums;
}
.rev-stat-label {
    font-size: 11.5px;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.4px;
    font-weight: 500;
}
.rev-stat-pending {
    background: rgba(0,122,255,0.08);
    border-color: rgba(0,122,255,0.20);
}
.rev-stat-pending .rev-stat-num { color: var(--primary-color, #007AFF); }
.rev-stat-sent {
    background: rgba(52,199,89,0.08);
    border-color: rgba(52,199,89,0.20);
}
.rev-stat-sent .rev-stat-num { color: #34c759; }

/* Action bar */
.rev-actions-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 14px;
}
.rev-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 10px;
    border: 1px solid transparent;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    color: inherit;
    background: none;
}
.rev-btn-sm {
    padding: 7px 12px;
    font-size: 12px;
}
.rev-btn-primary {
    background: var(--primary-color, #007AFF);
    color: #fff;
}
.rev-btn-primary:hover:not(:disabled) {
    filter: brightness(1.1);
    transform: translateY(-1px);
}
.rev-btn-primary:active:not(:disabled) { transform: translateY(0); }
.rev-btn-primary:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}
.rev-btn-ghost {
    background: rgba(255,255,255,0.05);
    border-color: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}
.rev-btn-ghost:hover:not(:disabled) {
    background: rgba(255,255,255,0.10);
    color: var(--text-primary);
}
.rev-btn-ghost.is-active {
    background: rgba(0,122,255,0.15);
    border-color: rgba(0,122,255,0.30);
    color: var(--primary-color, #007AFF);
}

/* Template panel */
.rev-template {
    padding: 14px;
    border-radius: 12px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 14px;
}
.rev-template-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 10px;
}
.rev-template-title {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
}
.rev-template-close {
    background: none;
    border: none;
    color: var(--text-tertiary);
    cursor: pointer;
    padding: 4px;
    border-radius: 6px;
    display: flex;
    align-items: center;
}
.rev-template-close:hover {
    color: var(--text-primary);
    background: rgba(255,255,255,0.06);
}
.rev-template-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(0,0,0,0.20);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.55;
    resize: vertical;
    outline: none;
    min-height: 140px;
    box-sizing: border-box;
}
.rev-template-textarea:focus {
    border-color: var(--primary-color, #007AFF);
}
.rev-template-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 10px;
}

/* Filter tabs */
.rev-filter-tabs {
    display: flex;
    gap: 4px;
    padding: 4px;
    border-radius: 10px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    margin-bottom: 12px;
}
.rev-filter-tab {
    flex: 1;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 12px;
    border-radius: 7px;
    border: none;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 12.5px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
}
.rev-filter-tab:hover { color: var(--text-secondary); }
.rev-filter-tab.active {
    background: var(--surface-elev-1, rgba(255,255,255,0.10));
    color: var(--text-primary);
    box-shadow: 0 1px 2px rgba(0,0,0,0.10);
}
.rev-filter-count {
    min-width: 20px;
    padding: 1px 6px;
    border-radius: 10px;
    background: rgba(255,255,255,0.08);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
}
.rev-filter-tab.active .rev-filter-count {
    background: var(--primary-color, #007AFF);
    color: #fff;
}

/* List */
.rev-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 60vh;
    overflow-y: auto;
    padding-right: 2px;
}

/* Card */
.rev-card {
    position: relative;
    display: flex;
    align-items: stretch;
    gap: 12px;
    padding: 12px 14px 12px 16px;
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    overflow: hidden;
}
.rev-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--primary-color, #007AFF);
    opacity: 0.7;
}
.rev-card.is-sent::before {
    background: #34c759;
    opacity: 0.55;
}
.rev-card:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.10);
}
.rev-card.is-busy {
    opacity: 0.8;
}
.rev-card-avatar {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(0,122,255,0.30), rgba(0,122,255,0.12));
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    font-weight: 600;
    align-self: center;
}
.rev-card.is-sent .rev-card-avatar {
    background: linear-gradient(135deg, rgba(52,199,89,0.30), rgba(52,199,89,0.12));
}
.rev-card-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
    justify-content: center;
}
.rev-card-row1 {
    display: flex;
    align-items: baseline;
    gap: 8px;
    flex-wrap: wrap;
}
.rev-card-buyer {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
.rev-card-time {
    font-size: 11.5px;
    color: var(--text-tertiary);
    font-weight: 500;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.rev-card-time.is-fresh { color: #ff9500; }
.rev-card-time.is-old { color: var(--text-secondary); }
.rev-card-product {
    font-size: 12.5px;
    color: var(--text-secondary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}
.rev-card-chips {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 2px;
}
.rev-card-chip {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    font-size: 11px;
    color: var(--text-tertiary);
    font-weight: 500;
    white-space: nowrap;
}
.rev-card-chip svg { opacity: 0.7; }
.rev-card-chip.is-success {
    background: rgba(52,199,89,0.12);
    color: #34c759;
}
.rev-card-chip.is-success svg { opacity: 1; }

.rev-card-actions {
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: center;
    gap: 6px;
    min-width: 130px;
}

.rev-send-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 9px 14px;
    border-radius: 9px;
    border: none;
    background: var(--primary-color, #007AFF);
    color: #fff;
    font-size: 12.5px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
}
.rev-send-btn:hover:not(:disabled) {
    filter: brightness(1.10);
    transform: translateY(-1px);
}
.rev-send-btn:active:not(:disabled) { transform: translateY(0); }
.rev-send-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}
.rev-send-btn.is-resend {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.08);
}
.rev-send-btn.is-resend:hover:not(:disabled) {
    background: rgba(255,255,255,0.14);
    color: var(--text-primary);
}
.rev-send-btn.is-busy {
    background: rgba(255,255,255,0.10);
    color: var(--text-tertiary);
}
.rev-send-btn.is-error {
    background: rgba(255,69,58,0.15);
    color: #ff453a;
}
.rev-send-btn .spinner {
    width: 14px;
    height: 14px;
    border-width: 2px;
}

/* Empty state */
.rev-empty {
    text-align: center;
    padding: 40px 20px;
    color: var(--text-tertiary);
}
.rev-empty-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: rgba(255,255,255,0.04);
    color: var(--text-tertiary);
    margin: 0 auto 14px;
}
.rev-empty-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-secondary);
    margin: 0 0 4px 0;
}
.rev-empty-hint {
    font-size: 12.5px;
    color: var(--text-tertiary);
    margin: 0;
    line-height: 1.5;
}

/* Loading state */
.rev-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    padding: 40px 0;
    color: var(--text-tertiary);
    font-size: 13px;
}

/* Bulk-send progress banner */
.rev-bulk-banner {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 14px;
    border-radius: 10px;
    background: rgba(0,122,255,0.10);
    border: 1px solid rgba(0,122,255,0.25);
    margin-bottom: 12px;
}
.rev-bulk-banner-text {
    flex: 1;
    font-size: 12.5px;
    color: var(--text-primary);
    font-weight: 500;
}
.rev-bulk-progress {
    height: 4px;
    border-radius: 2px;
    background: rgba(255,255,255,0.08);
    overflow: hidden;
    margin-top: 6px;
}
.rev-bulk-progress-fill {
    height: 100%;
    background: var(--primary-color, #007AFF);
    transition: width 0.25s ease;
    border-radius: 2px;
}

/* Mobile */
@media (max-width: 640px) {
    .rev-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; }
    .rev-stat { padding: 10px 8px; }
    .rev-stat-num { font-size: 19px; }
    .rev-stat-label { font-size: 10px; letter-spacing: 0.2px; }
    .rev-card { flex-wrap: wrap; }
    .rev-card-actions { width: 100%; min-width: 0; flex-direction: row; }
    .rev-send-btn { flex: 1; padding: 10px 12px; }
    .rev-actions-bar .rev-btn span { display: none; }
    .rev-actions-bar .rev-btn-primary span { display: inline; }
    .rev-actions-bar .rev-btn { padding: 9px 11px; }
    .rev-actions-bar .rev-btn-primary { flex: 1; }
}

/* Light mode */
body.light-mode .rev-hero {
    background: linear-gradient(135deg, rgba(255,176,0,0.10), rgba(255,149,0,0.05));
    border-color: rgba(255,149,0,0.25);
}
body.light-mode .rev-stat {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .rev-stat-pending {
    background: rgba(0,122,255,0.08);
    border-color: rgba(0,122,255,0.20);
}
body.light-mode .rev-stat-sent {
    background: rgba(52,199,89,0.10);
    border-color: rgba(52,199,89,0.22);
}
body.light-mode .rev-btn-ghost {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
    color: #444;
}
body.light-mode .rev-btn-ghost:hover:not(:disabled) {
    background: rgba(0,0,0,0.08);
    color: #1a1a1a;
}
body.light-mode .rev-template {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}
body.light-mode .rev-template-textarea {
    background: #fff;
    border-color: rgba(0,0,0,0.10);
    color: #1a1a1a;
}
body.light-mode .rev-filter-tabs {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .rev-filter-tab.active {
    background: #fff;
    color: #1a1a1a;
}
body.light-mode .rev-filter-count {
    background: rgba(0,0,0,0.08);
}
body.light-mode .rev-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .rev-card:hover {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.10);
}
body.light-mode .rev-card-chip {
    background: rgba(0,0,0,0.05);
}
body.light-mode .rev-send-btn.is-resend {
    background: rgba(0,0,0,0.05);
    color: #555;
    border-color: rgba(0,0,0,0.08);
}
body.light-mode .rev-send-btn.is-resend:hover:not(:disabled) {
    background: rgba(0,0,0,0.10);
    color: #1a1a1a;
}
body.light-mode .rev-empty-icon {
    background: rgba(0,0,0,0.04);
}

/* ── Settings tab ────────────────────────────────────────────────── */

/* System Status Banner */
.amsg-system-status {
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: 14px;
    margin-bottom: 24px;
    transition: all 0.3s ease;
}

.amsg-system-status.active {
    background: rgba(52,199,89,0.1);
    border: 1px solid rgba(52,199,89,0.25);
}

.amsg-system-status.inactive {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
}

.amsg-system-status-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
}

.amsg-system-status.active .amsg-system-status-icon {
    background: rgba(52,199,89,0.2);
    color: var(--ios-green, #34c759);
}

.amsg-system-status.inactive .amsg-system-status-icon {
    background: rgba(255,255,255,0.06);
    color: var(--text-tertiary);
}

.amsg-system-status-text {
    display: flex;
    flex-direction: column;
    gap: 3px;
    min-width: 0;
}

.amsg-system-status-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.amsg-system-status.active .amsg-system-status-title {
    color: var(--ios-green, #34c759);
}

.amsg-system-status-detail {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.4;
}

/* Section headers with hints */
.amsg-settings-section-header {
    margin-bottom: 16px;
}

.amsg-settings-section-header h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0 0 6px 0;
}

.amsg-settings-hint {
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.5;
    margin: 0;
}

.amsg-field-hint {
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: -2px;
    opacity: 0.7;
}

/* Unsaved changes badge */
.amsg-unsaved-badge {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px;
    border-radius: 10px;
    background: rgba(255,159,10,0.12);
    border: 1px solid rgba(255,159,10,0.3);
    color: #ff9f0a;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 14px;
    animation: amsg-unsaved-pulse 2s ease-in-out infinite;
}

@keyframes amsg-unsaved-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.8; }
}

/* AR toggle row */
.amsg-ar-toggle-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

/* Settings section */
.amsg-settings-section {
    margin-bottom: 24px;
    padding-bottom: 24px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
}

.amsg-settings-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.amsg-settings-section h3 {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.amsg-settings-row {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 14px;
}

.amsg-settings-row.two-cols {
    flex-direction: row;
    gap: 16px;
}

.amsg-settings-row.two-cols > div {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.amsg-settings-row label {
    font-size: 13px;
    font-weight: 500;
    color: var(--text-secondary);
}

.amsg-settings-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
}

.amsg-settings-toggle input {
    display: none;
}

.amsg-settings-toggle-slider {
    width: 44px;
    height: 26px;
    background: rgba(255,255,255,0.1);
    border-radius: 13px;
    position: relative;
    transition: background 0.25s;
    flex-shrink: 0;
}

.amsg-settings-toggle-slider::after {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.25s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.amsg-settings-toggle input:checked + .amsg-settings-toggle-slider {
    background: var(--ios-green, #34c759);
}

.amsg-settings-toggle input:checked + .amsg-settings-toggle-slider::after {
    transform: translateX(18px);
}

.amsg-settings-select,
.amsg-settings-input {
    padding: 10px 14px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    max-width: 200px;
}

.amsg-settings-textarea {
    width: 100%;
    padding: 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.4;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
}

.amsg-settings-textarea:focus {
    border-color: var(--primary-color);
}

.amsg-settings-status {
    margin-top: 4px;
}

.amsg-settings-status span {
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 4px 10px;
    background: rgba(255,255,255,0.05);
    border-radius: 6px;
}

.amsg-settings-status span.custom {
    color: var(--ios-green);
    background: rgba(52,199,89,0.15);
}

.amsg-settings-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.amsg-settings-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.amsg-settings-btn.secondary {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}

.amsg-settings-btn.secondary:hover {
    background: rgba(255,255,255,0.12);
}

.amsg-settings-btn.primary {
    background: var(--primary-color);
    color: #fff;
}

.amsg-settings-btn.primary:hover {
    filter: brightness(1.1);
}

/* Save button states */
.amsg-settings-btn.primary.has-changes {
    animation: amsg-save-glow 1.5s ease-in-out infinite;
}

@keyframes amsg-save-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 0,122,255), 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb, 0,122,255), 0); }
}

.amsg-settings-btn.primary.saving {
    opacity: 0.7;
    pointer-events: none;
}

.amsg-settings-btn.primary.saved {
    background: var(--ios-green, #34c759) !important;
    animation: none;
}

/* Running button state */
.amsg-settings-btn.running {
    opacity: 0.7;
    pointer-events: none;
}

/* AR actions layout */
.amsg-ar-actions {
    flex-wrap: wrap;
}

/* Test result box */
.amsg-ar-test-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    transition: all 0.3s ease;
    animation: amsg-fade-in 0.3s ease;
}

@keyframes amsg-fade-in {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}

.amsg-ar-test-result.checking {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
}

.amsg-ar-test-result.success {
    background: rgba(52,199,89,0.1);
    border: 1px solid rgba(52,199,89,0.25);
    color: var(--text-primary);
}

.amsg-ar-test-result.warning {
    background: rgba(255,159,10,0.1);
    border: 1px solid rgba(255,159,10,0.25);
    color: var(--text-primary);
}

.amsg-ar-test-result.error {
    background: rgba(255,69,58,0.1);
    border: 1px solid rgba(255,69,58,0.25);
    color: var(--text-primary);
}

.amsg-ar-test-icon {
    flex-shrink: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

.amsg-ar-test-text {
    flex: 1;
    min-width: 0;
}

.amsg-ar-test-text strong {
    display: block;
    margin-bottom: 2px;
}

/* Last check info */
.amsg-ar-last-check {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

.amsg-ar-status {
    font-size: 12px;
    padding: 4px 10px;
    border-radius: 6px;
    background: rgba(255,255,255,0.05);
    color: var(--text-tertiary);
}

.amsg-ar-status.active {
    background: rgba(52,199,89,0.15);
    color: var(--ios-green);
}

.amsg-ar-cron-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
    margin-bottom: 14px;
}

.amsg-ar-cron-icon {
    font-size: 14px;
}

.amsg-ar-cron-count {
    color: var(--ios-green);
    font-weight: 600;
}

.amsg-ar-source-cron {
    font-size: 9px;
    padding: 2px 5px;
    background: rgba(var(--primary-rgb),0.15);
    color: var(--primary-color);
    border-radius: 4px;
    margin-left: 6px;
    font-weight: 600;
}

body.light-mode .amsg-settings-section {
    border-color: rgba(0,0,0,0.06);
}

body.light-mode .amsg-settings-select,
body.light-mode .amsg-settings-input,
body.light-mode .amsg-settings-textarea {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #1a1a1a;
}

body.light-mode .amsg-settings-toggle-slider {
    background: rgba(0,0,0,0.1);
}

body.light-mode .amsg-settings-btn.secondary {
    background: rgba(0,0,0,0.06);
    color: #333;
}

body.light-mode .amsg-ar-log {
    background: rgba(0,0,0,0.02);
}

body.light-mode .amsg-system-status.active {
    background: rgba(52,199,89,0.08);
    border-color: rgba(52,199,89,0.2);
}

body.light-mode .amsg-system-status.inactive {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

body.light-mode .amsg-unsaved-badge {
    background: rgba(255,159,10,0.08);
    border-color: rgba(255,159,10,0.2);
}

body.light-mode .amsg-ar-test-result.checking {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

body.light-mode .amsg-ar-test-result.success {
    background: rgba(52,199,89,0.06);
    border-color: rgba(52,199,89,0.2);
}

body.light-mode .amsg-ar-test-result.warning {
    background: rgba(255,159,10,0.06);
    border-color: rgba(255,159,10,0.2);
}

body.light-mode .amsg-ar-test-result.error {
    background: rgba(255,69,58,0.06);
    border-color: rgba(255,69,58,0.2);
}

body.light-mode .amsg-ar-last-check {
    background: rgba(0,0,0,0.02);
}

/* ═══════════════════════════════════════════════════════════════════
   APPLE-STYLE SETTINGS CARDS (as-*)
   ═══════════════════════════════════════════════════════════════════ */

.as-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    margin-bottom: 16px;
    overflow: hidden;
    transition: border-color 0.3s, box-shadow 0.3s;
}

.as-card:hover {
    border-color: rgba(255,255,255,0.12);
}

/* Card header */
.as-card-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
}

.as-card-header-collapsible {
    cursor: pointer;
    user-select: none;
    -webkit-user-select: none;
    transition: background 0.2s;
}

.as-card-header-collapsible:hover {
    background: rgba(255,255,255,0.03);
}

.as-card-header-collapsible:active {
    background: rgba(255,255,255,0.06);
}

.as-card-icon {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.as-icon-bolt {
    background: linear-gradient(135deg, #ff9f0a, #ff6b00);
    color: #fff;
}

.as-icon-ai {
    background: linear-gradient(135deg, #5e5ce6, #bf5af2);
    color: #fff;
}

.as-icon-log {
    background: linear-gradient(135deg, #64d2ff, #0a84ff);
    color: #fff;
}

.as-card-title-group {
    flex: 1;
    min-width: 0;
}

.as-card-title {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
    line-height: 1.3;
}

.as-card-subtitle {
    font-size: 12px;
    color: var(--text-tertiary);
    display: block;
    margin-top: 2px;
}

.as-card-chevron {
    color: var(--text-tertiary);
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    flex-shrink: 0;
}

.as-card-header-collapsible.open .as-card-chevron {
    transform: rotate(180deg);
}

/* Badge */
.as-badge {
    font-size: 11px;
    font-weight: 600;
    padding: 3px 8px;
    border-radius: 6px;
    background: rgba(255,255,255,0.06);
    color: var(--text-tertiary);
    flex-shrink: 0;
}

.as-badge.custom {
    background: rgba(52,199,89,0.15);
    color: var(--ios-green, #34c759);
}

/* Toggle switch — Apple-style */
.as-toggle {
    position: relative;
    display: inline-flex;
    flex-shrink: 0;
    cursor: pointer;
}

.as-toggle input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.as-toggle-track {
    width: 50px;
    height: 30px;
    background: rgba(255,255,255,0.12);
    border-radius: 15px;
    position: relative;
    transition: background 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.as-toggle-track::after {
    content: '';
    position: absolute;
    width: 26px;
    height: 26px;
    background: #fff;
    border-radius: 50%;
    top: 2px;
    left: 2px;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}

.as-toggle input:checked + .as-toggle-track {
    background: var(--ios-green, #34c759);
}

.as-toggle input:checked + .as-toggle-track::after {
    transform: translateX(20px);
}

/* Card body */
.as-card-body {
    padding: 0 18px 18px;
}

.as-card-collapsible {
    overflow: hidden;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.25s, padding 0.35s;
}

/* Status pill */
.as-status-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 20px;
    background: rgba(255,255,255,0.05);
    font-size: 12px;
    font-weight: 500;
    color: var(--text-tertiary);
    margin-bottom: 16px;
}

.as-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255,255,255,0.2);
}

.as-status-pill.active {
    background: rgba(52,199,89,0.12);
    color: var(--ios-green, #34c759);
}

.as-status-pill.active .as-status-dot {
    background: var(--ios-green, #34c759);
    box-shadow: 0 0 6px rgba(52,199,89,0.5);
    animation: as-pulse 2s ease-in-out infinite;
}

@keyframes as-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Cron status */
.as-cron-status {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--text-tertiary);
    padding: 8px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 10px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* Field group */
.as-field-group {
    margin-bottom: 18px;
}

.as-field-label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
    letter-spacing: -0.01em;
}

.as-field-hint {
    display: block;
    font-size: 11px;
    color: var(--text-tertiary);
    margin-top: 6px;
    opacity: 0.8;
    line-height: 1.4;
}

/* Segmented control */
.as-segmented {
    display: flex;
    background: rgba(255,255,255,0.06);
    border-radius: 10px;
    padding: 3px;
    gap: 2px;
}

.as-seg-btn {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 12px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--text-tertiary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    white-space: nowrap;
}

.as-seg-btn:hover {
    color: var(--text-secondary);
}

.as-seg-btn.active {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
    box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* Chip row */
.as-chip-row {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.as-chip {
    padding: 8px 14px;
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.1);
    background: transparent;
    color: var(--text-secondary);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.as-chip:hover {
    border-color: rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
}

.as-chip.active {
    background: rgba(var(--primary-rgb, 0,122,255), 0.15);
    border-color: rgba(var(--primary-rgb, 0,122,255), 0.3);
    color: var(--primary-color, #007aff);
}

/* Schedule grid (per-day) */
.as-schedule-grid {
    display: flex;
    flex-direction: column;
    gap: 2px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    padding: 4px;
    margin-top: 10px;
}

.as-day-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    transition: background 0.15s;
}

.as-day-row:hover {
    background: rgba(255,255,255,0.03);
}

.as-day-toggle {
    display: flex;
    align-items: center;
    gap: 8px;
    cursor: pointer;
    min-width: 60px;
}

.as-day-toggle input {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color, #007aff);
    cursor: pointer;
    border-radius: 4px;
}

.as-day-name {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary);
    min-width: 28px;
}

.as-day-toggle input:not(:checked) ~ .as-day-name {
    color: var(--text-tertiary);
    text-decoration: line-through;
    opacity: 0.5;
}

.as-day-hours {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    transition: opacity 0.2s;
}

.as-day-hours.disabled {
    opacity: 0.3;
    pointer-events: none;
}

.as-time-input {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    width: 90px;
    transition: border-color 0.2s;
}

.as-time-input:focus {
    border-color: var(--primary-color, #007aff);
}

.as-time-sep {
    color: var(--text-tertiary);
    font-size: 14px;
}

/* Textarea */
.as-textarea {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 13px;
    font-family: inherit;
    line-height: 1.5;
    resize: vertical;
    outline: none;
    box-sizing: border-box;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.as-textarea:focus {
    border-color: var(--primary-color, #007aff);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb, 0,122,255), 0.15);
}

/* Actions */
.as-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
}

.as-btn {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 10px 18px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    letter-spacing: -0.01em;
}

.as-btn-primary {
    background: var(--primary-color, #007aff);
    color: #fff;
}

.as-btn-primary:hover {
    filter: brightness(1.1);
}

.as-btn-primary:active {
    filter: brightness(0.95);
    transform: scale(0.98);
}

.as-btn-primary.has-changes {
    animation: as-save-glow 1.5s ease-in-out infinite;
}

@keyframes as-save-glow {
    0%, 100% { box-shadow: 0 0 0 0 rgba(var(--primary-rgb, 0,122,255), 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(var(--primary-rgb, 0,122,255), 0); }
}

.as-btn-primary.saving {
    opacity: 0.7;
    pointer-events: none;
}

.as-btn-primary.saved {
    background: var(--ios-green, #34c759) !important;
    animation: none;
}

.as-btn-secondary {
    background: rgba(255,255,255,0.08);
    color: var(--text-secondary);
}

.as-btn-secondary:hover {
    background: rgba(255,255,255,0.13);
}

.as-btn-secondary:active {
    transform: scale(0.98);
}

.as-btn.running {
    opacity: 0.7;
    pointer-events: none;
}

/* Test result */
.as-test-result {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 14px 16px;
    border-radius: 12px;
    margin-top: 14px;
    font-size: 13px;
    line-height: 1.5;
    animation: amsg-fade-in 0.3s ease;
}

.as-test-result.checking {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.1);
    color: var(--text-secondary);
}

.as-test-result.success {
    background: rgba(52,199,89,0.1);
    border: 1px solid rgba(52,199,89,0.25);
}

.as-test-result.warning {
    background: rgba(255,159,10,0.1);
    border: 1px solid rgba(255,159,10,0.25);
}

.as-test-result.error {
    background: rgba(255,69,58,0.1);
    border: 1px solid rgba(255,69,58,0.25);
}

.as-test-icon {
    flex-shrink: 0;
    font-size: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
}

.as-test-text {
    flex: 1;
    min-width: 0;
}

.as-test-text strong {
    display: block;
    margin-bottom: 2px;
}

.as-last-check {
    margin-top: 8px;
    font-size: 11px;
    color: var(--text-tertiary);
    padding: 6px 12px;
    background: rgba(255,255,255,0.03);
    border-radius: 8px;
}

/* ── Light mode overrides ── */
body.light-mode .as-card {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.08);
}

body.light-mode .as-card:hover {
    border-color: rgba(0,0,0,0.12);
}

body.light-mode .as-card-header-collapsible:hover {
    background: rgba(0,0,0,0.02);
}

body.light-mode .as-toggle-track {
    background: rgba(0,0,0,0.12);
}

body.light-mode .as-status-pill {
    background: rgba(0,0,0,0.04);
}

body.light-mode .as-segmented {
    background: rgba(0,0,0,0.05);
}

body.light-mode .as-seg-btn.active {
    background: #fff;
    box-shadow: 0 1px 4px rgba(0,0,0,0.1);
}

body.light-mode .as-chip {
    border-color: rgba(0,0,0,0.12);
}

body.light-mode .as-chip:hover {
    border-color: rgba(0,0,0,0.2);
    background: rgba(0,0,0,0.03);
}

body.light-mode .as-chip.active {
    background: rgba(var(--primary-rgb), 0.1);
    border-color: rgba(var(--primary-rgb), 0.25);
}

body.light-mode .as-schedule-grid {
    background: rgba(0,0,0,0.02);
}

body.light-mode .as-time-input {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #1a1a1a;
}

body.light-mode .as-textarea {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #1a1a1a;
}

body.light-mode .as-btn-secondary {
    background: rgba(0,0,0,0.06);
    color: #333;
}

body.light-mode .as-cron-status {
    background: rgba(0,0,0,0.02);
}

body.light-mode .as-badge {
    background: rgba(0,0,0,0.05);
}

body.light-mode .as-test-result.checking {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.06);
}

body.light-mode .as-test-result.success {
    background: rgba(52,199,89,0.06);
    border-color: rgba(52,199,89,0.2);
}

body.light-mode .as-test-result.warning {
    background: rgba(255,159,10,0.06);
    border-color: rgba(255,159,10,0.2);
}

body.light-mode .as-test-result.error {
    background: rgba(255,69,58,0.06);
    border-color: rgba(255,69,58,0.2);
}

body.light-mode .as-last-check {
    background: rgba(0,0,0,0.02);
}

/* ── Messages View ───────────────────────────────────────────────── */

.amsg-toolbar {
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    padding: 0 20px;
    align-items: center;
}

.amsg-search-wrapper {
    flex: 1;
    position: relative;
}

.amsg-search-icon {
    position: absolute;
    left: 14px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    color: rgba(255,255,255,0.3);
    pointer-events: none;
    transition: color 0.2s;
}

.amsg-search-input {
    width: 100%;
    padding: 12px 16px 12px 42px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-family: inherit;
    outline: none;
    transition: all 0.2s;
    box-sizing: border-box;
}

.amsg-search-input:focus {
    border-color: var(--primary-color, #007aff);
    background: rgba(255,255,255,0.06);
    box-shadow: 0 0 0 3px rgba(var(--primary-rgb),0.1);
}

.amsg-search-input:focus + .amsg-search-icon {
    color: var(--primary-color, #007aff);
}

body.light-mode .amsg-search-input {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #1a1a1a;
}

body.light-mode .amsg-search-icon {
    color: rgba(0,0,0,0.3);
}

.amsg-refresh-btn {
    width: 44px;
    height: 44px;
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.amsg-refresh-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.1);
    border-color: var(--primary-color, #007aff);
    color: var(--primary-color, #007aff);
}

.amsg-refresh-btn.spinning svg {
    animation: amsgSpin 0.8s linear infinite;
}

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

body.light-mode .amsg-refresh-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #333;
}

/* Filter tabs */
.amsg-filter-tabs {
    display: flex;
    gap: 8px;
    margin: 0 0 16px;
    padding: 4px;
    background: rgba(255,255,255,0.03);
    border-radius: 12px;
    border: 1px solid rgba(255,255,255,0.04);
}

.amsg-filter-tab {
    flex: 1;
    padding: 10px 14px;
    border-radius: 10px;
    border: none;
    background: transparent;
    color: rgba(255,255,255,0.5);
    font-size: 13px;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.25s;
}

.amsg-filter-tab:hover {
    color: rgba(255,255,255,0.8);
    background: rgba(255,255,255,0.04);
}

.amsg-filter-tab.active {
    background: rgba(var(--primary-rgb),0.15);
    color: var(--primary-color, #007aff);
    font-weight: 600;
}

body.light-mode .amsg-filter-tabs {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.04);
}

body.light-mode .amsg-filter-tab {
    color: rgba(0,0,0,0.45);
}

body.light-mode .amsg-filter-tab:hover {
    color: rgba(0,0,0,0.7);
    background: rgba(0,0,0,0.04);
}

body.light-mode .amsg-filter-tab.active {
    background: rgba(var(--primary-rgb),0.1);
    color: var(--primary-color, #007aff);
}

/* Messages list */
.amsg-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 250px;
    max-height: 70vh;
    overflow-y: auto;
    overflow-x: hidden;
    padding: 6px 6px 20px;
    margin: 0 -6px;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.amsg-list::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    -webkit-appearance: none;
}

.amsg-list::-webkit-scrollbar-track {
    background: transparent !important;
}

.amsg-list::-webkit-scrollbar-thumb {
    background: transparent !important;
}

.amsg-list::-webkit-scrollbar-thumb:hover {
    background: transparent !important;
}

body.light-mode .amsg-list::-webkit-scrollbar-thumb {
    background: transparent !important;
}

body.light-mode .amsg-list::-webkit-scrollbar-thumb:hover {
    background: transparent !important;
}

.amsg-loading, .amsg-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 50px 20px;
    gap: 14px;
    color: rgba(255,255,255,0.4);
}

.amsg-empty-icon {
    font-size: 52px;
    opacity: 0.4;
}

.amsg-empty p {
    margin: 0;
    font-size: 15px;
    font-weight: 500;
}

.amsg-empty-hint {
    font-size: 13px !important;
    opacity: 0.6;
}

body.light-mode .amsg-loading,
body.light-mode .amsg-empty {
    color: rgba(0,0,0,0.35);
}

/* Spinner */
.amsg-spinner {
    width: 28px;
    height: 28px;
    border: 3px solid rgba(255,255,255,0.1);
    border-top-color: var(--primary-color, #007aff);
    border-radius: 50%;
    animation: amsgSpin 0.8s linear infinite;
}

.amsg-spinner-sm {
    width: 16px;
    height: 16px;
    border: 2px solid rgba(255,255,255,0.1);
    border-top-color: var(--primary-color, #007aff);
    border-radius: 50%;
    animation: amsgSpin 0.8s linear infinite;
}

body.light-mode .amsg-spinner {
    border-color: rgba(0,0,0,0.08);
    border-top-color: var(--primary-color, #007aff);
}

/* Load More button (pagination) */
.amsg-load-more-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    padding: 14px 20px;
    margin-top: 8px;
    background: var(--glass-tint);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: var(--primary-color);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s ease;
}

.amsg-load-more-btn:hover {
    background: var(--glass-tint-strong);
    transform: translateY(-1px);
}

.amsg-load-more-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
}

.amsg-load-more-btn .load-more-icon {
    font-size: 16px;
    transition: transform 0.3s ease;
}

.amsg-load-more-btn .load-more-icon.spinning {
    animation: amsgSpin 0.8s linear infinite;
}

body.light-mode .amsg-load-more-btn {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.08);
}

body.light-mode .amsg-load-more-btn:hover {
    background: rgba(0,0,0,0.08);
}

/* Message item — Apple-style */
.amsg-item {
    display: flex;
    gap: 14px;
    padding: 16px;
    border-radius: 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    cursor: pointer;
    transition: all 0.25s cubic-bezier(.4,0,.2,1);
    position: relative;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.amsg-item:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.12);
    transform: scale(1.008);
    box-shadow: 0 4px 24px rgba(0,0,0,0.15);
}

.amsg-item:active {
    transform: scale(0.985);
    transition-duration: 0.1s;
}

.amsg-item.unread {
    border-left: none;
    background: rgba(0,122,255,0.06);
    box-shadow: none;
}

.amsg-item.unread .amsg-item-name {
    font-weight: 700;
}

body.light-mode .amsg-item {
    background: rgba(255,255,255,0.7);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

body.light-mode .amsg-item:hover {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.1);
    box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}

body.light-mode .amsg-item.unread {
    border-left: none;
    background: rgba(0,122,255,0.06);
    box-shadow: none;
}

.amsg-item-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.03));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    line-height: 1;
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
}

body.light-mode .amsg-item-avatar {
    background: linear-gradient(135deg, rgba(0,0,0,0.04), rgba(0,0,0,0.02));
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.amsg-item-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.amsg-item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
}

.amsg-item-name-row {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.amsg-item-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.2px;
}

.amsg-item-time {
    font-size: 12px;
    color: rgba(255,255,255,0.38);
    white-space: nowrap;
    flex-shrink: 0;
    font-weight: 400;
    letter-spacing: -0.1px;
}

.amsg-item-time em {
    font-style: normal;
    opacity: 0.5;
}

body.light-mode .amsg-item-time {
    color: rgba(0,0,0,0.38);
}

.amsg-item-offer {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.light-mode .amsg-item-offer {
    color: rgba(0,0,0,0.4);
}

/* 1-line preview */
.amsg-item-preview {
    font-size: 13px;
    color: rgba(255,255,255,0.50);
    line-height: 1.45;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    letter-spacing: -0.05px;
}

.amsg-item-preview em {
    font-style: italic;
    opacity: 0.6;
}

.amsg-item-preview.is-ours {
    color: rgba(139,92,246,0.65);
}

body.light-mode .amsg-item-preview {
    color: rgba(0,0,0,0.48);
}

body.light-mode .amsg-item-preview.is-ours {
    color: rgba(124,58,237,0.75);
}

.amsg-item-badge {
    display: none;
}

/* Responded-by badge — pill style */
.amsg-responded-badge {
    font-size: 9px;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 600;
    white-space: nowrap;
    text-transform: uppercase;
    letter-spacing: 0.4px;
    line-height: 1.4;
}

.amsg-responded-badge.system {
    background: rgba(175, 82, 222, 0.18);
    color: #c084fc;
    border: 1px solid rgba(175, 82, 222, 0.22);
}

.amsg-responded-badge.user {
    background: rgba(52, 199, 89, 0.18);
    color: #6ee7a0;
    border: 1px solid rgba(52, 199, 89, 0.22);
}

body.light-mode .amsg-responded-badge.system {
    background: rgba(175, 82, 222, 0.12);
    color: #8944ab;
    border-color: rgba(175, 82, 222, 0.18);
}

body.light-mode .amsg-responded-badge.user {
    background: rgba(52, 199, 89, 0.12);
    color: #219653;
    border-color: rgba(52, 199, 89, 0.18);
}

/* ====== MESSAGE DETAIL MODAL ====== */

.amsg-detail-panel {
    width: 100%;
    max-width: 540px;
    height: 90vh;
    max-height: 700px;
    background: var(--glass-bg, rgba(28,28,30,0.95));
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.1);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
}

body.light-mode .amsg-detail-panel {
    background: rgba(255,255,255,0.98);
    border-color: rgba(0,0,0,0.1);
}

.amsg-detail-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px 18px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

/* Undo send container */
.amsg-undo-container {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    animation: amsgUndoSlideIn 0.3s ease;
}

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

.amsg-undo-timer {
    position: relative;
    width: 36px;
    height: 36px;
}

.amsg-undo-ring {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

.amsg-undo-ring-bg {
    fill: none;
    stroke: rgba(255,255,255,0.1);
    stroke-width: 3;
}

.amsg-undo-ring-progress {
    fill: none;
    stroke: #ef4444;
    stroke-width: 3;
    stroke-linecap: round;
    stroke-dasharray: 100.53;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1s linear;
}

.amsg-undo-seconds {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 12px;
    font-weight: 700;
    color: #ef4444;
}

.amsg-undo-btn {
    padding: 8px 14px;
    border-radius: 8px;
    border: none;
    background: #ef4444;
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
}

.amsg-undo-btn:hover {
    background: #dc2626;
    transform: scale(1.02);
}

.amsg-undo-btn:active {
    transform: scale(0.98);
}

body.light-mode .amsg-undo-ring-bg {
    stroke: rgba(0,0,0,0.1);
}

body.light-mode .amsg-detail-header {
    border-bottom-color: rgba(0,0,0,0.08);
}

.amsg-detail-back {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #fff);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
}

.amsg-detail-back:hover {
    background: rgba(255,255,255,0.1);
}

body.light-mode .amsg-detail-back {
    background: rgba(0,0,0,0.04);
    color: #333;
}

/* End discussion button */
.amsg-end-disc-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 14px;
    border-radius: 10px;
    border: 1px solid rgba(76, 175, 80, 0.4);
    background: rgba(76, 175, 80, 0.12);
    color: #66bb6a;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
    margin-left: auto;
}
.amsg-end-disc-btn:hover {
    background: rgba(76, 175, 80, 0.25);
    border-color: rgba(76, 175, 80, 0.6);
}
.amsg-end-disc-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.amsg-end-disc-btn.sent {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.2);
    color: #4caf50;
    cursor: default;
}
body.light-mode .amsg-end-disc-btn {
    background: rgba(76, 175, 80, 0.08);
    border-color: rgba(76, 175, 80, 0.3);
    color: #388e3c;
}
body.light-mode .amsg-end-disc-btn:hover {
    background: rgba(76, 175, 80, 0.15);
}

.amsg-detail-user-info {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.amsg-detail-username {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amsg-detail-offer {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

body.light-mode .amsg-detail-offer {
    color: rgba(0,0,0,0.4);
}

/* Thread */
.amsg-detail-thread {
    flex: 1;
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.amsg-detail-thread::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    -webkit-appearance: none;
}

/* Hide scrollbar on detail panel and inline container */
.amsg-detail-panel,
.amsg-detail-inline {
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
}

.amsg-detail-panel::-webkit-scrollbar,
.amsg-detail-inline::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
    -webkit-appearance: none;
}

.amsg-bubble {
    max-width: 85%;
    padding: 10px 14px;
    border-radius: 16px;
    font-size: 14px;
    line-height: 1.45;
    word-break: break-word;
    position: relative;
}

.amsg-bubble.incoming {
    align-self: flex-start;
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #fff);
    border-bottom-left-radius: 4px;
}

.amsg-bubble.outgoing {
    align-self: flex-end;
    background: var(--primary-color, #007aff);
    color: #fff;
    border-bottom-right-radius: 4px;
}

/* Pending send state */
.amsg-bubble-pending {
    opacity: 0.7;
    animation: amsgBubblePulse 1.5s ease-in-out infinite;
}

@keyframes amsgBubblePulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 0.5; }
}

/* Removing animation */
.amsg-bubble-removing {
    animation: amsgBubbleRemove 0.2s ease forwards;
}

@keyframes amsgBubbleRemove {
    to {
        opacity: 0;
        transform: translateX(30px) scale(0.9);
    }
}

body.light-mode .amsg-bubble.incoming {
    background: rgba(0,0,0,0.06);
    color: #1a1a1a;
}

.amsg-bubble-time {
    font-size: 10px;
    opacity: 0.5;
    margin-top: 4px;
    text-align: right;
}

.amsg-bubble.incoming .amsg-bubble-time {
    text-align: left;
}

/* Offer link inside bubble */
.amsg-bubble-offer {
    margin-bottom: 6px;
    padding: 6px 10px;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 12px;
}

.amsg-bubble-offer a {
    color: var(--primary-color, #007aff);
    text-decoration: none;
    font-weight: 500;
    word-break: break-word;
}

.amsg-bubble-offer a:hover {
    text-decoration: underline;
}

body.light-mode .amsg-bubble-offer {
    background: rgba(0,0,0,0.04);
}

/* Offer link in detail header */
.amsg-offer-link {
    color: var(--primary-color, #007aff);
    text-decoration: none;
    font-size: inherit;
}

.amsg-offer-link:hover {
    text-decoration: underline;
}

/* Attachments in bubble */
.amsg-bubble-attachments {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.amsg-bubble-attachment {
    max-width: 180px;
    max-height: 140px;
    border-radius: 8px;
    object-fit: cover;
    cursor: pointer;
}

/* Reply section */
.amsg-reply-section {
    padding: 12px 16px 16px;
    border-top: 1px solid rgba(255,255,255,0.08);
    flex-shrink: 0;
}

body.light-mode .amsg-reply-section {
    border-top-color: rgba(0,0,0,0.08);
}

.amsg-autoreply-bar {
    display: flex;
    gap: 8px;
    align-items: center;
    margin-bottom: 10px;
    flex-wrap: wrap;
}

.amsg-autoreply-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(var(--primary-rgb, 0,122,255), 0.3);
    background: rgba(var(--primary-rgb, 0,122,255), 0.08);
    color: var(--primary-color, #007aff);
    font-size: 12px;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.amsg-autoreply-btn:hover {
    background: rgba(var(--primary-rgb, 0,122,255), 0.15);
    border-color: var(--primary-color, #007aff);
}

.amsg-ai-btn {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0,122,255), 0.12), rgba(147, 51, 234, 0.12));
    border-color: rgba(147, 51, 234, 0.35);
    color: rgba(147, 51, 234, 0.9);
}

.amsg-ai-btn:hover {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0,122,255), 0.2), rgba(147, 51, 234, 0.2)) !important;
    border-color: rgba(147, 51, 234, 0.6) !important;
    color: rgba(147, 51, 234, 1);
}

body.light-mode .amsg-ai-btn {
    background: linear-gradient(135deg, rgba(var(--primary-rgb, 0,122,255), 0.08), rgba(147, 51, 234, 0.08));
    border-color: rgba(147, 51, 234, 0.25);
    color: rgba(109, 40, 180, 0.9);
}

.amsg-reply-input-wrapper {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}

.amsg-reply-input {
    flex: 1;
    padding: 10px 14px;
    border-radius: 14px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary, #fff);
    font-size: 14px;
    font-family: inherit;
    resize: none;
    outline: none;
    transition: border-color 0.2s;
    min-height: 42px;
    max-height: 120px;
}

.amsg-reply-input:focus {
    border-color: var(--primary-color, #007aff);
}

body.light-mode .amsg-reply-input {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #1a1a1a;
}

.amsg-send-btn {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: none;
    background: var(--primary-color, #007aff);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
}

.amsg-send-btn:hover {
    filter: brightness(1.1);
    transform: scale(1.05);
}

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

.amsg-send-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
}

.amsg-reply-generating {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0;
    color: rgba(255,255,255,0.5);
    font-size: 12px;
}

body.light-mode .amsg-reply-generating {
    color: rgba(0,0,0,0.5);
}

/* Pagination */
.amsg-pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 8px;
    padding: 14px 0 4px;
}

.amsg-page-btn {
    padding: 6px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.6);
    font-size: 13px;
    font-family: inherit;
    cursor: pointer;
    transition: all 0.2s;
}

.amsg-page-btn:hover:not(:disabled) {
    background: rgba(var(--primary-rgb),0.1);
    color: var(--primary-color, #007aff);
}

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

.amsg-page-info {
    font-size: 12px;
    color: rgba(255,255,255,0.4);
}

body.light-mode .amsg-page-info {
    color: rgba(0,0,0,0.4);
}

/* Mobile responsive */
@media (max-width: 600px) {
    .amsg-detail-panel {
        height: 100vh;
        max-height: 100vh;
        border-radius: 0;
    }
}

/* ====== DESKTOP MASTER-DETAIL LAYOUT ====== */

/* Inline detail – hidden on mobile */
.amsg-detail-inline {
    display: none;
}

.amsg-detail-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    height: 100%;
    min-height: 400px;
    color: rgba(255,255,255,0.3);
    font-size: 14px;
    user-select: none;
}

body.light-mode .amsg-detail-placeholder {
    color: rgba(0,0,0,0.25);
}

@media (min-width: 900px) {
    /* Tab panel becomes flex row */
    #amsg-panel-messages.active,
    #amsg-panel-discussions.active {
        display: flex !important;
        gap: 0;
        padding: 0;
        min-height: 600px;
        height: 75vh;
        max-height: 85vh;
    }

    /* List pane – left side */
    .amsg-list-pane {
        width: 340px;
        min-width: 280px;
        max-width: 380px;
        display: flex;
        flex-direction: column;
        border-right: 1px solid rgba(255,255,255,0.08);
        padding: 16px 14px;
        flex-shrink: 0;
        overflow: hidden;
    }

    body.light-mode .amsg-list-pane {
        border-right-color: rgba(0,0,0,0.08);
    }

    .amsg-list-pane .amsg-list {
        max-height: none;
        flex: 1;
        min-height: 0;
    }

    .amsg-list-pane .amsg-toolbar {
        padding: 0;
    }

    .amsg-list-pane .amsg-filter-tabs {
        margin-bottom: 10px;
    }

    /* Inline detail pane – right side */
    .amsg-detail-inline {
        display: flex;
        flex: 1;
        flex-direction: column;
        min-width: 0;
        position: relative;
        overflow: hidden;
    }

    /* When detail panel is inside inline container */
    .amsg-detail-inline .amsg-detail-panel {
        width: 100%;
        max-width: none;
        height: 100%;
        max-height: none;
        border-radius: 0;
        border: none;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
    }

    .amsg-detail-inline .amsg-detail-header {
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    body.light-mode .amsg-detail-inline .amsg-detail-header {
        border-bottom-color: rgba(0,0,0,0.08);
    }

    /* Hide the back arrow on desktop inline – no need to "go back" */
    .amsg-detail-inline .amsg-detail-back {
        display: none;
    }

    /* Selected message item highlight */
    .amsg-item.amsg-selected {
        background: rgba(var(--primary-rgb), 0.12);
        border-color: rgba(var(--primary-rgb), 0.25);
    }

    body.light-mode .amsg-item.amsg-selected {
        background: rgba(var(--primary-rgb), 0.08);
        border-color: rgba(var(--primary-rgb), 0.18);
    }

    /* On desktop, hide the modal when we use inline */
    #amsgDetailModal.amsg-desktop-hidden,
    #amsgDiscDetailModal.amsg-desktop-hidden {
        display: none !important;
    }
}

/* ====== AUTORESPONDER FORM ELEMENTS ====== */

/* Toggle switch */
.amsg-ar-switch {
    position: relative;
    width: 50px;
    height: 28px;
    flex-shrink: 0;
}

.amsg-ar-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

.amsg-ar-slider {
    position: absolute;
    inset: 0;
    background: rgba(255,255,255,0.12);
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s;
}

.amsg-ar-slider::before {
    content: '';
    position: absolute;
    width: 22px;
    height: 22px;
    left: 3px;
    bottom: 3px;
    background: #fff;
    border-radius: 50%;
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

.amsg-ar-switch input:checked + .amsg-ar-slider {
    background: #34c759;
}

.amsg-ar-switch input:checked + .amsg-ar-slider::before {
    transform: translateX(22px);
}

body.light-mode .amsg-ar-slider {
    background: rgba(0,0,0,0.12);
}

/* Select */
.amsg-ar-select {
    padding: 7px 28px 7px 12px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    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='rgba(255,255,255,0.4)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    flex-shrink: 0;
    transition: border-color 0.2s;
}

.amsg-ar-select:focus {
    border-color: var(--primary-color, #007aff);
}

.amsg-ar-select option {
    background: #1c1c1e;
    color: #fff;
}

body.light-mode .amsg-ar-select {
    background-color: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #1a1a1a;
    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='rgba(0,0,0,0.35)' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

body.light-mode .amsg-ar-select option {
    background: #fff;
    color: #1a1a1a;
}

/* Style buttons bar */
.amsg-style-divider {
    width: 1px;
    height: 20px;
    background: rgba(255,255,255,0.1);
    margin: 0 6px;
}

body.light-mode .amsg-style-divider {
    background: rgba(0,0,0,0.1);
}

.amsg-style-label {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-right: 4px;
}

body.light-mode .amsg-style-label {
    color: rgba(0,0,0,0.4);
}

.amsg-style-btn {
    padding: 5px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.amsg-style-btn:hover {
    background: rgba(139,92,246,0.15);
    border-color: rgba(139,92,246,0.3);
    color: #a78bfa;
}

.amsg-style-btn:active {
    transform: scale(0.97);
}

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

body.light-mode .amsg-style-btn {
    border-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.6);
}

body.light-mode .amsg-style-btn:hover {
    background: rgba(139,92,246,0.1);
    border-color: rgba(139,92,246,0.2);
    color: #7c3aed;
}

/* Translate select */
.amsg-translate-select {
    padding: 5px 8px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: rgba(255,255,255,0.7);
    font-size: 11px;
    cursor: pointer;
    outline: none;
    transition: all 0.2s;
}

.amsg-translate-select:hover,
.amsg-translate-select:focus {
    background: rgba(139,92,246,0.15);
    border-color: rgba(139,92,246,0.3);
}

body.light-mode .amsg-translate-select {
    border-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.03);
    color: rgba(0,0,0,0.6);
}

body.light-mode .amsg-translate-select:hover,
body.light-mode .amsg-translate-select:focus {
    background: rgba(139,92,246,0.1);
    border-color: rgba(139,92,246,0.2);
}

/* Translate bar under input */
.amsg-translate-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 0 0;
}

.amsg-translate-bar .amsg-translate-select {
    flex: 1;
    max-width: 180px;
}

/* Translate button under messages */
.amsg-bubble-translate {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    margin-top: 6px;
    padding: 4px 10px;
    border-radius: 12px;
    border: none;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.5);
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}

.amsg-bubble-translate:hover {
    background: rgba(139,92,246,0.2);
    color: #a78bfa;
}

.amsg-bubble-translate svg {
    width: 12px;
    height: 12px;
}

body.light-mode .amsg-bubble-translate {
    background: rgba(0,0,0,0.05);
    color: rgba(0,0,0,0.4);
}

body.light-mode .amsg-bubble-translate:hover {
    background: rgba(139,92,246,0.15);
    color: #7c3aed;
}

/* Translated text under bubble */
.amsg-bubble-translated {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(139,92,246,0.1);
    border-left: 3px solid #8b5cf6;
    font-size: 13px;
    color: rgba(255,255,255,0.85);
}

.amsg-bubble-translated-label {
    display: block;
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: #8b5cf6;
    margin-bottom: 4px;
}

body.light-mode .amsg-bubble-translated {
    background: rgba(139,92,246,0.08);
    color: rgba(0,0,0,0.8);
}

/* Make autoreply bar wrap on mobile */
.amsg-autoreply-bar {
    flex-wrap: wrap;
    gap: 6px;
}

/* Time inputs */
.amsg-ar-hours {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.amsg-ar-hours span {
    color: rgba(255,255,255,0.3);
    font-size: 13px;
}

body.light-mode .amsg-ar-hours span {
    color: rgba(0,0,0,0.3);
}

.amsg-ar-time {
    padding: 7px 10px;
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.1);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary, #fff);
    font-size: 13px;
    font-family: inherit;
    outline: none;
    width: 90px;
    transition: border-color 0.2s;
}

.amsg-ar-time:focus {
    border-color: var(--primary-color, #007aff);
}

body.light-mode .amsg-ar-time {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #1a1a1a;
}

/* Auto-reply log items */
.amsg-ar-log {
    max-height: 200px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.amsg-ar-log-empty {
    text-align: center;
    padding: 16px;
    font-size: 12px;
    color: rgba(255,255,255,0.25);
}

body.light-mode .amsg-ar-log-empty {
    color: rgba(0,0,0,0.25);
}

.amsg-ar-log-item {
    display: flex;
    gap: 10px;
    padding: 8px 10px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    font-size: 12px;
    align-items: flex-start;
}

body.light-mode .amsg-ar-log-item {
    background: rgba(0,0,0,0.02);
}

.amsg-ar-log-icon {
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    background: rgba(52, 199, 89, 0.15);
    color: #34c759;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
}

.amsg-ar-log-icon.failed {
    background: rgba(255, 59, 48, 0.15);
    color: #ff3b30;
}

.amsg-ar-log-info {
    flex: 1;
    min-width: 0;
}

.amsg-ar-log-user {
    font-weight: 600;
    color: var(--text-primary, #fff);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.amsg-ar-log-preview {
    color: rgba(255,255,255,0.4);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 2px;
}

body.light-mode .amsg-ar-log-preview {
    color: rgba(0,0,0,0.4);
}

.amsg-ar-log-time {
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    white-space: nowrap;
    flex-shrink: 0;
    align-self: center;
}

body.light-mode .amsg-ar-log-time {
    color: rgba(0,0,0,0.3);
}

/* Pulse animation for active indicator */
@keyframes arPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.amsg-ar-status.active {
    animation: arPulse 2s ease-in-out infinite;
}

/* ── AI Settings Section ────────────────────────────────────────────── */
.amsg-ai-settings {
    margin: 0;
    border-top: 1px solid rgba(255,255,255,0.06);
}

.amsg-ai-settings-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 14px 16px;
    cursor: pointer;
    transition: background 0.2s;
    -webkit-user-select: none;
    user-select: none;
}

.amsg-ai-settings-header:hover {
    background: rgba(255,255,255,0.03);
}

.amsg-ai-settings-header-left {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary, #fff);
}

.amsg-ai-settings-header-left svg {
    color: #a78bfa;
}

.amsg-ai-settings-header-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

.amsg-ai-status {
    font-size: 12px;
    font-weight: 500;
    padding: 3px 10px;
    border-radius: 12px;
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.4);
    transition: all 0.3s;
}

.amsg-ai-status.custom {
    background: rgba(139,92,246,0.15);
    color: #a78bfa;
}

body.light-mode .amsg-ai-status {
    background: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.4);
}

body.light-mode .amsg-ai-status.custom {
    background: rgba(139,92,246,0.12);
    color: #7c3aed;
}

.amsg-ai-chevron {
    color: rgba(255,255,255,0.3);
    transition: transform 0.3s ease;
}

body.light-mode .amsg-ai-chevron {
    color: rgba(0,0,0,0.25);
}

.amsg-ai-settings.expanded .amsg-ai-chevron {
    transform: rotate(180deg);
}

.amsg-ai-settings-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.35s ease-out;
}

.amsg-ai-settings.expanded .amsg-ai-settings-body {
    max-height: 600px;
}

.amsg-ai-prompt-section {
    padding: 16px;
    background: rgba(255,255,255,0.02);
}

body.light-mode .amsg-ai-prompt-section {
    background: rgba(0,0,0,0.015);
}

.amsg-ai-prompt-label {
    margin-bottom: 12px;
}

.amsg-ai-prompt-label .amsg-ar-label {
    display: block;
    margin-bottom: 4px;
}

.amsg-ai-prompt-textarea {
    min-height: 180px;
    resize: vertical;
}

.amsg-ai-prompt-actions {
    display: flex;
    gap: 10px;
    margin-top: 12px;
}

.amsg-ai-save-btn,
.amsg-ai-reset-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 10px 16px;
    border-radius: 10px;
    border: none;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
}

.amsg-ai-save-btn {
    background: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 100%);
    color: #fff;
}

.amsg-ai-save-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(139,92,246,0.3);
}

.amsg-ai-reset-btn {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.6);
    border: 1px solid rgba(255,255,255,0.1);
}

.amsg-ai-reset-btn:hover {
    background: rgba(255,255,255,0.1);
    color: var(--text-primary, #fff);
}

body.light-mode .amsg-ai-reset-btn {
    background: rgba(0,0,0,0.04);
    color: rgba(0,0,0,0.5);
    border-color: rgba(0,0,0,0.1);
}

body.light-mode .amsg-ai-reset-btn:hover {
    background: rgba(0,0,0,0.08);
    color: #333;
}

/* ── Cron status indicator ────────────────────────────────────────── */

.amsg-ar-cron-status {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    margin: 10px 0;
    border-radius: 10px;
    background: rgba(0, 122, 255, 0.08);
    border: 1px solid rgba(0, 122, 255, 0.15);
    font-size: 11px;
    color: rgba(255,255,255,0.6);
    flex-wrap: wrap;
}

body.light-mode .amsg-ar-cron-status {
    background: rgba(0, 122, 255, 0.06);
    border-color: rgba(0, 122, 255, 0.12);
    color: rgba(0,0,0,0.5);
}

.amsg-ar-cron-icon {
    font-size: 14px;
    flex-shrink: 0;
}

.amsg-ar-cron-count {
    font-weight: 600;
    color: #34c759;
}

.amsg-ar-cron-msg {
    opacity: 0.6;
    font-size: 10px;
}

.amsg-ar-cron-warning {
    color: #ff9800;
    font-size: 11px;
    font-weight: 600;
    animation: cronWarnPulse 2s ease-in-out infinite;
}

@keyframes cronWarnPulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.amsg-ar-run-now-btn {
    margin-left: auto;
    padding: 4px 12px;
    border: 1px solid rgba(59, 130, 246, 0.5);
    border-radius: 6px;
    background: rgba(59, 130, 246, 0.15);
    color: #60a5fa;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    white-space: nowrap;
}

.amsg-ar-run-now-btn:hover {
    background: rgba(59, 130, 246, 0.3);
    border-color: #3b82f6;
}

.amsg-ar-run-now-btn:disabled {
    opacity: 0.6;
    cursor: wait;
}

body.light-mode .amsg-ar-run-now-btn {
    background: rgba(59, 130, 246, 0.1);
    color: #2563eb;
    border-color: rgba(59, 130, 246, 0.3);
}

body.light-mode .amsg-ar-cron-warning {
    color: #e65100;
}

/* ── Cron setup info ──────────────────────────────────────────────── */

.amsg-ar-cron-info {
    margin: 12px 0 4px;
    padding: 10px 12px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.1);
}

body.light-mode .amsg-ar-cron-info {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
}

.amsg-ar-cron-info-header {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    font-weight: 600;
    color: rgba(255,255,255,0.6);
    margin-bottom: 6px;
}

body.light-mode .amsg-ar-cron-info-header {
    color: rgba(0,0,0,0.5);
}

.amsg-ar-cron-info-text {
    font-size: 11px;
    color: rgba(255,255,255,0.4);
    margin: 0 0 8px;
    line-height: 1.5;
}

body.light-mode .amsg-ar-cron-info-text {
    color: rgba(0,0,0,0.4);
}

.amsg-ar-cron-cmd {
    display: block;
    font-family: 'SF Mono', 'Fira Code', monospace;
    font-size: 10px;
    padding: 8px 10px;
    border-radius: 8px;
    background: rgba(0,0,0,0.3);
    color: #34c759;
    word-break: break-all;
    line-height: 1.5;
    user-select: all;
}

body.light-mode .amsg-ar-cron-cmd {
    background: rgba(0,0,0,0.06);
    color: #28a745;
}

/* ── Source badge (CRON) in log ────────────────────────────────────── */

.amsg-ar-source-cron {
    display: inline-block;
    font-size: 8px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 1px 5px;
    border-radius: 4px;
    background: rgba(0, 122, 255, 0.15);
    color: #007aff;
    vertical-align: middle;
    margin-left: 4px;
}

body.light-mode .amsg-ar-source-cron {
    background: rgba(0, 122, 255, 0.1);
}


/* ═══════════════════════════════════════════════════════════════════
   BULK OVOKO MODAL — Masowe dodawanie ofert z Allegro na Ovoko
   Styled identically to .sale-wizard-modal (Allegro offer wizard)
   ═══════════════════════════════════════════════════════════════════ */

@keyframes bulkFadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes bulkCardIn {
    from { opacity: 0; transform: translateX(16px); }
    to   { opacity: 1; transform: translateX(0); }
}
@keyframes bulkSuccessDraw {
    from { stroke-dashoffset: 28; }
    to   { stroke-dashoffset: 0; }
}
@keyframes bulkShimmer {
    0%   { background-position: -200% 0; }
    100% { background-position: 200% 0; }
}
@keyframes bulkCountBump {
    0%   { transform: scale(1); }
    50%  { transform: scale(1.12); }
    100% { transform: scale(1); }
}
@keyframes bulkBarSlide {
    from { transform: translateY(100%); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

/* ── Overlay — identical to sale-form-modal-overlay ── */
.bulk-ovoko-overlay {
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

/* ── Modal — identical to .sale-wizard-modal ──
   Overrides inherited .custom-modal { max-width: 360px } */
.bulk-ovoko-modal {
    position: relative;
    max-width: 600px;
    width: 94%;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(30, 30, 35, 0.95);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.45),
        0 0 0 0.5px rgba(255, 255, 255, 0.06),
        inset 0 1px 0 rgba(255, 255, 255, 0.08);
    padding-bottom: 0;
    transform: scale(1);
}

/* ── Header ── */
.bulk-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    position: relative;
    flex-shrink: 0;
}
.bulk-close-btn {
    position: absolute;
    top: 16px; right: 16px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px; height: 28px;
    padding: 0;
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 50%;
    background: rgba(255,255,255,0.06);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-tertiary);
    cursor: pointer;
    transition: all 0.18s ease;
    z-index: 2;
}
.bulk-close-btn:hover {
    background: rgba(var(--ios-red-rgb), 0.15);
    border-color: rgba(var(--ios-red-rgb), 0.25);
    color: rgba(255, 90, 80, 0.95);
    transform: scale(1.05);
}
.bulk-close-btn:active {
    background: rgba(var(--ios-red-rgb), 0.25);
    transform: scale(0.95);
}
.bulk-close-btn svg { width: 14px; height: 14px; }

.bulk-title {
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--text-primary);
    margin: 0 0 3px;
    padding-right: 40px; /* space for close button */
}
.bulk-subtitle {
    font-size: 0.76rem;
    color: var(--text-tertiary);
    margin: 0;
    padding-right: 40px;
}

/* ── Sync warning banner ── */
.bulk-sync-warning {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 20px;
    padding: 9px 14px;
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.2);
    border-radius: 10px;
    font-size: 0.73rem;
    line-height: 1.4;
    color: #fbbf24;
}

.bulk-sync-warning svg {
    flex-shrink: 0;
    color: #fbbf24;
}

.bulk-sync-warning b {
    font-weight: 700;
    color: #fcd34d;
}

body.light-mode .bulk-sync-warning {
    background: rgba(245, 158, 11, 0.08);
    border-color: rgba(245, 158, 11, 0.2);
    color: #b45309;
}

body.light-mode .bulk-sync-warning svg {
    color: #d97706;
}

body.light-mode .bulk-sync-warning b {
    color: #92400e;
}

/* ── Search ── */
.bulk-search-wrap {
    padding: 14px 20px 0;
    flex-shrink: 0;
}
.bulk-search-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 10px;
}
.bulk-search-field {
    position: relative;
    flex: 1;
}
.bulk-search-icon {
    display: none;
}
.bulk-search-field:focus-within .bulk-search-icon {
    opacity: 0.8;
    color: #a855f7;
}
.bulk-search-input {
    width: 100%;
    padding: 12px 14px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: var(--text-primary);
    font-size: 0.86rem;
    outline: none;
    transition: all 0.18s;
    box-sizing: border-box;
    font-family: inherit;
    -webkit-appearance: none;
    appearance: none;
}
.bulk-search-input::-webkit-search-cancel-button,
.bulk-search-input::-webkit-search-decoration,
.bulk-search-input::-webkit-search-results-button,
.bulk-search-input::-webkit-search-results-decoration {
    display: none;
    -webkit-appearance: none;
}
.bulk-search-input:focus {
    border-color: rgba(168,85,247,0.35);
    background: rgba(168,85,247,0.03);
    box-shadow: 0 0 0 2px rgba(168,85,247,0.05);
}
.bulk-search-input::placeholder {
    color: var(--text-tertiary);
    font-size: 0.82rem;
}

/* Select all - pod wyszukiwaniem */
.bulk-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 0 6px;
    min-height: 28px;
}
.bulk-results-info {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    opacity: 0.7;
}
.bulk-select-all-btn {
    padding: 5px 11px;
    border: 1px solid rgba(168,85,247,0.22);
    border-radius: 8px;
    background: rgba(168,85,247,0.08);
    color: rgba(168,85,247,0.85);
    font-size: 0.72rem;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
    transition: all 0.18s ease;
    font-family: inherit;
}
.bulk-select-all-btn:hover {
    background: rgba(168,85,247,0.15);
    border-color: rgba(168,85,247,0.35);
    color: #a855f7;
}
.bulk-select-all-btn:active {
    transform: scale(0.96);
}

/* ── Results ── */
.bulk-results-container {
    flex: 1;
    overflow-y: auto;
    min-height: 120px;
    padding: 6px 16px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.bulk-results-container::-webkit-scrollbar { width: 3px; }
.bulk-results-container::-webkit-scrollbar-track { background: transparent; }
.bulk-results-container::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }

.bulk-results-list {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.bulk-hint {
    text-align: center;
    padding: 32px 20px;
    color: var(--text-tertiary);
    font-size: 0.82rem;
}
.bulk-hint svg { opacity: 0.2; margin-bottom: 8px; display: block; margin-left: auto; margin-right: auto; }

/* ── Offer row ── */
.bulk-offer-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 14px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.12s ease;
    border: 1.5px solid transparent;
    user-select: none;
    animation: bulkFadeIn 0.18s ease both;
}
.bulk-offer-row:hover {
    background: rgba(255,255,255,0.03);
}
.bulk-offer-row.selected {
    background: rgba(34,197,94,0.06);
    border-color: rgba(34,197,94,0.35);
}
.bulk-offer-row.selected .bulk-thumb {
    border-color: rgba(34,197,94,0.25);
}

.bulk-thumb {
    width: 72px; height: 72px;
    border-radius: 10px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.08);
    transition: border-color 0.12s, transform 0.15s ease, box-shadow 0.15s ease;
    cursor: pointer;
}
.bulk-thumb:hover {
    transform: scale(1.05);
    border-color: rgba(168,85,247,0.35);
    box-shadow: 0 4px 12px rgba(0,0,0,0.25);
}
.bulk-offer-info { flex: 1; min-width: 0; }
.bulk-offer-name {
    font-size: 0.86rem;
    font-weight: 500;
    color: var(--text-primary);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.35;
}
.bulk-offer-meta {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 2px;
    flex-wrap: wrap;
}
.bulk-offer-price {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.bulk-offer-date {
    font-size: 0.74rem;
    color: var(--text-tertiary);
    opacity: 0.6;
}
.bulk-offer-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 2px;
}
.bulk-offer-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    color: rgba(168,85,247,0.7);
    text-decoration: none;
    transition: color 0.15s;
}
.bulk-offer-link:hover {
    color: #a855f7;
}
.bulk-offer-link svg {
    width: 11px;
    height: 11px;
}
.bulk-offer-id {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    opacity: 0.4;
    font-variant-numeric: tabular-nums;
}

/* ── Dismiss (Już dodałem) button ── */
.bulk-dismiss-btn {
    flex-shrink: 0;
    padding: 5px 10px;
    font-size: 0.72rem;
    font-weight: 500;
    color: var(--text-tertiary);
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s;
    white-space: nowrap;
    font-family: inherit;
    line-height: 1.2;
    align-self: center;
    opacity: 0;
    pointer-events: none;
}
.bulk-offer-row:hover .bulk-dismiss-btn {
    opacity: 1;
    pointer-events: auto;
}
.bulk-dismiss-btn:hover {
    background: rgba(251,146,60,0.12);
    border-color: rgba(251,146,60,0.3);
    color: #fb923c;
}
.bulk-dismiss-btn:active {
    transform: scale(0.95);
}

/* ── Bottom bar ── */
.bulk-bottom-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    padding: 12px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: rgba(34,197,94,0.025);
    flex-shrink: 0;
    animation: bulkBarSlide 0.22s cubic-bezier(.21,1.02,.73,1) both;
}
.bulk-bottom-main {
    min-width: 0;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.bulk-selected-count {
    font-size: 0.86rem;
    font-weight: 600;
    color: #22c55e;
    display: flex;
    align-items: center;
    gap: 3px;
}
.bulk-selected-count span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px; height: 20px;
    background: rgba(34,197,94,0.12);
    border-radius: 10px;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0 3px;
}
.bulk-selected-count.bump span {
    animation: bulkCountBump 0.22s ease;
}
.bulk-batch-progress {
    display: none;
}
.bulk-batch-progress-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 6px;
    font-variant-numeric: tabular-nums;
}
.bulk-batch-progress-label {
    font-size: 0.74rem;
    color: rgba(255,255,255,0.72);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.bulk-batch-progress-numbers {
    font-size: 0.76rem;
    font-weight: 700;
    color: #d8b4fe;
}
.bulk-batch-progress-bar {
    height: 7px;
    border-radius: 999px;
    background: rgba(168,85,247,0.12);
    overflow: hidden;
    box-shadow: inset 0 1px 1px rgba(0,0,0,0.22);
}
.bulk-batch-progress-fill {
    height: 100%;
    width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, #c084fc 0%, #a855f7 45%, #7c3aed 100%);
    transition: width 0.28s ease;
    position: relative;
}
.bulk-batch-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.26), transparent);
    background-size: 180% 100%;
    animation: bulkShimmer 1.6s linear infinite;
}
.bulk-bottom-bar.is-processing {
    background: linear-gradient(180deg, rgba(168,85,247,0.05), rgba(124,58,237,0.08));
    border-top-color: rgba(168,85,247,0.18);
}
.bulk-bottom-bar.is-processing .bulk-selected-count {
    color: #e9d5ff;
}
.bulk-bottom-bar.is-processing .bulk-selected-count span {
    background: rgba(168,85,247,0.16);
    color: #f3e8ff;
}

/* ── Buttons ── */
.bulk-start-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: 0 2px 6px rgba(168,85,247,0.2);
}
.bulk-start-btn svg { width: 13px; height: 13px; }
.bulk-start-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(168,85,247,0.3);
}
.bulk-start-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}
.bulk-start-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(0.3);
}
.bulk-start-btn.bulk-btn-loading {
    opacity: 1;
    pointer-events: none;
    min-width: 88px;
    justify-content: center;
    filter: none;
    background: linear-gradient(135deg, #7c3aed, #6d28d9);
    box-shadow: 0 4px 18px rgba(124,58,237,0.28);
}
.bulk-start-btn-progress {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 48px;
    font-variant-numeric: tabular-nums;
}

/* ═══ REVIEW PHASE ═══ */
.bulk-progress-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2px;
    padding-right: 36px; /* space for close button */
}
.bulk-progress-text {
    font-size: 0.96rem;
    font-weight: 700;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.bulk-progress-added {
    font-size: 0.76rem;
    font-weight: 600;
    color: #22c55e;
    background: rgba(34,197,94,0.08);
    padding: 1px 5px;
    border-radius: 6px;
}
.bulk-progress-bar {
    width: 100%;
    height: 2px;
    background: rgba(255,255,255,0.04);
    border-radius: 2px;
    overflow: hidden;
    margin-top: 2px;
}
.bulk-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #7c3aed);
    border-radius: 2px;
    transition: width 0.4s cubic-bezier(.4,0,.2,1);
    position: relative;
}
.bulk-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
    background-size: 200% 100%;
    animation: bulkShimmer 2s linear infinite;
}

/* Processing stage */
.bulk-process-stage {
    flex: 1;
    min-height: 260px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 28px 24px 32px;
}
.bulk-process-card {
    width: min(100%, 420px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 26px 24px 24px;
    border-radius: 22px;
    background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.06);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.04);
    text-align: center;
}
.bulk-process-spinner-wrap {
    width: 68px;
    height: 68px;
    border-radius: 999px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, rgba(168,85,247,0.16), rgba(168,85,247,0.02) 70%);
    margin-bottom: 4px;
}
.bulk-process-spinner {
    width: 28px;
    height: 28px;
    border-width: 2px;
}
.bulk-process-count {
    font-size: 1.9rem;
    line-height: 1;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.bulk-process-label {
    font-size: 0.92rem;
    font-weight: 600;
    color: #d8b4fe;
}
.bulk-process-subtitle {
    max-width: 320px;
    font-size: 0.76rem;
    line-height: 1.5;
    color: var(--text-tertiary);
    opacity: 0.85;
    font-variant-numeric: tabular-nums;
    transition: color 0.2s ease;
}
.bulk-process-progress {
    width: min(320px, 100%);
    height: 6px;
    margin-top: 12px;
    border-radius: 999px;
    background: rgba(255,255,255,0.06);
    overflow: hidden;
    position: relative;
    box-shadow: inset 0 1px 0 rgba(0,0,0,0.18);
}
.bulk-process-progress-fill {
    height: 100%;
    width: 0%;
    border-radius: 999px;
    background: linear-gradient(90deg, #a855f7 0%, #c084fc 50%, #d8b4fe 100%);
    background-size: 200% 100%;
    box-shadow: 0 0 12px rgba(168,85,247,0.45);
    transition: width 0.45s cubic-bezier(.21,1.02,.73,1);
    animation: bulkProcessShimmer 1.6s linear infinite;
    position: relative;
}
.bulk-process-progress-fill::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,0.35) 50%, transparent 100%);
    background-size: 50% 100%;
    background-repeat: no-repeat;
    animation: bulkProcessSweep 1.4s linear infinite;
    border-radius: inherit;
    mix-blend-mode: overlay;
}
@keyframes bulkProcessShimmer {
    0% { background-position: 0% 50%; }
    100% { background-position: 200% 50%; }
}
@keyframes bulkProcessSweep {
    0% { background-position: -50% 0%; }
    100% { background-position: 150% 0%; }
}
body.light-mode .bulk-process-progress { background: rgba(0,0,0,0.06); }

/* Review scroll */
.bulk-review-scroll {
    flex: 1;
    overflow-y: auto;
    padding: 14px 24px 10px;
    min-height: 0;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.05) transparent;
    animation: bulkCardIn 0.22s cubic-bezier(.21,1.02,.73,1) both;
}
.bulk-review-scroll::-webkit-scrollbar { width: 3px; }
.bulk-review-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.06); border-radius: 3px; }

/* Offer preview */
.bulk-review-offer-preview {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(255,255,255,0.03);
    border: 1px solid rgba(255,255,255,0.06);
    border-left: 3px solid #a855f7;
    border-radius: 12px;
    margin-bottom: 12px;
}
.bulk-preview-img {
    width: 52px; height: 52px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.04);
}
.bulk-preview-info { flex: 1; min-width: 0; }
.bulk-preview-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.25;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.bulk-preview-meta {
    font-size: 0.78rem;
    color: var(--text-tertiary);
    margin-top: 2px;
    font-variant-numeric: tabular-nums;
}


/* Form grid */
.bulk-form-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px 16px;
}
.bulk-form-section {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.bulk-form-section.full-width {
    grid-column: 1 / -1;
}
.bulk-label {
    font-size: 0.74rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    line-height: 1;
    padding-left: 1px;
}
.bulk-label .bulk-label-hint {
    font-weight: 400;
    text-transform: none;
    letter-spacing: 0;
    opacity: 0.6;
}
.bulk-ovoko-modal .bulk-input {
    padding: 9px 12px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: var(--text-primary);
    font-size: 0.86rem;
    font-weight: 400;
    outline: none;
    transition: all 0.15s;
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    line-height: 1.25;
    -moz-appearance: none;
    appearance: none;
}
.bulk-ovoko-modal .bulk-input.bulk-input-sm {
    padding: 8px 10px;
    font-size: 0.84rem;
}
.bulk-ovoko-modal .bulk-input:focus {
    border-color: rgba(168,85,247,0.3);
    background: rgba(168,85,247,0.025);
    box-shadow: 0 0 0 2px rgba(168,85,247,0.06);
}
.bulk-ovoko-modal .bulk-input::placeholder {
    color: var(--text-tertiary);
    font-size: 0.78rem;
}
.bulk-ovoko-modal select.bulk-input {
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23888' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    padding-right: 24px;
}
.bulk-ovoko-modal select.bulk-input.bulk-input-sm {
    padding-right: 24px;
}

/* Auto tag */
.bulk-auto-tag {
    font-size: 0.48rem;
    color: #fb923c;
    margin-top: 0;
    padding-left: 1px;
    display: flex;
    align-items: center;
    gap: 2px;
    opacity: 0;
    animation: bulkFadeIn 0.25s 0.15s ease both;
}
.bulk-auto-tag svg { width: 7px; height: 7px; flex-shrink: 0; }

/* Category dropdown */
.bulk-cat-dropdown {
    display: none;
    position: absolute;
    top: 100%; left: 0; right: 0;
    max-height: 200px;
    overflow-y: auto;
    background: var(--card-bg, #141428);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 8px;
    z-index: 100;
    margin-top: 2px;
    box-shadow: 0 8px 24px rgba(0,0,0,0.4);
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
    animation: bulkFadeIn 0.1s ease both;
}
.bulk-cat-dropdown::-webkit-scrollbar { width: 3px; }
.bulk-cat-dropdown::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.bulk-cat-option {
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    transition: background 0.1s;
}
.bulk-cat-option:hover {
    background: rgba(168,85,247,0.06);
}
.bulk-cat-option-name {
    font-size: 0.84rem;
    font-weight: 500;
    color: var(--text-primary);
}
.bulk-cat-option-path {
    font-size: 0.72rem;
    color: var(--text-tertiary);
}

/* ── Action bar ── */
.bulk-action-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    gap: 10px;
    background: rgba(0,0,0,0.06);
}
.bulk-skip-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    color: var(--text-tertiary);
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.12s;
}
.bulk-skip-btn svg { width: 11px; height: 11px; }
.bulk-skip-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}
.bulk-skip-btn:active { transform: scale(0.97); }

.bulk-add-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.86rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: 0 2px 6px rgba(34,197,94,0.15);
    flex: 1;
    justify-content: center;
    max-width: 200px;
}
.bulk-add-btn svg { width: 12px; height: 12px; }
.bulk-add-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(34,197,94,0.25);
}
.bulk-add-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}
.bulk-add-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
    filter: grayscale(0.3);
}

/* ═══ DONE SCREEN ═══ */
.bulk-done-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px 20px 22px;
    text-align: center;
    animation: bulkFadeIn 0.3s ease both;
}
.bulk-done-icon {
    display: flex;
    justify-content: center;
    margin-bottom: 10px;
}
.bulk-done-icon svg {
    width: 46px; height: 46px;
    filter: drop-shadow(0 0 8px rgba(34,197,94,0.2));
}
.bulk-done-icon .bulk-check-path {
    stroke-dasharray: 28;
    stroke-dashoffset: 28;
    animation: bulkSuccessDraw 0.5s 0.2s cubic-bezier(.4,0,.2,1) forwards;
}
.bulk-done-circle {
    stroke-dasharray: 160;
    stroke-dashoffset: 160;
    animation: bulkSuccessDraw 0.6s cubic-bezier(.4,0,.2,1) forwards;
}
.bulk-done-stats {
    display: flex;
    gap: 16px;
    margin-top: 12px;
}
.bulk-done-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}
.bulk-done-stat-val {
    font-size: 0.96rem;
    font-weight: 800;
    color: var(--text-primary);
    font-variant-numeric: tabular-nums;
}
.bulk-done-stat-label {
    font-size: 0.54rem;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bulk-done-close-btn {
    margin-top: 16px;
    justify-content: center;
    min-width: 120px;
}

/* ═══ FLOATING SUMMARY POPUP ═══ */
.bulk-summary-popup {
    position: fixed;
    top: 20px;
    left: 50%;
    transform: translateX(-50%) translateY(-100px);
    z-index: 100000;
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 22px;
    border-radius: 16px;
    background: rgba(20, 20, 25, 0.95);
    border: 1px solid rgba(34,197,94,0.25);
    box-shadow: 0 8px 32px rgba(0,0,0,0.4), 0 0 0 1px rgba(34,197,94,0.1);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    transition: transform 0.4s cubic-bezier(.4,0,.2,1), opacity 0.4s ease;
    opacity: 0;
    pointer-events: none;
}
.bulk-summary-popup.visible {
    transform: translateX(-50%) translateY(0);
    opacity: 1;
    pointer-events: auto;
}
.bulk-summary-icon svg {
    width: 36px; height: 36px;
    filter: drop-shadow(0 0 6px rgba(34,197,94,0.25));
}
.bulk-summary-icon .bulk-done-circle {
    stroke-dasharray: 120;
    stroke-dashoffset: 120;
    animation: bulkSuccessDraw 0.5s cubic-bezier(.4,0,.2,1) forwards;
}
.bulk-summary-icon .bulk-check-path {
    stroke-dasharray: 24;
    stroke-dashoffset: 24;
    animation: bulkSuccessDraw 0.4s 0.2s cubic-bezier(.4,0,.2,1) forwards;
}
.bulk-summary-title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #22c55e;
}
.bulk-summary-sub {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-top: 1px;
}

/* ═══ ASK ABOUT REMAINING REVIEW ═══ */
.bulk-ask-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 40px 24px 30px;
    text-align: center;
    gap: 8px;
    flex: 1;
}
.bulk-ask-icon {
    font-size: 2.4rem;
    line-height: 1;
    margin-bottom: 4px;
}
.bulk-ask-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text-primary);
}
.bulk-ask-sub {
    font-size: 0.82rem;
    color: var(--text-tertiary);
    margin-bottom: 8px;
}
.bulk-ask-btns {
    display: flex;
    gap: 10px;
    margin-top: 8px;
}
.bulk-ask-btn {
    padding: 10px 24px;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    transition: all 0.15s;
    font-family: inherit;
}
.bulk-ask-yes {
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    box-shadow: 0 2px 8px rgba(168,85,247,0.3);
}
.bulk-ask-yes:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(168,85,247,0.45); background: linear-gradient(135deg, #b86dfa, #8b5cf6); }
.bulk-ask-yes:active { transform: scale(0.97); }
.bulk-ask-no {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.1);
}
.bulk-ask-no:hover { transform: translateY(-1px); background: rgba(255,255,255,0.12); border-color: rgba(255,255,255,0.2); }
.bulk-ask-no:active { transform: scale(0.97); }

/* ═══ SINGLE REVIEW SUMMARY DIALOG ═══ */
.sr-summary-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px 36px;
    text-align: center;
    gap: 10px;
    flex: 1;
}
.sr-summary-icon {
    margin-bottom: 8px;
}
.sr-summary-icon .bulk-done-circle {
    stroke-dasharray: 138;
    stroke-dashoffset: 138;
    animation: srCircleDraw 0.6s ease-out 0.1s forwards;
}
.sr-summary-icon .bulk-check-path {
    stroke-dasharray: 40;
    stroke-dashoffset: 40;
    animation: srCheckDraw 0.4s ease-out 0.5s forwards;
}
@keyframes srCircleDraw { to { stroke-dashoffset: 0; } }
@keyframes srCheckDraw { to { stroke-dashoffset: 0; } }
.sr-summary-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.35;
}
.sr-summary-sub {
    font-size: 0.82rem;
    color: var(--text-tertiary);
}
.sr-summary-close-btn {
    margin-top: 16px;
    padding: 11px 36px;
    border-radius: 14px;
    font-size: 0.88rem;
    font-weight: 600;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #a855f7, #7c3aed);
    color: #fff;
    box-shadow: 0 2px 8px rgba(168,85,247,0.3);
    transition: all 0.15s;
    font-family: inherit;
}
.sr-summary-close-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(168,85,247,0.45); }
.sr-summary-close-btn:active { transform: scale(0.97); }

/* ═══ SINGLE REVIEW MODE — Compact Apple-style ═══ */
.custom-modal.bulk-single-review-mode {
    max-width: 420px;
    width: 92%;
    display: flex;
    flex-direction: column;
    max-height: none;
    border-radius: 20px;
    background: linear-gradient(145deg, rgba(32, 32, 34, 0.98), rgba(24, 24, 26, 0.96));
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.08);
    box-shadow: 0 24px 80px rgba(0,0,0,0.6), 
                0 0 0 1px rgba(255,255,255,0.05) inset;
    overflow: hidden;
    animation: srSlideUp 0.35s cubic-bezier(0.2, 0.85, 0.25, 1) forwards;
}
@keyframes srSlideUp {
    from { opacity: 0; transform: translateY(32px) scale(0.95); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* ── Header ── */
.sr-header {
    padding: 14px 18px 10px;
    flex-shrink: 0;
    background: linear-gradient(180deg, rgba(255,255,255,0.02) 0%, transparent 100%);
}
.sr-header-top {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 0;
}
.sr-ovoko-title {
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.sr-counter {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-primary);
    letter-spacing: -0.03em;
    background: linear-gradient(135deg, #a855f7, #ec4899);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}
.sr-counter-sep { color: rgba(255,255,255,0.2); margin: 0 1px; }
.sr-remaining {
    font-size: 0.7rem;
    color: var(--text-tertiary);
    background: rgba(255,255,255,0.06);
    padding: 3px 8px;
    border-radius: 20px;
    font-weight: 500;
}
.sr-close-btn {
    margin-left: auto;
    width: 32px; height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(255,255,255,0.06);
    color: var(--text-tertiary);
    cursor: pointer;
    display: grid;
    place-items: center;
    transition: all 0.2s;
}
.sr-close-btn:hover { 
    background: rgba(255,255,255,0.12); 
    color: var(--text-primary); 
    transform: scale(1.05);
}

.sr-progress {
    height: 3px;
    background: rgba(255,255,255,0.06);
    border-radius: 3px;
    overflow: hidden;
}
.sr-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #a855f7, #ec4899);
    border-radius: 3px;
    transition: width 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ── Scrollable content ── */
.sr-scroll {
    flex: 1 1 auto;
    overflow-y: visible;
    padding: 6px 18px 14px;
}

/* ── Offer card ── */
.sr-card {
    border-radius: 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}
.sr-offer-card {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 10px;
    margin-bottom: 12px;
}
.sr-thumb {
    width: 44px; height: 44px;
    border-radius: 10px;
    flex-shrink: 0;
    border: 1px solid rgba(255,255,255,0.08);
    overflow: hidden;
}
.sr-thumb img {
    width: 100%; height: 100%;
    object-fit: cover;
    display: block;
}
.sr-thumb-empty {
    width: 44px; height: 44px;
    border-radius: 10px;
    background: rgba(255,255,255,0.03);
    border: 1px dashed rgba(255,255,255,0.08);
    flex-shrink: 0;
}
.sr-offer-info { flex: 1; min-width: 0; }
.sr-offer-title {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.35;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sr-offer-price {
    margin-top: 3px;
    font-size: 0.78rem;
    font-weight: 700;
    color: #a78bfa;
}
.sr-offer-price span {
    font-weight: 500;
    font-size: 0.65rem;
    color: var(--text-tertiary);
    margin-left: 4px;
}

/* ── Sections ── */
.sr-section {
    margin-bottom: 12px;
}
.sr-section-label {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    opacity: 0.7;
}
.sr-section-label svg { 
    opacity: 0.5;
    width: 11px;
    height: 11px;
}

/* ── Car match badge ── */
.sr-car-match {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.62rem;
    padding: 4px 8px;
    border-radius: 6px;
    margin-top: 6px;
    font-weight: 500;
}
.sr-car-match.good {
    background: rgba(34,197,94,0.1);
    color: #4ade80;
    border: 1px solid rgba(34,197,94,0.12);
}
.sr-car-match.weak {
    background: rgba(251,191,36,0.1);
    color: #fbbf24;
    border: 1px solid rgba(251,191,36,0.12);
}
.sr-car-match.none {
    background: rgba(239,68,68,0.06);
    color: #f87171;
    border: 1px solid rgba(239,68,68,0.08);
}
.sr-car-match.loading {
    background: rgba(255,255,255,0.04);
    color: rgba(255,255,255,0.4);
    border: 1px solid rgba(255,255,255,0.06);
    animation: srMatchPulse 1.2s ease-in-out infinite;
}
@keyframes srMatchPulse {
    0%, 100% { opacity: 0.5; }
    50% { opacity: 1; }
}
.sr-match-score {
    margin-left: auto;
    font-size: 0.58rem;
    font-weight: 700;
    opacity: 0.7;
}

/* ── Form ── */
.sr-form-row {
    display: grid;
    gap: 8px;
    margin-bottom: 8px;
}
.sr-form-row:last-child { margin-bottom: 0; }
.sr-2col { grid-template-columns: 1fr 1fr; }
.sr-3col { grid-template-columns: 1fr 1fr 70px; }
.sr-4col { grid-template-columns: 1fr 1fr 1fr 60px; }

.sr-field { display: flex; flex-direction: column; gap: 3px; }
.sr-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-tertiary);
    padding-left: 1px;
}
.sr-required { 
    color: #f87171;
    font-weight: 700;
}

.sr-input {
    width: 100%;
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.05);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-family: inherit;
    font-weight: 500;
    outline: none;
    transition: border-color 0.2s ease;
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
}
.sr-input:focus {
    border-color: rgba(168,85,247,0.4);
    background: rgba(255,255,255,0.06);
}
.sr-input::placeholder {
    color: rgba(255,255,255,0.2);
    font-weight: 400;
}

/* Select fix — visible options */
.sr-select {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23999' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
    padding-right: 26px;
}
.sr-select option {
    background: #1c1c1e;
    color: #e5e5e5;
    padding: 8px 12px;
}
.sr-cat-select {
    font-weight: 600;
}

/* Category trigger (picker-based) */
.sr-cat-trigger {
    padding: 8px 10px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-primary);
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    min-height: 18px;
    line-height: 1.3;
}
.sr-cat-trigger:hover {
    border-color: rgba(168,85,247,0.35);
    background: rgba(168,85,247,0.05);
}
.sr-cat-trigger.has-cat {
    border-color: rgba(168,85,247,0.4);
    background: rgba(168,85,247,0.08);
    color: var(--text-primary);
}
.sr-cat-placeholder {
    color: var(--text-tertiary);
    font-weight: 400;
}
body.light-mode .sr-cat-trigger {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.1);
}
body.light-mode .sr-cat-trigger:hover {
    border-color: rgba(168,85,247,0.3);
}

/* Price input */
.sr-price-wrap {
    position: relative;
}
.sr-price-input {
    padding-right: 30px;
}
.sr-price-currency {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 0.68rem;
    color: var(--text-tertiary);
    font-weight: 500;
    pointer-events: none;
}

/* ── Part number with "+" button ── */
.sr-part-num-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sr-part-num-wrap .sr-input { flex: 1; }
.sr-add-partnum-btn {
    width: 32px;
    height: 32px;
    border-radius: 8px;
    border: 1px dashed rgba(255,255,255,0.2);
    background: rgba(255,255,255,0.04);
    color: var(--accent-color, #FF6B00);
    font-size: 1.1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s, border-color .15s;
    flex-shrink: 0;
}
.sr-add-partnum-btn:hover {
    background: rgba(255,107,0,0.12);
    border-color: rgba(255,107,0,0.4);
}
.sr-part-num2-wrap {
    display: flex;
    gap: 6px;
    align-items: center;
}
.sr-part-num2-wrap .sr-input { flex: 1; }
.sr-remove-partnum-btn {
    width: 28px;
    height: 28px;
    border-radius: 6px;
    border: 1px solid rgba(255,100,100,0.3);
    background: rgba(255,100,100,0.08);
    color: #FF6B6B;
    font-size: 1rem;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .15s;
    flex-shrink: 0;
}
.sr-remove-partnum-btn:hover {
    background: rgba(255,100,100,0.18);
}

/* ── Edit button in queue ── */
.inv-st-edit-btn {
    background: none;
    border: none;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 2px 4px;
    opacity: 0.8;
    transition: opacity .15s;
}
.inv-st-edit-btn:hover { opacity: 1; }

/* ── Ovoko button in queue ── */
.inv-st-ovoko-btn {
    background: rgba(249, 115, 22, 0.15);
    border: 1px solid rgba(249, 115, 22, 0.25);
    border-radius: 6px;
    cursor: pointer;
    padding: 4px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
}
.inv-st-ovoko-btn svg {
    color: #fb923c;
    width: 14px;
    height: 14px;
}
.inv-st-ovoko-btn:hover {
    background: rgba(249, 115, 22, 0.25);
    border-color: rgba(249, 115, 22, 0.4);
    transform: scale(1.05);
}
body.light-mode .inv-st-ovoko-btn {
    background: rgba(249, 115, 22, 0.1);
    border-color: rgba(249, 115, 22, 0.2);
}
body.light-mode .inv-st-ovoko-btn:hover {
    background: rgba(249, 115, 22, 0.18);
}

/* ── Bottom bar ── */
.sr-bottom {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 18px 16px;
    border-top: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    flex-shrink: 0;
    gap: 16px;
}
.sr-bottom.wizard-buttons {
    padding: 20px 18px 16px;
}
.sr-bottom .custom-modal-btn {
    flex: 0 0 auto;
    width: 120px;
    max-width: 120px;
}
.sr-skip-btn {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 9px 16px;
    border-radius: 10px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    font-family: inherit;
    transition: all 0.2s ease;
}
.sr-skip-btn:hover { 
    background: rgba(255,255,255,0.1); 
    border-color: rgba(255,255,255,0.15); 
}
.sr-skip-btn:active { transform: scale(0.97); }

.sr-add-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 9px 18px;
    border-radius: 10px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    border: none;
    background: linear-gradient(135deg, #22c55e 0%, #16a34a 100%);
    color: #fff;
    font-family: inherit;
    box-shadow: 0 2px 10px rgba(34,197,94,0.3);
    transition: all 0.2s ease;
}
.sr-add-btn:hover { 
    box-shadow: 0 4px 16px rgba(34,197,94,0.4); 
    background: linear-gradient(135deg, #34d66e 0%, #22c55e 100%);
}
.sr-add-btn:active { transform: scale(0.97); }
.sr-add-btn:disabled {
    opacity: 0.5;
    pointer-events: none;
}

/* Car grid */
.bulk-car-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 72px;
    gap: 6px;
}
.bulk-car-match-preview {
    font-size: 0.78rem;
    min-height: 16px;
    margin-top: 3px;
    padding-left: 1px;
    line-height: 1.3;
}

/* Auto tag */
.bulk-tag-auto {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    font-size: 0.6rem;
    color: #a855f7;
    background: rgba(168,85,247,0.08);
    padding: 0px 4px;
    border-radius: 4px;
    margin-left: 3px;
    font-weight: 500;
    vertical-align: middle;
}

/* ═══════════════════════════════════════════════════════════════════
   BULK TABLE VIEW — review all offers in a grid
   ═══════════════════════════════════════════════════════════════════ */

/* ── Stats bar ── */
.bulk-table-stats {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 4px;
    padding-right: 36px;
}
.bulk-stat-express {
    font-size: 0.72rem;
    font-weight: 600;
    color: #22c55e;
    background: rgba(34,197,94,0.08);
    padding: 2px 8px;
    border-radius: 6px;
}
.bulk-stat-review {
    font-size: 0.72rem;
    font-weight: 600;
    color: #fb923c;
    background: rgba(251,146,60,0.08);
    padding: 2px 8px;
    border-radius: 6px;
}
.bulk-stat-total {
    font-size: 0.72rem;
    color: var(--text-tertiary);
    margin-left: auto;
}

/* ── Top action buttons ── */
.bulk-table-top-actions {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 24px 6px;
    flex-shrink: 0;
}
.bulk-add-express-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    background: rgba(34,197,94,0.1);
    border: 1px solid rgba(34,197,94,0.25);
    border-radius: 10px;
    color: #22c55e;
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.bulk-add-express-btn:hover:not(:disabled) {
    background: rgba(34,197,94,0.18);
    border-color: rgba(34,197,94,0.4);
}
.bulk-add-express-btn:active:not(:disabled) { transform: scale(0.97); }
.bulk-add-express-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.bulk-toggle-all-btn {
    padding: 6px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 10px;
    color: var(--text-tertiary);
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: auto;
    font-family: inherit;
}
.bulk-toggle-all-btn:hover {
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
}
.bulk-set-all-cat-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 6px 12px;
    background: rgba(99,102,241,0.10);
    border: 1px solid rgba(99,102,241,0.28);
    border-radius: 10px;
    color: rgb(165,180,252);
    font-size: 0.74rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.15s;
    font-family: inherit;
}
.bulk-set-all-cat-btn:hover {
    background: rgba(99,102,241,0.18);
    border-color: rgba(99,102,241,0.45);
}
.bulk-set-all-cat-btn:active { transform: scale(0.97); }

/* ── Scrollable table area ── */
.bulk-table-scroll {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 4px 12px 8px;
    min-height: 120px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.12) transparent;
}
.bulk-table-scroll::-webkit-scrollbar { width: 4px; }
.bulk-table-scroll::-webkit-scrollbar-track { background: transparent; }
.bulk-table-scroll::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.12); border-radius: 4px; }

/* ── Table row ── */
.bulk-table-row {
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(255,255,255,0.02);
    transition: all 0.15s ease;
    overflow: hidden;
    flex-shrink: 0;
    cursor: pointer;
}
.bulk-table-row:hover {
    background: rgba(255,255,255,0.035);
    border-color: rgba(255,255,255,0.08);
}
.bulk-table-row.checked {
    background: rgba(34,197,94,0.03);
    border-color: rgba(34,197,94,0.18);
}
.bulk-table-row.checked:hover {
    background: rgba(34,197,94,0.045);
}
.bulk-table-row.review:not(.checked) {
    border-color: rgba(251,146,60,0.12);
}
.bulk-table-row.bulk-row-added {
    opacity: 0.35;
    pointer-events: none;
    background: rgba(34,197,94,0.04);
    border-color: rgba(34,197,94,0.2);
}
.bulk-table-row.bulk-row-shake {
    animation: bulkShake 0.4s ease;
}

/* ── Row main info ── */
.bulk-row-main {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
}
.bulk-row-check-wrap {
    position: relative;
    width: 18px; height: 18px;
    flex-shrink: 0;
    cursor: pointer;
}
.bulk-row-check {
    position: absolute;
    opacity: 0;
    width: 100%; height: 100%;
    margin: 0;
    cursor: pointer;
    z-index: 1;
}
.bulk-check-custom {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(255,255,255,0.2);
    border-radius: 5px;
    background: transparent;
    transition: all 0.15s ease;
}
.bulk-row-check-wrap:hover .bulk-check-custom {
    border-color: rgba(255,255,255,0.35);
}
.bulk-row-check:checked ~ .bulk-check-custom {
    background: #22c55e;
    border-color: #22c55e;
}
.bulk-row-check:checked ~ .bulk-check-custom::after {
    content: '';
    position: absolute;
    left: 5px; top: 2px;
    width: 4px; height: 8px;
    border: solid #fff;
    border-width: 0 1.5px 1.5px 0;
    transform: rotate(45deg);
}

.bulk-row-thumb,
.bulk-row-thumb-empty {
    width: 56px; height: 56px;
    border-radius: 8px;
    object-fit: cover;
    flex-shrink: 0;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.06);
}

/* Content area */
.bulk-row-content {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.bulk-row-top {
    display: flex;
    align-items: center;
    gap: 12px;
}
.bulk-row-title {
    flex: 1;
    min-width: 0;
    font-size: 0.78rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.3;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    position: relative;
}
.bulk-row-title > span {
    display: inline-block;
    transition: none;
}
.bulk-table-row:hover .bulk-row-title > span {
    animation: marquee-carousel var(--scroll-duration, 6s) linear 0.3s infinite;
}
.bulk-row-price-section {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}
.bulk-row-middle {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
}
.bulk-row-car-text {
    color: var(--text-tertiary);
}
.bulk-row-bottom {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.68rem;
}

/* ── Row inline fields ── */
.bulk-row-fields {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.bulk-row-field {
    display: flex;
    align-items: center;
}
.bulk-row-field-cat {
    gap: 4px;
}

/* row category tag */
.bulk-row-cat-tag {
    display: inline-flex;
    align-items: center;
    padding: 2px 8px;
    border-radius: 10px;
    font-size: 0.66rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.15s ease;
    white-space: nowrap;
    max-width: 140px;
    height: 20px;
    box-sizing: border-box;
    overflow: hidden;
    text-overflow: ellipsis;
    border: none;
}
.bulk-row-cat-tag.has-cat {
    color: #a855f7;
    background: rgba(168,85,247,0.12);
}
.bulk-row-cat-tag.has-cat:hover {
    background: rgba(168,85,247,0.2);
}
.bulk-row-cat-tag.no-cat {
    color: #ef4444;
    background: rgba(239,68,68,0.1);
}
.bulk-row-cat-tag.no-cat:hover {
    background: rgba(239,68,68,0.18);
}
.bulk-tag-memory {
    font-size: 0.58rem;
    opacity: 0.8;
    flex-shrink: 0;
}

/* row position select */
.bulk-row-pos {
    padding: 2px 20px 2px 6px !important;
    font-size: 0.66rem !important;
    height: 20px !important;
    border-radius: 6px !important;
    border: none !important;
    background: rgba(255,255,255,0.06) !important;
    color: var(--text-secondary) !important;
    cursor: pointer;
    -webkit-appearance: none !important;
    appearance: none !important;
    box-sizing: border-box !important;
    min-width: 0 !important;
    background-image: url("data:image/svg+xml,%3Csvg width='6' height='4' viewBox='0 0 6 4' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l2 2 2-2' stroke='%23888' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 5px center !important;
    font-family: inherit;
    font-weight: 500;
    outline: none;
    transition: all 0.15s ease;
}
.bulk-row-pos:hover {
    background: rgba(255,255,255,0.1) !important;
}
.bulk-row-pos:focus {
    background: rgba(168,85,247,0.12) !important;
}

/* row price */
.bulk-row-old-price {
    font-size: 0.66rem;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
    font-variant-numeric: tabular-nums;
}
.bulk-row-price {
    width: 52px !important;
    height: 20px !important;
    padding: 2px 4px !important;
    font-size: 0.72rem !important;
    border-radius: 6px !important;
    border: none !important;
    background: rgba(34,197,94,0.12) !important;
    color: #22c55e !important;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    outline: none;
    font-family: inherit;
    transition: all 0.15s ease;
    -moz-appearance: textfield !important;
    appearance: textfield !important;
    -webkit-appearance: textfield !important;
    box-sizing: border-box !important;
    flex-shrink: 0 !important;
    text-align: center !important;
    min-width: 0 !important;
}
.bulk-row-price::-webkit-inner-spin-button,
.bulk-row-price::-webkit-outer-spin-button { -webkit-appearance: none; }
.bulk-row-price:hover {
    background: rgba(34,197,94,0.18) !important;
}
.bulk-row-price:focus {
    background: rgba(34,197,94,0.22) !important;
}
.bulk-row-price-currency {
    font-size: 0.66rem;
    color: #22c55e;
    font-weight: 600;
    opacity: 0.7;
}

/* expand button */
.bulk-row-expand-btn {
    margin-left: auto;
    width: 20px; height: 20px;
    border-radius: 5px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: var(--text-tertiary);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.15s ease;
    flex-shrink: 0;
}
.bulk-row-expand-btn:hover {
    background: rgba(255,255,255,0.12);
    color: var(--text-primary);
}
.bulk-row-expand-btn.expanded {
    background: rgba(168,85,247,0.12);
    color: #a855f7;
}
.bulk-row-expand-btn.expanded svg {
    transform: rotate(180deg);
}
.bulk-row-expand-btn svg {
    transition: transform 0.2s ease;
    width: 10px;
    height: 10px;
}

/* ── Row expanded details ── */
.bulk-row-details {
    padding: 0 12px 12px 12px;
    animation: bulkDetailsSlide 0.2s ease both;
    background: transparent;
}
@keyframes bulkDetailsSlide {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}
.bulk-details-grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px 12px;
    background: rgba(0,0,0,0.15);
    border-radius: 10px;
    border: 1px solid rgba(255,255,255,0.03);
}
.bulk-detail-row {
    display: flex;
    gap: 8px;
    align-items: flex-end;
}
.bulk-detail-field {
    display: flex;
    flex-direction: column;
    gap: 3px;
    flex: 1;
    min-width: 0;
}
.bulk-detail-field-wide { flex: 1.5; }
.bulk-detail-field-narrow { flex: 0.5; min-width: 50px; max-width: 70px; }
.bulk-detail-field-partnum { flex: 0 0 auto; min-width: 100px; max-width: 130px; }
.bulk-detail-field-desc { flex: 2; }
.bulk-detail-label {
    font-size: 0.62rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding-left: 1px;
}
.bulk-partnum-wrap {
    display: flex;
    gap: 4px;
    align-items: center;
}
.bulk-partnum-wrap .bulk-detail-input {
    flex: 1;
    min-width: 0;
}
.bulk-add-partnum2-btn {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    border: none;
    background: rgba(255,255,255,0.06);
    color: var(--text-secondary);
    font-size: 16px;
    font-weight: 500;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
}
.bulk-add-partnum2-btn:hover {
    background: rgba(34,197,94,0.15);
    color: #22c55e;
}
.bulk-remove-partnum2-btn {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    border: none;
    background: transparent;
    color: #ef4444;
    font-size: 13px;
    font-weight: 600;
    border-radius: 0;
    cursor: pointer;
    transition: all 0.15s ease;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin-left: -2px;
    opacity: 0.65;
}
.bulk-remove-partnum2-btn:hover {
    opacity: 1;
    transform: scale(1.15);
}
.bulk-detail-input {
    padding: 5px 8px !important;
    font-size: 0.72rem !important;
    height: 28px !important;
    border-radius: 6px !important;
    border: 1px solid rgba(255,255,255,0.06) !important;
    background: rgba(255,255,255,0.04) !important;
    color: var(--text-primary) !important;
    outline: none;
    font-family: inherit;
    transition: all 0.15s ease;
    width: 100% !important;
    box-sizing: border-box !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    min-width: 0 !important;
    text-align: left !important;
    font-weight: 500;
}
.bulk-detail-input::placeholder {
    color: var(--text-tertiary);
    opacity: 0.5;
    font-weight: 400;
}
.bulk-detail-input:hover {
    background: rgba(255,255,255,0.06) !important;
}
.bulk-detail-input:focus {
    background: rgba(168,85,247,0.08) !important;
    border-color: rgba(168,85,247,0.2) !important;
}
select.bulk-detail-input {
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23888' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 6px center !important;
    padding-right: 20px !important;
}

/* ── Rim parameters display ── */
.bulk-rim-params {
    margin-top: 8px;
    padding: 10px 12px;
    background: rgba(168,85,247,0.05);
    border: 1px solid rgba(168,85,247,0.08);
    border-radius: 8px;
}
.bulk-rim-params-title {
    font-size: 0.64rem;
    font-weight: 700;
    color: #a855f7;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 8px;
}
.bulk-rim-params-grid {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.bulk-rim-param {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 5px 8px;
    background: rgba(0,0,0,0.15);
    border-radius: 6px;
    min-width: 55px;
}
.bulk-rim-label {
    font-size: 0.58rem;
    font-weight: 600;
    color: var(--text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.04em;
}
.bulk-rim-value {
    font-size: 0.72rem;
    font-weight: 600;
    color: var(--text-tertiary);
}
.bulk-rim-value.has-value {
    color: #22c55e;
}

/* ── Bottom bar ── */
.bulk-table-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 24px;
    border-top: 1px solid rgba(255,255,255,0.06);
    flex-shrink: 0;
    gap: 10px;
    background: rgba(0,0,0,0.06);
}
.bulk-table-bottom-info {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-tertiary);
    font-variant-numeric: tabular-nums;
}
.bulk-table-bottom-info span {
    color: #22c55e;
    font-weight: 700;
}
.bulk-add-checked-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 22px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: #fff;
    border: none;
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.18s;
    box-shadow: 0 2px 6px rgba(34,197,94,0.15);
    font-family: inherit;
}
.bulk-add-checked-btn:hover:not(:disabled) {
    transform: translateY(-1px);
    box-shadow: 0 3px 12px rgba(34,197,94,0.25);
}
.bulk-add-checked-btn:active:not(:disabled) {
    transform: translateY(0) scale(0.98);
}
.bulk-add-checked-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
    filter: grayscale(0.3);
}

/* ── Cancel button in footer ── */
.bulk-cancel-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.04);
    color: var(--text-secondary);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    font-size: 0.84rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.18s;
    font-family: inherit;
}
.bulk-cancel-btn:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    color: var(--text-primary);
}
.bulk-cancel-btn:active {
    transform: scale(0.98);
}
.bulk-cancel-btn svg {
    opacity: 0.7;
}

/* ── Category picker (floating) ── */
.bulk-cat-picker {
    position: fixed;
    z-index: 10200;
    width: 280px;
    max-height: min(360px, 50vh);
    background: var(--card-bg, #141428);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0,0,0,0.5);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    animation: bulkFadeIn 0.12s ease both;
    overscroll-behavior: contain;
}
.bulk-cat-picker-input {
    width: 100%;
    padding: 10px 12px;
    border: none;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    background: transparent;
    color: var(--text-primary);
    font-size: 0.82rem;
    outline: none;
    font-family: inherit;
    box-sizing: border-box;
}
.bulk-cat-picker-input::placeholder { color: var(--text-tertiary); }
.bulk-cat-picker-list {
    overflow-y: scroll;
    max-height: calc(min(360px, 50vh) - 46px);
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.06) transparent;
}
.bulk-cat-picker-list::-webkit-scrollbar { width: 3px; }
.bulk-cat-picker-list::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.08); border-radius: 3px; }
.bulk-cat-picker-option {
    padding: 7px 12px;
    cursor: pointer;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    transition: background 0.1s;
}
.bulk-cat-picker-option:hover {
    background: rgba(168,85,247,0.06);
}
.bulk-cat-picker-name {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--text-primary);
}
.bulk-cat-picker-path {
    font-size: 0.68rem;
    color: var(--text-tertiary);
}
.bulk-cat-picker-empty {
    padding: 12px;
    text-align: center;
    color: var(--text-tertiary);
    font-size: 0.74rem;
}

/* Shake animation */
@keyframes bulkShake {
    0%, 100% { transform: translateX(0); }
    20%, 60% { transform: translateX(-4px); }
    40%, 80% { transform: translateX(4px); }
}

/* ── Light mode — matches body.light-mode .sale-wizard-modal ── */
body.light-mode .bulk-ovoko-modal {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(0, 0, 0, 0.08);
    box-shadow:
        0 24px 80px rgba(0, 0, 0, 0.18),
        inset 0 1px 0 rgba(255, 255, 255, 0.5);
}
body.light-mode .bulk-header {
    border-bottom-color: rgba(0,0,0,0.05);
}
body.light-mode .bulk-close-btn {
    background: rgba(var(--ios-red-rgb), 0.1);
    border-color: rgba(var(--ios-red-rgb), 0.15);
    color: rgba(220, 50, 40, 0.85);
    box-shadow: 0 1px 4px rgba(var(--ios-red-rgb), 0.08);
}
body.light-mode .bulk-close-btn:hover {
    background: rgba(var(--ios-red-rgb), 0.22);
}
body.light-mode .bulk-search-input {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.07);
}
body.light-mode .bulk-search-icon {
    color: var(--text-tertiary);
    opacity: 0.5;
}
body.light-mode .bulk-search-field:focus-within .bulk-search-icon {
    color: #a855f7;
    opacity: 0.7;
}
body.light-mode .bulk-search-input:focus {
    background: rgba(168,85,247,0.02);
    border-color: rgba(168,85,247,0.3);
    box-shadow: 0 0 0 2px rgba(168,85,247,0.04);
}
body.light-mode .bulk-offer-row:hover {
    background: rgba(0,0,0,0.015);
}
body.light-mode .bulk-offer-row.selected {
    background: rgba(34,197,94,0.04);
    border-color: rgba(34,197,94,0.25);
}
body.light-mode .bulk-bottom-bar {
    border-top-color: rgba(0,0,0,0.04);
    background: rgba(34,197,94,0.015);
}
body.light-mode .bulk-bottom-bar.is-processing {
    background: linear-gradient(180deg, rgba(168,85,247,0.08), rgba(124,58,237,0.12));
    border-top-color: rgba(124,58,237,0.18);
}
body.light-mode .bulk-batch-progress-label {
    color: rgba(0,0,0,0.58);
}
body.light-mode .bulk-batch-progress-bar {
    background: rgba(124,58,237,0.14);
}
body.light-mode .bulk-ovoko-modal .bulk-input {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.07);
}
body.light-mode .bulk-ovoko-modal .bulk-input:focus {
    background: rgba(168,85,247,0.015);
    border-color: rgba(168,85,247,0.3);
    box-shadow: 0 0 0 2px rgba(168,85,247,0.04);
}
body.light-mode .bulk-review-offer-preview {
    background: rgba(0,0,0,0.015);
    border-color: rgba(0,0,0,0.05);
}
body.light-mode .bulk-skip-btn {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .bulk-progress-bar {
    background: rgba(0,0,0,0.035);
}
body.light-mode .bulk-process-card {
    background: linear-gradient(180deg, rgba(124,58,237,0.04), rgba(255,255,255,0.45));
    border-color: rgba(124,58,237,0.08);
    box-shadow: inset 0 1px 0 rgba(255,255,255,0.4);
}
body.light-mode .bulk-process-spinner-wrap {
    background: radial-gradient(circle at 50% 50%, rgba(168,85,247,0.14), rgba(168,85,247,0.03) 70%);
}
body.light-mode .bulk-process-label {
    color: #7c3aed;
}
body.light-mode .bulk-action-bar {
    border-top-color: rgba(0,0,0,0.04);
    background: rgba(0,0,0,0.012);
}
body.light-mode .bulk-thumb {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .bulk-dismiss-btn {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .bulk-dismiss-btn:hover {
    background: rgba(251,146,60,0.08);
    border-color: rgba(251,146,60,0.2);
}
body.light-mode .bulk-cat-dropdown {
    background: #fff;
    border-color: rgba(0,0,0,0.07);
    box-shadow: 0 8px 24px rgba(0,0,0,0.08);
}
body.light-mode .bulk-cat-option:hover {
    background: rgba(168,85,247,0.04);
}
body.light-mode .bulk-ovoko-modal select.bulk-input {
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23555' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}
/* Light mode — table view additions */
body.light-mode .bulk-table-row {
    background: rgba(255,255,255,0.7);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .bulk-table-row:hover {
    background: rgba(255,255,255,0.85);
    border-color: rgba(0,0,0,0.1);
}
body.light-mode .bulk-table-row.checked {
    background: rgba(34,197,94,0.04);
    border-color: rgba(34,197,94,0.2);
}
body.light-mode .bulk-table-row.review:not(.checked) {
    border-color: rgba(251,146,60,0.15);
}
body.light-mode .bulk-check-custom {
    border-color: rgba(0,0,0,0.2);
}
body.light-mode .bulk-row-thumb,
body.light-mode .bulk-row-thumb-empty {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.06);
}
body.light-mode .bulk-row-pos,
body.light-mode .bulk-row-expand-btn {
    background: rgba(0,0,0,0.04);
}
body.light-mode .bulk-row-price {
    background: rgba(34,197,94,0.1) !important;
}
body.light-mode .bulk-detail-input {
    background: rgba(0,0,0,0.03) !important;
    border-color: rgba(0,0,0,0.06) !important;
}
body.light-mode .bulk-detail-input:focus {
    background: rgba(168,85,247,0.06) !important;
}
body.light-mode .bulk-details-grid {
    background: rgba(0,0,0,0.02);
    border-color: rgba(0,0,0,0.04);
}
body.light-mode .bulk-add-partnum2-btn {
    background: rgba(0,0,0,0.04);
}
body.light-mode .bulk-rim-params {
    background: rgba(168,85,247,0.05);
}
body.light-mode .bulk-rim-param {
    background: rgba(255,255,255,0.6);
}
body.light-mode .bulk-table-bottom {
    border-top-color: rgba(0,0,0,0.04);
    background: rgba(0,0,0,0.012);
}
body.light-mode .bulk-toggle-all-btn {
    background: rgba(0,0,0,0.025);
    border-color: rgba(0,0,0,0.07);
}
body.light-mode .bulk-cancel-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: var(--text-secondary);
}
body.light-mode .bulk-cancel-btn:hover {
    background: rgba(0,0,0,0.06);
    border-color: rgba(0,0,0,0.15);
}
body.light-mode .bulk-cat-picker {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 12px 40px rgba(0,0,0,0.1);
}
body.light-mode .bulk-cat-picker-input {
    border-bottom-color: rgba(0,0,0,0.06);
}
body.light-mode .bulk-cat-picker-option:hover {
    background: rgba(168,85,247,0.04);
}
body.light-mode .bulk-row-pos,
body.light-mode select.bulk-detail-input {
    background-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 8 5' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l3 3 3-3' stroke='%23555' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* Light mode — summary popup */
body.light-mode .bulk-summary-popup {
    background: rgba(255, 255, 255, 0.95);
    border-color: rgba(34,197,94,0.2);
    box-shadow: 0 8px 32px rgba(0,0,0,0.12), 0 0 0 1px rgba(34,197,94,0.08);
}
body.light-mode .bulk-summary-sub { color: #666; }
/* Light mode — ask dialog */
body.light-mode .bulk-ask-no {
    background: rgba(0,0,0,0.04);
    border-color: rgba(0,0,0,0.1);
    color: #555;
}
/* Light mode — single review */
body.light-mode .custom-modal.bulk-single-review-mode {
    background: rgba(255,255,255,0.92);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 24px 80px rgba(0,0,0,0.15), 0 0 0 0.5px rgba(0,0,0,0.06) inset;
}
body.light-mode .sr-close-btn { background: rgba(0,0,0,0.06); color: #888; }
body.light-mode .sr-close-btn:hover { background: rgba(0,0,0,0.1); color: #333; }
body.light-mode .sr-remaining { background: rgba(0,0,0,0.05); color: #666; }
body.light-mode .sr-progress { background: rgba(0,0,0,0.05); }
body.light-mode .sr-card { background: rgba(0,0,0,0.02); border-color: rgba(0,0,0,0.06); }
body.light-mode .sr-input {
    border-color: rgba(0,0,0,0.1);
    background: rgba(0,0,0,0.02);
    color: #1a1a1a;
}
body.light-mode .sr-input:focus { background: rgba(0,0,0,0.03); }
body.light-mode .sr-input::placeholder { color: rgba(0,0,0,0.3); }
body.light-mode .sr-select option { background: #fff; color: #1a1a1a; }
body.light-mode .sr-car-match.good { background: rgba(34,197,94,0.08); color: #16a34a; border-color: rgba(34,197,94,0.15); }
body.light-mode .sr-car-match.weak { background: rgba(251,191,36,0.08); color: #d97706; border-color: rgba(251,191,36,0.15); }
body.light-mode .sr-car-match.none { background: rgba(239,68,68,0.06); color: #dc2626; border-color: rgba(239,68,68,0.1); }
body.light-mode .sr-skip-btn {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.1);
    color: #555;
}
body.light-mode .sr-skip-btn:hover { background: rgba(0,0,0,0.07); }
body.light-mode .sr-bottom {
    border-top-color: rgba(0,0,0,0.06);
}

/* ═══════════════════════════════════════════════════════════════════
   AI-STYLE SPEC VALUE ANIMATION (Apple Intelligence / Gemini)
   Lightweight: only the value text animates — no backgrounds, no dots.
   Persists until user manually edits the description.
   ═══════════════════════════════════════════════════════════════════ */

/* Smooth text reveal for freshly generated values */
@keyframes specAiTextReveal {
    0%   { opacity: 0; filter: blur(4px); transform: translateY(3px) scale(0.985); }
    70%  { opacity: 1; filter: blur(0.3px); transform: translateY(0) scale(1.01); }
    100% { opacity: 1; filter: blur(0); transform: translateY(0) scale(1); }
}

/* Slow blue-purple gradient drift, built into the text itself */
@keyframes specAiGradientFlow {
    0%   { background-position: 0% 50%; }
    35%  { background-position: 55% 50%; }
    70%  { background-position: 100% 50%; }
    100% { background-position: 0% 50%; }
}

/* The value wrapper — persistent animated gradient */
.spec-ai-value {
    display: inline-block;
    font-weight: 750;
    vertical-align: baseline;
    color: inherit;
}

.spec-ai-value.spec-ai-active,
.spec-ai-value.spec-ai-active b,
.spec-ai-value.spec-ai-active strong,
.spec-ai-value.spec-ai-instant,
.spec-ai-value.spec-ai-instant b,
.spec-ai-value.spec-ai-instant strong,
.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value.spec-ai-active,
.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value.spec-ai-active b,
.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value.spec-ai-active strong,
.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value.spec-ai-instant,
.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value.spec-ai-instant b,
.offer-wizard-overlay .wizard-desc-step .desc-block-text .spec-ai-value.spec-ai-instant strong {
    background: linear-gradient(100deg, #5eb0ff 0%, #0a84ff 28%, #8e5cff 52%, #bf5af2 76%, #5eb0ff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent !important;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    filter: none;
}

.spec-ai-value.spec-ai-active,
.spec-ai-value.spec-ai-active b,
.spec-ai-value.spec-ai-active strong {
    animation:
        specAiTextReveal 0.72s cubic-bezier(0.22, 1, 0.36, 1) both,
        specAiGradientFlow 4.8s ease-in-out 0.15s infinite;
}

/* Instant mode — no reveal, gradient is already alive when the step opens */
.spec-ai-value.spec-ai-instant,
.spec-ai-value.spec-ai-instant b,
.spec-ai-value.spec-ai-instant strong {
    animation: specAiGradientFlow 5.2s ease-in-out infinite;
}

/* Light mode — a touch stronger for contrast on pale surfaces */
body.light-mode .spec-ai-value,
body.light-mode .spec-ai-value b,
body.light-mode .spec-ai-value strong {
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

body.light-mode .spec-ai-value.spec-ai-active,
body.light-mode .spec-ai-value.spec-ai-active b,
body.light-mode .spec-ai-value.spec-ai-active strong,
body.light-mode .spec-ai-value.spec-ai-instant,
body.light-mode .spec-ai-value.spec-ai-instant b,
body.light-mode .spec-ai-value.spec-ai-instant strong {
    background: linear-gradient(100deg, #006fff 0%, #5856d6 34%, #af52de 68%, #007aff 100%);
    background-size: 260% 100%;
    -webkit-background-clip: text;
    background-clip: text;
}

/* ═══════════════════════════════════════════════════════════════════
   GLOBAL: Hide search icon when input has text (like placeholder)
   ═══════════════════════════════════════════════════════════════════ */

/* Smooth transition for all search icons */
.wiz-search-icon,
.search-icon,
.inv-search-icon,
.sales-search-icon,
.amsg-search-icon,
.bulk-search-icon,
.allegro-photos-search-icon,
.pricing-search-icon,
.cat-search-icon,
.global-search-icon-right,
.search-icon-right,
.wiz-car-search-icon,
.shipment-search-box .search-icon,
.notes-search-box .search-icon,
.reservation-search-box .search-icon {
    display: none !important;
}

/* Icon AFTER input (input ~ icon) */
input:not(:placeholder-shown) ~ .wiz-search-icon,
input:not(:placeholder-shown) ~ .search-icon,
input:not(:placeholder-shown) ~ .inv-search-icon,
input:not(:placeholder-shown) ~ .sales-search-icon,
input:not(:placeholder-shown) ~ .amsg-search-icon,
input:not(:placeholder-shown) ~ .bulk-search-icon,
input:not(:placeholder-shown) ~ .allegro-photos-search-icon,
input:not(:placeholder-shown) ~ .pricing-search-icon,
input:not(:placeholder-shown) ~ .cat-search-icon,
input:not(:placeholder-shown) ~ .global-search-icon-right,
input:not(:placeholder-shown) ~ .search-icon-right {
    opacity: 0 !important;
    pointer-events: none;
}

/* Icon BEFORE input (icon ~ input) — uses :has() */
.wiz-search-icon:has(~ input:not(:placeholder-shown)),
.search-icon:has(~ input:not(:placeholder-shown)),
.inv-search-icon:has(~ input:not(:placeholder-shown)),
.sales-search-icon:has(~ input:not(:placeholder-shown)),
.amsg-search-icon:has(~ input:not(:placeholder-shown)),
.bulk-search-icon:has(~ input:not(:placeholder-shown)),
.allegro-photos-search-icon:has(~ input:not(:placeholder-shown)),
.pricing-search-icon:has(~ input:not(:placeholder-shown)),
.cat-search-icon:has(~ input:not(:placeholder-shown)) {
    opacity: 0 !important;
    pointer-events: none;
}

/* GLOBAL: Remove left padding for search icon space */
.wiz-search-input,
.inv-search-input,
.sales-search-input,
.amsg-search-input,
.bulk-search-input,
.allegro-photos-search-input,
.pricing-search-input,
.cat-search-input,
.global-search-input,
.ovoko-added-search-input,
.delivery-search-box input,
.shipment-search-box input,
.notes-search-box input,
.reservation-search-box input,
.search-input-wrapper input[type="search"] {
    padding-left: 14px !important;
}

/* ==========================================================================
   MOBILE FINAL OVERRIDES - Highest Priority (at end of file)
   ========================================================================== */
@media (max-width: 480px) {
    /* Tiles: NO BLUR - solid backgrounds for crisp rendering */
    .seller-tile,
    body.dark-mode .seller-tile,
    body.light-mode .seller-tile {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        transform: translateZ(0) !important;
        -webkit-transform: translateZ(0) !important;
        will-change: auto !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    body.dark-mode .seller-tile,
    .seller-tile {
        background: rgba(30, 35, 45, 0.95) !important;
        box-shadow: none !important;
    }
    
    /* Remove gradient overlay on mobile tiles - both ::before and ::after */
    .seller-tile::before,
    .public-tile::before {
        display: none !important;
        content: none !important;
        background: none !important;
    }
    
    /* ::after keeps aspect-ratio but no gradient */
    .seller-tile::after,
    .public-tile::after {
        background: none !important;
        background-image: none !important;
    }
    
    body.light-mode .seller-tile {
        background: rgba(255, 255, 255, 0.95) !important;
        box-shadow: none !important;
    }
    
    /* Header buttons: perfectly round - only when visible (don't override display:none from JS!) */
    .panel-header-btn:not([style*="display: none"]):not([style*="display:none"]) {
        width: 40px !important;
        height: 40px !important;
        min-width: 40px !important;
        min-height: 40px !important;
        border-radius: 50% !important;
        padding: 0 !important;
        align-items: center !important;
        justify-content: center !important;
    }
    
    .panel-header-btn svg {
        width: 20px !important;
        height: 20px !important;
    }
    
    /* Public tiles: NO BLUR on mobile */
    .public-tile,
    body.dark-mode .public-tile {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        background: rgba(30, 35, 45, 0.95) !important;
        box-shadow: none !important;
    }
    
    body.light-mode .public-tile {
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        box-shadow: none !important;
    }
    
    /* GLOBAL: Disable ALL blur on mobile for performance and crisp rendering */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Solid backgrounds for glass elements on mobile */
    .glass-card,
    .calc-section,
    .header-card,
    .numpad-row button,
    .preset-btn,
    .currency-btn,
    .result-box {
        background: rgba(30, 35, 45, 0.95) !important;
    }
    
    body.light-mode .glass-card,
    body.light-mode .calc-section,
    body.light-mode .header-card,
    body.light-mode .numpad-row button,
    body.light-mode .preset-btn,
    body.light-mode .currency-btn,
    body.light-mode .result-box {
        background: rgba(255, 255, 255, 0.95) !important;
    }
    
    /* MOBILE: Flat solid background - no gradient glow */
    body,
    body.dark-mode,
    body.accent-blue,
    body.accent-pink,
    body.accent-green,
    body.accent-orange,
    body.accent-red,
    body.accent-aurora {
        background: #000000 !important;
    }
    
    body.light-mode {
        background: #F2F2F7 !important;
    }
    
    /* MOBILE: 4 tiles per row, square */
    .seller-tiles {
        grid-template-columns: repeat(4, 1fr) !important;
        gap: 10px !important;
    }
    
    .seller-tile {
        aspect-ratio: 1 !important;
        min-height: unset !important;
        padding: 8px !important;
        border-radius: 12px !important;
    }
    
    .seller-tile-icon {
        font-size: 24px !important;
    }
    
    .seller-tile-label {
        font-size: 10px !important;
    }
}

/* ==========================================================================
   MODALS - SOLID BACKGROUNDS (no transparency for readability)
   Applied GLOBALLY on all devices
   ========================================================================== */
.custom-modal,
.modal-panel-base,
.confirm-panel,
.pin-modal-panel,
.allegro-auth-panel,
.employee-select-panel,
.employee-modal-panel,
.currency-modal-panel,
.value-modal-panel,
.shipment-modal-panel,
.ovoko-modal-panel,
.warranty-modal-panel,
.declaration-modal-panel,
.notes-modal-panel,
.note-modal-panel,
.reservation-modal-panel,
.pin-verify-panel,
.settings-modal-panel,
.discount-modal-panel,
.label-preview-panel {
    background: rgb(28, 30, 36) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

body.light-mode .custom-modal,
body.light-mode .modal-panel-base,
body.light-mode .confirm-panel,
body.light-mode .pin-modal-panel,
body.light-mode .allegro-auth-panel,
body.light-mode .employee-select-panel,
body.light-mode .employee-modal-panel,
body.light-mode .currency-modal-panel,
body.light-mode .value-modal-panel,
body.light-mode .shipment-modal-panel,
body.light-mode .ovoko-modal-panel,
body.light-mode .warranty-modal-panel,
body.light-mode .declaration-modal-panel,
body.light-mode .notes-modal-panel,
body.light-mode .note-modal-panel,
body.light-mode .reservation-modal-panel,
body.light-mode .pin-verify-panel,
body.light-mode .settings-modal-panel,
body.light-mode .discount-modal-panel,
body.light-mode .label-preview-panel {
    background: rgb(255, 255, 255) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Modal overlays - darker background, no blur */
.custom-modal-overlay,
.modal-overlay-base,
.confirm-modal-overlay,
[class*="-modal-overlay"] {
    background: rgba(0, 0, 0, 0.92) !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* MOBILE: Force scroll when no modal is active */
@media (max-width: 480px) {
    body:not(.modal-open) {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    
    /* Ensure seller-panel always scrolls within body */
    .seller-panel.active {
        overflow-y: visible !important;
    }
    
    /* Safety net: if no modal overlay is active, ensure body is scrollable */
    body:not(:has(.custom-modal-overlay.active)):not(:has(.tiles-exiting)):not(:has(.tiles-returning)) {
        overflow: auto !important;
    }
}

/* ==========================================================================
   PERFORMANCE OPTIMIZATIONS — reduce GPU/RAM usage
   Always-visible elements: remove expensive backdrop-filter
   Temporary overlays already handled above (solid backgrounds)
   ========================================================================== */

/* Always-visible elements — replace blur with solid/semi-transparent backgrounds */
.seller-tile {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.06) !important;
}

body.light-mode .seller-tile {
    background: rgba(255, 255, 255, 0.85) !important;
}

.header-card {
    backdrop-filter: blur(8px) !important;
    -webkit-backdrop-filter: blur(8px) !important;
}

.glass-card {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(20, 20, 25, 0.7) !important;
}

body.light-mode .glass-card {
    background: rgba(255, 255, 255, 0.85) !important;
}

.info-widget {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(255, 255, 255, 0.07) !important;
}

body.light-mode .info-widget {
    background: rgba(255, 255, 255, 0.8) !important;
}

/* Small always-visible elements — no blur needed at all */
.seller-tile-count,
.beta-badge,
.admin-lock-btn,
.admin-unlock-hint,
.seller-logout-btn,
.seller-login-btn,
.header-icon-btn {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Stop infinite header gradient animation — static gradient is enough */
.seller-panel-title .header-site-name {
    animation: none !important;
    background-size: 100% 100% !important;
}

/* Pause ALL animations when tab is hidden (class toggled by app.js) */
body.page-hidden *,
body.page-hidden *::before,
body.page-hidden *::after {
    animation-play-state: paused !important;
}

/* Reduce drop-shadows on loader rings (only visible briefly during login) */
.ring-outer,
.ring-middle,
.ring-inner {
    filter: none;
}

.unlock-overlay.active .ring-outer { filter: drop-shadow(0 0 4px rgba(var(--ios-red-rgb), 0.5)); }
.unlock-overlay.active .ring-middle { filter: drop-shadow(0 0 4px rgba(50, 215, 75, 0.5)); }
.unlock-overlay.active .ring-inner { filter: drop-shadow(0 0 4px rgba(0, 199, 255, 0.5)); }

/* Respect prefers-reduced-motion system setting */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
    
    /* Remove all backdrop-filters for reduced-motion users */
    * {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════
   OVOKO PRICE DISCREPANCY CHECK (v256)
   ═══════════════════════════════════════════════════════════════════ */

/* ── "Dodane na Ovoko" HERO HEADER (redesigned v258) ─────────────── */
.ovoko-added-hero {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 20px 22px;
    margin-bottom: 18px;
    border-radius: 18px;
    background:
        radial-gradient(1200px 200px at 100% 0%, rgba(245, 158, 11, 0.14), transparent 60%),
        radial-gradient(800px 200px at 0% 100%, rgba(79, 70, 229, 0.12), transparent 60%),
        linear-gradient(135deg, rgba(255,255,255,0.04), rgba(255,255,255,0.01));
    border: 1px solid rgba(255,255,255,0.08);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
body.light-mode .ovoko-added-hero {
    background:
        radial-gradient(1200px 200px at 100% 0%, rgba(245, 158, 11, 0.10), transparent 60%),
        radial-gradient(800px 200px at 0% 100%, rgba(79, 70, 229, 0.08), transparent 60%),
        linear-gradient(135deg, #ffffff, #f8fafc);
    border-color: rgba(0,0,0,0.06);
    box-shadow: 0 2px 14px rgba(15, 23, 42, 0.05);
}
.ovoko-added-hero-info { flex: 1; min-width: 0; }
.ovoko-added-hero-title {
    display: flex; align-items: center; gap: 12px; margin-bottom: 6px;
}
.ovoko-added-hero-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 42px; height: 42px; border-radius: 12px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.25), rgba(217, 119, 6, 0.15));
    border: 1px solid rgba(245, 158, 11, 0.3);
    font-size: 22px; line-height: 1;
    flex-shrink: 0;
}
.ovoko-added-hero-title h3 {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
}
.ovoko-added-hero-subtitle {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-secondary);
    opacity: 0.85;
    line-height: 1.45;
}
.ovoko-added-hero-actions {
    display: flex; align-items: center; gap: 10px;
    flex-shrink: 0;
}

/* Icon button (Sync) — compact, subtle */
.ovoko-added-icon-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 14px; border-radius: 11px;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-primary, #1a202c);
    font-weight: 600; font-size: 13px; cursor: pointer;
    transition: all .18s ease;
}
body.light-mode .ovoko-added-icon-btn {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    color: #1a202c;
}
.ovoko-added-icon-btn:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-1px);
}
body.light-mode .ovoko-added-icon-btn:hover {
    background: #f8fafc;
    border-color: rgba(0,0,0,0.14);
}
.ovoko-added-icon-btn.spinning svg { animation: attentionSpin 0.9s linear infinite; }
.ovoko-added-icon-btn:disabled { opacity: .55; cursor: not-allowed; }

/* Price-check primary button */
.ovoko-added-price-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 18px; border: none; border-radius: 11px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; font-weight: 700; font-size: 13px;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 14px rgba(217, 119, 6, 0.28);
    transition: transform .15s ease, box-shadow .15s ease, opacity .15s;
}
.ovoko-added-price-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(217, 119, 6, 0.38);
}
.ovoko-added-price-btn:active { transform: translateY(0); }
.ovoko-added-price-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.ovoko-added-price-btn.pc-loading { animation: pcPulse 1.2s ease-in-out infinite; }
.ovoko-added-price-icon { font-size: 15px; line-height: 1; }

@media (max-width: 720px) {
    .ovoko-added-hero { flex-direction: column; align-items: stretch; padding: 18px; }
    .ovoko-added-hero-actions { width: 100%; }
    .ovoko-added-hero-actions button { flex: 1; justify-content: center; }
}

/* ── "Dodane na Ovoko" EMPTY STATE (redesigned v258) ─────────────── */
.ovoko-added-empty {
    display: flex; flex-direction: column; align-items: center; justify-content: center;
    padding: 56px 24px;
    gap: 14px;
    text-align: center;
    border-radius: 16px;
    background:
        radial-gradient(800px 200px at 50% 0%, rgba(79, 70, 229, 0.08), transparent 60%),
        rgba(255,255,255,0.02);
    border: 1px dashed rgba(255,255,255,0.10);
}
body.light-mode .ovoko-added-empty {
    background:
        radial-gradient(800px 200px at 50% 0%, rgba(79, 70, 229, 0.05), transparent 60%),
        #fafbff;
    border-color: rgba(0,0,0,0.08);
}
.ovoko-added-empty-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 72px; height: 72px; border-radius: 20px;
    background: linear-gradient(135deg, rgba(79, 70, 229, 0.18), rgba(124, 58, 237, 0.10));
    border: 1px solid rgba(79, 70, 229, 0.25);
    color: #818cf8;
    margin-bottom: 4px;
}
.ovoko-added-empty-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-primary);
}
.ovoko-added-empty-subtitle {
    font-size: 0.85rem;
    color: var(--text-secondary);
    opacity: 0.85;
    max-width: 420px;
    line-height: 1.5;
    margin-bottom: 6px;
}
.ovoko-fetch-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 11px 22px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    color: #fff; font-weight: 700; font-size: 14px;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(79, 70, 229, 0.35);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.ovoko-fetch-btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 6px 20px rgba(79, 70, 229, 0.45);
}
.ovoko-fetch-btn:disabled { opacity: .6; cursor: not-allowed; transform: none; }
.ovoko-fetch-btn.loading svg { animation: attentionSpin 0.9s linear infinite; }

/* Launch button in Dodane tab */
.pc-launch-btn {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 10px 16px; border: none; border-radius: 12px;
    background: linear-gradient(135deg, #f59e0b, #d97706);
    color: #fff; font-weight: 700; font-size: 13px;
    cursor: pointer; white-space: nowrap;
    box-shadow: 0 4px 12px rgba(217, 119, 6, 0.25);
    transition: transform .15s, box-shadow .15s, opacity .15s;
}
.pc-launch-btn:hover { transform: translateY(-1px); box-shadow: 0 6px 16px rgba(217, 119, 6, 0.35); }
.pc-launch-btn:active { transform: translateY(0); }
.pc-launch-btn:disabled { opacity: .55; cursor: not-allowed; transform: none; }
.pc-launch-btn.pc-loading { animation: pcPulse 1.2s ease-in-out infinite; }
.pc-launch-icon { font-size: 15px; line-height: 1; }
.pc-launch-label { line-height: 1.2; }
.pc-apply-btn {
    background: linear-gradient(135deg, #10b981, #059669);
    box-shadow: 0 4px 12px rgba(5, 150, 105, 0.3);
}
.pc-apply-btn:hover { box-shadow: 0 6px 16px rgba(5, 150, 105, 0.4); }
.pc-run-btn {
    background: linear-gradient(135deg, #4f46e5, #7c3aed);
    box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.pc-run-btn:hover { box-shadow: 0 6px 16px rgba(79, 70, 229, 0.4); }
@keyframes pcPulse { 0%, 100% { opacity: 1; } 50% { opacity: .7; } }

/* Modal layout */
.price-check-modal { max-width: 900px; width: 94vw; max-height: 90vh; display: flex; flex-direction: column; }
.price-check-modal.pc-modal-compact { max-width: 440px; }
.price-check-modal .ovoko-sync-header { position: relative; }
.pc-header-close {
    position: absolute; right: 14px; top: 50%; transform: translateY(-50%);
    background: transparent; border: none; font-size: 28px; line-height: 1;
    color: rgba(255,255,255,0.8); cursor: pointer; padding: 4px 10px; border-radius: 8px;
}
.pc-header-close:hover { background: rgba(255,255,255,0.12); color: #fff; }

/* ── Settings step (Apple-style compact) ─────────────────────────── */
.price-check-settings {
    padding: 18px 20px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}
.price-check-settings .pc-intro {
    color: var(--text-secondary, #4a5568);
    font-size: 13px; margin: 0 0 14px; line-height: 1.45;
    opacity: 0.9;
}
.pc-chip-row {
    display: grid;
    grid-template-columns: repeat(6, minmax(0, 1fr));
    gap: 6px;
    margin-bottom: 14px;
}
.pc-chip {
    padding: 10px 6px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #f1f5f9);
    border-radius: 10px;
    font-weight: 600; font-size: 13px;
    cursor: pointer;
    transition: background .15s ease, border-color .15s ease, transform .1s ease;
    text-align: center;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body.light-mode .pc-chip {
    background: #f2f2f7;
    border-color: rgba(0,0,0,0.06);
    color: #1c1c1e;
}
.pc-chip:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.18);
}
body.light-mode .pc-chip:hover { background: #e8e8ed; }
.pc-chip:active { transform: scale(0.97); }
.pc-chip-active,
.pc-chip-active:hover {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    border-color: transparent;
    color: #fff;
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.35);
}

.pc-custom-row {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    margin-bottom: 16px;
    padding: 10px 12px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
}
body.light-mode .pc-custom-row {
    background: #f2f2f7;
    border-color: rgba(0,0,0,0.06);
}
.pc-custom-row label {
    font-weight: 500; font-size: 13px;
    color: var(--text-secondary, rgba(255,255,255,0.65));
    margin: 0;
}
.pc-custom-row input {
    width: 90px; padding: 7px 10px;
    border: 1px solid rgba(255,255,255,0.12);
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 14px; font-weight: 600;
    color: var(--text-primary, #fff);
    text-align: right;
    font-family: inherit;
    transition: border-color .15s, box-shadow .15s;
}
body.light-mode .pc-custom-row input {
    background: #fff;
    border-color: rgba(0,0,0,0.08);
    color: #1c1c1e;
}
.pc-custom-row input:focus {
    outline: none;
    border-color: #6366f1;
    box-shadow: 0 0 0 3px rgba(99,102,241,0.22);
}
/* Hide native number input spinners for cleaner look */
.pc-custom-row input::-webkit-outer-spin-button,
.pc-custom-row input::-webkit-inner-spin-button {
    -webkit-appearance: none; margin: 0;
}
.pc-custom-row input[type=number] { appearance: textfield; -moz-appearance: textfield; }

.pc-buttons { display: flex; gap: 8px; justify-content: flex-end; }
.pc-buttons .ovoko-sync-close-btn {
    padding: 9px 18px;
    border-radius: 10px;
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    color: var(--text-primary, #fff);
    font-weight: 500; font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s;
}
body.light-mode .pc-buttons .ovoko-sync-close-btn {
    background: #f2f2f7; border-color: rgba(0,0,0,0.06); color: #1c1c1e;
}
.pc-buttons .ovoko-sync-close-btn:hover { background: rgba(255,255,255,0.10); }
body.light-mode .pc-buttons .ovoko-sync-close-btn:hover { background: #e8e8ed; }
.pc-buttons .pc-run-btn {
    padding: 9px 20px;
    font-size: 14px;
    border-radius: 10px;
    font-weight: 600;
}

@media (max-width: 520px) {
    .pc-chip-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

/* ── Progress pane inside price-check modal (Apple-style) ─────────── */
.price-check-modal .ovoko-sync-body {
    padding: 16px 20px 20px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}
.price-check-modal .ovoko-sync-step {
    padding: 14px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    box-shadow: none;
    animation: none !important;
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
}
body.light-mode .price-check-modal .ovoko-sync-step {
    background: #f2f2f7;
    border-color: rgba(0,0,0,0.06);
}
.price-check-modal .ovoko-sync-step.active {
    border-color: rgba(99, 102, 241, 0.45);
    background: linear-gradient(135deg, rgba(99,102,241,0.10), rgba(124,58,237,0.06));
    box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.10);
}
.price-check-modal .ovoko-sync-step-header {
    display: flex; align-items: center; gap: 10px;
    margin-bottom: 6px;
}
.price-check-modal .ovoko-sync-step-icon {
    font-size: 18px; line-height: 1;
    width: 28px; height: 28px;
    display: inline-flex; align-items: center; justify-content: center;
    background: rgba(255,255,255,0.06);
    border-radius: 8px;
    flex-shrink: 0;
}
body.light-mode .price-check-modal .ovoko-sync-step-icon {
    background: rgba(0,0,0,0.04);
}
.price-check-modal .ovoko-sync-step.active .ovoko-sync-step-icon {
    background: linear-gradient(135deg, #6366f1, #7c3aed);
    color: #fff;
    animation: pcIconPulse 1.6s ease-in-out infinite;
}
@keyframes pcIconPulse {
    0%, 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(99,102,241,0.4); }
    50% { transform: scale(1.06); box-shadow: 0 0 0 6px rgba(99,102,241,0); }
}
.price-check-modal .ovoko-sync-step-label {
    font-size: 14px; font-weight: 600;
    color: var(--text-primary, #f1f5f9);
    letter-spacing: -0.01em;
}
.price-check-modal .ovoko-sync-step-detail {
    font-size: 12.5px;
    color: var(--text-secondary, rgba(255,255,255,0.6));
    margin: 2px 0 10px 38px;
    font-variant-numeric: tabular-nums;
}
.price-check-modal .ovoko-sync-progress-bar {
    height: 6px;
    background: rgba(255,255,255,0.06);
    border-radius: 99px;
    overflow: hidden;
    margin: 0 0 0 38px;
}
body.light-mode .price-check-modal .ovoko-sync-progress-bar {
    background: rgba(0,0,0,0.06);
}
.price-check-modal .ovoko-sync-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, #6366f1, #7c3aed);
    border-radius: 99px;
    transition: width .35s cubic-bezier(0.16, 1, 0.3, 1);
    box-shadow: 0 0 8px rgba(99, 102, 241, 0.5);
}

/* Compact header when used for progress/results */
.price-check-modal .ovoko-sync-header {
    padding: 18px 20px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    display: flex; align-items: center; gap: 12px;
}
body.light-mode .price-check-modal .ovoko-sync-header {
    border-color: rgba(0,0,0,0.06);
}
.price-check-modal .ovoko-sync-header h3 {
    margin: 0;
    font-size: 16px;
    font-weight: 700;
    letter-spacing: -0.01em;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Inter, system-ui, sans-serif;
}
.price-check-modal .ovoko-sync-icon {
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.22), rgba(217, 119, 6, 0.14));
    border: 1px solid rgba(245, 158, 11, 0.30);
    border-radius: 11px;
    font-size: 20px; line-height: 1;
    flex-shrink: 0;
}

/* Apple-like modal container */
.price-check-modal {
    border-radius: 20px;
    border: 1px solid rgba(255,255,255,0.08);
    background: rgba(28, 28, 30, 0.92);
    -webkit-backdrop-filter: blur(30px) saturate(160%);
    backdrop-filter: blur(30px) saturate(160%);
    box-shadow: 0 24px 60px rgba(0,0,0,0.45), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
}
body.light-mode .price-check-modal {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0,0,0,0.08);
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.18);
}

/* Results area — Apple dark-glass style */
.price-check-results {
    padding: 18px 22px 6px; overflow-y: auto; flex: 1; min-height: 0;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}
.pc-summary {
    padding: 13px 16px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    font-size: 13px; color: rgba(255,255,255,0.72);
    margin-bottom: 14px; line-height: 1.55;
    display: flex; flex-direction: column; gap: 2px;
}
.pc-summary b { color: #fff; font-weight: 600; }
body.light-mode .pc-summary {
    background: rgba(0,0,0,0.035); border-color: rgba(0,0,0,0.06); color: #4a5568;
}
body.light-mode .pc-summary b { color: #1a202c; }

.pc-empty { text-align: center; padding: 40px 20px; color: rgba(255,255,255,0.6); }
.pc-empty p { margin: 6px 0; }
.pc-error { padding: 24px; color: #ff6b6b; font-weight: 600; text-align: center; }

/* Apple-style empty state for price-check modal */
.price-check-modal .pc-empty {
    padding: 48px 24px 40px;
    display: flex; flex-direction: column; align-items: center;
    gap: 12px;
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}
.pc-empty-badge {
    display: inline-flex; align-items: center; justify-content: center;
    width: 64px; height: 64px; border-radius: 18px;
    background: linear-gradient(135deg, #34d399, #10b981);
    color: #fff;
    box-shadow: 0 12px 28px rgba(16, 185, 129, 0.35), inset 0 -2px 0 rgba(0,0,0,0.1);
    margin-bottom: 4px;
}
.pc-empty-title {
    margin: 0;
    font-size: 18px; font-weight: 700;
    color: var(--text-primary, #f1f5f9);
    letter-spacing: -0.01em;
}
.pc-empty-sub {
    margin: 0;
    font-size: 13.5px;
    color: var(--text-secondary, rgba(255,255,255,0.62));
    line-height: 1.55;
    max-width: 420px;
}
.pc-empty-sub b { color: var(--text-primary, #e2e8f0); font-weight: 600; }

/* Toolbar (select-all row) */
.pc-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 14px;
    padding: 4px 2px 14px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    margin-bottom: 12px;
}
body.light-mode .pc-toolbar { border-bottom-color: rgba(0,0,0,0.08); }
.pc-check-all { display: flex; align-items: center; gap: 9px; cursor: pointer; font-weight: 600; font-size: 13px; color: #fff; }
body.light-mode .pc-check-all { color: #1a202c; }
.pc-check-all input { width: 17px; height: 17px; cursor: pointer; accent-color: #0a84ff; }
.pc-link-btn {
    background: transparent; border: none;
    color: #0a84ff; font-weight: 600;
    font-size: 13px; cursor: pointer; padding: 5px 8px; border-radius: 7px;
    font-family: inherit;
}
.pc-link-btn:hover { background: rgba(10, 132, 255, 0.12); }

/* Rows list — Apple glass cards */
.pc-list { display: flex; flex-direction: column; gap: 8px; }
.pc-row {
    display: flex; gap: 14px; padding: 12px 14px;
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 12px;
    background: rgba(255,255,255,0.035);
    align-items: flex-start;
    cursor: pointer;
    transition: background .15s, border-color .15s, transform .1s;
}
.pc-row:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); }
.pc-row:has(.pc-row-check:checked) {
    background: rgba(10, 132, 255, 0.10);
    border-color: rgba(10, 132, 255, 0.45);
}
body.light-mode .pc-row {
    background: #fff; border-color: rgba(0,0,0,0.08);
}
body.light-mode .pc-row:hover { border-color: rgba(10,132,255,0.4); box-shadow: 0 2px 8px rgba(10,132,255,0.08); }
body.light-mode .pc-row:has(.pc-row-check:checked) { background: rgba(10,132,255,0.06); border-color: #0a84ff; }

.pc-row-check {
    width: 19px; height: 19px; flex-shrink: 0; margin-top: 22px;
    accent-color: #0a84ff; cursor: pointer;
}
.pc-thumb {
    width: 62px; height: 62px; border-radius: 10px; object-fit: cover;
    flex-shrink: 0; background: rgba(255,255,255,0.06);
}
body.light-mode .pc-thumb { background: #f1f5f9; }
.pc-thumb-empty {
    display: flex; align-items: center; justify-content: center;
    font-size: 24px; color: rgba(255,255,255,0.4);
}
body.light-mode .pc-thumb-empty { color: #94a3b8; }

.pc-info { flex: 1; min-width: 0; }
.pc-name {
    font-weight: 600; color: #fff; font-size: 13.5px;
    margin-bottom: 8px; line-height: 1.4;
    letter-spacing: -0.01em;
    display: -webkit-box; line-clamp: 2; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
body.light-mode .pc-name { color: #1a202c; }

.pc-prices { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 6px; }
.pc-price-chip {
    padding: 4px 10px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 8px;
    font-size: 12.5px;
    color: #fff;
    font-weight: 500;
    letter-spacing: -0.005em;
}
.pc-price-chip b { font-weight: 700; color: #fff; }
.pc-price-chip .pc-label { color: rgba(255,255,255,0.55); margin-right: 4px; font-weight: 500; }
body.light-mode .pc-price-chip {
    background: #f1f5f9; border-color: rgba(0,0,0,0.04); color: #1a202c;
}
body.light-mode .pc-price-chip b { color: #1a202c; }
body.light-mode .pc-price-chip .pc-label { color: #64748b; }

.pc-price-chip.pc-expected {
    background: rgba(52, 199, 89, 0.18);
    border-color: rgba(52, 199, 89, 0.35);
    color: #7ee2a8;
}
.pc-price-chip.pc-expected b { color: #a5f2c2; }
.pc-price-chip.pc-expected .pc-label { color: #7ee2a8; }
body.light-mode .pc-price-chip.pc-expected {
    background: #ecfdf5; border-color: rgba(16,185,129,0.25); color: #065f46;
}
body.light-mode .pc-price-chip.pc-expected b { color: #065f46; }
body.light-mode .pc-price-chip.pc-expected .pc-label { color: #047857; }

.pc-diff {
    padding: 4px 10px; border-radius: 8px; font-size: 12.5px; font-weight: 700;
    letter-spacing: -0.01em;
}
.pc-diff-over { background: rgba(255, 69, 58, 0.18); color: #ff6b6b; border: 1px solid rgba(255,69,58,0.3); }
.pc-diff-under { background: rgba(255, 159, 10, 0.18); color: #ffb340; border: 1px solid rgba(255,159,10,0.3); }
body.light-mode .pc-diff-over { background: #fef2f2; color: #b91c1c; border-color: rgba(185,28,28,0.2); }
body.light-mode .pc-diff-under { background: #fef3c7; color: #92400e; border-color: rgba(146,64,14,0.2); }

.pc-meta { font-size: 12px; color: rgba(255,255,255,0.55); }
.pc-meta b { color: rgba(255,255,255,0.85); font-weight: 600; }
.pc-meta a { color: #0a84ff; text-decoration: none; font-weight: 600; }
.pc-meta a:hover { text-decoration: underline; }
body.light-mode .pc-meta { color: #64748b; }
body.light-mode .pc-meta b { color: #1a202c; }

/* Pagination */
.pc-pagination {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px; padding: 16px 4px 10px; margin-top: 6px;
}
.pc-page-btn {
    padding: 8px 14px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: #fff;
    border-radius: 9px; font-weight: 600; font-size: 13px; cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
}
.pc-page-btn:hover:not(:disabled) { background: rgba(255,255,255,0.10); border-color: rgba(10,132,255,0.4); color: #0a84ff; }
.pc-page-btn:disabled { opacity: .35; cursor: not-allowed; }
body.light-mode .pc-page-btn { background: #fff; border-color: rgba(0,0,0,0.08); color: #1a202c; }
body.light-mode .pc-page-btn:hover:not(:disabled) { border-color: #0a84ff; color: #0a84ff; background: #fff; }

.pc-page-info { font-size: 13px; color: rgba(255,255,255,0.6); }
body.light-mode .pc-page-info { color: #64748b; }

/* Footer with apply button */
.price-check-footer {
    display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 14px 20px;
    border-top: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.02);
    font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, system-ui, sans-serif;
}
body.light-mode .price-check-footer {
    border-top-color: rgba(0,0,0,0.06);
    background: rgba(0,0,0,0.02);
}
.pc-footer-info { font-size: 13px; color: var(--text-secondary, rgba(255,255,255,0.6)); }
.pc-footer-actions { display: flex; gap: 8px; align-items: center; }

/* Neutral secondary button (Apple-style) used across price-check modal */
.pc-btn-secondary {
    display: inline-flex; align-items: center; justify-content: center; gap: 6px;
    padding: 9px 18px;
    border: 1px solid rgba(255,255,255,0.10);
    background: rgba(255,255,255,0.06);
    color: var(--text-primary, #fff);
    border-radius: 10px;
    font-weight: 500; font-size: 14px;
    cursor: pointer;
    font-family: inherit;
    transition: background .15s, border-color .15s;
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
}
body.light-mode .pc-btn-secondary {
    background: #f2f2f7; border-color: rgba(0,0,0,0.06); color: #1c1c1e;
}
.pc-btn-secondary:hover {
    background: rgba(255,255,255,0.10);
    border-color: rgba(255,255,255,0.16);
}
body.light-mode .pc-btn-secondary:hover { background: #e8e8ed; }
.pc-btn-secondary:active { transform: scale(0.98); }

.pc-apply-done { text-align: center; padding: 30px 20px; }
.pc-apply-done p { margin: 8px 0; color: var(--text-primary, #1a202c); }

@media (max-width: 640px) {
    .pc-row { flex-wrap: wrap; }
    .pc-row-check { margin-top: 0; }
    .pc-thumb { width: 56px; height: 56px; }
    .pc-pagination { flex-direction: column; }
    .price-check-footer { flex-direction: column; align-items: stretch; }
    .pc-footer-actions { width: 100%; }
    .pc-footer-actions button { flex: 1; }
}

/* ============================================================
   APPLE POLISH — sales panel refinements (focus rings, motion,
   precision spacing). Layered on top of legacy declarations so
   nothing is overwritten silently.
   ============================================================ */

/* iOS-style focus ring: visible on keyboard, invisible on mouse.
   Applies to every interactive control inside the sales panel that
   previously had only :hover styles. */
.sale-card:focus-visible,
.sale-action-btn:focus-visible,
.sales-date-header:focus-visible,
.empty-state-cta:focus-visible,
.sales-load-more-btn:focus-visible {
    outline: 2px solid rgba(var(--primary-rgb), 0.55);
    outline-offset: 2px;
    border-color: var(--primary-color);
}

/* Apple-style elevation on hover for selectable rows.
   Only when the user has not asked for reduced motion. */
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .sale-card:hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.18);
    }
    body.light-mode .sale-card:hover {
        box-shadow: 0 4px 14px rgba(0, 0, 0, 0.06);
    }
}

/* Honour user's reduced-motion preference everywhere in the panel. */
@media (prefers-reduced-motion: reduce) {
    .sale-card,
    .sale-card-title.overflowing span,
    .sales-date-chevron,
    .sales-items-collapsible,
    .custom-modal-overlay.active .custom-modal,
    .sale-action-btn,
    .sales-load-more-btn,
    .empty-state-cta {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
    }
    .sale-card-title.overflowing span {
        animation: none !important;
    }
}

/* Sale-action-btn: slightly larger hit area on touch (Apple HIG ≥44pt).
   Visible button stays 28×28; transparent padding extends the tap zone. */
@media (pointer: coarse) {
    .sale-card .sale-action-btn {
        position: relative;
    }
    .sale-card .sale-action-btn::after {
        content: '';
        position: absolute;
        inset: -8px;
    }
}

/* Sale badges: tighten typography to match SF Compact treatment. */
.sale-badge {
    font-feature-settings: 'tnum' on, 'cv11' on; /* tabular numerals + alt 4 */
    -webkit-font-smoothing: antialiased;
}

/* Edit-modal: tighter, more iOS Settings-like field separation. */
.part-edit-modal .car-form-field label,
.shipment-edit-modal .car-form-field label {
    font-size: 12px;
    font-weight: 500;
    letter-spacing: -0.05px;
    color: var(--text-tertiary);
}

/* Modal close-X: snap to physical pixel grid, sharper edge on retina. */
.modal-close-x {
    transform: translateZ(0);
}

/* Empty-state CTA: Apple Pay-style filled button with subtle shimmer */
.empty-state-cta {
    transition: transform 0.18s cubic-bezier(0.34, 1.56, 0.64, 1),
                box-shadow 0.18s ease,
                background 0.18s ease;
}
@media (hover: hover) and (prefers-reduced-motion: no-preference) {
    .empty-state-cta:hover {
        transform: translateY(-1px) scale(1.01);
    }
    .empty-state-cta:active {
        transform: translateY(0) scale(0.98);
        transition-duration: 80ms;
    }
}

/* Light-mode date-header: softer slate to match macOS Big Sur lists. */
body.light-mode .sales-date-header {
    background: rgba(0, 0, 0, 0.035);
    border-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .sales-date-header:hover {
    background: rgba(0, 0, 0, 0.06);
}
body.light-mode .sales-date-group.expanded .sales-date-header {
    background: rgba(var(--primary-rgb), 0.07);
}

/* Tabular-numeral money: aligned digits like Stocks.app */
.sale-card-amount,
.sales-date-total {
    font-variant-numeric: tabular-nums;
    font-feature-settings: 'tnum' on;
}

/* ============================================================
   INTEGRATION SETTINGS — neutral marketplace layer
   (Ovoko/Allegro share layout without leaking brand-specific names)
   ============================================================ */
.integration-spinner {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 149, 0, 0.15);
    border-top-color: var(--ios-orange);
    border-radius: 50%;
    animation: allegroSpin 0.8s linear infinite;
}

.integration-status-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 16px;
}

body.light-mode .integration-status-row {
    background: rgba(0, 0, 0, 0.02);
    border-color: rgba(0, 0, 0, 0.06);
}

.integration-status-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    flex-shrink: 0;
}

.integration-status-dot.connected {
    background: var(--ios-green);
    box-shadow: 0 0 8px rgba(var(--ios-green-rgb), 0.5);
}

.integration-status-dot.disconnected {
    background: var(--text-tertiary);
    opacity: 0.5;
}

.integration-status-text {
    font-size: 14px;
    font-weight: 600;
    color: var(--text-primary);
}

.integration-settings-form {
    display: flex;
    flex-direction: column;
    gap: 14px;
    margin-bottom: 16px;
}

.integration-field label {
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 6px;
}

.integration-field input[type="text"],
.integration-field input[type="password"] {
    width: 100%;
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--glass-border);
    background: var(--glass-bg);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    color: var(--text-primary);
    font-size: 14px;
    transition: all 0.3s ease;
    box-sizing: border-box;
}

.integration-field input[type="text"]:focus,
.integration-field input[type="password"]:focus {
    outline: none;
    border-color: rgba(255, 149, 0, 0.5);
    box-shadow: 0 0 0 3px rgba(255, 149, 0, 0.15);
}

.integration-settings-actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}

.integration-save-btn,
.integration-connect-btn,
.integration-disconnect-btn,
.integration-diag-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 16px;
    border-radius: 12px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    border: 1px solid;
    justify-content: center;
}

.integration-save-btn {
    flex: 1;
    min-width: 140px;
    background: rgba(var(--primary-rgb), 0.12);
    border-color: rgba(var(--primary-rgb), 0.2);
    color: var(--primary-color);
}

.integration-save-btn:hover {
    background: rgba(var(--primary-rgb), 0.2);
    border-color: rgba(var(--primary-rgb), 0.35);
}

.integration-help-text {
    padding: 14px 16px;
    border-radius: 12px;
    background: rgba(255, 149, 0, 0.05);
    border: 1px solid rgba(255, 149, 0, 0.1);
    font-size: 12px;
    color: var(--text-tertiary);
    line-height: 1.6;
}

.integration-help-text p {
    margin: 0 0 8px 0;
    font-weight: 600;
    color: var(--text-secondary);
}

.integration-help-text ol {
    margin: 0;
    padding-left: 18px;
}

.integration-help-text li {
    margin-bottom: 4px;
}

.integration-help-text a {
    color: var(--ios-orange);
    text-decoration: none;
    font-weight: 600;
}

.integration-help-text a:hover {
    text-decoration: underline;
}

/* ═══════════════════════════════════════════════════════════════════════
   APPLE HIG REDESIGN — Ovoko "Przegląd oferty" (single-item preview)
   Scoped to .custom-modal.bulk-table-mode.bulk-single-item so the bulk
   list modal that shares class names is not affected.
   ═══════════════════════════════════════════════════════════════════════ */

.custom-modal.bulk-table-mode.bulk-single-item {
    width: min(560px, calc(100vw - 32px));
    max-width: 560px;
    border-radius: 22px;
    background: rgba(28, 28, 30, 0.92);
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.55),
        0 0 0 0.5px rgba(255, 255, 255, 0.05),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(40px) saturate(180%);
    -webkit-backdrop-filter: blur(40px) saturate(180%);
    font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', system-ui, sans-serif;
    -webkit-font-smoothing: antialiased;
}

/* — Header — large title, centered, SF Pro Display feel — */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-header {
    padding: 18px 20px 14px;
    border-bottom: 0.5px solid rgba(255, 255, 255, 0.08);
    text-align: center;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-progress-row {
    justify-content: center;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-progress-text {
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.022em;
    color: rgba(255, 255, 255, 0.96);
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-close-btn {
    width: 30px;
    height: 30px;
    top: 14px;
    right: 14px;
    background: rgba(120, 120, 128, 0.22);
    border: none;
    color: rgba(235, 235, 245, 0.6);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-close-btn:hover {
    background: rgba(120, 120, 128, 0.32);
    color: rgba(255, 255, 255, 0.9);
    transform: none;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-close-btn svg {
    width: 12px;
    height: 12px;
    stroke-width: 2.2;
}

/* — Body scroll area — generous padding — */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-table-scroll {
    padding: 20px !important;
    gap: 16px;
}

/* — The single "row" becomes a clean grouped card — */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-table-row {
    border-radius: 16px;
    border: 0.5px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    overflow: visible;
    cursor: default;
    box-shadow: inset 0 0.5px 0 rgba(255, 255, 255, 0.05);
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-table-row.checked,
.custom-modal.bulk-table-mode.bulk-single-item .bulk-table-row.checked:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.08);
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-table-row:hover {
    background: rgba(255, 255, 255, 0.04);
}

/* — Top section: thumb + headline — */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-main {
    padding: 16px;
    align-items: flex-start;
    gap: 14px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-thumb,
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-thumb-empty {
    width: 84px;
    height: 84px;
    border-radius: 14px;
    border: 0.5px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
    flex-shrink: 0;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-right-col {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-info {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-title {
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.014em;
    color: rgba(255, 255, 255, 0.95);
    line-height: 1.3;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-table-row:hover .bulk-row-title > span {
    animation: none;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-car-line {
    font-size: 13px;
    line-height: 1.4;
    color: rgba(235, 235, 245, 0.6);
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-car-text {
    color: rgba(235, 235, 245, 0.6);
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-car-match {
    font-weight: 500;
}

/* Confidence pill */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-info > .bulk-row-car-line:nth-child(3) {
    align-items: baseline;
    font-size: 13px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-info > .bulk-row-car-line:nth-child(3) > span:first-child {
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 3px 10px;
    border-radius: 8px;
    background: rgba(48, 209, 88, 0.16);
    color: #30d158 !important;
    line-height: 1.3;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-info > .bulk-row-car-line:nth-child(3) > span:last-child {
    font-size: 12px !important;
    color: rgba(235, 235, 245, 0.6) !important;
}

/* — Inline fields row (category / position / price) — */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-fields {
    gap: 10px;
    padding-top: 4px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.06);
    margin-top: 4px;
    padding-top: 12px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-cat-tag {
    font-size: 12px;
    height: 26px;
    padding: 0 12px;
    border-radius: 13px;
    font-weight: 500;
    max-width: none;
    letter-spacing: -0.01em;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-cat-tag.has-cat {
    background: rgba(191, 90, 242, 0.18);
    color: #d8a8ff;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-pos {
    height: 26px !important;
    font-size: 12px !important;
    padding: 0 22px 0 10px !important;
    border-radius: 13px !important;
    background: rgba(120, 120, 128, 0.22) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    font-weight: 500;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-pos:hover {
    background: rgba(120, 120, 128, 0.32) !important;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-price-wrap {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 26px;
    padding: 0 10px;
    border-radius: 13px;
    background: rgba(48, 209, 88, 0.16);
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-old-price {
    font-size: 11px;
    color: rgba(235, 235, 245, 0.4);
    font-weight: 500;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-price {
    background: transparent !important;
    height: 22px !important;
    padding: 0 !important;
    width: 56px !important;
    color: #30d158 !important;
    font-size: 13px !important;
    font-weight: 600 !important;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-price:hover,
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-price:focus {
    background: transparent !important;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-price-currency {
    color: #30d158;
    font-size: 11px;
    font-weight: 600;
}

/* — Detail section — visually grouped form — */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-row-details {
    padding: 0 16px 16px 16px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.06);
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-details-grid {
    background: transparent;
    border: none;
    padding: 16px 0 0 0;
    gap: 14px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-detail-row {
    gap: 12px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-detail-label {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(235, 235, 245, 0.45);
    margin-bottom: 2px;
    text-transform: uppercase;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-detail-input {
    height: 36px !important;
    padding: 0 12px !important;
    font-size: 14px !important;
    border-radius: 10px !important;
    background: rgba(118, 118, 128, 0.18) !important;
    border: 0.5px solid transparent !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-weight: 500;
    letter-spacing: -0.01em;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease !important;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-detail-input:hover {
    background: rgba(118, 118, 128, 0.24) !important;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-detail-input:focus {
    background: rgba(118, 118, 128, 0.28) !important;
    border-color: rgba(10, 132, 255, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18) !important;
}
.custom-modal.bulk-table-mode.bulk-single-item select.bulk-detail-input {
    appearance: none !important;
    -webkit-appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23ebebf5' stroke-opacity='0.6' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 12px center !important;
    padding-right: 32px !important;
}

/* Catalog # input wrap */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-add-partnum2-btn {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: rgba(48, 209, 88, 0.16);
    color: #30d158;
    font-size: 18px;
    font-weight: 400;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-add-partnum2-btn:hover {
    background: rgba(48, 209, 88, 0.28);
    color: #30d158;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-remove-partnum2-btn {
    width: 22px;
    height: 22px;
    color: rgba(255, 69, 58, 0.85);
    font-size: 16px;
    opacity: 0.85;
}

/* — Rim params tile cards — */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-rim-params {
    margin-top: 16px;
    padding: 14px 16px;
    background: rgba(118, 118, 128, 0.12);
    border-radius: 12px;
    border: none;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-rim-params-title {
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: rgba(235, 235, 245, 0.5);
    text-transform: uppercase;
    margin-bottom: 10px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-rim-param {
    background: rgba(118, 118, 128, 0.16);
    border-radius: 10px;
    padding: 8px 10px;
    border: none;
}

/* — Footer — iOS-style action bar — */
.custom-modal.bulk-table-mode.bulk-single-item .bulk-table-bottom {
    padding: 16px 20px 20px;
    border-top: 0.5px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    gap: 12px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-cancel-btn {
    flex: 0 0 auto;
    height: 44px;
    padding: 0 18px;
    border-radius: 12px;
    background: transparent;
    border: none;
    color: rgba(235, 235, 245, 0.65);
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: background 0.15s ease, color 0.15s ease;
    cursor: pointer;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-cancel-btn:hover {
    background: rgba(120, 120, 128, 0.18);
    color: rgba(255, 255, 255, 0.9);
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-cancel-btn svg {
    opacity: 0.7;
    width: 12px;
    height: 12px;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-add-checked-btn {
    flex: 1 1 auto;
    height: 44px;
    border-radius: 12px;
    background: #30d158;
    border: none;
    color: #fff;
    font-size: 15px;
    font-weight: 600;
    letter-spacing: -0.014em;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
    transition: background 0.15s ease, transform 0.06s ease;
    cursor: pointer;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-add-checked-btn:hover {
    background: #28b94d;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-add-checked-btn:active {
    transform: scale(0.985);
    background: #239944;
}
.custom-modal.bulk-table-mode.bulk-single-item .bulk-add-checked-btn svg {
    width: 14px;
    height: 14px;
    stroke-width: 2.6;
}

/* — Light mode pairing — */
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item {
    background: rgba(252, 252, 254, 0.86);
    border-color: rgba(0, 0, 0, 0.06);
    box-shadow:
        0 30px 90px rgba(0, 0, 0, 0.18),
        0 0 0 0.5px rgba(0, 0, 0, 0.04),
        inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-progress-text {
    color: rgba(0, 0, 0, 0.92);
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-table-row,
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-table-row.checked {
    background: rgba(255, 255, 255, 0.7);
    border-color: rgba(0, 0, 0, 0.06);
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-row-title {
    color: rgba(0, 0, 0, 0.92);
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-detail-input {
    background: rgba(118, 118, 128, 0.12) !important;
    color: rgba(0, 0, 0, 0.88) !important;
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-detail-input:focus {
    background: rgba(255, 255, 255, 0.95) !important;
    border-color: rgba(0, 122, 255, 0.55) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.18) !important;
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-cancel-btn {
    color: rgba(60, 60, 67, 0.7);
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-cancel-btn:hover {
    background: rgba(120, 120, 128, 0.12);
    color: rgba(0, 0, 0, 0.85);
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-add-checked-btn {
    background: #34c759;
}
body.light-mode .custom-modal.bulk-table-mode.bulk-single-item .bulk-add-checked-btn:hover {
    background: #2fb350;
}

/* =========================================================================
    PANEL GŁÓWNY — Apple Minimal Redesign
   iOS Home Screen + macOS Settings: równa siatka, czytelna typografia,
   brak gradientów, brak kapsuł pod ikonami, subtelny hover.
   ========================================================================= */

/* --- Save / header buttons ---------------------------------------------- */
#sellerPanel .save-btn,
.header-save-btn {
    background: var(--primary-color, #007AFF);
    color: #fff;
    border: none;
    border-radius: 999px;
    padding: 8px 18px;
    font: 600 14px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: -0.1px;
    cursor: pointer;
    box-shadow: none;
    transition: background 0.18s ease, transform 0.12s ease;
    min-height: 34px;
    display: none;
    align-items: center;
    margin-left: 8px;
}
#sellerPanel .save-btn:hover,
.header-save-btn:hover {
    background: color-mix(in srgb, var(--primary-color, #007AFF) 88%, white 12%);
}
#sellerPanel .save-btn:active,
.header-save-btn:active { transform: scale(0.97); }

@media (max-width: 768px) {
    #sellerPanel .save-btn#panelSaveBtn { display: none !important; }
}
@media (min-width: 769px) {
    .header-save-btn#headerSaveBtn { display: none !important; }
}

/* Schowaj nagłówki sekcji Kalkulatory/Logistyka/Dokumenty — Admin zostaje. */
#sellerPanel .seller-tiles-section[data-category="calculators"],
#sellerPanel .seller-tiles-section[data-category="logistics"],
#sellerPanel .seller-tiles-section[data-category="documents"] {
    display: none !important;
}

/* Sekcja Admin — domyślnie kompletnie niewidoczna. Odsłania ją tylko
   przycisk z paska narzędzi po podaniu hasła administratora. */
body:not(.admin-unlocked) #sellerPanel .seller-tiles-section[data-category="admin"],
body:not(.admin-unlocked) #sellerPanel .seller-tile[data-category="admin"] {
    display: none !important;
}
body.admin-unlocked #sellerPanel .seller-tile[data-category="admin"].admin-hidden {
    display: grid !important;
}

/* Wewnątrz nagłówka admin (po odblokowaniu) — zostawiamy tylko etykietę.
   Stara ikona kłódki, hint i przycisk Zablokuj są niepotrzebne (toggle = przycisk w header). */
#sellerPanel #adminSectionHeader .admin-lock-icon,
#sellerPanel #adminSectionHeader .admin-unlock-icon,
#sellerPanel #adminSectionHeader .admin-unlock-hint,
#sellerPanel #adminSectionHeader .admin-lock-btn {
    display: none !important;
}

/* Badges (NOWE / Po terminie) */
#sellerPanel .seller-tile .seller-tile-badges-top {
    position: absolute;
    top: 10px;
    right: 10px;
    left: auto;
    display: flex;
    gap: 4px;
    pointer-events: none;
}
#sellerPanel .seller-tile .seller-tile-new,
#sellerPanel .seller-tile .seller-tile-overdue {
    font: 600 9px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    padding: 3px 6px;
    border-radius: 999px;
    background: var(--ios-red, #FF3B30);
    color: #fff;
    border: none;
    box-shadow: none;
}
#sellerPanel .seller-tile .seller-tile-overdue {
    background: var(--ios-orange, #FF9F0A);
}

/* Licznik (np. liczba notatek) */
#sellerPanel .seller-tile .seller-tile-count {
    position: absolute;
    left: 10px;
    right: auto;
    top: auto;
    bottom: 10px;
    min-width: 20px;
    height: 20px;
    padding: 0 6px;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.10);
    color: var(--text-primary);
    font: 700 11px/20px -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none;
    border: none;
}

/* Wejście — kolejne kafelki wchodzą ze staggerem (jak otwieranie folderu na iOS) */
#sellerPanel .seller-tiles.more-expanded .seller-tile.seller-tile--extra {
    animation: tileExpandIn 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
    transform-origin: top center;
}
#sellerPanel .seller-tiles.more-expanded .seller-tile.seller-tile--extra:nth-of-type(1) { animation-delay: 0.00s; }
#sellerPanel .seller-tiles.more-expanded .seller-tile.seller-tile--extra:nth-of-type(2) { animation-delay: 0.04s; }
#sellerPanel .seller-tiles.more-expanded .seller-tile.seller-tile--extra:nth-of-type(3) { animation-delay: 0.08s; }
#sellerPanel .seller-tiles.more-expanded .seller-tile.seller-tile--extra:nth-of-type(4) { animation-delay: 0.12s; }
#sellerPanel .seller-tiles.more-expanded .seller-tile.seller-tile--extra:nth-of-type(5) { animation-delay: 0.16s; }
#sellerPanel .seller-tiles.more-expanded .seller-tile.seller-tile--extra:nth-of-type(n+6) { animation-delay: 0.20s; }

/* Wyjście — wszystkie razem zwijają się szybko i miękko */
#sellerPanel .seller-tiles.more-collapsing .seller-tile.seller-tile--extra {
    animation: tileExpandOut 0.22s cubic-bezier(0.4, 0, 0.6, 1) both;
    transform-origin: top center;
    pointer-events: none;
}

@keyframes tileExpandIn {
    0%   { opacity: 0; transform: translateY(-6px) scale(0.92); filter: blur(2px); }
    60%  { filter: blur(0); }
    100% { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); }
}
@keyframes tileExpandOut {
    0%   { opacity: 1; transform: translateY(0) scale(1); }
    100% { opacity: 0; transform: translateY(-4px) scale(0.94); }
}
@keyframes tileFadeIn {
    from { opacity: 0; transform: translateY(3px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Sekcja Admin — nagłówek typu subtle eyebrow. */
#sellerPanel .seller-tiles-section[data-category="admin"] {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 12px 0 0;
    padding: 6px 4px;
    font: 600 12px/1 -apple-system, BlinkMacSystemFont, "SF Pro Text", sans-serif;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: var(--text-secondary);
    background: none;
    border: none;
    aspect-ratio: auto;
    border-radius: 0;
}

/* Kafelki Administratora — stale pomarańczowy akcent w stylu iOS. */
#sellerPanel .seller-tile[data-category="admin"] {
    background: rgba(255, 159, 10, 0.10);
    border-color: rgba(255, 159, 10, 0.28);
}
#sellerPanel .seller-tile[data-category="admin"] .seller-tile-icon,
#sellerPanel .seller-tile[data-category="admin"] .seller-tile-label {
    color: var(--ios-orange, #FF9F0A);
}
#sellerPanel .seller-tile[data-category="admin"]:hover {
    background: rgba(255, 159, 10, 0.16);
    border-color: rgba(255, 159, 10, 0.50);
    box-shadow: 0 6px 18px rgba(255, 159, 10, 0.18),
                0 0 0 3px rgba(255, 159, 10, 0.10);
}
#sellerPanel .seller-tile[data-category="admin"]:hover .seller-tile-icon {
    color: var(--ios-orange, #FF9F0A);
}
body.light-mode #sellerPanel .seller-tile[data-category="admin"] {
    background: rgba(255, 149, 0, 0.08);
    border-color: rgba(255, 149, 0, 0.28);
}
body.light-mode #sellerPanel .seller-tile[data-category="admin"] .seller-tile-icon,
body.light-mode #sellerPanel .seller-tile[data-category="admin"] .seller-tile-label {
    color: #C76B00;
}
body.light-mode #sellerPanel .seller-tile[data-category="admin"]:hover {
    background: rgba(255, 149, 0, 0.14);
    border-color: rgba(255, 149, 0, 0.55);
}

/* --- Panel glowny: kafelki napisane od nowa (v398) ---------------------- */
#sellerPanel .seller-tiles {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 14px;
    max-width: 920px;
    margin: 22px auto 32px;
    padding: 0;
    /* v405: `start` zamiast `stretch` — kafelki trzymają wymiar z aspect-ratio
       (1/1), wi\u0119c wszystkie wiersze maj\u0105 t\u0119 sam\u0105 wysoko\u015b\u0107 niezale\u017cnie od tego,
       czy s\u0105 to kafelki domy\u015blne, "extra" po rozwini\u0119ciu, czy admin. */
    align-items: start;
    justify-items: stretch;
    grid-auto-rows: max-content;
}

#sellerPanel .seller-tile {
    box-sizing: border-box;
    aspect-ratio: 1 / 1;
    width: 100%;
    min-width: 0;
    min-height: 0;
    height: auto;
    padding: 14px;
    border-radius: 22px;
    border: 1px solid rgba(255, 255, 255, 0.06);
    background: rgba(255, 255, 255, 0.04);
    box-shadow: none;
    position: relative;
    overflow: hidden;
    cursor: pointer;
    user-select: none;
    text-align: center;
    display: grid !important;
    grid-template-rows: 1fr 34px 10px 18px 1fr;
    grid-template-columns: minmax(0, 1fr);
    justify-items: center;
    align-items: center;
    gap: 0;
    transition: background 0.18s ease, border-color 0.18s ease,
                box-shadow 0.18s ease, transform 0.12s ease;
}

#sellerPanel .seller-tile::before,
#sellerPanel .seller-tile::after {
    content: none !important;
    display: none !important;
    padding: 0 !important;
}

#sellerPanel .seller-tile .seller-tile-icon {
    position: static !important;
    grid-row: 2;
    grid-column: 1;
    width: 34px;
    height: 34px;
    min-width: 34px;
    min-height: 34px;
    margin: 0;
    padding: 0;
    inset: auto !important;
    transform: none !important;
    display: grid !important;
    place-items: center;
    line-height: 1;
    color: var(--primary-color, #0A84FF);
    background: transparent;
    border: 0;
    box-shadow: none;
}

#sellerPanel .seller-tile .seller-tile-icon svg {
    display: block;
    width: 34px;
    height: 34px;
    max-width: 34px;
    max-height: 34px;
    margin: 0 auto;
    overflow: visible;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    filter: none;
    transform: none;
}

/* Etykieta kafelka — prosty, wycentrowany blok pod ikoną. */
#sellerPanel .seller-tile .seller-tile-label {
    position: static !important;
    grid-row: 4;
    grid-column: 1;
    display: block;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    padding: 0 4px;
    inset: auto !important;
    transform: none !important;
    justify-self: stretch;
    align-self: center;
    font: 700 12px/16px -apple-system, BlinkMacSystemFont, "SF Pro Text",
        "Helvetica Neue", system-ui, sans-serif;
    letter-spacing: 0;
    color: var(--text-primary);
    text-align: center;
    text-shadow: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: clip;
    word-break: normal;
}

#sellerPanel .seller-tile:hover {
    background: rgba(var(--primary-rgb, 10, 132, 255), 0.10);
    border-color: rgba(var(--primary-rgb, 10, 132, 255), 0.28);
    box-shadow: 0 6px 18px rgba(var(--primary-rgb, 10, 132, 255), 0.18),
                0 0 0 3px rgba(var(--primary-rgb, 10, 132, 255), 0.10);
    transform: none;
}

#sellerPanel .seller-tile:hover .seller-tile-icon {
    transform: none !important;
}

#sellerPanel .seller-tile:hover .seller-tile-label {
    transform: none !important;
}

#sellerPanel .seller-tile:active {
    transform: scale(0.97);
    box-shadow: none;
}

#sellerPanel .seller-tile.seller-tile--extra {
    display: none !important;
}

#sellerPanel .seller-tiles.more-expanded .seller-tile.seller-tile--extra,
#sellerPanel .seller-tiles.more-collapsing .seller-tile.seller-tile--extra,
#sellerPanel .seller-tiles:has(.seller-tile.edit-mode) .seller-tile.seller-tile--extra,
body.admin-unlocked #sellerPanel .seller-tile[data-category="admin"].admin-hidden {
    display: grid !important;
}

#sellerPanel .seller-tile.seller-tile--more .seller-tile-icon,
#sellerPanel .seller-tile.seller-tile--more .seller-tile-label {
    color: var(--text-secondary);
}

#sellerPanel .seller-tile.seller-tile--more .seller-tile-icon-more-open {
    display: none;
}

#sellerPanel .seller-tile.seller-tile--more .seller-tile-icon-more-closed,
#sellerPanel .seller-tile.seller-tile--more .seller-tile-icon-more-open {
    transition: opacity 0.18s ease, transform 0.18s ease;
}

#sellerPanel .seller-tiles.more-expanded .seller-tile--more .seller-tile-icon,
#sellerPanel .seller-tiles.more-expanded .seller-tile--more .seller-tile-label {
    color: var(--primary-color, #0A84FF);
}

#sellerPanel .seller-tiles.more-expanded .seller-tile--more .seller-tile-icon {
    transform: none !important;
}

#sellerPanel .seller-tiles.more-expanded .seller-tile--more .seller-tile-icon-more-closed {
    display: none;
}

#sellerPanel .seller-tiles.more-expanded .seller-tile--more .seller-tile-icon-more-open {
    display: block;
}

body.light-mode #sellerPanel .seller-tile {
    background: rgba(0, 0, 0, 0.03);
    border-color: rgba(0, 0, 0, 0.06);
}

body.light-mode #sellerPanel .seller-tile:hover {
    background: rgba(0, 0, 0, 0.05);
    border-color: rgba(0, 0, 0, 0.10);
}

body.light-mode #sellerPanel .seller-tile .seller-tile-count {
    background: rgba(0, 0, 0, 0.08);
}

/* Responsive */
@media (max-width: 720px) {
    #sellerPanel .seller-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 12px;
        margin-top: 18px;
    }
    #sellerPanel .seller-tile {
        border-radius: 20px;
        padding: 12px;
        grid-template-rows: 1fr 30px 8px 15px 1fr;
    }
    #sellerPanel .seller-tile .seller-tile-icon  {
        width: 30px;
        height: 30px;
        min-width: 30px;
        min-height: 30px;
    }
    #sellerPanel .seller-tile .seller-tile-icon svg {
        width: 30px;
        height: 30px;
        max-width: 30px;
        max-height: 30px;
    }
    #sellerPanel .seller-tile .seller-tile-label {
        font-size: 11px;
        line-height: 15px;
    }
}
@media (max-width: 480px) {
    #sellerPanel .seller-tiles {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 10px;
    }
    #sellerPanel .seller-tile {
        border-radius: 18px;
        padding: 10px;
        grid-template-rows: 1fr 28px 7px 14px 1fr;
    }
    #sellerPanel .seller-tile .seller-tile-icon  {
        width: 28px;
        height: 28px;
        min-width: 28px;
        min-height: 28px;
    }
    #sellerPanel .seller-tile .seller-tile-icon svg {
        width: 28px;
        height: 28px;
        max-width: 28px;
        max-height: 28px;
    }
    #sellerPanel .seller-tile .seller-tile-label {
        font-size: 10px;
        line-height: 14px;
    }
    #sellerPanel .seller-tile .seller-tile-count {
        left: 8px; bottom: 8px; min-width: 18px; height: 18px;
        font-size: 10px; line-height: 18px;
    }
    #sellerPanel .seller-tile .seller-tile-badges-top { top: 8px; right: 8px; }
}


/* --- Admin access button (toolbar) -------------------------------------- */
.admin-access-btn { position: relative; }
.admin-access-btn .admin-access-icon { display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.2s ease, transform 0.2s ease; }
.admin-access-btn .admin-access-icon--lock { display: none; }
.admin-access-btn.is-unlocked .admin-access-icon--person { display: none; }
.admin-access-btn.is-unlocked .admin-access-icon--lock { display: inline-flex; }

/* Stan zablokowany — neutralny (jak pozostałe panel-header-btn). */
.admin-access-btn:hover {
    background: rgba(var(--primary-rgb, 10, 132, 255), 0.14);
    border-color: rgba(var(--primary-rgb, 10, 132, 255), 0.32);
}

/* Stan odblokowany — pomarańczowy akcent, dopasowany do kafelków admin. */
.admin-access-btn.is-unlocked {
    color: var(--ios-orange, #FF9F0A);
    background: rgba(255, 159, 10, 0.14);
    border-color: rgba(255, 159, 10, 0.40);
}
.admin-access-btn.is-unlocked:hover {
    background: rgba(255, 159, 10, 0.22);
    border-color: rgba(255, 159, 10, 0.65);
    box-shadow: 0 0 0 3px rgba(255, 159, 10, 0.12);
}
body.light-mode .admin-access-btn.is-unlocked {
    color: #C76B00;
    background: rgba(255, 149, 0, 0.12);
    border-color: rgba(255, 149, 0, 0.40);
}

/* Subtelne mignięcie po przełączeniu (Apple-feel). */
.admin-access-btn.is-unlocked .admin-access-icon--lock {
    animation: adminAccessIconIn 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}
.admin-access-btn:not(.is-unlocked) .admin-access-icon--person {
    animation: adminAccessIconIn 0.32s cubic-bezier(0.32, 0.72, 0, 1) both;
}
@keyframes adminAccessIconIn {
    0% { opacity: 0; transform: scale(0.7) rotate(-10deg); }
    100% { opacity: 1; transform: scale(1) rotate(0); }
}