.roles-rights-layout{
  display:grid;
  grid-template-columns:330px minmax(0,1fr);
  gap:14px;
  margin-top:16px;
}

.roles-create-panel{
  margin-top:0;
  align-self:start;
  position:sticky;
  top:20px;
}

.roles-create-panel hr{
  margin:24px 0;
  border:0;
  border-top:1px solid var(--line);
}

.roles-list{
  display:grid;
  gap:14px;
}

.role-editor{
  margin-top:0;
}

.role-editor>header{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:16px;
}

.role-editor h2,
.role-editor span{
  display:block;
  margin:0;
}

.role-editor span{
  color:var(--muted);
}

.role-color{
  width:42px;
  height:42px;
  border-radius:12px;
  box-shadow:0 0 18px rgba(0,234,212,.15);
}

.role-fields{
  margin-bottom:18px;
}

.permission-matrix{
  display:grid;
  gap:12px;
}

.permission-matrix h3{
  margin:0;
}

.permission-checkboxes{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:8px;
}

.permission-checkboxes label{
  display:flex;
  align-items:flex-start;
  gap:9px;
  padding:10px;
  border:1px solid var(--line);
  border-radius:9px;
  background:#06151f;
  cursor:pointer;
}

.permission-checkboxes input{
  margin-top:3px;
}

.permission-checkboxes strong,
.permission-checkboxes small{
  display:block;
}

.permission-checkboxes small{
  color:var(--muted);
}

.danger-button{
  margin-top:12px;
  padding:9px 12px;
  border:1px solid rgba(255,95,120,.4);
  border-radius:9px;
  background:rgba(255,95,120,.08);
  color:#ff8297;
  cursor:pointer;
}

.permission-editor-section{
  margin-top:16px;
}

.permission-editor-grid{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:12px;
}

.permission-editor{
  padding:14px;
  border:1px solid var(--line);
  border-radius:11px;
  background:#06151f;
}

@media(max-width:1050px){
  .roles-rights-layout{
    grid-template-columns:1fr;
  }

  .roles-create-panel{
    position:static;
  }
}

@media(max-width:760px){
  .permission-checkboxes,
  .permission-editor-grid{
    grid-template-columns:1fr;
  }
}