/* Font family */
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
        }

        h1, h2, h3, .font-display {
            font-family: 'Space Grotesk', 'Inter', sans-serif;
            letter-spacing: -0.02em;
        }

        /* Custom scrollbar for aesthetics */
        ::-webkit-scrollbar {
            width: 10px;
        }
        ::-webkit-scrollbar-track {
            background: #111827;
            border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb {
            background: linear-gradient(180deg, #f43f5e, #be123c);
            border-radius: 5px;
        }
        ::-webkit-scrollbar-thumb:hover {
            background: linear-gradient(180deg, #fb7185, #f43f5e);
        }

        /* Smooth animations */
        * {
            transition-property: background-color, border-color, color, fill, stroke, opacity, box-shadow, transform;
            transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
            transition-duration: 200ms;
        }

        /* Card entry animation */
        @keyframes slideIn {
            from {
                opacity: 0;
                transform: translateY(-10px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }

        .card-item {
            animation: slideIn 0.3s ease-out;
        }

        /* Pulse animation for loading */
        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 0.5;
            }
        }

        .pulse {
            animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
        }

        /* Gradient background with racing stripes effect */
        .gradient-bg {
            background: 
                linear-gradient(135deg, #0a0e1a 0%, #1a1f35 25%, #0f1419 50%, #1a1f35 75%, #0a0e1a 100%);
            background-size: 200% 200%;
            animation: gradientShift 15s ease infinite;
        }

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

        /* Card hover effect */
        .card-hover {
            transition: all 0.2s ease;
        }

        .card-hover:hover {
            transform: translateX(4px);
            box-shadow: 0 8px 20px rgba(244, 63, 94, 0.4);
        }

        /* Stats card styling with rose/pink accents */
        .stats-card {
            background: linear-gradient(135deg, #1e1b2e 0%, #2d2640 100%);
            border: 1px solid rgba(244, 63, 94, 0.3);
        }

        .stats-card:hover {
            border-color: rgba(244, 63, 94, 0.6);
            box-shadow: 0 8px 24px rgba(244, 63, 94, 0.2);
            transform: translateY(-2px);
        }

        /* Focus outline improvements */
        input:focus, button:focus {
            outline: none;
        }

        /* Checklist item hover effect */
        .checklist-item {
            transition: all 0.25s ease;
            position: relative;
        }

        .checklist-item:hover {
            transform: translateY(-4px) scale(1.03);
            box-shadow: 0 12px 24px rgba(0, 0, 0, 0.5);
            z-index: 10;
        }

        .checklist-item:active {
            transform: translateY(-1px) scale(1.01);
        }

        /* Plus icon on hover - vibrant rose color */
        .checklist-item::after {
            content: '+';
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            font-size: 3.5rem;
            font-weight: bold;
            color: rgba(251, 113, 133, 0.95);
            opacity: 0;
            transition: opacity 0.25s ease;
            pointer-events: none;
            text-shadow: 
                0 0 20px rgba(251, 113, 133, 0.9),
                0 0 40px rgba(251, 113, 133, 0.6),
                0 0 60px rgba(251, 113, 133, 0.4);
        }

        .checklist-item:hover::after {
            opacity: 1;
        }

        .checklist-item:hover > div {
            opacity: 0.15;
        }

        /* Progress bar animation */
        @keyframes progressFill {
            from {
                width: 0%;
            }
        }

        .progress-bar {
            animation: progressFill 1s ease-out;
        }

        /* Tab styles with rose accent */
        .tab-btn {
            position: relative;
        }

        .tab-btn.active::after {
            content: '';
            position: absolute;
            bottom: -2px;
            left: 0;
            right: 0;
            height: 3px;
            background: linear-gradient(90deg, #f43f5e, #fb7185, #f43f5e);
            border-radius: 2px 2px 0 0;
            box-shadow: 0 0 10px rgba(244, 63, 94, 0.5);
        }

        /* Floating action button */
        .fab {
            box-shadow: 0 4px 12px rgba(244, 63, 94, 0.5);
        }

        .fab:hover {
            box-shadow: 0 8px 20px rgba(244, 63, 94, 0.6);
        }

        /* Navigation bar glass effect */
        .nav-glass {
            background: rgba(15, 20, 35, 0.85);
            backdrop-filter: blur(12px);
        }

        /* Card glass effect */
        .card-glass {
            background: rgba(30, 27, 46, 0.6);
            backdrop-filter: blur(8px);
        }

        /* Glow effect for important elements */
        .glow-rose {
            box-shadow: 0 0 20px rgba(244, 63, 94, 0.3);
        }

        .glow-rose:hover {
            box-shadow: 0 0 30px rgba(244, 63, 94, 0.5);
        }

        /* Input focus glow */
        input:focus {
            box-shadow: 0 0 0 3px rgba(244, 63, 94, 0.3);
        }

        /* Owned card special effect */
        .owned-card {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.15) 0%, rgba(5, 150, 105, 0.1) 100%);
            border-color: #10b981 !important;
        }

        .owned-card:hover {
            background: linear-gradient(135deg, rgba(16, 185, 129, 0.25) 0%, rgba(5, 150, 105, 0.2) 100%);
            border-color: #34d399 !important;
        }