/* ========================================================
   手机端（小程序风格）样式：底部 TabBar + 卡片列表 + 底部按钮
   仅在窄屏生效，桌面端保持原管理后台布局
   ======================================================== */
:root { --tab-h: 58px; }

/* 底部 TabBar */
.tabbar {
  position: fixed; left: 0; right: 0; bottom: 0; height: var(--tab-h); z-index: 60;
  background: rgba(255,255,255,.97); backdrop-filter: saturate(180%) blur(12px);
  border-top: 1px solid #eef2f8; display: flex; padding-bottom: env(safe-area-inset-bottom);
}
.tabbar .tb {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px; font-size: 10.5px; color: #92a1b4; cursor: pointer; position: relative;
}
.tabbar .tb i { font-size: 19px; line-height: 1; font-style: normal; }
.tabbar .tb.on { color: #2f6fed; font-weight: 600; }
.tabbar .tb.on i { transform: translateY(-1px); }

/* 移动端头部 */
.m-header {
  background: linear-gradient(150deg, #0d2544, #17365d 55%, #24507f);
  color: #fff; padding: 14px 16px 16px; position: sticky; top: 0; z-index: 30;
  padding-top: calc(14px + env(safe-area-inset-top));
}
.m-header .h-top { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.m-header .h-logo {
  width: 40px; height: 40px; border-radius: 12px; background: #fff;
  display: grid; place-items: center; flex: none; box-shadow: 0 2px 8px rgba(0,0,0,.2);
}
.m-header .h-logo img { width: 34px; height: 34px; object-fit: contain; display: block; }
.m-header .h-name { font-size: 15px; font-weight: 650; }
.m-header .h-role { font-size: 11px; color: #a8c0da; margin-left: auto; }
.m-header .h-month {
  display: flex; align-items: center; gap: 8px; background: rgba(255,255,255,.12);
  border-radius: 10px; padding: 7px 12px; font-size: 13px; width: fit-content;
}
.m-header .h-month button { color: #cfe0f2; font-size: 15px; padding: 0 4px; }
.m-header .h-month b { font-weight: 650; }
/* 新版深色选择器（复用 .mpick 结构，覆盖为深底样式） */
.m-header .mpick-dark {
  position: static; border: none; box-shadow: none; gap: 4px;
  background: rgba(255,255,255,.10); padding: 5px 8px; border-radius: 10px;
}
.m-header .mpick-dark .mp-nav,
.m-header .mpick-dark .mp-nav:hover {
  width: 26px; height: 26px; background: none; color: #dce9f7; font-size: 18px;
  padding: 0; padding-bottom: 3px; display: grid; place-items: center;
}
.m-header .mpick-dark .mp-nav:active { background: rgba(255,255,255,.16); transform: scale(.9); }
.m-header .mpick-dark .mp-label {
  min-width: 0; padding: 3px 6px; background: none; color: #fff; font-size: 13px;
}
.m-header .mpick-dark .mp-label:hover { background: rgba(255,255,255,.10); }
.m-header .mpick-dark .mp-today {
  background: rgba(255,255,255,.18); color: #eaf2fc; font-size: 11.5px; padding: 4px 8px;
}
.m-header .mpick-dark .mp-today:hover { background: rgba(255,255,255,.28); }
.m-header .h-scope { margin-left: 8px; }
.m-header select {
  background: rgba(255,255,255,.16); color: #fff; border: none; border-radius: 8px;
  padding: 4px 8px; font-size: 12px; outline: none;
}
.m-header select option { color: #17365d; }

/* 移动端 KPI 卡 */
.m-kpi { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 12px 12px 0; }
.m-kpi .k {
  background: #fff; border-radius: 14px; padding: 13px 14px; box-shadow: 0 1px 2px rgba(23,54,93,.05);
}
.m-kpi .k .l { font-size: 12px; color: #5a6b80; display: flex; align-items: center; gap: 5px; }
.m-kpi .k .v { font-size: 25px; font-weight: 750; color: #17365d; margin: 5px 0 2px; letter-spacing: -.5px; }
.m-kpi .k .v small { font-size: 11px; font-weight: 500; color: #92a1b4; margin-left: 2px; }
.m-kpi .k .f { font-size: 10.5px; color: #92a1b4; }
.m-kpi .k .b { height: 4px; background: #eef2f8; border-radius: 4px; margin-top: 8px; overflow: hidden; }
.m-kpi .k .b i { display: block; height: 100%; border-radius: 4px; background: linear-gradient(90deg,#4d8cff,#2f6fed); }
.m-kpi .k .b.ok i { background: linear-gradient(90deg,#4bd0a5,#0f9d76); }
.m-kpi .k .b.warn i { background: linear-gradient(90deg,#ffc46b,#e08b00); }

/* 移动端卡片通用 */
.m-card { background: #fff; border-radius: 14px; margin: 12px 12px 0; box-shadow: 0 1px 2px rgba(23,54,93,.05); overflow: hidden; }
.m-card .m-h { padding: 13px 15px 0; display: flex; align-items: center; gap: 8px; }
.m-card .m-h b { font-size: 14px; color: #17365d; }
.m-card .m-h span { font-size: 11px; color: #92a1b4; }
.m-card .m-b { padding: 12px 15px 15px; }

/* 移动端独立工具条（放年份选择器等） */
.m-tool { padding: 12px 12px 0; }
.m-tool .mpick { display: flex; width: 100%; padding: 4px; }
.m-tool .mpick .mp-nav { width: 38px; height: 34px; font-size: 19px; flex-shrink: 0; }
.m-tool .mpick .mp-label { flex: 1 1 auto; min-width: 0; font-size: 14.5px; }
.m-tool .mpick .mp-today { padding: 7px 12px; font-size: 12.5px; flex-shrink: 0; }

/* 成员卡 */
.m-member { border-bottom: 1px solid #f2f5fa; padding: 12px 0; }
.m-member:last-child { border-bottom: none; }
.m-member .mm-top { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; }
.m-member .mm-top .av {
  width: 32px; height: 32px; border-radius: 50%; color: #fff; font-weight: 700; font-size: 13px;
  display: grid; place-items: center; flex-shrink: 0;
}
.m-member .mm-top b { font-size: 14px; color: #17365d; display: block; }
.m-member .mm-top span { font-size: 10.5px; color: #92a1b4; }
.m-member .mm-row { display: flex; justify-content: space-between; font-size: 12px; color: #5a6b80; padding: 2.5px 0 0 41px; }
.m-member .mm-row b { color: #1b2431; font-variant-numeric: tabular-nums; }

/* 移动端客户列表 */
.m-search { display: flex; gap: 8px; padding: 10px 12px 0; }
.m-search input {
  flex: 1; padding: 9px 12px; border: 1px solid #e3e9f2; border-radius: 10px;
  font-size: 13px; background: #fff; outline: none;
}
.m-search button { background: #2f6fed; color: #fff; border-radius: 10px; padding: 0 16px; font-size: 13px; font-weight: 600; }
.m-filter { display: flex; flex-wrap: wrap; gap: 7px; padding: 9px 12px 0; overflow-x: auto; }
.m-filter select {
  padding: 6px 9px; border: 1px solid #e3e9f2; border-radius: 9px; font-size: 12px;
  background: #fff; color: #5a6b80; outline: none; flex-shrink: 0;
}
.m-cust { padding: 12px 15px; border-bottom: 1px solid #f2f5fa; display: flex; align-items: center; gap: 10px; }
.m-cust:active { background: #fafcff; }
.m-cust .cc { flex: 1; min-width: 0; }
.m-cust .cc .r1 { display: flex; align-items: center; gap: 7px; }
.m-cust .cc .r1 b { font-size: 14.5px; color: #17365d; }
.m-cust .cc .r2 { font-size: 11.5px; color: #92a1b4; margin-top: 3px; }
.m-cust .amt { color: #0f9d76; font-weight: 650; font-size: 13px; }

/* 浮动新增按钮 */
.m-fab {
  position: fixed; right: 16px; bottom: calc(var(--tab-h) + 16px + env(safe-area-inset-bottom));
  width: 52px; height: 52px; border-radius: 50%; background: #2f6fed; color: #fff; font-size: 27px;
  display: grid; place-items: center; box-shadow: 0 8px 22px rgba(47,111,237,.42); z-index: 55;
}

/* 移动端表单弹窗改为全屏底部弹出 */
@media (max-width: 760px) {
  .mask { align-items: flex-end; padding: 0; }
  .dialog { max-width: none; border-radius: 18px 18px 0 0; max-height: 92vh; }
  .dialog-h { padding: 15px 18px; }
  .dialog-b { padding: 16px 18px; }
  .dialog-f { padding: 12px 18px calc(12px + env(safe-area-inset-bottom)); }
  .dialog-f .btn { flex: 1; }
  .toast { bottom: calc(var(--tab-h) + 22px); }
}

/* 移动端 tab 内容底部留白 */
@media (max-width: 760px) {
  .content { padding-bottom: calc(var(--tab-h) + 28px + env(safe-area-inset-bottom)) !important; }
  .tabbar { display: flex !important; }
}

/* 手机端登录页 */
@media (max-width: 760px) {
  .login-wrap { grid-template-columns: 1fr; min-height: 100vh; display: block; }
  .login-left { display: none; }
  .login-right {
    padding: 0 22px; min-height: 100vh; display: flex; align-items: center;
    background: linear-gradient(160deg, #0d2544, #17365d 55%, #24507f);
  }
  .login-card {
    width: 100%; background: #fff; border-radius: 18px; padding: 26px 22px 22px;
    box-shadow: 0 18px 50px rgba(0,0,0,.28);
  }
  .login-card h2 { font-size: 21px; }
  .login-card .sub { margin-bottom: 20px; font-size: 12.5px; }
  .login-card::before {
    content: ''; display: block; width: 68px; height: 68px; margin-bottom: 16px;
    border-radius: 18px; background: #fff center/56px no-repeat url('icons/icon-192.png');
    box-shadow: 0 3px 12px rgba(0,0,0,.16);
  }
  .field input { padding: 12px 13px; font-size: 15px; }
  .demo-hint { font-size: 11.5px; line-height: 1.8; }
}

/* 排行榜榜首带手机端两列 */
.lb-kings { grid-template-columns: repeat(2, minmax(0,1fr)); }

/* ---------- v150：手机端微信好友存量账 ---------- */
.m-card > .wx-ledger { margin: 9px 15px 0; padding: 6px 10px; font-size: 12px; gap: 4px; }
.m-card > .wx-ledger .wx-total { font-size: 15px; }
.m-card > .wx-ledger .wx-inp { width: 54px; }
@media (max-width: 640px) {
  .card-h .wx-ledger { width: 100%; margin-left: 0; margin-top: 6px; }
}