:root {
    --color-auth-bg1: #0B1446;
    --color-auth-bg2: #1D4ED8;
    --color-auth-card-bg: #fff;
    --color-auth-heading: #0F172A;
    --color-auth-text: #334155;
    --color-auth-label: #374151;
    --color-auth-input-bg: #fff;
    --color-auth-input-border: #D1D5DB;
    --color-auth-input-text: #0F172A;
    --color-auth-icon-bg1: #101956;
    --color-auth-icon-bg2: #1D4ED8;
    --color-auth-btn-bg1: #101956;
    --color-auth-btn-bg2: #1D4ED8;
    --color-auth-btn-text: #fff;
    --color-auth-link: #1D4ED8;
    --color-auth-divider: #E5E7EB;
    --color-auth-divider-text: #9CA3AF;
    --color-auth-toggle-bg: #F3F4F6;
    --color-auth-toggle-border: #D1D5DB;
    --color-auth-footer-text: #6B7280;
}

:root[data-theme="dark"] {
    --color-auth-bg1: #0f1428;
    --color-auth-bg2: #1a2540;
    --color-auth-card-bg: #242424;
    --color-auth-heading: #f0f0f0;
    --color-auth-text: #9b9b9b;
    --color-auth-label: #d1d5db;
    --color-auth-input-bg: #303030;
    --color-auth-input-border: #4b5563;
    --color-auth-input-text: #e3e3e3;
    --color-auth-icon-bg1: #1D4ED8;
    --color-auth-icon-bg2: #2563EB;
    --color-auth-btn-bg1: #1D4ED8;
    --color-auth-btn-bg2: #2563EB;
    --color-auth-btn-text: #fff;
    --color-auth-link: #60a5fa;
    --color-auth-divider: #374151;
    --color-auth-divider-text: #6b7280;
    --color-auth-toggle-bg: #303030;
    --color-auth-toggle-border: #4b5563;
    --color-auth-footer-text: #9b9b9b;
}

body {
    background: linear-gradient(135deg, var(--color-auth-bg1) 0%, var(--color-auth-bg2) 100%);

    footer {
        display: none !important;
    }
}

main {
    justify-content: center !important;
    padding-top: var(--padding-main) !important;
    padding-bottom: var(--padding-main) !important;

    section {
        background-color: var(--color-auth-card-bg);
        padding: var(--padding-main);
        border-radius: var(--card-radius);
        box-shadow: 0 20px 60px rgba(0, 0, 0, 0.25);
        max-width: 420px !important;
        width: 100%;

        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 0;

        .card-header {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
            padding-bottom: var(--padding-card);
            margin-bottom: var(--padding-card);
            border-bottom: 1px solid var(--color-auth-divider);
            width: 100%;

            .logo-wrap {
                width: 56px;
                height: 56px;
                border-radius: var(--card-radius);
                background: linear-gradient(135deg, var(--color-auth-icon-bg1), var(--color-auth-icon-bg2));
                display: flex;
                align-items: center;
                justify-content: center;
                box-shadow: var(--shadow-card);

                img {
                    width: 36px;
                    height: 36px;
                    border-radius: 6px;
                }
            }

            h1 {
                font-size: var(--text-heading3);
                font-weight: 700;
                color: var(--color-auth-heading);
                text-align: center;
            }

            p {
                font-size: 0.8125rem;
                color: var(--color-auth-text);
                text-align: center;
                line-height: 1.5;
            }
        }

        .google-btn {
            width: 100%;
            box-sizing: border-box;
            border: 1px solid var(--color-auth-input-border);
            border-radius: var(--box-radius);
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 10px;
            padding: 10px 16px;
            cursor: pointer;
            color: var(--color-auth-input-text);
            font-size: 0.875rem;
            font-weight: 500;
            background-color: var(--color-auth-input-bg);
            transition: background-color 0.15s, border-color 0.15s;
            margin-bottom: 4px;

            &:hover {
                background-color: var(--color-auth-toggle-bg);
                border-color: #9CA3AF;
            }
        }

        .divider {
            display: flex;
            align-items: center;
            width: 100%;
            margin: 4px 0 16px;

            &::before,
            &::after {
                content: '';
                flex: 1;
                border-bottom: 1px solid var(--color-auth-divider);
            }

            span {
                padding: 0 12px;
                color: var(--color-auth-divider-text);
                font-size: 0.75rem;
                white-space: nowrap;
            }
        }

        .login-form {
            width: 100%;
        }

        .form-group {
            margin-bottom: 14px;

            label {
                display: block;
                margin-bottom: 6px;
                font-weight: 500;
                font-size: 0.8125rem;
                color: var(--color-auth-label);
            }

            input:not([type="checkbox"]):not([type="file"]) {
                width: 100%;
                padding: 10px 14px;
                border: 1px solid var(--color-auth-input-border);
                border-radius: var(--box-radius);
                background-color: var(--color-auth-input-bg);
                font-size: 0.875rem;
                color: var(--color-auth-input-text);
                transition: border-color 0.15s, box-shadow 0.15s;
                outline: none;

                &:focus {
                    border-color: #1D4ED8;
                    box-shadow: 0 0 0 3px rgba(29, 78, 216, 0.12);
                }
            }

            input:-webkit-autofill,
            input:-webkit-autofill:hover,
            input:-webkit-autofill:focus,
            input:-webkit-autofill:active {
                -webkit-box-shadow: 0 0 0 1000px var(--color-auth-input-bg) inset !important;
                -webkit-text-fill-color: var(--color-auth-input-text) !important;
                transition: background-color 9999s ease-in-out 0s;
            }
        }

        .form-group-check {
            margin-bottom: 16px;

            label {
                display: flex;
                align-items: center;
                gap: 8px;
                color: var(--color-auth-text);
                font-size: 0.8125rem;
                cursor: pointer;
            }
        }

        .error-message {
            display: block;
            margin-top: 4px;
            color: #ef4444;
            font-size: 0.75rem;
        }

        .btn-submit {
            width: 100%;
            padding: 11px 16px;
            background: linear-gradient(to right, var(--color-auth-btn-bg1), var(--color-auth-btn-bg2));
            color: var(--color-auth-btn-text);
            border: none;
            border-radius: var(--box-radius);
            font-size: 0.9375rem;
            font-weight: 600;
            cursor: pointer;
            transition: opacity 0.2s;

            &:hover {
                opacity: 0.9;
            }
        }

        .register-link {
            margin-top: 16px;
            text-align: center;
            font-size: 0.8125rem;
            color: var(--color-auth-footer-text);

            a {
                color: var(--color-auth-link);
                font-weight: 600;
                border: none;
                padding: 0;
                width: auto;
                display: inline;
                box-shadow: none;
                background: none;

                &:hover {
                    text-decoration: underline;
                }
            }
        }

        .toggle-buttons {
            display: flex;
            gap: 6px;
            width: 100%;
        }

        .toggle-btn {
            flex: 1;
            padding: 9px 12px;
            background-color: var(--color-auth-toggle-bg);
            color: var(--color-auth-text);
            border: 1px solid var(--color-auth-toggle-border);
            border-radius: var(--box-radius);
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            transition: all 0.15s;

            &:hover {
                border-color: #1D4ED8;
                color: #1D4ED8;
            }

            &.active {
                background: linear-gradient(to right, var(--color-auth-btn-bg1), var(--color-auth-btn-bg2));
                color: #fff;
                border-color: transparent;
            }
        }

        .avatar-upload {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 12px;
        }

        .avatar-preview {
            width: 96px;
            height: 96px;
            border-radius: 50%;
            border: 2px solid var(--color-auth-input-border);
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
            background-color: var(--color-auth-toggle-bg);

            img {
                width: 100%;
                height: 100%;
                object-fit: cover;
            }
        }

        .btn-upload {
            padding: 7px 14px;
            background-color: var(--color-auth-toggle-bg);
            color: var(--color-auth-label);
            border: 1px solid var(--color-auth-toggle-border);
            border-radius: var(--box-radius);
            font-size: 0.8125rem;
            font-weight: 500;
            cursor: pointer;
            transition: background-color 0.15s;

            &:hover {
                border-color: #1D4ED8;
                color: #1D4ED8;
            }
        }
    }
}