:root {
  --mail-primary: #3b7ddd;
  --mail-soft: #f4f7fb;
}
body { font-family: "Inter", "Segoe UI", "PingFang SC", "Microsoft YaHei", Arial, sans-serif; }
.sidebar-brand { font-size: 1.05rem; letter-spacing: .2px; }
.sidebar-brand .brand-mark { display:inline-flex; width:34px; height:34px; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.12); margin-right:.5rem; }
.sidebar-link i, .sidebar-link svg { margin-right: .55rem; }
.navbar .avatar { width: 36px; height: 36px; }
.content { padding-bottom: 4rem; }
.page-title-box { display:flex; justify-content:space-between; gap:1rem; align-items:flex-start; flex-wrap:wrap; margin-bottom:1.25rem; }
.page-title-box h1 { margin:0; font-size:1.55rem; font-weight:700; color:#243042; }
.page-title-box p { margin:.35rem 0 0; color:#6c757d; }
.card { border: 0; box-shadow: 0 0 0.875rem 0 rgba(33, 37, 41, .05); }
.stat-card .stat-icon { width:48px; height:48px; border-radius:14px; display:flex; align-items:center; justify-content:center; background:rgba(59,125,221,.12); color:var(--mail-primary); }
.stat-card .stat-value { font-size:1.7rem; font-weight:700; color:#243042; line-height:1; }
.stat-card .stat-label { color:#6c757d; font-size:.875rem; }
.table-card .table { margin-bottom:0; }
.table thead th { color:#495057; font-weight:600; white-space:nowrap; background:#f8f9fa; }
.table td { vertical-align:middle; }
.table-responsive { min-height: 120px; }
.table-empty { color:#adb5bd; text-align:center; padding:2rem 0 !important; }
.badge-status { border-radius:999px; padding:.35rem .6rem; font-size:.75rem; font-weight:600; }
.badge-ok { background:#e8f7ef; color:#198754; }
.badge-off { background:#feecec; color:#dc3545; }
.badge-info-soft { background:#e9f3ff; color:#0d6efd; }
.badge-warn-soft { background:#fff6df; color:#f59f00; }
.app-toast-wrap { position:fixed; right:1rem; top:1rem; z-index:2000; display:flex; flex-direction:column; gap:.75rem; }
.app-toast { min-width:260px; max-width:360px; padding:.85rem 1rem; border-radius:.5rem; box-shadow:0 .5rem 1.5rem rgba(0,0,0,.12); background:#fff; border-left:4px solid var(--mail-primary); color:#243042; }
.app-toast.error { border-left-color:#dc3545; }
.app-toast.warning { border-left-color:#f59f00; }
.filter-grid { display:grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: .875rem; align-items:end; }
.filter-actions { display:flex; gap:.5rem; flex-wrap:wrap; }
.account-toolbar { display:flex; align-items:flex-end; gap:.875rem; flex-wrap:nowrap; }
.account-filter-grid { display:grid; grid-template-columns: repeat(5, minmax(140px, 1fr)); gap:.875rem; align-items:end; flex:1 1 auto; min-width:0; }
.account-filter-grid .filter-actions { flex-wrap:nowrap; white-space:nowrap; }
.account-create-actions { flex:0 0 auto; display:flex; justify-content:flex-end; align-items:flex-end; }
.account-create-actions .btn { white-space:nowrap; }
.modal .form-label { font-weight:600; color:#495057; }
.login-wrapper { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:2rem 1rem; background: radial-gradient(circle at top left, rgba(59,125,221,.18), transparent 32%), linear-gradient(135deg, #f7f9fc 0%, #eef4ff 50%, #ffffff 100%); }
.login-card { width: 100%; max-width: 420px; }
.login-logo { width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 1rem; background:var(--mail-primary); color:#fff; box-shadow:0 1rem 2rem rgba(59,125,221,.25); }
.login-help { color:#6c757d; font-size:.85rem; }
.small-muted { color:#adb5bd; font-size:.825rem; }
@media (max-width: 992px) { .filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } .account-toolbar { flex-wrap:wrap; } .account-filter-grid { grid-template-columns: repeat(2, minmax(0,1fr)); width:100%; } .account-create-actions { margin-left:auto; } }
@media (max-width: 576px) { .filter-grid { grid-template-columns: 1fr; } .account-filter-grid { grid-template-columns: 1fr; } .account-filter-grid .filter-actions { flex-wrap:wrap; } .account-create-actions { width:100%; margin-left:0; } .account-create-actions .btn { width:100%; } .content { padding-left: 1rem; padding-right: 1rem; } .page-title-box h1 { font-size:1.3rem; } }
.resource-card .card-body { min-height: 150px; }
.resource-pie {
  --p: 0;
  --pie-color: var(--mail-primary);
  width: 112px;
  height: 112px;
  flex: 0 0 112px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: conic-gradient(var(--pie-color) calc(var(--p) * 1%), #edf2f7 0);
  position: relative;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.03);
}
.resource-pie::before {
  content: "";
  position: absolute;
  inset: 14px;
  background: #fff;
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(0,0,0,.03);
}
.resource-pie span {
  position: relative;
  z-index: 1;
  font-weight: 700;
  color: #243042;
}
#memoryPie { --pie-color: #20c997; }
#diskPie { --pie-color: #fd7e14; }
.resource-detail { color:#6c757d; font-size:.925rem; display:grid; gap:.45rem; }
.resource-detail strong { color:#243042; font-weight:700; }
.table-card > .card-footer {
  padding: .9rem 1rem;
  background: #fff;
  border-top: 1px solid #edf2f7;
}
.app-pager-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem 1rem;
  flex-wrap: wrap;
  width: 100%;
}
.app-pager-info {
  color: #6c757d;
  font-size: .875rem;
  line-height: 1.8rem;
  white-space: nowrap;
}
.app-pager-info strong { color: #243042; font-weight: 700; }
.app-pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: .35rem;
  flex-wrap: wrap;
}
.app-page-btn,
.app-page-ellipsis {
  min-width: 34px;
  height: 34px;
  padding: 0 .65rem;
  border-radius: .45rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: .875rem;
  line-height: 1;
}
.app-page-btn {
  border: 1px solid #dce4ef;
  background: #fff;
  color: #495057;
  cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.app-page-btn:hover:not(:disabled):not(.is-active) {
  background: #f4f7fb;
  border-color: #cbd7e6;
  color: var(--mail-primary);
}
.app-page-btn.is-active {
  background: var(--mail-primary);
  border-color: var(--mail-primary);
  color: #fff;
  box-shadow: 0 .35rem .9rem rgba(59, 125, 221, .22);
}
.app-page-btn.is-disabled,
.app-page-btn:disabled {
  cursor: not-allowed;
  color: #b6c2d0;
  background: #f8fafc;
  border-color: #e8edf4;
  box-shadow: none;
}
.app-page-wide { min-width: 64px; }
.app-page-ellipsis { color: #9aa8b7; padding: 0 .25rem; }
@media (max-width: 576px) {
  .resource-card .card-body { align-items:flex-start !important; }
  .resource-pie { width:96px; height:96px; flex-basis:96px; }
  .resource-pie::before { inset:12px; }
  .app-pager-wrap { justify-content: center; }
  .app-pager-info { width: 100%; text-align: center; white-space: normal; }
  .app-pager { width: 100%; justify-content: center; }
  .app-page-wide { min-width: 58px; }
}

/* ===== Modal fallback: 不依赖 AdminKit/Bootstrap，也保证弹窗浮在列表上方 ===== */
.modal {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 3100 !important;
  display: none !important;
  width: 100% !important;
  height: 100% !important;
  overflow-x: hidden !important;
  overflow-y: auto !important;
  outline: 0 !important;
  background: transparent !important;
}
.modal.show,
.modal.app-modal-active {
  display: block !important;
}
.modal-dialog {
  position: relative !important;
  width: auto !important;
  margin: 1.75rem auto !important;
  pointer-events: none !important;
}
.modal-dialog-centered {
  display: flex !important;
  align-items: center !important;
  min-height: calc(100% - 3.5rem) !important;
}
.modal-lg { max-width: 800px !important; }
.modal-content {
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  pointer-events: auto !important;
  background-color: #fff !important;
  background-clip: padding-box !important;
  border: 0 !important;
  border-radius: .55rem !important;
  box-shadow: 0 1.25rem 3rem rgba(15, 23, 42, .32) !important;
  outline: 0 !important;
}
.modal-header,
.modal-footer {
  display: flex !important;
  align-items: center !important;
  padding: 1rem 1.25rem !important;
}
.modal-header {
  justify-content: space-between !important;
  border-bottom: 1px solid #edf2f7 !important;
}
.modal-footer {
  justify-content: flex-end !important;
  gap: .5rem !important;
  border-top: 1px solid #edf2f7 !important;
  background: #f8fafc !important;
}
.modal-title { margin: 0 !important; font-size: 1rem !important; font-weight: 700 !important; color:#243042 !important; }
.modal-body { position: relative !important; flex: 1 1 auto !important; padding: 1.25rem !important; }
.modal .form-label { font-weight: 600 !important; color: #495057 !important; margin-bottom: .35rem !important; }
.modal .form-control,
.modal .form-select {
  display: block !important;
  width: 100% !important;
  min-height: 38px !important;
  padding: .45rem .75rem !important;
  font-size: .925rem !important;
  font-weight: 400 !important;
  line-height: 1.5 !important;
  color: #495057 !important;
  background-color: #fff !important;
  border: 1px solid #d9e2ef !important;
  border-radius: .35rem !important;
  box-sizing: border-box !important;
}
.modal .form-control:focus,
.modal .form-select:focus {
  border-color: #9cbff6 !important;
  outline: 0 !important;
  box-shadow: 0 0 0 .2rem rgba(59,125,221,.12) !important;
}
.modal .mb-3 { margin-bottom: 1rem !important; }
.btn-close {
  box-sizing: content-box !important;
  width: 1em !important;
  height: 1em !important;
  padding: .25em .25em !important;
  color: #000 !important;
  background: transparent !important;
  border: 0 !important;
  border-radius: .25rem !important;
  opacity: .55 !important;
  cursor: pointer !important;
  position: relative !important;
}
.btn-close::before,
.btn-close::after {
  content: "";
  position: absolute;
  left: 50%; top: 50%;
  width: 1.1rem; height: 2px;
  background: #495057;
  transform-origin: center;
}
.btn-close::before { transform: translate(-50%, -50%) rotate(45deg); }
.btn-close::after { transform: translate(-50%, -50%) rotate(-45deg); }
.btn-close:hover { opacity: .85 !important; }
.modal-backdrop,
.app-modal-backdrop {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 3090 !important;
  width: 100vw !important;
  height: 100vh !important;
  background-color: rgba(17, 24, 39, .58) !important;
}
.modal-backdrop.fade { opacity: 0; }
.modal-backdrop.show,
.app-modal-backdrop.show { opacity: 1 !important; }
body.modal-open {
  overflow: hidden !important;
  padding-right: 0 !important;
}
@media (max-width: 576px) {
  .modal-dialog { margin: .75rem !important; }
  .modal-dialog-centered { min-height: calc(100% - 1.5rem) !important; }
  .modal-lg { max-width: none !important; }
  .modal-header, .modal-footer { padding: .875rem 1rem !important; }
  .modal-body { padding: 1rem !important; }
}

.email-index-card { margin-top: 1rem; }
.email-index-table { min-width: 1120px; }
.email-index-table th,
.email-index-table td { vertical-align: top; }
.email-index-address,
.email-index-subject {
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.email-index-action-cell { white-space: nowrap; }
.email-index-content-cell { max-width: 260px; }
.email-index-preview {
  max-width: 240px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #495057;
  font-size: .875rem;
}
.email-content-pre {
  max-height: 62vh;
  overflow: auto;
  margin: 0;
  padding: 1rem;
  border-radius: .45rem;
  background: #f8fafc;
  border: 1px solid #edf2f7;
  color: #243042;
  white-space: pre-wrap;
  word-break: break-word;
  font-size: .875rem;
}