.page-roles .permission-center,
.permission-editor-panel * { box-sizing: border-box; }

.page-roles .permission-center { display: grid; gap: 18px; min-width: 0; }
.permission-security-banner { display: flex; align-items: center; gap: 14px; min-width: 0; padding: 16px 18px; border: 1px solid #bfd4ff; border-radius: 14px; background: linear-gradient(100deg,#edf5ff,#f6f3ff); color: #123b77; }
.permission-security-banner > span { display: grid; place-items: center; flex: 0 0 42px; width: 42px; height: 42px; border-radius: 12px; background: #fff; color: #1262e8; box-shadow: 0 5px 16px rgba(18,98,232,.12); }
.permission-security-banner .ui-icon { width: 21px; height: 21px; }
.permission-security-banner div { min-width: 0; }
.permission-security-banner strong { display: block; font-size: 17px; }
.permission-security-banner p { margin: 4px 0 0; color: #536f98; font-size: 14px; line-height: 1.45; overflow-wrap: anywhere; }

.permission-users-panel,.permission-presets { min-width: 0; padding: 20px; }
.permission-users-table { width: 100%; max-width: 100%; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.permission-users-table table { width: 100%; min-width: 980px; table-layout: fixed; }
.permission-users-table th,.permission-users-table td { height: 58px; padding: 12px 13px; font-size: 14px; vertical-align: middle; overflow-wrap: anywhere; }
.permission-users-table th:nth-child(1),.permission-users-table td:nth-child(1){width:13%}
.permission-users-table th:nth-child(2),.permission-users-table td:nth-child(2){width:18%}
.permission-users-table th:nth-child(3),.permission-users-table td:nth-child(3){width:9%}
.permission-users-table th:nth-child(4),.permission-users-table td:nth-child(4){width:10%}
.permission-users-table th:nth-child(5),.permission-users-table td:nth-child(5){width:15%}
.permission-users-table th:nth-child(6),.permission-users-table td:nth-child(6){width:13%}
.permission-users-table th:nth-child(7),.permission-users-table td:nth-child(7){width:14%}
.permission-users-table th:nth-child(8),.permission-users-table td:nth-child(8){width:8%}
.permission-users-table td small { display: block; margin-top: 3px; color: var(--muted); font-size: 12px; line-height: 1.3; }
.permission-email { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.permission-mode { display: inline-flex; padding: 6px 9px; border-radius: 999px; background: #edf2f8; color: #53657c; font-size: 12px; font-weight: 700; white-space: nowrap; }
.permission-mode.custom { background: #eee9ff; color: #6544c4; }
.permission-manage { min-width: 0; padding: 8px 10px; }
.badge.role-admin { background: #e8f1ff; color: #075ed8; }
.badge.role-staff { background: #e7f8ef; color: #078245; }
.badge.role-viewer { background: #f0ebff; color: #6844c6; }

.role-summary-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.role-summary-grid article { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
.role-summary-grid article div { min-width: 0; }
.role-summary-grid strong,.role-summary-grid small { display: block; }
.role-summary-grid strong { font-size: 16px; }
.role-summary-grid small { margin-top: 3px; color: var(--muted); font-size: 13px; line-height: 1.4; overflow-wrap: anywhere; }
.role-summary-mark { display: grid; place-items: center; flex: 0 0 38px; width: 38px; height: 38px; border-radius: 11px; background: #e8f1ff; color: #075ed8; font-weight: 800; }
.role-summary-mark.staff { background: #e7f8ef; color: #078245; }
.role-summary-mark.viewer { background: #f0ebff; color: #6844c6; }

.permission-editor-panel { width: min(1040px,calc(100vw - 28px)); max-height: calc(100vh - 28px); overflow: hidden; }
.permission-editor-panel .utility-body { min-width: 0; padding: 0; overflow: auto; }
.permission-editor-form { min-width: 0; }
.permission-editor-tabs { position: sticky; top: 0; z-index: 3; display: flex; gap: 4px; min-width: 0; padding: 10px 18px; border-bottom: 1px solid var(--line); background: var(--card); overflow-x: auto; }
.permission-editor-tabs button { flex: 0 0 auto; padding: 10px 12px; border: 0; border-radius: 9px; background: transparent; color: var(--muted); font: 700 13px Inter,sans-serif; cursor: pointer; white-space: nowrap; }
.permission-editor-tabs button.active { background: var(--blue-soft); color: var(--blue); }
.permission-tab-panel { display: none; min-width: 0; padding: 22px; }
.permission-tab-panel.active { display: block; }
.permission-section-heading { margin-bottom: 16px; }
.permission-section-heading h3 { margin: 0; font-size: 20px; }
.permission-section-heading p { margin: 5px 0 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.permission-account-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 15px; }
.permission-account-grid label { display: grid; gap: 6px; min-width: 0; }
.permission-account-grid label > span { color: #344256; font-size: 14px; font-weight: 700; }
.permission-account-grid input,.permission-account-grid select,.group-picker-toolbar input { width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); color: var(--ink); font: 14px Inter,sans-serif; }
.permission-account-grid .full-field { grid-column: 1/-1; }

.scope-choice-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 12px; }
.scope-choice-grid > label { display: flex; align-items: flex-start; gap: 10px; min-width: 0; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; }
.scope-choice-grid input { flex: 0 0 auto; margin-top: 3px; accent-color: var(--blue); }
.scope-choice-grid span { min-width: 0; }
.scope-choice-grid strong,.scope-choice-grid small { display: block; }
.scope-choice-grid strong { font-size: 15px; }
.scope-choice-grid small { margin-top: 4px; color: var(--muted); font-size: 12px; line-height: 1.4; }
.group-picker { margin-top: 16px; padding: 15px; border: 1px solid var(--line); border-radius: 12px; background: #f8fbff; transition: opacity .15s ease; }
.group-picker.is-disabled { opacity: .46; pointer-events: none; }
.group-picker-toolbar { display: grid; grid-template-columns: minmax(180px,1fr) auto; gap: 12px; align-items: center; }
.group-picker-toolbar > div { display: flex; flex-wrap: wrap; gap: 7px; }
.group-selection-count { margin: 12px 0; color: var(--blue); font-size: 13px; font-weight: 800; }
.permission-group-grid { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; max-height: 250px; overflow: auto; }
.permission-group-option { display: flex; align-items: center; gap: 8px; min-width: 0; padding: 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--card); font-size: 13px; cursor: pointer; }
.permission-group-option input { flex: 0 0 auto; accent-color: var(--blue); }
.permission-group-option span { min-width: 0; overflow-wrap: anywhere; }

.permission-category { min-width: 0; margin-top: 17px; }
.permission-category:first-of-type { margin-top: 0; }
.permission-category h3 { margin: 0 0 8px; color: #50647f; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.permission-option-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 9px; }
.permission-option { display: flex; align-items: center; gap: 10px; min-width: 0; min-height: 58px; padding: 11px 12px; border: 1px solid var(--line); border-radius: 10px; background: var(--card); cursor: pointer; }
.permission-option > input { flex: 0 0 18px; width: 18px; height: 18px; accent-color: var(--blue); }
.permission-option > span { min-width: 0; }
.permission-option strong,.permission-option small { display: block; }
.permission-option strong { font-size: 14px; line-height: 1.35; overflow-wrap: anywhere; }
.permission-option small { margin-top: 3px; color: var(--muted); font-size: 11px; }
.permission-option.is-locked { background: #f4f8ff; cursor: default; }
.permission-admin-lock { display: flex; gap: 13px; align-items: flex-start; padding: 18px; border: 1px solid #bfd4ff; border-radius: 12px; background: #f2f7ff; color: #174b92; }
.permission-admin-lock .ui-icon { flex: 0 0 24px; width: 24px; height: 24px; }
.permission-admin-lock p { margin: 5px 0 0; color: #58739a; font-size: 13px; line-height: 1.5; }
.permission-empty { color: var(--muted); font-size: 14px; }

html[data-theme="dark"] .permission-security-banner { border-color: #294f7e; background: linear-gradient(100deg,#142d4a,#262143); color: #d9e9ff; }
html[data-theme="dark"] .permission-security-banner p,html[data-theme="dark"] .permission-admin-lock p { color: #9fb7d5; }
html[data-theme="dark"] .permission-security-banner > span,html[data-theme="dark"] .group-picker,html[data-theme="dark"] .permission-admin-lock { background: #14243a; border-color: #2c4666; }

@media(max-width:1024px){
  .permission-users-table table { min-width: 900px; }
  .role-summary-grid { grid-template-columns: 1fr; }
  .permission-group-grid { grid-template-columns: repeat(2,minmax(0,1fr)); }
}
@media(max-width:820px){
  .permission-users-panel,.permission-presets { padding: 15px; }
  .permission-users-table { overflow: visible; border: 0; }
  .permission-users-table table,.permission-users-table thead,.permission-users-table tbody,.permission-users-table tr,.permission-users-table td { display: block; width: 100%; min-width: 0; }
  .permission-users-table thead { display: none; }
  .permission-users-table tbody { display: grid; gap: 12px; }
  .permission-users-table tr { padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .permission-users-table td { display: grid; grid-template-columns: minmax(110px,.42fr) minmax(0,1fr); gap: 10px; height: auto; min-height: 38px; padding: 8px 0; border: 0; }
  .permission-users-table td::before { content: attr(data-label); color: var(--muted); font-size: 12px; font-weight: 700; }
  .permission-users-table td:last-child { display: block; }
  .permission-users-table td:last-child button { width: 100%; }
  .scope-choice-grid { grid-template-columns: 1fr; }
  .permission-editor-panel { width: min(100%,calc(100vw - 16px)); max-height: calc(100vh - 16px); }
}
@media(max-width:700px){
  .permission-security-banner { align-items: flex-start; padding: 14px; }
  .permission-tab-panel { padding: 17px 14px; }
  .permission-account-grid,.permission-option-grid,.permission-group-grid { grid-template-columns: 1fr; }
  .group-picker-toolbar { grid-template-columns: 1fr; }
  .group-picker-toolbar > div { display: grid; grid-template-columns: 1fr 1fr; }
}