/* Wrapper unchanged */
.sp-wrapper {
    min-height: 38vh;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Card */
.sp-box {
    position: relative;
    background: #fff;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 40px 30px 30px;
    width: 100%;
    max-width: 360px;
    text-align: center;
    box-shadow: 0 5px 15px rgba(0,0,0,.08);
}

/* Icon container */
.sp-icon {
    position: absolute;
    top: -28px;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    border-radius: 50%;
    padding: 10px;
    border: 1px solid #ddd;
}

/* 🔒 Lock icon color */
.sp-icon .icon-lock {
    font-size: 32px;
    color: var(--primary-color, var(--cassiopeia-color-primary, #0d6efd));
}

/* Title */
.sp-title {
    margin-top: 20px;
    margin-bottom: 15px;
    font-size: 20px;
    font-weight: 600;
}

/* Input */
.sp-form input {
    height: 44px;
    font-size: 15px;
}

/* 🔘 Button color override (scoped, safe) */
.sp-box .btn-primary {
    background-color: var(--primary-color, var(--cassiopeia-color-primary, #0d6efd));
    border-color: var(--primary-color, var(--cassiopeia-color-primary, #0d6efd));
}

.sp-box .btn-primary:hover,
.sp-box .btn-primary:focus {
    filter: brightness(0.92);
}