/* ================= 客户端 H5（移动端）样式 ================= */
body.client-body { background: #f2f4f7; max-width: 480px; margin: 0 auto; min-height: 100vh; position: relative; box-shadow: 0 0 30px rgba(0,0,0,.05); }

/* ---------------- 顶部栏 ---------------- */
.c-navbar {
  position: sticky; top: 0; z-index: 100; height: 52px; display: flex; align-items: center;
  padding: 0 16px; background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  color: #fff; gap: 12px;
}
.c-navbar .back { font-size: 22px; width: 28px; cursor: pointer; line-height: 1; }
.c-navbar .title { font-size: 17px; font-weight: 700; flex: 1; text-align: center; }
.c-navbar .right { width: 28px; text-align: right; font-size: 13px; }
.c-navbar.plain { background: #fff; color: var(--text); border-bottom: 1px solid var(--border); }

/* ---------------- 内容区 ---------------- */
.c-content { padding: 14px; padding-bottom: 76px; min-height: calc(100vh - 52px); }
.c-content.no-nav { padding-bottom: 20px; }

/* ---------------- 首页头部横幅 ---------------- */
.c-hero {
  background: linear-gradient(135deg, var(--primary), #26c6a2); color: #fff;
  padding: 22px 20px 60px; border-radius: 0 0 24px 24px; margin: -14px -14px 0; position: relative; overflow: hidden;
}
.c-hero::after { content: '♻'; position: absolute; right: -10px; bottom: -20px; font-size: 120px; opacity: .12; }
.c-hero .hello { font-size: 15px; opacity: .9; }
.c-hero .slogan { font-size: 22px; font-weight: 800; margin-top: 4px; }
.c-hero .desc { font-size: 13px; opacity: .85; margin-top: 6px; }

/* ---------------- 轮播广告 ---------------- */
.c-banner { margin: -44px 0 14px; position: relative; z-index: 2; }
.c-swiper { display: flex; overflow-x: auto; gap: 10px; scroll-snap-type: x mandatory; padding: 2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.c-swiper::-webkit-scrollbar { display: none; }
.c-swiper-item { flex: 0 0 100%; scroll-snap-align: center; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); background: #fff; position: relative; height: 140px; }
.c-swiper-item img { width: 100%; height: 100%; object-fit: cover; }
.c-swiper-item .caption { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 14px 10px; color: #fff; font-weight: 600; background: linear-gradient(transparent, rgba(0,0,0,.6)); font-size: 14px; }
.c-swiper-placeholder { height: 140px; border-radius: var(--radius); background: linear-gradient(135deg,#dfe6e9,#b2bec3); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 15px; }

/* ---------------- 快捷入口 ---------------- */
.c-quick { display: grid; grid-template-columns: repeat(4,1fr); gap: 10px; }
.c-quick-item { background: #fff; border-radius: var(--radius); padding: 16px 6px; text-align: center; box-shadow: var(--shadow); cursor: pointer; transition: transform .15s; }
.c-quick-item:active { transform: scale(.95); }
.c-quick-item .icon { font-size: 26px; margin-bottom: 6px; }
.c-quick-item .label { font-size: 12px; color: var(--text-sub); font-weight: 600; }

/* ---------------- 区块标题 ---------------- */
.c-section-head { display: flex; align-items: center; justify-content: space-between; margin: 20px 2px 12px; }
.c-section-head .h { font-size: 16px; font-weight: 700; display: flex; align-items: center; gap: 7px; }
.c-section-head .h::before { content: ''; width: 4px; height: 15px; background: var(--primary); border-radius: 2px; }
.c-section-head .more { font-size: 12px; color: var(--text-light); }

/* ---------------- 公告 ---------------- */
.c-notice { display: flex; align-items: center; gap: 8px; background: #fff8e6; border-radius: 10px; padding: 10px 14px; font-size: 13px; color: #9a6b00; overflow: hidden; }
.c-notice .horn { font-size: 16px; }
.c-notice .txt { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------------- 套餐卡片 ---------------- */
.c-plan { background: #fff; border-radius: var(--radius); padding: 16px; box-shadow: var(--shadow); margin-bottom: 12px; position: relative; overflow: hidden; border: 2px solid transparent; transition: all .2s; }
.c-plan.recommend { border-color: var(--primary); }
.c-plan .rec-badge { position: absolute; right: 0; top: 0; background: linear-gradient(135deg,#ff7675,#e17055); color: #fff; font-size: 11px; padding: 3px 12px; border-radius: 0 0 0 12px; font-weight: 600; }
.c-plan .name { font-size: 17px; font-weight: 700; }
.c-plan .desc { font-size: 13px; color: var(--text-sub); margin-top: 4px; }
.c-plan .price-row { display: flex; align-items: baseline; gap: 8px; margin-top: 10px; }
.c-plan .now { font-size: 24px; font-weight: 800; color: var(--danger); }
.c-plan .now small { font-size: 14px; }
.c-plan .old { font-size: 13px; color: var(--text-light); text-decoration: line-through; }
.c-plan .dur { font-size: 12px; color: var(--primary); background: var(--primary-light); padding: 2px 10px; border-radius: 20px; margin-left: auto; }

/* ---------------- 列表项（订单等） ---------------- */
.c-order { background: #fff; border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--shadow); margin-bottom: 12px; }
.c-order .top { display: flex; justify-content: space-between; align-items: center; padding-bottom: 10px; border-bottom: 1px dashed var(--border); }
.c-order .no { font-size: 12px; color: var(--text-light); }
.c-order .body { padding: 10px 0; }
.c-order .row { display: flex; justify-content: space-between; font-size: 14px; margin-bottom: 6px; }
.c-order .row .k { color: var(--text-sub); }
.c-order .foot { display: flex; justify-content: flex-end; gap: 8px; padding-top: 8px; }

/* ---------------- 底部导航 ---------------- */
.c-tabbar {
  position: fixed; bottom: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 480px;
  height: 60px; background: #fff; border-top: 1px solid var(--border); display: flex; z-index: 100;
  padding-bottom: env(safe-area-inset-bottom);
}
.c-tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; cursor: pointer; color: var(--text-light); font-size: 11px; transition: color .2s; }
.c-tab .icon { font-size: 21px; line-height: 1; }
.c-tab.active { color: var(--primary); font-weight: 600; }

/* ---------------- 登录页 ---------------- */
.c-login { min-height: 100vh; background: linear-gradient(160deg, var(--primary) 0%, #26c6a2 40%, #f2f4f7 40%); padding: 0 24px; display: flex; flex-direction: column; }
.c-login .brand { text-align: center; color: #fff; padding: 60px 0 30px; }
.c-login .brand .logo { font-size: 54px; }
.c-login .brand .name { font-size: 24px; font-weight: 800; margin-top: 8px; }
.c-login .brand .sub { font-size: 13px; opacity: .9; margin-top: 4px; }
.c-login .form-card { background: #fff; border-radius: 20px; padding: 26px 22px; box-shadow: var(--shadow-lg); }
.c-login .form-title { font-size: 18px; font-weight: 700; margin-bottom: 20px; text-align: center; }
.c-login .tip { text-align: center; font-size: 12px; color: var(--text-light); margin-top: 18px; }

/* ---------------- 个人信息表单渲染 ---------------- */
.dyn-field { margin-bottom: 14px; }

/* ---------------- 头像/我的 ---------------- */
.c-profile-head { background: linear-gradient(135deg, var(--primary), #26c6a2); color: #fff; padding: 28px 20px; display: flex; align-items: center; gap: 16px; border-radius: 0 0 24px 24px; margin: -14px -14px 14px; }
.c-avatar { width: 62px; height: 62px; border-radius: 50%; background: rgba(255,255,255,.25); display: flex; align-items: center; justify-content: center; font-size: 28px; overflow: hidden; border: 2px solid rgba(255,255,255,.5); }
.c-avatar img { width: 100%; height: 100%; object-fit: cover; }
.c-menu { background: #fff; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.c-menu-item { display: flex; align-items: center; gap: 12px; padding: 15px 16px; border-bottom: 1px solid var(--border); cursor: pointer; }
.c-menu-item:last-child { border-bottom: none; }
.c-menu-item:active { background: #f7f9fa; }
.c-menu-item .icon { font-size: 20px; width: 24px; text-align: center; }
.c-menu-item .label { flex: 1; font-size: 15px; }
.c-menu-item .arrow { color: var(--text-light); }

/* ---------------- 时间区间选择 ---------------- */
.slot-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; }
.slot-item { border: 1.5px solid var(--border); border-radius: 10px; padding: 12px; text-align: center; cursor: pointer; transition: all .2s; background: #fff; }
.slot-item.active { border-color: var(--primary); background: var(--primary-light); color: var(--primary-dark); font-weight: 600; }
.slot-item .t { font-size: 15px; font-weight: 600; }
.slot-item .l { font-size: 12px; color: var(--text-sub); margin-top: 2px; }

/* ---------------- 服务记录时间线 ---------------- */
.timeline { position: relative; padding-left: 22px; }
.timeline::before { content: ''; position: absolute; left: 6px; top: 6px; bottom: 6px; width: 2px; background: var(--border); }
.timeline-item { position: relative; padding-bottom: 16px; }
.timeline-item::before { content: ''; position: absolute; left: -19px; top: 5px; width: 10px; height: 10px; border-radius: 50%; background: var(--primary); border: 2px solid #fff; box-shadow: 0 0 0 2px var(--primary-light); }
.timeline-item .photos { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.timeline-item .photos img { width: 62px; height: 62px; object-fit: cover; border-radius: 8px; }

.photo-grid { display: flex; gap: 8px; flex-wrap: wrap; }
.photo-grid .ph { width: 76px; height: 76px; border-radius: 10px; object-fit: cover; border: 1px solid var(--border); }
.photo-add { width: 76px; height: 76px; border-radius: 10px; border: 1.5px dashed var(--text-light); display: flex; align-items: center; justify-content: center; font-size: 26px; color: var(--text-light); cursor: pointer; background: #fafbfc; }