.login-bg {
    background: #f8f9fa;
}

/* Card wrapper responsive */
.login-wrapper {
    width: 100%;
    max-width: 420px;
    background: white;
}

/* User avatar */
.avatar {
    width: 75px;
    height: 75px;
    border-radius: 50%;
}

.avatar-lg {
    width: 90px;
    height: 90px;
    border-radius: 50%;
}

/* Modern rounded buttons */
.btn-round {
    border-radius: 12px;
}

/* User card */
.user-card {
    background: #f1f3ff;
    border-radius: 14px;
    cursor: pointer;
}

.user-card:active {
    background: #dee2ff;
}

/* Dots PIN */
.pin-dots {
    display: flex;
    justify-content: center;
    gap: 12px;
}

.pin-dots span {
    width: 15px;
    height: 15px;
    border: 2px solid #444;
    border-radius: 50%;
}

.pin-dots .filled {
    background: #444;
}

/* Keypad spacing */
.pin-keypad .key:active {
    background: #e2e6ea;
}