body {

    margin:0;

    font-family:
    "Microsoft YaHei",
    Arial;

    background:
    linear-gradient(
        135deg,
        #eef5ff,
        #ffffff
    );

    color:#333;

}


.header {

    padding:30px 50px;

    display:flex;

    justify-content:space-between;

    align-items:center;

}


.title {

    font-size:28px;

    font-weight:bold;

}


.back {

    text-decoration:none;

    color:#1565c0;

}



.container {

    margin:20px 50px;

    background:white;

    border-radius:18px;

    padding:30px;

    box-shadow:
    0 10px 30px rgba(0,0,0,.12);

}



.toolbar {

    margin-bottom:20px;

}


button {

    border:none;

    border-radius:8px;

    padding:10px 18px;

    cursor:pointer;

}


.primary {

    background:#1565c0;

    color:white;

}



table {

    width:100%;

    border-collapse:collapse;

}


th {

    background:#f3f7ff;

}



th,td {

    padding:12px;

    border-bottom:1px solid #eee;

    text-align:center;

}



.badge {

    padding:4px 10px;

    border-radius:20px;

    font-size:12px;

}


.active {

    background:#d8f5d0;

    color:#287a1d;

}


.disabled {

    background:#ffdede;

    color:#b00000;

}



.modal {

    display:none;

    position:fixed;

    top:0;

    left:0;

    right:0;

    bottom:0;

    background:
    rgba(0,0,0,.35);

    justify-content:center;

    align-items:center;

}



.modal-box {

    width:420px;

    background:white;

    border-radius:16px;

    padding:30px;

}



input,select {

    width:100%;

    padding:10px;

    margin:8px 0 15px;

    box-sizing:border-box;

}



.role-box {

    display:grid;

    grid-template-columns:
    1fr 1fr;

    gap:8px;

}