.role-management-panel{
    max-width:900px;
    margin:0 auto;
}

.role-phone-search{
    display:grid;
    grid-template-columns:1fr auto;
    gap:10px;
}

.selected-role-user{
    padding:16px;
    border:1px solid #cfe1ef;
    border-radius:13px;
    background:#f2f8fc;
}

.selected-role-user span,
.selected-role-user small{
    display:block;
    color:#687689;
}

.selected-role-user strong{
    display:block;
    margin:4px 0;
    color:#063b68;
    font-size:1.12rem;
}

.assessor-offices{
    padding:16px;
    border:1px solid #dfe7ef;
    border-radius:14px;
}

.assessor-offices legend{
    padding:0 7px;
    color:#063b68;
    font-weight:800;
}

.office-check-grid{
    display:grid;
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:9px;
}

.role-confirm-modal{
    position:fixed;
    inset:0;
    z-index:12000;
    display:grid;
    place-items:center;
    padding:18px;
    background:rgba(3,20,35,.78);
    backdrop-filter:blur(4px);
}

.role-confirm-modal[hidden]{
    display:none;
}

.role-confirm-card{
    width:min(470px,100%);
    padding:28px;
    border-radius:19px;
    background:#fff;
    box-shadow:0 30px 80px rgba(0,0,0,.3);
    text-align:center;
}

.role-confirm-card h2{
    margin-top:0;
    color:#063b68;
}

.role-confirm-card>strong{
    display:block;
    margin:16px 0;
    color:#063b68;
    font-size:1.4rem;
}

@media(max-width:700px){
    .role-phone-search{
        grid-template-columns:1fr;
    }

    .office-check-grid{
        grid-template-columns:1fr;
    }
}


.role-category-groups{
    display:grid;
    gap:15px;
}

.role-category-group{
    padding:14px;
    border:1px solid #dfe7ef;
    border-radius:13px;
    background:#f8fbfd;
}

.role-category-group h3{
    margin:0 0 10px;
    color:#063b68;
    font-size:.96rem;
}