.auth-page {
        min-height: calc(100vh - 120px);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 40px 15px;
        background: radial-gradient(circle at top left, rgba(37, 99, 235, .12), transparent 35%), radial-gradient(circle at bottom right, rgba(15, 118, 110, .12), transparent 35%), #f8fafc;
    }

    .auth-card {
        width: 100%;
        max-width: 980px;
        background: #fff;
        border-radius: 30px;
        overflow: hidden;
        display: grid;
        grid-template-columns: 1fr 1fr;
        border: 1px solid #e9edf5;
        box-shadow: 0 25px 60px rgba(15, 23, 42, .12);
    }

    .auth-visual {
        padding: 48px;
        color: #fff;
        display: flex;
        flex-direction: column;
        justify-content: center;
        background: radial-gradient(circle at top right, rgba(255,255,255,.35), transparent 30%), linear-gradient(135deg, #0f172a, #1d4ed8, #0f766e);
    }

    .auth-logo {
        width: 68px;
        height: 68px;
        border-radius: 22px;
        background: rgba(255,255,255,.15);
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 34px;
        margin-bottom: 24px;
    }

    .auth-visual h2 {
        font-weight: 900;
        margin-bottom: 10px;
    }

    .auth-visual p {
        opacity: .88;
        max-width: 340px;
    }

    .auth-feature-list {
        display: grid;
        gap: 10px;
        margin-top: 28px;
    }

        .auth-feature-list div {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 12px;
            border-radius: 16px;
            background: rgba(255,255,255,.12);
            border: 1px solid rgba(255,255,255,.14);
            font-size: 14px;
            font-weight: 700;
        }

        .auth-feature-list i {
            font-size: 18px;
        }

    .auth-form-area {
        padding: 48px;
    }

    .auth-form-head span {
        font-size: 12px;
        letter-spacing: 1px;
        text-transform: uppercase;
        color: #2563eb;
        font-weight: 800;
    }

    .auth-form-head h3 {
        font-weight: 900;
        color: #0f172a;
        margin: 6px 0;
    }

    .auth-form-head p {
        color: #64748b;
        margin-bottom: 24px;
    }

    .form-label {
        font-size: 13px;
        font-weight: 700;
        color: #334155;
    }

    .input-icon {
        position: relative;
    }

        .input-icon i {
            position: absolute;
            left: 15px;
            top: 50%;
            transform: translateY(-50%);
            color: #64748b;
        }

        .input-icon .form-control {
            min-height: 50px;
            border-radius: 16px;
            padding-left: 44px;
            border: 1px solid #dbe3ef;
            background: #f8fafc;
        }

            .input-icon .form-control:focus {
                background: #fff;
                border-color: #2563eb;
                box-shadow: 0 0 0 .2rem rgba(37,99,235,.12);
            }

    .remember {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 13px;
        color: #475569;
    }

    .forgot-link {
        text-decoration: none;
        font-size: 13px;
        font-weight: 700;
        color: #2563eb;
    }

    .auth-btn {
        min-height: 50px;
        border-radius: 999px;
        background: linear-gradient(135deg, #2563eb, #0f766e);
        border: none;
        color: #fff;
        font-weight: 800;
    }

        .auth-btn:hover {
            color: #fff;
            opacity: .92;
        }

    .auth-inline-error {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 14px 16px;
        margin-bottom: 18px;
        border-radius: 18px;
        color: #991b1b;
        background: linear-gradient(135deg, #fff1f2, #fee2e2);
        border: 1px solid #fecaca;
        font-size: 14px;
        font-weight: 700;
    }

        .auth-inline-error i {
            font-size: 18px;
        }

    .modern-toast-wrap {
        position: fixed;
        right: 24px;
        top: 24px;
        z-index: 9999;
        pointer-events: none;
    }

    .modern-toast {
        min-width: 320px;
        max-width: 420px;
        display: flex;
        align-items: flex-start;
        gap: 14px;
        padding: 16px;
        border-radius: 22px;
        background: rgba(255, 255, 255, .96);
        border: 1px solid #e5e7eb;
        box-shadow: 0 24px 70px rgba(15, 23, 42, .22);
        transform: translateY(-14px) scale(.96);
        opacity: 0;
        transition: all .28s ease;
        pointer-events: auto;
        backdrop-filter: blur(14px);
    }

        .modern-toast.show {
            transform: translateY(0) scale(1);
            opacity: 1;
        }

    .modern-toast-icon {
        width: 42px;
        height: 42px;
        border-radius: 16px;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 20px;
        flex-shrink: 0;
    }

    .modern-toast-error .modern-toast-icon {
        color: #dc2626;
        background: #fee2e2;
    }

    .modern-toast-success .modern-toast-icon {
        color: #16a34a;
        background: #dcfce7;
    }

    .modern-toast-warning .modern-toast-icon {
        color: #d97706;
        background: #fef3c7;
    }

    .modern-toast-content {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 3px;
    }

        .modern-toast-content strong {
            color: #0f172a;
            font-size: 14px;
            font-weight: 900;
        }

        .modern-toast-content span {
            color: #475569;
            font-size: 13px;
            line-height: 1.45;
        }

    .modern-toast-close {
        border: none;
        background: #f1f5f9;
        color: #475569;
        width: 30px;
        height: 30px;
        border-radius: 999px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

        .modern-toast-close:hover {
            background: #e2e8f0;
            color: #0f172a;
        }

    @@media (max-width: 768px) {
        .auth-card {
            grid-template-columns: 1fr;
        }

        .auth-visual {
            padding: 32px;
        }

        .auth-form-area {
            padding: 32px;
        }
    }

    @@media (max-width: 576px) {
        .modern-toast-wrap {
            left: 14px;
            right: 14px;
            top: 14px;
        }

        .modern-toast {
            min-width: unset;
            max-width: unset;
            width: 100%;
        }
    }