/* ============================================================
   滕马电竞 · 服务商家平台 —— 共用样式
   丙午马年主题：米白底 + 中国红 + 金（春联年画的配色）。
   浅底的好处：红不会"发闷变脏"，手机上亮堂好读，也更有年味。
   ============================================================ */
:root{
  /* 底色：暖白，不是纯白（纯白配红会显得刺眼） */
  --bg:#fff7f0;
  --bg-2:#fff1e6;
  --card:#ffffff;
  --card-2:#fff6ef;
  --line:#f2ded0;
  /* 文字 */
  --ink:#2e1a12;
  --ink-2:#7d5a49;
  --ink-3:#8f7264;
  /* 主色：中国红 */
  --brand:#c8102e;
  --brand-2:#9a6b09;
  --brand-soft:rgba(200,16,46,.1);
  --wine:#a00d25;
  --wine-2:#7d0a1d;
  /* 金：浅底上要用"深金"才看得清（原来的亮金在米白上只有 3:1，小字发虚） */
  --gold:#9a6b09;
  --gold-2:#9a6b09;
  --gold-soft:rgba(184,134,11,.14);
  /* 深红底上的金：要够亮 */
  --gold-bright:#f5d78a;
  /* 语义色 */
  --ok:#1f8a5b;
  --ok-soft:rgba(31,138,91,.12);
  --warn:#c2691a;
  --danger:#c8102e;
  --danger-soft:rgba(200,16,46,.1);
  --info:#2b6cb0;
  --radius:14px;
  --radius-sm:10px;
  --shadow:0 10px 26px rgba(120,60,20,.1);
  --mono:ui-monospace,Consolas,"Cascadia Mono","Microsoft YaHei",monospace;
  --kai:"STKaiti","KaiTi",Georgia,"Microsoft YaHei",serif;

  /* 客户端手机端用到的渐变/底色，统一放这里 ——
     换主题只要改这一块，不用再去翻下面的规则 */
  --topbg:linear-gradient(90deg,#ffe4d6,#fff7f0 62%);
  --banner:linear-gradient(135deg,#ffd2bf,#fff3ea);
  --iconbg:radial-gradient(circle at 35% 30%,#ffe0d0,#fff6ef);
  --card-grad:linear-gradient(120deg,#fff6ef,#ffffff);
  --pay-grad:linear-gradient(120deg,#ffe9dd,#fff4ec);
  --tabbg:rgba(255,247,240,.97);
  --searchbg:#ffffff;
  --dot:rgba(46,26,18,.22);
  --thumbbg:radial-gradient(circle at 35% 30%,#ffe0d0,#fff4ec);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;padding:0}
body{
  /* 左上角一抹红晕、右上角一点金 —— 年味靠这两处光，不用堆图案 */
  background:
    radial-gradient(900px 460px at 6% -10%, rgba(200,16,46,.13) 0%, transparent 62%),
    radial-gradient(620px 320px at 96% -6%, rgba(184,134,11,.10) 0%, transparent 60%),
    var(--bg) fixed;
  color:var(--ink);
  font:15px/1.65 -apple-system,BlinkMacSystemFont,"Segoe UI","PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  min-height:100vh;
}
a{color:var(--brand-2);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3,h4{margin:0;line-height:1.3}
p{margin:0 0 8px}
code{font-family:var(--mono);background:var(--card-2);padding:1px 5px;border-radius:5px}

/* ---------- 布局 ---------- */
.wrap{max-width:1180px;margin:0 auto;padding:0 18px 60px}
.wrap-narrow{max-width:760px}
.row{display:flex;gap:12px;align-items:center}
.row-between{display:flex;gap:12px;align-items:center;justify-content:space-between}
.wrap-row{display:flex;gap:10px;flex-wrap:wrap;align-items:center}
.grid{display:grid;gap:14px}
.grid-2{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid-3{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.grid-4{grid-template-columns:repeat(auto-fit,minmax(165px,1fr))}
.spacer{flex:1}
.mt{margin-top:14px}.mt-2,.mt2{margin-top:24px}.mb{margin-bottom:14px}
.muted{color:var(--ink-2)}
.dim{color:var(--ink-3)}
.small{font-size:13px}
.tiny{font-size:12px}
.center{text-align:center}
.right{text-align:right}
.nowrap{white-space:nowrap}
.hide{display:none !important}

/* ---------- 顶栏 ---------- */
.top{
  position:sticky;top:0;z-index:40;
  /* 中控台顶栏：暖白，和浅色主题一致（原来这里是深色，浅底上会变成一块黑条） */
  background:linear-gradient(90deg,rgba(255,228,214,.95),rgba(255,247,240,.92) 52%);
  backdrop-filter:blur(12px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(232,185,85,.14);
}
.top-in{max-width:1180px;margin:0 auto;padding:12px 18px;display:flex;gap:14px;align-items:center}
.logo{display:flex;align-items:center;gap:9px;font-weight:800;letter-spacing:.3px;font-size:16px}
.logo .mark{
  width:26px;height:26px;border-radius:8px;display:grid;place-items:center;
  /* 中控台标识：中国红底 + 亮金字（深红底上要用亮金才看得清） */
  background:linear-gradient(140deg,#d81f3d,var(--wine));
  color:var(--gold-bright);font-size:15px;font-weight:900;line-height:1;
  box-shadow:inset 0 0 0 1px rgba(245,215,138,.55);
}
/* 顶部那条金线：全站唯一的"金色横线"，作为马年的统一记号 */
/* 顶部那条金线：全站唯一的"金色横线"，作为马年的统一记号。
   （不要在这里重复写 .top{...}，会和上面的规则打架） */
.nav{display:flex;gap:4px;flex-wrap:wrap}
.nav a{
  padding:7px 12px;border-radius:9px;color:var(--ink-2);font-size:14px;font-weight:600;
}
.nav a:hover{background:var(--card-2);color:var(--ink);text-decoration:none}
.nav a.on{background:var(--brand-soft);color:var(--brand-2)}
.me{display:flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2)}

/* ---------- 卡片 ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow)}
.card-p{padding:18px}
.card-h{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap}
.card-h h3{font-size:15px}
.sect{margin-top:26px}
.sect > h2{font-size:17px;margin-bottom:12px;display:flex;gap:8px;align-items:center}
.sect > h2::before{content:"";width:3px;height:15px;border-radius:2px;background:var(--brand)}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:7px;
  font:600 14px/1 inherit;color:var(--ink);background:var(--card-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:11px 16px;cursor:pointer;transition:.15s;
}
.btn:hover{border-color:var(--brand);background:var(--card-2)}
.btn:disabled{opacity:.5;cursor:not-allowed}
.btn-primary{background:linear-gradient(135deg,#c0173a,var(--wine));color:#fff3dc;border-color:transparent;font-weight:800}
.btn-primary:hover{filter:brightness(1.08);background:linear-gradient(135deg,#c0173a,var(--wine))}
.btn-ok{background:var(--ok);border-color:transparent;color:#fff;font-weight:800}
.btn-ok:hover{filter:brightness(1.07);background:var(--ok)}
.btn-danger{background:var(--danger-soft);border-color:rgba(255,95,86,.4);color:var(--danger)}
.btn-danger:hover{background:rgba(255,95,86,.2)}
.btn-sm{padding:7px 11px;font-size:13px;border-radius:8px}
.btn-block{width:100%}
.btn-ghost{background:transparent}

/* ---------- 表单 ---------- */
.field{margin-bottom:14px}
.field > label{display:block;font-size:13.5px;font-weight:700;margin-bottom:7px;color:var(--ink)}
.field .tip{font-weight:400;color:var(--ink-3);font-size:12.5px;margin-left:6px}
input[type=text],input[type=password],input[type=tel],input[type=number],input[type=month],select,textarea{
  width:100%;font:inherit;color:var(--ink);background:var(--bg-2);
  border:1px solid var(--line);border-radius:var(--radius-sm);padding:11px 12px;outline:none;transition:.15s;
}
input:focus,select:focus,textarea:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
textarea{min-height:90px;resize:vertical}
select{cursor:pointer}
input::placeholder,textarea::placeholder{color:var(--ink-3)}
.err-msg{color:var(--danger);font-size:12.5px;margin-top:6px}
.hint-box{
  background:var(--brand-soft);border:1px solid rgba(232,185,85,.32);border-radius:var(--radius-sm);
  padding:11px 13px;font-size:13px;color:var(--brand-2);
}
.warn-box{background:var(--danger-soft);border:1px solid rgba(255,95,86,.35);border-radius:var(--radius-sm);padding:11px 13px;font-size:13px;color:var(--danger)}
.ok-box{background:var(--ok-soft);border:1px solid rgba(31,138,91,.35);border-radius:var(--radius-sm);padding:11px 13px;font-size:13px;color:var(--ok)}

/* ---------- 徽标 / 状态 ---------- */
.badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:700;padding:3px 9px;border-radius:999px;border:1px solid var(--line);color:var(--ink-2);background:var(--card-2)}
.badge-st-pending{color:var(--warn);border-color:rgba(255,201,77,.35);background:rgba(255,201,77,.1)}
.badge-st-paid{color:var(--info);border-color:rgba(74,168,255,.35);background:rgba(74,168,255,.1)}
.badge-st-assigned{color:#6b3fa0;border-color:rgba(107,63,160,.35);background:rgba(107,63,160,.1)}
.badge-st-running{color:var(--brand-2);border-color:rgba(232,185,85,.42);background:var(--gold-soft)}
/* 待核验：员工已交完成截图，等客服/老板核对（核对通过才算完成、才计成工资） */
.badge-st-review{color:#8a5800;border-color:rgba(138,88,0,.4);background:rgba(184,134,11,.14)}
.badge-st-done{color:var(--ok);border-color:rgba(62,207,142,.35);background:var(--ok-soft)}
.badge-st-cancelled{color:var(--ink-3)}
.badge-role-admin{color:var(--gold-2);border-color:rgba(232,185,85,.45);background:var(--gold-soft)}
.badge-role-cs{color:var(--info);border-color:rgba(74,168,255,.4);background:rgba(74,168,255,.1)}
.badge-role-booster{color:#6b3fa0;border-color:rgba(107,63,160,.4);background:rgba(107,63,160,.1)}
.pill-count{background:var(--danger);color:#fff;border-radius:999px;padding:1px 7px;font-size:11px;font-weight:800}

/* ---------- 中控台：服务项目里的商品图 ---------- */
.svc-thumb{width:52px;height:38px;border-radius:7px;object-fit:cover;display:block;
  background:var(--thumbbg);border:1px solid var(--line)}
.svc-thumb.none{display:grid;place-items:center;font-size:11px;color:var(--ink-3);border-style:dashed}
.svc-img-prev{width:132px;height:96px;border-radius:11px;overflow:hidden;flex:0 0 auto;
  background:var(--thumbbg);border:1px dashed var(--line);display:grid;place-items:center}
.svc-img-prev img{width:100%;height:100%;object-fit:cover;display:block}
.svc-img-prev .none{font-size:11.5px;color:var(--ink-3);text-align:center;padding:0 8px;line-height:1.5}

/* ---------- 表格 ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse;font-size:14px}
th,td{padding:11px 12px;text-align:left;border-bottom:1px solid var(--line);vertical-align:middle}
th{font-size:12.5px;color:var(--ink-3);font-weight:700;text-transform:none;white-space:nowrap}
tbody tr:hover{background:var(--card-2)}
td.num{font-family:var(--mono);text-align:right;white-space:nowrap}
td.mono{font-family:var(--mono);font-size:13px}
/* 订单号、口令这类"要一字不差读出来"的内容也常用在 span 上，
   所以除了 td.mono 还要有一个通用 .mono（之前只有表格那条，
   导致 <span class="mono"> 没有等宽字体） */
.mono{font-family:var(--mono)}

/* ---------- 统计块 ---------- */
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px}
.stat .k{font-size:12.5px;color:var(--ink-3);font-weight:600}
.stat .v{font-size:24px;font-weight:800;margin-top:5px;font-family:var(--mono)}
.stat .v.sm{font-size:19px}
.stat.brand{background:linear-gradient(135deg,rgba(184,22,58,.26),rgba(184,22,58,.05));border-color:rgba(232,185,85,.35)}
.stat.ok{background:linear-gradient(135deg,rgba(62,207,142,.12),rgba(62,207,142,.03));border-color:rgba(62,207,142,.3)}

/* ---------- 服务卡片 ---------- */
.svc{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:16px;display:flex;flex-direction:column;gap:10px;transition:.15s}
.svc:hover{border-color:rgba(232,185,85,.5);transform:translateY(-2px)}
.svc.sel{border-color:var(--brand);box-shadow:0 0 0 2px var(--brand-soft)}
.svc .nm{font-weight:800;font-size:15.5px}
.svc .ds{color:var(--ink-2);font-size:13px;flex:1}
.svc .pr{font-family:var(--mono);font-weight:800;color:var(--brand-2);font-size:19px}
.svc .pr small{font-size:12px;color:var(--ink-3);font-weight:500;font-family:inherit}

/* ---------- 聊天 ---------- */
.chat{display:flex;flex-direction:column;height:460px;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--bg-2)}
.chat-list{flex:1;overflow-y:auto;padding:14px;display:flex;flex-direction:column;gap:10px}
.msg{max-width:78%;padding:9px 12px;border-radius:12px;font-size:14px;white-space:pre-wrap;word-break:break-word}
.msg .t{display:block;font-size:11px;color:var(--ink-3);margin-top:4px}
.msg.them{background:var(--card-2);align-self:flex-start;border-bottom-left-radius:4px}
.msg.me{background:linear-gradient(135deg,#b8163a,#8a0f24);color:#fff3dc;align-self:flex-end;border-bottom-right-radius:4px;font-weight:600}
.msg.me .t{color:rgba(255,243,220,.62)}
.msg.note{background:rgba(255,201,77,.12);border:1px dashed rgba(255,201,77,.45);color:var(--warn);align-self:center;max-width:92%;font-size:13px}
.chat-in{display:flex;gap:8px;padding:10px;border-top:1px solid var(--line);background:var(--card)}
.chat-in textarea{min-height:44px;max-height:110px;border-radius:10px}
.thread{display:flex;gap:11px;padding:12px;border-bottom:1px solid var(--line);cursor:pointer;transition:.12s}
.thread:hover{background:var(--card-2)}
.thread.on{background:var(--brand-soft);border-left:3px solid var(--brand)}
.thread .av{width:36px;height:36px;border-radius:50%;background:var(--card-2);display:grid;place-items:center;font-weight:800;color:var(--brand-2);flex:0 0 36px}
.thread .body{flex:1;min-width:0}
.thread .nm{font-weight:700;font-size:14px;display:flex;gap:6px;align-items:center}
.thread .pv{color:var(--ink-3);font-size:12.5px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ---------- 其它 ---------- */
.toast{
  position:fixed;left:50%;bottom:26px;transform:translate(-50%,16px);z-index:99;
  background:#000;color:#fff;border:1px solid var(--line);
  padding:11px 17px;border-radius:999px;font-size:14px;opacity:0;pointer-events:none;transition:.2s;
  max-width:90vw;text-align:center;box-shadow:var(--shadow);
}
.toast.on{opacity:1;transform:translate(-50%,0)}
.toast.err{background:#3a1512;border-color:rgba(255,95,86,.5)}
.toast.ok{background:#0d2a1e;border-color:rgba(62,207,142,.5)}
dialog{border:none;border-radius:var(--radius);padding:0;background:var(--card);color:var(--ink);max-width:520px;width:calc(100% - 32px);box-shadow:0 30px 70px rgba(0,0,0,.6)}
dialog::backdrop{background:rgba(5,8,12,.7)}
.dlg-p{padding:20px}
.empty{padding:34px 18px;text-align:center;color:var(--ink-3);font-size:14px}
.kv{display:flex;gap:10px;font-size:13.5px;padding:7px 0;border-bottom:1px dashed var(--line)}
.kv .k{color:var(--ink-3);flex:0 0 92px}
.kv .v{flex:1;word-break:break-all}
.secret{font-family:var(--mono);letter-spacing:1px;color:var(--brand-2)}
.wxid{
  font-family:var(--mono);font-size:13.5px;font-weight:700;color:var(--brand-2);
  background:var(--brand-soft);border:1px solid rgba(232,185,85,.32);border-radius:8px;padding:3px 9px;
  word-break:break-all;
}
footer{padding:26px 0 0;color:var(--ink-3);font-size:12.5px;text-align:center}
.mini-note{font-size:12.5px;color:var(--ink-3);margin-top:6px}

/* 顶部提醒条：还在用默认密码时一直挂着 */
.warn-bar{
  display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  background:rgba(255,95,86,.14);border:1px solid rgba(255,95,86,.45);
  border-radius:var(--radius);padding:12px 14px;margin:14px 0 0;
}
.warn-bar-i{font-size:17px;line-height:1}
.warn-bar-t{flex:1;min-width:180px;font-size:13.5px;color:var(--danger);font-weight:600}

/* ============================================================
   强制改密码的拦截层
   老板账号默认是 8888，公网上等于门没锁，所以盖住整页要求先改掉。
   ============================================================ */
.pw-gate{
  position:fixed;inset:0;z-index:200;background:rgba(5,8,12,.86);
  display:flex;align-items:flex-start;justify-content:center;
  overflow-y:auto;padding:40px 16px;
}
.pw-gate-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px;max-width:420px;width:100%;box-shadow:0 24px 70px rgba(0,0,0,.6);
}
.pw-gate-card h3{margin:8px 0 8px;font-size:18px}
.pw-gate-icon{
  width:40px;height:40px;border-radius:12px;display:grid;place-items:center;font-size:20px;
  background:rgba(255,95,86,.16);border:1px solid rgba(255,95,86,.45);color:var(--danger);
}
.pw-gate .field{margin-bottom:12px}
.scroll-y{max-height:520px;overflow-y:auto}

/* ============================================================
   手机端优化（客户多半用手机打开）
   要点：输入框字号 ≥16px 才不会触发 iOS 自动放大；
        按钮至少 44px 高才好点；表格横向滚动。
   这里是唯一的一条 640px 规则 —— 不要在多处重复写同一个断点，
   否则后面的会覆盖前面的，很难看出到底是哪条生效。
   ============================================================ */
@media (max-width:640px){
  /* 顶栏与导航 */
  .top-in{padding:10px 12px;gap:8px}
  .nav a{padding:6px 9px;font-size:13px}
  .wrap{padding:0 12px 60px}
  .hide-sm{display:none !important}

  /* 表单：字号 16px 防 iOS 缩放，点击区域加高 */
  input,select,textarea{font-size:16px;padding:13px 12px;min-height:46px}
  textarea{min-height:96px}
  .field>label{font-size:14px}
  .field{margin-bottom:16px}

  /* 按钮：整行更好点 */
  .btn{padding:13px 16px;font-size:15px;min-height:46px}
  .btn-sm{padding:10px 13px;font-size:14px;min-height:40px}
  .wrap-row>.btn{flex:1 1 auto;min-width:0}

  /* 卡片与标题 */
  .card-p{padding:15px}
  .card-h{padding:13px 15px}
  h1,h2,h3{line-height:1.35}
  .stat{padding:13px 14px}
  .stat .v{font-size:19px}
  .stat .v.sm{font-size:16px}

  /* ============================================================
     表格：手机上不再是"要往右划的宽表"，而是**一个订单一张卡片**。
     这是所有表格的默认行为 —— 手机端优先，不用每张表单独改。
     想要"标签 + 值"的样子，给对应的 <td> 加 data-label="列名" 即可；
     没加也不会横划，只是少个标签。
     ============================================================ */
  .table-wrap{overflow-x:visible;border:none;background:none;-webkit-overflow-scrolling:touch}
  .table-wrap table{display:block;min-width:0;width:100%}
  .table-wrap thead{display:none}            /* 列名改由每个值前面的标签承担 */
  .table-wrap tbody{display:block}
  .table-wrap tr{
    display:flex;flex-direction:column;
    background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
    padding:11px 13px;margin-bottom:10px;box-shadow:var(--shadow);
  }
  .table-wrap tr:last-child{margin-bottom:0}
  .table-wrap td{
    display:flex;gap:10px;align-items:flex-start;
    border:none;padding:4px 0;font-size:14px;text-align:left;width:auto;
  }
  .table-wrap td::before{
    content:attr(data-label);
    flex:0 0 74px;color:var(--ink-3);font-size:12.5px;font-weight:700;
    padding-top:2px;text-align:left;
  }
  /* 没有标签的单元格（比如按钮格）不要留出空白 */
  .table-wrap td:not([data-label])::before{display:none}
  /* 金额要显眼：手机上第一眼就是看钱 */
  .table-wrap td.num{font-weight:800;color:var(--brand);text-align:left;font-size:15px}
  /* 操作区：分隔线 + 按钮换行，方便手指点 */
  .table-wrap td[data-label="操作"],.table-wrap td[data-label=""]{
    display:block;padding-top:10px;margin-top:6px;border-top:1px dashed var(--line);
  }
  /* 操作格的标签单独占一行，否则会紧贴着第一个按钮 */
  .table-wrap td[data-label="操作"]::before,.table-wrap td[data-label=""]::before{
    display:block;margin-bottom:8px;
  }
  .table-wrap td .btn{margin-left:0!important;margin-right:7px;margin-bottom:7px}
  /* 次要信息排到最后（订单号、时间），符合"先看重点"的顺序 */
  .table-wrap td[data-label="订单号"]{order:6;font-size:12.5px;color:var(--ink-3)}
  .table-wrap td[data-label="下单时间"]{order:7;font-size:12.5px;color:var(--ink-3)}
  .table-wrap td[data-label="操作"]{order:20}
  th,td{padding:10px 11px;font-size:13.5px}
  /* 用 td.mono 而不是 .mono：表格里已有 td.mono 规则，裸类名优先级不够会被盖掉 */
  td.mono{font-size:12.5px}

  /* 服务卡片：价格与按钮更醒目 */
  .svc{padding:14px}
  .svc .pr{font-size:20px}
  .svc .btn{width:100%}

  /* 弹窗：接近全屏，内容可滚 */
  dialog{width:calc(100% - 20px);max-width:none}
  .dlg-p{padding:16px;max-height:78vh}

  /* 对话气泡宽度放宽 */
  .msg{max-width:86%}
  .msg.note{max-width:94%}

  /* 强制改密码的拦截层 */
  .pw-gate{padding:16px 12px 40px}
  .pw-gate-card{padding:18px}
  .pw-gate .btn{width:100%}
  .pw-gate .wrap-row{flex-direction:column;align-items:stretch}
}

/* 很窄的屏幕（老手机） */
@media (max-width:360px){
  .nav a{padding:6px 7px;font-size:12.5px}
  .logo span{font-size:14px}
  .stat .v{font-size:17px}
}

/* ============================================================
   客户端「滕马电竞」· 手机端排版
   模块顺序照参考的商城小程序：
     顶栏 → 搜索 → 横幅 → 公告条 → 圆形专区 → 支付提示 → 商品卡 → 底部标签栏
   配色：酒红 + 黑 + 金（.m- 前缀只给客户端用，不影响中控台）
   ============================================================ */
.m-app{max-width:520px;margin:0 auto;padding-bottom:78px}   /* 给底部标签栏留位置 */
/* 客户端所有视图都要给底部标签栏留空间（fixed 会盖住最后一行） */
body.has-mtabs .wrap{padding-bottom:92px}
body.has-mtabs .wrap{max-width:520px}

/* 顶栏 */
.m-top{
  position:sticky;top:0;z-index:30;
  background:var(--topbg);
  border-bottom:1px solid var(--line);
  display:flex;align-items:center;gap:8px;padding:11px 12px;
}
.m-top .m-cs{font-size:12.5px;color:var(--ink-2);white-space:nowrap;cursor:pointer}
.m-top .m-name{flex:1;text-align:center;font-weight:800;letter-spacing:1.2px;color:var(--brand);font-size:16px}
.m-top .m-more{font-size:12.5px;color:var(--ink-2);white-space:nowrap;cursor:pointer}

/* 搜索（真能用：输入即时筛选下面的服务） */
.m-search{
  margin:10px 12px;background:var(--searchbg);border:1px solid var(--line);
  border-radius:999px;padding:9px 14px;
  color:var(--ink-3);font-size:13px;display:flex;align-items:center;gap:8px;cursor:pointer;
}
/* 里面的输入框：去掉全局 input 的内边距和最小高度，否则会把白色药丸撑变形；
   字号固定 16px —— 小于 16px 时 iOS 聚焦会自动放大整个页面，很难用 */
.m-search input{
  border:none;background:transparent;outline:none;width:100%;
  font:inherit;font-size:16px;color:var(--ink);padding:0;min-height:0;
}
.m-search input::placeholder{color:var(--ink-3)}

/* 商品轮播所在区块的底色 */
.m-banner{
  margin:0 12px 10px;border-radius:14px;padding:16px 15px;position:relative;overflow:hidden;
  background:var(--banner);border:1px solid var(--line);
}
.m-banner .m-t{font-weight:900;font-size:17px;color:var(--brand);letter-spacing:.5px}
.m-banner .m-d{font-size:12px;color:var(--ink-2);margin-top:4px;line-height:1.5}

/* 公告条 */
.m-notice{
  margin:0 12px 10px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:8px 12px;display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
}
.m-notice .m-sp{color:var(--brand);font-weight:800;flex:0 0 auto}

/* 圆形专区入口（5 列） */
.m-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:10px 4px;padding:6px 10px 14px}
.m-grid a{text-decoration:none;color:inherit;text-align:center;display:block}
.m-ico{
  width:46px;height:46px;border-radius:50%;margin:0 auto 6px;display:grid;place-items:center;
  background:var(--iconbg);border:1px solid var(--line);overflow:hidden;
  font-size:20px;line-height:1;
}
.m-ico.avatar{background:var(--iconbg);border-color:var(--brand)}
.m-ico svg{width:38px;height:38px;display:block}
.m-lb{font-size:10.5px;color:var(--ink-2);line-height:1.25;display:block;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* 支付说明（没接支付，所以是明确的转账说明，不做假按钮） */
.m-pay{
  margin:0 12px 12px;background:var(--pay-grad);
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;
  display:flex;align-items:center;gap:12px;
}
.m-pay .m-k{flex:1;font-size:13px;font-weight:700;color:var(--ink)}
.m-pay .m-k small{display:block;font-weight:500;font-size:11.5px;color:var(--ink-3);margin-top:2px}
.m-pay .m-go{
  background:linear-gradient(135deg,#d81f3d,var(--wine));color:#fff;font-weight:800;font-size:12.5px;
  padding:8px 15px;border-radius:999px;white-space:nowrap;cursor:pointer;border:none;
}

/* ============================================================
   商品列表（两列网格）
   信息结构照参考图：图 → 名称 → 销量·浏览 → 红价 + 划线原价。
   卡片上不放按钮（点了就进详情），这样文字最少、图最大。
   ============================================================ */
.m-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px 14px}
.pcard{
  border-radius:12px;overflow:hidden;background:var(--card);border:1px solid var(--line);
  box-shadow:0 2px 8px rgba(120,60,20,.06);cursor:pointer;
  display:flex;flex-direction:column;
}
/* 1:1 方图并铺满：既不留白也不裁人，一屏能看到 4 个商品 */
.pcard .pic{position:relative;width:100%;aspect-ratio:1/1;background:var(--thumbbg);overflow:hidden}
.pcard .pic img{width:100%;height:100%;object-fit:cover;display:block}
.pcard .pic .autocard .ic{font-size:40px}
.pcard .pic .autocard .nm{font-size:10px;bottom:7px}
.pcard .tag{
  position:absolute;left:8px;top:8px;z-index:2;font-size:10px;font-weight:800;
  padding:2px 7px;border-radius:999px;background:rgba(200,16,46,.92);color:#fff;
}
.pcard .info{padding:9px 10px 11px;display:flex;flex-direction:column;flex:1}
/* 注意要限定在 .info 里：不然会串到图片上那张"自动配色卡"里的 .nm */
.pcard .info .nm{
  font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.35;
  overflow:hidden;text-overflow:ellipsis;display:-webkit-box;
  -webkit-line-clamp:2;-webkit-box-orient:vertical;
}
.pcard .meta{display:flex;gap:10px;font-size:10.5px;color:var(--ink-3);margin-top:6px}
.pcard .prow{display:flex;align-items:baseline;gap:6px;margin-top:auto;padding-top:8px;flex-wrap:wrap}
.pcard .now{font-size:16px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.pcard .unit{font-size:11px;color:var(--ink-3)}
.pcard .old{font-size:11.5px;color:var(--ink-3);text-decoration:line-through}

/* 商品详情弹窗（客户点进来看完整说明）
   头部图在左、信息在右 —— 省竖向空间，一屏就能看到重点，不用一进来就往下滑 */
.m-dl-head{display:flex;gap:12px;align-items:flex-start}
.m-dl-thumb{
  width:112px;height:112px;flex:0 0 auto;border-radius:12px;overflow:hidden;
  background:var(--thumbbg);border:1px solid var(--line);
}
.m-dl-thumb img{width:100%;height:100%;object-fit:cover;display:block}
.m-dl-thumb .autocard .ic{font-size:38px}
.m-dl-info{flex:1;min-width:0}
.m-dl-name{font-size:17px;font-weight:800;color:var(--ink);line-height:1.35;word-break:break-word}
.m-dl-price{font-size:20px;font-weight:900;color:var(--brand);margin-top:6px;
  font-variant-numeric:tabular-nums}
.m-dl-price small{font-size:12px;font-weight:500;color:var(--ink-3)}
.m-dl-meta{display:flex;gap:6px;flex-wrap:wrap;margin-top:9px}
/* 详细说明保留换行 —— 中控台怎么排版，客户就怎么看 */
.m-dl-body{margin-top:4px;font-size:14px;color:var(--ink-2);white-space:pre-wrap;
  line-height:1.8;word-break:break-word}

/* 旧的紧凑商品卡（两列）已经不用了，留着以防旧缓存页面还在引用 */

/* 商品卡（2 列） */
.m-prods{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:0 12px 14px}
.m-prod{
  border-radius:14px;padding:11px;background:var(--card);border:1px solid var(--line);
  position:relative;overflow:hidden;display:flex;flex-direction:column;
  box-shadow:0 2px 8px rgba(120,60,20,.06);
}
.m-prod .m-tag2{
  position:absolute;right:-1px;top:-1px;font-size:9.5px;padding:2px 8px;border-bottom-left-radius:9px;
  background:var(--gold-soft);color:var(--gold);
}
.m-prod .m-thumb{
  height:62px;border-radius:10px;margin-bottom:8px;display:grid;place-items:center;
  background:var(--thumbbg);border:1px solid var(--line);overflow:hidden;
}
.m-prod .m-thumb img{width:100%;height:100%;object-fit:contain;display:block}
.m-prod .m-nm{font-size:12.5px;font-weight:800;color:var(--ink);line-height:1.35}
.m-prod .m-ds{font-size:11px;color:var(--ink-3);margin:4px 0 8px;flex:1;line-height:1.4}
.m-prod .m-pr{font-size:17px;font-weight:900;color:var(--brand);font-variant-numeric:tabular-nums}
.m-prod .m-pr small{font-size:11px;font-weight:500;color:var(--ink-3)}
.m-prod .m-buy{
  margin-top:9px;border:none;border-radius:9px;padding:9px;font-size:13px;font-weight:800;cursor:pointer;
  background:linear-gradient(135deg,#d81f3d,var(--wine));color:#fff;width:100%;
}

/* 底部标签栏 */
.m-tabs{
  position:fixed;left:0;right:0;bottom:0;z-index:40;
  display:flex;background:var(--tabbg);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);padding:6px 0 8px;
  box-shadow:0 -2px 10px rgba(120,60,20,.06);
}
.m-tabs a{
  flex:1;text-align:center;text-decoration:none;color:var(--ink-3);font-size:10.5px;
  padding:2px 0;cursor:pointer;
}
.m-tabs a .m-i{display:block;font-size:19px;line-height:1.25}
.m-tabs a.on{color:var(--brand);font-weight:800}

/* 客户端区块标题 */
.m-sect{display:flex;align-items:center;gap:8px;padding:2px 14px 8px;font-size:13.5px;font-weight:800;color:var(--ink)}

/* ============================================================
   客户端首页 · 商品轮播（左图右文）
   每个商品的图在中控台上传；没传图的用自动配色卡（见 .autocard）
   ============================================================ */
/* 轮播：一次只显示一张。
   关键就是这里的 overflow:hidden —— 少了它，.m-track 里所有卡片会并排铺开，
   把整个页面撑宽、手机上一整屏都被拉长。 */
.m-carousel{position:relative;margin:0 12px 12px;overflow:hidden;border-radius:14px}
.m-track{display:flex;transition:transform .45s cubic-bezier(.4,0,.2,1);will-change:transform}
.m-slide{
  flex:0 0 100%;min-width:100%;
  cursor:pointer;position:relative;
  background:var(--thumbbg);
}
/* 广告就是一张整图：铺满整个卡片宽度，16:9。
   文字直接画在图里（中控台上传的图自带文字），页面不再另外写字 ——
   这样广告想怎么做都行，不受模板限制。 */
.m-slide img{width:100%;display:block;aspect-ratio:16/9;object-fit:cover}
/* 没传广告图时的占位：保持同样高度，不会让页面跳一下 */
.m-slide .ph{
  width:100%;aspect-ratio:16/9;display:grid;place-items:center;
  font-size:14px;color:var(--ink-3);
}
.m-cdots{display:flex;gap:5px;justify-content:center;margin-top:9px}
.m-cdots i{width:5px;height:5px;border-radius:999px;background:var(--dot);display:block;transition:.25s}
.m-cdots i.on{width:15px;background:var(--brand)}

/* 分类图标（人物立绘到位前先用图标，避免一屏都是同一个占位字） */
.m-ph{font-size:22px;line-height:1}
.m-ico .m-ph{font-size:20px}
.m-prod .m-thumb .m-ph{font-size:26px}

/**
 * 没上传图片时的自动配色卡。
 * 色相由商品名算出来（同一个名字永远同一个颜色），
 * 所以即使一张图都没传，首页也不会是"开天窗"的样子。
 * 底色是深色彩（见 client-app.js 的 hsl），所以文字用白色。
 */
.autocard{width:100%;height:100%;display:grid;place-items:center;position:relative}
.autocard .ic{font-size:30px;position:relative;z-index:1}
.autocard .nm{position:absolute;left:0;right:0;bottom:5px;text-align:center;
  font-size:9.5px;font-weight:700;color:rgba(255,255,255,.88);z-index:1;
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;padding:0 6px}

.m-sect::before{content:"";width:3px;height:13px;border-radius:2px;background:linear-gradient(180deg,var(--brand),var(--gold))}
.m-sect .m-more2{margin-left:auto;font-size:12px;font-weight:500;color:var(--ink-3);cursor:pointer}