:root {
            --primary: #E53E3E;
            --primary-light: #FC8181;
            --primary-dark: #C53030;
            --accent: #F6AD55;
            --background: #FFF5F5;
            --text: #2D3748;
        }

        @keyframes float {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        @keyframes pulse {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                transform: scale(1.05);
            }
        }

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

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }

            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        @keyframes bounce {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-20px);
            }
        }

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

            to {
                transform: rotate(360deg);
            }
        }

        @keyframes shake {

            0%,
            100% {
                transform: translateX(0);
            }

            25% {
                transform: translateX(-5px);
            }

            75% {
                transform: translateX(5px);
            }
        }

        .floating {
            animation: float 3s ease-in-out infinite;
        }

        .pulse {
            animation: pulse 2s infinite;
        }

        .rotate {
            animation: rotate 20s linear infinite;
        }

        .slide-up {
            animation: slideUp 0.5s ease forwards;
        }

        .pizza-wave {
            background: linear-gradient(135deg, #E53E3E 0%, #B91C1C 100%);
            position: relative;
            overflow: hidden;
        }

        .pizza-wave::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: linear-gradient(45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%),
                linear-gradient(-45deg, rgba(0, 0, 0, 0.15) 25%, transparent 25%),
                linear-gradient(45deg, transparent 75%, rgba(0, 0, 0, 0.15) 75%),
                linear-gradient(-45deg, transparent 75%, rgba(0, 0, 0, 0.15) 75%);
            background-size: 20px 20px;
            animation: wave 20s linear infinite;
        }

        @keyframes wave {
            0% {
                background-position: 0 0;
            }

            100% {
                background-position: 40px 40px;
            }
        }

        .pizza-card {
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .pizza-card:hover {
            transform: translateY(-5px);
        }

        .pizza-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at center, rgba(255, 255, 255, 0.2) 0%, transparent 70%);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .pizza-card:hover::before {
            opacity: 1;
        }

        .pizza-card.best-value::after {
            content: '🏆';
            position: absolute;
            top: -10px;
            right: -10px;
            font-size: 2rem;
            animation: bounce 1s ease infinite;
        }

        .best-value {
            border: 2px solid var(--primary);
            box-shadow: 0 0 15px rgba(229, 62, 62, 0.2);
        }

        .achievement-badge {
            position: fixed;
            bottom: 20px;
            right: 20px;
            background: white;
            padding: 1rem;
            border-radius: 0.5rem;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
            transform: translateX(120%);
            transition: transform 0.3s ease;
            z-index: 1000;
        }

        .achievement-badge.show {
            transform: translateX(0);
        }

        .confetti {
            position: fixed;
            width: 10px;
            height: 10px;
            background-color: #f00;
            opacity: 0;
            pointer-events: none;
        }

        .input-focus {
            transform: scale(1.02);
            box-shadow: 0 0 15px rgba(229, 62, 62, 0.3);
            outline: 3px solid var(--primary);
            outline-offset: 2px;
        }

        .calculate-btn {
            position: relative;
            overflow: hidden;
        }

        .calculate-btn::after {
            content: '';
            position: absolute;
            top: -50%;
            left: -50%;
            width: 200%;
            height: 200%;
            background: linear-gradient(45deg,
                    transparent,
                    rgba(255, 255, 255, 0.3),
                    transparent);
            transform: rotate(45deg);
            animation: shine 3s infinite;
        }

        @keyframes shine {
            0% {
                transform: translateX(-100%) rotate(45deg);
            }

            100% {
                transform: translateX(100%) rotate(45deg);
            }
        }

        .pizza-size-visualizer {
            width: 100%;
            height: 200px;
            position: relative;
            margin: 20px 0;
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 20px;
        }

        .pizza-circle {
            border-radius: 50%;
            background: linear-gradient(135deg, #E53E3E 0%, #FC8181 100%);
            position: relative;
            transition: all 0.3s ease;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }

        .pizza-circle::before {
            content: '';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 80%;
            height: 80%;
            border-radius: 50%;
            background: rgba(255, 255, 255, 0.1);
        }

        .pizza-slice {
            position: absolute;
            width: 50%;
            height: 50%;
            background: rgba(255, 255, 255, 0.2);
            clip-path: polygon(0 0, 100% 0, 0 100%);
            transform-origin: bottom right;
        }

        .comparison-chart {
            width: 100%;
            height: 200px;
            margin: 20px 0;
            display: flex;
            align-items: flex-end;
            gap: 10px;
            padding: 20px;
            background: white;
            border-radius: 12px;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .chart-bar {
            flex: 1;
            background: linear-gradient(to top, #E53E3E, #FC8181);
            border-radius: 4px 4px 0 0;
            transition: height 0.5s ease;
            position: relative;
            min-width: 40px;
        }

        .chart-bar::after {
            content: attr(data-value);
            position: absolute;
            top: -25px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 12px;
            color: #C53030;
        }

        .pizza-tips {
            background: white;
            border-radius: 12px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .tip-item {
            display: flex;
            align-items: center;
            gap: 10px;
            margin: 10px 0;
            padding: 10px;
            border-radius: 8px;
            background: #FFF5F5;
            transition: transform 0.2s ease;
        }

        .tip-item:hover {
            transform: translateX(10px);
        }

        .tip-icon {
            font-size: 24px;
            color: #E53E3E;
        }

        .pizza-presets {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 10px;
            margin: 20px 0;
        }

        .preset-btn {
            padding: 10px;
            border: 2px solid #E53E3E;
            border-radius: 8px;
            background: white;
            color: #E53E3E;
            cursor: pointer;
            transition: all 0.2s ease;
        }

        .preset-btn:hover {
            background: #E53E3E;
            color: white;
        }

        .pizza-stats {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }

        .stat-card {
            background: white;
            padding: 20px;
            border-radius: 12px;
            text-align: center;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .stat-value {
            font-size: 24px;
            font-weight: bold;
            color: #E53E3E;
            margin: 10px 0;
        }

        .stat-label {
            color: #718096;
            font-size: 14px;
        }

        .mobile-menu-btn {
            min-width: 44px;
            min-height: 44px;
            padding: 12px;
        }

        /* Add focus styles for better keyboard navigation */
        *:focus-visible {
            outline: 3px solid #E53E3E;
            outline-offset: 2px;
            border-radius: 4px;
        }

        /* Improve contrast for better readability */
        [class*="text-[#C53030]"] {
            color: #B91C1C;
            /* Darker red for better contrast */
        }

        /* Add focus styles for interactive elements */
        .preset-btn:focus-visible,
        .calculate-btn:focus-visible {
            outline: 3px solid #E53E3E;
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.3);
        }

        /* Ensure sufficient contrast for text */
        .text-white {
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3);
        }

        /* Add focus styles for form inputs */
        .form-input:focus-visible,
        .form-select:focus-visible {
            outline: 3px solid #E53E3E;
            outline-offset: 2px;
            border-color: #E53E3E;
        }

        /* Ensure sufficient contrast for disabled states */
        .form-input:disabled,
        .form-select:disabled {
            background-color: #F3F4F6;
            color: #6B7280;
            border-color: #D1D5DB;
        }

        /* Add focus styles for buttons */
        button:focus-visible {
            outline: 3px solid #E53E3E;
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgba(229, 62, 62, 0.3);
        }

        /* Ensure focus styles are visible */
        .pizza-wave:focus-within {
            outline: 3px solid #FFFFFF;
            outline-offset: 2px;
        }

        /* Improve badge contrast */
        .bg-white\/30 {
            background-color: rgba(255, 255, 255, 0.3);
        }