.permission-app{max-width:1280px;margin:auto}.permission-heading{display:flex;align-items:center;justify-content:space-between;gap:20px;margin-bottom:24px}.permission-heading h1,.permission-heading h2{margin:0 0 8px}.permission-heading p{margin:0;color:var(--muted,#697b75)}.permission-tabs{display:flex;gap:20px;border-bottom:1px solid var(--line,#e1e8e4);margin:16px 0 24px;overflow:auto}.permission-tabs button{font:inherit;font-weight:600;padding:14px 8px;white-space:nowrap;background:none;border:0;border-bottom:3px solid transparent;color:inherit;cursor:pointer}.permission-tabs [aria-selected=true]{border-bottom-color:#158064;color:#158064}.permission-basic{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 30px;padding:0 0 24px}.permission-basic h3{grid-column:1/-1;margin:0}.permission-basic .hub-field{margin:0}.permission-basic small{font-weight:400;line-height:1.6}.permission-basic textarea,.permission-scope textarea{font:inherit;resize:vertical;padding:12px;border:1px solid #d9e2dd;border-radius:8px;color:inherit;background:transparent}.permission-tree{display:grid;grid-template-columns:220px 1fr;gap:20px;border:1px solid var(--line,#e1e8e4);border-radius:10px;padding:12px}.permission-tree aside{background:var(--bg,#f4f7f5);border-radius:8px;padding:8px}.permission-tree aside button{width:100%;text-align:left;border:0;background:transparent;font:inherit;cursor:pointer;display:block;color:inherit;text-decoration:none;padding:16px 12px;border-radius:6px}.permission-tree aside button:hover{background:#e4eee9}.permission-tree small,.permission-tree aside small{display:block;color:#72827a;font-size:12px;margin-top:5px}.permission-tree details{border-bottom:1px solid var(--line,#e1e8e4);padding:12px 8px}.permission-tree summary{cursor:pointer;display:flex;align-items:center;justify-content:space-between;font-weight:600;gap:16px}.permission-tree summary label{display:flex;align-items:center;gap:12px;cursor:pointer}.permission-items{padding:14px 0 0 28px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.permission-leaf{display:flex;align-items:flex-start;gap:12px;padding:12px;background:var(--bg,#f5f8f6);border-radius:7px;font-size:14px;cursor:pointer}.permission-app input[type=checkbox]{width:17px;height:17px;accent-color:#137d5d;flex-shrink:0}.permission-app [hidden]{display:none!important}.permission-app .card{margin-bottom:24px;padding:26px}.permission-pill{display:inline-block;padding:4px 8px;background:#edf4ef;color:#266449;border-radius:5px;font-size:12px;margin:3px}.permission-scope{border:1px solid var(--line,#e1e8e4);border-radius:8px;margin:16px 0;padding:18px}.permission-scope legend{font-weight:600}.permission-search{max-width:520px}.permission-directory .hub-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap}.permission-app .role-confirm{padding:22px;margin-top:20px;border:1px solid #a5cbbc;background:var(--bg,#f1f7f3);border-radius:8px}.permission-app table td small{display:block;margin-top:5px;color:#718078}.permission-app h3{font-size:16px}.permission-app button:disabled{opacity:.45;cursor:default}@media(max-width:750px){.permission-heading{align-items:flex-start;flex-direction:column}.permission-basic{grid-template-columns:1fr}.permission-tree{grid-template-columns:1fr}.permission-tree aside{display:none}.permission-items{grid-template-columns:1fr;padding-left:8px}.permission-app .card{padding:16px}.permission-tabs{gap:8px}}

/* Keep secondary information readable and keyboard focus visible in both themes. */
.permission-app {
  line-height: 1.55;
}
.permission-app .permission-leaf {
  font-size: 1rem;
  overflow-wrap: anywhere;
}
.permission-app .permission-tree small,
.permission-app table td small {
  color: var(--muted, #52645b);
  font-size: .875rem;
}
.permission-app .permission-tabs button,
.permission-app .hub-actions button {
  min-height: 44px;
}
.permission-app .permission-tree aside button:hover {
  background: var(--soft, #e4eee9);
}
.permission-app :is(button, input, select, textarea, summary):focus-visible,
.permission-app .role-confirm:focus-visible {
  outline: 2px solid var(--green, #137d5d);
  outline-offset: 3px;
}
.permission-app .permission-directory .table-wrap {
  overflow-x: auto;
}
@media (max-width: 750px) {
  .permission-app .permission-directory .hub-row {
    align-items: stretch;
    gap: 12px;
  }
  .permission-app .permission-directory .hub-row > * {
    max-width: 100%;
  }
}