/* Critical CSS matching dashboard */
        :root {
            --safe-area-inset-top: env(safe-area-inset-top);
            --safe-area-inset-bottom: env(safe-area-inset-bottom);
            --safe-area-inset-left: env(safe-area-inset-left);
            --safe-area-inset-right: env(safe-area-inset-right);
        }
        
        * {
            -webkit-tap-highlight-color: transparent;
            -webkit-font-smoothing: antialiased;
            -moz-osx-font-smoothing: grayscale;
        }
        
        html {
            font-size: 16px;
            height: -webkit-fill-available;
        }
        
        body {
            font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
            background-color: #f8fafc;
            color: #334155;
            min-height: 100vh;
            min-height: -webkit-fill-available;
            overflow-x: hidden;
            position: relative;
        }
        
        /* Safe area adjustments */
        .safe-top {
            padding-top: var(--safe-area-inset-top);
        }
        
        .safe-bottom {
            padding-bottom: var(--safe-area-inset-bottom);
        }
        
        /* Touch-friendly sizes */
        button, 
        .btn,
        input,
        select {
            min-height: 44px;
        }
        
        /* Card styles */
        .card {
            background: white;
            border-radius: 0.75rem;
            box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1);
            border: 1px solid #e2e8f0;
        }
        
        /* Toast notifications */
        .toast {
            position: fixed;
            bottom: 1rem;
            left: 50%;
            transform: translateX(-50%) translateY(100px);
            z-index: 9999;
            transition: transform 0.3s cubic-bezier(0.4, 0, 0.6, 1);
            max-width: calc(100% - 2rem);
        }
        
        .toast.show {
            transform: translateX(-50%) translateY(0);
        }
        
        /* Loading states */
        .skeleton {
            background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
            background-size: 200% 100%;
            animation: loading 1.5s infinite;
        }
        
        @keyframes loading {
            0% { background-position: 200% 0; }
            100% { background-position: -200% 0; }
        }
        
        /* Custom input styles */
        .modern-input {
            transition: all 0.2s;
            border: 1px solid #e2e8f0;
        }
        
        .modern-input:focus {
            border-color: #0ea5e9;
            box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.1);
            outline: none;
        }
        
        /* Better focus styles */
        .focus\:ring-brand:focus {
            outline: 2px solid transparent;
            outline-offset: 2px;
            box-shadow: 0 0 0 3px rgba(14, 165, 233, 0.5);
        }
        
        @media screen and (max-width: 768px) {
            input[type="text"],
            input[type="email"],
            input[type="password"],
            select,
            textarea {
                font-size: 16px !important;
            }
        }
        
        /* Animation for form */
        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(20px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }
        
        .animate-fadeInUp {
            animation: fadeInUp 0.5s ease-out;
        }
        
        /* Prevent horizontal overflow */
        html, body {
            overflow-x: hidden;
            max-width: 100vw;
        }

        .brand-gradient {
            background: linear-gradient(to right, #0c4a6e 0%, #0369a1 50%, #0c4a6e 100%);
        }
        .anim-delay-1 {
    animation-delay: 0.1s;
}