/* ===== PC 管理端构件 =====
   仅 design/03-PC管理端/ 使用，与手机端的 design.css 平行，共用 tokens.css。
   只放「PC 端才有」的构件（布局、表格、抽屉、表单）；颜色字号间距一律取 tokens，不另起一套。
   改这里要同步：design/README.md 的 PC 端一节、tokens.md 的「PC 端适配」。

   PC 与手机端的三条差异（写在最前面，避免以后按手机端习惯改这里）：
     1. 无底部标签栏 → 左侧导航 .sidenav
     2. 卡片列表 → 表格 .table（一屏 10+ 行，不做翻页卡片）
     3. 编辑/发货不跳页 → 右侧抽屉 .drawer（保留列表的筛选状态） */

.app { height: 100vh; overflow: hidden; background: var(--bg); display: flex; flex-direction: column; }

/* PC 全屏布局不应有 32px 外边距（那是为手机 .board 预览留的桌面色留白），
   否则 .app 之外总高会多出 64px、window 永远带一条滚动条。PC 端覆盖掉。 */
body { padding: 0; }

/* ===== 顶栏 ===== */
.topbar {
  flex: none; height: 56px;
  display: flex; align-items: center; gap: var(--sp-4);
  padding: 0 var(--sp-6) 0 0;
  background: var(--surface); border-bottom: 1px solid var(--sand-200);
}
/* 顶栏品牌块：绿色、宽等同菜单栏（196px）、满高；logo + 禾滨康复营养家+（白字、加大） */
.topbar__brand {
  align-self: stretch; flex: none; width: 196px;
  display: flex; align-items: center; gap: var(--sp-2);
  padding: 0 0 0 var(--sp-3);
  background: var(--brand-600); color: #fff;
}
.topbar__brand .i { width: 28px; height: 28px; color: #fff; flex: none; }
.topbar__brand-name { font-size: 17px; font-weight: 700; letter-spacing: .02em; white-space: nowrap; }
/* 管理后台：位于菜单栏宽度右侧（绿色块之外），白底上用深品牌绿、加粗，字色加深 */
.topbar__sub { font-size: var(--fs-body); font-weight: 600; color: var(--brand-700); white-space: nowrap; }
/* 收起/展开侧栏的三横按钮：与管理后台同色（深品牌绿），与管理后台文字垂直居中对齐 */
.topbar__nav-toggle {
  align-self: center;
  display: inline-flex; flex-direction: column; justify-content: center; gap: 3px;
  width: 20px; height: 20px; padding: 3px;
  background: none; border: 0; border-radius: var(--r-sm); cursor: pointer; color: var(--brand-700);
}
.topbar__nav-toggle span { display: block; height: 2px; border-radius: 2px; background: currentColor; }
.topbar__nav-toggle:hover { background: var(--sand-100); }
.topbar__right { margin-left: auto; display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-600); }
.who { font-weight: 600; color: var(--ink-900); }

/* ===== 主体：左导航 + 内容 ===== */
.app__body { flex: 1; min-height: 0; display: flex; }

.sidenav {
  flex: none; width: 196px; padding: var(--sp-3) var(--sp-2);
  background: var(--surface); border-right: 1px solid var(--sand-200);
  display: flex; flex-direction: column; gap: 2px; overflow-y: auto;
}
.sidenav__group { padding: var(--sp-5) var(--sp-3) 6px; font-size: var(--fs-caption); color: var(--ink-400); }
.sidenav__i {
  display: flex; align-items: center; gap: var(--sp-3);
  height: 44px; padding: 0 var(--sp-3); border-radius: var(--r-sm);
  font-size: var(--fs-body); color: var(--ink-600);
  text-decoration: none;
}
.sidenav__i:hover { text-decoration: none; }
/* 选中项：brand-100 深一档的底 + 左缘 3px 品牌条，当前页一眼可见（brand-50 太浅，和卡片高亮分不开） */
.sidenav__i--on {
  background: var(--brand-100);
  color: var(--brand-700);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--brand-600);
}
.sidenav__i--locked { color: var(--ink-400); }
.sidenav__badge {
  margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px;
  border-radius: var(--r-pill); background: var(--danger); color: #fff;
  font-size: var(--fs-micro); line-height: 20px; text-align: center;
}

/* 侧栏收起态（body.nav-collapsed）：侧栏收窄为图标轨，品牌块同步收窄为方形 */
.sidenav, .topbar__brand { transition: width .18s ease; }
.nav-collapsed .topbar__brand { width: 56px; padding: 0; justify-content: center; }
.nav-collapsed .topbar__brand-name { display: none; }
.nav-collapsed .sidenav { width: 56px; }
.nav-collapsed .sidenav__group { display: none; }
.nav-collapsed .sidenav__i { justify-content: center; padding: 0; }
.nav-collapsed .sidenav__label { display: none; }
.nav-collapsed .sidenav__badge { display: none; }

.main { flex: 1; min-width: 0; padding: var(--sp-5) var(--sp-6) var(--sp-6); overflow-y: scroll; scrollbar-gutter: stable; }

/* ===== 页头 ===== */
.page-hd { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-4); }
.page-hd h1 { margin: 0; font-size: 20px; line-height: 1.3; font-weight: 700; }
.page-hd .sub { font-size: var(--fs-caption); color: var(--ink-400); }
.page-hd .acts { margin-left: auto; display: flex; gap: var(--sp-2); }

/* ===== 页面头右上角的主行动按钮（新增产品 / 新增推荐码 / 结算…）=====
   统一规格：`.btn .btn--sm`（高度 34，与筛选栏 .chip 同高）+ **小图标 + 文字**。
   配色用暖橙、不用品牌绿 —— 绿留给筛选栏的选中态（.chip--on）与标签，同屏才不会混；
   与操作栏按钮（.op）同一色系，区别是尺寸更大、属于**页面级**行动。
   次要动作用 `.btn--sm .btn--outline`（导出等），同样带小图标。 */
.btn--primary {
  box-sizing: border-box;
  background: var(--accent-500);
  border: 1px solid #C97A2E;
  color: #fff;
  box-shadow: none;
}
.btn--primary:hover { filter: brightness(1.06); }

/* ===== KPI 卡 ===== */
.kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-4); margin-bottom: var(--sp-5); }
/* 只有 3 格时用这个，否则第 4 列空一截（业绩数据就 3 格） */
.kpis--3 { grid-template-columns: repeat(3, 1fr); }
.kpi {
  padding: var(--sp-4) var(--sp-5);
  background: var(--surface); border: 1px solid var(--sand-200);
  border-radius: var(--r-lg); box-shadow: var(--sh-1);
}
.kpi__l { font-size: var(--fs-caption); color: var(--ink-600); }
.kpi__v { margin-top: 6px; font-size: 28px; font-weight: 700; font-variant-numeric: tabular-nums; }
.kpi__d { margin-top: 2px; font-size: var(--fs-micro); color: var(--ink-400); }

/* ===== 面板 ===== */
.panel { background: var(--surface); border: 1px solid var(--sand-200); border-radius: var(--r-lg); box-shadow: var(--sh-1); overflow: hidden; }
.panel__hd { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--sand-200); }
.panel__hd--nb { border-bottom: none; }
.panel__t { font-size: var(--fs-body); font-weight: 600; }
.panel__hd .acts { margin-left: auto; }
.panel__bd { padding: var(--sp-4) var(--sp-5); }
.cols { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--sp-4); }
/* 消息与反馈用：左列表固定宽，右侧详情自适应（与 .cols 的区别是左栏更窄且等高不起） */
.split { display: grid; grid-template-columns: 320px 1fr; gap: var(--sp-4); align-items: start; }

/* 待办行：左侧状态标签 + 一行说明 */
.todo-line { display: flex; align-items: center; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-600); line-height: 1.6; }
.todo-line .tag { flex: none; }

/* ===== 表格 ===== */
.table { width: 100%; border-collapse: collapse; font-size: var(--fs-caption); table-layout: fixed; }
.table th {
  padding: var(--sp-3) var(--sp-4); text-align: left; white-space: nowrap;
  font-weight: 600; color: var(--ink-600);
  background: var(--sand-100); border-bottom: 1px solid var(--sand-200);
}
.table td { padding: var(--sp-3) var(--sp-4); border-bottom: 1px solid var(--line); overflow: hidden; }
/* 操作列放开溢出：行内图标的悬浮 tooltip（.op::after）才能完整显示，不被单元格裁切 */
.table td:last-child { overflow: visible; }
.table tr:last-child td { border-bottom: none; }
.table .num { font-variant-numeric: tabular-nums; }
/* 推荐码 + 分类标：码走等宽字体，4 位码逐字符同宽，后面的标签起点才对齐
   （默认比例字体下 1/I 窄、H/K/W 宽，同样 4 位宽度差到 6px 以上）；
   码与标签的间距用 inline-flex gap 固定，不再依赖中间那个空格 */
.ref { display: inline-flex; align-items: center; gap: 6px; vertical-align: middle; }
.ref-code {
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .02em;
  font-variant-numeric: tabular-nums; color: var(--ink-800);
}
.table .r { text-align: right; }
.table .t { font-weight: 600; color: var(--ink-900); }
.table .sub { font-size: var(--fs-micro); color: var(--ink-400); }
/* 订单列表列宽（table-layout: fixed，未设宽度的 .col-goods 自动占满剩余空间 → 最宽） */
.table .col-no { width: 156px; white-space: nowrap; }
.table .col-patient { width: 88px; }
.table .col-time { width: 148px; }
.table .col-code { width: 140px; }
.table .col-logi { width: 120px; }
.table .col-status { width: 80px; white-space: nowrap; }
.table .col-amt { width: 92px; }
.table .col-op { width: 108px; }
.table tbody tr:nth-child(even) { background: #FCFBF8; }

/* 分页（引流管理用）：左侧汇总 + 页码，纯平、1px 描边 */
.pager { display: flex; align-items: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-top: 1px solid var(--sand-200); font-size: var(--fs-caption); color: var(--ink-600); }
.pager__sum { margin-right: auto; color: var(--ink-400); }
.pager__i { min-width: 30px; height: 30px; padding: 0 var(--sp-2); display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--sand-200); border-radius: var(--r-sm); background: var(--surface); }
.pager__i--on { border-color: var(--brand-600); color: var(--brand-600); font-weight: 600; }
.pager__i--off { color: var(--ink-400); background: var(--sand-100); }
.pager__gap { color: var(--ink-400); }
/* 分页器增强：每页条数选择、窗口内页码组、右侧跳页输入 */
.pager__size { height: 28px; margin: 0 4px; padding: 0 4px; border: 1px solid var(--sand-200); border-radius: var(--r-sm); background: var(--surface); font-size: var(--fs-caption); color: var(--ink-600); }
.pager__nums { display: inline-flex; align-items: center; gap: var(--sp-2); }
.pager__jump-wrap { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; color: var(--ink-400); }
.pager__jump { width: 56px; height: 28px; padding: 0 6px; border: 1px solid var(--sand-200); border-radius: var(--r-sm); font-size: var(--fs-caption); color: var(--ink-900); }
.pager__jump:focus { outline: none; border-color: var(--brand-600); }
.pager__go { height: 28px; padding: 0 10px; border: 1px solid var(--sand-200); border-radius: var(--r-sm); background: var(--surface); cursor: pointer; font-size: var(--fs-caption); color: var(--ink-600); }
.pager__go:hover { border-color: var(--brand-600); color: var(--brand-600); }

/* 可排序表头：指针 + 悬停高亮 + 三角指示 */
.table th[data-act="sort"] { cursor: pointer; user-select: none; }
.table th[data-act="sort"]:hover { color: var(--brand-600); }
.th-tri { display: inline-block; margin-left: 4px; font-size: 10px; line-height: 1; color: var(--ink-300); vertical-align: middle; }
.th--sort .th-tri { color: var(--brand-600); }
.th--sort { color: var(--brand-700); }

/* 行内操作链接：表格里的「编辑」「下架」用它，不做成按钮（PC 表格里按钮会显拥挤） */
.link { color: var(--brand-600); }
.link--danger { color: var(--danger); }

/* ===== 筛选条 ===== */
.filters { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.chip {
  height: 34px; padding: 0 var(--sp-4);
  display: inline-flex; align-items: center; border-radius: var(--r-pill);
  background: var(--surface); border: 1px solid var(--sand-200);
  font-size: var(--fs-caption); color: var(--ink-600);
}
.chip--on { background: var(--brand-600); border-color: var(--brand-600); color: var(--ink-inverse); font-weight: 600; }
.chip b { font-weight: 700; }
.filters .grow { margin-left: auto; }

/* ===== 抽屉：PC 端的编辑与发货都在这里，不跳页、不丢筛选 ===== */
.drawer-wrap { position: fixed; inset: 0; z-index: 20; display: flex; justify-content: flex-end; }
.drawer-mask { position: absolute; inset: 0; background: rgba(28, 42, 36, .3); }
.drawer {
  /* 半屏宽（上限 720）：编辑内容多，宽一点少滚动；小窗按比例缩 */
  position: relative; width: min(720px, 50vw);
  display: flex; flex-direction: column;
  background: var(--surface);
  /* 纯平：抽屉用左侧描边分隔，不做投影 */
  border-left: 1px solid var(--sand-200);
}
.drawer__hd { flex: none; position: relative; display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--sand-200); }
.drawer__t { font-size: var(--fs-heading); font-weight: 600; }
.drawer__hd .x { margin-left: auto; color: var(--ink-400); }
.drawer__bd { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-5); display: flex; flex-direction: column; gap: var(--sp-4); }
.drawer__ft { flex: none; display: flex; justify-content: flex-end; gap: var(--sp-3); padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--sand-200); }

/* 产品编辑：表单 + 患者端预览 双栏分屏（仅产品抽屉，不影响其它页抽屉） */
.drawer--split { width: min(1120px, 88vw); }
.drawer--split .drawer__bd { flex-direction: row; align-items: flex-start; overflow-y: auto; gap: var(--sp-5); }
.drawer--split .form { flex: 1 1 auto; min-width: 0; padding-right: var(--sp-4); }
.mp-preview { flex: 0 0 380px; display: flex; flex-direction: column; min-height: 0; }
/* 标题栏中的预览标签：绝对定位对齐右侧 380px 预览列，左右坐标与下方一致；
   pointer-events:none 让右上角关闭按钮仍可点击。 */
.drawer__preview-label { position: absolute; right: var(--sp-5); top: 50%; transform: translateY(-50%); width: 380px; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-600); pointer-events: none; }
.mp-preview__hd small { color: var(--ink-400); font-size: var(--fs-micro); }

/* 手机框：复刻小程序「产品详情页」 */
.mp-frame { flex: 1; min-height: 0; width: 360px; max-width: 100%; border: 1px solid var(--sand-300); border-radius: 16px; overflow: hidden; background: var(--surface); box-shadow: 0 8px 24px rgba(28, 42, 36, .08); display: flex; flex-direction: column; }
.mp-frame__scroll { flex: 1; min-height: 0; overflow-y: auto; padding: var(--sp-4); }
.mp-gallery { height: 180px; border-radius: var(--r-md); background: linear-gradient(140deg, var(--brand-50), var(--sand-100)); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.mp-gallery img { width: 100%; height: 100%; object-fit: cover; }
.mp-ph { display: flex; flex-direction: column; align-items: center; gap: var(--sp-2); color: var(--brand-300); }
.mp-ph-t { font-size: var(--fs-micro); color: var(--ink-400); }
.mp-dots { display: flex; justify-content: center; gap: var(--sp-2); margin: var(--sp-3) 0; }
.mp-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--sand-200); }
.mp-dot.on { width: 16px; border-radius: 3px; background: var(--brand-500); }
.mp-name { font-size: var(--fs-title); font-weight: 600; margin-bottom: var(--sp-2); line-height: 1.4; }
.mp-tags { display: flex; flex-wrap: wrap; gap: var(--sp-2); margin-bottom: var(--sp-3); }
.mp-meta { font-size: var(--fs-caption); color: var(--ink-600); }
.mp-price { margin-top: var(--sp-2); font-size: var(--fs-title); font-weight: 700; color: var(--accent-600); font-variant-numeric: tabular-nums; }
.mp-price__cur { font-size: var(--fs-body); margin-right: 2px; }
.mp-hr { height: 1px; background: var(--line); margin: var(--sp-4) 0; }
.mp-sect { font-size: var(--fs-caption); font-weight: 600; color: var(--ink-600); margin-bottom: var(--sp-2); }
.mp-detail { display: flex; flex-direction: column; }
.mp-text { font-size: var(--fs-body); line-height: var(--lh-body); margin-bottom: var(--sp-3); color: var(--ink-900); }
.mp-text--title { font-size: var(--fs-heading); font-weight: 600; }
.mp-img { width: 100%; min-height: 120px; border-radius: var(--r-md); overflow: hidden; margin-bottom: var(--sp-3); background: var(--sand-100); }
.mp-img img { width: 100%; display: block; }
.mp-img--ph { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2); color: var(--ink-400); min-height: 120px; }

/* ===== 表单：标签在左控件在右，一屏填完（手机端是上下堆叠） ===== */
.form { display: flex; flex-direction: column; gap: var(--sp-4); }
/* 抽屉加宽到半屏后，短字段两两并排（名称|规格、价格|分类、快递公司|快递单号） */
.form__cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-4) var(--sp-5); }
.form__row { display: flex; align-items: center; gap: var(--sp-4); }
.form__row--top { align-items: flex-start; }
.form__label { flex: none; width: 88px; font-size: var(--fs-caption); color: var(--ink-600); }
/* 左右对齐只靠 .form__row 的 align-items:center：输入框行、纯文本行（手机号/时间这类）都垂直居中。
   之前用 padding-top 顶齐输入框，纯文本行会整体下坠错位，废弃。 */
.form__ctl { flex: 1; min-width: 0; }
/* 订单详情：只读属性值文本（订单号/收货方/快递公司/运单号等）字号调小，与标签协调统一 */
.drawer--order .form__ctl { font-size: var(--fs-caption); }
.input {
  height: 40px; padding: 0 var(--sp-3);
  display: flex; align-items: center;
  border: 1px solid var(--sand-200); border-radius: var(--r-md);
  font-size: var(--fs-caption); color: var(--ink-900); background: var(--surface);
}
.input--ph { color: var(--ink-400); }
/* 只读字段：不可更改项以文本形式展示（沙底色 + 灰字，无焦点态），与可编辑 input 明确区分 */
.input--readonly {
  background: var(--sand-100);
  border-color: var(--sand-200);
  color: var(--ink-600);
  cursor: default;
}
.textarea-box {
  min-height: 88px; padding: var(--sp-3);
  border: 1px solid var(--sand-200); border-radius: var(--r-md);
  font-size: var(--fs-caption); line-height: 1.7; color: var(--ink-400);
  background: var(--surface);
}
.form__hint { margin-top: 6px; font-size: var(--fs-micro); color: var(--ink-400); line-height: 1.6; }
.form__req { color: var(--danger); font-style: normal; margin-left: 2px; }
/* 发货单图片上传（V3-PC02 发货抽屉）：固定 240×160 的卡片比例，别撑满整行 */
/* 空态必须是「一眼看出这里能传图」的占位区：白底 + 灰虚线 + 大号图片图标。
   原先虚线用的 sand-200(#EFE7D9) 与底色 sand-100(#F6F1E8) 几乎同色，加 22px 浅灰图标，
   远看就是一块空白，容易被当成图片没加载出来。 */
.up__box {
  width: 240px; height: 160px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  border: 1.5px dashed var(--line-strong); border-radius: var(--r-md); background: var(--surface);
  color: var(--ink-600); font-size: var(--fs-caption); cursor: pointer;
  transition: border-color .15s, background .15s, color .15s;
}
.up__box .i { width: 30px; height: 30px; color: var(--ink-400); }
.up__box:hover { border-color: var(--brand-500); background: var(--brand-50); color: var(--brand-700); }
.up__box:hover .i { color: var(--brand-600); }
.up__spec { margin-top: var(--sp-2); font-size: var(--fs-micro); color: var(--ink-400); }
/* ===== 弹窗（新增推荐码 / 结算确认 / 发货手机扫码回填 共用）===== */
.dlg { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 30; width: 540px;
       background: var(--surface); border: 1px solid var(--sand-200); border-radius: var(--r-lg); overflow: hidden; }
.dlg-mask { position: absolute; inset: 0; z-index: 29; background: rgba(28, 42, 36, .3); }
.dlg--560 { width: 560px; }
.dlg__hd { padding: var(--sp-4) var(--sp-5); border-bottom: 1px solid var(--sand-200); font-size: var(--fs-body); font-weight: 600; }
.dlg__bd { padding: var(--sp-5); }
.dlg__ft { padding: var(--sp-4) var(--sp-5); border-top: 1px solid var(--sand-200); display: flex; align-items: center; justify-content: flex-end; gap: var(--sp-3); }
/* 弹窗内「小程序码 + 三步说明」两栏 */
.qr-pair { display: flex; align-items: center; gap: var(--sp-5); }
.qr-pair .qr { margin: 0; flex: none; }
.qr-steps { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.qr-steps .step { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-600); line-height: 1.6; }
.qr-steps .step b { flex: none; color: var(--brand-600); font-weight: 700; }
/* 输入框右侧的动作按钮（如「手机扫码」） */
.scan-row { display: flex; align-items: center; gap: var(--sp-3); }
.scan-row .input { flex: 1; min-width: 0; }
/* 面单识别结果提示条（拍照 / 上传面单后自动带出快递公司与运单号，管理员只核对） */
.rec-tip--wait { background: var(--sand-100); border-color: var(--sand-200); color: var(--ink-600); }
.rec-tip--wait .i { color: var(--ink-400); }
.rec-tip {
  display: flex; align-items: flex-start; gap: var(--sp-2);
  padding: var(--sp-3); border: 1px solid var(--brand-100); border-radius: var(--r-sm);
  background: var(--brand-50); color: var(--brand-700); font-size: var(--fs-caption); line-height: 1.6;
}
.rec-tip .i { width: 16px; height: 16px; flex: none; margin-top: 2px; }
/* 已上传的面单缩略图 + 重拍 / 删除 */
.thumb {
  width: 104px; height: 104px; border-radius: var(--r-md); border: 1px solid var(--sand-200);
  background: var(--sand-100); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
  font-size: var(--fs-micro); color: var(--ink-400);
}
.thumb__bar { width: 56px; height: 14px; background: repeating-linear-gradient(90deg, var(--ink-400) 0 2px, transparent 2px 4px); }
.thumb__acts { display: flex; gap: var(--sp-4); margin-top: var(--sp-2); font-size: var(--fs-micro); }

/* ===== 登录页 ===== */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--bg); }
.login-card {
  width: 420px; padding: 40px var(--sp-6) var(--sp-6);
  background: var(--surface); border: 1px solid var(--sand-200);
  border-radius: 20px; /* 纯平：登录卡已有描边，去掉投影 */
  text-align: center;
}
/* 标题整体上提 5px：使「logo 下沿→标题」与「副标题→首个输入框」两段留白各 25px，
   标题块在 logo 与表单之间的空白里上下居中（输入框位置保持不变：下面第一条 .login-row 补回 5px） */
.login-card__brand { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); margin-top: -6px; font-size: 22px; font-weight: 700; letter-spacing: .01em; line-height: 1; }
.login-card__brand .i { width: 28px; height: 28px; flex: none; color: var(--brand-600); transform: translateY(1px); }
.login-card__brand span { display: inline-block; line-height: 28px; }
.login-card__sub { margin-top: 6px; font-size: var(--fs-caption); color: var(--ink-600); }
.login-qr {
  width: 168px; height: 168px; margin: var(--sp-5) auto var(--sp-4);
  border-radius: var(--r-lg); background: var(--sand-100);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--sp-2);
  font-size: var(--fs-micro); color: var(--ink-400);
}
.login-qr__grid {
  width: 76px; height: 76px; border-radius: 6px;
  background: repeating-conic-gradient(var(--brand-600) 0% 25%, transparent 0% 50%) 50% / 16px 16px;
}
.login-steps { display: flex; flex-direction: column; gap: var(--sp-3); text-align: left; }
.login-steps .step { display: flex; align-items: flex-start; gap: var(--sp-3); font-size: var(--fs-caption); color: var(--ink-600); line-height: 1.6; }
.login-steps .step b { flex: none; color: var(--brand-600); font-weight: 700; }
.login-note { margin-top: var(--sp-5); padding-top: var(--sp-4); border-top: 1px solid var(--line); font-size: var(--fs-micro); color: var(--ink-400); line-height: 1.7; }
/* 登录卡的手机号 / 验证码表单（V3-PC00 后台登录、V3-W01 推荐人登录共用） */
.login-fld-lab { margin: var(--sp-5) 0 var(--sp-2); font-size: var(--fs-caption); color: var(--ink-600); text-align: left; }
.login-fld {
  height: 52px; padding: 0 var(--sp-3); display: flex; align-items: center;
  border: 1px solid var(--sand-200); border-radius: var(--r-md);
  font-size: var(--fs-body); color: var(--ink-900); background: var(--surface);
}
.login-fld--ph { color: var(--ink-400); }
.login-fld-row { display: flex; align-items: center; gap: var(--sp-3); }
.login-fld-row .login-fld { flex: 1; }
/* 与推荐人网页登录页（V3-W01）保持一致：logo 白瓦片压在卡片上边线 + 行内定宽 label */
.login-card { position: relative; }
.login-card:has(.login-card__logo) { padding-top: 66px; }
.login-card__logo {
  position: absolute; top: -42px; left: 50%; transform: translateX(-50%);
  width: 84px; height: 84px; border-radius: 24px;
  background: var(--surface); color: var(--brand-600);
  display: flex; align-items: center; justify-content: center;
  box-shadow: var(--sh-2);
}
.login-card__logo .i { width: 42px; height: 42px; }
.login-row { display: flex; align-items: center; gap: var(--sp-3); margin-top: var(--sp-5); }
.login-card__sub + .login-row { margin-top: 26px; } /* 配合标题 -6px：输入框回到原位 */
.login-row__lab {
  flex: none; width: 64px; text-align: center;
  font-size: 14px; font-weight: 600; color: var(--ink-600); letter-spacing: .01em;
}
.login-row .login-fld { flex: 1; min-width: 0; height: 48px; } /* 与网页端输入框同高 */
/* 主按钮比整宽略收一档（同网页端）；.login-card 已 text-align:center，inline-flex 自动居中 */
.login-card .btn--block { width: 88%; }
@media (max-width: 500px) {
  .login-page { padding: var(--sp-6) var(--sp-4); }
  .login-card { width: 100%; max-width: 420px; margin: auto; }
  .login-card__logo { width: 72px; height: 72px; border-radius: 20px; top: -36px; }
  .login-card__logo .i { width: 36px; height: 36px; }
  .login-row { gap: var(--sp-2); }
  .login-row__lab { width: 58px; font-size: 13px; }
}
/* 扫码登录页的出错提示（如「该手机号暂无后台权限」）：只在出错时出现，紧跟在二维码下方，不跳独立页 */
.login-err {
  margin: var(--sp-3) auto 0; padding: var(--sp-2) var(--sp-3); max-width: 260px;
  border: 1px solid var(--sand-200); border-left: 3px solid var(--accent-500);
  border-radius: var(--r-sm); background: var(--accent-50);
  color: var(--accent-600); font-size: var(--fs-caption); line-height: 1.6;
}