html, body, #app { height: 100%; margin: 0; }
* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue',
    Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', sans-serif;
  background: #f5f7fa;
  color: #1f2329;
}
.svg-icon { display: inline-block; vertical-align: -0.15em; }

/* -------------------- 登录页 -------------------- */
.login-wrap {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #1677ff 0%, #69b1ff 100%);
  padding: 24px;
}
.login-brand {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}
.login-brand-text {
  color: #fff;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: 0.5px;
}
.login-card {
  width: 380px;
  max-width: 100%;
  border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.16);
}
.login-title { font-size: 20px; font-weight: 600; }
.login-sub { color: #8c8c8c; font-size: 13px; margin: 6px 0 24px; }

/* 登录验证码 */
.login-captcha { display: flex; align-items: center; gap: 10px; }
.login-captcha__img {
  flex: none;
  width: 124px;
  height: 40px;
  border: 1px solid #e5e7eb;
  border-radius: 6px;
  cursor: pointer;
  object-fit: cover;
  background: #f6f8fc;
}

/* -------------------- 品牌标记 -------------------- */
.logo-mark {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, #1677ff, #69b1ff);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
}

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

.admin-sider {
  box-shadow: 2px 0 8px rgba(29, 35, 41, 0.05);
  z-index: 12;
}
.sider-logo {
  height: 64px;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 20px;
  overflow: hidden;
  border-bottom: 1px solid #f0f0f0;
}
.logo-text {
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  color: #1f2329;
}
.admin-sider .ant-menu-light { border-inline-end: none !important; }
.admin-sider .ant-menu-root.ant-menu-inline { margin-top: 15px; }
.admin-sider .ant-layout-sider-children { display: flex; flex-direction: column; }

.admin-layout .admin-header {
  background: #fff !important;
  color: #1f2329;
  padding: 0 20px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
  position: sticky;
  top: 0;
  z-index: 11;
}
/* 左侧（面包屑）吸收压缩，保证右侧申请按钮不被挤掉 */
.header-left { display: flex; align-items: center; gap: 12px; min-width: 0; flex: 1 1 auto; overflow: hidden; }
.trigger { font-size: 18px; flex: none; }
/* 右侧操作区固定宽度：窗口压缩时按钮文字不能消失、只剩角标 */
.header-right { display: flex; align-items: center; gap: 12px; flex: none; }
.header-right .ant-badge { flex: none; }
.header-right .header-apply {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  flex: 0 0 auto;
  min-width: 118px;
  height: 34px;
  padding: 0 14px;
  border-radius: 17px !important;
  font-size: 13px;
  white-space: nowrap;
}
.header-user {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.2s;
}
.header-user:hover { background: rgba(0, 0, 0, 0.04); }
.header-username { font-size: 14px; color: #1f2329; }

/* -------------------- 右上角「新申请」通知（堆叠 stack） -------------------- */
/*
 * antd-vue 4.x 的通知卡片就是 .ant-notification-notice（没有 wrapper 层），
 * 按「旧 → 新」追加在列表末尾；这里用 order 把最新一条排到最上（展开态顺序），
 * 折叠态改用 grid 把各条叠在同一格 + z-index 控制层叠：最新一条完整，
 * 其余卡片高度不变、逐层下移露出底部一条边、宽度每层缩小 6%（真正的遮挡关系）。
 */
.ant-notification {
  max-width: calc(100vw - 32px);
}

/*
 * 容器：固定宽度（与 antd 通知标准宽度一致）。
 * 通知内容是「单行不换行」的长单号时，容器会被撑大 → 各层按百分比算出的宽度随之失真，
 * 因此这里锁定宽度，并把滚动交给容器自己。
 */
.ant-notification-topRight {
  width: 384px !important;
  max-width: calc(100vw - 32px) !important;
  box-sizing: border-box !important;
  max-height: calc(100vh - 24px) !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  padding-right: 2px;
  padding-bottom: 24px;
}

/*
 * 列表默认：flex 倒序 —— 通知在 DOM 里是「旧 → 新」追加的，
 * 倒序后即为「新 → 旧」从上到下；不超过 5 条时全部完整展示
 */
.ant-notification-topRight > div {
  display: flex;
  flex-direction: column-reverse;
}

/* 卡片基础：水平居中（宽度由折叠层数决定，左右间距均分） */
.ant-notification-topRight .ant-notification-notice {
  min-width: 0;
  max-width: 100%;
  justify-self: center;
  /* antd 默认给卡片 margin-left: auto（靠右），这里强制左右自适应以保持居中 */
  margin-left: auto !important;
  margin-right: auto !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.14);
  transition: width 0.25s ease, transform 0.25s ease, opacity 0.25s ease;
}

/* 说明/标题里的长单号允许断行，避免把卡片自身撑宽 */
.ant-notification-topRight .ant-notification-notice-description,
.ant-notification-topRight .ant-notification-notice-message {
  word-break: break-word;
  overflow-wrap: anywhere;
}

/* ---------- 折叠态：仅当通知超过 5 条时才生效 ---------- */
/* 用 :has() 判断列表里是否已有第 6 条通知，条数不多时保持完整展示 */

.ant-notification-topRight:not(:hover) > div:has(> .ant-notification-notice:nth-child(6)) {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

/* 只展示最新 5 层，更早的收起（悬浮展开后可见并滚动查看） */
.ant-notification-topRight:not(:hover) > div:has(> .ant-notification-notice:nth-child(6)) .ant-notification-notice:nth-last-child(n + 6) {
  display: none;
}

/* 最新 5 条叠在同一格 */
.ant-notification-topRight:not(:hover) > div:has(> .ant-notification-notice:nth-child(6)) .ant-notification-notice:nth-last-child(-n + 5) {
  grid-area: 1 / 1;
}

/* 最新一条在最上层，其余逐层下沉：露出底部约 5px，宽度每层 -6% */
.ant-notification-topRight:not(:hover) > div:has(> .ant-notification-notice:nth-child(6)) .ant-notification-notice:nth-last-child(1) {
  z-index: 5;
}
.ant-notification-topRight:not(:hover) > div:has(> .ant-notification-notice:nth-child(6)) .ant-notification-notice:nth-last-child(2) {
  z-index: 4;
  width: 94%;
  transform: translateY(5px);
}
.ant-notification-topRight:not(:hover) > div:has(> .ant-notification-notice:nth-child(6)) .ant-notification-notice:nth-last-child(3) {
  z-index: 3;
  width: 88%;
  transform: translateY(10px);
}
.ant-notification-topRight:not(:hover) > div:has(> .ant-notification-notice:nth-child(6)) .ant-notification-notice:nth-last-child(4) {
  z-index: 2;
  width: 82%;
  transform: translateY(15px);
}
.ant-notification-topRight:not(:hover) > div:has(> .ant-notification-notice:nth-child(6)) .ant-notification-notice:nth-last-child(5) {
  z-index: 1;
  width: 76%;
  transform: translateY(20px);
}

.admin-content { background: #f5f7fa; }
.content-body { padding: 20px 24px; }
.admin-footer {
  text-align: center;
  color: #8c8c8c;
  font-size: 13px;
  background: #f5f7fa;
  padding: 16px;
}

/* -------------------- 工作台 -------------------- */
.workbench .ant-card { border-radius: 10px; }
.wb-welcome { margin-bottom: 16px; }
.wb-welcome .ant-card-body {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}
.welcome-main { display: flex; align-items: center; gap: 16px; }
.welcome-hello { font-size: 18px; font-weight: 600; color: #1f2329; }
.welcome-desc { color: #8c8c8c; margin-top: 6px; font-size: 13px; }
.welcome-stats { display: flex; gap: 40px; }
.ws-item { text-align: right; }
.ws-label { color: #8c8c8c; font-size: 13px; }
.ws-value { font-size: 22px; font-weight: 600; color: #1f2329; margin-top: 4px; }

.wb-row { margin-bottom: 16px; }
.wb-row:last-child { margin-bottom: 0; }

.stat-card { display: flex; align-items: center; gap: 14px; }
.stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-title { color: #8c8c8c; font-size: 13px; }
.stat-value { font-size: 22px; font-weight: 600; color: #1f2329; margin-top: 2px; }

.link-list .link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  color: #5a5f6b;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.2s;
}
.link-list .link-item:last-child { border-bottom: none; }
.link-list .link-item:hover { color: #1677ff; }
.link-name { display: inline-flex; align-items: center; gap: 8px; }

.wb-todo { margin-top: 16px; }
.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f0f0;
}
.todo-item:last-child { border-bottom: none; }
.todo-text { flex: 1; color: #5a5f6b; font-size: 14px; }
.todo-count {
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: #f0f5ff;
  color: #1677ff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* -------------------- CRUD 通用 -------------------- */
.crud-toolbar { margin: 30px 0 10px 5px; }

/* 行操作按钮内的图标 */
.act-btn-icon {
  display: inline-flex;
  align-items: center;
  margin-right: 4px;
  vertical-align: -2px;
}
.crud-form .ant-form-item { margin-bottom: 16px; }
.crud-form .ant-form-item:last-child { margin-bottom: 0; }

/* 表单字段控件（通用） */
.ff-wrap { width: 100%; }
.img-field { display: flex; gap: 14px; align-items: flex-start; }
.img-preview-box {
  width: 108px;
  height: 108px;
  flex: 0 0 108px;
  border: 1px dashed #d9d9d9;
  border-radius: 10px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fafafa;
}
.img-preview { width: 100%; height: 100%; object-fit: contain; display: block; }
.img-empty { color: #bfbfbf; font-size: 12px; }
.img-field-ops { flex: 1; display: flex; flex-direction: column; gap: 10px; }
.cell-img {
  display: block;
  max-width: 110px;
  max-height: 54px;
  width: auto;
  height: auto;
  object-fit: contain;
  border-radius: 6px;
  border: 1px solid #f0f0f0;
  background: #fff;
  cursor: zoom-in;
}
/* 图片放大预览（列表内点击图片打开） */
.img-preview-full {
  display: block;
  margin: 0 auto;
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
  background: #fff;
}

/* -------------------- 工作台（升级版） -------------------- */
.wb-hero {
  position: relative;
  overflow: hidden;
  border-radius: 14px;
  background: linear-gradient(120deg, #2f6bff 0%, #4f8bff 48%, #7ab3ff 100%);
  color: #fff;
  padding: 26px 28px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(47, 107, 255, 0.22);
}
.wb-hero::before {
  content: '';
  position: absolute;
  right: -70px;
  top: -90px;
  width: 260px;
  height: 260px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
}
.wb-hero::after {
  content: '';
  position: absolute;
  right: 130px;
  bottom: -120px;
  width: 210px;
  height: 210px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
}
.wb-hero-main { display: flex; align-items: center; gap: 18px; position: relative; z-index: 1; }
.wb-avatar {
  width: 58px;
  height: 58px;
  flex: 0 0 58px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 24px;
  font-weight: 700;
}
.wb-hello { font-size: 20px; font-weight: 600; letter-spacing: 0.3px; }
.wb-sub { margin-top: 7px; font-size: 13px; opacity: 0.88; }
.wb-hero-stats { display: flex; gap: 44px; position: relative; z-index: 1; }
.wb-hero-stats .hs-item { text-align: right; }
.hs-label { font-size: 13px; opacity: 0.82; }
.hs-value { font-size: 24px; font-weight: 700; margin-top: 6px; letter-spacing: 0.5px; }

.wb-row { margin-bottom: 16px; }
.wb-row:last-child { margin-bottom: 0; }

.stat-card { display: flex; align-items: center; gap: 14px; }
.stat-icon {
  width: 48px;
  height: 48px;
  flex: 0 0 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.stat-title { color: #8c8c8c; font-size: 13px; }
.stat-value { font-size: 22px; font-weight: 600; color: #1f2329; margin-top: 2px; }
.stat-extra {
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px dashed #f0f0f0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  font-size: 12px;
  color: #8c8c8c;
}
.stat-extra .up { color: #52c41a; }
.stat-extra .warn { color: #fa8c16; }

/* 近 7 日趋势 */
.wb-trend { display: flex; align-items: flex-end; gap: 10px; height: 408px; padding: 6px 4px 0; }
.trend-item { flex: 1; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; }
.trend-bar-wrap { flex: 1; width: 100%; display: flex; align-items: flex-end; justify-content: center; }
.trend-bar {
  width: 68%;
  max-width: 36px;
  min-height: 4px;
  border-radius: 6px 6px 2px 2px;
  background: linear-gradient(180deg, #8cc0ff, #2f6bff);
  transition: height 0.45s ease, opacity 0.2s;
}
.trend-bar:hover { opacity: 0.82; }
.trend-amount { font-size: 11px; color: #5a5f6b; }
.trend-date { font-size: 12px; color: #8c8c8c; }

/* 快捷入口 */
.link-list .link-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 0;
  color: #5a5f6b;
  cursor: pointer;
  border-bottom: 1px solid #f0f0f0;
  transition: color 0.2s, padding 0.2s;
}
.link-list .link-item:last-child { border-bottom: none; }
.link-list .link-item:hover { color: #1677ff; padding-left: 4px; }
.link-name { display: inline-flex; align-items: center; gap: 8px; }

.wb-todo { margin-top: 16px; }
.todo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f0f0;
  cursor: pointer;
  transition: color 0.2s;
}
.todo-item:last-child { border-bottom: none; }
.todo-item:hover .todo-text { color: #1677ff; }
.todo-text { flex: 1; color: #5a5f6b; font-size: 14px; }
.todo-count {
  min-width: 24px;
  height: 22px;
  padding: 0 8px;
  border-radius: 11px;
  background: #f0f5ff;
  color: #1677ff;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* -------------------- 系统设置 -------------------- */
.settings-card .settings-section-title {
  font-size: 15px;
  font-weight: 600;
  color: #1f2329;
  margin: 0 0 18px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.settings-card .settings-section-title::before {
  content: '';
  width: 4px;
  height: 15px;
  border-radius: 2px;
  background: linear-gradient(180deg, #2f6bff, #7ab3ff);
}
.form-tip { color: #8c8c8c; font-size: 12px; line-height: 1.6; margin-top: 6px; }

/* 轮播图管理 */
.banner-list { display: flex; flex-direction: column; gap: 12px; }
.banner-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px;
  border: 1px solid #f0f0f0;
  border-radius: 10px;
  background: #fafbfc;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.banner-item:hover { border-color: #d6e4ff; box-shadow: 0 4px 14px rgba(47, 107, 255, 0.08); }
.banner-thumb {
  width: 128px;
  height: 72px;
  flex: 0 0 128px;
  border-radius: 8px;
  overflow: hidden;
  background: #f0f2f5;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.banner-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.banner-thumb .banner-empty { color: #bfbfbf; font-size: 12px; }
.banner-fields { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.banner-ops { display: flex; flex-direction: column; gap: 6px; }
.banner-empty-block {
  border: 1px dashed #d9d9d9;
  border-radius: 10px;
  padding: 26px;
  text-align: center;
  color: #8c8c8c;
  background: #fafafa;
}
.banner-upload {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  border: 1px dashed #91caff;
  border-radius: 6px;
  color: #1677ff;
  font-size: 13px;
  cursor: pointer;
  background: #f0f7ff;
  transition: all 0.2s;
}
.banner-upload:hover { border-color: #1677ff; background: #e6f4ff; }

/* 富文本编辑器 */
.rich-editor { border: 1px solid #d9d9d9; border-radius: 10px; overflow: hidden; background: #fff; transition: border-color 0.2s; }
.rich-editor:focus-within { border-color: #2f6bff; box-shadow: 0 0 0 2px rgba(47, 107, 255, 0.1); }
.rich-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 3px;
  padding: 8px;
  border-bottom: 1px solid #f0f0f0;
  background: #fafafa;
}
.rich-toolbar .rt-btn {
  min-width: 30px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  cursor: pointer;
  font-size: 13px;
  color: #5a5f6b;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
}
.rich-toolbar .rt-btn:hover { background: #f0f5ff; color: #1677ff; border-color: #d6e4ff; }
.rich-toolbar .rt-sep { width: 1px; height: 18px; background: #e8e8e8; margin: 0 4px; }
/* 代码 / 可视化模式切换 */
.rich-toolbar .rt-btn--mode {
  margin-left: auto;
  color: #1677ff;
  border-color: #d6e4ff;
  background: #f0f7ff;
}
.rich-toolbar .rt-btn--mode:hover { background: #e6f4ff; border-color: #1677ff; }
.rich-toolbar .rt-btn--mode.is-active { background: #1677ff; border-color: #1677ff; color: #fff; }
.rich-body {
  min-height: 340px;
  max-height: 560px;
  overflow: auto;
  padding: 16px 18px;
  outline: none;
  font-size: 14px;
  line-height: 1.75;
  color: #1f2329;
}
.rich-body:empty::before { content: attr(data-placeholder); color: #bfbfbf; }
/* 代码模式：HTML 源码编辑区 */
.rich-code {
  display: block;
  width: 100%;
  min-height: 340px;
  padding: 16px 18px;
  border: none;
  background: transparent;
  outline: none;
  resize: vertical;
  white-space: pre-wrap;
  tab-size: 2;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 13px;
  line-height: 1.75;
  color: #1f2329;
}
.rich-body h2 { font-size: 18px; margin: 12px 0 8px; }
.rich-body h3 { font-size: 16px; margin: 10px 0 6px; }
.rich-body p { margin: 8px 0; }
.rich-body ul, .rich-body ol { padding-left: 22px; margin: 8px 0; }
.rich-body blockquote { margin: 8px 0; padding: 6px 12px; border-left: 3px solid #d9d9d9; color: #5a5f6b; background: #fafafa; }
.rich-body img { max-width: 100%; border-radius: 6px; }
.rich-body hr { border: none; border-top: 1px solid #f0f0f0; margin: 14px 0; }

/* 仿手机预览 */
.phone-preview { display: flex; justify-content: center; padding: 6px 0 20px; }
.phone-frame {
  width: 330px;
  max-width: 100%;
  height: 646px;
  border-radius: 38px;
  background: #1f2329;
  padding: 10px;
  box-shadow: 0 20px 55px rgba(15, 35, 80, 0.28);
  position: sticky;
  top: 84px;
}
.phone-screen {
  width: 100%;
  height: 100%;
  background: #fff;
  border-radius: 29px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  position: relative;
}
.phone-notch {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 108px;
  height: 24px;
  border-radius: 0 0 14px 14px;
  background: #1f2329;
  z-index: 2;
}
.phone-statusbar {
  height: 32px;
  flex: 0 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  font-size: 11px;
  color: #1f2329;
}
.phone-navbar {
  height: 44px;
  flex: 0 0 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  font-weight: 600;
  color: #1f2329;
  border-bottom: 1px solid #f0f0f0;
}
.phone-content { flex: 1; overflow: auto; padding: 14px 16px 24px; font-size: 13px; line-height: 1.85; color: #333; word-break: break-word; }
.phone-content h2 { font-size: 16px; margin: 10px 0 6px; }
.phone-content h3 { font-size: 14px; margin: 8px 0 5px; }
.phone-content p { margin: 7px 0; }
.phone-content ul, .phone-content ol { padding-left: 20px; margin: 7px 0; }
.phone-content blockquote { margin: 7px 0; padding: 5px 10px; border-left: 3px solid #e8e8e8; color: #666; background: #fafafa; }
.phone-content img { max-width: 100%; border-radius: 6px; }
.phone-content hr { border: none; border-top: 1px solid #f0f0f0; margin: 12px 0; }
.phone-placeholder { color: #bfbfbf; font-size: 13px; text-align: center; padding-top: 60px; }

/* -------------------- 管理员设置 -------------------- */
.profile-card {
  border: 1px solid #f0f0f0;
  border-radius: 12px;
  padding: 26px 20px;
  text-align: center;
  background: linear-gradient(180deg, #f7faff 0%, #ffffff 60%);
}
.profile-name { font-size: 18px; font-weight: 600; color: #1f2329; margin-top: 14px; }
.profile-role {
  font-size: 12px;
  color: #1677ff;
  background: #e6f4ff;
  display: inline-block;
  padding: 2px 10px;
  border-radius: 10px;
  margin-top: 6px;
}
.profile-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 0;
  font-size: 13px;
  color: #8c8c8c;
  border-bottom: 1px dashed #f0f0f0;
}
.profile-meta:last-child { border-bottom: none; }
.profile-meta b { color: #1f2329; font-weight: 500; }

/* -------------------- 响应式 -------------------- */
@media (max-width: 1200px) {
  .phone-frame { position: static; margin: 0 auto; }
}
@media (max-width: 992px) {
  /* 申请按钮保持完整显示（固定宽度），改为隐藏用户名等次要信息腾出空间 */
  .header-username { display: none; }
  .welcome-stats { gap: 24px; }
  .wb-hero-stats { gap: 26px; }
}
@media (max-width: 576px) {
  .content-body { padding: 12px; }
  .welcome-stats { width: 100%; justify-content: space-between; }
  .ws-item { text-align: left; }
}

/* -------------------- 多标签页 -------------------- */
.admin-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 44px;
  padding: 0 16px;
  background: #fff;
  border-bottom: 1px solid #f0f0f0;
  overflow-x: auto;
  overflow-y: hidden;
  white-space: nowrap;
}
.admin-tabs::-webkit-scrollbar { height: 0; }

.admin-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  flex: none;
  height: 30px;
  padding: 0 10px 0 12px;
  border: 1px solid #e7e9ee;
  border-radius: 6px;
  background: #fff;
  font-size: 13px;
  color: #4b5563;
  cursor: pointer;
  user-select: none;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s;
}
.admin-tab:hover { color: #1677ff; border-color: #bae0ff; }
.admin-tab.is-active {
  background: #e6f4ff;
  border-color: #91caff;
  color: #1677ff;
  font-weight: 500;
}
/* 工作台标签常驻、无关闭按钮，右侧不留额外空隙 */
.admin-tab.is-home { padding-right: 10px; }
.admin-tab__label { line-height: 1; }
.admin-tab__refresh {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  color: #9ca3af;
  transition: background-color 0.15s, color 0.15s;
}
.admin-tab__refresh:hover { background: rgba(0, 0, 0, 0.08); color: #1677ff; }
.admin-tab__close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  font-size: 15px;
  line-height: 1;
  color: #9ca3af;
  transition: background-color 0.15s, color 0.15s;
}
.admin-tab__close:hover { background: rgba(0, 0, 0, 0.08); color: #1f2937; }