/* ============ 健身房管理系统 · 夫妻店版 ============ */
:root{
  --ink:#12233F;
  --ink2:#45608C;
  --ink3:#8FA6C9;
  --line:#DCE8F8;
  --bg:#F5FAFF;
  --card:#ffffff;

  --violet:#0D6EF5;
  --violet-deep:#0A56C4;
  --violet-bg:#FBEED3;

  --blue:#00C2FF;
  --blue-bg:#FBE9DE;

  --red:#f03b4b;
  --red-bg:#fdeaec;

  --amber:#e8890c;
  --amber-bg:#fff3dd;

  --green:#0fa968;
  --green-bg:#e3f7ef;

  --radius:16px;
  --shadow:0 2px 12px rgba(70,110,190,.06);
}

*{box-sizing:border-box; -webkit-tap-highlight-color:transparent;}

/* 兜底：任何设了 display 的元素也必须能被 hidden 属性真正隐藏。
   否则像 .modal-mask{display:flex} 会盖住整页并吃掉所有点击。 */
[hidden]{display:none !important;}

html,body{margin:0;padding:0;}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  font-size:15px;
  line-height:1.6;
  padding-bottom:calc(64px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}

a{color:inherit; text-decoration:none;}

/* ---------- 顶部栏 ---------- */
.topbar{
  position:sticky; top:0; z-index:20;
  background:linear-gradient(118deg,#061A4D 0%,#0B5BFF 52%,#0D6EF5 100%);
  box-shadow:0 3px 18px rgba(30,80,190,.25);
}
.topbar::after{
  content:''; display:block; height:3px;
  background:linear-gradient(90deg,#1B7FFF 0%,#00C2FF 33%,#BBD9FF 66%,#0B5BFF 100%);
}
.topbar-inner{
  max-width:560px; margin:0 auto;
  padding:12px 16px;
  display:flex; flex-direction:column; align-items:stretch; justify-content:center;
  min-height:54px;
}
.topbar h1{
  font-size:17px; font-weight:600; margin:0; letter-spacing:-.2px;
  color:#fff;
}
.btn-ghost{
  font-size:13.5px; color:#fff; font-weight:500;
  padding:6px 13px; border-radius:20px;
  background:rgba(255,255,255,.18);
  border:.5px solid rgba(255,255,255,.28);
  white-space:nowrap;
}

/* ---------- 主体 ---------- */
.wrap{
  max-width:560px; margin:0 auto;
  padding:14px 16px 32px;
  animation:pageIn .26s ease both;
}
@keyframes pageIn{
  from{opacity:0; transform:translateY(8px);}
  to{opacity:1; transform:none;}
}
@media (prefers-reduced-motion: reduce){
  .wrap{animation:none;}
  *{transition:none !important; animation-duration:.01ms !important;}
}

/* ---------- 提示条（无 JS 兜底样式；有 JS 时转为 toast） ---------- */
.flash{
  padding:11px 14px; border-radius:12px; font-size:13.5px;
  margin-bottom:10px; line-height:1.5;
  border:.5px solid transparent; font-weight:500;
}
.flash-ok{background:var(--green-bg); color:var(--green); border-color:#b4e8d2;}
.flash-error{background:var(--red-bg); color:var(--red); border-color:#f8c8cd;}

/* ---------- toast ---------- */
.toast-wrap{
  position:fixed; top:calc(66px + env(safe-area-inset-top)); left:0; right:0;
  z-index:100; display:flex; flex-direction:column; align-items:center; gap:8px;
  pointer-events:none; padding:0 16px;
}
.toast{
  background:rgba(8,18,40,.93); color:#fff;
  font-size:13.5px; font-weight:500; line-height:1.5;
  padding:10px 18px; border-radius:22px;
  box-shadow:0 10px 30px rgba(16,60,160,.3);
  max-width:100%; text-align:center;
  animation:toastIn .3s cubic-bezier(.2,.9,.3,1.15) both;
  backdrop-filter:blur(6px);
}
.toast-ok::before{content:'✓ '; color:#5ee6a8; font-weight:700;}
.toast-error::before{content:'✕ '; color:#ff8a94; font-weight:700;}
.toast-out{animation:toastOut .25s ease both;}
@keyframes toastIn{
  from{opacity:0; transform:translateY(-14px) scale(.94);}
  to{opacity:1; transform:none;}
}
@keyframes toastOut{
  to{opacity:0; transform:translateY(-8px) scale(.96);}
}

/* ---------- 确认弹层 ---------- */
.modal-mask{
  position:fixed; inset:0; z-index:110;
  background:rgba(12,42,110,.42);
  backdrop-filter:blur(2px);
  display:flex; align-items:center; justify-content:center;
  padding:24px; opacity:0; transition:opacity .18s ease;
}
.modal-mask.show{opacity:1;}
/* 淡出过程中（hidden 还没置位）也不要拦截点击 */
.modal-mask:not(.show){pointer-events:none;}
.modal{
  width:100%; max-width:320px;
  background:#fff; border-radius:20px; padding:22px 20px 16px;
  box-shadow:0 22px 60px rgba(16,60,160,.32);
  transform:scale(.92) translateY(10px); transition:transform .18s cubic-bezier(.2,.9,.3,1.2);
}
.modal-mask.show .modal{transform:none;}
.modal-text{
  font-size:15px; font-weight:600; text-align:center; line-height:1.6;
  padding-bottom:18px;
}
.modal-btns{display:flex; gap:10px;}
.modal-btns .btn{flex:1;}

/* ---------- 交互反馈 ---------- */
.pulse{animation:pulse .45s ease;}
@keyframes pulse{
  0%{transform:scale(1);}
  35%{transform:scale(1.18);}
  100%{transform:scale(1);}
}
.btn.is-loading{opacity:.55; pointer-events:none;}
.row-hide{display:none !important;}
.shake{animation:shake .4s ease;}
@keyframes shake{
  0%,100%{transform:translateX(0);}
  20%{transform:translateX(-7px);}
  40%{transform:translateX(6px);}
  60%{transform:translateX(-4px);}
  80%{transform:translateX(3px);}
}

/* ---------- 统计 ---------- */
.stat-row{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  margin:2px 0 6px;
}
.stat{
  background:var(--card); border-radius:var(--radius);
  padding:13px 6px 12px; text-align:center;
  border:.5px solid var(--line);
  box-shadow:var(--shadow);
  border-top:3px solid var(--violet);
}
.stat:nth-child(2){border-top-color:var(--blue);}
.stat:nth-child(3){border-top-color:var(--red);}
.stat:nth-child(4){border-top-color:#7E99BE;}
.stat-num{
  display:block; font-size:23px; font-weight:700;
  font-variant-numeric:tabular-nums; line-height:1.15;
  color:var(--violet);
}
.stat:nth-child(2) .stat-num{color:var(--blue);}
.stat:nth-child(3) .stat-num{color:var(--red);}
.stat:nth-child(4) .stat-num{color:#56719C;}
.stat-label{display:block; font-size:11.5px; color:var(--ink2); margin-top:3px; white-space:nowrap;}
/* 第四格是入口：点进去就是「流失」名单 */
.stat-link{
  display:block; text-decoration:none; color:inherit;
  transition:transform .12s ease;
  -webkit-tap-highlight-color:transparent;
}
.stat-link:active{transform:scale(.96);}
.stat-go{opacity:.5; margin-left:1px;}
@media (max-width:360px){
  .stat{padding:11px 4px 10px;}
  .stat-num{font-size:21px;}
  .stat-label{font-size:10.5px;}
}

/* ---------- 小节标题 ---------- */
.sec-title{
  font-size:13px; font-weight:600; color:var(--ink2);
  margin:22px 0 9px; letter-spacing:.3px;
  display:flex; align-items:center; gap:7px;
}
.sec-title::before{
  content:''; width:3px; height:13px; border-radius:2px;
  background:linear-gradient(180deg,#1B7FFF,#0A56C4); flex-shrink:0;
}
.sec-title:first-child{margin-top:6px;}

/* ---------- 列表 ---------- */
.list{
  background:var(--card); border-radius:var(--radius);
  border:.5px solid var(--line); overflow:hidden;
  box-shadow:var(--shadow);
}
.row{
  display:flex; align-items:center; gap:12px;
  padding:12px 14px; border-bottom:.5px solid var(--line);
}
.row:last-child{border-bottom:none;}
.row-time{
  font-size:14px; font-weight:600; font-variant-numeric:tabular-nums;
  color:var(--violet); min-width:46px; line-height:1.35;
}
.row-time small{font-size:11px; color:var(--ink3); font-weight:400;}
.row-main{flex:1; min-width:0;}
.row-title{font-size:15px; font-weight:500; display:block;}
.row-title-sm{font-size:14px; font-weight:500;}
.row-sub{
  font-size:12.5px; color:var(--ink2);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.row-sub.dim{color:var(--ink3);}
.row-sub b{color:var(--violet); font-weight:600;}
.row-act{display:flex; gap:6px; align-items:center;}

/* 我的页：老板用户统计小标签（竖排三枚） */
.boss-stats{flex-direction:column; align-items:flex-end; gap:3px;}
.boss-stats .pill{font-size:10.5px; padding:2px 7px;}
/* 老板用户操作行：重置密码 / 停用 / 删除 */
.boss-ops{display:flex; gap:6px; flex-wrap:wrap; margin-top:7px;}
.boss-ops .btn-xs{font-size:11.5px; padding:3px 9px; border-radius:7px;}
.btn-danger-soft{color:#c0392b; background:#fdeeec;}
/* 顶栏只放品牌名 + 右侧动作，两侧对齐；不再有中间店名
   （手机端加了必然折成两行，老板端店名移到首页 hero，客户页店名在下面的店铺卡里） */
.brand-row .brand, .brand-row .top-actions, .brand-row .portal-id{position:relative; z-index:1}
@media (max-width:400px){
  .brand-row{flex-wrap:wrap; row-gap:2px}
}

/* 客户卡片行 */
.card-row{
  display:flex; align-items:center; gap:12px;
  padding:13px 14px; border-bottom:.5px solid var(--line);
  transition:background .15s;
}
.card-row:last-child{border-bottom:none;}
.card-row:active{background:#F7FBFF;}
.chev{color:var(--ink3); font-size:20px; line-height:1; margin-left:2px;}

.avatar{
  width:38px; height:38px; border-radius:50%;
  background:var(--violet-bg); color:var(--violet);
  display:flex; align-items:center; justify-content:center;
  font-size:15px; font-weight:600; flex-shrink:0;
}
/* 名单里的头像按行轮换配色，让列表有节奏 */
.card-row:nth-child(5n+2) .avatar{background:var(--blue-bg); color:var(--blue);}
.card-row:nth-child(5n+3) .avatar{background:var(--red-bg); color:var(--red);}
.card-row:nth-child(5n+4) .avatar{background:var(--amber-bg); color:var(--amber);}
.card-row:nth-child(5n+5) .avatar{background:var(--green-bg); color:var(--green);}

.avatar-lg{
  width:54px; height:54px; font-size:20px; border-radius:18px;
  background:linear-gradient(135deg,#1B7FFF,#0A56C4); color:#fff;
  box-shadow:0 4px 14px rgba(13,110,245,.32);
}
/* 图片头像（默认 SVG / 将来自定义上传） */
img.avatar{object-fit:cover; background:none; border:1px solid rgba(0,0,0,.06);}
img.avatar-lg{border-radius:18px;}
img.avatar-xs{width:22px; height:22px; border-radius:50%; vertical-align:-6px; margin-right:5px;}
.portal-id{display:inline-flex; align-items:center;}

/* ---------- 状态徽章 ---------- */
.pill{
  display:inline-block; font-size:11.5px; line-height:1.6;
  padding:1px 8px; border-radius:7px; white-space:nowrap;
  vertical-align:middle; font-weight:600;
}
.pill-ok{background:var(--green-bg); color:var(--green);}
.pill-amber{background:var(--amber-bg); color:var(--amber);}
.pill-red{background:var(--red-bg); color:var(--red);}
.pill-gray{background:#E8F0FA; color:var(--ink2);}
.pill-blue{background:var(--blue-bg); color:var(--blue);}

/* ---------- 按钮 ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center;
  border:none; border-radius:10px; font-size:14px; font-weight:500;
  padding:9px 16px; cursor:pointer; font-family:inherit;
  transition:opacity .15s, transform .12s cubic-bezier(.2,.9,.3,1.2), box-shadow .15s;
  white-space:nowrap;
  touch-action:manipulation; user-select:none;
}
.btn:active{transform:scale(.95); opacity:.88;}
.btn-sm{font-size:13px; padding:7px 13px;}
.btn-xs{font-size:12.5px; padding:5px 11px; border-radius:8px;}
.btn-block{width:100%; padding:13px; font-size:15px; margin-top:8px;}
.btn-primary, .btn-ok{
  background:linear-gradient(135deg,#0D6EF5 0%,#0A56C4 100%);
  color:#fff;
  box-shadow:0 3px 12px rgba(13,110,245,.3);
}
.btn-warn{
  background:linear-gradient(135deg,#BBD9FF 0%,#0D6EF5 100%);
  color:#fff;
  box-shadow:0 3px 12px rgba(13,110,245,.3);
}
.btn-plain{background:#EDF4FC; color:var(--ink);}
.btn-logout{background:var(--red-bg); color:var(--red); border:1px solid rgba(240,59,75,.28); font-weight:600;}
.btn-logout:active{background:#fbdce0;}
.btn-ghost-btn{background:transparent; color:var(--ink2);}

/* ---------- 搜索 ---------- */
.search{
  display:flex; gap:8px; margin-bottom:12px;
}
.search input[type=search]{
  flex:1; border:.5px solid var(--line); background:var(--card);
  border-radius:11px; padding:11px 14px; font-size:16px;
  font-family:inherit; color:var(--ink); outline:none;
  box-shadow:var(--shadow);
  transition:border-color .15s, box-shadow .15s;
  -webkit-appearance:none; appearance:none;
}
.search input[type=search]:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(13,110,245,.12);
}

/* ---------- 筛选 tabs ---------- */
/* 固定 4 列等宽网格：每个标签一样长，每行从最左铺到最右，不会出现
   「后面几个被挤出屏幕」或「每行宽度参差不齐」的情况。 */
.tabs{
  display:grid; grid-template-columns:repeat(4, 1fr);
  gap:7px; margin-bottom:12px;
}
.tabs a{
  display:flex; align-items:center; justify-content:center;
  height:34px; padding:0 2px;
  font-size:12.5px; line-height:1;
  border-radius:11px;
  background:var(--card); border:.5px solid var(--line);
  color:var(--ink2); white-space:nowrap;
  transition:background .18s, color .18s, transform .12s;
  cursor:pointer;
}
.tabs a:active{transform:scale(.94);}
.tabs a.on{
  background:linear-gradient(135deg,#0D6EF5,#0A56C4);
  color:#fff; border-color:transparent;
  box-shadow:0 2px 10px rgba(13,110,245,.28);
}
/* 标签口径说明：点进某个标签后，下面一行小字讲清这个标签是按什么算的 */
.filter-hint{
  margin:-4px 0 12px; padding:7px 11px;
  font-size:11.5px; line-height:1.6; color:var(--ink3);
  background:rgba(13,110,245,.055);
  border-left:2px solid rgba(13,110,245,.32);
  border-radius:0 9px 9px 0;
}

.count-line{font-size:12.5px; color:var(--ink3); margin:0 0 8px;}
.count-line b{color:var(--violet); font-weight:700; font-variant-numeric:tabular-nums;}

/* ---------- 空态 ---------- */
.empty{
  text-align:center; color:var(--ink3); font-size:13.5px;
  padding:34px 20px; background:var(--card);
  border-radius:var(--radius); border:.5px dashed #E3D4B4;
}

/* ---------- 客户头部 ---------- */
.profile{
  display:flex; gap:14px; align-items:center;
  background:linear-gradient(120deg,#F7FBFF 0%,#ffffff 62%);
  border-radius:var(--radius);
  padding:16px; border:.5px solid var(--line);
  box-shadow:var(--shadow); margin-bottom:4px;
}
.profile-name{font-size:19px; font-weight:600; letter-spacing:-.2px;}
.profile-sub{font-size:13px; color:var(--ink2); margin-top:2px;}
.profile-note{font-size:12.5px; color:var(--ink3); margin-top:4px;}

/* ---------- 会员卡盒子 ---------- */
.cardbox{
  background:var(--card); border-radius:var(--radius);
  padding:14px 16px; margin-bottom:10px;
  border:.5px solid var(--line);
  border-left:4px solid var(--violet);
  box-shadow:var(--shadow);
}
.cardbox-expired{border-left-color:#BBD2EC;}
.cardbox-used_up{border-left-color:var(--red);}
.cardbox-top{display:flex; justify-content:space-between; align-items:flex-start; gap:10px;}
.cardbox-name{font-size:15px; font-weight:600;}
.cardbox-meta{font-size:12.5px; color:var(--ink2); margin-top:2px;}
.big-num{
  font-size:18px; font-weight:700;
  background:linear-gradient(135deg,#0D6EF5,#0A56C4);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.cardbox-dates{
  display:flex; gap:14px; flex-wrap:wrap;
  font-size:12px; color:var(--ink3); margin-top:9px;
  padding-top:9px; border-top:.5px dashed var(--line);
}
.warn-text{color:var(--red); font-weight:600;}
.cardbox-act{display:flex; gap:8px; margin-top:12px; align-items:flex-start; flex-wrap:wrap;}

/* ---------- 折叠表单 ---------- */
.inline-details{display:inline-block;}
.inline-details summary{
  list-style:none; cursor:pointer;
  display:inline-flex; align-items:center; justify-content:center;
  border-radius:8px; font-size:12.5px; padding:5px 11px;
  background:#EDF4FC; color:var(--ink); font-weight:500;
}
.inline-details summary::-webkit-details-marker{display:none;}
.inline-form{
  margin-top:10px; padding:12px; background:#F7FBFF;
  border-radius:12px; border:.5px solid var(--line);
  display:flex; flex-direction:column; gap:9px;
}
.inline-form label{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; font-size:13px; color:var(--ink2);
}
.inline-form input, .inline-form select{
  flex:1; max-width:60%;
  border:.5px solid var(--line); border-radius:9px;
  padding:7px 10px; font-size:14px; font-family:inherit;
  background:var(--card); color:var(--ink); outline:none;
}
.inline-form input:focus, .inline-form select:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(13,110,245,.1);
}
.hint{font-size:12px; color:var(--ink3); margin:0;}

/* details 展开时表单滑入 */
details[open] > .inline-form,
details[open] > form{
  animation:reveal .22s ease both;
}
@keyframes reveal{
  from{opacity:0; transform:translateY(-5px);}
  to{opacity:1; transform:none;}
}

/* ---------- 快捷操作 ---------- */
.quick{display:flex; flex-direction:column; gap:9px;}
.qbox{
  background:var(--card); border-radius:var(--radius);
  border:.5px solid var(--line); padding:0 14px;
  box-shadow:var(--shadow);
}
.qbox summary{
  list-style:none; cursor:pointer; padding:13px 0;
  font-size:14px; font-weight:600; color:var(--violet);
  display:flex; align-items:center; justify-content:space-between;
  transition:opacity .15s;
}
.qbox summary:active{opacity:.7;}
.qbox summary .arr{transition:transform .2s; color:var(--ink3);}
.qbox[open] summary .arr{transform:rotate(180deg);}
.qbox summary::-webkit-details-marker{display:none;}
.qbox[open] summary{padding-bottom:4px; border-bottom:.5px solid var(--line);}
.qbox .inline-form{margin:10px 0 14px; background:transparent; border:none; padding:0;}

/* ---------- 表单页 ---------- */
.form .field{margin-bottom:13px;}
.form .field label{
  display:block; font-size:12.5px; color:var(--ink2); margin-bottom:5px;
}
.form .field input, .form .field select{
  width:100%; border:.5px solid var(--line); border-radius:11px;
  padding:11px 13px; font-size:15px; font-family:inherit;
  background:var(--card); color:var(--ink); outline:none;
}
.form .field input:focus, .form .field select:focus{
  border-color:var(--violet);
  box-shadow:0 0 0 3px rgba(13,110,245,.12);
}
.field-row{display:flex; gap:10px;}
.field-row .field{flex:1;}

/* ---------- 分段控件（新建页卡类型） ---------- */
.seg{
  display:flex; background:#EDF4FC; border-radius:12px;
  padding:3px; gap:3px; margin-bottom:8px;
}
.seg label{flex:1; cursor:pointer;}
.seg input{position:absolute; opacity:0; pointer-events:none;}
.seg span{
  display:block; text-align:center; font-size:13.5px; font-weight:500;
  padding:8px 0; border-radius:9px; color:var(--ink2);
  transition:background .18s, color .18s, box-shadow .18s, transform .12s;
  user-select:none;
}
.seg span:active{transform:scale(.96);}
.seg input:checked + span{
  background:#fff; color:var(--violet); font-weight:600;
  box-shadow:0 2px 8px rgba(70,110,190,.14);
}
.seg + .hint{margin-bottom:12px;}

/* 新建页开卡区块平滑展开 */
.reveal{
  display:none;
}
.reveal.open{
  display:block;
  animation:reveal .24s ease both;
}

/* ---------- 底部导航 ---------- */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  background:rgba(255,255,255,.97);
  backdrop-filter:saturate(180%) blur(14px);
  border-top:.5px solid var(--line);
  display:flex;
  padding-bottom:env(safe-area-inset-bottom);
  box-shadow:0 -2px 16px rgba(70,110,190,.06);
}
.tabbar a{
  flex:1; text-align:center; padding:9px 0 10px;
  font-size:11.5px; color:var(--ink3);
  display:flex; flex-direction:column; align-items:center; gap:1px;
  transition:color .18s;
  touch-action:manipulation;
}
.tabbar a .ico{font-size:17px; line-height:1.2; transition:transform .18s cubic-bezier(.2,.9,.3,1.4);}
.tabbar a.on{color:var(--violet); font-weight:700;}
.tabbar a.on .ico{transform:translateY(-1px) scale(1.12);}
.tabbar a:active .ico{transform:scale(.88);}

/* ---------- 登录页 ---------- */
.login-body{
  display:flex; align-items:center; justify-content:center;
  min-height:100vh; min-height:100dvh; padding:24px 20px;
  background:linear-gradient(158deg,#061A4D 0%,#0B5BFF 46%,#0D6EF5 100%);
}
/* 手机：卡片靠上，避免弹出键盘盖住登录按钮 */
@media (max-width:599px){
  .login-body{ align-items:flex-start; padding-top:12vh; }
}
.login-wrap{
  width:100%; max-width:342px; text-align:center;
  background:rgba(255,255,255,.98);
  border-radius:24px; padding:30px 24px 26px;
  box-shadow:0 18px 50px rgba(16,60,160,.35);
}
.login-mark{
  width:58px; height:58px; border-radius:19px; margin:0 auto 16px;
  background:linear-gradient(135deg,#1B7FFF,#0A56C4);
  box-shadow:0 6px 20px rgba(13,110,245,.4);
  color:#fff; font-size:24px; font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.login-title{font-size:20px; font-weight:700; margin:0; letter-spacing:-.3px;}
.login-slogan{font-size:12.5px; font-weight:700; color:var(--violet); letter-spacing:1.5px; margin:6px 0 0;}
.login-sub{font-size:13px; color:var(--ink2); margin:6px 0 18px;}
.login-form{text-align:left; margin-top:6px;}
.login-form .field{margin-bottom:12px;}
.login-form .field label{
  display:block; font-size:12.5px; color:var(--ink2); margin-bottom:5px;
}
.login-form .field input{
  width:100%; border:.5px solid var(--line); border-radius:11px;
  padding:12px 13px; font-size:16px; font-family:inherit;
  background:#F7FBFF; color:var(--ink); outline:none;
}
.login-form .field input:focus{
  border-color:var(--violet); background:#fff;
  box-shadow:0 0 0 3px rgba(13,110,245,.14);
}
/* 密码明文切换 */
.pwd-wrap{position:relative;}
.pwd-wrap input{padding-right:44px;}
.pwd-eye{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  width:34px; height:34px; border:0; border-radius:9px;
  background:transparent; color:var(--ink3); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  -webkit-tap-highlight-color:transparent; touch-action:manipulation;
}
.pwd-eye:active{background:rgba(27,127,255,.14); color:var(--ink2);}
.pwd-eye.on{color:var(--violet);}


@media (min-width:600px){
  body{font-size:15px;}
  .stat-num{font-size:29px;}
}

/* ---------- 收款流水 ---------- */
.income-bar{
  display:flex; align-items:center; gap:12px;
  margin:10px 0 4px; padding:13px 16px;
  background:linear-gradient(120deg,#0A2E73 0%,#1B7FFF 130%);
  border-radius:var(--radius); color:#fff;
  box-shadow:0 4px 16px rgba(27,127,255,.26);
  touch-action:manipulation;
}
.income-ico{
  width:34px; height:34px; border-radius:11px; flex:none;
  background:rgba(255,255,255,.16);
  display:flex; align-items:center; justify-content:center;
  font-weight:800; font-size:18px;
}
.income-main{flex:1; min-width:0; display:flex; flex-direction:column;}
.income-label{font-size:12px; opacity:.85;}
.income-num{font-size:21px; font-weight:800; line-height:1.25; letter-spacing:.3px;}
.income-sub{font-size:12px; opacity:.75; flex:none;}
/* 小眼睛：默认金额打码，点一下显示（每次进页面都重新隐藏，防瞟屏） */
.income-eye{
  width:34px; height:34px; flex:none; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.16); color:#fff;
  display:flex; align-items:center; justify-content:center;
  touch-action:manipulation; user-select:none; -webkit-user-select:none;
}
.income-eye:active{background:rgba(255,255,255,.32);}
.income-eye svg{width:19px; height:19px;}
.income-eye .eye-open{display:none;}
.income-bar.eye-on .eye-open{display:block;}
.income-bar.eye-on .eye-closed{display:none;}
.income-hero{
  background:var(--card); border-radius:var(--radius);
  padding:18px 20px; margin-bottom:4px;
  border:.5px solid var(--line); box-shadow:var(--shadow);
}
.income-hero-label{font-size:12.5px; color:var(--ink2);}
.income-hero-num{
  font-size:30px; font-weight:800; color:var(--green);
  line-height:1.3; letter-spacing:.3px;
}
.pay-act{display:flex; flex-direction:row; align-items:center; gap:8px;}
.pay-amount{color:var(--green); font-size:15px; font-weight:700; white-space:nowrap;}
.sec-sum{font-size:12px; font-weight:500; color:var(--ink3); margin-left:4px;}
.income-hero-grid{display:flex; align-items:center; gap:18px;}
.income-hero-grid > div{flex:1; min-width:0;}
.income-hero-div{flex:none !important; width:1px; align-self:stretch; background:var(--line);}
.income-hero-all{color:var(--violet);}

/* ---------- 客户查询码 / H5 门户 ---------- */
.qcode-box{
  background:var(--card); border-radius:var(--radius);
  border:.5px solid var(--line); box-shadow:var(--shadow);
  padding:22px 20px; text-align:center; margin-bottom:12px;
}
.qcode-box #qrcode{display:inline-block; padding:10px; border:1px solid var(--line); border-radius:14px;}
.qcode-box img,.qcode-box canvas{display:block;}
.qcode-link{
  margin:12px 0 4px; font-size:12px; color:var(--ink3);
  word-break:break-all; line-height:1.5;
}
.hint-box{
  background:var(--card); border-radius:var(--radius);
  border:.5px dashed #E3D4B4; padding:14px 16px;
}
.hint-box p{margin:4px 0; font-size:12.5px; color:var(--ink2); line-height:1.7;}
.qbox-link{
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(120deg,#0A3DD1,#0D6EF5);
  color:#fff; border-radius:var(--radius);
  padding:13px 16px; margin-bottom:10px;
  box-shadow:0 4px 14px rgba(13,110,245,.25);
  touch-action:manipulation;
}
.qbox-link span:first-child{font-weight:600; font-size:14px;}
.qbox-link-sub{font-size:12px; opacity:.8;}
.portal-foot{
  text-align:center; font-size:12.5px; color:var(--ink3);
  margin:26px 0 10px;
}

/* ---------- 日期/时间自选弹层 ---------- */
.sheet-mask{
  position:fixed; inset:0; z-index:120;
  background:rgba(12,42,110,.42); backdrop-filter:blur(2px);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .2s ease;
}
.sheet-mask.show{opacity:1;}
.sheet{
  width:100%; max-width:560px; background:#fff;
  border-radius:22px 22px 0 0; padding:18px 18px calc(16px + env(safe-area-inset-bottom));
  transform:translateY(100%); transition:transform .22s cubic-bezier(.2,.9,.3,1);
  box-shadow:0 -10px 40px rgba(16,60,160,.25);
}
.sheet-mask.show .sheet{transform:none;}
.sheet-title{margin:0 0 12px; font-size:15.5px; text-align:center;}
.sheet-foot{display:flex; gap:10px; margin-top:14px;}
.sheet-foot .btn{flex:1;}
.sheet-foot [data-sclear]{flex:0 0 auto;}
.cal-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:8px;}
.cal-title{font-weight:700; font-size:14.5px;}
.cal-grid{display:grid; grid-template-columns:repeat(7,1fr); gap:3px; text-align:center;}
.cal-wd{font-size:11.5px; color:var(--ink3); padding:4px 0;}
.cal-day{
  height:38px; border:none; border-radius:12px; background:transparent;
  font-size:14.5px; color:var(--ink); font-family:inherit;
  touch-action:manipulation;
}
.cal-day:active{background:var(--violet-bg);}
.cal-day.sel{background:var(--violet); color:#fff; font-weight:700;}
.cal-day.dis{color:#C9DCF2; pointer-events:none;}
.slot-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px;
  max-height:264px; overflow-y:auto; padding:2px;
}
.slot{
  height:40px; border:.5px solid var(--line); border-radius:11px;
  background:#F7FBFF; font-size:14px; color:var(--ink); font-family:inherit;
  touch-action:manipulation;
}
.slot.sel{background:var(--violet); border-color:var(--violet); color:#fff; font-weight:700;}

/* ---------- 日期弹层快速下拉（生日） ---------- */
.quick-head{display:flex; gap:8px; margin-bottom:8px;}
.quick-head .cal-sel{
  flex:1; height:40px; border:.5px solid var(--line); border-radius:11px;
  background:#F7FBFF; font-size:14.5px; color:var(--ink);
  padding:0 10px; font-family:inherit; appearance:none; -webkit-appearance:none;
  background-image:url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%230D6EF5' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 12px center;
}

/* ===== 起司举士健身协会 · IP 品牌化 ===== */
.brand-row{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%}
.brand{display:flex;align-items:center;gap:8px;min-width:0}
.brand-row .btn-ghost{flex:none}
.top-actions{display:flex;align-items:center;gap:8px;flex:none;margin-left:auto}.brand-cat{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.brand-txt{min-width:0;line-height:1.12}
.brand-name{font-size:17px;font-weight:900;color:#fff;letter-spacing:.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;display:block}
.brand-slogan{font-size:9.5px;font-weight:600;color:rgba(255,255,255,.68);letter-spacing:1.2px;margin-top:1.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.xie{
  display:inline-block;color:#6FA8FF;font-size:1.18em;
  transform:rotate(-10deg) translateY(1px);
  text-shadow:0 0 8px rgba(255,179,71,.65);
  animation:xie-wobble 2.6s ease-in-out infinite;
}
@keyframes xie-wobble{
  0%,100%{transform:rotate(-10deg) translateY(1px)}
  50%{transform:rotate(6deg) translateY(-2px) scale(1.12)}
}
.page-h{font-size:15px;font-weight:700;color:rgba(255,255,255,.82);margin:2px 0 0}
.page-h:empty{display:none}
/* 健身页：日期缩小后放进顶栏一行（建档按钮左边） */
.top-date{font-size:11.5px;font-weight:600;color:rgba(255,255,255,.78);white-space:nowrap;letter-spacing:0}

/* 窄屏顶栏：品牌名缩小，保证右侧按钮完整不挤压 */
@media (max-width:400px){
  .brand{gap:6px}
  .brand-cat{width:26px;height:26px;border-width:1.5px}
  .brand-name{font-size:15px;letter-spacing:.2px}
  .brand-slogan{font-size:9px;letter-spacing:.8px}
  .brand-row{gap:8px}
  .btn-ghost{font-size:12.5px;padding:5px 10px}
  .top-actions{gap:6px}
  .top-date{font-size:11px}
}
@media (max-width:350px){
  .brand-name{font-size:13.5px}
  .brand-slogan{font-size:8.5px;letter-spacing:.5px}
  .btn-ghost{font-size:12px;padding:4px 8px}
  .brand-cat{width:24px;height:24px}
  .top-date{font-size:10.5px}
}

/* 首页 hero 卡 */
.hero-card{
  display:flex;align-items:center;gap:6px;
  background:linear-gradient(135deg,#0B5BFF 0%,#0D8EF8 55%,#00B8FF 100%);
  border-radius:20px;padding:10px 18px 10px 6px;margin-bottom:14px;
  box-shadow:0 8px 20px rgba(13,110,245,.32);
}
.hero-cat{width:84px;height:84px;object-fit:contain;flex:none;
  animation:hero-bounce 3s ease-in-out infinite}
@keyframes hero-bounce{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-4px)}
}
.hero-txt{color:#fff;min-width:0;flex:1}
/* 店名放在「老板，开练！」上面：顶栏不显示店名了，这里一眼看清管的是哪家店 */
.hero-shop{
  display:inline-block; max-width:100%;
  font-size:12.5px; font-weight:700; letter-spacing:.4px; line-height:1.5;
  color:#fff; background:rgba(255,255,255,.2);
  border:.5px solid rgba(255,255,255,.45);
  border-radius:8px; padding:1px 9px 2px; margin-bottom:6px;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  vertical-align:top;
}
.hero-hi{font-size:20px;font-weight:900;letter-spacing:1px}
.hero-sub{font-size:13px;opacity:.92;margin-top:3px}
.hero-sub b{font-size:17px;color:#fff800}

/* 收入条里的猫 */
.income-cat{width:54px;height:54px;object-fit:contain;flex:none;margin-left:-6px}

/* 快捷入口四宫格 */
.ip-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:6px}
.ip-cell{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  background:#fff;border-radius:16px;padding:10px 4px 8px;text-decoration:none;
  box-shadow:0 2px 8px rgba(30,80,190,.08);
  transition:transform .12s;
}
.ip-cell:active{transform:scale(.94)}
.ip-cell img{width:52px;height:52px;object-fit:contain}
.ip-cell span{font-size:12px;font-weight:700;color:#3E5E8F}

/* 空状态躺平猫 */
.empty-cat{display:flex;flex-direction:column;align-items:center;gap:4px;padding:18px 0}
.empty-cat img{width:150px;height:110px;object-fit:contain}
.empty-cat p{color:#8FA6C9;font-size:13px}

/* 底部 tab 用猫图标 */
.tabbar a img{width:26px;height:26px;object-fit:contain;opacity:.55;
  filter:grayscale(60%);transition:all .15s}
.tabbar a span{font-size:10px}
.tabbar a.on img{opacity:1;filter:none;transform:scale(1.12)}

/* 登录页 */
.login-cat{width:132px;height:132px;object-fit:contain;margin-bottom:-6px;
  animation:hero-bounce 3s ease-in-out infinite}
.login-title{font-size:24px}

/* 我的页角落的猫 */
.profile{position:relative}
.profile-cat{position:absolute;right:6px;top:50%;transform:translateY(-50%);
  width:70px;height:70px;object-fit:contain;opacity:1}

/* ===== IP 扁平矢量版（橘白猫 SVG）=====
   SVG 自带黑描边、背景透明 —— 不能再套圆形裁剪、白边和投影：
   圆裁会把耳朵尖切掉，白边会跟描边糊成两道。 */
.brand-cat, .hero-cat, .income-cat, .ip-cell img, .tabbar a img,
.login-cat, .profile-cat, .empty-cat img, .ch-cat,
.sec-ico, .cat-mini, .qbox-cat, .sum-ico, .portal-foot img{
  background:none; border:0; box-shadow:none; object-fit:contain;
}

/* 快捷入口 */
.ip-cell img{width:58px;height:58px}

/* 底部 tab */
.tabbar a img{width:28px;height:28px;opacity:.62;filter:grayscale(55%);transition:all .15s}
.tabbar a.on img{opacity:1;filter:none;transform:scale(1.14)}

/* 空状态 */
.empty-cat{display:flex;flex-direction:column;align-items:center;gap:6px;
  padding:16px 20px 18px;background:var(--card);border-radius:var(--radius);
  border:.5px dashed #E3D4B4}
.empty-cat img{width:104px;height:104px;opacity:.96}
.empty-cat p{color:#8FA6C9;font-size:13px;margin:0}

/* 区块标题小图标 */
.sec-title .sec-ico{width:22px;height:22px;flex:none}

/* 卡框里的小猫 */
.cardbox-name{display:flex;align-items:center;gap:6px}
.cardbox-name .cat-mini{width:22px;height:22px;flex:none}

/* 自助服务折叠条上的猫 */
.qbox summary .sum-ico{width:22px;height:22px;flex:none}
.qbox summary .sum-wrap{display:flex;align-items:center;gap:7px}

/* 验证框顶部的猫 */
.qcode-box .qbox-cat{width:56px;height:56px;margin:0 auto 10px}

/* ===== 客户端门户：起司欢迎卡 ===== */
.client-hero{
  display:flex;align-items:center;gap:10px;
  background:linear-gradient(135deg,#6FA8FF 0%,#2F8BFF 55%,#0B5BFF 100%);
  border-radius:20px;padding:10px 16px 10px 8px;margin-bottom:14px;
  box-shadow:0 8px 20px rgba(13,110,245,.3);position:relative;overflow:hidden;
}
.client-hero::after{
  content:'';position:absolute;right:-26px;top:-30px;width:110px;height:110px;
  border-radius:50%;background:rgba(255,255,255,.13);
}
.ch-cat{width:86px;height:86px;flex:none;
  animation:hero-bounce 3s ease-in-out infinite;position:relative;z-index:1}
.ch-txt{position:relative;z-index:1;min-width:0}
.ch-hi{font-size:19px;font-weight:900;color:#fff;letter-spacing:.5px;
  text-shadow:0 1px 3px rgba(70,110,220,.25)}
.ch-sub{font-size:12.5px;color:rgba(255,255,255,.95);margin-top:4px;line-height:1.45}
.ch-sub b{font-size:14px;color:#fff800;font-weight:800}

/* 客户端页脚 */
.portal-foot{
  display:flex;flex-direction:column;align-items:center;gap:6px;
  text-align:center;font-size:12.5px;color:var(--ink3);
  margin:26px 0 12px;
}
.portal-foot img{width:46px;height:46px;opacity:.9}
.portal-foot p{margin:0}
.portal-foot .privacy-note{font-size:11px; color:var(--ink3); opacity:.85; line-height:1.6; max-width:280px;}

@media (max-width:360px){
  .ch-cat{width:72px;height:72px}
  .ch-hi{font-size:17px}
  .hero-cat{width:74px;height:74px}
}

/* 今日页：之前的课折叠区 */
.past-sec{
  margin:14px 0 4px;
  background:var(--card);
  border:.5px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow);
  overflow:hidden;
}
.past-sec summary{
  list-style:none;
  display:flex; align-items:center; gap:8px;
  padding:13px 16px;
  font-size:14.5px; font-weight:700; color:var(--ink);
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
}
.past-sec summary::-webkit-details-marker{display:none}
.past-sec summary::after{
  content:'展开'; margin-left:auto;
  font-size:12px; font-weight:500; color:var(--ink2);
}
.past-sec[open] summary::after{content:'收起'}
.past-sec .past-count{
  min-width:20px; height:20px; padding:0 6px;
  display:inline-flex; align-items:center; justify-content:center;
  background:var(--line); border-radius:10px;
  font-size:12px; font-weight:600; color:var(--ink2);
}
.past-sec .list{border-top:.5px solid var(--line)}
.row-time-sm{min-width:62px; font-size:12.5px; padding-top:1px}
.past-sec .date-tag, .date-tag{
  display:inline-block; padding:1px 6px; margin-right:2px;
  background:#FBEED3; color:var(--violet);
  border-radius:6px; font-size:11.5px; font-weight:600;
}

/* 今日页三个课表区块的颜色区分 */
.st-today::before{background:#0B5BFF !important}
.st-future::before{background:#10b981 !important}
.st-past::before{background:#8CA5C6 !important}

.edge-today{border-top:3px solid #0B5BFF}
.edge-future{border-top:3px solid #10b981}
.edge-past{border-top:3px solid #8CA5C6}

/* 日期标签跟随区块色 */
.edge-future .date-tag{background:#e5f7f0; color:#0a9d6e}
.past-sec .date-tag{background:#EEF5FC; color:#56719C}

/* 折叠条标题同款色条（之前的课·灰） */
.past-sec summary::before{
  content:''; width:3px; height:13px; border-radius:2px;
  background:#8CA5C6; flex-shrink:0;
}

/* 今天的课·空状态走橘色系，和区块色一致 */
.empty-today{
  border:1px dashed #B9D8FF; border-radius:16px;
  background:linear-gradient(180deg,#F7FBFF 0%,#fff 70%);
}
.empty-today p{color:#5B8DEF}

/* 我的页：修改密码折叠（点 + 展开） */
.pwd-fold summary{
  list-style:none;
  display:flex; align-items:center; justify-content:space-between;
  cursor:pointer;
  -webkit-tap-highlight-color:transparent;
  padding:2px 0;
}
.pwd-fold summary::-webkit-details-marker{display:none}
.pwd-sum-title{margin:0}
.pwd-plus{
  width:24px; height:24px; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  border:1.5px solid var(--line); border-radius:50%;
  font-size:15px; font-weight:600; color:var(--ink2);
  background:var(--card);
  transition:transform .18s ease, background .18s ease;
}
.pwd-fold[open] .pwd-plus{
  transform:rotate(45deg);
  background:#0B5BFF; border-color:#0B5BFF; color:#fff;
}

/* 详情页开卡表单里的分段控件：抵消 .inline-form label 的 flex/space-between，
   恢复「月卡/次卡」文字居中和选中白底铺满 */
.inline-form .seg label{display:block; font-size:inherit;}
.inline-form .seg{margin-top:2px;}
.inline-form .seg span{padding:8px 0;}

/* ---------- VIP 实体卡质感（管理端 + 客户端共用 .cardbox） ---------- */
.cardbox{
  position:relative; z-index:0; overflow:hidden;
  box-shadow:0 2px 10px rgba(30,80,190,.07);
}
/* 生效卡：黄金卡面 + 立体浮雕 VIP 底纹 */
.cardbox-active{
  border:.5px solid rgba(27,127,255,.45); border-left:none;
  background:linear-gradient(135deg,#061A4D 0%,#0B5BFF 50%,#00B8FF 100%);
  box-shadow:0 10px 24px rgba(70,110,190,.35),
             inset 0 1px 0 rgba(232,242,255,.55),
             inset 0 -1px 0 rgba(70,120,220,.35);
}
/* VIP 浮雕字：亮金字面 + 上暗下亮双向阴影 = 凸出效果 */
.cardbox-active::before{
  content:"VIP"; position:absolute; right:-10px; bottom:-34px;
  font-size:96px; font-weight:800; font-style:italic; letter-spacing:2px;
  line-height:1; color:#7FB5FF; opacity:.42;
  text-shadow:0 -2px 2px rgba(70,120,220,.55), 0 2px 2px rgba(234,243,255,.80), 0 6px 10px rgba(18,60,160,.30);
  z-index:-1; user-select:none; pointer-events:none;
}
.cardbox-active::after{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:
    radial-gradient(130px 100px at 90% -12%, rgba(255,255,255,.28), transparent 70%),
    radial-gradient(180px 140px at -10% 115%, rgba(70,110,190,.18), transparent 70%),
    repeating-linear-gradient(115deg, rgba(255,255,255,.10) 0 1px, transparent 1px 11px);
}
/* 起司竖大拇指浮雕烙印：双环 + 左上受光/右下投影 = 立体凸出 */
.cardbox-active .card-seal{
  position:absolute; z-index:-1; pointer-events:none; user-select:none;
  right:46px; top:54%; width:84px; height:84px;
  transform:translateY(-50%) rotate(-7deg);
  object-fit:contain; opacity:.22; filter:saturate(.4);
}
.cardbox-active .cardbox-name{color:#fff; text-shadow:0 1px 0 rgba(232,242,255,.60);}
.cardbox-active .cardbox-name .cat-mini{border-color:rgba(255,255,255,.85);}
.cardbox-active .cardbox-meta{color:rgba(255,255,255,.82);}
.cardbox-active .big-num{
  background:none; -webkit-background-clip:initial; background-clip:initial;
  -webkit-text-fill-color:#fff; color:#fff;
  text-shadow:0 -1px 1px rgba(70,120,220,.60), 0 1px 1px rgba(236,244,255,.90), 0 2px 3px rgba(70,120,220,.35);
}
.cardbox-active .cardbox-dates{
  color:rgba(255,255,255,.78); border-top-color:rgba(255,255,255,.28);
}
.cardbox-active .warn-text{color:#FFD7D7;}
.cardbox-active .pill-ok{
  background:#fff; color:#0A56C4;
  border:1px solid rgba(255,255,255,.75); font-weight:600;
}
.cardbox-active .pill-gray{
  background:rgba(255,255,255,.20); color:#fff;
  border:1px solid rgba(255,255,255,.45);
}
.cardbox-active .pill-red{
  background:rgba(240,59,75,.92); color:#fff;
  border:1px solid rgba(255,255,255,.35);
}
/* 过期/用完卡：保留浅色但加淡 VIP 底纹，与生效卡成套 */
.cardbox-expired, .cardbox-used_up{position:relative; z-index:0; overflow:hidden;}
.cardbox-expired::before, .cardbox-used_up::before{
  content:"VIP"; position:absolute; right:-14px; bottom:-32px;
  font-size:96px; font-weight:800; font-style:italic; letter-spacing:2px;
  line-height:1; color:rgba(18,60,160,.06);
  z-index:-1; user-select:none; pointer-events:none;
}

/* 失效 / 用完的卡：卡面里补一句催续课的小字提示 */
.cardbox-hint{
  margin:10px 0 0; padding:7px 10px;
  background:var(--amber-bg); border:.5px solid #f3e0b5; border-radius:10px;
  font-size:12px; line-height:1.5; color:#3E5E8F;
}
.cardbox-used_up .cardbox-hint{
  background:rgba(163,32,32,.07); border-color:rgba(163,32,32,.22); color:#8a1f12;
}

/* ---------- 老板端：扫码签到 ---------- */
.scan-mask{
  position:fixed; left:0; top:0; right:0; bottom:0;
  width:100%; height:100%;
  z-index:120;
  background:rgba(14,48,120,.96);
  display:flex; align-items:center; justify-content:center;
  box-sizing:border-box; overflow:hidden;
  padding:calc(16px + env(safe-area-inset-top)) 16px calc(16px + env(safe-area-inset-bottom));
}
.scan-mask[hidden]{display:none !important;}
body.scan-open{overflow:hidden;}
.scan-panel{
  width:100%; max-width:420px; color:#fff; text-align:center;
  display:flex; flex-direction:column; align-items:center;
}
.scan-title{font-size:15px; font-weight:600; margin-bottom:12px;}
.scan-view{
  position:relative; flex:none;
  width:min(76vw,320px,44vh); height:min(76vw,320px,44vh);
  margin:0 auto;
  border-radius:18px; overflow:hidden; background:#000;
}
.scan-view video{width:100%; height:100%; object-fit:cover; display:block; background:#000;}
.scan-frame{
  position:absolute; inset:14%;
  border:3px solid rgba(255,255,255,.82); border-radius:14px;
  box-shadow:0 0 0 999px rgba(0,0,0,.32);
  pointer-events:none;
}
.scan-line{
  position:absolute; left:16%; right:16%; height:2px; top:18%;
  background:linear-gradient(90deg,transparent,#6ef0b4,transparent);
  animation:scanmove 1.9s ease-in-out infinite;
  pointer-events:none;
}
@keyframes scanmove{0%{top:18%}50%{top:80%}100%{top:18%}}
.scan-hint{font-size:13px; color:rgba(255,255,255,.75); margin:12px 0 14px; min-height:20px;}
.scan-btns{display:flex; gap:10px; justify-content:center; flex-wrap:wrap;}
.row-just-done{animation:rowdone 1s ease;}
@keyframes rowdone{0%{background:rgba(16,185,129,.28)}100%{background:transparent}}

/* ---------- 客户端：约课卡片翻转 + 签到二维码 ---------- */
.ticket-flip{
  perspective:900px;
  height:76px; margin:8px 10px;
  transition:height .42s cubic-bezier(.3,.9,.3,1);
  cursor:pointer;
}
.ticket-flip.flipped{height:268px;}
.ticket-inner{
  position:relative; width:100%; height:100%;
  transform-style:preserve-3d;
  transition:transform .62s cubic-bezier(.3,.9,.3,1);
}
.ticket-flip.flipped .ticket-inner{transform:rotateY(180deg);}
.ticket-face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  border-radius:16px; background:var(--card);
  border:.5px solid var(--line);
  box-shadow:0 2px 10px rgba(30,80,190,.07);
  overflow:hidden;
}
.ticket-front{display:flex; align-items:center; gap:12px; padding:0 14px;}
.ticket-front .row-time{min-width:46px;}
.ticket-back{
  transform:rotateY(180deg);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:14px;
  background:linear-gradient(180deg,#ffffff,#F7FBFF);
}
.qr-holder{
  width:168px; height:168px; padding:6px;
  background:#fff; border-radius:12px;
  box-shadow:0 6px 18px rgba(30,80,190,.16);
}
.qr-holder canvas,.qr-holder img{width:100% !important; height:100% !important; display:block; border-radius:8px;}
.qr-tip{font-size:12.5px; color:var(--ink2);}
.qr-time{font-size:12px; color:var(--ink3);}

/* ---------- 客户端：上课成功动画 ---------- */
.checkin-win{
  position:fixed; inset:0; z-index:70;
  display:flex; align-items:center; justify-content:center;
  background:radial-gradient(circle at 50% 38%, rgba(255,214,102,.28), rgba(14,48,120,.95) 62%);
}
.checkin-win[hidden]{display:none;}
.checkin-win.out{animation:cwfade .7s ease forwards;}
@keyframes cwfade{to{opacity:0;}}
.cw-open{overflow:hidden;}
.cw-stage{position:relative; text-align:center; color:#fff; padding:0 24px;}
.cw-cat{
  height:238px; width:auto; max-width:74vw; object-fit:contain; display:block; margin:0 auto;
  animation:cwrun .95s cubic-bezier(.2,1.35,.4,1) both,
            cwbob 1.2s .95s ease-in-out infinite;
  filter:drop-shadow(0 10px 22px rgba(255,205,80,.35));
}
@keyframes cwrun{
  0%{transform:translateX(-72vw) rotate(-14deg) scale(.75); opacity:0;}
  25%{opacity:1;}
  100%{transform:translateX(0) rotate(0) scale(1); opacity:1;}
}
@keyframes cwbob{
  0%,100%{transform:translateY(0) rotate(-2deg);}
  50%{transform:translateY(-9px) rotate(2deg);}
}
.cw-title{
  font-size:27px; font-weight:800; letter-spacing:3px; margin-top:6px;
  background:linear-gradient(135deg,#fff6d2,#ffcf4d);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent;
  animation:cwpop .5s .55s both;
}
@keyframes cwpop{from{transform:scale(.62); opacity:0;} to{transform:scale(1); opacity:1;}}
.cw-sub{font-size:13px; color:rgba(255,255,255,.8); margin-top:9px; animation:cwpop .5s .8s both;}
.cw-spark{
  position:absolute; width:9px; height:9px; border-radius:50%;
  background:#ffd166; opacity:0; animation:spark 1.7s 1s infinite;
}
.cw-spark.s1{left:10%; top:16%;}
.cw-spark.s2{right:8%; top:28%; animation-delay:1.3s;}
.cw-spark.s3{left:24%; bottom:20%; animation-delay:1.55s;}
@keyframes spark{
  0%{opacity:0; transform:scale(.4);}
  40%{opacity:.95; transform:scale(1.25);}
  100%{opacity:0; transform:scale(.2) translateY(-26px);}
}

.scan-btns label.btn{display:inline-flex; align-items:center; justify-content:center; cursor:pointer;}

/* 拍照签到：文件选择框不能用 hidden/display:none（部分手机 WebView 点按钮唤不起相机），
   改成视觉隐藏，仍可被 JS 正常触发 */
.file-pick{
  position:absolute; width:1px; height:1px;
  opacity:0; overflow:hidden; border:0; padding:0; margin:-1px;
  clip:rect(0 0 0 0); clip-path:inset(50%); pointer-events:none;
}

/* ===== 列表工具条：导出 / 批量导入 ===== */
.list-tools{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; margin:0 0 9px;
}
.list-tools .count-line{margin:0;}
.list-tools .hint{margin:0;}
.io-actions{display:flex; gap:7px; flex:none;}
/* 两个按钮并排时强制等宽（1fr 1fr 会按两者中最宽的那个对齐），文字居中 */
.io-actions.eq{display:grid; grid-template-columns:1fr 1fr;}
.io-actions.eq .chip-btn{justify-content:center;}
.chip-btn{
  display:inline-flex; align-items:center; gap:3px;
  font-size:12px; font-weight:600; color:var(--violet);
  background:var(--violet-bg); border:.5px solid #D6E7FA; border-radius:20px;
  padding:5px 11px; text-decoration:none; white-space:nowrap;
}
.chip-btn:active{background:#DCEBFC;}

/* ===== 批量导入 ===== */
.form .field textarea{
  width:100%; border:.5px solid var(--line); border-radius:11px;
  padding:10px 12px; font-size:13.5px; line-height:1.7;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  background:var(--card); color:var(--ink); outline:none; resize:vertical;
}
.form .field textarea:focus{
  border-color:var(--violet); box-shadow:0 0 0 3px rgba(13,110,245,.12);
}
.form .field input[type=file]{font-size:13px; padding:9px 11px;}
.imp-sum{display:flex; gap:9px; margin:0 0 12px; flex-wrap:wrap;}
.imp-sum span{
  font-size:12.5px; padding:6px 12px; border-radius:20px;
  background:#EFF5FC; color:var(--ink2);
}
.imp-sum b{font-size:15px; font-weight:800; margin-left:3px;}
.imp-suc b{color:var(--green);}
.imp-bad b{color:var(--red);}
.imp-wrap{
  overflow-x:auto; background:var(--card); border:.5px solid var(--line);
  border-radius:14px; box-shadow:var(--shadow); margin-bottom:12px;
}
.imp-table{width:100%; border-collapse:collapse; font-size:12.5px;}
.imp-table th{
  text-align:left; font-weight:600; font-size:11.5px; color:var(--ink3);
  padding:9px 10px; border-bottom:.5px solid var(--line);
  white-space:nowrap; background:#F7FBFF;
}
.imp-table td{padding:9px 10px; border-bottom:.5px solid #EFF5FC; vertical-align:top;}
.imp-table tr:last-child td{border-bottom:none;}
.imp-line{color:var(--ink3); font-variant-numeric:tabular-nums; white-space:nowrap;}
.imp-num{font-variant-numeric:tabular-nums; white-space:nowrap;}
.imp-note{color:var(--ink2); max-width:130px; word-break:break-all;}
.imp-reason{color:var(--red); font-size:12px; line-height:1.5;}
.imp-warn{
  background:var(--amber-bg); border:.5px solid #f3e0b5; border-radius:12px;
  padding:10px 13px; margin-bottom:12px;
}
.imp-warn p{margin:3px 0; font-size:12px; color:#3E5E8F; line-height:1.6;}

/* ===== 危险操作区（删除客户等不可恢复的） ===== */
.danger-zone{
  background:var(--card); border:.5px solid #f6d7db; border-radius:14px;
  padding:13px 15px; margin-bottom:8px;
}
.danger-zone p{
  margin:0 0 11px; font-size:12.5px; color:var(--ink2); line-height:1.7;
}
.danger-zone .btn-danger-soft{font-weight:700;}

/* ===== 复制名单（提醒催续卡用） ===== */
.copy-box{margin-bottom:11px;}
.copy-src{
  width:100%; margin-top:9px; padding:10px 12px;
  font-size:12.5px; line-height:1.9; color:var(--ink);
  border:.5px solid var(--line); border-radius:11px; background:#F7FBFF;
  font-family:ui-monospace,Menlo,Consolas,monospace;
  resize:vertical;
}
.copy-box .hint{margin-top:7px;}

/* ===== 只读字段（如老板手机号=登录账号，不允许修改） ===== */
.readonly-box{
  padding:12px 14px; font-size:15.5px; letter-spacing:.6px;
  color:var(--ink2); background:#F2F8FE;
  border:.5px solid var(--line); border-radius:12px;
}
.field .hint a{color:var(--violet); text-decoration:none; font-weight:600;}

/* ===== 客户 H5 店铺卡（与顶栏同系深紫渐变） ===== */
.shop-info{
  background:linear-gradient(118deg,#061A4D 0%,#0B5BFF 52%,#0D6EF5 100%);
  border-radius:var(--radius); box-shadow:0 6px 18px rgba(30,80,190,.28);
  padding:13px 15px; margin-bottom:12px; color:#fff;
}
.shop-info .si-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap;
}
.shop-info .si-name{
  font-size:16.5px; font-weight:800; color:#fff; letter-spacing:.3px;
  min-width:0; flex:1 1 auto;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  text-shadow:0 1px 4px rgba(0,0,0,.18);
}
.shop-info .si-tel{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  color:#fff; text-decoration:none; font-weight:700; font-size:13.5px;
  letter-spacing:.4px; line-height:1;
  background:rgba(255,255,255,.17);
  border:.5px solid rgba(255,255,255,.38);
  border-radius:20px; padding:7px 12px;
  box-shadow:0 2px 8px rgba(0,0,0,.16);
  transition:transform .12s, background .12s;
}
.shop-info .si-tel:active{transform:scale(.95); background:rgba(255,255,255,.3);}
.shop-info .si-phone{opacity:.9; flex:none;}
.shop-info .si-num{text-shadow:0 1px 3px rgba(0,0,0,.2);}
.shop-info .si-go{
  font-size:10.5px; font-weight:700; letter-spacing:0;
  background:var(--green); color:#fff;
  border-radius:9px; padding:3px 8px;
}
.shop-info .si-addr-row{
  margin-top:9px; padding-top:9px;
  border-top:.5px solid rgba(255,255,255,.18);
  font-size:12.8px; line-height:1.65;
}
.shop-info .si-addr{
  color:rgba(255,255,255,.88); font-weight:600; text-decoration:none;
  display:inline-flex; align-items:center; gap:3px; flex-wrap:wrap;
  -webkit-user-select:text; user-select:text;
}
.shop-info .si-pin{color:#6FA8FF; flex:none;}
.shop-info .si-addr-tap{cursor:pointer;}
.shop-info .si-addr-plain{color:rgba(255,255,255,.72);}
.shop-info .si-map-hint{
  font-size:10.5px; color:rgba(255,255,255,.55); margin-left:6px;
  border:.5px solid rgba(255,255,255,.28); border-radius:8px; padding:1px 6px;
  vertical-align:1px;
}

/* ===== 底部动作面板（店铺地址：复制 / 打开地图 App） ===== */
.act-mask{
  position:fixed; inset:0; z-index:70;
  background:rgba(14,46,120,.45);
  display:flex; align-items:flex-end; justify-content:center;
  opacity:0; transition:opacity .2s;
}
.act-mask.show{opacity:1;}
.act-sheet{
  width:100%; max-width:520px; background:#fff;
  border-radius:20px 20px 0 0;
  padding:14px 14px calc(14px + env(safe-area-inset-bottom));
  transform:translateY(100%);
  transition:transform .24s cubic-bezier(.22,.7,.3,1);
  box-shadow:0 -8px 30px rgba(16,50,130,.22);
}
.act-mask.show .act-sheet{transform:translateY(0);}
.act-head{padding:2px 6px 10px; border-bottom:.5px solid var(--line);}
.act-title{display:block; font-size:15px; color:var(--ink); letter-spacing:.2px;}
.act-sub{
  font-size:12.5px; color:var(--ink3); margin:3px 0 0;
  line-height:1.5; word-break:break-all;
}
.act-list{margin-top:4px;}
.act-item{
  width:100%; display:flex; flex-direction:column; gap:2px;
  align-items:flex-start; text-align:left; font-family:inherit;
  background:none; border:0; border-bottom:.5px solid var(--line);
  padding:13px 6px;
}
.act-item:last-child{border-bottom:0;}
.act-item:active{background:#F7FBFF;}
.act-label{font-size:15px; font-weight:700; color:var(--violet);}
.act-hint{font-size:11.5px; color:var(--ink3); line-height:1.45;}
.act-note{
  margin:10px 4px 0; padding:9px 11px;
  font-size:11.5px; line-height:1.6; color:#3E5E8F;
  background:#fff8e6; border:.5px solid #f2e2b8; border-radius:11px;
}
.act-cancel{
  width:100%; margin-top:8px; border:0; border-radius:14px;
  background:#F0F6FD; color:var(--ink2);
  font-size:15px; font-weight:600; padding:13px; font-family:inherit;
}
.act-cancel:active{background:#E9F1FB;}

/* ===== 老板表单坐标行 ===== */
.geo-row{display:flex; gap:8px; align-items:center; margin-top:4px;}
.geo-row .geo-input{flex:1; min-width:0;}

/* ===== 店铺地图浮层（页面内瓦片地图，不跳转，关闭即回客户页） ===== */
.map-mask{
  position:fixed; inset:0; z-index:80;
  background:rgba(14,46,120,.5);
  display:flex; align-items:flex-end;
}
.map-mask[hidden]{display:none;}
.map-panel{
  position:relative; width:100%; max-width:520px; margin:0 auto;
  background:#fff; border-radius:20px 20px 0 0; overflow:hidden;
  display:flex; flex-direction:column;
  height:82vh; max-height:82vh;
  box-shadow:0 -8px 30px rgba(16,50,130,.28);
}
.map-bar{
  display:flex; align-items:center; gap:10px;
  padding:13px 14px; border-bottom:.5px solid var(--line); background:#fff;
}
.map-head{flex:1; min-width:0;}
.map-head .map-name{
  display:block; font-size:15.5px; font-weight:800; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-head .map-addr{
  display:block; margin-top:2px; font-size:12px; color:var(--ink3);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.map-close{
  flex:none; width:32px; height:32px; border-radius:50%; border:0;
  background:#F0F6FD; color:var(--ink2); font-size:13px; line-height:1;
  font-family:inherit; cursor:pointer;
}
.map-close:active{background:#E5EFFA;}
.map-body{
  position:relative; flex:1; min-height:0; overflow:hidden;
  background:#E9F1FB; touch-action:none; cursor:grab;
  -webkit-user-select:none; user-select:none;
}
.map-body.dragging{cursor:grabbing;}
.map-tile{
  position:absolute; left:0; top:0; width:256px; height:256px;
  max-width:none; pointer-events:none;
  -webkit-user-drag:none; user-select:none;
}
.map-pin{
  position:absolute; left:0; top:0; z-index:2;
  display:flex; flex-direction:column; align-items:center;
  pointer-events:none; will-change:transform;
}
.map-pin-name{
  font-size:11.5px; font-weight:700; color:#fff; background:var(--violet);
  border-radius:8px; padding:2px 8px; margin-bottom:1px; white-space:nowrap;
  box-shadow:0 2px 6px rgba(16,52,130,.28);
}
.map-zoom{
  position:absolute; right:12px; bottom:84px; z-index:3;
  display:flex; flex-direction:column; gap:8px;
}
.map-zoom button{
  width:36px; height:36px; border-radius:50%; border:.5px solid var(--line);
  background:#fff; color:var(--ink); font-size:17px; line-height:1;
  font-family:inherit; box-shadow:0 2px 8px rgba(16,52,130,.14); cursor:pointer;
}
.map-zoom button:active{background:#EFF5FC;}
.map-foot{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:11px 14px calc(11px + env(safe-area-inset-bottom));
  border-top:.5px solid var(--line); background:#fff;
}
.map-foot .map-tip{font-size:11.5px; color:var(--ink3);}
.map-foot .map-go{
  flex:none; font-size:12.5px; font-weight:700; color:#fff;
  background:var(--violet); border-radius:10px; padding:7px 12px;
  text-decoration:none;
}
body.map-open{overflow:hidden;}