@font-face {
      font-family: 'GeistVF';
      src: url('https://vercel.live/_next/static/media/GeistVF.f0b91dac.woff2') format('woff2');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    
    @font-face {
      font-family: 'GeistMonoVF';
      src: url('https://vercel.live/_next/static/media/GeistMonoVF.c5eea1f8.woff2') format('woff2');
      font-weight: 100 900;
      font-style: normal;
      font-display: swap;
    }
    
    :root {
      --font-geist-sans: 'GeistVF', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
      --font-geist-mono: 'GeistMonoVF', 'SF Mono', Monaco, 'Cascadia Code', 'Roboto Mono', Consolas, 'Courier New', monospace;
    }
    
    /* Force font application to match original */
    html, body, * {
      font-family: var(--font-geist-sans) !important;
    }
    
    /* Ensure proper font weights */
    .font-medium {
      font-weight: 500 !important;
    }
    
    /* Admin panel button hover effects */
    .edit-user:hover {
      background-color: #059669 !important;
    }
    
    .extend-user:hover {
      background-color: #2563eb !important;
    }
    
    .delete-user:hover {
      background-color: #dc2626 !important;
    }
    
    .font-semibold {
      font-weight: 600 !important;
    }
    
    .font-bold {
      font-weight: 700 !important;
    }
    
    /* Make sure text renders smoothly  */
    * {
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
    }
    
    /* Fix TikTok icon container - prevent flash on page load */
    #tiktokIconContainer {
      background-color: #000000 !important;
    }
    
    /* Hide container initially to prevent black flash */
    #tiktokIconContainer:not(.ready) {
      opacity: 0;
    }
    
    #tiktokIconContainer.ready {
      opacity: 1;
      transition: opacity 0.2s ease-in;
    }

    @keyframes spin {
        from {
            transform: rotate(0deg);
        }
        to {
            transform: rotate(360deg);
        }
    }
    
    @keyframes scan {
        0% {
            top: 20%;
            opacity: 0;
        }
        50% {
            opacity: 1;
        }
        100% {
            top: 80%;
            opacity: 0;
        }
    }
    
    @keyframes pulse {
        0%, 100% {
            opacity: 1;
        }
        50% {
            opacity: 0.5;
        }
    }

    .face-id-video-wrapper {
        position: relative;
        width: 220px;
        height: 220px;
        border-radius: 32px;
        overflow: hidden;
        background: rgba(0, 0, 0, 0.25);
    }

    .face-id-video {
        width: 100%;
        height: 100%;
        object-fit: cover;
        border-radius: 32px;
    }

    @media (max-width: 480px) {
        .face-id-video-wrapper {
            width: 198px;
            height: 198px;
        }
    }

    /* Hide native browser password reveal buttons */
    input[type="password"]::-ms-reveal,
    input[type="password"]::-ms-clear,
    input[type="password"]::-webkit-credentials-auto-fill-button,
    input[type="password"]::-webkit-strong-password-auto-fill-button {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* Ensure our custom toggle button is always visible and clickable */
    .password-toggle {
        pointer-events: auto !important;
        cursor: pointer !important;
    }

    .password-toggle svg {
        pointer-events: none !important;
    }