/* ==========================================================================
   管理后台样式
   ========================================================================== */
.adm-body { margin: 0; background: #f4f6f9; font-family: var(--font); color: var(--text); }
.adm-body * { box-sizing: border-box; }

.adm-side {
  position: fixed; left: 0; top: 0; bottom: 0; width: 220px; background: #121a2b;
  color: #aeb9ca; display: flex; flex-direction: column; z-index: 50;
}
.adm-brand { display: flex; align-items: center; gap: 10px; padding: 18px 18px 16px; color: #fff; }
.adm-brand:hover { color: #fff; }
.adm-brand .logo-mark { width: 32px; height: 32px; border-radius: 8px; background: linear-gradient(135deg, #059af0, #6a5cff); display: grid; place-items: center; font-weight: 800; font-size: 15px; }
.adm-brand b { font-size: 15px; letter-spacing: .5px; }
.adm-brand small { display: block; font-size: 10px; color: #7c8ba1; letter-spacing: 1px; }
.adm-nav { flex: 1; overflow-y: auto; padding: 6px 10px; }
.adm-nav a {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 8px;
  color: #aeb9ca; font-size: 14px; margin-bottom: 2px;
}
.adm-nav a:hover { background: rgba(255, 255, 255, .06); color: #fff; }
.adm-nav a.active { background: linear-gradient(90deg, rgba(5, 154, 240, .28), rgba(106, 92, 255, .18)); color: #fff; font-weight: 600; }
.adm-nav a .ic { width: 16px; height: 16px; }
.adm-side-foot { padding: 12px 16px 18px; border-top: 1px solid rgba(255, 255, 255, .08); font-size: 12px; }
.adm-side-foot a { display: flex; align-items: center; gap: 8px; color: #8c9bb0; padding: 6px 4px; }
.adm-side-foot a:hover { color: #fff; }

.adm-main { margin-left: 220px; min-height: 100vh; display: flex; flex-direction: column; }
.adm-topbar {
  height: 56px; background: #fff; border-bottom: 1px solid #e8ecf2; display: flex; align-items: center;
  justify-content: space-between; padding: 0 22px; position: sticky; top: 0; z-index: 30;
}
.adm-crumb { font-size: 15px; font-weight: 600; display: flex; align-items: center; gap: 8px; }
.adm-crumb .ic { color: var(--main); }
.adm-user { display: flex; align-items: center; gap: 12px; font-size: 13px; color: #667085; }
.adm-user .who { display: flex; align-items: center; gap: 7px; }
.adm-user .who b { color: #2f3a4c; }
.adm-content { padding: 22px; flex: 1; }

.adm-card { background: #fff; border: 1px solid #e8ecf2; border-radius: 10px; margin-bottom: 18px; overflow: hidden; }
.adm-card-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 18px; border-bottom: 1px solid #f0f2f6; gap: 10px; flex-wrap: wrap; }
.adm-card-head h2 { font-size: 15px; display: flex; align-items: center; gap: 7px; }
.adm-card-head h2 .ic { width: 16px; height: 16px; color: var(--main); }
.adm-card-body { padding: 18px; }
.adm-card-body.flush { padding: 0; }

.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 18px; }
.adm-stat { background: #fff; border: 1px solid #e8ecf2; border-radius: 10px; padding: 16px 18px; }
.adm-stat .k { font-size: 12px; color: #8a94a6; display: flex; align-items: center; gap: 6px; }
.adm-stat .v { font-size: 26px; font-weight: 700; margin-top: 5px; font-variant-numeric: tabular-nums; color: #1b2436; }
.adm-stat .v small { font-size: 12px; font-weight: 400; color: #98a1b1; margin-left: 4px; }
.adm-stat .ic { width: 14px; height: 14px; color: var(--main); }

.adm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.adm-table th { background: #fafbfd; color: #667085; font-weight: 600; text-align: left; padding: 10px 14px; border-bottom: 1px solid #eef1f5; white-space: nowrap; }
.adm-table td.nw { white-space: nowrap; }
.adm-table td { padding: 11px 14px; border-bottom: 1px solid #f4f6f9; vertical-align: middle; }
.adm-table tr:hover td { background: #fafcff; }
.adm-table tr:last-child td { border-bottom: 0; }
.adm-table .muted { font-size: 12px; }
.adm-table .acts { display: flex; gap: 6px; flex-wrap: wrap; }
.adm-table input.layui-input { height: 32px; }

.adm-toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-search { display: flex; }
.adm-search .layui-input { height: 34px; width: 240px; border-radius: 6px 0 0 6px; }
.adm-search button { height: 34px; border-radius: 0 6px 6px 0; }
.adm-empty { padding: 46px 0; text-align: center; color: #b3bac6; font-size: 13px; }

.adm-form-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 16px; }
.adm-form-grid .full { grid-column: 1 / -1; }
.adm-hint { font-size: 12px; color: #98a1b1; margin-top: 4px; line-height: 1.7; }
.adm-tag { display: inline-block; padding: 1px 7px; border-radius: 4px; background: #f2f5f8; color: #667085; font-size: 11px; white-space: nowrap; }
.adm-tag.on { background: #e7f7ef; color: #16a06a; }
.adm-tag.off { background: #f4f5f7; color: #9aa3b2; }
.adm-tag.warn { background: #fff5e6; color: #b7791f; }

.chart { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding: 8px 2px 0; }
.chart .bar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; justify-content: flex-end; height: 100%; }
.chart .bar .fill { width: 100%; max-width: 34px; background: linear-gradient(180deg, #6a5cff, #059af0); border-radius: 6px 6px 3px 3px; min-height: 3px; transition: height .4s; }
.chart .bar .lbl { font-size: 11px; color: #98a1b1; }
.chart .bar .num { font-size: 11px; color: #667085; }

.adm-split { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; align-items: start; }
.adm-list-row { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px dashed #f0f2f6; font-size: 13px; }
.adm-list-row:last-child { border-bottom: 0; }
.adm-list-row .t { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.adm-list-row .time { color: #98a1b1; font-size: 12px; }

.adm-login { min-height: 100vh; display: grid; place-items: center; background: linear-gradient(150deg, #0b1526, #13233d 55%, #1c3357); padding: 20px; }
.adm-login-box { width: 380px; max-width: 100%; background: #fff; border-radius: 14px; padding: 34px 32px; box-shadow: 0 30px 80px rgba(0, 0, 0, .35); }
.adm-login-box .brand { display: flex; align-items: center; gap: 10px; margin-bottom: 22px; }
.adm-login-box .brand .logo-mark { width: 38px; height: 38px; border-radius: 10px; background: linear-gradient(135deg, #059af0, #6a5cff); color: #fff; display: grid; place-items: center; font-weight: 800; }
.adm-login-box h1 { font-size: 19px; margin: 0; }
.adm-login-box p { color: #98a1b1; font-size: 12px; margin: 3px 0 0; }
.adm-login-box .layui-input { height: 42px; margin-bottom: 14px; }
.adm-login-box .layui-btn { height: 42px; width: 100%; }
.adm-login-foot { margin-top: 16px; font-size: 12px; color: #98a1b1; text-align: center; line-height: 1.9; }

@media (max-width: 980px) {
  .adm-side { transform: translateX(-100%); transition: transform .2s; }
  .adm-side.open { transform: none; }
  .adm-main { margin-left: 0; }
  .adm-stats { grid-template-columns: repeat(2, 1fr); }
  .adm-split { grid-template-columns: 1fr; }
  .adm-form-grid { grid-template-columns: 1fr; }
  .adm-menu-btn { display: inline-grid !important; }
  .adm-table { display: block; overflow-x: auto; white-space: nowrap; }
}
.adm-menu-btn { display: none; }