/* ===== 账号与权限面板 ===== */
.adm-wrap { position: fixed; inset: 0; z-index: 40; }
.adm-backdrop { position: absolute; inset: 0; background: rgba(15, 27, 45, .28); -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); }
.adm {
  position: absolute; top: 0; right: 0; bottom: 0; width: min(1040px, 100vw);
  display: grid; grid-template-rows: auto 1fr auto;
  background: linear-gradient(180deg, rgba(255, 255, 255, .99), rgba(248, 250, 252, .995));
  box-shadow: -1px 0 0 var(--hairline-2), -40px 0 120px -20px rgba(16, 24, 40, .22);
}
.adm::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, rgba(var(--mint-rgb), .55), rgba(var(--azure-rgb), .4), transparent); pointer-events: none; }
.adm-head { display: flex; align-items: center; gap: 24px; padding: 24px 28px 20px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.adm-title h2 { margin-top: 6px; font-size: 24px; font-weight: 700; line-height: 1.25; font-family: var(--font-cn); }
.adm-stats { display: flex; gap: 8px; margin-left: auto; }
.adm-stats .st { display: flex; align-items: baseline; gap: 8px; padding: 8px 12px; border-radius: 11px; background: rgba(248, 250, 252, 1); box-shadow: 0 0 0 1px var(--hairline) inset; }
.adm-stats b { font-size: 20px; font-weight: 500; color: var(--text-hi); }
.adm-stats span { font-size: 13px; color: var(--text-md); font-family: var(--font-cn); }
.adm-stats .st--ok b { color: var(--mint-700); }
.adm-stats .st--off b { color: var(--amber-400); }
.adm-head-actions { display: flex; align-items: center; gap: 8px; }
.adm-body { display: grid; grid-template-columns: 320px 1fr; min-height: 0; }
.adm-list { display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--hairline); padding: 18px 14px 14px 18px; }
.adm-search { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 12px; color: var(--text-lo); background: rgba(255, 255, 255, 1); box-shadow: 0 0 0 1px var(--hairline-2) inset; transition: box-shadow var(--t-mid); }
.adm-search:focus-within { color: var(--blue-600); box-shadow: 0 0 0 1px rgba(var(--blue-rgb), .85) inset, 0 0 0 4px rgba(var(--blue-rgb), .12); }
.adm-search input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; font-size: 15px; color: var(--text-hi); }
.adm-search input::placeholder { color: var(--placeholder); }
.adm-users { margin-top: 12px; overflow-y: auto; display: flex; flex-direction: column; gap: 4px; padding: 2px 4px 2px 2px; }
.urow {
  position: relative; width: 100%; display: flex; align-items: center; gap: 12px; padding: 11px 12px; border-radius: 13px; text-align: left;
  transition: background-color var(--t-fast), box-shadow var(--t-fast);
}
.urow:hover { background: rgba(15, 27, 45, .04); }
.urow.is-active { background: rgba(var(--blue-rgb), .06); box-shadow: 0 0 0 1px rgba(var(--blue-rgb), .35) inset; }
.urow.is-active::before { content: ''; position: absolute; left: -2px; top: 12px; bottom: 12px; width: 3px; border-radius: 3px; background: var(--blue-600); box-shadow: 0 0 10px rgba(var(--blue-rgb), .45); }
.urow.is-off .avatar { filter: grayscale(1); opacity: .6; }
.urow.is-off .urow-name { color: var(--text-md); }
.urow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.35; }
.urow-name { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-cn); }
.urow-acc { font-size: 12px; color: var(--text-lo); letter-spacing: .02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.urow-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex: none; }
.urow-n { font-size: 11px; color: var(--text-lo); letter-spacing: .04em; font-family: var(--font-mono); }
.adm-nores { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 12px; text-align: center; color: var(--text-lo); font-size: 14px; font-family: var(--font-cn); }
.adm-nores .ico { color: var(--hairline-4); }
.adm-state--error { color: var(--text-md); }
.adm-state--error .ico { color: var(--coral-400); }
.adm-state--error .btn { margin-top: 4px; }
.adm-empty { min-height: 60%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; text-align: center; color: var(--text-md); font-size: 15px; font-family: var(--font-cn); }
.adm-empty .ico { color: var(--mint-700); }
/* loading skeleton (first open) */
.sk, .sk-block, .urow--skeleton .avatar {
  background: linear-gradient(90deg, rgba(15, 27, 45, .05) 0%, rgba(15, 27, 45, .1) 50%, rgba(15, 27, 45, .05) 100%) 0 0 / 200% 100%;
  animation: sk-shimmer 1.3s ease-in-out infinite;
}
.sk { display: block; height: 10px; border-radius: 6px; }
.sk--name { width: 64%; height: 12px; margin: 3px 0 7px; }
.sk--acc { width: 42%; }
.sk--title { width: 180px; height: 18px; margin: 4px 0 10px; }
.urow--skeleton { pointer-events: none; }
.urow--skeleton .avatar { box-shadow: none; }
.det--loading .avatar { box-shadow: none; background: rgba(15, 27, 45, .06); }
.det--loading .ctrl.sk-block { min-height: 76px; box-shadow: none; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; margin-top: 8px; }
.sk-grid .sk-block { min-height: 58px; border-radius: 14px; }
@keyframes sk-shimmer { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.adm-detail { min-height: 0; overflow-y: auto; padding: 24px 28px 28px; }
.det { display: flex; flex-direction: column; gap: 22px; }
.det-head { display: flex; align-items: center; gap: 16px; }
.det-id h3 { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 22px; font-weight: 700; line-height: 1.3; font-family: var(--font-cn); }
.det-acc { margin-top: 4px; font-size: 12.5px; color: var(--text-lo); letter-spacing: .04em; }
.det-ctrls { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ctrl { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 16px; border-radius: 15px; background: rgba(15, 27, 45, .025); box-shadow: 0 0 0 1px var(--hairline) inset; }
.ctrl-l { display: flex; flex-direction: column; min-width: 0; }
.ctrl-t { font-size: 15px; font-weight: 600; font-family: var(--font-cn); }
.ctrl-d { font-size: 13px; color: var(--text-lo); line-height: 1.5; margin-top: 2px; font-family: var(--font-cn); }
.perm { display: flex; flex-direction: column; gap: 16px; }
.perm-head { display: flex; align-items: center; justify-content: space-between; }
.perm-head h4 { font-size: 16px; font-weight: 700; font-family: var(--font-cn); }
.perm-count { font-size: 12px; color: var(--mint-800); letter-spacing: .1em; padding: 4px 9px; border-radius: 7px; background: rgba(var(--mint-rgb), .1); box-shadow: 0 0 0 1px rgba(var(--mint-rgb), .35) inset; }
.perm-note { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; font-size: 14px; color: #1D4ED8; background: rgba(var(--azure-rgb), .06); box-shadow: 0 0 0 1px rgba(var(--azure-rgb), .25) inset; font-family: var(--font-cn); }
.pg { display: flex; flex-direction: column; gap: 10px; }
.pg-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pg-t { font-size: 14px; font-weight: 600; color: var(--text-md); display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-cn); }
.pg-t small { font-size: 10.5px; color: var(--text-lo); letter-spacing: .18em; font-weight: 400; }
.pg-btns { display: inline-flex; gap: 6px; }
.pg-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: 10px; }
.pchk {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 14px; cursor: pointer; user-select: none;
  background: rgba(255, 255, 255, 1); box-shadow: 0 0 0 1px var(--hairline) inset;
  transition: background-color var(--t-fast), box-shadow var(--t-fast), transform var(--t-fast) var(--ease);
}
.pchk:hover { background: rgba(248, 250, 252, 1); box-shadow: 0 0 0 1px var(--hairline-3) inset; }
.pchk:active { transform: scale(.985); }
.pchk input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.pchk-box {
  flex: none; width: 22px; height: 22px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: transparent;
  box-shadow: 0 0 0 1.5px rgba(15, 27, 45, .28) inset; transition: background-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast);
}
.pchk-ico { flex: none; width: 34px; height: 34px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-lo); background: rgba(15, 27, 45, .04); transition: color var(--t-fast); }
.pchk-txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.3; }
.pchk-txt b { font-size: 14.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-family: var(--font-cn); }
.pchk-txt small { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--text-lo); letter-spacing: .1em; white-space: nowrap; }
.soon-tag--sm { height: 18px; padding: 0 6px 0 4px; gap: 3px; font-size: 11px; letter-spacing: .02em; }
.pchk:has(input:checked) { background: rgba(var(--blue-rgb), .05); box-shadow: 0 0 0 1px rgba(var(--blue-rgb), .5) inset; }
.pchk input:checked ~ .pchk-box { background: var(--blue-600); box-shadow: none; color: var(--text-on-brand); }
.pchk input:checked ~ .pchk-ico { color: var(--blue-600); }
.pchk input:focus-visible ~ .pchk-box { box-shadow: var(--focus); }
.pchk.is-locked { cursor: default; opacity: .8; }
.save-bar {
  position: sticky; bottom: -28px; z-index: 2; margin: 4px -28px -28px; padding: 14px 28px 18px; display: flex; align-items: center; gap: 12px;
  /* solid bar: content scrolling underneath never ghosts through the controls */
  background: #FAFBFD;
  box-shadow: 0 -1px 0 var(--hairline), 0 -14px 24px -18px rgba(16, 24, 40, .18);
}
.save-actions { margin-left: auto; display: flex; gap: 8px; }
.dirty-note, .saved-note { display: none; align-items: center; gap: 8px; font-size: 14px; font-family: var(--font-cn); }
.dirty-note { color: var(--amber-400); }
.saved-note { color: var(--text-lo); }
.save-bar.is-dirty .dirty-note { display: inline-flex; animation: fade-up .3s var(--ease-out) both; }
.save-bar:not(.is-dirty) .saved-note { display: inline-flex; }
.adm-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 12px 22px 12px 28px; border-top: 1px solid var(--hairline); font-size: 13px; color: var(--text-lo); font-family: var(--font-cn); }
.adm-foot > span { display: inline-flex; align-items: center; gap: 8px; }
.adm-foot .btn--text { --bh: 34px; font-size: 13.5px; }

/* add / reset dialogs */
.add-form { display: flex; flex-direction: column; gap: 16px; }
.add-perm { display: flex; flex-direction: column; gap: 10px; }
.add-pg { display: flex; align-items: flex-start; gap: 12px; }
.add-pg-t { flex: none; width: 64px; padding-top: 6px; font-size: 13px; color: var(--text-lo); font-family: var(--font-cn); }
.add-pg-items { display: flex; flex-wrap: wrap; gap: 8px; }
.chip-chk { position: relative; cursor: pointer; user-select: none; }
.chip-chk input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.chip-chk span {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border-radius: 9px; font-size: 13.5px; color: var(--text-md);
  box-shadow: 0 0 0 1px var(--hairline-2) inset; transition: background-color var(--t-fast), box-shadow var(--t-fast), color var(--t-fast); font-family: var(--font-cn);
}
.chip-chk span .ico { opacity: .25; }
.chip-chk:hover span { box-shadow: 0 0 0 1px var(--hairline-3) inset; color: var(--text-hi); }
.chip-chk input:checked + span { color: var(--blue-700); background: rgba(var(--blue-rgb), .06); box-shadow: 0 0 0 1px rgba(var(--blue-rgb), .5) inset; }
.chip-chk input:checked + span .ico { opacity: 1; color: var(--blue-600); }
.chip-chk input:focus-visible + span { box-shadow: var(--focus); }
.chip-soon { font-style: normal; font-size: 11px; font-weight: 600; line-height: 1; color: #475467; padding: 3px 5px; margin-left: 2px; border-radius: 5px; background: rgba(100, 116, 139, .1); }
.chip-chk input:checked + span .chip-soon { color: var(--blue-700); background: rgba(var(--blue-rgb), .1); }
.add-err { text-align: right; }
.pw-done { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: 14px; background: rgba(var(--mint-rgb), .08); box-shadow: 0 0 0 1px rgba(var(--mint-rgb), .38) inset; }
.pw-done-t { display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 700; color: var(--mint-700); }
.pw-show { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 10px 10px 16px; border-radius: 11px; background: rgba(255, 255, 255, 1); box-shadow: 0 0 0 1px var(--hairline-2) inset; }
.pw-show .mono { font-size: 19px; letter-spacing: .12em; color: var(--text-hi); }
.pw-done p { font-size: 13px; color: var(--text-lo); }

@media (max-width: 860px) {
  .adm { width: 100vw; }
  .adm-head { padding: 18px 18px 14px; gap: 14px; flex-wrap: wrap; }
  .adm-title { flex: 1 1 0; min-width: 0; }
  .adm-title .eyebrow-sm { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .adm-head-actions .btn { --bh: 40px; padding: 0 14px; }
  .adm-stats { order: 3; margin-left: 0; width: 100%; }
  .adm-head-actions { margin-left: auto; }
  .adm-body { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .adm-list { border-right: 0; border-bottom: 1px solid var(--hairline); padding: 14px 16px; }
  .adm-users { max-height: 220px; }
  .adm-detail { padding: 18px 16px 22px; overflow: visible; }
  .det-ctrls { grid-template-columns: 1fr; }
  .save-bar { bottom: 0; margin: 0 -16px -22px; padding: 12px 16px 16px; }
  .adm-foot { flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 16px; }
  .field-row { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  /* phones: the add button becomes a compact icon button so the panel title is never truncated */
  .adm-head-actions .btn--primary { width: 40px; padding: 0; }
  .adm-head-actions .btn--primary span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .adm-title .eyebrow-sm { white-space: normal; }
}