.role-intro{display:flex;align-items:center;gap:18px;margin:0 0 18px;padding:16px 20px;border:1px solid #cfe1df;border-left:4px solid #138c88;border-radius:13px;background:linear-gradient(105deg,#f1faf7,#fff);box-shadow:0 8px 24px rgba(8,67,72,.04)}
.role-intro .eyebrow{flex:none;color:#0c777b;font-size:10px}
.role-intro p{flex:1;margin:0;color:#4f7178;font-size:12px;line-height:1.5}
.role-intro strong{flex:none;color:#1e5260;font-size:11px;white-space:nowrap}
.role-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(235px,1fr));gap:14px}
.role-card{display:flex;flex-direction:column;min-height:232px;padding:20px;border:1px solid #d4e4e2;border-radius:17px;background:#fff;box-shadow:0 11px 27px rgba(7,48,60,.055);transition:transform .16s ease,box-shadow .16s ease,border-color .16s ease}
.role-card:hover{transform:translateY(-2px);border-color:#8dc9c2;box-shadow:0 16px 33px rgba(7,48,60,.1)}
.role-card-top{display:flex;align-items:center;justify-content:space-between}
.role-mark{display:grid;place-items:center;width:34px;height:34px;border-radius:11px;background:#e1f3ef;color:#087a7b;font-size:18px}
.role-card h3{margin:16px 0 2px;color:#173d4a;font:700 20px/1.2 Georgia,serif}
.role-card code{color:#0c7880;font-size:10px}
.role-card p{margin:12px 0 16px;color:#66848a;font-size:11px;line-height:1.5}
.role-card-meta{display:flex;gap:12px;margin-top:auto;padding:12px 0;border-top:1px solid #e4eeeb;color:#466f77;font-size:11px;font-weight:700}
.role-card-actions{display:flex;gap:8px;align-items:center;min-height:32px}
.role-editor{display:flex;flex-direction:column;width:min(1000px,calc(100vw - 32px));max-height:min(860px,calc(100dvh - 28px));overflow:hidden}
.role-editor .modal-body{overflow:auto;overscroll-behavior:contain;padding:22px 25px}
.role-editor-fields{display:grid;grid-template-columns:1fr 1fr;gap:0 16px}
.role-editor-fields .field{display:grid;gap:6px;margin-bottom:15px}
.role-editor-fields .field>span{color:#315969;font-size:11px;font-weight:800}
.role-editor-fields .role-description{grid-column:1/-1}
.role-editor-fields input[readonly]{background:#eef4f3;color:#657f83}
.role-editor-heading{display:flex;align-items:end;justify-content:space-between;gap:15px;padding:14px 0 12px;border-top:1px solid #dfeae7}
.role-editor-heading h4{margin:4px 0 0;color:#1a4551;font:700 21px/1.2 Georgia,serif}
.role-editor-heading>span{color:#6b868c;font-size:11px}
.permission-groups{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.permission-group{display:grid;align-content:start;gap:2px;min-width:0;margin:0;padding:12px;border:1px solid #dbeae7;border-radius:13px;background:#f8fbfa}
.permission-group legend{padding:0 5px;color:#0b6f79;font-size:10px;font-weight:900;letter-spacing:.09em;text-transform:uppercase}
.permission-option{display:flex;align-items:flex-start;gap:9px;padding:8px;border-radius:8px;cursor:pointer;transition:background .15s ease}
.permission-option:hover{background:#e9f5f2}
.permission-option input{flex:none;width:16px;height:16px;margin:2px 0 0;accent-color:#078d89}
.permission-option span{display:grid;gap:2px;min-width:0}
.permission-option strong{color:#31545c;font-size:11px;line-height:1.3}
.permission-option small{color:#789196;font:10px ui-monospace,Consolas,monospace;overflow-wrap:anywhere}
.role-dependency-note{margin:12px 0 0;color:#607d83;font-size:11px;line-height:1.5}
.role-active{display:flex;align-items:center;gap:8px;margin:16px 0;color:#345a62;font-size:12px;font-weight:800}
.role-active input{accent-color:#078d89}
.role-active small{color:#8b6e48;font-size:11px;font-weight:500}
.role-editor :is(button,input,textarea):focus-visible,.role-card button:focus-visible{outline:3px solid rgba(19,164,155,.3);outline-offset:2px}
@media(max-width:700px){.role-intro{align-items:flex-start;flex-direction:column;gap:8px}.role-intro strong{white-space:normal}.role-editor-fields,.permission-groups{grid-template-columns:1fr}.role-editor-heading{align-items:flex-start;flex-direction:column}.role-editor .modal-body{padding:17px}}