/* admin-console.css —— 管理后台专用样式
 *
 * 为什么单独一份、不改 styles.css：
 *   styles.css 是 17 个生图页面共用的，动它等于动全站。
 *   管理后台只需要覆盖 .console-* 这套类名，单独加载一份更安全、也好回滚。
 *
 * 设计底本：影刀迁移工作台（E:\DSH-影刀迁移工作台项目工程组\01-主工程-yd-migrate-saas\web.html）
 *   紫粉渐变主色 + 半透明玻璃卡片 + 大圆角 + 柔和阴影。
 *   变量名沿用它的语义命名（--brand / --brand-soft …），改配色只动下面这一块。
 *
 * 配色说明（Else哥 2026-09-27：「可以适当的修改颜色」）：
 *   主色保持影刀的紫→粉，但把背景里的紫/蓝光晕压淡了一些 ——
 *   管理后台表格密、停留时间长，光晕太重会晃眼；同时把文字对比度提上去，
 *   保证在浅色玻璃卡片上读小字不费劲。
 */

:root {
  --bg: #f6f8ff;
  --surface: rgba(255, 255, 255, .86);
  --panel: rgba(255, 255, 255, .82);
  --panel-soft: rgba(255, 255, 255, .5);
  --line: rgba(89, 104, 133, .18);
  --line-strong: rgba(89, 104, 133, .26);
  --ink: #1b2334;
  --ink-2: #33405c;
  --muted: #6b7485;
  --brand: #8067ff;
  --brand-2: #ff7ab6;
  --brand-ink: #176a9a;
  --brand-soft: rgba(58, 167, 255, .12);
  --brand-line: rgba(58, 167, 255, .3);
  --green: #12a374;
  --amber: #b25a00;
  --red: #d92d20;
  --radius: 18px;
  --shadow-sm: 0 8px 24px rgba(74, 88, 132, .1);
  --shadow: 0 18px 48px rgba(74, 88, 132, .13);
  --shadow-lg: 0 28px 70px rgba(74, 88, 132, .18);
}

/* ── 页面底 ─────────────────────────────────────────────────────────── */
body.admin-console-page {
  margin: 0;
  color: var(--ink);
  background:
    radial-gradient(circle at 10% 4%, rgba(128, 103, 255, .12), transparent 32%),
    radial-gradient(circle at 88% 14%, rgba(58, 167, 255, .13), transparent 36%),
    linear-gradient(135deg, var(--bg), #fff8f5);
  font: 13px/1.62 "Microsoft YaHei", "PingFang SC", "Segoe UI", Arial, sans-serif;
}

/* ── 整体骨架：两栏 grid，主区域居中 ─────────────────────────────────
 *
 * ⚠️ 这里踩过一个坑（2026-09-27 修）：
 *   styles.css 里 .console-page 是 `grid-template-columns: 246px minmax(0,1fr)` 的两栏网格。
 *   我一开始给侧栏写了 `position: fixed` 想让它悬浮 —— 结果它被移出 grid 流，
 *   网格里只剩 .console-main 一个元素，它直接落到【第一列】，
 *   宽度只剩 246px。里面的卡片有 1384px，全被撑破，右边还留一大片空白，
 *   看起来就是「没居中、表格还被截断」。
 *
 *   正确做法：侧栏留在流里用 sticky，主区域用 justify-self 居中。
 */
.admin-console-page {
  grid-template-columns: 240px minmax(0, 1fr);
}

.admin-console-page .console-sidebar {
  position: sticky;
  top: 16px;
  height: auto;
  max-height: calc(100vh - 32px);
  margin: 16px 0 16px 16px;
  padding: 16px 14px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-right: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow-y: auto;
}

.admin-console-page .console-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  text-decoration: none;
  color: inherit;
}

.admin-console-page .console-brand span {
  display: grid;
  place-items: center;
  width: 38px;
  height: 38px;
  border-radius: 13px;
  color: #fff;
  font-weight: 900;
  font-size: 14px;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 8px 20px rgba(128, 103, 255, .3);
}

.admin-console-page .console-brand strong {
  font-size: 15px;
  letter-spacing: .2px;
}

.admin-console-page .console-menu {
  display: grid;
  gap: 4px;
}

.admin-console-page .console-menu a {
  display: block;
  padding: 9px 12px;
  border-radius: 12px;
  color: var(--ink-2);
  font-weight: 700;
  font-size: 13px;
  text-decoration: none;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.admin-console-page .console-menu a:hover {
  background: rgba(58, 167, 255, .12);
  color: var(--brand-ink);
  transform: translateX(2px);
}

.admin-console-page .console-menu a.active {
  color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 10px 22px rgba(128, 103, 255, .26);
}

/* ── 主区域 ─────────────────────────────────────────────────────────── */
/* 撑满剩余宽度，但给一个上限并居中 —— 屏幕特别宽时不要让卡片被拉成一条长带子 */
.admin-console-page .console-main {
  width: 100%;
  max-width: 1560px;
  margin: 0;
  justify-self: center;
  padding: 16px 20px 40px;
}

/* ⚠️ 关键的一行（2026-09-27 定位）：
 *   .console-main 是 grid 容器，grid 子项默认 min-width:auto —— 意思是
 *   「不许缩得比自己的内容还窄」。表格的自然宽度（1300+px）会把这个约束顶上去，
 *   于是里面的卡片比主区域还宽：实测 1280 屏上主区域 1040px、卡片却 1344px，
 *   横向溢出、右边被裁、还多出一条滚动条 —— 用户截图里看到的「显示有问题」就是这个。
 *   加上 min-width:0 允许子项收缩，表格才会在自己的容器里滚，而不是撑破整页。
 */
.admin-console-page .console-main > * {
  min-width: 0;
}

/* 顶栏也做成影刀那种胶囊 card。
   分两行：第一行「标题 + 账号」，第二行整行放导航 —— 挤成一行的话
   标题会被 14 个导航胶囊压扁，很难看。 */
.admin-console-page .console-topbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: 24px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
}

.admin-console-page .console-topbar > div:first-child {
  flex: 0 1 auto;
  min-width: 0;
}

.admin-console-page .console-topbar p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.admin-console-page .console-topbar h1 {
  margin: 2px 0 0;
  font-size: 19px;
  line-height: 1.25;
}

.admin-console-page .console-main-nav {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
  /* 独占第二行：14 个导航胶囊跟标题挤一行会把标题压扁 */
  order: 3;
  flex-basis: 100%;
  justify-content: flex-start;
}

.admin-console-page .console-main-nav::-webkit-scrollbar { height: 0; }

.admin-console-page .console-main-nav a {
  flex: 0 0 auto;
  padding: 5px 11px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .68);
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: all .16s ease;
}

.admin-console-page .console-main-nav a:hover {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.admin-console-page .console-main-nav a.active {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
}

.admin-console-page .console-account {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* 账号区：重做成和整体一致的玻璃胶囊。
 *
 * 为什么要覆盖这么多：基础样式里是
 *   .console-account        → 纯白卡片 + 灰边 + 8px 圆角
 *   .console-account div    → text-align: right
 *   .api-avatar             → 淡蓝底 + 蓝字
 * 那条 text-align:right 会同时命中「头像」和「文字区」两个 div，
 * 而文字区里是用户名和角色 —— 于是整块变成右对齐，看着很别扭。
 * （2026-09-27 Else哥 截图指出）
 */
.admin-console-page .console-account {
  padding: 5px 8px 5px 5px;
  border: 1px solid rgba(255, 255, 255, .78);
  border-radius: 999px;
  background: rgba(255, 255, 255, .72);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(12px);
}

/* ★ 把基础样式那条右对齐改回来 */
.admin-console-page .console-account div {
  text-align: left;
}

.admin-console-page .console-account .api-avatar {
  flex: 0 0 auto;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  color: #fff;
  font-size: 14px;
  font-weight: 800;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  box-shadow: 0 6px 16px rgba(128, 103, 255, .28);
}

.admin-console-page .console-account .api-user-meta {
  gap: 1px;
}

.admin-console-page .console-account .api-user-meta strong {
  color: var(--ink);
  font-size: 13px;
  line-height: 1.3;
}

.admin-console-page .console-account .api-user-meta span {
  color: var(--muted);
  font-size: 11px;
  line-height: 1.3;
}

/* 积分可能很长（超管自己就有十几位），给个上限免得把「退出」挤出去 */
.admin-console-page .console-account .api-user-meta {
  max-width: 220px;
}

.admin-console-page .console-account button {
  flex: 0 0 auto;
  height: 30px;
  min-height: 0;
  padding: 0 13px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .82);
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 760;
  transition: all .16s ease;
}

.admin-console-page .console-account button:hover {
  border-color: rgba(217, 45, 32, .34);
  background: rgba(217, 45, 32, .08);
  color: var(--red);
}

/* 账号信息还没渲染出来时不占位、不显示空方块 */
.admin-console-page .console-account:empty {
  display: none;
}

/* ── 统计卡 ─────────────────────────────────────────────────────────── */
.admin-console-page .metric-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 14px;
  margin-bottom: 16px;
}

.admin-console-page .metric-card {
  position: relative;
  padding: 16px 18px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow-sm);
  backdrop-filter: blur(18px);
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.admin-console-page .metric-card::after {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: linear-gradient(180deg, var(--brand), var(--brand-2));
}

.admin-console-page .metric-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow);
}

.admin-console-page .metric-card span {
  display: block;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
}

.admin-console-page .metric-card strong {
  display: block;
  margin: 6px 0 2px;
  /* 余额可能很长（积分动辄十几位），字号随屏宽收放；实在放不下才允许折行，
     否则会把卡片撑破、把「订单总额」挤到下面去。 */
  font-size: clamp(17px, 1.45vw, 25px);
  line-height: 1.15;
  letter-spacing: -.5px;
  overflow-wrap: anywhere;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.admin-console-page .metric-card small {
  color: var(--muted);
  font-size: 11px;
}

/* ── 区块（影刀风格的 panel） ───────────────────────────────────────── */
.admin-console-page .console-section {
  margin-bottom: 16px;
  border: 1px solid rgba(255, 255, 255, .72);
  border-radius: var(--radius);
  background: var(--panel);
  box-shadow: var(--shadow);
  backdrop-filter: blur(18px);
  overflow: hidden;
}

.admin-console-page .console-section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 15px 18px;
  border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, .45);
}

.admin-console-page .console-section-head p {
  margin: 0;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 1.4px;
  text-transform: uppercase;
}

.admin-console-page .console-section-head h2 {
  margin: 3px 0 0;
  font-size: 16px;
}

.admin-console-page .console-section > *:not(.console-section-head) {
  padding-left: 18px;
  padding-right: 18px;
}

.admin-console-page .console-section > *:not(.console-section-head):last-child {
  padding-bottom: 18px;
}

/* ── 按钮：影刀那种胶囊 ─────────────────────────────────────────────── */
.admin-console-page button,
.admin-console-page .btn {
  min-height: 34px;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .78);
  color: var(--ink-2);
  font: inherit;
  font-weight: 760;
  white-space: nowrap;
  cursor: pointer;
  transition: all .16s ease;
}

.admin-console-page button:hover:not(:disabled) {
  border-color: var(--brand-line);
  background: rgba(58, 167, 255, .16);
  color: var(--brand-ink);
}

.admin-console-page .secondary {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

.admin-console-page .secondary:hover:not(:disabled) {
  border-color: rgba(58, 167, 255, .48);
  background: rgba(58, 167, 255, .2);
}

.admin-console-page .primary {
  border-color: transparent;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  color: #fff;
  box-shadow: 0 10px 22px rgba(128, 103, 255, .24);
}

.admin-console-page .primary:hover:not(:disabled) {
  color: #fff;
  filter: brightness(1.04);
}

.admin-console-page button:disabled {
  opacity: .5;
  cursor: not-allowed;
}

/* 危险按钮（删除账号）—— 和普通按钮明确区分，避免误点 */
.admin-console-page .danger {
  border-color: rgba(217, 45, 32, .32);
  background: rgba(217, 45, 32, .08);
  color: var(--red);
}

.admin-console-page .danger:hover:not(:disabled) {
  border-color: rgba(217, 45, 32, .55);
  background: rgba(217, 45, 32, .14);
  color: #b42318;
}

/* ── 表单控件 ───────────────────────────────────────────────────────── */
.admin-console-page input,
.admin-console-page select,
.admin-console-page textarea {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: rgba(255, 255, 255, .88);
  padding: 9px 12px;
  color: var(--ink);
  font: inherit;
  outline: none;
  transition: border-color .16s ease, box-shadow .16s ease;
}

.admin-console-page input:focus,
.admin-console-page select:focus,
.admin-console-page textarea:focus {
  border-color: rgba(128, 103, 255, .58);
  box-shadow: 0 0 0 4px rgba(128, 103, 255, .13);
}

.admin-console-page label {
  display: block;
  margin-bottom: 6px;
  color: var(--ink-2);
  font-size: 12px;
  font-weight: 760;
}

.admin-console-page .admin-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding-top: 14px;
  padding-bottom: 4px;
}

/* 基础样式里 input/select 是 width:100%（表单场景），但在筛选条里会把每个控件
   撑成独占一行。这里显式改回按内容宽度，让它们横向排开。 */
.admin-console-page .admin-filter-row input,
.admin-console-page .admin-filter-row select {
  width: auto;
}

.admin-console-page .admin-filter-row input[type="search"] {
  flex: 1 1 240px;
  min-width: 0;
}

.admin-console-page .admin-filter-row select {
  flex: 0 0 auto;
  min-width: 130px;
}

/* 子账号额度：只需要放下两三位数字，太宽会挤掉后面的列 */
.admin-console-page .admin-limit-input {
  width: 68px;
  padding: 5px 8px;
  font-size: 12px;
}

/* ── 表格：圆角容器 + 悬浮高亮 + 左右固定列 ─────────────────────────── */
.admin-console-page .model-table-wrap {
  margin-top: 12px;
  border: 1px solid var(--line);
  border-radius: 15px;
  background: rgba(255, 255, 255, .56);
  overflow: auto;
  max-height: 62vh;
}

.admin-console-page .console-table {
  width: 100%;
  min-width: 1180px;
  border-collapse: separate;   /* 用 separate 才能给固定列的边框做阴影 */
  border-spacing: 0;
}

.admin-console-page .console-table th,
.admin-console-page .console-table td {
  /* 9 列的表，内边距每次多 1px 就是 18px —— 1440 笔记本屏正好卡在临界点上。
     8px/9px 实测能让整张表不出现横向滚动条。 */
  padding: 8px 9px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: middle;
  white-space: nowrap;
}

.admin-console-page .console-table th {
  position: sticky;
  top: 0;
  z-index: 2;
  background: rgba(249, 251, 255, .98);
  backdrop-filter: blur(8px);
  color: #5d6a86;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .3px;
}

/* ★ 第一列（用户）左固定、最后一列（操作）右固定：
   表格列多，窄屏下横向滚动时至少能一直看到「这是谁」和「能点什么」。
   没有这个，右滑之前根本看不到操作按钮 —— 用户反馈过「都看不到信息」。 */
.admin-console-page .admin-user-table th:first-child,
.admin-console-page .admin-user-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: #fbfcff;
}

.admin-console-page .admin-user-table thead th:first-child {
  z-index: 3;
  background: rgba(249, 251, 255, .99);
}

.admin-console-page .admin-user-table th:last-child,
.admin-console-page .admin-user-table td:last-child {
  position: sticky;
  right: 0;
  z-index: 1;
  background: #fbfcff;
  box-shadow: -8px 0 12px -8px rgba(74, 88, 132, .22);
}

.admin-console-page .admin-user-table thead th:last-child {
  z-index: 3;
  background: rgba(249, 251, 255, .99);
}

.admin-console-page .console-table tbody tr:hover td {
  background: rgba(128, 103, 255, .07);
}

/* 固定列在悬浮时要保持自己的底色，否则会被行高亮的透明色叠花 */
.admin-console-page .admin-user-table tbody tr:hover td:first-child,
.admin-console-page .admin-user-table tbody tr:hover td:last-child {
  background: #f4f2ff;
}

.admin-console-page .console-table td strong {
  display: block;
  color: var(--ink);
  font-size: 13px;
}

.admin-console-page .console-table td small {
  display: block;
  margin-top: 2px;
  color: var(--muted);
  font-size: 11px;
}

/* 长文本列（用户名 / 邮箱 / 创建者名）截断显示，悬停看全文。
   为什么必须截断：真实数据里有 pengzhiqiang1996@gmail.com 这种，
   不设上限就会把整张表撑宽、逼出横向滚动条，反倒让「操作」列看不见了。 */
.admin-console-page .ac-clamp {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 余额：数字等宽右对齐，防止异步刷新时列宽跳动 */
.admin-console-page .ac-amount {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  white-space: nowrap;
}

/* 时间列：短格式（2026-06-09 22:03），比 ISO 好读也窄得多 */
.admin-console-page .ac-time {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}

.admin-console-page .console-table .is-num {
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  text-align: right;
}

.admin-console-page .console-table .is-center {
  text-align: center;
}

/* ⚠️ max-width 必须加在【里面的元素】上，不能加在 <td> 上 ——
   table-layout:auto 时浏览器会忽略 td 的 max-width，白写。
   这里 .ac-clamp 是 display:block，max-width 才真的生效。 */
.admin-console-page .admin-user-table .ac-clamp { max-width: 150px; }
.admin-console-page .admin-user-table td:nth-child(2) .ac-clamp { max-width: 186px; }
.admin-console-page .admin-user-table td:nth-child(6) .ac-clamp { max-width: 152px; }

.admin-console-page .console-table select {
  /* 92px 太宽了：「普通用户 / 管理员 / active / disabled」按最长词 78px 就够。
     两个下拉叠在同一列里，省下的 28px 直接让整张表更容易放得下。 */
  min-width: 78px;
  max-width: 100%;
  padding: 5px 6px;
  font-size: 12px;
}

/* ⚠️「角色 / 状态」这一格里有【两个】下拉，而 td 上有 white-space:nowrap，
 *    两个 inline-block 的下拉不肯换行 → 并排挤在同一行 → 总宽 456px 撑破 240px 的格子，
 *    第二个下拉直接压在「创建者」列上，把「自主注册」盖掉一半。
 *    （2026-09-27 Else哥 截图指出的就是这个）
 *    修法：让下拉各自成块、各占一行，宽度跟着格子走。 */
.admin-console-page .admin-user-table td:nth-child(4) select {
  display: block;
  width: 100%;
  white-space: normal;
}

.admin-console-page .admin-user-table td:nth-child(4) > * + * {
  margin-top: 6px;
}

/* 平台OSS 也是单个下拉，同样铺满格子，别留半截 */
.admin-console-page .admin-user-table td:nth-child(7) select {
  display: block;
  width: 100%;
}

.admin-console-page .admin-actions {
  display: flex;
  flex-wrap: nowrap;
  gap: 6px;
}

.admin-console-page .admin-actions button {
  min-height: 30px;
  padding: 5px 10px;
  font-size: 12px;
}

/* ── 小元素 ─────────────────────────────────────────────────────────── */
.admin-console-page .state-pill,
.admin-console-page .ac-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 3px 10px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: rgba(255, 255, 255, .7);
  color: var(--muted);
  font-size: 11px;
  font-weight: 760;
  white-space: nowrap;
}

.admin-console-page .ac-pill.ok {
  border-color: rgba(18, 163, 116, .3);
  background: rgba(18, 163, 116, .1);
  color: #087a5b;
}

.admin-console-page .ac-pill.bad {
  border-color: rgba(217, 45, 32, .28);
  background: rgba(217, 45, 32, .09);
  color: var(--red);
}

.admin-console-page .ac-pill.info {
  border-color: var(--brand-line);
  background: var(--brand-soft);
  color: var(--brand-ink);
}

/* 创建者引用：一眼看出这个账号是谁开的 */
.admin-console-page .ac-creator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.admin-console-page .ac-creator-badge {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  border-radius: 8px;
  color: #fff;
  font-size: 11px;
  font-weight: 900;
  background: linear-gradient(135deg, var(--brand), var(--brand-2));
  flex: 0 0 auto;
}

.admin-console-page .ac-creator-badge.self {
  background: rgba(107, 116, 133, .55);
}

.admin-console-page .muted-text {
  color: var(--muted);
}

.admin-console-page .console-empty {
  padding: 26px;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.admin-console-page .login-v2-message {
  margin: 10px 0 0;
  color: var(--brand-ink);
  font-size: 12px;
  font-weight: 700;
}

.admin-console-page .settings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin-top: 14px;
}

.admin-console-page .admin-create-form > button {
  margin-top: 14px;
}

/* 危险操作提示条 */
.admin-console-page .ac-warn {
  margin: 12px 0 0;
  padding: 9px 12px;
  border: 1px solid rgba(194, 113, 12, .32);
  border-radius: 11px;
  background: #fff7ea;
  color: #9a5b06;
  font-size: 12px;
  line-height: 1.6;
}

/* ── 窄屏：侧栏收成顶部横条 ─────────────────────────────────────────── */
@media (max-width: 900px) {
  .admin-console-page .console-sidebar {
    position: static;
    width: auto;
    margin: 12px;
    padding: 12px;
    border-radius: 20px;
  }
  .admin-console-page .console-menu {
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
  }
  .admin-console-page .console-main {
    margin-left: 0;
    padding: 0 12px 32px;
  }
  .admin-console-page .console-table {
    min-width: 900px;
  }
}