:root { 
        --primary: #FF4757; 
        --primary-dark: #E03B4B; 
        --dark: #0A0A0B; 
        --bg-color: #FAFAFA; 
        --input-bg: #F3F4F6; 
        --border: #E5E7EB; 
        --shadow-soft: 0 20px 40px -10px rgba(0,0,0,0.08); 
    }

    * { 
        box-sizing: border-box; 
        -webkit-tap-highlight-color: transparent; 
    }

    body { 
        margin: 0; 
        padding: 20px; 
        font-family: 'Outfit', sans-serif; 
        background-color: var(--bg-color); 
        background-image: radial-gradient(#e5e7eb 1px, transparent 1px); 
        background-size: 24px 24px; 
        min-height: 100vh; 
        display: flex; 
        flex-direction: column; 
        align-items: center; 
        justify-content: center; 
        color: var(--dark); 
    }

    .auth-card { 
        background: rgba(255, 255, 255, 0.95); 
        backdrop-filter: blur(10px); 
        width: 100%; 
        max-width: 420px; 
        padding: 40px 35px; 
        border-radius: 28px; 
        box-shadow: var(--shadow-soft); 
        border: 1px solid rgba(255,255,255,0.8); 
        position: relative; 
        overflow: hidden; 
    }

    .card-header { 
        text-align: center; 
        margin-bottom: 25px; 
    }

    .logo-text { 
        font-size: 1.8rem; 
        font-weight: 800; 
        letter-spacing: -1px; 
        color: var(--dark); 
        text-decoration: none; 
        display: inline-block; 
        margin-bottom: 10px; 
    }

    .logo-text span { 
        color: var(--primary); 
    }
    
    .toggle-container { 
        display: flex; 
        justify-content: center; 
        margin-bottom: 30px; 
    }

    .toggle-box { 
        background: var(--input-bg); 
        border-radius: 14px; 
        padding: 5px; 
        display: flex; 
        position: relative; 
        width: 100%; 
    }

    .toggle-btn { 
        flex: 1; 
        border: none; 
        background: none; 
        padding: 12px; 
        font-family: 'Outfit', sans-serif; 
        font-weight: 600; 
        font-size: 0.9rem; 
        cursor: pointer; 
        color: #9CA3AF; 
        border-radius: 10px; 
        transition: color 0.3s ease;
        z-index: 2; 
        position: relative; 
    }

    .toggle-btn.active { 
        color: var(--dark); 
        font-weight: 700; 
    }

    .slider { 
        position: absolute; 
        top: 5px; 
        left: 5px; 
        width: calc(50% - 5px); 
        height: calc(100% - 10px); 
        background: white; 
        border-radius: 10px; 
        box-shadow: 0 2px 8px rgba(0,0,0,0.06); 
        transition: transform 0.3s cubic-bezier(0.25, 0.8, 0.25, 1); 
        z-index: 1; 
    }
    
    h2 { 
        margin: 0 0 8px; 
        font-size: 1.5rem; 
        font-weight: 800; 
        text-align: center; 
        letter-spacing: -0.5px; 
    }

    p.subtitle { 
        margin: 0 0 30px; 
        color: #6B7280; 
        font-size: 0.95rem; 
        text-align: center; 
        line-height: 1.5; 
    }
    
    .form-section { 
        display: none; 
        animation: fadeIn 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); 
    }

    .form-section.active-form { 
        display: block; 
    }

    @keyframes fadeIn { 
        from { 
            opacity: 0; 
            transform: translateY(10px); 
        } 
        to { 
            opacity: 1; 
            transform: translateY(0); 
        } 
    }
    
    .input-group { 
        margin-bottom: 16px; 
    }

    input { 
        width: 100%; 
        padding: 16px 18px; 
        border: 2px solid transparent; 
        border-radius: 16px; 
        font-family: 'Outfit', sans-serif; 
        font-size: 0.95rem; 
        background: var(--input-bg); 
        color: var(--dark); 
        box-sizing: border-box; 
        transition: all 0.2s ease; 
        font-weight: 500; 
    }

    input::placeholder { 
        color: #9CA3AF; 
        font-weight: 400; 
    }

    input:focus { 
        outline: none; 
        background: white; 
        border-color: var(--primary); 
        box-shadow: 0 0 0 4px rgba(255, 71, 87, 0.1); 
    }
    
    .btn-submit { 
        width: 100%; 
        padding: 18px; 
        background: var(--dark); 
        color: white; 
        border: none; 
        border-radius: 16px; 
        font-weight: 700; 
        font-size: 1rem; 
        cursor: pointer; 
        margin-top: 10px; 
        transition: all 0.2s ease; 
    }

    .btn-submit:hover { 
        transform: translateY(-2px); 
        box-shadow: 0 10px 20px rgba(0,0,0,0.15); 
    }

    .btn-submit:disabled { 
        opacity: 0.7; 
        cursor: not-allowed; 
    }
    
    .error, .success { 
        font-size: 0.9rem; 
        margin-bottom: 20px; 
        display: none; padding: 
        12px; border-radius: 12px; 
        text-align: center; 
        font-weight: 500; 
        border: 1px solid transparent; 
    }

    .error { 
        color: #D93025; 
        background: #FEF2F2; 
        border-color: #FEE2E2; 
    }

    .success { 
        color: #065F46; 
        background: #D1FAE5; 
        border-color: #A7F3D0; 
    }
    
    .forgot-link { 
        display: block; 
        text-align: center; 
        margin-top: 15px; 
        color: #6B7280; 
        font-size: 0.85rem; 
        text-decoration: none; 
        cursor: pointer; 
    }

    .forgot-link:hover { 
        color: var(--primary); 
        text-decoration: underline; 
    }
    
    .reset-mode .toggle-container { 
        display: none; 
    }