/* 班组履职评价系统 V1.7.0 */

.permission-ledger-page {
  --permission-blue: #0b68b5;
  --permission-blue-deep: #07578f;
  --permission-blue-soft: #edf7ff;
  --permission-teal: #14877c;
  --permission-teal-soft: #eaf8f5;
  --permission-ink: #172b43;
  --permission-muted: #718196;
  --permission-line: #dbe6ef;
  --permission-panel: #f6f9fc;
  --permission-warning: #9b6516;
  --permission-warning-soft: #fff7e7;
  --permission-danger: #ad4853;
  --permission-danger-soft: #fff1f2;
  --permission-shadow: 0 14px 34px rgba(16, 57, 91, .1);
  min-width: 0;
}

.permission-ledger-page,
.permission-ledger-page *,
.permission-detail-drawer,
.permission-detail-drawer *,
.permission-filter-panel,
.permission-filter-panel * {
  box-sizing: border-box;
}

.permission-ledger-page > *,
.permission-page-actions,
.permission-step,
.permission-step-head,
.permission-step-title,
.permission-org-card-main,
.permission-org-card-copy,
.permission-user-head,
.permission-user-identity,
.permission-detail-head,
.permission-detail-identity,
.permission-group,
.permission-group-head,
.permission-option,
.permission-option-copy,
.permission-history-item,
.permission-history-head {
  min-width: 0;
}

.permission-page-actions {
  display: flex;
  flex: 0 0 auto;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 9px;
}

.permission-page-actions .btn,
.permission-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  white-space: nowrap;
}

.permission-filter-trigger {
  position: relative;
}

.permission-filter-count {
  min-width: 20px;
  height: 20px;
  display: inline-grid;
  place-items: center;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--permission-blue, #0b68b5);
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  line-height: 1;
}

.permission-filter-count:empty,
.permission-filter-count[data-count="0"] {
  display: none;
}

.permission-path {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 7px;
  overflow-x: auto;
  padding: 11px 14px;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 11px;
  background: #fff;
  color: var(--permission-muted, #718196);
  font-size: 12px;
  scrollbar-width: thin;
}

.permission-path > * {
  flex: 0 0 auto;
}

.permission-path button,
.permission-path a {
  min-height: 30px;
  display: inline-flex;
  align-items: center;
  padding: 0 9px;
  border: 0;
  border-radius: 7px;
  background: transparent;
  color: var(--permission-blue, #0b68b5);
  font: inherit;
  font-weight: 700;
  text-decoration: none;
}

.permission-path button:hover,
.permission-path a:hover {
  background: var(--permission-blue-soft, #edf7ff);
}

.permission-path button:focus-visible,
.permission-path a:focus-visible {
  outline: 3px solid rgba(11, 104, 181, .2);
  outline-offset: 1px;
}

.permission-path-separator {
  color: #a6b1bd;
  user-select: none;
}

.permission-path-current {
  color: var(--permission-ink, #172b43);
  font-weight: 800;
}

.permission-path > strong {
  color: var(--permission-ink, #172b43);
  font-size: 12px;
  font-weight: 800;
}

.permission-path > .ui-icon {
  width: 15px;
  height: 15px;
  color: #9aa8b6;
}

.permission-step {
  padding: 20px;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 5px 18px rgba(23, 54, 80, .04);
}

.permission-step-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 16px;
}

.permission-step-title {
  display: grid;
  grid-template-columns: 34px minmax(0, 1fr);
  align-items: center;
  gap: 11px;
}

.permission-step-number {
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: 10px;
  background: linear-gradient(145deg, var(--permission-blue-deep, #07578f), #1787c8);
  color: #fff;
  font-size: 13px;
  font-weight: 900;
  box-shadow: 0 7px 16px rgba(11, 104, 181, .17);
}

.permission-step-title h3,
.permission-step-title strong {
  display: block;
  margin: 0;
  color: var(--permission-ink, #172b43);
  font-size: 16px;
  line-height: 1.4;
}

.permission-step-note {
  display: block;
  margin-top: 3px;
  color: var(--permission-muted, #718196);
  font-size: 11px;
  line-height: 1.6;
}

.permission-unit-grid,
.permission-workshop-grid,
.permission-user-grid {
  display: grid;
  align-items: stretch;
  gap: 12px;
}

.permission-unit-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.permission-workshop-grid,
.permission-user-grid {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.permission-org-card,
.permission-user-card {
  position: relative;
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 12px;
  background: #fff;
  color: var(--permission-ink, #172b43);
  font: inherit;
  text-align: left;
  transition: border-color .16s ease, box-shadow .16s ease, transform .16s ease, background-color .16s ease;
}

.permission-org-card {
  min-height: 96px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px;
}

.permission-user-card {
  min-height: 142px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 15px;
}

.permission-org-card:not(:disabled),
.permission-user-card:not(:disabled) {
  cursor: pointer;
}

.permission-org-card:hover:not(:disabled),
.permission-user-card:hover:not(:disabled) {
  z-index: 1;
  border-color: #9dc6df;
  background: #fbfdff;
  box-shadow: var(--permission-shadow, 0 14px 34px rgba(16, 57, 91, .1));
  transform: translateY(-2px);
}

.permission-org-card:focus-visible,
.permission-user-card:focus-visible {
  z-index: 2;
  border-color: var(--permission-blue, #0b68b5);
  outline: 3px solid rgba(11, 104, 181, .2);
  outline-offset: 2px;
}

.permission-org-card.is-selected,
.permission-user-card.is-selected,
.permission-org-card[aria-selected="true"],
.permission-user-card[aria-selected="true"] {
  border-color: var(--permission-blue, #0b68b5);
  background: linear-gradient(145deg, var(--permission-blue-soft, #edf7ff), #fff 78%);
  box-shadow: 0 0 0 2px rgba(11, 104, 181, .11), 0 12px 28px rgba(16, 72, 111, .09);
}

.permission-org-card.is-selected::after,
.permission-user-card.is-selected::after,
.permission-org-card[aria-selected="true"]::after,
.permission-user-card[aria-selected="true"]::after {
  content: "✓";
  position: absolute;
  top: 9px;
  right: 9px;
  width: 21px;
  height: 21px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--permission-blue, #0b68b5);
  color: #fff;
  font-size: 12px;
  font-weight: 900;
}

.permission-org-card:disabled,
.permission-user-card:disabled,
.permission-org-card[aria-disabled="true"],
.permission-user-card[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: .58;
}

.permission-org-card-main {
  display: flex;
  align-items: center;
  gap: 12px;
}

.permission-org-card-icon {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 12px;
  background: #e8f4fb;
  color: var(--permission-blue, #0b68b5);
}

.permission-org-card-icon .ui-icon {
  width: 21px;
  height: 21px;
}

.permission-org-card-copy strong,
.permission-org-card-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.permission-org-card-copy strong {
  color: var(--permission-ink, #172b43);
  font-size: 14px;
  line-height: 1.45;
}

.permission-org-card-copy small {
  margin-top: 4px;
  color: var(--permission-muted, #718196);
  font-size: 11px;
  line-height: 1.55;
}

.permission-org-card-metric {
  flex: 0 0 auto;
  padding-right: 4px;
  color: var(--permission-blue-deep, #07578f);
  font-size: 19px;
  font-weight: 900;
  white-space: nowrap;
}

.permission-org-card-metric small {
  margin-left: 2px;
  color: var(--permission-muted, #718196);
  font-size: 10px;
  font-weight: 500;
}

.permission-org-card.is-no-workshop {
  border-style: dashed;
  background: #f8fafc;
}

.permission-org-card.is-no-workshop .permission-org-card-icon {
  background: #edf0f3;
  color: #647487;
}

.permission-user-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 11px;
  padding-right: 22px;
}

.permission-user-identity {
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 11px;
}

.permission-user-chevron {
  display: grid;
  flex: 0 0 22px;
  place-items: center;
  color: #8291a1;
}

.permission-user-chevron .ui-icon {
  width: 17px;
  height: 17px;
}

.permission-user-avatar {
  width: 42px;
  height: 42px;
  display: grid;
  flex: 0 0 42px;
  place-items: center;
  border-radius: 50%;
  background: linear-gradient(145deg, #e4f3fb, #f2f9fd);
  color: var(--permission-blue-deep, #07578f);
  font-size: 14px;
  font-weight: 900;
}

.permission-user-identity strong,
.permission-user-identity small {
  display: block;
  overflow-wrap: anywhere;
}

.permission-user-identity strong {
  color: var(--permission-ink, #172b43);
  font-size: 14px;
  line-height: 1.45;
}

.permission-user-identity small {
  margin-top: 3px;
  color: var(--permission-muted, #718196);
  font-size: 10px;
  line-height: 1.5;
}

.permission-user-meta {
  display: grid;
  gap: 5px;
  color: #596c82;
  font-size: 11px;
  line-height: 1.5;
}

.permission-user-meta span {
  display: flex;
  min-width: 0;
  align-items: flex-start;
  gap: 6px;
  overflow-wrap: anywhere;
}

.permission-user-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: auto;
}

.permission-tag {
  min-height: 23px;
  display: inline-flex;
  align-items: center;
  padding: 2px 8px;
  border-radius: 999px;
  background: #eaf4fa;
  color: var(--permission-blue-deep, #07578f);
  font-size: 10px;
  font-weight: 700;
  line-height: 1.35;
}

.permission-tag.global {
  background: var(--permission-warning-soft, #fff7e7);
  color: var(--permission-warning, #9b6516);
}

.permission-tag.review {
  background: var(--permission-teal-soft, #eaf8f5);
  color: var(--permission-teal, #14877c);
}

.permission-tag.inactive {
  background: #eef1f4;
  color: #778391;
}

.permission-detail-drawer {
  width: min(720px, 100%);
  padding: 0 22px 22px;
  overflow-x: hidden;
  color: var(--permission-ink, #172b43);
  overscroll-behavior: contain;
}

.permission-detail-drawer > * {
  min-width: 0;
}

.permission-detail-head {
  position: relative;
  z-index: 5;
  top: auto;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 15px;
  margin: 0 -22px;
  padding: 20px 22px 16px;
  border-bottom: 1px solid #e6edf3;
  background: rgba(255, 255, 255, .97);
  backdrop-filter: blur(12px);
}

.permission-detail-identity {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.permission-detail-head > div,
.permission-detail-identity > div {
  min-width: 0;
  flex: 1 1 160px;
}

.permission-detail-identity > .pill {
  flex: 0 0 auto;
}

.permission-detail-identity .permission-user-avatar {
  width: 48px;
  height: 48px;
  flex-basis: 48px;
  font-size: 16px;
}

.permission-detail-identity h3,
.permission-detail-identity p {
  margin: 0;
  overflow-wrap: anywhere;
}

.permission-detail-identity h3 {
  color: var(--permission-ink, #172b43);
  font-size: 18px;
  line-height: 1.4;
}

.permission-detail-identity p {
  margin-top: 4px;
  color: var(--permission-muted, #718196);
  font-size: 11px;
  line-height: 1.55;
}

.permission-detail-head .close {
  flex: 0 0 auto;
}

.permission-detail-meta {
  display: block;
  margin: 16px 0;
  padding: 13px 14px;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 10px;
  background: var(--permission-panel, #f6f9fc);
  color: #5e7085;
  font-size: 11px;
  line-height: 1.55;
}

.permission-detail-meta span {
  min-width: 0;
  overflow-wrap: anywhere;
}

.permission-detail-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  margin: 16px 0;
}

.permission-detail-stat {
  min-width: 0;
  padding: 13px;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 10px;
  background: #fff;
}

.permission-detail-stats > span {
  min-width: 0;
  display: block;
  padding: 13px;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 10px;
  background: #fff;
}

.permission-detail-stat span,
.permission-detail-stat strong,
.permission-detail-stat small,
.permission-detail-stats > span > small,
.permission-detail-stats > span > b {
  display: block;
}

.permission-detail-stat span,
.permission-detail-stats > span > small {
  color: var(--permission-muted, #718196);
  font-size: 10px;
  line-height: 1.45;
}

.permission-detail-stat strong,
.permission-detail-stats > span > b {
  margin-top: 5px;
  color: var(--permission-blue-deep, #07578f);
  font-size: 21px;
  font-weight: 900;
  line-height: 1.2;
}

.permission-detail-stat small {
  margin-top: 3px;
  color: #8b98a6;
  font-size: 9px;
  line-height: 1.45;
}

.permission-detail-tabs {
  position: sticky;
  z-index: 4;
  top: 0;
  display: flex;
  gap: 7px;
  overflow-x: auto;
  margin: 0 -22px 16px;
  padding: 10px 22px;
  border-top: 1px solid #eef2f5;
  border-bottom: 1px solid #e3ebf2;
  background: rgba(255, 255, 255, .97);
  scrollbar-width: thin;
  backdrop-filter: blur(12px);
}

.permission-detail-tab {
  min-height: 38px;
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 9px;
  background: #fff;
  color: #5d7087;
  font: inherit;
  font-size: 12px;
  font-weight: 700;
  white-space: nowrap;
}

.permission-detail-tab:hover {
  border-color: #a9c9dd;
  background: #f7fbfe;
  color: var(--permission-blue, #0b68b5);
}

.permission-detail-tab:focus-visible {
  outline: 3px solid rgba(11, 104, 181, .2);
  outline-offset: 1px;
}

.permission-detail-tab.active,
.permission-detail-tab[aria-selected="true"] {
  border-color: var(--permission-blue, #0b68b5);
  background: var(--permission-blue-soft, #edf7ff);
  color: var(--permission-blue-deep, #07578f);
}

.permission-detail-panel {
  display: grid;
  gap: 13px;
  padding-bottom: 4px;
}

.permission-detail-panel[hidden] {
  display: none;
}

.permission-group {
  overflow: hidden;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 12px;
  background: #fff;
}

.permission-group-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 15px;
  border-bottom: 1px solid #e8eef3;
  background: linear-gradient(135deg, #f5f9fc, #fff);
}

.permission-group-head h4,
.permission-group-head strong {
  margin: 0;
  color: var(--permission-ink, #172b43);
  font-size: 13px;
  line-height: 1.45;
}

.permission-group-head > span {
  flex: 0 0 auto;
  padding: 3px 8px;
  border-radius: 999px;
  background: #e9f3f9;
  color: var(--permission-blue-deep, #07578f);
  font-size: 9px;
  font-weight: 700;
  line-height: 1.45;
  white-space: nowrap;
}

.permission-group-note {
  display: block;
  margin-top: 4px;
  color: var(--permission-muted, #718196);
  font-size: 10px;
  line-height: 1.55;
  overflow-wrap: anywhere;
}

.permission-group > .permission-group-note {
  margin: 0;
  padding: 10px 15px;
  border-bottom: 1px solid #e8eef3;
  background: #f7f9fb;
}

.permission-group > .permission-group-note.success {
  background: var(--permission-teal-soft, #eaf8f5);
  color: var(--permission-teal, #14877c);
}

.permission-group-list {
  display: grid;
}

.permission-option {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 16px;
  min-height: 68px;
  padding: 12px 15px;
  border-top: 1px solid #edf2f5;
  background: #fff;
}

.permission-group-list .permission-option:first-child {
  border-top: 0;
}

.permission-option:hover:not(.is-inapplicable):not(.is-locked) {
  background: #fbfdff;
}

.permission-option-copy strong,
.permission-option-copy small {
  display: block;
  overflow-wrap: anywhere;
}

.permission-option-copy strong {
  color: var(--permission-ink, #172b43);
  font-size: 12px;
  line-height: 1.5;
}

.permission-option-copy small {
  margin-top: 3px;
  color: var(--permission-muted, #718196);
  font-size: 10px;
  line-height: 1.55;
}

.permission-option-source {
  min-height: 21px;
  display: inline-flex;
  align-items: center;
  margin-top: 6px;
  padding: 2px 7px;
  border-radius: 999px;
  background: #eef4f8;
  color: #63768b;
  font-size: 9px;
  font-style: normal;
  font-weight: 700;
  line-height: 1.35;
}

.permission-option.is-inapplicable {
  border-color: #e3e7eb;
  background: #f1f3f5;
  color: #8a939d;
}

.permission-option.is-inapplicable .permission-option-copy strong,
.permission-option.is-inapplicable .permission-option-copy small,
.permission-option.is-inapplicable .permission-option-source {
  color: #8a939d;
}

.permission-option.is-inapplicable .permission-option-source {
  background: #e3e6e9;
}

.permission-option.is-locked {
  background: var(--permission-warning-soft, #fff7e7);
}

.permission-option.is-locked.is-inapplicable {
  border-color: #e3e7eb;
  background: #f1f3f5;
  color: #8a939d;
}

.permission-switch:not(input) {
  position: relative;
  width: 46px;
  min-width: 46px;
  min-height: 44px;
  height: 44px;
  display: inline-flex;
  flex: 0 0 46px;
  align-items: center;
  justify-content: center;
}

.permission-switch input[type="checkbox"],
.permission-switch[type="checkbox"] {
  position: relative;
  width: 46px;
  min-width: 46px;
  height: 26px;
  flex: 0 0 46px;
  margin: 0;
  border: 1px solid #aebbc7;
  border-radius: 999px;
  appearance: none;
  background: #c7d0d8;
  cursor: pointer;
  outline: none;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.permission-switch input[type="checkbox"]::before,
.permission-switch[type="checkbox"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(27, 46, 63, .2);
  transition: transform .16s ease;
}

.permission-switch input[type="checkbox"]:checked,
.permission-switch[type="checkbox"]:checked {
  border-color: var(--permission-blue, #0b68b5);
  background: var(--permission-blue, #0b68b5);
}

.permission-switch input[type="checkbox"]:checked::before,
.permission-switch[type="checkbox"]:checked::before {
  transform: translateX(20px);
}

.permission-switch input[type="checkbox"]:focus-visible,
.permission-switch[type="checkbox"]:focus-visible,
.permission-switch:focus-within {
  outline: 3px solid rgba(11, 104, 181, .2);
  outline-offset: 2px;
  border-radius: 999px;
}

.permission-switch input[type="checkbox"]:disabled,
.permission-switch[type="checkbox"]:disabled,
.permission-option.is-inapplicable .permission-switch input[type="checkbox"],
.permission-option.is-inapplicable .permission-switch[type="checkbox"] {
  border-color: #c9cfd5;
  background: #d8dde1;
  cursor: not-allowed;
  opacity: .85;
}

.permission-switch input[type="checkbox"]:disabled:checked,
.permission-switch[type="checkbox"]:disabled:checked,
.permission-option.is-inapplicable .permission-switch input[type="checkbox"]:checked,
.permission-option.is-inapplicable .permission-switch[type="checkbox"]:checked {
  border-color: #aeb6bd;
  background: #aeb6bd;
}

.permission-switch:not(input) > input[type="checkbox"] {
  position: absolute;
  z-index: 2;
  inset: 0;
  width: 100%;
  min-width: 100%;
  height: 100%;
  margin: 0;
  border: 0;
  background: transparent;
  opacity: 0;
}

.permission-switch:not(input) > input[type="checkbox"]::before {
  content: none;
}

.permission-switch:not(input) > span[aria-hidden="true"] {
  position: relative;
  width: 46px;
  height: 26px;
  display: block;
  border: 1px solid #aebbc7;
  border-radius: 999px;
  background: #c7d0d8;
  pointer-events: none;
  transition: border-color .16s ease, background-color .16s ease, box-shadow .16s ease;
}

.permission-switch:not(input) > span[aria-hidden="true"]::before {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 5px rgba(27, 46, 63, .2);
  transition: transform .16s ease;
}

.permission-switch:not(input) > input[type="checkbox"]:checked + span[aria-hidden="true"] {
  border-color: var(--permission-blue, #0b68b5);
  background: var(--permission-blue, #0b68b5);
}

.permission-switch:not(input) > input[type="checkbox"]:checked + span[aria-hidden="true"]::before {
  transform: translateX(20px);
}

.permission-switch:not(input) > input[type="checkbox"]:focus-visible + span[aria-hidden="true"] {
  box-shadow: 0 0 0 3px rgba(11, 104, 181, .2);
}

.permission-switch:not(input) > input[type="checkbox"]:disabled + span[aria-hidden="true"],
.permission-option.is-inapplicable .permission-switch:not(input) > span[aria-hidden="true"] {
  border-color: #c9cfd5;
  background: #d8dde1;
}

.permission-switch:not(input) > input[type="checkbox"]:disabled:checked + span[aria-hidden="true"],
.permission-option.is-inapplicable .permission-switch:not(input) > input[type="checkbox"]:checked + span[aria-hidden="true"] {
  border-color: #aeb6bd;
  background: #aeb6bd;
}

.permission-change-box {
  padding: 14px 15px;
  border: 1px solid #c9e2f1;
  border-radius: 11px;
  background: #f1f9fe;
}

.permission-change-box label {
  display: grid;
  gap: 7px;
  color: #52677e;
  font-size: 11px;
  font-weight: 700;
}

.permission-change-box textarea,
.permission-change-box input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid #ccdbe6;
  border-radius: 9px;
  background: #fff;
  color: var(--permission-ink, #172b43);
  outline: none;
}

.permission-change-box textarea {
  min-height: 82px;
  resize: vertical;
}

.permission-change-box textarea:focus,
.permission-change-box input:focus {
  border-color: var(--permission-blue, #0b68b5);
  box-shadow: 0 0 0 3px rgba(11, 104, 181, .12);
}

.permission-change-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
  margin-bottom: 10px;
  color: #536b82;
  font-size: 11px;
  line-height: 1.6;
}

.permission-change-summary strong {
  color: var(--permission-blue-deep, #07578f);
}

.permission-change-summary.has-change {
  color: var(--permission-blue-deep, #07578f);
  font-weight: 700;
}

.permission-detail-actions {
  position: sticky;
  z-index: 6;
  bottom: -22px;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 9px;
  margin: 16px -22px -22px;
  padding: 13px 22px 16px;
  border-top: 1px solid #dfe8ef;
  background: rgba(255, 255, 255, .97);
  box-shadow: 0 -10px 24px rgba(17, 54, 82, .08);
  backdrop-filter: blur(12px);
}

.permission-history-list {
  display: grid;
  gap: 10px;
}

.permission-history-item {
  padding: 13px 14px;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 10px;
  background: #fff;
}

.permission-history-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.permission-history-head strong {
  color: var(--permission-ink, #172b43);
  font-size: 12px;
  line-height: 1.5;
  overflow-wrap: anywhere;
}

.permission-history-head time,
.permission-history-head small {
  flex: 0 0 auto;
  color: #8492a1;
  font-size: 10px;
  line-height: 1.5;
  white-space: nowrap;
}

.permission-history-change {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 9px 0 0;
  color: #536a80;
  font-size: 10px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.permission-history-change span {
  min-height: 22px;
  display: inline-flex;
  align-items: center;
  padding: 2px 7px;
  border-radius: 999px;
  background: #edf7ff;
  color: var(--permission-blue-deep, #07578f);
  font-size: 9px;
  line-height: 1.35;
}

.permission-history-change .is-revoked {
  background: var(--permission-danger-soft, #fff1f2);
  color: var(--permission-danger, #ad4853);
}

.permission-history-reason {
  margin: 9px 0 0;
  padding: 9px 10px;
  border-radius: 7px;
  background: var(--permission-panel, #f6f9fc);
  color: #63758a;
  font-size: 10px;
  line-height: 1.65;
  overflow-wrap: anywhere;
}

.permission-history-more {
  margin: 2px 0 0;
  color: var(--permission-muted, #718196);
  font-size: 10px;
  line-height: 1.6;
  text-align: center;
}

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

.permission-export-option {
  min-width: 0;
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 12px;
  border: 1px solid var(--permission-line, #dbe6ef);
  border-radius: 9px;
  background: #fff;
  color: #53677d;
  font-size: 11px;
  line-height: 1.55;
}

.permission-export-option:hover {
  border-color: #a9c9dd;
  background: #f9fcfe;
}

.permission-export-option input {
  width: 17px;
  height: 17px;
  flex: 0 0 17px;
  margin: 1px 0 0;
  accent-color: var(--permission-blue, #0b68b5);
}

.permission-export-option > span,
.permission-export-option strong,
.permission-export-option small {
  min-width: 0;
  display: block;
  overflow-wrap: anywhere;
}

.permission-export-option strong {
  color: var(--permission-ink, #172b43);
}

.permission-export-option small {
  margin-top: 4px;
  color: var(--permission-muted, #718196);
}

.permission-filter-summary {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 7px;
}

.permission-filter-chip {
  min-height: 27px;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border: 1px solid #cce0ee;
  border-radius: 999px;
  background: #f4faff;
  color: #496981;
  font-size: 10px;
  line-height: 1.35;
}

.permission-filter-chip button,
.permission-filter-clear {
  min-width: 26px;
  min-height: 26px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--permission-blue, #0b68b5);
}

.permission-filter-chip button:hover,
.permission-filter-clear:hover {
  background: #e4f1f9;
}

.permission-filter-panel {
  position: fixed;
  z-index: 230;
  top: 50%;
  left: 50%;
  width: min(860px, calc(100vw - 40px));
  max-width: calc(100vw - 40px);
  max-height: min(82vh, 760px);
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  overflow-x: hidden;
  overflow-y: auto;
  margin: 0;
  padding: 0;
  border: 1px solid #dce6ee;
  border-radius: 16px;
  background: #fff;
  box-shadow: 0 24px 70px rgba(7, 35, 59, .25);
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transform: translate(-50%, calc(-50% + 12px));
  transition: transform .2s ease, opacity .18s ease, visibility .18s ease;
  overscroll-behavior: contain;
}

.permission-filter-panel.mobile-filter-open {
  visibility: visible;
  opacity: 1;
  pointer-events: auto;
  transform: translate(-50%, -50%);
}

.permission-filter-panel .mobile-filter-head {
  position: sticky;
  z-index: 3;
  top: 0;
  min-height: 72px;
  display: flex;
  grid-column: 1 / -1;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0;
  padding: 16px 20px 13px;
  border-bottom: 1px solid #e4ebf1;
  border-radius: 0;
  background: rgba(255, 255, 255, .98);
  box-shadow: none;
  backdrop-filter: blur(10px);
}

.permission-filter-panel .mobile-filter-head strong,
.permission-filter-panel .mobile-filter-head small {
  display: block;
  overflow-wrap: anywhere;
}

.permission-filter-panel .mobile-filter-head strong {
  color: var(--permission-ink, #172b43);
  font-size: 18px;
  line-height: 1.4;
}

.permission-filter-panel .mobile-filter-head small {
  margin-top: 3px;
  color: var(--permission-muted, #718196);
  font-size: 11px;
  line-height: 1.5;
}

.permission-filter-panel .mobile-filter-head button {
  width: 38px;
  min-width: 38px;
  height: 38px;
  display: grid;
  flex: 0 0 38px;
  place-items: center;
  padding: 0;
  border: 0;
  border-radius: 9px;
  background: #f0f4f7;
  color: #586c82;
}

.permission-filter-grid,
.permission-filter-panel .mobile-filter-body {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: end;
  gap: 13px;
  padding: 18px 20px;
  overflow: visible;
}

.permission-filter-wide {
  grid-column: span 2;
}

.permission-filter-checks {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-self: stretch;
  gap: 8px;
}

.permission-filter-checks label {
  min-height: 44px;
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr);
  align-items: center;
  gap: 8px;
  padding: 9px 11px;
  border: 1px solid #d4dfe8;
  border-radius: 9px;
  background: #f8fafc;
  color: #53677d;
  cursor: pointer;
}

.permission-filter-checks label:hover {
  border-color: #a9c9dd;
  background: #f4faff;
}

.permission-filter-checks input[type="checkbox"] {
  inline-size: 18px !important;
  width: 18px !important;
  min-inline-size: 18px !important;
  min-width: 18px !important;
  max-inline-size: 18px !important;
  max-width: 18px !important;
  height: 18px !important;
  min-height: 18px !important;
  margin: 0;
  padding: 0;
  accent-color: var(--permission-blue, #0b68b5);
}

.permission-filter-grid label,
.permission-filter-panel .mobile-filter-body label {
  min-width: 0;
  display: grid;
  gap: 6px;
  margin: 0;
}

.permission-filter-grid label > span,
.permission-filter-panel .mobile-filter-body label > span {
  color: #5c6e82;
  font-size: 11px;
  font-weight: 700;
  line-height: 1.45;
}

.permission-filter-grid input:not([type="checkbox"]),
.permission-filter-grid select,
.permission-filter-panel .mobile-filter-body input:not([type="checkbox"]),
.permission-filter-panel .mobile-filter-body select {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 9px 11px;
  border: 1px solid #cfdae4;
  border-radius: 9px;
  background: #fff;
  color: var(--permission-ink, #172b43);
  outline: none;
}

.permission-filter-grid input:not([type="checkbox"]):focus,
.permission-filter-grid select:focus,
.permission-filter-panel .mobile-filter-body input:not([type="checkbox"]):focus,
.permission-filter-panel .mobile-filter-body select:focus {
  border-color: var(--permission-blue, #0b68b5);
  box-shadow: 0 0 0 3px rgba(11, 104, 181, .11);
}

.permission-filter-actions,
.permission-filter-panel .mobile-filter-actions {
  position: sticky;
  z-index: 3;
  bottom: 0;
  display: flex;
  grid-column: 1 / -1;
  justify-content: flex-end;
  gap: 9px;
  margin: 0;
  padding: 13px 20px 16px;
  border-top: 1px solid #e4ebf1;
  background: rgba(255, 255, 255, .98);
  box-shadow: 0 -8px 20px rgba(18, 52, 82, .06);
  backdrop-filter: blur(10px);
}

.permission-filter-panel .mobile-filter-cancel {
  display: inline-flex;
}

.permission-filter-active {
  overflow: hidden;
}

.permission-filter-active .mobile-filter-backdrop {
  position: fixed;
  z-index: 220;
  inset: 0;
  display: block;
  visibility: visible;
  border: 0;
  background: rgba(5, 25, 44, .48);
  opacity: 1;
  touch-action: none;
  backdrop-filter: blur(2px);
}

.permission-empty {
  grid-column: 1 / -1;
  min-height: 150px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  padding: 28px 18px;
  border: 1px dashed #cad8e3;
  border-radius: 11px;
  background: #f9fbfc;
  color: var(--permission-muted, #718196);
  text-align: center;
}

.permission-empty strong,
.permission-empty p {
  margin: 0;
}

.permission-empty strong {
  color: #53667b;
  font-size: 13px;
}

.permission-empty p {
  max-width: 520px;
  font-size: 11px;
  line-height: 1.65;
}

.permission-action-label-short {
  display: none;
}

@media (max-width: 1150px) {
  .permission-workshop-grid,
  .permission-user-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 760px) {
  .permission-ledger-page {
    width: 100%;
    max-width: 100%;
  }

  .permission-ledger-page .page-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .permission-ledger-page .page-head > div:first-child {
    min-width: 0;
    flex: 1 1 220px;
  }

  .permission-page-actions {
    flex: 1 1 auto;
  }

  .permission-page-actions .btn,
  .permission-filter-trigger,
  .permission-org-card,
  .permission-user-card,
  .permission-path button,
  .permission-path a,
  .permission-detail-tab,
  .permission-detail-actions .btn,
  .permission-filter-panel button,
  .permission-filter-clear,
  .permission-filter-chip button,
  .permission-export-option {
    min-height: 44px;
    touch-action: manipulation;
  }

  .permission-path {
    padding: 9px 11px;
  }

  .permission-step {
    padding: 15px;
  }

  .permission-step-head {
    flex-wrap: wrap;
    gap: 10px;
  }

  .permission-unit-grid,
  .permission-workshop-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 9px;
  }

  .permission-user-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 9px;
  }

  .permission-org-card {
    min-height: 104px;
    align-items: flex-start;
    padding: 13px;
  }

  .permission-org-card-main {
    align-items: flex-start;
  }

  .permission-org-card-metric {
    padding-top: 3px;
  }

  .permission-user-card {
    min-height: 0;
    padding: 14px;
  }

  .permission-detail-drawer {
    width: 100%;
    max-width: 100%;
    overflow-y: auto;
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(16px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
    -webkit-overflow-scrolling: touch;
  }

  .permission-detail-head {
    margin-right: calc(0px - max(16px, env(safe-area-inset-right)));
    margin-left: calc(0px - max(16px, env(safe-area-inset-left)));
    padding: max(15px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) 14px max(16px, env(safe-area-inset-left));
  }

  .permission-detail-head .close {
    width: 44px;
    min-width: 44px;
    height: 44px;
  }

  .permission-detail-tabs {
    top: 0;
    margin-right: calc(0px - max(16px, env(safe-area-inset-right)));
    margin-left: calc(0px - max(16px, env(safe-area-inset-left)));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .permission-detail-actions {
    bottom: calc(-16px - env(safe-area-inset-bottom));
    margin-right: calc(0px - max(16px, env(safe-area-inset-right)));
    margin-bottom: calc(-16px - env(safe-area-inset-bottom));
    margin-left: calc(0px - max(16px, env(safe-area-inset-left)));
    padding-right: max(16px, env(safe-area-inset-right));
    padding-bottom: calc(12px + env(safe-area-inset-bottom));
    padding-left: max(16px, env(safe-area-inset-left));
  }

  .permission-switch:not(input) {
    width: 52px;
    min-width: 52px;
    min-height: 44px;
    height: 44px;
    flex-basis: 52px;
  }

  .permission-switch input[type="checkbox"],
  .permission-switch[type="checkbox"] {
    width: 52px;
    min-width: 52px;
    height: 32px;
    flex-basis: 52px;
  }

  .permission-switch input[type="checkbox"]::before,
  .permission-switch[type="checkbox"]::before {
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
  }

  .permission-switch input[type="checkbox"]:checked::before,
  .permission-switch[type="checkbox"]:checked::before {
    transform: translateX(20px);
  }

  .permission-switch:not(input) > span[aria-hidden="true"] {
    width: 52px;
    height: 32px;
  }

  .permission-switch:not(input) > span[aria-hidden="true"]::before {
    top: 4px;
    left: 4px;
    width: 22px;
    height: 22px;
  }

  .permission-switch:not(input) > input[type="checkbox"]:checked + span[aria-hidden="true"]::before {
    transform: translateX(20px);
  }

  .permission-filter-panel {
    top: auto;
    right: 0;
    bottom: 0;
    left: 0;
    width: 100%;
    max-width: 100%;
    height: auto;
    max-height: 90vh;
    max-height: 90dvh;
    margin: 0;
    border: 0;
    border-radius: 20px 20px 0 0;
    box-shadow: 0 -18px 55px rgba(7, 34, 58, .25);
    transform: translateY(104%);
    -webkit-overflow-scrolling: touch;
    touch-action: pan-y;
  }

  .permission-filter-panel.mobile-filter-open {
    transform: translateY(0);
  }

  .permission-filter-panel .mobile-filter-head {
    position: static;
    min-height: 0;
    padding: 17px max(16px, env(safe-area-inset-right)) 13px max(16px, env(safe-area-inset-left));
  }

  .permission-filter-panel .mobile-filter-head button {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px;
    flex-basis: 44px;
  }

  .permission-filter-grid,
  .permission-filter-panel .mobile-filter-body {
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    padding: 15px max(16px, env(safe-area-inset-right)) 18px max(16px, env(safe-area-inset-left));
  }

  .permission-filter-wide {
    grid-column: 1 / -1;
  }

  .permission-filter-checks {
    grid-template-columns: minmax(0, 1fr);
  }

  .permission-filter-actions,
  .permission-filter-panel .mobile-filter-actions {
    margin: 0;
    padding: 12px max(16px, env(safe-area-inset-right)) calc(12px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }

  .permission-filter-actions .btn,
  .permission-filter-panel .mobile-filter-actions .btn {
    min-width: 0;
    min-height: 48px;
  }

  .permission-export-option input {
    width: 22px;
    height: 22px;
    flex-basis: 22px;
  }
}

@media (max-width: 430px) {
  .permission-ledger-page .page-head > div:first-child,
  .permission-ledger-page .page-head-action,
  .permission-page-actions {
    width: 100%;
    flex-basis: 100%;
  }

  .permission-page-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-page-actions .btn {
    width: 100%;
    min-width: 0;
    padding-right: 10px;
    padding-left: 10px;
  }

  .permission-page-actions .btn[data-mobile-label] .permission-action-label {
    display: none;
  }

  .permission-page-actions .btn[data-mobile-label]::after {
    content: attr(data-mobile-label);
  }

  .permission-page-actions [data-action="permission-export-open"] > span {
    display: none;
  }

  .permission-page-actions [data-action="permission-export-open"]::after {
    content: "导出权限";
  }

  .permission-action-label-long {
    display: none;
  }

  .permission-action-label-short {
    display: inline;
  }

  .permission-unit-grid,
  .permission-workshop-grid,
  .permission-user-grid,
  .permission-detail-stats,
  .permission-export-options {
    grid-template-columns: minmax(0, 1fr);
  }

  .permission-step {
    padding: 13px;
  }

  .permission-step-title {
    grid-template-columns: 31px minmax(0, 1fr);
    gap: 9px;
  }

  .permission-step-number {
    width: 31px;
    height: 31px;
  }

  .permission-org-card {
    min-height: 88px;
    align-items: center;
  }

  .permission-history-head {
    display: grid;
    gap: 3px;
  }

  .permission-history-head time,
  .permission-history-head small {
    white-space: normal;
  }

  .permission-option {
    gap: 10px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .permission-detail-identity .permission-user-avatar {
    width: 42px;
    height: 42px;
    flex-basis: 42px;
  }

  .permission-detail-identity h3 {
    font-size: 16px;
  }

  .permission-detail-actions {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
  }

  .permission-detail-actions .btn,
  .permission-filter-actions .btn,
  .permission-filter-panel .mobile-filter-actions .btn {
    width: 100%;
  }

  .permission-filter-actions,
  .permission-filter-panel .mobile-filter-actions {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .permission-filter-actions .btn.primary,
  .permission-filter-panel .mobile-filter-actions .btn.primary {
    grid-column: 1 / -1;
  }
}

@media (prefers-reduced-motion: reduce) {
  .permission-org-card,
  .permission-user-card,
  .permission-filter-panel,
  .permission-switch input[type="checkbox"],
  .permission-switch[type="checkbox"],
  .permission-switch input[type="checkbox"]::before,
  .permission-switch[type="checkbox"]::before,
  .permission-switch:not(input) > span[aria-hidden="true"],
  .permission-switch:not(input) > span[aria-hidden="true"]::before {
    scroll-behavior: auto;
    transition: none;
  }
}