/* ============================================================
 * 账号与权限管理后台样式
 * ============================================================ */
.admin-wrap { padding: 18px 22px; max-width: 1100px; }
.admin-tabs { display: flex; gap: 6px; border-bottom: 1px solid var(--line, #e5e6eb); margin-bottom: 16px; }
.atab {
  border: none; background: none; padding: 10px 16px; font-size: 14px; cursor: pointer;
  color: #4e5969; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.atab.on { color: #0052d9; border-bottom-color: #0052d9; font-weight: 600; }

.admin-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 12px; }
.sec-title { font-weight: 600; font-size: 15px; color: #1d2129; }
.admin-section { margin-bottom: 26px; }
.muted { color: #86909c; font-size: 12px; }

.admin-tbl { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line, #e5e6eb); border-radius: 8px; overflow: hidden; }
.admin-tbl th, .admin-tbl td { text-align: left; padding: 10px 12px; border-bottom: 1px solid #f0f1f5; font-size: 13px; vertical-align: top; }
.admin-tbl th { background: #f7f8fa; color: #4e5969; font-weight: 600; }
.admin-tbl tr:last-child td { border-bottom: none; }
.pcols { max-width: 360px; }
.pcols .pbadge { margin: 2px 4px 2px 0; }
.ops { white-space: nowrap; }

.tag { display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 12px; background: #f2f3f5; color: #4e5969; }
.tag-super { background: #fff1e9; color: #d25f00; }
.tag-admin { background: #e8f3ff; color: #0052d9; }
.tag-ok { background: #e8ffea; color: #009a29; }
.tag-dis { background: #ffece8; color: #d54941; }

.pbadge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 11px; line-height: 16px; }
.pbadge.on { background: #e8f3ff; color: #0052d9; }
.pbadge.off { background: #f2f3f5; color: #c9cdd4; }

.mini { border: 1px solid var(--line, #e5e6eb); background: #fff; color: #4e5969; padding: 4px 10px; border-radius: 4px; font-size: 12px; cursor: pointer; margin-right: 6px; }
.mini:hover { border-color: #0052d9; color: #0052d9; }
.mini.danger { color: #d54941; }
.mini.danger:hover { border-color: #d54941; color: #d54941; }

.btn-primary { background: #0052d9; color: #fff; border: none; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.btn-primary:hover { background: #0046b8; }
.btn-ghost { background: #fff; border: 1px solid var(--line, #e5e6eb); color: #4e5969; padding: 8px 16px; border-radius: 6px; font-size: 14px; cursor: pointer; }
.btn-ghost:hover { border-color: #0052d9; color: #0052d9; }

/* 弹窗 */
.modal-mask { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 1000; }
.modal { width: 520px; max-width: 92vw; max-height: 88vh; background: #fff; border-radius: 10px; display: flex; flex-direction: column; box-shadow: 0 12px 40px rgba(0,0,0,.2); }
.modal-h { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0f1f5; font-size: 15px; font-weight: 600; }
.modal-x { border: none; background: none; font-size: 22px; line-height: 1; cursor: pointer; color: #86909c; }
.modal-b { padding: 16px 18px; overflow: auto; }
.modal-f { padding: 12px 18px; border-top: 1px solid #f0f1f5; display: flex; justify-content: flex-end; gap: 10px; }

/* 提交中按钮 loading spinner */
.mini-spin { display: inline-block; width: 14px; height: 14px; margin-right: 6px; border: 2px solid rgba(255,255,255,.5); border-top-color: #fff; border-radius: 50%; vertical-align: -2px; animation: as-spin .7s linear infinite; }
@keyframes as-spin { to { transform: rotate(360deg); } }

/* 创建账号成功动画（居中卡片 + 圆环扩散 + 对勾描边） */
.account-success-mask { position: fixed; inset: 0; z-index: 1100; background: rgba(15,23,42,.5); display: flex; align-items: center; justify-content: center; animation: as-fade-in .25s ease both; }
@keyframes as-fade-in { from { opacity: 0; } to { opacity: 1; } }
.account-success-card { background: #fff; border-radius: 14px; padding: 34px 40px 28px; text-align: center; width: 320px; max-width: 86vw; box-shadow: 0 20px 60px rgba(0,0,0,.28); animation: as-pop .4s cubic-bezier(.2,.8,.25,1) both; }
@keyframes as-pop { from { opacity: 0; transform: translateY(14px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } }
.as-check-wrap { position: relative; width: 84px; height: 84px; margin: 0 auto 18px; }
.as-ring { position: absolute; inset: 0; border-radius: 50%; background: #e8f0ff; animation: as-ring-pulse 1.4s ease-out both; }
@keyframes as-ring-pulse { 0% { transform: scale(.6); opacity: .9; } 70% { transform: scale(1.12); opacity: .35; } 100% { transform: scale(1.3); opacity: 0; } }
.as-check-circle { position: absolute; inset: 14px; border-radius: 50%; background: #0052d9; display: flex; align-items: center; justify-content: center; }
.as-check-svg { width: 40px; height: 40px; }
.as-check-svg path { stroke: #fff; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; fill: none; stroke-dasharray: 40; stroke-dashoffset: 40; animation: as-draw .5s .15s ease forwards; }
@keyframes as-draw { to { stroke-dashoffset: 0; } }
.account-success-card h3 { margin: 0 0 6px; font-size: 18px; color: #1d2129; font-weight: 600; }
.account-success-card .as-sub { margin: 0 0 18px; font-size: 13px; color: #4e5969; line-height: 1.6; }
.account-success-card .as-sub b { color: #0052d9; }
.account-success-card .btn-primary { width: 100%; justify-content: center; }
@media (prefers-reduced-motion: reduce) {
  .mini-spin, .account-success-mask, .account-success-card, .as-ring, .as-check-svg path { animation: none !important; }
  .as-check-svg path { stroke-dashoffset: 0; }
}

.form-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.form-row > label { width: 92px; flex: none; color: #4e5969; font-size: 13px; }
.form-row.col { align-items: flex-start; }
.form-row.col > label { padding-top: 6px; }
.form-row input, .form-row select { flex: 1; padding: 8px 10px; border: 1px solid #e5e6eb; border-radius: 6px; font-size: 13px; }
.form-row input:focus, .form-row select:focus { outline: none; border-color: #0052d9; box-shadow: 0 0 0 3px rgba(0,82,217,.12); }
.form-row input[disabled] { background: #f7f8fa; color: #86909c; }

.perm-box { flex: 1; border: 1px solid #f0f1f5; border-radius: 8px; padding: 8px 10px; }
.perm-group { margin-bottom: 8px; }
.perm-g-title { font-size: 12px; color: #86909c; margin: 4px 0; }
.perm-row { display: flex; align-items: center; justify-content: space-between; padding: 5px 4px; font-size: 13px; }
.perm-name { color: #1d2129; }
.perm-name i { font-style: normal; }
.perm-row input[type=checkbox] { width: 16px; height: 16px; }
.perm-sel { padding: 5px 8px; border: 1px solid #e5e6eb; border-radius: 6px; font-size: 13px; }

.ph-error { padding: 20px; color: #d54941; }
.ph-empty { padding: 40px; text-align: center; color: #86909c; }

/* 无编辑权限时隐藏知识库编辑按钮（后端 canEdit 为权威） */
body.no-kb-edit #btn-new,
body.no-kb-edit #btn-edit { display: none !important; }