[hidden] { display: none !important; }

.sidebar nav {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-bottom: 12px;
  padding-right: 3px;
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 255, 255, 0.16) transparent;
}

.sidebar .agent-card { margin: 0 4px 15px; }

.system-nav-label {
  margin-top: 22px !important;
  padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-page {
  max-width: 1480px;
  margin: 0 auto;
}

.admin-hero {
  position: relative;
  min-height: 172px;
  overflow: hidden;
  padding: 30px 34px;
  border-radius: 20px;
  color: #edf5f3;
  background:
    linear-gradient(105deg, rgba(13, 27, 40, 0.98), rgba(17, 43, 46, 0.96)),
    #101827;
  box-shadow: 0 18px 45px rgba(16, 24, 39, 0.16);
}

.admin-hero::before,
.admin-hero::after {
  content: "";
  position: absolute;
  pointer-events: none;
}

.admin-hero::before {
  inset: 0;
  opacity: 0.18;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: linear-gradient(90deg, transparent, #000 50%, #000);
}

.admin-hero::after {
  right: -90px;
  bottom: -170px;
  width: 460px;
  height: 460px;
  border: 1px solid rgba(97, 224, 195, 0.18);
  border-radius: 50%;
  box-shadow:
    0 0 0 48px rgba(97, 224, 195, 0.035),
    0 0 0 96px rgba(49, 87, 246, 0.035);
}

.admin-hero-copy,
.admin-control-seal { position: relative; z-index: 1; }

.admin-hero-copy .kicker {
  color: #72ddc5;
  font: 750 10px/1.2 ui-monospace, SFMono-Regular, Menlo, monospace;
  letter-spacing: 0.18em;
}

.admin-hero-copy h1 {
  margin: 11px 0 4px;
  color: white;
  font: 700 28px/1.2 "Songti SC", "STSong", serif;
  letter-spacing: -0.035em;
}

.admin-hero-copy p {
  max-width: 650px;
  margin: 10px 0 0;
  color: #9fb3b1;
  font-size: 12px;
}

.admin-control-seal {
  position: absolute;
  right: 34px;
  top: 50%;
  display: flex;
  gap: 13px;
  align-items: center;
  min-width: 238px;
  padding: 15px 18px;
  border: 1px solid rgba(123, 222, 201, 0.18);
  border-radius: 14px;
  background: rgba(1, 10, 12, 0.22);
  backdrop-filter: blur(10px);
  transform: translateY(-50%);
}

.admin-control-seal > svg {
  width: 26px;
  color: #72ddc5;
}

.admin-control-seal strong,
.admin-control-seal span { display: block; }
.admin-control-seal strong { font: 750 10px/1.2 ui-monospace, monospace; letter-spacing: 0.12em; }
.admin-control-seal span { margin-top: 5px; color: #8fa6a2; font-size: 10px; }

.admin-content { margin-top: 18px; }

.admin-loading {
  min-height: 280px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 14px;
  color: #7d8998;
}

.admin-loading i {
  width: 28px;
  height: 28px;
  border: 3px solid #dfe4e9;
  border-top-color: #3157f6;
  border-radius: 50%;
  animation: admin-spin 0.8s linear infinite;
}

@keyframes admin-spin { to { transform: rotate(360deg); } }

.admin-metrics {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  margin-top: -44px;
  padding: 0 18px;
  position: relative;
  z-index: 2;
}

.admin-metric {
  min-height: 106px;
  padding: 18px;
  border: 1px solid #e2e6e5;
  border-radius: 15px;
  background: rgba(255, 255, 255, 0.97);
  display: flex;
  gap: 14px;
  align-items: center;
  box-shadow: 0 12px 30px rgba(20, 31, 40, 0.09);
}

.admin-metric > span {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  color: #3157f6;
  background: #edf1ff;
}

.admin-metric.mint > span { color: #167866; background: #e8f8f3; }
.admin-metric.amber > span { color: #a36c10; background: #fff4dc; }
.admin-metric.ink > span { color: #eff6f4; background: #15242c; }
.admin-metric svg { width: 19px; }
.admin-metric small,
.admin-metric strong,
.admin-metric em { display: block; }
.admin-metric small { color: #768292; font-size: 10px; }
.admin-metric strong { margin-top: 2px; color: #15202f; font-size: 25px; line-height: 1.1; }
.admin-metric em { margin-top: 5px; color: #9aa3ad; font-size: 9px; font-style: normal; }

.admin-panel {
  overflow: hidden;
  border: 1px solid #dde2e1;
  border-radius: 17px;
  background: white;
  box-shadow: 0 2px 0 rgba(255, 255, 255, 0.8) inset;
}

.user-admin-panel { margin-top: 16px; }

.admin-section-head {
  min-height: 78px;
  padding: 16px 19px;
  border-bottom: 1px solid #e7e9eb;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.admin-section-head h2 { margin: 0; color: #172130; font-size: 15px; }
.admin-section-head p { margin: 4px 0 0; color: #7f8a99; font-size: 10px; }
.admin-section-head .primary-button { height: 38px; }

.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; }
.admin-table th {
  height: 38px;
  padding: 0 16px;
  color: #8b95a2;
  background: #f8f9fa;
  text-align: left;
  font-size: 9px;
  font-weight: 750;
  letter-spacing: 0.04em;
}
.admin-table td {
  min-width: 116px;
  padding: 14px 16px;
  border-top: 1px solid #edf0ef;
  color: #425064;
  font-size: 11px;
  vertical-align: middle;
}
.admin-table tbody tr:first-child td { border-top: 0; }
.admin-table tbody tr { transition: background 0.16s ease, opacity 0.16s ease; }
.admin-table tbody tr:hover { background: #fafbfc; }
.admin-table tbody tr.is-disabled { opacity: 0.58; }
.admin-table th:first-child,
.admin-table td:first-child { min-width: 220px; }
.admin-table th:last-child,
.admin-table td:last-child { min-width: 230px; }

.admin-user-identity { display: flex; gap: 11px; align-items: center; }
.admin-user-identity > span {
  width: 36px;
  height: 36px;
  border-radius: 11px;
  display: grid;
  place-items: center;
  color: #1a574d;
  background: linear-gradient(145deg, #d7f3eb, #e9f8f4);
  font-size: 12px;
  font-weight: 800;
}
.admin-user-identity strong,
.admin-user-identity small { display: block; }
.admin-user-identity strong { color: #172231; font-size: 12px; }
.admin-user-identity small { margin-top: 3px; color: #929ca8; font: 500 9px ui-monospace, monospace; }

.role-chip,
.account-status {
  width: max-content;
  min-height: 25px;
  padding: 0 9px;
  border-radius: 13px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #3157f6;
  background: #edf1ff;
  font-size: 9px;
  font-weight: 750;
}
.role-chip.admin { color: #157160; background: #e7f7f1; }
.account-status { color: #2d7958; background: #eaf7ef; }
.account-status.disabled { color: #8b5255; background: #f7ecee; }
.account-status i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.password-pending { display: block; margin-top: 5px; color: #a4680a; font-size: 8px; }
.admin-login-time { display: block; color: #3d4b5d; font-size: 10px; }
.admin-login-time + small { display: block; margin-top: 4px; color: #98a1ac; font-size: 8px; }

.admin-row-actions { display: flex; gap: 5px; flex-wrap: wrap; }
.admin-row-actions button {
  height: 29px;
  padding: 0 9px;
  border: 1px solid #dde2e7;
  border-radius: 8px;
  color: #5f6d80;
  background: white;
  font-size: 9px;
  cursor: pointer;
}
.admin-row-actions button:hover { border-color: #9eb0fa; color: #3157f6; background: #f7f8ff; }
.admin-row-actions button.danger { color: #a5454c; }
.admin-row-actions button.restore { color: #26745a; }

.admin-access-note {
  margin-top: 14px;
  padding: 16px 18px;
  border: 1px solid #cfe8e1;
  border-radius: 14px;
  display: flex;
  gap: 13px;
  align-items: center;
  background: #f3faf7;
}
.admin-access-note > span {
  width: 35px;
  height: 35px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #247d68;
  background: white;
}
.admin-access-note svg { width: 17px; }
.admin-access-note strong { color: #1c574a; font-size: 11px; }
.admin-access-note p { margin: 3px 0 0; color: #648079; font-size: 9px; }

.role-workspace {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 14px;
}

.role-rail { align-self: start; }
.role-rail .admin-section-head { min-height: 90px; }
.role-rail .admin-section-head { align-items: flex-start; }
.role-rail .admin-section-head .primary-button { padding: 0 11px; font-size: 9px; }
.role-list { padding: 8px; }
.role-list > button {
  width: 100%;
  min-height: 62px;
  padding: 10px;
  border: 0;
  border-radius: 11px;
  display: grid;
  grid-template-columns: 34px 1fr 16px;
  gap: 10px;
  align-items: center;
  color: #697588;
  background: transparent;
  text-align: left;
  cursor: pointer;
}
.role-list > button:hover { background: #f6f8fa; }
.role-list > button.active { color: #244dd7; background: #edf1ff; }
.role-list > button > span {
  width: 34px;
  height: 34px;
  border-radius: 10px;
  display: grid;
  place-items: center;
  color: #607087;
  background: #f1f3f6;
}
.role-list > button.active > span { color: #3157f6; background: white; }
.role-list svg { width: 15px; }
.role-list strong,
.role-list small { display: block; }
.role-list strong { color: #273345; font-size: 11px; }
.role-list small { margin-top: 4px; color: #8d97a4; font-size: 8px; }

.permission-matrix { min-height: 620px; }
.permission-head {
  min-height: 92px;
  padding: 18px 20px;
  border-bottom: 1px solid #e8ebec;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}
.permission-title-line { display: flex; gap: 8px; align-items: center; }
.permission-title-line h2 { margin: 0; color: #152131; font-size: 17px; }
.permission-title-line span { padding: 3px 7px; border-radius: 8px; color: #246b5a; background: #e8f6f1; font-size: 8px; }
.permission-head p { max-width: 630px; margin: 6px 0 0; color: #7e8998; font-size: 10px; }
.permission-head button:disabled { opacity: 0.62; cursor: default; }
.role-lock-note,
.role-edit-note {
  min-height: 40px;
  padding: 0 20px;
  display: flex;
  gap: 8px;
  align-items: center;
  color: #337263;
  background: #f0faf6;
  font-size: 9px;
}
.role-edit-note { color: #8b671c; background: #fff8e8; }
.role-lock-note svg,
.role-edit-note svg { width: 14px; }
.permission-groups { padding: 15px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.permission-group { overflow: hidden; border: 1px solid #e1e5e7; border-radius: 12px; }
.permission-group > header { height: 39px; padding: 0 13px; display: flex; align-items: center; justify-content: space-between; background: #f7f8f9; }
.permission-group > header strong { color: #354256; font-size: 10px; }
.permission-group > header span { color: #9aa2ad; font-size: 8px; }
.permission-item { min-height: 55px; padding: 9px 12px; border-top: 1px solid #edf0f0; display: grid; grid-template-columns: 17px 1fr; gap: 10px; align-items: center; cursor: pointer; position: relative; }
.permission-item input { position: absolute; opacity: 0; pointer-events: none; }
.permission-item > i { width: 16px; height: 16px; border: 1px solid #cbd2d7; border-radius: 5px; background: white; }
.permission-item input:checked + i { border-color: #3157f6; background: #3157f6; box-shadow: inset 0 0 0 3px white; }
.permission-item input:disabled + i { border-color: #56b99f; background: #56b99f; }
.permission-item strong,
.permission-item small { display: block; }
.permission-item strong { color: #344053; font-size: 10px; }
.permission-item small { margin-top: 3px; color: #919aa6; font-size: 8px; line-height: 1.5; }

.audit-panel { min-height: 520px; }
.audit-list { padding: 4px 18px 18px; }
.audit-row { min-height: 74px; border-bottom: 1px solid #ebeeee; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; }
.audit-row:last-child { border-bottom: 0; }
.audit-marker { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #3157f6; background: #edf1ff; }
.audit-marker.authentication { color: #15725f; background: #e8f7f2; }
.audit-marker svg { width: 15px; }
.audit-body header { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.audit-body strong { color: #283548; font-size: 11px; }
.audit-body time { color: #9aa3ad; font: 500 8px ui-monospace, monospace; }
.audit-body p { margin: 4px 0 0; color: #637084; font-size: 9px; }
.audit-body small { display: block; margin-top: 3px; color: #9aa3ad; font-size: 8px; }

.admin-empty,
.admin-error-state,
.admin-forbidden {
  min-height: 360px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  text-align: center;
}
.admin-empty svg,
.admin-error-state svg,
.admin-forbidden svg { width: 34px; color: #3157f6; }
.admin-empty strong,
.admin-error-state h2,
.admin-forbidden h1 { margin: 0; color: #263244; font-size: 18px; }
.admin-empty p,
.admin-error-state p,
.admin-forbidden p { margin: 0; color: #8a95a3; font-size: 11px; }
.admin-error-state .primary-button,
.admin-forbidden .primary-button { margin-top: 8px; }

.admin-modal-layer {
  position: fixed;
  inset: 0;
  z-index: 220;
  display: grid;
  place-items: center;
  padding: 24px;
  visibility: hidden;
  opacity: 0;
  background: rgba(9, 15, 24, 0.54);
  backdrop-filter: blur(5px);
  transition: opacity 0.2s ease, visibility 0.2s ease;
}
.admin-modal-layer.open { visibility: visible; opacity: 1; }
.admin-modal {
  width: min(700px, 100%);
  max-height: min(820px, calc(100vh - 48px));
  overflow: auto;
  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 32px 90px rgba(4, 11, 20, 0.32);
  transform: translateY(14px) scale(0.985);
  transition: transform 0.22s ease;
}
.admin-modal-layer.open .admin-modal { transform: translateY(0) scale(1); }
.admin-modal > header {
  padding: 23px 25px 20px;
  border-bottom: 1px solid #e4e8e8;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 18px;
  background: linear-gradient(145deg, #f8faf9, #fff);
}
.admin-modal > header span { color: #247762; font: 750 9px ui-monospace, monospace; letter-spacing: 0.13em; }
.admin-modal > header h2 { margin: 6px 0 0; color: #192536; font-size: 20px; }
.admin-modal > header p { margin: 6px 0 0; color: #7d8997; font-size: 10px; }
.admin-form { padding: 22px 25px 24px; }
.admin-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }
.admin-field { display: block; }
.admin-field > span { display: block; margin-bottom: 7px; color: #5e6b7b; font-size: 10px; font-weight: 700; }
.admin-field input,
.admin-field select,
.admin-field .password-field-wrap {
  width: 100%;
  height: 43px;
  box-sizing: border-box;
  border: 1px solid #d9dfe2;
  border-radius: 10px;
  color: #253244;
  background: white;
  outline: none;
}
.admin-field input,
.admin-field select { padding: 0 12px; }
.admin-field input:focus,
.admin-field select:focus { border-color: #8da1f6; box-shadow: 0 0 0 3px rgba(49, 87, 246, 0.09); }
.admin-field input:disabled { color: #8d97a3; background: #f2f4f5; }
.password-field-wrap { display: grid; grid-template-columns: 1fr auto; overflow: hidden; }
.password-field-wrap input { height: 41px; border: 0; border-radius: 0; }
.password-field-wrap button { padding: 0 12px; border: 0; border-left: 1px solid #e0e4e5; color: #3157f6; background: #f7f8ff; font-size: 9px; }
.admin-check-line { grid-column: 1 / -1; display: flex; gap: 9px; align-items: center; color: #627083; font-size: 10px; }
.admin-check-line input { accent-color: #3157f6; }
.modal-permission-list { margin: 18px 0 0; padding: 14px; border: 1px solid #e1e5e7; border-radius: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.modal-permission-list legend { padding: 0 6px; color: #5e6c7e; font-size: 10px; font-weight: 700; }
.modal-permission-list label { display: flex; gap: 8px; align-items: center; color: #627083; font-size: 9px; }
.modal-permission-list input { accent-color: #3157f6; }
.admin-form-actions { margin-top: 22px; padding-top: 17px; border-top: 1px solid #e7eaea; display: flex; align-items: center; justify-content: space-between; gap: 14px; }
.admin-form-actions > div { display: flex; gap: 8px; }
.admin-form-error { color: #b3454b; font-size: 10px; }

@media (max-width: 1100px) {
  .admin-metrics { grid-template-columns: 1fr 1fr; margin-top: 14px; padding: 0; }
  .role-workspace { grid-template-columns: 260px minmax(0, 1fr); }
  .permission-groups { grid-template-columns: 1fr; }
}

@media (max-width: 760px) {
  .admin-hero { min-height: 190px; padding: 24px; }
  .admin-control-seal { position: relative; right: auto; top: auto; margin-top: 20px; transform: none; }
  .admin-metrics { grid-template-columns: 1fr; }
  .role-workspace { grid-template-columns: 1fr; }
  .admin-form-grid,
  .modal-permission-list { grid-template-columns: 1fr; }
  .admin-table th:nth-child(3),
  .admin-table td:nth-child(3) { display: none; }
}

@media (max-height: 650px) {
  .sidebar { padding-top: 14px; padding-bottom: 10px; }
  .workspace-switch,
  .sidebar .agent-card { display: none; }
  .sidebar nav { margin-top: 12px; }
  .profile { height: 46px; padding-top: 8px; }
}

@media (prefers-reduced-motion: reduce) {
  .admin-loading i,
  .admin-modal { animation: none; transition: none; }
}