/* ===========================================================
   集印章 · 管理后台主题（Element Plus 免构建）
   品牌主色：小程序橙 #FF8057
   =========================================================== */

:root {
  /* —— Element Plus 主色族（需手动派生 light/dark，UMD 构建不会自动算） —— */
  --el-color-primary: #FF8057;
  --el-color-primary-light-3: #FFA689;
  --el-color-primary-light-5: #FFC0AB;
  --el-color-primary-light-7: #FFD9CD;
  --el-color-primary-light-8: #FFE6DD;
  --el-color-primary-light-9: #FFF2EE;
  --el-color-primary-dark-2: #CC6646;

  /* 圆角统一，更柔和 */
  --el-border-radius-base: 8px;
  --el-border-radius-small: 6px;

  /* 品牌辅助色 */
  --brand: #FF8057;
  --brand-2: #FFB088;
  --brand-grad: linear-gradient(135deg, #FF9A6C 0%, #FF6F50 100%);

  /* 中性色 */
  --bg: #F4F6FB;
  --bg-2: #FFFFFF;
  --text-1: #1F2733;
  --text-2: #5A6677;
  --text-3: #9AA5B5;
  --border: #E7EAF0;

  --sidebar-w: 224px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "PingFang SC",
    "Hiragino Sans GB", "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;
  background: var(--bg);
  color: var(--text-1);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
#app { height: 100%; }

/* ===================== 布局 ===================== */
.admin-layout { height: 100vh; }

.admin-aside {
  background: #1F2533;
  border-right: none;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 20px 18px 16px;
  color: #fff;
}
.brand-logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: var(--brand-grad);
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 20px; color: #fff;
  box-shadow: 0 6px 14px rgba(255, 111, 80, .4);
}
.brand-name { font-size: 16px; font-weight: 700; line-height: 1.2; }
.brand-tag { font-size: 11px; color: #8C93A6; margin-top: 2px; }

/* 侧边栏菜单覆盖 */
.admin-aside .el-menu {
  background: transparent;
  border-right: none;
  flex: 1;
  padding: 4px 10px;
}
.admin-aside .el-menu-item {
  border-radius: 8px;
  margin: 4px 0;
  color: #B6BDCC;
  height: 44px;
  line-height: 44px;
}
.admin-aside .el-menu-item .el-icon { color: #8C93A6; }
.admin-aside .el-menu-item.is-active {
  background: var(--brand-grad);
  color: #fff;
  font-weight: 600;
}
.admin-aside .el-menu-item.is-active .el-icon { color: #fff; }
.admin-aside .el-menu-item:hover:not(.is-active) {
  background: rgba(255,255,255,.06);
  color: #fff;
}
.pending-badge { margin-left: auto; }
.admin-aside .el-badge__content { border: none; }

/* 侧边栏底部 */
.sidebar-foot {
  padding: 14px 16px 18px;
  border-top: 1px solid rgba(255,255,255,.08);
}
.me {
  display: flex; align-items: center; gap: 10px;
  color: #D8DCE6; margin-bottom: 12px;
}
.me .el-avatar { background: var(--brand); }
.me-name { font-size: 13px; font-weight: 600; color: #fff; }
.me-role { font-size: 11px; color: #8C93A6; }
.back-to-mp { width: 100%; margin-bottom: 8px; }
.btn-logout {
  width: 100%;
  background: rgba(255,255,255,.07);
  border: none; color: #C7CCD8;
  height: 36px; border-radius: 8px; cursor: pointer;
  font-size: 13px;
}
.btn-logout:hover { background: rgba(255,255,255,.14); color: #fff; }
.btn-pwd {
  width: 100%;
  margin-bottom: 8px;
  background: rgba(64,158,255,.14);
  border: 1px solid rgba(64,158,255,.4); color: #79BBFF;
  height: 36px; border-radius: 8px; cursor: pointer;
  font-size: 13px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
}
.btn-pwd:hover { background: rgba(64,158,255,.26); color: #fff; }
.form-hint { margin-left: 12px; color: #909399; font-size: 12px; line-height: 1.4; }

/* 顶栏 */
.admin-header {
  background: var(--bg-2);
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  padding: 0 20px;
  height: 60px;
  box-shadow: 0 1px 6px rgba(31,39,51,.04);
}
.hamburger {
  display: none;
  background: none; border: none; cursor: pointer;
  font-size: 22px; color: var(--text-2);
  margin-right: 12px; padding: 4px;
}
.page-title { font-size: 18px; font-weight: 700; }
.header-spacer { flex: 1; }

/* 主内容 */
.admin-main { background: var(--bg); padding: 20px; }

/* ===================== 通用区块 ===================== */
.page-head {
  display: flex; align-items: center; flex-wrap: wrap; gap: 12px;
  margin-bottom: 16px;
}
.page-head .title { font-size: 17px; font-weight: 700; }
.page-head .spacer { flex: 1; }
.toolbar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin-bottom: 14px;
}
.toolbar .el-input, .toolbar .el-select { width: 180px; }

.card-block {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(31,39,51,.05);
  margin-bottom: 16px;
}
.card-head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.card-title { font-size: 15px; font-weight: 700; }

/* 统计卡片 */
.metric-row {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px;
  margin-bottom: 16px;
}
.metric {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 18px 16px;
  box-shadow: 0 2px 10px rgba(31,39,51,.05);
  border: 1px solid transparent;
}
.metric.accent {
  background: var(--brand-grad);
  color: #fff;
  border: none;
}
.metric-label { font-size: 13px; color: var(--text-3); }
.metric.accent .metric-label { color: rgba(255,255,255,.85); }
.metric-value { font-size: 26px; font-weight: 800; margin-top: 6px; line-height: 1.1; }
.metric-sub { font-size: 12px; color: var(--text-3); margin-top: 4px; }

/* 趋势迷你图 */
.trend-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
  margin-bottom: 16px;
}
.trend-card {
  background: var(--bg-2);
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 10px rgba(31,39,51,.05);
}
.trend-title { font-size: 13px; color: var(--text-2); margin-bottom: 8px; }
.trend-svg { width: 100%; height: 44px; display: block; }
.trend-total { font-size: 12px; color: var(--text-3); margin-top: 6px; }

/* 用户单元格 */
.user-cell { display: flex; align-items: center; gap: 8px; }
.user-cell .el-avatar { background: var(--brand); flex: none; }

/* 登录页 */
.login-wrap {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 20%, #FFEDE4 0%, #F4F6FB 55%);
  padding: 20px;
}
.login-card { width: 360px; max-width: 100%; }
.login-brand {
  display: flex; align-items: center; gap: 12px; margin-bottom: 18px;
}
.login-tip { font-size: 12px; color: var(--text-3); margin-top: 10px; text-align: center; }

/* ===================== 响应式 ===================== */
@media (max-width: 900px) {
  .admin-aside { display: none; }
  .hamburger { display: inline-flex; }
  .admin-header { padding: 0 14px; }
  .admin-main { padding: 14px; }
  .metric-row { grid-template-columns: repeat(2, 1fr); }
  .trend-row { grid-template-columns: 1fr; }
  .page-title { font-size: 16px; }
}

@media (max-width: 560px) {
  .metric-row { grid-template-columns: 1fr; }
  .toolbar .el-input, .toolbar .el-select { width: 100%; }
}