/* ================================================ */
        /* ?? NEOMORPHISM PREMIUM DESIGN                    */
        /* Soft shadows, 3D depth, luxury feel              */
        /* Ore PWS Group - Redesign 2026                    */
        /* ================================================ */

        :root {
            /* "only" blocca l'auto-dark di Chrome/WebView Android (tema gestito dall'app via .dark-theme) */
            color-scheme: only light;
            /* Neomorphism Palette - Light */
            --neo-bg: #E4E9F2;
            --neo-bg-dark: #D1D9E6;
            --neo-bg-light: #F0F4FA;
            --neo-shadow-dark: #BEC8D8;
            --neo-shadow-light: #FFFFFF;
            --neo-primary: #008B8B;
            --neo-primary-light: #00BFBF;
            --neo-primary-glow: rgba(0, 139, 139, 0.4);
            --neo-secondary: #6C5CE7;
            --neo-accent: #FD79A8;
            --neo-error: #E74C3C;
            --neo-success: #00B894;
            --neo-warning: #FDCB6E;

            --text-primary: #2D3436;
            --text-secondary: rgba(45, 52, 54, 0.6);
            --text-tertiary: rgba(45, 52, 54, 0.38);

            /* Neomorphic Shadows */
            --neo-out: 8px 8px 16px var(--neo-shadow-dark), -8px -8px 16px var(--neo-shadow-light);
            --neo-out-sm: 4px 4px 8px var(--neo-shadow-dark), -4px -4px 8px var(--neo-shadow-light);
            --neo-out-lg: 12px 12px 24px var(--neo-shadow-dark), -12px -12px 24px var(--neo-shadow-light);
            --neo-in: inset 4px 4px 8px var(--neo-shadow-dark), inset -4px -4px 8px var(--neo-shadow-light);
            --neo-in-sm: inset 2px 2px 5px var(--neo-shadow-dark), inset -2px -2px 5px var(--neo-shadow-light);
            --neo-flat: 0 0 0 transparent;

            /* Header height variable (includes safe-area on supported devices) */
            --header-height: calc(70px + env(safe-area-inset-top, 0px));

            /* Compatibility aliases for old Material Design variable references */
            --md-sys-color-primary: #008B8B;
            --md-sys-color-on-primary: #FFFFFF;
            --md-sys-color-primary-container: rgba(0, 139, 139, 0.12);
            --md-sys-color-on-primary-container: #002020;
            --md-sys-color-secondary: #6C5CE7;
            --md-sys-color-on-secondary: #FFFFFF;
            --md-sys-color-secondary-container: rgba(108, 92, 231, 0.12);
            --md-sys-color-on-secondary-container: #1A1040;
            --md-sys-color-tertiary: #FD79A8;
            --md-sys-color-on-tertiary: #FFFFFF;
            --md-sys-color-tertiary-container: rgba(253, 121, 168, 0.12);
            --md-sys-color-on-tertiary-container: #3D0019;
            --md-sys-color-error: #E74C3C;
            --md-sys-color-on-error: #FFFFFF;
            --md-sys-color-error-container: rgba(231, 76, 60, 0.12);
            --md-sys-color-on-error-container: #410002;
            --md-sys-color-background: #E4E9F2;
            --md-sys-color-on-background: #2D3436;
            --md-sys-color-surface: #E4E9F2;
            --md-sys-color-on-surface: #2D3436;
            --md-sys-color-surface-variant: #DDE3EC;
            --md-sys-color-on-surface-variant: rgba(45, 52, 54, 0.6);
            --md-sys-color-outline: #BEC8D8;
            --md-sys-color-outline-variant: #D1D9E6;
            --md-sys-color-inverse-surface: #2D3436;
            --md-sys-color-inverse-on-surface: #E4E9F2;
            --md-sys-color-scrim: rgba(0, 0, 0, 0.5);
            --md-sys-color-shadow: #000000;
            --md-sys-color-surface-container-low: #E8EDF5;
            --md-sys-color-surface-container: #E4E9F2;
            --md-sys-color-surface-container-high: #DDE3EC;
            --md-sys-color-surface-container-highest: #D1D9E6;

            --body-font-family: 'Poppins', -apple-system, BlinkMacSystemFont, sans-serif;
            --base-font-size: 16px;
            --border-radius-small: 14px;
            --border-radius-medium: 20px;
            --border-radius-large: 28px;
            --border-radius-full: 999px;
            --elevation-1: var(--neo-out-sm);
            --elevation-2: var(--neo-out);
            --elevation-3: var(--neo-out-lg);
            --elevation-4: var(--neo-out-lg);
            --elevation-5: var(--neo-out-lg);

            --spring: cubic-bezier(0.34, 1.56, 0.64, 1);
            --smooth: cubic-bezier(0.4, 0, 0.2, 1);
        }

        /* Dark Theme • Aurora Boreale ✨ */
        .dark-theme {
            color-scheme: dark;
            --neo-bg: #1A1A2E;
            --neo-bg-dark: #131325;
            --neo-bg-light: #232342;
            --neo-shadow-dark: transparent;
            --neo-shadow-light: transparent;

            /* KILL ALL NEOMORPHIC SHADOWS • ZERO GLOW */
            --neo-out: none;
            --neo-out-sm: none;
            --neo-out-lg: none;
            --neo-in: none;
            --neo-in-sm: none;
            --neo-flat: none;
            --elevation-1: none;
            --elevation-2: none;
            --elevation-3: none;
            --elevation-4: none;
            --elevation-5: none;
            --text-primary: #EDF0F5;
            --text-secondary: rgba(237, 240, 245, 0.55);
            --text-tertiary: rgba(237, 240, 245, 0.28);
            --neo-primary: #00E5CC;
            --neo-primary-light: #33FFE5;
            --neo-primary-glow: rgba(0, 229, 204, 0.3);

            /* Aurora accent colors */
            --aurora-violet: #B794F6;
            --aurora-pink: #FF79C6;
            --aurora-glow-border: rgba(183, 148, 246, 0.12);
            --glass-bg: rgba(26, 26, 46, 0.7);

            --md-sys-color-primary: #00E5CC;
            --md-sys-color-on-primary: #003D35;
            --md-sys-color-primary-container: rgba(0, 229, 204, 0.15);
            --md-sys-color-on-primary-container: #33FFE5;
            --md-sys-color-secondary: #B794F6;
            --md-sys-color-on-secondary: #1A0A40;
            --md-sys-color-secondary-container: rgba(183, 148, 246, 0.15);
            --md-sys-color-on-secondary-container: #D4BBFF;
            --md-sys-color-tertiary: #FF79C6;
            --md-sys-color-on-tertiary: #3D0025;
            --md-sys-color-tertiary-container: rgba(255, 121, 198, 0.15);
            --md-sys-color-on-tertiary-container: #FF79C6;
            --md-sys-color-error: #FF5555;
            --md-sys-color-on-error: #690005;
            --md-sys-color-error-container: rgba(255, 85, 85, 0.15);
            --md-sys-color-on-error-container: #FF5555;
            --md-sys-color-background: #1A1A2E;
            --md-sys-color-on-background: #EDF0F5;
            --md-sys-color-surface: #1A1A2E;
            --md-sys-color-on-surface: #EDF0F5;
            --md-sys-color-surface-variant: #232342;
            --md-sys-color-on-surface-variant: rgba(237, 240, 245, 0.55);
            --md-sys-color-outline: #28284A;
            --md-sys-color-outline-variant: #232342;
            --md-sys-color-inverse-surface: #EDF0F5;
            --md-sys-color-inverse-on-surface: #1A1A2E;
            --md-sys-color-surface-container-low: #1E1E35;
            --md-sys-color-surface-container: #1A1A2E;
            --md-sys-color-surface-container-high: #232342;
            --md-sys-color-surface-container-highest: #28284A;
            /* Ensure header height/padding in dark theme match the light theme exactly */
            --header-height: calc(70px + env(safe-area-inset-top, 0px));
        }

        /* Force header measures in dark theme to be identical to light theme
           (height, padding and visual elevation) to avoid perceived vertical shift */
        .dark-theme header {
            box-sizing: border-box;
            height: var(--header-height, calc(70px + env(safe-area-inset-top, 0px)));
            padding: 0.8rem 1.25rem;
            /* match light-theme elevation so spacing appears identical */
            box-shadow: 0 4px 12px var(--neo-shadow-dark);
            background: var(--neo-bg);
            transition: background-color 0.4s var(--smooth), border-color 0.4s var(--smooth), box-shadow 0.4s var(--smooth);
            border-bottom: none;
        }

        /* Ensure main uses the same computed margin-top in dark theme */
        .dark-theme main {
            margin-top: var(--header-height, calc(70px + env(safe-area-inset-top, 0px)));
        }

        /* ===== FIX iOS Safari Datepicker ===== */
        @supports (-webkit-touch-callout: none) {
            .flatpickr-calendar {
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
                -webkit-backface-visibility: hidden;
                backface-visibility: hidden;
                touch-action: manipulation;
                will-change: transform;
                position: fixed !important;
                z-index: 9999 !important;
            }
            .flatpickr-day {
                touch-action: manipulation;
                -webkit-tap-highlight-color: transparent;
                padding: 10px;
                -webkit-user-select: none;
                user-select: none;
            }
            input.datepicker, input.datepicker-ferie {
                font-size: 16px !important;
                -webkit-transform: translateZ(0);
                transform: translateZ(0);
            }
            #dateIndicator {
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
                -webkit-user-select: none;
                user-select: none;
            }
            .date-navigator button.date-arrow-btn {
                background: none;
                border: none;
                cursor: pointer;
                padding: 6px 12px;
                border-radius: 50%;
                transition: all 0.2s ease;
                color: var(--neo-primary);
                font-size: 1.44em;
                min-width: 37px;
                min-height: 37px;
                display: flex;
                align-items: center;
                justify-content: center;
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
                -webkit-user-select: none;
                user-select: none;
                position: relative;
                overflow: hidden;
            }
            .date-navigator button.date-arrow-btn .material-symbols-outlined {
                font-size: 1.2em !important;
                line-height: 1;
                pointer-events: none;
                position: relative;
                z-index: 1;
            }
            .cloud-login-btn {
                -webkit-user-select: text;
                user-select: text;
                touch-action: manipulation;
            }
            #dateIndicatorContent {
                cursor: pointer !important;
                padding: 8px 16px;
                border-radius: var(--border-radius-medium);
                transition: all 0.2s ease;
                -webkit-tap-highlight-color: transparent;
                touch-action: manipulation;
                -webkit-user-select: none;
                user-select: none;
                position: relative;
                overflow: hidden;
                background: none;
                border: none;
                font-family: inherit;
                font-size: inherit;
                color: inherit;
                display: inline-flex;
                align-items: center;
                gap: 4px;
                outline: none;
            }
            #dayNameIndicator {
                text-align: center;
                font-weight: 600;
                font-size: 1.1em;
                color: var(--neo-primary);
                margin-bottom: 8px;
                padding: 4px 12px;
                border-radius: var(--border-radius-medium);
                background: rgba(0, 139, 139, 0.08);
                display: none !important;
            }
            @supports (-webkit-touch-callout: none) {
                #dayNameIndicator { display: block !important; }
            }
            .date-navigator {
                gap: 4px !important;
                align-items: center;
                padding: 4px;
                border-radius: var(--border-radius-large);
                background: var(--neo-bg);
                box-shadow: var(--neo-in);
            }
        }

        /* iOS Safari Keyboard Fix */
        .ios-keyboard-fix {
            position: fixed; top: 0; left: 0;
            height: 1px; width: 1px;
            opacity: 0.01; pointer-events: none;
        }

        /* iOS Safari Compatibility Fixes */
        html {
            height: 100%;
            height: -webkit-fill-available;
        }

        body {
            min-height: 100vh;
            min-height: -webkit-fill-available;
        }

        /* Safe Area Support for iOS */
        @supports (padding: max(0px)) {
            body {
                padding-left: env(safe-area-inset-left, 0px);
                padding-right: env(safe-area-inset-right, 0px);
                padding-top: env(safe-area-inset-top, 0px);
                /* Ensure header height variable includes safe-area inset on supported devices */
                --header-height: calc(70px + env(safe-area-inset-top, 0px));
            }
            header,
            .dark-theme header,
            body.dark-theme header,
            body.design-wrap header {
                padding-top: calc(0.8rem + env(safe-area-inset-top, 0px)) !important;
                padding-left: calc(1.25rem + env(safe-area-inset-left, 0px)) !important;
                padding-right: calc(1.25rem + env(safe-area-inset-right, 0px)) !important;
                /* Keep explicit height consistent with --header-height when safe-area is supported */
                height: var(--header-height, calc(70px + env(safe-area-inset-top, 0px))) !important;
                box-sizing: border-box !important;
            }
            main,
            .dark-theme main,
            body.dark-theme main,
            body.design-wrap main {
                margin-top: var(--header-height, calc(70px + env(safe-area-inset-top, 0px))) !important;
            }
            .bottom-nav,
            .dark-theme .bottom-nav,
            body.dark-theme .bottom-nav,
            body.design-wrap .bottom-nav {
                padding-bottom: calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
                padding-left: env(safe-area-inset-left, 0px) !important;
                padding-right: env(safe-area-inset-right, 0px) !important;
            }
        }

        /* iOS Touch Optimization */
        * {
            -webkit-tap-highlight-color: transparent;
            -webkit-touch-callout: none;
        }
        button, .btn, .button, [role="button"] {
            -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1);
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            touch-action: manipulation;
        }
        .scrollable, .modal-content, .calendar-container {
            -webkit-overflow-scrolling: touch;
        }
        .card, .modal, .bottom-nav {
            -webkit-transform: translateZ(0);
            transform: translateZ(0);
        }
        input, select, textarea {
            -webkit-appearance: none;
            -webkit-border-radius: 0;
        }
        body {
            overscroll-behavior: none;
            -webkit-overflow-scrolling: touch;
        }
        input, textarea, select {
            font-size: 16px;
        }
        @media screen and (max-width: 768px) {
            input, textarea, select {
                font-size: 16px !important;
            }
        }
        body {
            padding-bottom: calc(110px + env(safe-area-inset-bottom, 0px)) !important;
        }

        /* ===== GLOBAL RESET & BASE ===== */
        *, *::before, *::after {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        html {
            font-size: var(--base-font-size);
            scroll-behavior: smooth;
        }

        body {
            font-family: var(--body-font-family);
            background: var(--neo-bg);
            color: var(--text-primary);
            line-height: 1.6;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
            overflow-x: hidden;
            min-height: 100vh;
            transition: background-color 0.5s var(--smooth), color 0.5s var(--smooth);
        }

        .container {
            max-width: 600px;
            margin: 0 auto;
            padding: 1rem;
        }

        /* ===== SUBTLE GRADIENT BG ===== */
        body::before {
            content: '';
            position: fixed;
            top: 0; left: 0;
            width: 100%; height: 100%;
            z-index: -1;
            background:
                radial-gradient(ellipse at 30% 10%, rgba(0, 139, 139, 0.06) 0%, transparent 50%),
                radial-gradient(ellipse at 70% 80%, rgba(108, 92, 231, 0.04) 0%, transparent 50%);
            pointer-events: none;
        }

        /* ===== HEADER ===== */
        header {
            position: fixed;
            top: 0; left: 0;
            width: 100%;
            z-index: 1000;
            background: var(--neo-bg);
            /* Force consistent header height and include padding inside height */
            box-sizing: border-box;
            height: var(--header-height, 70px);
            padding: 0.8rem 1.25rem;
            box-shadow: 0 4px 12px var(--neo-shadow-dark);
            transition: background-color 0.4s var(--smooth), border-color 0.4s var(--smooth), box-shadow 0.4s var(--smooth);
            border-bottom: none;
        }

        .header-content {
            display: flex;
            justify-content: space-between;
            align-items: center;
            max-width: 600px;
            margin: 0 auto;
        }

        .logo img {
            max-height: 36px;
            width: auto;
            display: block;
            filter: drop-shadow(2px 2px 4px var(--neo-shadow-dark));
        }

        /* Logo Bounce Animation */
        @keyframes bounce-horizontal {
            0%, 100% { transform: translateX(0) rotate(0deg); }
            25% { transform: translateX(10px) rotate(3deg); }
            50% { transform: translateX(0) rotate(0deg); }
            75% { transform: translateX(-10px) rotate(-3deg); }
        }

        .bouncing-logo {
            animation: bounce-horizontal 2.5s infinite;
            transform-origin: center;
            cursor: pointer;
            transition: filter 0.3s ease;
        }

        .bouncing-logo:hover {
            filter: drop-shadow(0 0 8px var(--neo-primary-glow));
            animation-play-state: paused;
        }

        @keyframes bounce-excited {
            0%, 100% { transform: scale(1) rotate(0deg); }
            10% { transform: translateX(15px) rotate(8deg) scale(1.15); }
            20% { transform: translateX(-15px) rotate(-10deg) scale(1.1); }
            30% { transform: translateX(10px) rotate(10deg) scale(1.1); }
            40% { transform: translateX(-10px) rotate(-8deg) scale(1.05); }
            50% { transform: translateY(-10px) rotate(5deg) scale(1.1); }
            60% { transform: translateY(8px) rotate(-5deg) scale(1.05); }
            70% { transform: translateX(12px) rotate(8deg) scale(1.08); }
            80% { transform: translateX(-12px) rotate(-8deg) scale(1.04); }
            90% { transform: translateX(6px) rotate(3deg) scale(1.02); }
        }

        .bouncing-logo-excited {
            animation: bounce-excited 2s ease-in-out;
            transform-origin: center;
            cursor: pointer;
            filter: drop-shadow(0 0 10px var(--neo-primary-glow));
        }

        .header-actions {
            display: flex;
            gap: 10px;
            align-items: center;
        }

        /* Superhero/GIF overlay styles */
        .superhero-gif {
            width: 100%; height: 100%;
            object-fit: cover; object-position: center;
            display: block; margin: 0;
            border-radius: 0; box-shadow: none;
        }
        @media (min-width: 1024px) {
            .superhero-container {
                width: 90%; max-width: 1200px;
                height: auto; max-height: 90vh;
            }
            .superhero-gif {
                object-fit: contain;
                border-radius: var(--border-radius-large);
                box-shadow: var(--neo-out-lg);
            }
        }

        .close-btn {
            position: fixed; top: 20px; right: 20px;
            width: 50px; height: 50px;
            background: var(--neo-bg);
            color: var(--neo-error);
            border: none; border-radius: 50%;
            display: flex; justify-content: center; align-items: center;
            cursor: pointer;
            box-shadow: var(--neo-out);
            z-index: 10000;
            transition: all 0.3s var(--spring);
            animation: pulse-animation 1.5s infinite;
            font-size: 1.5rem;
        }
        .close-btn .material-symbols-outlined { font-size: 30px; font-weight: bold; }
        .close-btn:hover, .close-btn:active {
            box-shadow: var(--neo-in);
            transform: scale(1.05);
        }

        .rip-message {
            position: fixed; top: 0; left: 50%;
            transform: translateX(-50%) translateY(-100%);
            background: var(--neo-bg);
            color: var(--text-primary);
            padding: 10px 15px;
            border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
            box-shadow: var(--neo-out);
            z-index: 1001; font-size: 1rem;
            display: flex; align-items: center; justify-content: center;
            gap: 8px; transition: transform 0.5s ease;
            font-weight: bold; min-width: 200px; text-align: center;
        }
        .rip-message.visible { transform: translateX(-50%) translateY(0); }
        .rip-message::before { content: "💀"; font-size: 1.2rem; }
        .rip-message::after { content: "💀"; font-size: 1.2rem; }

        /* Button escape/death animations */
        @keyframes escape-animation {
            0% { transform: translate(0, 0) scale(1) rotate(0deg); }
            10% { transform: translate(-40px, -30px) scale(1.3) rotate(-15deg); }
            20% { transform: translate(35px, 45px) scale(0.7) rotate(20deg); }
            50% { transform: translate(60px, 20px) scale(1.2) rotate(-35deg); }
            70% { transform: translate(40px, -40px) scale(1.5) rotate(-45deg); }
            100% { transform: translate(0, 0) scale(1) rotate(0deg); }
        }
        @keyframes squash-stretch {
            0%, 100% { transform: scale(1, 1); }
            25% { transform: scale(1.3, 0.7); }
            50% { transform: scale(0.7, 1.3); }
            75% { transform: scale(1.1, 0.9); }
        }
        @keyframes shake {
            0%, 100% { transform: translateX(0); }
            10%, 30%, 50%, 70%, 90% { transform: translateX(-5px) rotate(-2deg); }
            20%, 40%, 60%, 80% { transform: translateX(5px) rotate(2deg); }
        }
        .escaping {
            animation: escape-animation 0.4s infinite;
            box-shadow: 0 0 15px rgba(255, 0, 0, 0.7);
            z-index: 10000; position: fixed !important;
        }
        .escaping:hover { animation-duration: 0.2s !important; }
        @keyframes button-death {
            0% { transform: scale(1); opacity: 1; }
            50% { transform: scale(1.2) rotate(30deg); opacity: 0.5; }
            100% { transform: scale(0) rotate(360deg); opacity: 0; }
        }
        .dying-button {
            animation: button-death 2s forwards !important;
            position: fixed !important; z-index: 10000 !important;
            pointer-events: none !important;
        }

        @keyframes highlight-pulse {
            0% { box-shadow: 0 0 0 0 var(--neo-primary-glow); transform: scale(1); }
            50% { box-shadow: 0 0 0 10px transparent; transform: scale(1.05); }
            100% { box-shadow: 0 0 0 0 transparent; transform: scale(1); }
        }
        .highlight-button { animation: highlight-pulse 1.5s infinite; position: relative; z-index: 100; }

        @keyframes pulse-animation {
            0% { transform: scale(1); box-shadow: var(--neo-out); }
            70% { transform: scale(1.1); box-shadow: var(--neo-out-lg); }
            100% { transform: scale(1); box-shadow: var(--neo-out); }
        }

        @media (max-width: 768px) {
            .close-btn { top: 15px; right: 15px; width: 45px; height: 45px; }
            .close-btn .material-symbols-outlined { font-size: 24px; }
        }

        /* ===== MAIN ===== */
        main {
            padding: 1rem;
            margin-top: var(--header-height, 70px);
            max-width: 600px;
            margin-left: auto;
            margin-right: auto;
        }

        /* ===== NEO CARD ===== */
        .card {
            background: var(--neo-bg);
            border-radius: var(--border-radius-large);
            padding: 1.5rem;
            margin-bottom: 1.25rem;
            box-shadow: var(--neo-out);
            transition: transform 0.4s var(--smooth), box-shadow 0.4s var(--smooth), border-color 0.4s var(--smooth), background-color 0.4s var(--smooth), background 0.4s var(--smooth);
            position: relative;
            animation: neo-card-enter 0.5s var(--smooth) both;
            border: none;
        }

        .card:hover {
            transform: translateY(-2px);
            box-shadow: var(--neo-out-lg);
        }

        @keyframes neo-card-enter {
            from { opacity: 0; transform: translateY(25px) scale(0.97); }
            to { opacity: 1; transform: translateY(0) scale(1); }
        }

        /* ===== APP DESCRIPTION BANNER (Google OAuth compliance) ===== */
        .app-description-banner {
            background: linear-gradient(135deg, var(--neo-primary) 0%, #3b82f6 100%);
            border-radius: var(--border-radius-large);
            padding: 1rem 1.25rem;
            margin-bottom: 1.25rem;
            animation: neo-card-enter 0.5s var(--smooth) both;
            box-shadow: var(--neo-out);
        }
        .app-description-banner.hidden {
            display: none !important;
        }
        /* Banner inizialmente visibile per Googlebot (no-JS); JS lo nasconde se utente già loggato */
        .app-description-banner.js-hidden {
            display: block; /* sovrascrive display:none per JS; rimane visibile senza JS */
        }
        .app-description-content {
            display: flex;
            align-items: flex-start;
            gap: 0.75rem;
            color: #fff;
            font-size: 0.9rem;
            line-height: 1.5;
        }
        .app-desc-icon {
            font-size: 1.5rem;
            color: rgba(255,255,255,0.9);
            flex-shrink: 0;
            margin-top: 2px;
        }
        .app-description-content strong {
            color: #fff;
        }

        .card h2, .card h3 {
            color: var(--neo-primary);
            margin-bottom: 1rem;
            font-weight: 700;
            letter-spacing: -0.02em;
        }

        .card h2 { font-size: 1.2rem; }
        .card h3 { font-size: 0.95rem; }

        /* ===== FORMS ===== */
        .form-group { margin-bottom: 1.2rem; }

        label {
            display: block;
            margin-bottom: 0.35rem;
            font-weight: 600;
            font-size: 0.78rem;
            color: var(--text-secondary);
            text-transform: uppercase;
            letter-spacing: 0.06em;
        }

        input[type="text"],
        input[type="number"],
        input[type="email"],
        input[type="tel"],
        input[type="password"],
        textarea,
        select {
            width: 100%;
            padding: 0.8rem 1rem;
            border: none;
            border-radius: var(--border-radius-medium);
            font-size: 0.95rem;
            font-family: var(--body-font-family);
            background: var(--neo-bg);
            color: var(--text-primary);
            box-shadow: var(--neo-in);
            transition: all 0.3s var(--smooth);
            outline: none;
            appearance: none;
            -webkit-appearance: none;
        }

        input:focus, select:focus, textarea:focus {
            box-shadow: var(--neo-in), 0 0 0 2px var(--neo-primary-glow);
        }

        select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z' fill='%23008B8B'/%3E%3C/svg%3E");
            background-repeat: no-repeat;
            background-position: right 1rem center;
            background-size: 1.2em;
            padding-right: 3rem;
        }

        .dark-theme select {
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24' viewBox='0 -960 960 960' width='24'%3E%3Cpath d='M480-345 240-585l56-56 184 184 184-184 56 56-240 240Z' fill='%2300E5CC'/%3E%3C/svg%3E");
        }

        textarea { min-height: 100px; resize: vertical; }

        .form-row {
            display: flex; flex-wrap: wrap;
            gap: 1rem; margin-bottom: 1rem;
        }
        .form-group-inline { flex: 1; min-width: 120px; }

        /* ===== BUTTONS ===== */
        button, .btn {
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: var(--border-radius-full);
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 600;
            font-family: var(--body-font-family);
            letter-spacing: 0.04em;
            transition: all 0.3s var(--spring);
            box-shadow: var(--neo-out-sm);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 0.5rem;
            background: var(--neo-bg);
            color: var(--neo-primary);
        }

        button:hover, .btn:hover {
            box-shadow: var(--neo-out);
            transform: translateY(-2px);
        }

        button:active, .btn:active {
            box-shadow: var(--neo-in);
            transform: scale(0.97);
        }

        /* Filled Button (Primary Action) */
        button[type="submit"], #submitBtn, #saveUserName, #addVehicle, #exportData, #importData, #saveFerieMalattie, .export-btn, .edit-all-btn, #addEntryBtn {
            background: var(--neo-bg);
            color: var(--neo-primary);
            box-shadow: var(--neo-out);
            position: relative;
        }
        button[type="submit"]::before, #submitBtn::before {
            content: '';
            position: absolute;
            top: -2px; left: -2px; right: -2px; bottom: -2px;
            border-radius: var(--border-radius-full);
            background: linear-gradient(135deg, var(--neo-primary), var(--neo-secondary), var(--neo-primary));
            background-size: 200% 200%;
            z-index: -1; opacity: 0;
            transition: opacity 0.3s;
            animation: glow-rotate 3s ease infinite;
        }
        button[type="submit"]:hover::before, #submitBtn:hover::before { opacity: 0.5; }

        @keyframes glow-rotate {
            0% { background-position: 0% 50%; }
            50% { background-position: 100% 50%; }
            100% { background-position: 0% 50%; }
        }

        /* Error/Destructive Button */
        #clearData, .delete-btn, .delete-ferie-btn, .delete-vehicle-btn {
            background: var(--neo-bg);
            color: var(--neo-error);
            box-shadow: var(--neo-out-sm);
        }
        #clearData:hover, .delete-btn:hover, .delete-ferie-btn:hover, .delete-vehicle-btn:hover {
            box-shadow: var(--neo-out);
            transform: translateY(-2px);
        }

        /* Text Button */
        .form-buttons button:last-child, .close-modal {
            background: transparent;
            color: var(--neo-primary);
            box-shadow: none;
        }
        .form-buttons button:last-child:hover, .close-modal:hover {
            background: rgba(0, 139, 139, 0.08);
        }
        .close-modal {
            font-size: 1.75rem; padding: 0.5rem;
            border-radius: 50%; line-height: 1;
            color: var(--text-secondary); font-weight: normal;
        }
        .close-modal:hover { color: var(--neo-primary); }

        /* Small Action Buttons */
        .edit-btn, .delete-btn {
            padding: 0.25rem 0.5rem;
            font-size: 0.75rem;
            min-width: 36px; min-height: 36px;
            box-shadow: var(--neo-out-sm);
            border-radius: var(--border-radius-small);
            text-transform: none;
            letter-spacing: normal;
            border: none;
        }
        .edit-btn {
            background: var(--neo-bg);
            color: var(--neo-primary);
        }
        .edit-btn:hover { box-shadow: var(--neo-out); color: var(--neo-primary-light); }
        .delete-btn {
            background: var(--neo-bg);
            color: var(--neo-error);
        }
        .delete-btn:hover { box-shadow: var(--neo-out); }

        .btn-secondary {
            background: var(--neo-bg);
            color: var(--text-secondary);
            box-shadow: var(--neo-out-sm);
            padding: 0.75rem 1.5rem;
            border: none;
            border-radius: var(--border-radius-full);
            cursor: pointer;
            font-size: 0.875rem;
            font-weight: 600;
            font-family: var(--body-font-family);
        }
        .btn-secondary:hover { box-shadow: var(--neo-out); color: var(--neo-primary); }

        /* ===== MATERIAL SYMBOLS ===== */
        .material-symbols-outlined {
            font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
            vertical-align: middle;
            font-size: 1.25em;
            line-height: 1;
        }

        /* ===== BOTTOM NAVIGATION ===== */
        .bottom-nav {
            position: fixed;
            bottom: 14px; left: 50% !important;
            transform: translateX(-50%) !important;
            width: calc(100% - 28px);
            max-width: 520px;
            background: var(--neo-bg);
            border-radius: var(--border-radius-large);
            padding: 0.4rem 0.15rem;
            display: flex;
            justify-content: space-around;
            align-items: center;
            z-index: 1000;
            box-shadow: var(--neo-out);
            border-top: none;
        }

        .nav-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-decoration: none;
            color: var(--text-tertiary);
            font-size: 0.62rem;
            font-weight: 600;
            padding: 0.45rem 0.55rem;
            border-radius: var(--border-radius-large);
            transition: all 0.3s var(--spring);
            min-width: 48px;
            cursor: pointer;
            position: relative;
            flex: 1;
            text-align: center;
            min-height: 48px;
            overflow: visible;
        }

        .nav-item .material-symbols-outlined {
            font-size: 1.35rem;
            margin-bottom: 1px;
            transition: all 0.3s var(--spring);
        }

        .nav-item span {
            display: block;
            line-height: 1.2;
            white-space: nowrap;
        }

        .nav-item:hover {
            color: var(--text-secondary);
        }

        .nav-item.active {
            color: var(--neo-primary);
            background: var(--neo-bg);
            box-shadow: var(--neo-in-sm);
        }

        .nav-item.active .material-symbols-outlined {
            font-variation-settings: 'FILL' 1, 'wght' 600;
            font-size: 1.5rem;
            filter: drop-shadow(0 0 5px var(--neo-primary-glow));
        }

        /* Remove old ::before indicator */
        .nav-item::before, .nav-item.active::before {
            display: none !important;
        }

        /* Removed dot indicator for nav items */

        /* ===== SECTIONS ===== */
        .section {
            display: none;
            animation: none;
        }
        .section.active {
            display: block;
            animation: neo-section-in 0.45s var(--smooth) both;
        }

        @keyframes neo-section-in {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }

        /* Remove old section indicator */
        .section.active::before {
            display: none;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(15px); }
            to { opacity: 1; transform: translateY(0); }
        }
        @keyframes fadeOut {
            from { opacity: 1; transform: translateY(0); }
            to { opacity: 0; transform: translateY(-10px); }
        }

        /* ===== TIME ENTRIES ===== */
        #timeEntries .time-entry {
            padding: 1rem;
            border-radius: var(--border-radius-medium);
            background: var(--neo-bg);
            box-shadow: var(--neo-out-sm);
            margin-bottom: 0.75rem;
            transition: all 0.3s;
            animation: neo-entry-slide 0.4s var(--smooth) both;
            border-bottom: none;
            display: flex;
            justify-content: space-between;
            align-items: flex-start;
            gap: 1rem;
        }
        #timeEntries .time-entry:last-child {
            border-bottom: none; margin-bottom: 0;
        }
        #timeEntries .time-entry:hover {
            transform: translateX(4px);
            box-shadow: var(--neo-out);
        }

        @keyframes neo-entry-slide {
            from { opacity: 0; transform: translateX(-15px); }
            to { opacity: 1; transform: translateX(0); }
        }

        .time-entry-info { flex-grow: 1; }
        .time-entry-header {
            display: flex; justify-content: space-between;
            align-items: center; margin-bottom: 0.25rem;
        }
        .time-entry-date { font-weight: 600; color: var(--neo-primary); }
        .time-entry-hours { font-weight: 800; font-size: 1.1rem; color: var(--neo-secondary); }
        .time-entry-details {
            display: flex; flex-wrap: wrap; gap: 0.75rem;
            margin: 0.25rem 0; font-size: 0.8rem;
            color: var(--text-secondary);
        }
        .time-entry-details span {
            background: var(--neo-bg);
            padding: 2px 8px;
            border-radius: var(--border-radius-small);
            box-shadow: var(--neo-in-sm);
            display: inline-flex; align-items: center; gap: 4px;
        }
        .time-entry-details .material-symbols-outlined {
            font-size: 1em; color: var(--neo-secondary);
        }
        .time-entry-description {
            font-size: 0.9rem; color: var(--text-secondary);
            margin-top: 0.25rem;
        }

        /* Work descriptions */
        .calendar-day.riposo-dopo-notte {
            background: rgba(100, 80, 200, 0.10);
            box-shadow: var(--neo-in-sm);
            border-left: 3px solid #7c5cbf !important;
        }
        .calendar-day.riposo-dopo-notte .calendar-day-number {
            background: #7c5cbf;
            color: white;
            border-radius: 50%;
            padding: 0.1em 0.35em;
        }
        .calendar-day.riposo-dopo-notte .calendar-holiday-name {
            color: #5a3fa0;
        }

        #work-descriptions-container {
            display: flex; flex-direction: column;
            gap: 8px; margin-bottom: 8px;
        }
        .work-description-row { display: flex; align-items: center; }
        .work-description-input { flex: 1; }
        .btn-remove-work {
            background: none; border: none;
            color: var(--neo-error); cursor: pointer;
            padding: 4px; margin-left: 8px;
            border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            box-shadow: none;
        }
        .btn-remove-work:hover { background: rgba(231, 76, 60, 0.1); }

        .btn-add-work {
            width: 100%; padding: 0.55rem;
            border: none;
            border-radius: var(--border-radius-medium);
            background: var(--neo-bg);
            color: var(--neo-primary);
            font-family: var(--body-font-family);
            font-size: 0.82rem; font-weight: 600;
            cursor: pointer;
            display: flex; align-items: center; justify-content: center; gap: 6px;
            box-shadow: var(--neo-in-sm);
            transition: all 0.3s;
            margin-top: 8px;
        }
        .btn-add-work:hover { box-shadow: var(--neo-out-sm); }

        .entry-buttons {
            display: flex; gap: 0.5rem; flex-shrink: 0;
        }

        /* ===== SETTINGS ===== */
        .settings-container {
            display: flex; flex-direction: column; gap: 1rem;
        }
        .setting-item {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 0.9rem 1rem;
            border-radius: var(--border-radius-medium);
            background: var(--neo-bg);
            box-shadow: var(--neo-out-sm);
            margin-bottom: 0.7rem;
            transition: all 0.3s;
            flex-wrap: wrap;
            border: none;
        }
        .setting-item:hover { box-shadow: var(--neo-out); }
        .setting-label { font-weight: 600; font-size: 0.88rem; margin-right: 1rem; margin-bottom: 0.5rem; flex-shrink: 0; }
        .settings-input { flex-grow: 1; min-width: 150px; margin-right: 0.5rem; }
        .setting-item > button { flex-shrink: 0; }
        .setting-item .vehicles-manager { width: 100%; margin-top: 0.5rem; }

        /* Pulsanti generici impostazioni */
        .toggle-button {
            display: inline-flex; align-items: center; gap: 0.5rem;
            background: var(--neo-bg); color: var(--neo-primary);
            border-radius: var(--border-radius-full);
            padding: 0.5rem 1rem; cursor: pointer;
            box-shadow: var(--neo-out-sm);
            transition: all 0.2s ease;
        }
        .toggle-button:hover { box-shadow: var(--neo-out); }

        .color-picker-container { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
        .color-picker-container input[type="color"] {
            width: 40px; height: 40px; border: none;
            border-radius: var(--border-radius-small); cursor: pointer;
            padding: 0; background: none;
        }
        .small-btn {
            width: 40px; height: 40px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: var(--neo-bg); color: var(--text-secondary);
            cursor: pointer; box-shadow: var(--neo-out-sm);
            border: none; padding: 0;
        }
        .small-btn:hover { box-shadow: var(--neo-out); color: var(--neo-primary); }
        .secondary-btn { background: var(--neo-bg); color: var(--text-secondary); box-shadow: var(--neo-out-sm); }
        .primary-btn { background: var(--neo-bg); color: var(--neo-primary); box-shadow: var(--neo-out); }

        /* ===== TOGGLE SWITCH (Neomorphic) ===== */
        .toggle-switch {
            --switch-width: 52px;
            --switch-height: 28px;
            --thumb-size: 22px;
            --track-padding: 3px;
            position: relative;
            display: inline-block;
            width: var(--switch-width);
            height: var(--switch-height);
            flex-shrink: 0;
        }
        .toggle-switch input { opacity: 0; width: 0; height: 0; }
        .toggle-slider {
            position: absolute; cursor: pointer;
            top: 0; left: 0; right: 0; bottom: 0;
            background: var(--neo-bg);
            border-radius: 28px;
            box-shadow: var(--neo-in-sm);
            transition: all 0.35s var(--spring);
            border: none;
        }
        .toggle-slider::before {
            content: ''; position: absolute;
            width: var(--thumb-size); height: var(--thumb-size);
            border-radius: 50%;
            left: var(--track-padding); bottom: var(--track-padding);
            background: var(--neo-bg);
            box-shadow: var(--neo-out-sm);
            transition: all 0.35s var(--spring);
        }
        input:checked + .toggle-slider {
            background: var(--neo-primary);
            box-shadow: inset 2px 2px 5px rgba(0,0,0,0.2), inset -2px -2px 5px rgba(255,255,255,0.1);
        }
        input:checked + .toggle-slider::before {
            transform: translateX(calc(var(--switch-width) - var(--thumb-size) - 2 * var(--track-padding)));
            background: white;
            box-shadow: 2px 2px 5px rgba(0,0,0,0.15);
        }

        /* ===== TIME INPUT CONTROLS ===== */
        .time-input-container {
            display: flex; align-items: center; width: 100%;
            background: var(--neo-bg);
            box-shadow: var(--neo-in);
            border-radius: var(--border-radius-medium);
            padding: 4px;
        }
        .time-control-btn {
            width: 38px; height: 38px;
            border-radius: var(--border-radius-small);
            background: var(--neo-bg);
            border: none; color: var(--neo-primary);
            cursor: pointer;
            display: flex; align-items: center; justify-content: center;
            box-shadow: var(--neo-out-sm);
            transition: all 0.2s var(--spring);
            flex-shrink: 0;
        }
        .time-control-btn:hover { box-shadow: var(--neo-out); transform: scale(1.06); }
        .time-control-btn:active,
        .time-control-btn.pressed { box-shadow: var(--neo-in-sm); transform: scale(0.88); }
        .time-input-container input {
            flex: 1; margin: 0 5px; text-align: center;
            font-size: 1.15rem; font-weight: 800;
            border: none !important;
            background: transparent !important;
            box-shadow: none !important;
            padding: 0.4rem !important;
        }

        /* ===== CALENDAR ===== */
        .calendar-container { margin-top: 1rem; }
        .calendar-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 1rem;
            background: var(--neo-bg) !important;
            color: var(--text-primary);
            padding: 0.75rem 1rem;
            border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
            box-shadow: var(--neo-out-sm);
            border: none;
        }
        .dark-theme .calendar-header {
            background: var(--neo-bg) !important;
            border: none;
        }
        .calendar-header button {
            background: var(--neo-bg); border: none;
            font-size: 1.5rem; cursor: pointer;
            color: var(--neo-primary) !important;
            padding: 0.5rem; border-radius: 50%;
            line-height: 1;
            display: inline-flex; align-items: center; justify-content: center;
            transition: all 0.2s var(--spring);
            box-shadow: var(--neo-out-sm);
            text-shadow: none;
        }
        .calendar-header button:hover { box-shadow: var(--neo-out); transform: scale(1.1); }
        .calendar-header button:active { box-shadow: var(--neo-in-sm); }

        .calendar-title {
            display: flex; align-items: baseline; gap: 0.5rem;
            font-weight: 600; text-align: center;
            flex-grow: 1; justify-content: center;
        }
        .calendar-month {
            font-size: 1.25rem; color: var(--text-primary) !important;
            font-weight: 700; text-shadow: none;
        }
        .calendar-year {
            font-size: 1rem; opacity: 0.7;
            color: var(--text-secondary) !important;
            text-shadow: none;
        }

        .calendar-grid {
            display: grid; grid-template-columns: repeat(7, 1fr);
            gap: 4px;
            background: transparent;
            border: none;
            border-radius: 0 0 var(--border-radius-medium) var(--border-radius-medium);
            overflow: visible;
        }
        .calendar-weekday {
            text-align: center; font-weight: 700; font-size: 0.68rem;
            text-transform: uppercase; letter-spacing: 0.05em;
            color: var(--text-tertiary); padding: 5px 0;
            background: transparent;
        }
        .calendar-day {
            min-height: 90px; padding: 8px;
            position: relative; cursor: pointer;
            transition: all 0.2s var(--spring);
            background: var(--neo-bg);
            color: var(--text-primary);
            display: flex; flex-direction: column;
            justify-content: space-between; align-items: center;
            text-align: center;
            border-radius: var(--border-radius-small);
            box-shadow: var(--neo-out-sm);
        }
        .calendar-day:hover { box-shadow: var(--neo-out); transform: scale(1.04); }
        .calendar-day:active { box-shadow: var(--neo-in-sm); }
        .calendar-day.empty {
            background: transparent; box-shadow: none;
            opacity: 0.3; cursor: default;
        }
        .calendar-day.empty:hover { background: transparent; box-shadow: none; transform: none; }
        .calendar-day.today {
            box-shadow: var(--neo-in);
            color: var(--neo-primary); font-weight: 700;
            outline: none;
        }
        .calendar-day.has-entries .calendar-day-number {
            font-weight: 700; color: var(--neo-primary);
        }
        .calendar-day-number {
            font-weight: 500; font-size: 0.875rem;
            width: 24px; height: 24px; line-height: 24px;
            border-radius: 50%; position: absolute;
            top: 4px; left: 4px; text-align: center; z-index: 1;
        }
        .calendar-day.today .calendar-day-number {
            background: var(--neo-primary); color: white;
            box-shadow: 0 0 8px var(--neo-primary-glow);
        }
        .calendar-day-content {
            margin-top: 28px;
            display: flex; flex-direction: column;
            align-items: center; gap: 4px; width: 100%;
        }
        .calendar-hours { font-size: 1rem; font-weight: 700; color: var(--neo-primary); }
        .calendar-icons {
            display: flex; justify-content: center;
            flex-wrap: wrap; gap: 4px;
            font-size: 1rem; line-height: 1;
        }
        .calendar-icons .material-symbols-outlined { font-size: 1.1em; color: var(--neo-secondary); }
        .info-icon {
            display: inline-block; width: 24px; height: 24px;
            line-height: 24px; text-align: center;
            border-radius: 50%;
            background: var(--neo-bg); color: var(--neo-secondary);
            font-weight: bold; font-style: italic; font-size: 1rem;
            margin-bottom: 0.25rem;
            box-shadow: var(--neo-out-sm);
            animation: pulse-info 2s infinite;
        }
        @keyframes pulse-info { 0% { transform: scale(1); } 50% { transform: scale(1.1); } 100% { transform: scale(1); } }
        .calendar-holiday-name {
            font-size: 0.75rem; color: var(--neo-error);
            font-weight: 500; margin-top: auto;
            padding-top: 4px; width: 100%;
        }
        .calendar-day.holiday {
            background: rgba(231, 76, 60, 0.08);
            box-shadow: var(--neo-in-sm);
        }
        .calendar-day.holiday .calendar-day-number { background: var(--neo-error); color: white; }
        .calendar-day.holiday .calendar-holiday-name { color: var(--neo-error); }
        .calendar-day.ferie {
            background: rgba(253, 121, 168, 0.08);
            box-shadow: var(--neo-in-sm);
        }
        .calendar-day.ferie .calendar-icons .material-symbols-outlined { color: var(--neo-accent); }
        .calendar-day.ferie .calendar-holiday-name { color: var(--neo-accent); }
        .calendar-day.malattia {
            background: rgba(108, 92, 231, 0.08);
            box-shadow: var(--neo-in-sm);
        }
        .calendar-day.malattia .calendar-icons .material-symbols-outlined { color: var(--neo-secondary); }
        .calendar-day.malattia .calendar-holiday-name { color: var(--neo-secondary); }
        .calendar-day.permessi {
            background: rgba(0, 184, 148, 0.08);
            box-shadow: var(--neo-in-sm);
        }
        .calendar-day.permessi .calendar-icons .material-symbols-outlined { color: var(--neo-primary); }
        .calendar-day.permessi .calendar-holiday-name { color: var(--neo-primary); }
        /* Totale ore ferie/permessi calcolato automaticamente */
        .ferie-hours-total {
            margin-top: 0.6rem;
            text-align: center;
            font-size: 0.95rem;
            color: var(--text-secondary, inherit);
        }
        .ferie-hours-total strong {
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--neo-primary);
        }
        /* Badge ore assenza parziale nella lista assenze */
        .ferie-malattie-hours {
            display: inline-block;
            margin-left: 0.4rem;
            padding: 0.05rem 0.45rem;
            border-radius: var(--border-radius-full);
            background: var(--neo-bg);
            box-shadow: var(--neo-out-sm);
            font-size: 0.78rem;
            font-weight: 700;
        }

        /* Calendar Share/Paste */
        .calendar-share-container { margin-bottom: 1rem; display: flex; justify-content: center; }
        .calendar-share-btn {
            background: var(--neo-bg); color: var(--neo-primary);
            border: none; padding: 0.75rem 1.5rem;
            border-radius: var(--border-radius-full);
            font-size: 0.95rem; font-weight: 600; cursor: pointer;
            display: flex; align-items: center; gap: 0.5rem;
            box-shadow: var(--neo-out);
            transition: all 0.3s var(--spring);
            min-width: 120px; justify-content: center;
        }
        .calendar-share-btn:hover { box-shadow: var(--neo-out-lg); transform: translateY(-2px); }
        .calendar-share-btn.success { background: var(--neo-success); color: white; box-shadow: var(--neo-out-sm); }

        .calendar-buttons-container { margin-bottom: 1rem; display: flex; justify-content: center; gap: 0.75rem; flex-wrap: wrap; }
        .calendar-paste-btn {
            background: var(--neo-bg); color: var(--neo-secondary);
            border: none; padding: 0.75rem 1.5rem;
            border-radius: var(--border-radius-large);
            cursor: pointer; font-size: 0.875rem; font-weight: 600;
            display: flex; align-items: center; gap: 0.5rem;
            box-shadow: var(--neo-out-sm);
            transition: all 0.3s var(--spring);
            min-width: 120px; justify-content: center;
        }
        .calendar-paste-btn:hover { box-shadow: var(--neo-out); transform: translateY(-2px); }
        .calendar-paste-btn.processing { background: var(--neo-warning); color: var(--text-primary); }
        .calendar-paste-btn.success { background: var(--neo-success); color: white; }
        .calendar-paste-btn.error { background: var(--neo-error); color: white; }

        /* Calendar day checkbox/selection */
        .calendar-day-checkbox { position: absolute; top: 4px; right: 4px; width: 20px; height: 20px; cursor: pointer; display: none; }
        .calendar-day-checkbox input[type="checkbox"] { position: absolute; opacity: 0; cursor: pointer; height: 0; width: 0; }
        .calendar-day-checkbox .checkmark {
            position: absolute; top: 0; left: 0; height: 20px; width: 20px;
            background: var(--neo-bg); border: 2px solid var(--neo-shadow-dark);
            border-radius: 3px; display: flex; align-items: center; justify-content: center;
            box-shadow: var(--neo-out-sm);
        }
        .calendar-day-checkbox input:checked ~ .checkmark { background: var(--neo-primary); border-color: var(--neo-primary); }
        .calendar-day-checkbox .checkmark::after { content: ""; position: absolute; display: none; }
        .calendar-day-checkbox input:checked ~ .checkmark::after { display: block; }
        .calendar-day-checkbox .checkmark::after { left: 6px; top: 2px; width: 4px; height: 8px; border: solid white; border-width: 0 2px 2px 0; transform: rotate(45deg); }
        .calendar-day.selectable { position: relative; cursor: pointer; }
        .calendar-day.selectable:hover .calendar-day-checkbox { display: block; }
        .calendar-day.selected { background: rgba(0, 139, 139, 0.08); box-shadow: var(--neo-in); }
        .calendar-day.selected .calendar-day-checkbox { display: block; }
        .calendar-selection-mode .calendar-day.selectable .calendar-day-checkbox { display: block; }
        .calendar-selection-mode .calendar-day:not(.selectable) { opacity: 0.5; }

        /* ===== MODAL ===== */
        .modal {
            display: none; position: fixed; z-index: 1050;
            left: 0; top: 0; width: 100%; height: 100%;
            overflow: auto;
            background-color: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            animation: fadeIn 0.3s ease;
            padding: 1rem;
            visibility: visible;
            opacity: 0;
            transition: opacity 0.3s ease;
        }
        .modal.show { display: block; opacity: 1; }
        .modal-content {
            background: var(--neo-bg);
            color: var(--text-primary);
            margin: 5vh auto; padding: 1.5rem;
            border: none; width: 95%; max-width: 600px;
            border-radius: var(--border-radius-large);
            box-shadow: var(--neo-out-lg);
            animation: slideIn 0.3s ease-out;
            transform: translateY(-20px);
            transition: transform 0.3s ease;
        }
        .modal.show .modal-content { transform: translateY(0); }
        @keyframes slideIn {
            from { transform: translateY(-30px); opacity: 0; }
            to { transform: translateY(0); opacity: 1; }
        }
        .modal-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 1rem; padding-bottom: 0.5rem;
            border-bottom: 1px solid var(--neo-shadow-dark);
        }
        .modal-header h3 { color: var(--neo-primary); margin: 0; }
        .modal-title { font-size: 1.5rem; font-weight: 700; color: var(--neo-primary); }
        .modal-body { margin-bottom: 1.5rem; }
        .modal-footer { text-align: right; padding-top: 1rem; border-top: 1px solid var(--neo-shadow-dark); }
        .modal-footer button { margin-left: 0.5rem; }
        .form-actions { display: flex; justify-content: flex-end; gap: 1rem; margin-top: 1.5rem; }

        /* Day Details Modal */
        .day-summary {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
            gap: 1rem; text-align: center;
            margin-bottom: 1.5rem; padding: 1rem;
            background: var(--neo-bg);
            border-radius: var(--border-radius-medium);
            box-shadow: var(--neo-in);
        }
        .day-summary-value { font-size: 1.75rem; font-weight: 800; color: var(--neo-primary); display: block; line-height: 1.1; }
        .day-summary-label { font-size: 0.8rem; color: var(--text-secondary); text-transform: uppercase; margin-top: 0.25rem; display: block; }
        .day-entries { max-height: 300px; overflow-y: auto; padding-right: 5px; margin-top: 1rem; }
        .day-entry {
            padding: 1rem; margin-bottom: 0.5rem;
            border-radius: var(--border-radius-medium);
            background: var(--neo-bg); box-shadow: var(--neo-out-sm);
            display: flex; justify-content: space-between;
            align-items: flex-start; gap: 1rem;
            border-bottom: none;
        }
        .day-entry:last-child { margin-bottom: 0; }
        .day-entry-info { flex-grow: 1; }
        .day-entry-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; }
        .day-entry-hours { font-weight: 700; color: var(--neo-primary); }
        .day-entry-details {
            display: flex; flex-wrap: wrap; gap: 0.75rem; margin: 0.25rem 0;
            font-size: 0.8rem; color: var(--text-secondary);
        }
        .day-entry-details span {
            background: var(--neo-bg); padding: 2px 8px;
            border-radius: var(--border-radius-small);
            box-shadow: var(--neo-in-sm);
            display: inline-flex; align-items: center; gap: 4px;
        }
        .day-entry-description { margin-top: 0.25rem; font-size: 0.9rem; color: var(--text-secondary); }
        .day-entry-vehicle {
            font-size: 0.8rem; color: var(--text-secondary);
            margin-top: 4px; padding-left: 8px;
            border-left: 2px solid var(--neo-shadow-dark);
            display: inline-flex; align-items: center; gap: 4px;
        }
        .day-entry-vehicle .material-symbols-outlined { font-size: 1em; }
        .day-entry .entry-buttons { flex-shrink: 0; }
        .modal-actions { text-align: right; margin-bottom: 1rem; }

        /* Monthly Summary / Stats */
        .monthly-summary, .stats-container, .monthly-report-stats {
            display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
            gap: 1rem; justify-content: space-around;
            margin-top: 1.5rem; padding: 1rem;
            background: var(--neo-bg);
            box-shadow: var(--neo-in);
            border-radius: var(--border-radius-medium);
        }
        .monthly-summary h3 {
            grid-column: 1 / -1; text-align: center;
            margin-bottom: 0.5rem; color: var(--neo-primary); font-weight: 600;
        }
        .monthly-stat-item, .stat-card {
            text-align: center; padding: 0.75rem;
            background: var(--neo-bg); border-radius: var(--border-radius-medium);
            box-shadow: var(--neo-out-sm);
        }
        .monthly-stat-value, .stat-value {
            font-size: 1.75rem; font-weight: 800;
            color: var(--neo-secondary); margin: 5px 0;
            display: block; line-height: 1.1;
        }
        .monthly-stat-label, .stat-label {
            font-size: 0.8rem; color: var(--text-secondary);
            text-transform: uppercase; display: block; margin-top: 0.25rem;
        }

        /* ===== CONTACTS ===== */
        .contacts-container { display: flex; flex-direction: column; gap: 1.5rem; }
        .contact-address {
            padding: 1rem;
            background: var(--neo-bg);
            box-shadow: var(--neo-in);
            border-radius: var(--border-radius-medium);
            margin-bottom: 1rem;
        }
        .contact-address .contact-item, .contact-info .contact-item {
            display: flex; align-items: center; gap: 0.75rem;
            margin-bottom: 0.5rem; font-size: 1rem;
        }
        .contact-address .contact-item .material-symbols-outlined,
        .contact-info .contact-item .material-symbols-outlined {
            color: var(--neo-primary); font-size: 1.25rem;
            width: 24px; text-align: center; flex-shrink: 0;
        }
        .contact-group h3 {
            color: var(--neo-secondary); margin-bottom: 0.75rem;
            font-size: 1.1rem; font-weight: 600;
            border-bottom: 1px solid var(--neo-shadow-dark);
            padding-bottom: 0.5rem;
        }
        .add-contact-container { display: flex; justify-content: center; margin-top: 1.5rem; }
        #addContactBtn {
            background: var(--neo-bg); color: var(--neo-secondary);
            box-shadow: var(--neo-out); transition: all 0.3s var(--spring);
        }
        #addContactBtn:hover { box-shadow: var(--neo-out-lg); transform: translateY(-2px); color: var(--neo-primary); }

        .contact-card {
            background: var(--neo-bg); border-radius: var(--border-radius-medium);
            padding: 1rem; box-shadow: var(--neo-out-sm);
            margin-bottom: 1rem; border: none;
            transition: all 0.3s;
        }
        .contact-card:hover { transform: translateY(-2px); box-shadow: var(--neo-out); }
        .contact-name { font-weight: 700; font-size: 1.1rem; margin-bottom: 0.75rem; color: var(--text-primary); }
        .contact-info { display: flex; flex-direction: column; gap: 0.5rem; }
        .contact-item a { color: var(--neo-primary); text-decoration: none; transition: color 0.2s; word-break: break-all; }
        .contact-item a:hover { text-decoration: underline; color: var(--neo-primary-light); }

        .qr-code-container {
            margin-top: 1.5rem; text-align: center;
            display: flex; flex-direction: column;
            align-items: center; gap: 10px; margin-bottom: 20px;
        }

        /* ===== Day Modal specifics ===== */
        #dayModal { transition: opacity 0.3s ease, visibility 0.3s ease; }
        #dayModal.visible { display: block !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; }

        /* ===== FLATPICKR (Neomorphic) ===== */
        /* Centered horizontally — let flatpickr handle vertical positioning */
        .flatpickr-calendar {
            left: 50% !important;
            transform: translateX(-50%) !important;
            right: auto !important;
            background: var(--neo-bg) !important;
            border-radius: var(--border-radius-large) !important;
            box-shadow: var(--neo-out-lg) !important;
            border: none !important;
            padding: 10px;
            width: 320px;
            color: var(--text-primary);
            font-family: var(--body-font-family);
        }
        .flatpickr-months, .flatpickr-month, .flatpickr-weekdays, .flatpickr-weekdaycontainer,
        .dayContainer, .flatpickr-days, .flatpickr-innerContainer, .flatpickr-rContainer, .flatpickr-time {
            background: var(--neo-bg) !important;
        }
        html body .flatpickr-calendar .flatpickr-months .flatpickr-month {
            background: var(--neo-bg) !important;
            color: var(--neo-primary) !important;
            fill: var(--neo-primary) !important;
        }
        .flatpickr-months {
            background: var(--neo-bg) !important;
            padding: 10px;
            border-radius: var(--border-radius-medium) var(--border-radius-medium) 0 0;
        }
        html body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month,
        html body .flatpickr-calendar .flatpickr-months .flatpickr-next-month {
            background: var(--neo-bg) !important;
            fill: var(--neo-primary) !important;
            padding: 8px !important; border-radius: 50% !important;
            box-shadow: var(--neo-out-sm);
            transition: all 0.2s var(--spring);
        }
        html body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month:hover,
        html body .flatpickr-calendar .flatpickr-months .flatpickr-next-month:hover {
            box-shadow: var(--neo-in-sm) !important;
        }
        html body .flatpickr-calendar .flatpickr-months .flatpickr-prev-month svg,
        html body .flatpickr-calendar .flatpickr-months .flatpickr-next-month svg {
            width: 20px !important; height: 20px !important;
            fill: var(--neo-primary) !important;
        }
        .flatpickr-current-month {
            color: var(--text-primary); font-size: 1.1em; font-weight: 700;
        }
        .flatpickr-current-month .flatpickr-monthDropdown-months,
        .flatpickr-current-month input.cur-year,
        html body .flatpickr-calendar .flatpickr-months .flatpickr-current-month .flatpickr-monthDropdown-months,
        html body .flatpickr-calendar .flatpickr-months .flatpickr-current-month input.cur-year {
            background: transparent !important;
            color: var(--text-primary) !important;
            font-weight: 700;
        }
        .flatpickr-current-month .numInputWrapper { display: none; }
        html body .flatpickr-calendar .flatpickr-weekdays,
        html body .flatpickr-calendar .flatpickr-weekday {
            background: transparent !important;
            color: var(--text-tertiary) !important;
            font-weight: 700;
        }
        span.flatpickr-weekday {
            color: var(--text-tertiary); font-size: 0.8em;
            font-weight: 700; text-transform: uppercase;
        }
        html body .flatpickr-calendar .flatpickr-months .flatpickr-monthDropdown-month {
            background: var(--neo-bg) !important;
            color: var(--text-primary) !important;
        }
        .flatpickr-day {
            background: transparent; border: none;
            color: var(--text-primary); font-size: 0.9em;
            width: 36px; height: 36px; line-height: 36px;
            text-align: center; border-radius: 50%;
            cursor: pointer;
            transition: all 0.2s var(--spring);
        }
        .flatpickr-day.flatpickr-weekend { color: var(--neo-error) !important; font-weight: 500; }
        .flatpickr-day:hover { background: rgba(0, 139, 139, 0.08); box-shadow: var(--neo-in-sm); }
        .flatpickr-day.disabled, .flatpickr-day.disabled:hover { background: transparent; color: var(--text-tertiary); opacity: 0.5; cursor: default; }
        .flatpickr-day.prevMonthDay, .flatpickr-day.nextMonthDay { color: var(--text-tertiary); opacity: 0.5; }
        .flatpickr-day.today {
            border: none; color: var(--text-primary); background: transparent !important;
            font-weight: 700; position: relative; z-index: 1;
        }
        .flatpickr-day.today::before {
            content: ""; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 36px; height: 36px; border-radius: 50%;
            border: 3px solid var(--neo-primary);
            background: rgba(0, 139, 139, 0.05);
            z-index: -1; box-shadow: 0 0 8px var(--neo-primary-glow);
        }
        .flatpickr-day.selected {
            position: relative; background: transparent !important;
            color: var(--text-primary) !important; border: none !important;
            font-weight: 700 !important; z-index: 1;
        }
        .flatpickr-day.selected::before {
            content: ""; position: absolute; top: 50%; left: 50%;
            transform: translate(-50%, -50%);
            width: 36px; height: 36px; border-radius: 50%;
            border: 3px dashed var(--neo-primary);
            background: rgba(0, 139, 139, 0.1);
            z-index: -1; box-shadow: var(--neo-in-sm);
            animation: pulse-selected 2s infinite ease-in-out;
        }
        @keyframes pulse-selected {
            0% { box-shadow: 0 0 0 0 var(--neo-primary-glow); }
            70% { box-shadow: 0 0 0 6px transparent; }
            100% { box-shadow: 0 0 0 0 transparent; }
        }
        .flatpickr-day.today.selected { background: var(--neo-primary) !important; color: white !important; }
        .flatpickr-day.selected:hover, .flatpickr-day.startRange, .flatpickr-day.endRange,
        .flatpickr-day.startRange:hover, .flatpickr-day.endRange:hover {
            background: var(--neo-primary) !important; color: white !important;
            border-radius: 50%;
        }
        .flatpickr-day.inRange {
            background: rgba(0, 139, 139, 0.08) !important;
            box-shadow: none; border-radius: 0;
        }
        .flatpickr-time, .flatpickr-time input, .flatpickr-time .numInputWrapper,
        .flatpickr-time .flatpickr-am-pm {
            background: var(--neo-bg) !important; color: var(--text-primary) !important;
        }
        .flatpickr-time .flatpickr-time-separator { color: var(--text-primary) !important; }
        .numInput, .cur-year { background: transparent !important; color: var(--text-primary) !important; }

        /* Dark Theme Flatpickr */
        .dark-theme .flatpickr-calendar {
            background: rgba(26, 26, 46, 0.97) !important;
            border: 1px solid rgba(183, 148, 246, 0.25) !important;
            box-shadow: 0 8px 32px rgba(0,0,0,0.6) !important;
        }
        .dark-theme .flatpickr-months,
        .dark-theme .flatpickr-month,
        .dark-theme .flatpickr-weekdays,
        .dark-theme .flatpickr-weekdaycontainer,
        .dark-theme .dayContainer,
        .dark-theme .flatpickr-days,
        .dark-theme .flatpickr-innerContainer,
        .dark-theme .flatpickr-rContainer {
            background: transparent !important;
        }
        .dark-theme .flatpickr-months .flatpickr-month {
            color: #E0D4FF !important;
            fill: #E0D4FF !important;
            background: transparent !important;
        }
        .dark-theme .flatpickr-months .flatpickr-prev-month,
        .dark-theme .flatpickr-months .flatpickr-next-month {
            color: #E0D4FF !important;
            fill: #E0D4FF !important;
            background: rgba(183, 148, 246, 0.15) !important;
        }
        .dark-theme .flatpickr-months .flatpickr-prev-month svg,
        .dark-theme .flatpickr-months .flatpickr-next-month svg {
            fill: #E0D4FF !important;
        }
        .dark-theme .flatpickr-weekday {
            color: #B0A0D0 !important;
            background: transparent !important;
        }
        .dark-theme .flatpickr-day {
            color: #E0D4FF !important;
        }
        .dark-theme .flatpickr-day:hover {
            background: rgba(183, 148, 246, 0.15) !important;
            color: #fff !important;
        }
        .dark-theme .flatpickr-day.flatpickr-weekend {
            color: #FF8080 !important;
        }
        .dark-theme .flatpickr-day.inRange {
            background: rgba(183, 148, 246, 0.2) !important;
            border-color: transparent !important;
        }
        .dark-theme .flatpickr-day.selected,
        .dark-theme .flatpickr-day.startRange,
        .dark-theme .flatpickr-day.endRange {
            background: linear-gradient(135deg, #7B5CCC, #4A90D9) !important;
            color: #fff !important;
            border-color: transparent !important;
        }
        .dark-theme .flatpickr-day.today:not(.selected) {
            border: 1px solid rgba(183, 148, 246, 0.7) !important;
            color: #E0D4FF !important;
        }
        .dark-theme .flatpickr-day.prevMonthDay,
        .dark-theme .flatpickr-day.nextMonthDay {
            color: rgba(224, 212, 255, 0.3) !important;
        }
        .dark-theme .flatpickr-day.disabled,
        .dark-theme .flatpickr-day.disabled:hover {
            color: rgba(224, 212, 255, 0.25) !important;
        }
        .dark-theme .flatpickr-monthDropdown-months,
        .dark-theme .flatpickr-current-month input.cur-year {
            color: #E0D4FF !important;
            background: transparent !important;
        }

        /* ===== CALENDAR SUMMARY ===== */
        #monthlySummary { margin-top: 0; padding: 0; width: 100%; box-sizing: border-box; display: block; }
        #monthlySummary .monthly-report-stats.card {
            width: 100%; padding: 0; margin: 0;
            background: transparent; box-shadow: none; border: none;
            display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem;
        }
        #monthlySummary .monthly-report-stats.card .monthly-stat-item {
            padding: 0.75rem 0.5rem; margin: 0;
            border-radius: var(--border-radius-medium);
            display: flex; flex-direction: column; align-items: center;
        }

        /* ===== TOAST ===== */
        #toast-container {
            position: fixed; bottom: 90px; left: 50%;
            transform: translateX(-50%); z-index: 10000;
            display: flex; flex-direction: column;
            align-items: center; gap: 8px;
            width: 90%; max-width: 400px;
            pointer-events: none;
        }
        .message, .toast {
            padding: 14px 16px; border-radius: var(--border-radius-medium);
            background: var(--neo-bg); color: var(--text-primary);
            box-shadow: var(--neo-out);
            opacity: 0; transform: translateY(20px);
            transition: opacity 0.3s var(--smooth), transform 0.3s var(--smooth);
            font-size: 0.875rem; font-weight: 500;
            pointer-events: auto; width: 100%;
            display: flex; align-items: center;
            justify-content: space-between;
            min-height: 48px; box-sizing: border-box;
            border-left: 4px solid transparent;
        }
        .message.show, .toast.show { opacity: 1; transform: translateY(0); }
        .toast-message { flex: 1; padding-right: 8px; }
        .toast-actions { display: flex; align-items: center; gap: 8px; margin-top: 4px; }
        .toast-action-button {
            text-transform: uppercase; font-weight: 600; font-size: 0.75rem;
            padding: 8px 12px; border-radius: var(--border-radius-small);
            border: none; background: transparent;
            color: var(--neo-primary); cursor: pointer;
        }
        .toast-action-button:hover { background: rgba(0, 139, 139, 0.08); }
        .toast-close-button {
            width: 24px; height: 24px; border-radius: 50%;
            display: flex; align-items: center; justify-content: center;
            background: transparent; color: var(--text-secondary);
            border: none; cursor: pointer; font-size: 1.2rem;
            padding: 0; margin-left: 8px;
        }
        .toast-close-button:hover { background: rgba(0, 0, 0, 0.05); }
        .message.success, .toast.success { border-left-color: var(--neo-success); }
        .message.error, .toast.error { border-left-color: var(--neo-error); }
        .toast.warning { border-left-color: var(--neo-warning); }
        .toast.info { border-left-color: var(--neo-primary); }

        /* ===== CLOUD BACKUP ===== */
        .cloud-backup-container { margin-top: 1rem; }
        .provider-description { margin-bottom: 1rem; color: var(--text-secondary); font-size: 0.9rem; }
        .provider-options { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 1.5rem; }
        .provider-option {
            display: flex; align-items: center; padding: 1rem;
            border-radius: var(--border-radius-medium);
            background: var(--neo-bg); cursor: pointer;
            box-shadow: var(--neo-out-sm);
            transition: all 0.3s var(--spring); position: relative;
        }
        .provider-option:hover { box-shadow: var(--neo-out); transform: translateY(-2px); }
        .provider-option.selected { box-shadow: var(--neo-in); }
        .provider-logo {
            width: 36px; height: 36px;
            display: flex; align-items: center; justify-content: center;
            margin-right: 1rem; flex-shrink: 0;
            background: white; border-radius: 50%; padding: 5px;
        }
        .provider-logo img { max-width: 100%; max-height: 100%; }
        .provider-info { flex-grow: 1; }
        .provider-info h4 { margin: 0 0 0.25rem 0; color: var(--text-primary); font-size: 1rem; }
        .provider-info p { margin: 0; font-size: 0.85rem; color: var(--text-secondary); }
        .provider-status { margin-left: 1rem; }
        .status-indicator { display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--neo-shadow-dark); }
        .status-indicator.logged-in { background: var(--neo-success); }
        .status-indicator.preferred { background: var(--neo-primary); box-shadow: 0 0 0 2px rgba(0, 139, 139, 0.2); }
        .cloud-account-section { margin-top: 1rem; padding-top: 1rem; border-top: 1px solid var(--neo-shadow-dark); }
        .cloud-account-info { margin-bottom: 1rem; }
        .user-profile { display: flex; align-items: center; margin-bottom: 1rem; }
        .user-avatar { width: 48px; height: 48px; border-radius: 50%; margin-right: 1rem; object-fit: cover; border: 2px solid var(--neo-primary); }
        .user-avatar-icon {
            width: 48px; height: 48px; border-radius: 50%;
            margin-right: 1rem; display: flex; align-items: center; justify-content: center;
            background: var(--neo-bg); color: var(--neo-primary);
            border: 2px solid var(--neo-primary); box-shadow: var(--neo-out-sm);
        }
        .user-details { flex-grow: 1; }
        .user-name { font-weight: 600; color: var(--text-primary); }
        .user-email { font-size: 0.85rem; color: var(--text-secondary); }
        .user-provider { font-size: 0.8rem; color: var(--text-secondary); margin-top: 0.25rem; }
        .login-buttons-container { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
        .cloud-login-btn {
            display: flex; align-items: center; justify-content: center;
            gap: 0.75rem; padding: 0.75rem 1.5rem;
            border-radius: var(--border-radius-full); border: none;
            background: var(--neo-bg); color: var(--text-primary);
            font-weight: 600; cursor: pointer;
            box-shadow: var(--neo-out-sm);
            transition: all 0.3s var(--spring);
        }
        .cloud-login-btn:hover { box-shadow: var(--neo-out); }
        .cloud-login-btn:active { box-shadow: var(--neo-in-sm); transform: scale(0.98); }
        .cloud-login-btn img { width: 24px; height: 24px; }
        .cloud-login-btn.google-btn { background: #ffffff; color: #757575; border: 1px solid #dadce0; }
        .cloud-logout-btn { margin-top: 1rem; background: var(--neo-bg); color: var(--neo-error); box-shadow: var(--neo-out-sm); }
        .cloud-backup-controls { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--neo-shadow-dark); }
        .backup-status-container {
            display: flex; align-items: center; margin-bottom: 1rem;
            padding: 0.5rem; background: var(--neo-bg);
            border-radius: var(--border-radius-small); box-shadow: var(--neo-in-sm);
        }
        .backup-status-label { font-weight: 600; margin-right: 0.5rem; }
        .backup-status-value { color: var(--text-secondary); }
        .backup-actions { display: flex; gap: 0.75rem; margin-bottom: 1.5rem; flex-wrap: wrap; }
        .backup-btn { flex: 1; min-width: 120px; }
        .backup-settings { display: flex; flex-direction: column; gap: 1rem; }
        .backup-setting-item { display: flex; justify-content: space-between; align-items: center; }
        .backup-setting-label { font-weight: 600; }
        .spinner {
            display: inline-block; width: 16px; height: 16px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 50%; border-top-color: #fff;
            animation: spin 1s ease-in-out infinite;
        }
        @keyframes spin { to { transform: rotate(360deg); } }

        /* ===== MONTHLY REPORT ===== */
        .monthly-report-container { margin-top: 1.5rem; }
        .section-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 1.5rem; padding-bottom: 0.75rem;
            border-bottom: 1px solid var(--neo-shadow-dark);
            flex-wrap: wrap; gap: 1rem;
        }
        .section-header h2 { margin: 0; flex-grow: 1; }
        .section-controls { display: flex; align-items: center; gap: 0.75rem; flex-wrap: wrap; width: 100%; }
        .month-selector { flex: 1; min-width: 0; }
        .month-selector select { width: 100%; min-width: 150px; }
        .export-btn.excel-btn {
            flex: 1; min-width: 0;
            background: var(--neo-bg); color: #1D6F42;
            display: flex; align-items: center; justify-content: center; gap: 0.5rem;
            padding: 0.7rem 1rem;
            font-size: 0.95rem; font-weight: 600;
            border-radius: var(--border-radius-medium);
        }
        .export-btn.excel-btn:hover { transform: translateY(-1px); }
        .monthly-report-content { max-height: 60vh; overflow-y: auto; }
        .monthly-report-item {
            padding: 1rem; margin-bottom: 0.5rem;
            border-radius: var(--border-radius-medium);
            background: var(--neo-bg);
            box-shadow: var(--neo-out-sm);
            transition: all 0.3s;
            border-bottom: none;
        }
        .monthly-report-item:hover { box-shadow: var(--neo-out); transform: translateY(-1px); }
        .monthly-report-date { font-weight: 600; font-size: 1.1rem; margin-bottom: 0.5rem; color: var(--neo-primary); }
        .monthly-report-details { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-bottom: 0.5rem; }
        .monthly-report-detail {
            background: var(--neo-bg); padding: 3px 8px;
            border-radius: var(--border-radius-small);
            font-size: 0.8rem; color: var(--text-secondary);
            display: inline-flex; align-items: center; gap: 4px;
            box-shadow: var(--neo-in-sm);
        }
        .monthly-report-detail .material-symbols-outlined { font-size: 1.1em; }
        .monthly-report-description, .monthly-report-vehicle { font-size: 0.9rem; color: var(--text-secondary); margin-top: 0.25rem; }
        .monthly-report-vehicle {
            padding-left: 8px; border-left: 2px solid var(--neo-shadow-dark);
            display: inline-flex; align-items: center; gap: 4px;
        }
        .monthly-report-vehicle .material-symbols-outlined { font-size: 1em; }
        .monthly-report-empty { text-align: center; padding: 2rem; color: var(--text-secondary); }

        /* Excel files section */
        /* Ferie/Malattia in report */
        .monthly-report-item.ferie-entry {
            background: rgba(253, 121, 168, 0.06);
            border-left: 3px solid var(--neo-accent);
            padding-left: calc(1rem - 3px);
        }
        .monthly-report-item.ferie-entry .monthly-report-date { color: var(--neo-accent); }
        .monthly-report-item.malattia-entry {
            background: rgba(108, 92, 231, 0.06);
            border-left: 3px solid var(--neo-secondary);
            padding-left: calc(1rem - 3px);
        }
        .monthly-report-item.malattia-entry .monthly-report-date { color: var(--neo-secondary); }
        .monthly-report-item.riposo-entry {
            background: rgba(100, 80, 200, 0.08);
            border-left: 3px solid #7c5cbf;
            padding-left: calc(1rem - 3px);
        }
        .monthly-report-item.riposo-entry .monthly-report-date { color: #5a3fa0; }

        /* ===== FERIE/MALATTIE SECTION ===== */
        .ferie-malattie-content { display: flex; flex-direction: column; gap: 1.5rem; }
        .ferie-malattie-form, .ferie-malattie-list {
            background: var(--neo-bg); padding: 1.5rem;
            border-radius: var(--border-radius-medium);
            box-shadow: var(--neo-out-sm); border: none;
        }
        .ferie-malattie-list h3 { color: var(--neo-secondary); margin-bottom: 1rem; font-weight: 600; }
        .checkbox-label {
            display: flex; align-items: center; gap: 0.5rem;
            cursor: pointer; color: var(--text-primary);
            margin-bottom: 1rem; padding: 0.5rem 0;
        }
        /* Checkbox stile pill a tema (chiaro/scuro) — stato on/off leggibile */
        .checkbox-label input[type="checkbox"] {
            -webkit-appearance: none; appearance: none;
            position: relative;
            width: 48px; height: 26px;
            border-radius: 999px;
            background: var(--neo-bg);
            border: 1px solid rgba(128, 128, 128, 0.3);
            box-shadow: var(--neo-in-sm);
            cursor: pointer; flex-shrink: 0; margin: 0;
            transition: background 0.25s ease, border-color 0.25s ease;
        }
        .checkbox-label input[type="checkbox"]::before {
            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.35);
            transition: transform 0.25s var(--spring, ease);
        }
        .checkbox-label input[type="checkbox"]:checked {
            background: var(--neo-primary);
            border-color: var(--neo-primary);
        }
        .checkbox-label input[type="checkbox"]:checked::before {
            transform: translateX(22px);
        }
        .ferie-malattie-entry {
            padding: 1rem; margin-bottom: 0.5rem;
            border-radius: var(--border-radius-medium);
            background: var(--neo-bg); box-shadow: var(--neo-out-sm);
            display: flex; justify-content: space-between;
            align-items: flex-start; gap: 1rem;
            border-bottom: none;
        }
        .ferie-malattie-entry:last-child { margin-bottom: 0; }
        .ferie-malattie-info { flex-grow: 1; }
        .ferie-malattie-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.25rem; flex-wrap: wrap; gap: 0.5rem; }
        .ferie-malattie-type { font-weight: 600; color: var(--neo-primary); display: inline-flex; align-items: center; gap: 0.25rem; }
        .ferie-malattie-type .material-symbols-outlined { font-size: 1.1em; }
        .ferie-malattie-date { color: var(--text-secondary); font-size: 0.9rem; }
        .ferie-malattie-note { color: var(--text-secondary); font-style: italic; font-size: 0.9rem; margin-top: 0.25rem; width: 100%; }
        .ferie-malattie-actions { flex-shrink: 0; }
        .delete-ferie-btn { min-width: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; }
        .delete-ferie-btn .material-symbols-outlined { font-size: 1.5rem; }

        /* ===== VEHICLES ===== */
        .vehicles-manager { margin-top: 1rem; }
        .vehicles-form { margin-bottom: 1rem; }
        .vehicles-form input { margin-bottom: 0; }
        .vehicles-list {
            border: none; border-radius: var(--border-radius-medium);
            padding: 0.5rem; background: var(--neo-bg);
            box-shadow: var(--neo-in); margin-top: 1rem;
            max-height: 200px; overflow-y: auto;
        }
        .vehicle-item {
            display: flex; justify-content: space-between; align-items: center;
            padding: 0.75rem 1rem; margin-bottom: 0.5rem;
            background: var(--neo-bg); border-radius: var(--border-radius-small);
            box-shadow: var(--neo-out-sm); border: none; gap: 1rem;
        }
        .vehicle-item:last-child { margin-bottom: 0; }
        .vehicle-info { display: flex; flex-direction: column; flex-grow: 1; }
        .vehicle-name { font-weight: 600; color: var(--text-primary); }
        .vehicle-plate { font-size: 0.8rem; color: var(--text-secondary); }
        .delete-vehicle-btn { min-width: 40px; min-height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
        .delete-vehicle-btn .material-symbols-outlined { font-size: 1.5rem; }

        /* ===== DATE INDICATOR ===== */
        #dateIndicator div {
            background: var(--neo-bg) !important;
            color: var(--neo-primary) !important;
            padding: 10px 15px !important;
            border-radius: var(--border-radius-medium) !important;
            margin: 10px 0 !important;
            font-size: 1.1rem !important;
            text-align: center;
            font-weight: 600 !important;
            cursor: pointer;
            box-shadow: var(--neo-out-sm) !important;
            transition: all 0.3s var(--spring);
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
            gap: 0.5rem;
        }
        #dateIndicator div:hover { box-shadow: var(--neo-out) !important; }
        #dateIndicator .material-symbols-outlined { font-size: 1.2em; }
        #dateIndicator span { vertical-align: middle; }

        /* Make the input invisible but keep its layout position so Flatpickr can calculate calendar alignment */
        #date {
            position: absolute !important;
            top: 0 !important;
            left: 0 !important;
            width: 1px !important;
            height: 1px !important;
            opacity: 0 !important;
            padding: 0 !important;
            margin: 0 !important;
            border: none !important;
            pointer-events: none !important;
            z-index: -1 !important;
            background: transparent !important;
            color: transparent !important;
            font-size: 0 !important;
            line-height: normal !important;
            overflow: hidden !important;
        }
        /* Wrapper must be relative so calendar (appended to body) positions relative to it */
        .flatpickr-wrapper {
            position: relative !important;
            display: block !important;
        }

        /* ===== IMPORT PREVIEW MODAL ===== */
        .import-preview-modal {
            display: none; position: fixed; z-index: 1100;
            left: 0; top: 0; width: 100%; height: 100%;
            overflow: auto; background: rgba(0, 0, 0, 0.4);
            backdrop-filter: blur(8px);
            animation: fadeIn 0.3s ease;
        }
        .import-preview-content {
            background: var(--neo-bg); margin: 5% auto;
            padding: 1.5rem; border-radius: var(--border-radius-large);
            box-shadow: var(--neo-out-lg);
            width: 90%; max-width: 600px;
            max-height: 80vh; overflow-y: auto; position: relative;
        }
        .import-preview-header {
            display: flex; justify-content: space-between; align-items: center;
            margin-bottom: 1.5rem; padding-bottom: 1rem;
            border-bottom: 1px solid var(--neo-shadow-dark);
        }
        .import-preview-title { color: var(--text-primary); font-size: 1.25rem; font-weight: 600; margin: 0; }
        .import-close-btn {
            background: var(--neo-bg); border: none;
            color: var(--text-primary); cursor: pointer;
            padding: 0.5rem; border-radius: 50%;
            box-shadow: var(--neo-out-sm);
        }
        .import-close-btn:hover { box-shadow: var(--neo-in-sm); }
        .import-preview-body { margin-bottom: 1.5rem; }
        .import-summary {
            background: var(--neo-bg); box-shadow: var(--neo-in);
            padding: 1rem; border-radius: var(--border-radius-medium); margin-bottom: 1rem;
            color: var(--neo-primary);
        }
        .import-entries-list {
            max-height: 300px; overflow-y: auto;
            border-radius: var(--border-radius-medium);
            padding: 0.5rem; box-shadow: var(--neo-in);
        }
        .import-entry-item {
            padding: 0.75rem; margin-bottom: 0.5rem;
            background: var(--neo-bg); box-shadow: var(--neo-out-sm);
            border-radius: var(--border-radius-small);
            border-left: 4px solid var(--neo-primary);
        }
        .import-entry-date { font-weight: 600; color: var(--neo-primary); margin-bottom: 0.25rem; }
        .import-entry-details { font-size: 0.875rem; color: var(--text-secondary); }
        .import-preview-actions { display: flex; gap: 0.75rem; justify-content: flex-end; flex-wrap: wrap; }
        .import-action-btn {
            padding: 0.75rem 1.5rem; border: none;
            border-radius: var(--border-radius-medium);
            cursor: pointer; font-weight: 600;
            transition: all 0.3s var(--spring); min-width: 100px;
        }
        .import-btn-cancel { background: var(--neo-bg); color: var(--text-secondary); box-shadow: var(--neo-out-sm); }
        .import-btn-cancel:hover { box-shadow: var(--neo-out); }
        .import-btn-replace { background: var(--neo-bg); color: var(--neo-error); box-shadow: var(--neo-out-sm); }
        .import-btn-replace:hover { box-shadow: var(--neo-out); }
        .import-btn-merge { background: var(--neo-bg); color: var(--neo-primary); box-shadow: var(--neo-out-sm); }
        .import-btn-merge:hover { box-shadow: var(--neo-out); }

        /* ===== APP VERSION BADGE ===== */
        .app-version {
            font-size: 0.7rem; font-weight: 700;
            color: var(--text-secondary, #94a3b8);
            opacity: 0.5; letter-spacing: 0.03em;
            padding: 2px 6px; border-radius: 6px;
            border: 1px solid currentColor;
            user-select: none; transition: opacity 0.2s; cursor: pointer;
        }
        .app-version:hover { opacity: 0.9; }

        /* ===== DEV TERMINAL MODAL ===== */
        #dev-modal {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.7);
            backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
            z-index: 2000;
            display: none; justify-content: center; align-items: center;
        }
        #dev-modal.active { display: flex; }
        .dev-terminal {
            width: 95%; max-width: 620px; background: #0a0e14;
            border: 1px solid #1a1f2e; border-radius: 12px; overflow: hidden;
            box-shadow: 0 0 60px rgba(0,255,65,0.08), 0 20px 60px rgba(0,0,0,0.6);
            animation: devTerminalOpen 0.5s cubic-bezier(0.16,1,0.3,1);
        }
        @keyframes devTerminalOpen {
            0% { transform: scale(0.8) translateY(30px); opacity: 0; filter: blur(6px); }
            100% { transform: scale(1) translateY(0); opacity: 1; filter: blur(0); }
        }
        .dev-terminal-bar {
            display: flex; align-items: center;
            background: #151a25; padding: 10px 14px; border-bottom: 1px solid #1a1f2e;
        }
        .dev-terminal-dots { display: flex; gap: 7px; }
        .dev-dot { width: 12px; height: 12px; border-radius: 50%; }
        .dev-dot.red { background: #ff5f57; }
        .dev-dot.yellow { background: #ffbd2e; }
        .dev-dot.green { background: #28c840; }
        .dev-terminal-title {
            flex: 1; text-align: center;
            font-family: 'Courier New', monospace; font-size: 0.75rem; color: #5a6278;
        }
        .dev-terminal-close {
            background: none !important; border: none !important; color: #5a6278 !important;
            font-size: 1rem; cursor: pointer; box-shadow: none !important; padding: 0 !important;
        }
        .dev-terminal-close:hover { color: #ff5f57 !important; }
        .dev-terminal-body {
            padding: 18px 20px; font-family: 'Courier New', monospace;
            font-size: 0.95rem; line-height: 1.6; color: #00ff41;
            max-height: 55vh; overflow-y: auto; position: relative;
        }
        .dev-scanline {
            position: absolute; top: 0; left: 0; right: 0; bottom: 0;
            pointer-events: none; z-index: 1;
            background: repeating-linear-gradient(0deg, transparent, transparent 2px, rgba(0,255,65,0.02) 2px, rgba(0,255,65,0.02) 4px);
            animation: devScanMove 8s linear infinite;
        }
        @keyframes devScanMove { 0% { background-position: 0 0; } 100% { background-position: 0 100px; } }
        .dev-cursor { animation: devBlink 0.7s step-end infinite; color: #00ff41; }
        @keyframes devBlink { 0%,100% { opacity: 1; } 50% { opacity: 0; } }
        .dev-line { opacity: 0; animation: devLineAppear 0.08s forwards; }
        @keyframes devLineAppear { to { opacity: 1; } }
        .dev-line-cmd { color: #5eead4; }
        .dev-line-warn { color: #fbbf24; }
        .dev-line-error { color: #f87171; }
        .dev-line-success { color: #4ade80; }
        .dev-line-comment { color: #5a6278; font-style: italic; }
        .dev-line-text { color: #c9d1d9; }
        .dev-line-bold { color: #fff; font-weight: 700; }
        .dev-line-ascii { color: #6366f1; }
        .dev-line-dim { color: #3a4050; }
        .dev-log-tag {
            font-size: 0.72rem; font-weight: 800;
            padding: 1px 6px; border-radius: 3px; flex-shrink: 0;
        }
        .dev-log-tag.ok { background: #065f46; color: #4ade80; }
        .dev-log-tag.warn { background: #713f12; color: #fbbf24; }
        .dev-log-tag.fail { background: #7f1d1d; color: #f87171; }
        .dev-terminal-footer {
            display: flex; justify-content: space-between; align-items: center;
            background: #151a25; border-top: 1px solid #1a1f2e; padding: 8px 14px;
        }
        .dev-stats {
            display: flex; gap: 16px;
            font-family: 'Courier New', monospace; font-size: 0.7rem; color: #5a6278;
        }
        .dev-stats strong { color: #00ff41; }
        .dev-exit-btn {
            background: none !important; border: 1px solid #1a1f2e !important; color: #f87171 !important;
            font-family: 'Courier New', monospace; font-size: 0.78rem;
            padding: 4px 14px; border-radius: 6px; cursor: pointer;
            box-shadow: none !important;
        }
        .dev-exit-btn:hover { border-color: #f87171 !important; background: rgba(248,113,113,0.1) !important; }
        @keyframes devCrash {
            0% { transform: scale(1); filter: blur(0); }
            30% { transform: scale(1.02) skewX(-2deg); filter: blur(1px) hue-rotate(90deg); }
            60% { transform: scale(0.98) skewX(3deg); filter: blur(2px) hue-rotate(180deg); }
            100% { transform: scale(0) rotate(5deg); opacity: 0; filter: blur(10px); }
        }
        .dev-terminal.crashing { animation: devCrash 0.6s ease-in forwards; }
        @keyframes devGlitch {
            0%,100% { text-shadow: none; }
            20% { text-shadow: -2px 0 #f87171, 2px 0 #4ade80; }
            40% { text-shadow: 2px 0 #f87171, -2px 0 #6366f1; }
            60% { text-shadow: -1px 0 #fbbf24, 1px 0 #f87171; }
        }
        .dev-glitch { animation: devGlitch 0.3s linear 3; }
        @media (max-width: 600px) {
            .dev-terminal-body { font-size: 0.85rem; padding: 14px; max-height: 50vh; }
            .dev-stats { gap: 8px; font-size: 0.6rem; flex-wrap: wrap; }
            .dev-stats span:nth-child(4) { display: none; }
        }

        /* ===== THEME TOGGLE BUTTON (Header) ===== */
        .theme-toggle-btn {
            width: 44px;
            height: 44px;
            border-radius: 50%;
            padding: 0;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--neo-bg);
            color: var(--neo-primary);
            box-shadow: var(--neo-out-sm);
            transition: all 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
            border: none;
            cursor: pointer;
            flex-shrink: 0;
        }
        .theme-toggle-btn:hover {
            box-shadow: var(--neo-out);
            transform: scale(1.1);
        }
        .theme-toggle-btn:active {
            box-shadow: var(--neo-in);
            transform: scale(0.92);
        }
        .theme-toggle-btn .material-symbols-outlined {
            font-size: 1.4rem;
            transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
        }
        .theme-toggle-btn:hover .material-symbols-outlined {
            transform: rotate(25deg);
        }
        .dark-theme .theme-toggle-btn {
            color: var(--neo-primary);
        }

        /* iOS logo fix */
        #pws-logo {
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
            touch-action: manipulation;
        }
        #pws-logo img {
            pointer-events: none;
            -webkit-touch-callout: none;
            -webkit-user-select: none;
            user-select: none;
        }

        /* ===== CASH SECTION ===== */
        .cash-settings-container {
            margin-bottom: 2rem; padding-bottom: 1.5rem;
            border-bottom: 1px solid var(--neo-shadow-dark);
        }
        .cash-results-container { margin-top: 1.5rem; }
        .cash-results { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1rem; }
        .cash-result-item {
            display: grid; grid-template-columns: 1fr auto auto;
            gap: 1rem; padding: 0.75rem 1rem;
            background: var(--neo-bg); border-radius: var(--border-radius-medium);
            align-items: center; box-shadow: var(--neo-out-sm);
            transition: all 0.3s;
        }
        .cash-result-item:hover { box-shadow: var(--neo-out); }
        .cash-result-label { font-weight: 600; color: var(--text-primary); }
        .cash-result-hours { font-family: 'Poppins', monospace; font-size: 0.9rem; color: var(--text-secondary); text-align: right; }
        .cash-result-amount { font-family: 'Poppins', monospace; font-weight: 800; font-size: 1.1rem; color: var(--neo-primary); text-align: right; min-width: 80px; }
        .cash-result-total {
            margin-top: 0.5rem;
            background: var(--neo-bg); box-shadow: var(--neo-in);
            border-left: 4px solid var(--neo-primary);
        }
        .cash-result-total .cash-result-label { font-weight: 800; font-size: 1.1rem; }
        .cash-result-total .cash-result-amount { font-size: 1.3rem; color: var(--neo-secondary); }

        /* ===== RESPONSIVE ===== */
        @media (max-width: 768px) {
            html { font-size: 15px; }
            .container { padding: 0.75rem; }
            main { padding: 0.75rem; margin-top: var(--header-height, 65px); }
            .card { padding: 1rem; margin-bottom: 1rem; }
            .nav-item { font-size: 0.6rem; min-height: 48px; padding: 0.35rem 0.45rem; min-width: 42px; }
            .nav-item .material-symbols-outlined { font-size: 1.25rem; }
            .nav-item.active .material-symbols-outlined { font-size: 1.4rem; }
            .form-row { flex-direction: column; gap: 0; }
            .form-group-inline { margin-bottom: 1rem; }
            .modal-content { width: 95%; margin: 5vh auto; padding: 1rem; }
            .modal-title { font-size: 1.25rem; }
            .day-summary-value { font-size: 1.5rem; }
            .calendar-day { min-height: 60px; padding: 4px; }
            .calendar-day-number { font-size: 0.75rem; width: 20px; height: 20px; line-height: 20px; top: 2px; left: 2px; }
            .calendar-day-content { margin-top: 24px; }
            .calendar-hours { font-size: 0.8rem; }
            .calendar-icons .material-symbols-outlined { font-size: 1em; }
            .calendar-holiday-name { font-size: 0.65rem; }
            .calendar-weekday { font-size: 0.7rem; padding: 0.5rem 0.1rem; }
            .monthly-summary, .stats-container, .monthly-report-stats { gap: 0.5rem; padding: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(100px, 1fr)); }
            .monthly-stat-item, .stat-card { min-width: auto; padding: 0.5rem; }
            .monthly-stat-value, .stat-value { font-size: 1.25rem; }
            .monthly-stat-label, .stat-label { font-size: 0.7rem; }
            .section-header { flex-direction: column; align-items: stretch; }
            .section-controls { justify-content: center; width: 100%; }
            .setting-item { flex-direction: column; align-items: stretch; }
            .setting-item .setting-label { margin-bottom: 0.5rem; }
            .setting-item > div { width: 100%; }
            .setting-item > button { margin-top: 0.5rem; width: 100%; }
            .setting-item .toggle-switch { align-self: flex-end; margin-top: 0.5rem; }
            .cash-result-item { padding: 0.5rem 0.75rem; gap: 0.5rem; }
            .cash-result-label { font-size: 0.9rem; }
            .cash-result-hours { font-size: 0.8rem; }
            .cash-result-amount { font-size: 1rem; min-width: 70px; }
        }

        @media (max-width: 480px) {
            html { font-size: 14px; }
            .container { padding: 0.5rem; }
            main { padding: 0.5rem; margin-top: var(--header-height, 60px); }
            .card { padding: 0.75rem; }
            button, .btn { padding: 0.6rem 1.2rem; font-size: 0.8rem; }
            .nav-item { font-size: 0.55rem; }
            .nav-item .material-symbols-outlined { font-size: 1.2rem; }
            .nav-item.active .material-symbols-outlined { font-size: 1.35rem; }
            .logo img { max-height: 35px; }
            header { padding: 0.5rem 1rem; }
            #dateIndicator div { font-size: 1rem !important; }
            .time-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; }
            .day-summary { grid-template-columns: repeat(auto-fit, minmax(60px, 1fr)); gap: 0.5rem; padding: 0.5rem; }
            .day-summary-value { font-size: 1.2rem; }
            .monthly-summary, .stats-container, .monthly-report-stats { grid-template-columns: 1fr 1fr; }
        }

        @media (max-width: 600px) {
            .monthly-report-stats, .stats-container { grid-template-columns: 1fr 1fr; gap: 0.25rem; }
        }

        /* Calendar section specific */
        #calendar-section .card { padding: 1rem; }

        /* Scrollbar */
        ::-webkit-scrollbar { width: 5px; }
        ::-webkit-scrollbar-track { background: transparent; }
        ::-webkit-scrollbar-thumb { background: rgba(0, 139, 139, 0.2); border-radius: 10px; }

        /* ===== Data unica nella Home: niente doppioni =====
           Il navigatore data (frecce + "Venerdì 12 Giugno 2026") mostra già giorno e data:
           via la label "Data:" e il nome-giorno separato (vinse anche sulla regola iOS
           @supports che lo forzava visibile). In WRAP il nome-giorno resta: è il titolo hero. */
        /* :not(#dateIndicatorContent): la data cliccabile al centro del navigatore
           e' anche lei una label[for="date"] e deve restare visibile */
        #timeEntryForm label[for="date"]:not(#dateIndicatorContent) { display: none !important; }
        body:not(.design-wrap) #dayNameIndicator { display: none !important; }