/* ================= 权限管理（账号管理 → 权限抽屉） ================= */
/* 为什么单独一个文件：这套样式只在权限抽屉里用，混进 app.css 会让那个 1500 行的文件更难找。 */

.perm-grid{display:grid;grid-template-columns:1fr auto;gap:2px 10px;align-items:center}
.perm-key{font-size:13px;color:var(--text);padding:5px 0;display:flex;align-items:center;gap:6px;min-width:0}
.perm-key .perm-group{font-size:10px;color:var(--muted);background:var(--bg);border:1px solid var(--line);border-radius:4px;padding:0 5px;line-height:15px;flex:none}
.perm-lv{display:flex;gap:3px;flex:none}
.perm-lv button{font-size:11.5px;line-height:1;padding:6px 9px;border:1px solid var(--line-strong);background:#fff;color:var(--text-2);border-radius:7px;cursor:pointer;transition:.12s;font-family:inherit}
.perm-lv button:hover{border-color:#cfcde0;background:#fcfcff}
.perm-lv button.on{background:var(--accent);border-color:var(--accent);color:#fff}
.perm-lv button.on[data-lv="none"]{background:#efeff5;border-color:#e2e1ec;color:var(--muted)}
.perm-lv button.on[data-lv="view"]{background:var(--amber);border-color:var(--amber);color:#fff}

/* 只读账号：顶栏角色后面挂个小角标，让人一眼知道自己在什么权限下操作 */
.role-lock{font-style:normal;margin-left:5px;font-size:10px;padding:1px 5px;border-radius:4px;background:var(--amber-soft);color:var(--amber);border:1px solid #f0dfc2}

@media (max-width:560px){
  .perm-grid{grid-template-columns:1fr}
  .perm-key{padding-bottom:0}
  .perm-lv{padding-bottom:6px}
}