/* ============================================================================
   拾光高尔夫 · 后台新皮肤  skin.css
   用途：把「真实后台」的外观换成 2026-09-12 设计稿（v12）的视觉语言。
   原则：★只加不改★ —— 本文件在 style.css 之后加载，只做覆盖；
        不改样式文件名、不改类名、不改 DOM 语义，删掉这个 link 即可完全回滚。
   兼容：手机端（≤900px）沿用原来的横条导航行为，只换配色。
   ========================================================================== */

/* ---------- ① 设计令牌：把旧配色整体换成新配色 ---------- */
:root {
  /* 新设计稿（v12）的色彩体系 */
  --shg-bg: #F7F5EC;
  --shg-panel: #FFFFFF;
  --shg-cream: #FBF9F0;
  --shg-ink: #333B27;
  --shg-ink2: #7C7E64;
  --shg-ink3: #7c7e64;
  --shg-line: #EAE9DC;
  --shg-deep: #3a4022;
  --shg-pri: #626e32;
  --shg-grn: #88974b;
  --shg-sage: #e8eed0;
  --shg-pale: #F1F3E6;
  --shg-gold: #B8975C;
  --shg-goldbg: #F6F0E1;
  --shg-acc: #A95549;
  --shg-accbg: #F7EAE6;
  --shg-radius: 16px;
  --shg-sh: 0 1px 2px rgba(43, 51, 31, .04), 0 10px 30px rgba(43, 51, 31, .06);
  --shg-sh-hover: 0 2px 4px rgba(43, 51, 31, .05), 0 14px 36px rgba(43, 51, 31, .10);
  --shg-num: "Georgia", "Times New Roman", "PingFang SC", serif;
  --shg-side-w: 232px;

  /* 覆盖旧变量 → 全站自动换色（老样式 500+ 处引用这些变量） */
  --bg: var(--shg-bg);
  --card: var(--shg-panel);
  --fill: var(--shg-pale);
  --input: #F6F4EA;
  --line: var(--shg-line);
  --ink: var(--shg-ink);
  --ink-2: var(--shg-ink2);
  --muted: var(--shg-ink3);

  /* 旧的「暖橙」品牌色 → 新的「橄榄绿」品牌色 */
  --orange: var(--shg-grn);
  --orange-deep: var(--shg-deep);
  --orange-soft: var(--shg-pale);
  --sand: #E3DFCE;
  --sunrise-1: var(--shg-pale);
  --sunrise-2: var(--shg-sage);

  --green: var(--shg-grn);
  --green-deep: var(--shg-deep);
  --green-light: var(--shg-pale);
  --green-mist: #F7F8F1;
  --sage: var(--shg-sage);

  --danger: var(--shg-acc);
  --info: var(--shg-pri);

  --grad-sunrise: linear-gradient(135deg, #e8eed0 0%, #88974b 100%);
  --grad-green: linear-gradient(180deg, #626e32 0%, #3a4022 100%);
  --grad-text: linear-gradient(90deg, #626e32, #3a4022);
  --r-lg: var(--shg-radius);
  --r-md: 10px;
  --r-sm: 6px;
  --shadow: var(--shg-sh);
  --shadow-hover: var(--shg-sh-hover);
}

/* ---------- ② 全局观感 ---------- */
body {
  background: var(--shg-bg);
  color: var(--shg-ink);
  -webkit-font-smoothing: antialiased;
}

/* 主标题行：加一条细的品牌色分隔，页与页之间更清爽 */
h1 {
  color: var(--shg-deep);
  letter-spacing: .2px;
}
h2, h3 {
  color: #3E4730;
}

/* 链接色 */
a {
  color: var(--shg-pri);
}
a:hover {
  color: var(--shg-deep);
}

/* ---------- ③ 组件统一：卡片 / 表格 / 表单 / 按钮 / 标签 ---------- */

/* 卡片：更柔和的圆角 + 新阴影 */
.card,
.stat-card,
.ref-card,
.cat-card,
.hero-card,
.block,
.hc-panel-bd,
.qa-card,
.pb-card {
  border-radius: var(--shg-radius);
  border-color: var(--shg-line);
  box-shadow: var(--shg-sh);
}
.card {
  background: var(--shg-panel);
}

/* KPI 数字：换成衬线体，更有质感 */
.stat-card {
  padding: 18px 10px;
}
.stat-card .num {
  font-family: var(--shg-num);
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -.5px;
  background: none;
  -webkit-background-clip: initial;
  background-clip: initial;
  color: var(--shg-deep);
  -webkit-text-fill-color: var(--shg-deep);
}
.stat-card .lbl {
  color: var(--shg-ink3);
  letter-spacing: .5px;
}

/* 快捷入口磁贴 */
.stat-tile {
  background: var(--shg-panel);
  color: var(--shg-deep);
  border: 1px solid var(--shg-line);
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43, 51, 31, .03);
}
.stat-tile:hover {
  background: var(--shg-pale);
  border-color: var(--shg-sage);
  box-shadow: 0 6px 18px rgba(74, 89, 50, .10);
}

/* 按钮：主按钮＝品牌绿；次按钮＝描边 */
.btn {
  background: var(--shg-pri);
  color: #fff;
  border-radius: 10px;
  font-weight: 600;
  letter-spacing: .2px;
  box-shadow: 0 1px 2px rgba(74, 89, 50, .18);
}
.btn:hover {
  background: var(--shg-deep);
}
.btn-primary {
  background: var(--shg-pri);
}
.btn-primary:hover {
  background: var(--shg-deep);
}
.btn-sm {
  border-radius: 8px;
}
/* 描边按钮（老样式里的 .btn.o / .btn-outline 之类）统一到新色 */
.btn.o,
.btn-outline,
.btn.ghost {
  background: transparent;
  color: var(--shg-deep);
  border: 1px solid var(--shg-line);
  box-shadow: none;
}
.btn.o:hover,
.btn-outline:hover,
.btn.ghost:hover {
  background: var(--shg-pale);
  border-color: var(--shg-sage);
}
.btn-danger {
  background: var(--shg-acc);
}
.btn-danger:hover {
  background: #8E4438;
}

/* 表格：新配色 + 更松的行高 */
.table {
  font-size: 13.5px;
}
.table th {
  background: var(--shg-pale);
  color: var(--shg-ink2);
  font-weight: 600;
  letter-spacing: .3px;
  box-shadow: inset 0 -1px 0 var(--shg-line);
}
.table td {
  border-bottom: 1px solid #F3F2E9;
}
.table tr:hover td {
  background: #FCFBF4;
}
.table-wrap {
  border: 1px solid var(--shg-line);
  border-radius: 14px;
  background: var(--shg-panel);
  box-shadow: 0 1px 2px rgba(43, 51, 31, .03);
}

/* 表单控件 */
form input,
form select,
form textarea,
.filter-bar input,
.filter-bar select {
  border-radius: 10px;
  border-color: var(--shg-line);
  background: #FBF9F2;
}
form input:focus,
form select:focus,
form textarea:focus,
.filter-bar input:focus,
.filter-bar select:focus {
  border-color: var(--shg-grn);
  box-shadow: 0 0 0 3px rgba(138, 154, 96, .16);
  background: #fff;
}

/* 销售人员名单 · 新增表单：输入框等高不被压扁、保存按钮与输入框等高 */
.add-seller-form {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  align-items: stretch;
}
.add-seller-form input {
  flex: 1 1 160px;
  min-width: 140px;
  height: 42px;
  padding: 0 14px;
  box-sizing: border-box;
  border: 1px solid var(--shg-line);
  border-radius: 10px;
  background: #FBF9F2;
  font-size: 14px;
}
.add-seller-form input:focus {
  border-color: var(--shg-grn);
  box-shadow: 0 0 0 3px rgba(138, 154, 96, .16);
  background: #fff;
}
.add-seller-form .btn {
  height: 42px;
  padding: 0 24px;
  align-self: stretch;
}
.filter-bar {
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(43, 51, 31, .03);
}

/* 状态标签 / 提示条 */
.alert {
  border-radius: 12px;
}
.alert-success {
  background: var(--shg-pale);
  color: var(--shg-deep);
}
.alert-info {
  background: #EEF2E3;
  color: var(--shg-deep);
}
.alert-warning {
  background: var(--shg-goldbg);
  color: #7A5F2E;
}
.alert-danger {
  background: var(--shg-accbg);
  color: var(--shg-acc);
}
.pending-alert {
  border: 1px solid #E6C9A8;
  background: var(--shg-goldbg);
  border-radius: var(--shg-radius);
  box-shadow: 0 6px 20px rgba(74, 89, 50, .10);
}
.pending-alert-title {
  color: var(--shg-deep);
}
.pending-alert .badge-pending,
.pending-alert .badge-confirmed {
  background: var(--shg-gold);
  background-image: none;
  color: #fff;
}
.status-active {
  background: var(--shg-pale);
  color: var(--shg-deep);
}
.status-pending {
  color: #8A6F3B;
}

/* 返回首页：侧栏已有首页，桌面端收窄成小胶囊，手机端保持好点 */
.homebar .homebtn {
  background: var(--shg-panel);
  border: 1px solid var(--shg-line);
  color: var(--shg-deep);
  border-radius: 999px;
}
.homebar .homebtn:hover {
  background: var(--shg-pale);
  border-color: var(--shg-sage);
}

/* ============================================================================
   ④ 左侧栏外壳（只作用于 coach / admin / staff —— 即原来的 .topbar）
      学员端 .topbar-mini 完全不受影响。
   ========================================================================== */

/* 手机顶部条：桌面隐藏 */
.shg-mobar {
  display: none;
}

  /* 抽屉里的「收起 ✕」：桌面端不需要（点外面/按 Esc 即可），手机端才显示 */
  .shg-side-x {
    display: none;
  }

  /* 侧栏折叠按钮：手机端抽屉模式不出现（桌面媒体块里另有样式） */
  .shg-fold {
    display: none;
  }

@media (min-width: 901px) {

  body {
    padding-left: var(--shg-side-w);
  }

  /* ---- 侧栏主体 ---- */
  .shg-side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--shg-side-w);
    display: flex;
    flex-direction: column;
    background: linear-gradient(180deg, #3a4022 0%, #3F4D2B 100%);
    color: #EAEBDD;
    padding: 18px 12px 12px;
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 50;
    transition: width .18s ease;
  }
  .shg-side::-webkit-scrollbar {
    width: 5px;
  }
  .shg-side::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, .18);
    border-radius: 999px;
  }

  /* ---- 侧栏头部：品牌 ---- */
  .shg-side-hd {
    padding: 2px 10px 16px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
    margin-bottom: 12px;
  }
  .shg-side-hd .brand {
    color: #fff;
    font-size: 16.5px;
    font-weight: 700;
    letter-spacing: .6px;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .shg-side-hd .shg-role {
    margin-top: 7px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .62);
    letter-spacing: .4px;
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
  }
  .shg-side-hd .shg-role b {
    color: #D8DDBF;
    font-weight: 600;
  }
  .shg-side-hd .shg-chip {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16);
    color: #E6E9D6;
    border-radius: 999px;
    padding: 1px 8px;
    font-size: 11px;
  }

  /* ---- 一级导航（分组标题）----
     2026-10-05 郑总：① 打开页面默认只看到一级，点一级才展开它的二级
                      ② 一级字号 15.5px / 加粗 / 纯白，二级 13px / 常规 / 半透白
                         → 一眼分得出哪个是一级、哪个是二级 */
  .shg-grp {
    margin: 0 0 3px;
  }
  .shg-grp-t {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 9px 11px;
    margin: 1px 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 15.5px;
    font-weight: 700;
    letter-spacing: .6px;
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
    user-select: none;
    transition: background .13s, color .13s;
  }
  .shg-grp-t:hover {
    background: rgba(255, 255, 255, .12);
  }
  .shg-grp-t:focus-visible {
    outline: 2px solid rgba(255, 255, 255, .55);
    outline-offset: 1px;
  }
  .shg-grp-t .shg-grp-caret {
    flex: 0 0 auto;
    font-size: 11px;
    opacity: .85;
    transition: transform .15s ease;
  }
  .shg-grp.open > .shg-grp-t {
    background: rgba(255, 255, 255, .09);
  }
  .shg-grp.open > .shg-grp-t .shg-grp-caret {
    transform: rotate(90deg);
  }
  .shg-grp-t .shg-grp-ico {
    font-size: 13px;
    opacity: .9;
  }
  .shg-grp-t .shg-grp-n {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .60);
    background: rgba(255, 255, 255, .13);
    border-radius: 999px;
    padding: 0 7px;
  }

  /* ---- 二级导航（分组里的页面入口）：默认收起，点一级才展开 ---- */
  .shg-grp-l {
    display: none;
    margin: 2px 0 5px 16px;
    padding-left: 8px;
    border-left: 1px solid rgba(255, 255, 255, .16);
  }
  .shg-grp.open > .shg-grp-l {
    display: block;
  }
  .shg-grp-l a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 10px;
    margin: 1px 0;
    border-radius: 9px;
    color: rgba(255, 255, 255, .72);
    font-size: 13px;
    font-weight: 400;
    line-height: 1.35;
    text-decoration: none;
    transition: background .13s, color .13s;
  }
  .shg-grp-l a:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
  }
  .shg-grp-l a.on {
    background: rgba(255, 255, 255, .95);
    color: var(--shg-deep);
    font-weight: 600;
    box-shadow: 0 2px 8px rgba(0, 0, 0, .10);
  }
  .shg-grp-l a .shg-arw {
    margin-left: auto;
    opacity: .4;
    font-size: 11px;
  }
  .shg-grp-sep,
  .shg-sep {
    height: 1px;
    background: rgba(255, 255, 255, .10);
    margin: 10px 10px;
  }

  /* ---- 侧栏底部：消息 / 用户 / 退出 ---- */
  .shg-side-ft {
    margin-top: auto;
    padding-top: 12px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .shg-side-ft a {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 8px 11px;
    border-radius: 10px;
    color: #E4E7D5;
    font-size: 13.5px;
    text-decoration: none;
  }
  .shg-side-ft a:hover {
    background: rgba(255, 255, 255, .10);
    color: #fff;
  }
  .shg-side-ft .shg-who {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 9px 11px 4px;
    font-size: 12px;
    color: rgba(255, 255, 255, .58);
  }
  .shg-side-ft .shg-who b {
    color: #D8DDBF;
    font-weight: 600;
  }
  .shg-side-ft .logout {
    color: #E9C7BD;
  }
  .shg-side-ft .logout:hover {
    background: rgba(169, 85, 73, .28);
    color: #fff;
  }

  /* ---- 内容区让出侧栏宽度 ---- */
  .container {
    max-width: 1420px;
    margin-left: 0;
    padding: 22px 24px 72px;
  }

  /* 老顶栏已不存在，但若某页残留 nav-dd 也不至于难看 */
  .topbar {
    display: none;
  }

  /* ---- 2026-09-19 郑总：主导航可折叠 / 展开 ----
     折叠后只留图标竖条（64px），悬停有原生 title 提示；状态存本地，下次进来保持。 */
  .shg-fold {
    position: fixed;
    left: calc(var(--shg-side-w) - 15px);
    top: 20px;
    z-index: 60;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, .30);
    background: #3F4D2B;
    color: #E8EED0;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 2px 8px rgba(18, 22, 12, .35);
    transition: left .18s ease, transform .18s ease;
  }
  .shg-fold:hover {
    background: #4A5931;
    color: #fff;
  }
  body.shg-folded {
    padding-left: 64px;
  }
  body.shg-folded .shg-fold {
    left: 49px;
    transform: rotate(180deg);
  }
  body.shg-folded .shg-side {
    width: 64px;
    padding: 18px 8px 12px;
  }
  body.shg-folded .shg-side-hd {
    padding: 2px 2px 12px;
  }
  body.shg-folded .shg-side-hd .brand {
    justify-content: center;
  }
  body.shg-folded .shg-side-hd .brand > span,
  body.shg-folded .shg-side-hd .shg-role,
  body.shg-folded .shg-grp-t,
  body.shg-folded .shg-grp-l a > span:not(.shg-arw):not(.nav-dot),
  body.shg-folded .shg-grp-l a .shg-arw,
  body.shg-folded .shg-side-ft .shg-who,
  body.shg-folded .shg-side-ft a > span:not(.nav-dot) {
    display: none;
  }
  body.shg-folded .shg-grp-l a,
  body.shg-folded .shg-side-ft a {
    justify-content: center;
    padding: 10px 6px;
  }
  /* 收成图标条时一级标题是隐藏的 → 二级入口必须全部显示，否则整条侧栏空白 */
  body.shg-folded .shg-grp-l {
    display: block !important;
    margin: 0;
    padding-left: 0;
    border-left: 0;
  }
  /* 折叠态用细线区分分组（标题隐藏后仍看得出层次） */
  body.shg-folded .shg-grp + .shg-grp {
    border-top: 1px solid rgba(255, 255, 255, .10);
    margin-top: 7px;
    padding-top: 7px;
  }
}

/* ============================================================================
   ⑤ 手机 / 平板（≤900px）：不用侧栏，改成「顶部条 + 抽屉」
   ========================================================================== */
@media (max-width: 900px) {

  /* 2026-09-13 郑总：手机端抽屉原来宽 84%（封顶 320px）→ 在 390px 手机上几乎占满整屏，
     打开后完全看不到右边是什么页，导致「每次点都要想一下我刚才在哪个页面」。
     现在**最多只占半屏（48vw）**，并配一条更浅的遮罩，让右侧内容仍看得清。 */
  .shg-side {
    position: fixed;
    left: 0;
    top: 0;
    bottom: 0;
    width: 48vw;
    max-width: 300px;
    min-width: 168px;
    background: linear-gradient(180deg, #3a4022 0%, #3F4D2B 100%);
    color: #EAEBDD;
    padding: 0 10px 12px;              /* 顶部 padding 交给吸顶的头部 */
    overflow-y: auto;
    overflow-x: hidden;
    z-index: 80;
    transform: translateX(-102%);
    transition: transform .22s ease;
  }
  .shg-side.open {
    transform: none;
    /* 右边缘投影（一眼看出这是一层抽屉）+ 浅遮罩（右侧内容仍读得清） */
    box-shadow: 10px 0 26px rgba(18, 22, 12, .30),
                0 0 0 100vmax rgba(30, 36, 22, .26);
  }
  /* 头部吸顶：打开时为了把「当前页」滚到眼前会滚很长，头部（含 ✕）不能被滚走 */
  .shg-side-hd {
    position: sticky;
    top: 0;
    z-index: 3;
    background: #3a4022;
    margin: 0 -10px 10px;
    padding: 14px 18px 12px;
    border-bottom: 1px solid rgba(255, 255, 255, .12);
  }
  /* 抽屉右上角的「收起」按钮（只在手机端出现，见上方 display） */
  .shg-side-x {
    display: inline-flex;
    position: absolute;
    right: 8px;
    top: 12px;
    width: 30px;
    height: 30px;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .20);
    color: #fff;
    border-radius: 9px;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
  }
  .shg-side-hd .brand {
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .shg-side-hd .shg-role {
    margin-top: 6px;
    font-size: 11.5px;
    color: rgba(255, 255, 255, .62);
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
  }
  .shg-side-hd .shg-chip {
    background: rgba(255, 255, 255, .13);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 1px 8px;
  }
  .shg-grp-t {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
    padding: 10px 8px;
    margin: 1px 0;
    border: 0;
    border-radius: 10px;
    background: transparent;
    font-family: inherit;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .4px;
    color: #FFFFFF;
    text-align: left;
    cursor: pointer;
    user-select: none;
  }
  .shg-grp-t .shg-grp-caret {
    font-size: 11px;
    opacity: .85;
    transition: transform .15s ease;
  }
  .shg-grp.open > .shg-grp-t {
    background: rgba(255, 255, 255, .09);
  }
  .shg-grp.open > .shg-grp-t .shg-grp-caret {
    transform: rotate(90deg);
  }
  .shg-grp-t .shg-grp-n {
    margin-left: auto;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255, 255, 255, .58);
    background: rgba(255, 255, 255, .13);
    border-radius: 999px;
    padding: 0 7px;
  }
  /* 手机端同样：默认只看到一级，点一级才展开二级 */
  .shg-grp-l {
    display: none;
    margin: 2px 0 4px 12px;
    padding-left: 7px;
    border-left: 1px solid rgba(255, 255, 255, .16);
  }
  .shg-grp.open > .shg-grp-l {
    display: block;
  }
  .shg-grp-l a,
  .shg-side-ft a {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 8px;
    margin: 1px 0;
    border-radius: 10px;
    color: #E4E7D5;
    font-size: 13.5px;
    line-height: 1.35;
    text-decoration: none;
    min-width: 0;
  }
  /* 半屏抽屉里名字过长就省略号，别把后面的箭头挤掉 */
  .shg-grp-l a > span:not(.shg-arw),
  .shg-side-ft a > span:not(.shg-arw):not(.nav-dot) {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shg-grp-l a {
    font-size: 13px;
    font-weight: 400;
    color: rgba(255, 255, 255, .72);
    padding: 8px 8px;
  }
  .shg-grp-l a.on {
    background: rgba(255, 255, 255, .95);
    color: var(--shg-deep);
    font-weight: 600;
  }
  .shg-grp-sep,
  .shg-sep {
    height: 1px;
    background: rgba(255, 255, 255, .10);
    margin: 9px 10px;
  }
  .shg-side-ft {
    margin-top: 14px;
    padding-top: 10px;
    border-top: 1px solid rgba(255, 255, 255, .12);
  }
  .shg-side-ft .shg-who {
    padding: 8px 11px 2px;
    font-size: 12px;
    color: rgba(255, 255, 255, .58);
  }
  .shg-side-ft .logout {
    color: #E9C7BD;
  }

  /* 顶部条 */
  .shg-mobar {
    display: flex;
    align-items: center;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 70;
    background: rgba(251, 249, 240, .94);
    backdrop-filter: saturate(180%) blur(10px);
    -webkit-backdrop-filter: saturate(180%) blur(10px);
    border-bottom: 1px solid var(--shg-line);
    padding: 9px 12px;
    margin: -22px -24px 14px;
  }
  .shg-mobar .shg-burger {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: var(--shg-pri);
    color: #fff;
    border: none;
    border-radius: 9px;
    padding: 7px 11px;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
  }
  .shg-mobar .shg-mobrand {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    flex: 0 0 auto;
    font-weight: 700;
    color: var(--shg-deep);
    font-size: 14.5px;
  }
  /* 当前页面名（2026-09-13 郑总：解决「每次点都要想一下我刚才在哪个页面」） */
  .shg-mobar .shg-mopage {
    flex: 1 1 auto;
    min-width: 0;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--shg-deep);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .shg-mobar .shg-mopage::before {
    content: "／";
    opacity: .4;
    margin-right: 3px;
    font-weight: 400;
  }
  .shg-mobar .shg-moexit {
    margin-left: auto;
    font-size: 12.5px;
    color: var(--shg-ink2);
    text-decoration: none;
    padding: 5px 9px;
    border: 1px solid var(--shg-line);
    border-radius: 999px;
    background: #fff;
  }
  .container {
    padding-top: 22px;
  }
}

@media (max-width: 640px) {
  .shg-mobar {
    margin: -16px -12px 12px;
  }
  /* 小屏：品牌只留图标，把宽度让给「当前页面名」 */
  .shg-mobar .shg-mobrand span {
    display: none;
  }
  .shg-mobar .shg-burger {
    padding: 7px 9px;
    font-size: 12.5px;
  }
  .card,
  .table-wrap,
  .filter-bar {
    border-radius: 12px;
  }
}

/* ---------- ⑥ 打印：侧栏不参与打印 ---------- */
@media print {
  .shg-side,
  .shg-mobar {
    display: none !important;
  }
  body {
    padding-left: 0 !important;
  }
}

/* ===== V12NAV ===== */
/* ===== ③ 顶栏：搜索 / 视角 / 字号（郑总 V12 第二步） ===== */
.shg-top {
  position: sticky;
  top: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 14px;
  background: rgba(251, 249, 240, .92);
  backdrop-filter: blur(8px);
  border: 1px solid var(--shg-line);
  border-radius: var(--shg-radius);
  box-shadow: var(--shg-sh);
}
.shg-top .shg-q {
  flex: 1 1 260px;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 180px;
  padding: 0 12px;
  height: 36px;
  background: var(--shg-panel);
  border: 1px solid var(--shg-line);
  border-radius: 999px;
  color: var(--shg-ink3);
}
.shg-top .shg-q:focus-within {
  border-color: var(--shg-sage);
  box-shadow: 0 0 0 3px var(--shg-pale);
}
.shg-top .shg-q input {
  flex: 1;
  min-width: 60px;
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13.5px;
  color: var(--shg-ink);
}
.shg-top .shg-va,
.shg-top .shg-fsz {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 36px;
  padding: 0 10px;
  background: var(--shg-panel);
  border: 1px solid var(--shg-line);
  border-radius: 999px;
  color: var(--shg-ink2);
}
.shg-top .shg-va select {
  border: 0;
  outline: 0;
  background: transparent;
  font-size: 13px;
  color: var(--shg-deep);
  max-width: 168px;
}
.shg-top .shg-fsz button {
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: 12.5px;
  color: var(--shg-ink2);
  padding: 3px 8px;
  border-radius: 999px;
}
.shg-top .shg-fsz button.on {
  background: var(--shg-pale);
  color: var(--shg-deep);
  font-weight: 600;
}
.shg-top .shg-vabadge {
  flex: 1 1 100%;
  font-size: 12px;
  color: #7A5F2E;
  background: var(--shg-goldbg);
  border: 1px solid #E6D3AC;
  border-radius: 10px;
  padding: 6px 10px;
}
.shg-top .shg-vabadge a {
  margin-left: 6px;
  font-weight: 600;
}

/* ===== ④ 首页「今天要做的事」 ===== */
.todo-card {
  margin-bottom: 16px;
  padding: 14px 16px 12px;
}
.todo-hd {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 10px;
}
.todo-hd h2 {
  margin: 0;
  font-size: 16px;
}
.todo-hd .todo-n {
  margin-left: auto;
  font-size: 12px;
  color: var(--shg-ink3);
}
.todo-list {
  display: grid;
  gap: 8px;
}
.todo-it {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border: 1px solid var(--shg-line);
  border-left: 3px solid var(--shg-sage);
  border-radius: 12px;
  background: var(--shg-cream);
  text-decoration: none;
  color: inherit;
}
.todo-it:hover {
  background: var(--shg-pale);
  border-color: var(--shg-sage);
}
.todo-it.urgent {
  border-left-color: var(--shg-acc);
  background: var(--shg-accbg);
}
.todo-num {
  font-family: var(--shg-num);
  font-size: 22px;
  font-weight: 700;
  color: var(--shg-deep);
  min-width: 34px;
  text-align: center;
}
.todo-it.urgent .todo-num {
  color: var(--shg-acc);
}
.todo-tx {
  display: flex;
  flex-direction: column;
  line-height: 1.35;
}
.todo-tx b {
  font-size: 14px;
  color: var(--shg-ink);
}
.todo-tx i {
  font-style: normal;
  font-size: 12px;
  color: var(--shg-ink3);
}
.todo-go {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--shg-pri);
  white-space: nowrap;
}
.todo-none {
  margin: 0;
  font-size: 13px;
  color: var(--shg-ink3);
}

/* ===== ⑤ 功能地图 ===== */
.smp-hd {
  margin-bottom: 16px;
}
.smp-hd h1 {
  margin-bottom: 4px;
}
.smp-sub {
  font-size: 13px;
  color: var(--shg-ink2);
  margin: 0 0 8px;
}
.smp-legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.smp-k {
  font-size: 11.5px;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--shg-line);
  color: var(--shg-ink2);
  background: var(--shg-panel);
}
.smp-k.ok { border-color: var(--shg-sage); color: var(--shg-deep); background: var(--shg-pale); }
.smp-k.sub { border-color: #E6D3AC; color: #7A5F2E; background: var(--shg-goldbg); }
.smp-k.todo { border-color: #D9D9CC; color: var(--shg-ink3); }
.smp-k.na { border-color: #E4D3CE; color: var(--shg-acc); background: var(--shg-accbg); }
.smp-grp {
  margin-bottom: 18px;
}
.smp-grp-t {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin: 0 0 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--shg-line);
  font-size: 15px;
}
.smp-grp-c {
  color: var(--shg-deep);
}
.smp-grp-n {
  font-size: 12px;
  color: var(--shg-ink3);
  font-weight: 400;
}
.smp-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(248px, 1fr));
  gap: 10px;
}
.smp-card {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 13px;
  border: 1px solid var(--shg-line);
  border-radius: 14px;
  background: var(--shg-panel);
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(43, 51, 31, .04);
  transition: box-shadow .14s, transform .14s;
}
a.smp-card:hover {
  box-shadow: var(--shg-sh-hover);
  transform: translateY(-1px);
}
.smp-card .smp-ico {
  color: var(--shg-pri);
  flex: 0 0 auto;
  margin-top: 1px;
}
.smp-card .smp-tx {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}
.smp-card .smp-tx b {
  font-size: 13.5px;
  color: var(--shg-ink);
}
.smp-card .smp-tx i {
  font-style: normal;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--shg-ink3);
}
.smp-card .smp-go {
  margin-left: auto;
  font-size: 11.5px;
  color: var(--shg-pri);
  white-space: nowrap;
  align-self: center;
}
.smp-card.st-sub { border-left: 3px solid var(--shg-gold); }
.smp-card.st-todo { border-left: 3px solid #CFCFC0; background: var(--shg-cream); }
.smp-card.st-ext { border-left: 3px solid var(--shg-sage); }
.smp-card.st-na {
  opacity: .62;
  background: #FAF9F4;
}
.smp-card.st-na .smp-go { color: var(--shg-acc); }
.smp-ft {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--shg-ink3);
}

/* ===== ⑥ 搜索页 ===== */
.srch-hd {
  margin-bottom: 16px;
}
.srch-form {
  display: flex;
  gap: 8px;
  margin: 8px 0 6px;
}
.srch-form input {
  flex: 1;
  max-width: 520px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--shg-line);
  border-radius: 999px;
  background: var(--shg-panel);
  font-size: 14px;
  outline: 0;
}
.srch-form input:focus {
  border-color: var(--shg-sage);
  box-shadow: 0 0 0 3px var(--shg-pale);
}
.srch-sub {
  font-size: 13px;
  color: var(--shg-ink2);
}
.srch-sec {
  margin-bottom: 14px;
}
.srch-sec h2 {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
  margin: 0 0 8px;
}
.srch-n {
  font-size: 12px;
  color: var(--shg-ink3);
  font-weight: 400;
}
.srch-empty p {
  margin: 4px 0;
}

/* ===== 手机端：顶栏跟手机条同宽，按钮换行也能用 ===== */
@media (max-width: 900px) {
  .shg-top {
    position: static;
    padding: 8px 10px;
    gap: 8px;
  }
  .shg-top .shg-q { flex: 1 1 100%; }
  .shg-top .shg-va select { max-width: 120px; }
  .smp-grid { grid-template-columns: 1fr; }
  .todo-it { padding: 9px 10px; gap: 9px; }
  .todo-go { display: none; }
}

/* ============================================================================
   ===== ⑦ 2026-09-20 UI 修复批（fix-web-ui）=====
   1) 移动端按钮点击变黑：关掉 WebKit 点击高亮 + 显式 :active 态
      （主绿加深一档 #4F5A26，文字纯白，对比度 ≥ 3.0）
   2) 会员类型筛选条：按钮统一排到「会员类型：」右侧，等高、等距、可换行
   3) 会员管理页分类统计格：收敛高度、去图标、大数字 + 小标签
   ========================================================================== */

/* ① 按钮点击态：手机浏览器按下时默认盖一层半透明黑（tap highlight），
      绿色按钮被它一盖就成了「整块变黑、文字看不见」。全局关掉，并给出明确的加深态。 */
a, button, .btn {
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
.btn:active,
a.btn:active,
button.btn:active {
  background: #4F5A26;          /* 主绿 #626E32 加深一档 */
  color: #FFFFFF;
  opacity: 1;
  box-shadow: inset 0 2px 4px rgba(43, 51, 31, .18);
}
.btn-primary:active,
.btn-success:active {
  background: #4F5A26;
  color: #FFFFFF;
}
.btn-danger:active {
  background: #8E4438;
  color: #FFFFFF;
}
.btn-ghost:active,
.btn.secondary:active,
.btn-secondary:active,
.btn.o:active,
.btn-outline:active,
.btn.ghost:active {
  background: var(--shg-pale);
  color: var(--shg-deep);
  border-color: var(--shg-sage);
}
/* 访问过的链接按钮不许被浏览器 :visited 色带偏 */
.btn:visited { color: #FFFFFF; }
.btn-ghost:visited,
.btn.secondary:visited,
.btn-secondary:visited,
.btn.o:visited,
.btn-outline:visited,
.btn.ghost:visited { color: var(--shg-deep); }
.btn:focus-visible {
  outline: 2px solid var(--shg-gold);
  outline-offset: 2px;
}

/* ② 会员类型筛选条（admin_students.html）：
      「会员类型：」标签固定在左，按钮组跟在冒号右侧，flex wrap 整齐换行 */
.mt-filter-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.mt-filter-label {
  font-size: 14px;
  line-height: 32px;
  white-space: nowrap;
  color: var(--shg-ink);
}
.mt-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  flex: 1;
  min-width: 0;
}
.mt-filter .btn,
.mt-filter .btn-sm {
  height: 32px;
  min-height: 32px;
  display: inline-flex;
  align-items: center;
  margin: 0;
}
.mt-filter form {
  margin: 0;
  display: inline-flex;
}

/* ③ 会员管理页分类统计格：大数字 + 小标签，去图标、收高度 */
.mt-cat {
  padding: 13px 8px 12px;
}
.mt-cat .num {
  font-family: var(--shg-num);
  font-size: 26px;
  font-weight: 700;
  line-height: 1.15;
  color: var(--shg-deep);
}
.mt-cat .num .unit {
  font-size: 12px;
  font-weight: 600;
  color: var(--shg-ink3);
  margin-left: 3px;
}
.mt-cat .lbl {
  font-size: 12.5px;
  line-height: 1.35;
  margin-top: 3px;
}

/* #709（2026-10-05 郑总）：会员号旁的「正序 / 倒序」小按钮 */
.mno-sort-wrap { display:inline-flex; gap:3px; margin-left:6px; vertical-align:middle; }
.mno-sort {
  display:inline-block; padding:1px 7px; border-radius:9px;
  font-size:11px; font-weight:500; line-height:16px;
  color:var(--muted, #8a8272); background:rgba(0,0,0,.04);
  border:1px solid rgba(0,0,0,.08); text-decoration:none; cursor:pointer;
  white-space:nowrap; transition:all .15s ease;
}
.mno-sort:hover { background:rgba(0,0,0,.09); color:var(--ink, #2c2822); }
.mno-sort.is-on {
  background:var(--brand, #c8a063); border-color:var(--brand, #c8a063);
  color:#fff; font-weight:600;
}