.auth-page[data-v-2c9fac6c] {
            min-height: 100vh;
            background: linear-gradient(135deg, #f8fafc, #eff6ff 50%, #f0f9ff);
            display: flex;
            flex-direction: column
        }

        .auth-main[data-v-2c9fac6c] {
            flex: 1;
            align-items: center;
            padding: 120px 20px 60px
        }

        .auth-inner[data-v-2c9fac6c],
        .auth-main[data-v-2c9fac6c] {
            display: flex;
            justify-content: center
        }

        .auth-inner[data-v-2c9fac6c] {
            width: 100%;
        }

        .auth-card[data-v-2c9fac6c] {
            width: 100%;
            max-width: 480px;
            background: #fff;
            border-radius: 24px;
            padding: 40px;
            box-shadow: 0 4px 24px #0000000f
        }

        .auth-header[data-v-2c9fac6c] {
            text-align: center;
            margin-bottom: 32px
        }

        .auth-logo[data-v-2c9fac6c] {
            display: flex;
            justify-content: center;
            margin-bottom: 20px
        }

        .auth-title[data-v-2c9fac6c] {
            font-size: 24px;
            font-weight: 800;
            color: #1f2937;
            margin-bottom: 8px
        }

        .auth-subtitle[data-v-2c9fac6c] {
            font-size: 14px;
            color: #6b7280
        }

        .auth-form[data-v-2c9fac6c] {
            margin-bottom: 24px
        }

        .auth-message[data-v-2c9fac6c] {
            display: none;
            margin-bottom: 20px;
            padding: 12px 14px;
            border-radius: 12px;
            font-size: 14px;
            line-height: 1.5
        }

        .auth-message.is-visible[data-v-2c9fac6c] {
            display: block
        }

        .auth-message.is-error[data-v-2c9fac6c] {
            background: #fef2f2;
            color: #b91c1c;
            border: 1px solid #fecaca
        }

        .auth-message.is-success[data-v-2c9fac6c] {
            background: #ecfdf5;
            color: #047857;
            border: 1px solid #a7f3d0
        }

        .form-group[data-v-2c9fac6c] {
            margin-bottom: 20px
        }

        .form-label[data-v-2c9fac6c] {
            display: block;
            font-size: 14px;
            font-weight: 600;
            color: #374151;
            margin-bottom: 8px
        }

        .form-input-wrapper[data-v-2c9fac6c] {
            position: relative
        }

        .form-icon[data-v-2c9fac6c] {
            position: absolute;
            left: 14px;
            top: 50%;
            transform: translateY(-50%);
            color: #9ca3af;
            pointer-events: none
        }

        .form-input[data-v-2c9fac6c] {
            width: 100%;
            padding: 12px 14px 12px 42px;
            border: 1px solid #e5e7eb;
            border-radius: 12px;
            font-size: 14px;
            color: #1f2937;
            background: #f9fafb;
            transition: all .2s;
            box-sizing: border-box
        }

        .form-input[data-v-2c9fac6c]:focus {
            outline: none;
            border-color: #3b82f6;
            background: #fff;
            box-shadow: 0 0 0 3px #3b82f61a
        }

        .form-input[data-v-2c9fac6c]::-moz-placeholder {
            color: #9ca3af
        }

        .form-input[data-v-2c9fac6c]::placeholder {
            color: #9ca3af
        }

        .form-options[data-v-2c9fac6c] {
            justify-content: space-between;
            margin-bottom: 24px;
            font-size: 14px
        }

        .form-options[data-v-2c9fac6c],
        .remember-me[data-v-2c9fac6c] {
            display: flex;
            align-items: center
        }

        .remember-me[data-v-2c9fac6c] {
            gap: 6px;
            color: #4b5563;
            cursor: pointer
        }

        .remember-me input[data-v-2c9fac6c] {
            width: 16px;
            height: 16px;
            accent-color: #3b82f6
        }

        .forgot-link[data-v-2c9fac6c] {
            color: #3b82f6;
            text-decoration: none;
            font-weight: 500
        }

        .forgot-link[data-v-2c9fac6c]:hover {
            text-decoration: underline
        }

        .btn-submit[data-v-2c9fac6c] {
            width: 100%;
            padding: 14px;
            background: #3b82f6;
            color: #fff;
            border: none;
            border-radius: 12px;
            font-size: 16px;
            font-weight: 700;
            cursor: pointer;
            transition: background .2s
        }

        .btn-submit[data-v-2c9fac6c]:hover {
            background: #1e40af
        }

        .btn-submit[data-v-2c9fac6c]:disabled {
            opacity: .7;
            cursor: not-allowed
        }

        .auth-divider[data-v-2c9fac6c] {
            display: flex;
            align-items: center;
            gap: 16px;
            margin-bottom: 24px;
            color: #9ca3af;
            font-size: 13px
        }

        .auth-divider[data-v-2c9fac6c]:after,
        .auth-divider[data-v-2c9fac6c]:before {
            content: "";
            flex: 1;
            height: 1px;
            background: #e5e7eb
        }

        .social-login[data-v-2c9fac6c] {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 12px;
            margin-bottom: 24px
        }

        .social-btn[data-v-2c9fac6c] {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            padding: 12px;
            background: #fff;
            border: 1px solid #e5e7eb;
            border-radius: 10px;
            font-size: 14px;
            font-weight: 500;
            color: #4b5563;
            cursor: pointer;
            transition: all .2s
        }

        .social-btn[data-v-2c9fac6c]:hover {
            border-color: #3b82f6;
            color: #3b82f6;
            background: #f8faff
        }

        .social-btn svg[data-v-2c9fac6c] {
            flex-shrink: 0
        }

        .auth-footer[data-v-2c9fac6c] {
            text-align: center;
            font-size: 14px;
            color: #6b7280
        }

        .auth-link[data-v-2c9fac6c] {
            color: #3b82f6;
            font-weight: 600;
            text-decoration: none;
            margin-left: 4px
        }

        .auth-link[data-v-2c9fac6c]:hover {
            text-decoration: underline
        }

        @media(max-width:480px) {
            .auth-card[data-v-2c9fac6c] {
                padding: 32px 24px;
                border-radius: 20px
            }

            .social-login[data-v-2c9fac6c] {
                grid-template-columns: 1fr
            }
        }