/* ==================== FitAssistant.css —— 手机原型全部样式 ==================== */
/* 设计稿来源：铁兽运动 / 排课 教练排课小程序截图；手机壳 402×874（iPhone 17 / 17 Pro） */

/* ===== 设计变量 ===== */
:root {
  --teal: #27b0ba;          /* 主题青：按钮 / 激活 tab / 图标 */
  --teal-dark: #1d979f;
  --teal-soft: #e8f7f8;
  --orange: #f26a1f;        /* 退款/删除按钮、自定义排课圆点 */
  --orange-block: #f3934f;  /* 周视图橙色课程块 */
  --green: #07c160;         /* 微信绿：确定 / 个人信息维护 */
  --blue-dot: #1c9fd6;      /* 50元 圆点 */
  --link: #576b95;          /* 微信链接蓝 */
  --navbg: #3b3b3f;         /* 导航栏 / tabbar 深灰 */
  --navbg2: #333337;        /* 二级深色（选择学员页） */
  --ink: #333333;
  --sub: #999999;
  --faint: #bbbbbb;
  --line: #eeeeee;
  --pagebg: #f6f6f6;
  --canvas: #ffffff;
}

/* ===== 基础 ===== */
* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { height: 100%; }
body {
  font-family: -apple-system, "PingFang SC", "Microsoft YaHei", sans-serif;
  font-size: 14px; color: var(--ink); background: var(--canvas);
}
button { font-family: inherit; font-size: inherit; cursor: pointer; border: none; background: none; color: inherit; }

/* ==================== 画布：左侧面板 + 手机舞台 ==================== */
.canvas { display: flex; height: 100vh; overflow: hidden; }

/* ----- 左侧屏幕索引 ----- */
.panel {
  width: 264px; flex-shrink: 0; background: #1f222a; color: #aab0bd;
  display: flex; flex-direction: column; border-right: 1px solid #2a2e38;
}
.p-brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px 12px; }
.p-logo {
  width: 40px; height: 40px; border-radius: 10px; flex-shrink: 0;
  background: linear-gradient(135deg, var(--teal), var(--teal-dark));
  color: #fff; font-size: 20px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 3px 10px rgba(39, 176, 186, 0.35);
}
.p-name { color: #fff; font-size: 15px; font-weight: 700; }
.p-sub { font-size: 11px; color: #6d7482; margin-top: 2px; }
.p-size {
  margin: 0 16px 10px; padding: 8px 10px; font-size: 11px; color: #8a92a1;
  background: #262a33; border: 1px dashed #3a3f4b; border-radius: 8px;
  display: flex; align-items: center; gap: 6px;
}
.p-size b { color: var(--teal); }
.p-size .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.p-nav { flex: 1; overflow-y: auto; padding: 4px 10px 12px; }
.p-group { margin-top: 12px; }
.p-group-t {
  font-size: 11px; color: #626a78; padding: 0 8px 6px;
  display: flex; align-items: center; gap: 6px;
}
.p-group-t::after { content: ''; flex: 1; height: 1px; background: #2c313c; }
.p-item {
  display: flex; align-items: center; gap: 8px; width: 100%; text-align: left;
  padding: 8px 10px; border-radius: 7px; color: #aab0bd; font-size: 13px;
  transition: all 0.12s;
}
.p-item .no {
  font-size: 10px; color: #5b626f; font-family: "SF Mono", Menlo, monospace;
  width: 20px; flex-shrink: 0;
}
.p-item:hover { background: rgba(255, 255, 255, 0.05); color: #fff; }
.p-item.active {
  background: linear-gradient(90deg, rgba(39, 176, 186, 0.22), rgba(39, 176, 186, 0.06));
  color: var(--teal); font-weight: 600;
}
.p-item.sub { padding-left: 28px; font-size: 12px; color: #8a92a1; }
.p-foot {
  padding: 12px 16px; font-size: 11px; line-height: 1.8; color: #5b626f;
  border-top: 1px solid #2a2e38;
}

/* ----- 手机舞台 ----- */
.stage {
  flex: 1; min-width: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 14px;
  background: var(--canvas);
}
.phone {
  width: 426px; height: 898px; padding: 12px; border-radius: 58px;
  /* 窗口比手机壳小时整体等比缩小，避免上下（或左右）被裁掉；窗口足够大时缩放恒为 1 */
  transform: scale(min(calc((100vh - 80px) / 898px), calc((100vw - 60px) / 426px), 1));
  transform-origin: center;
  background: #000;
  box-shadow:
    inset 0 0 0 2px #33333c,
    0 30px 80px rgba(0, 0, 0, 0.55),
    0 4px 18px rgba(0, 0, 0, 0.4);
}
.screen {
  position: relative; width: 402px; height: 874px;   /* ← iPhone 17 / 17 Pro 逻辑分辨率，固定 */
  border-radius: 46px; overflow: hidden; background: #fff;
  display: flex; flex-direction: column;
}
.stage-caption { font-size: 12px; color: #6d7482; }
.stage-caption b { color: var(--teal); font-weight: 600; }

/* ==================== 手机内：状态栏 / 导航栏 / tabbar ==================== */

/* ----- 状态栏 ----- */
.statusbar {
  height: 44px; flex-shrink: 0; background: var(--navbg); color: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 28px 0 32px; position: relative; z-index: 5;
}
.sb-time { font-size: 15px; font-weight: 600; letter-spacing: 0.3px; }
.sb-icons { display: flex; align-items: center; gap: 6px; }

/* ----- 导航栏 ----- */
.navbar {
  height: 48px; flex-shrink: 0; background: var(--navbg); color: #fff;
  display: flex; align-items: center; padding: 0 12px; position: relative; z-index: 5;
}
.nav-back {
  width: 40px; height: 48px; display: flex; align-items: center; justify-content: flex-start;
  color: #fff; flex-shrink: 0;
}
.nav-back svg { display: block; }
.nav-drawer {
  display: flex; align-items: center; gap: 6px; height: 48px;
  color: #fff; font-size: 16px; flex-shrink: 0; padding-right: 4px;
}
.nav-title {
  position: absolute; left: 80px; right: 80px; text-align: center;
  font-size: 17px; font-weight: 500; pointer-events: none;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 微信胶囊 */
.capsule {
  margin-left: auto; flex-shrink: 0;
  display: flex; align-items: center; height: 32px;
  border: 1px solid rgba(255, 255, 255, 0.25); border-radius: 16px; overflow: hidden;
}
.capsule span {
  width: 44px; height: 32px; display: flex; align-items: center; justify-content: center;
  color: #fff;
}
.capsule span + span { border-left: 1px solid rgba(255, 255, 255, 0.18); }

/* ----- 页面渲染区 ----- */
.page-root { flex: 1; min-height: 0; display: flex; flex-direction: column; }

/* ----- 页面主体（滚动区） ----- */
.pbody {
  flex: 1; min-height: 0; overflow-y: auto; background: var(--pagebg);
  position: relative; scrollbar-width: none;
}
.pbody::-webkit-scrollbar { display: none; }
.pbody.white { background: #fff; }
.pbody.dark { background: #232327; }
.pbody.has-tabbar { padding-bottom: 0; }

/* ----- 底部 tabbar ----- */
.tabbar {
  height: 56px; flex-shrink: 0; background: var(--navbg);
  display: flex; padding-bottom: 18px;   /* 给 home 指示条留位 */
}
.tabbar .tb {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 3px; color: #9a9aa0; font-size: 11px; padding-top: 6px;
}
.tabbar .tb.on { color: var(--teal); }
.tabbar .tb svg { display: block; }

/* ----- Home 指示条 ----- */
.home-ind {
  position: absolute; left: 50%; bottom: 7px; transform: translateX(-50%);
  width: 134px; height: 5px; border-radius: 3px; background: #1a1a1a; z-index: 60;
  pointer-events: none;
}
.home-ind.on-dark { background: rgba(255, 255, 255, 0.85); }

/* ==================== 公共组件 ==================== */

/* ----- 深色头部的分段 tab（任务 / 排课详情） ----- */
.seg {
  display: flex; background: var(--navbg); flex-shrink: 0;
}
.seg .sg {
  flex: 1; text-align: center; padding: 10px 0 12px; color: #cfcfd4; font-size: 15px;
  position: relative;
}
.seg .sg.on { color: var(--teal); font-weight: 600; }
.seg .sg.on::after {
  content: ''; position: absolute; left: 50%; bottom: 0; transform: translateX(-50%);
  width: 56px; height: 3px; border-radius: 2px; background: var(--teal);
}

/* ----- 日期分组条 ----- */
.date-strip {
  padding: 10px 16px; background: #f0f0f0; color: #777; font-size: 14px;
}

/* ----- 课程列表卡片 ----- */
.course {
  background: #fff; padding: 14px 16px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; cursor: pointer;
}
.course:active { background: #fafafa; }
.course .c-main { flex: 1; min-width: 0; }
.course .c-name { font-size: 16px; font-weight: 700; color: var(--ink); }
.course .c-name .c-remain { font-size: 13px; font-weight: 400; color: var(--sub); margin-left: 4px; }
.course .c-name .c-done { font-size: 14px; font-weight: 400; color: var(--teal); margin-left: 4px; }
.course .c-sub { margin-top: 6px; font-size: 13px; color: #777; display: flex; align-items: center; gap: 6px; }
.course .c-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; }
.course .c-dot.orange { background: var(--orange); }
.course .c-dot.blue { background: var(--blue-dot); }
.course .c-time { font-size: 15px; color: #555; margin-right: 6px; white-space: nowrap; }
.course .c-arrow { color: #c8c8cc; flex-shrink: 0; display: flex; }

.no-more { text-align: center; color: var(--faint); font-size: 14px; padding: 26px 0; }

/* ----- 空状态 ----- */
.empty {
  display: flex; flex-direction: column; align-items: center;
  padding-top: 190px; color: var(--faint);
}
.empty .e-txt { font-size: 24px; font-weight: 700; font-style: italic; color: #cfcfcf; letter-spacing: 2px; }

/* ----- 大按钮 ----- */
.btn-block {
  display: block; width: calc(100% - 32px); margin: 16px auto 0;
  padding: 13px 0; border-radius: 8px; text-align: center;
  font-size: 16px; color: #fff; background: var(--teal);
}
.btn-block:active { background: var(--teal-dark); }
.btn-block.orange { background: var(--orange); }
.btn-block.orange:active { background: #d95a12; }
.btn-block.green { background: var(--green); border-radius: 24px; }
.btn-block.green:active { background: #06a850; }

/* ----- 排课表单行（图标 + 文案） ----- */
.f-row {
  background: #fff; display: flex; align-items: center; gap: 12px;
  padding: 18px 16px; border-bottom: 1px solid var(--line);
  font-size: 15px; color: var(--ink);
}
.f-row:active.clickable { background: #fafafa; }
.f-row .f-ic { color: var(--teal); flex-shrink: 0; display: flex; }
.f-row .f-label { color: var(--ink); white-space: nowrap; }
.f-row .f-val { color: #555; }
.f-row .f-req { color: #f33; margin-right: -6px; }
.f-row input.f-input {
  flex: 1; min-width: 0; border: none; outline: none; font-size: 15px;
  font-family: inherit; color: var(--ink); background: transparent;
}
.f-row input.f-input::placeholder { color: #b5b5b5; }
.f-row input.f-input.err { color: #f33; }
.f-row.err { box-shadow: inset 3px 0 0 #f33; }

/* 日期 / 时间 两格 */
.dt-grid { display: flex; background: #fff; border-bottom: 1px solid var(--line); }
.dt-cell {
  flex: 1; display: flex; align-items: center; gap: 12px; padding: 18px 16px;
  font-size: 15px; color: var(--ink);
}
.dt-cell + .dt-cell { border-left: 1px solid var(--line); }
.dt-cell .f-ic { color: var(--teal); flex-shrink: 0; display: flex; }
.dt-cell .dt-sub { color: var(--sub); font-size: 14px; margin-top: 2px; }
.dt-cell.clickable:active { background: #fafafa; }

/* 学员名（排课详情顶部） */
.pick-stu {
  background: #fff; text-align: center; padding: 18px 16px; font-size: 16px;
  border-bottom: 1px solid var(--line);
}
.pick-stu.clickable:active { background: #fafafa; }

/* ----- 开关 ----- */
.switch {
  width: 52px; height: 30px; border-radius: 15px; background: #e5e5e5;
  position: relative; transition: background 0.15s; flex-shrink: 0;
}
.switch::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 26px; height: 26px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.2);
  transition: left 0.15s;
}
.switch.on { background: var(--teal); }
.switch.on::after { left: 24px; }

/* ----- 复选框 ----- */
.checkbox {
  width: 22px; height: 22px; border: 1px solid #cfcfcf; border-radius: 4px;
  display: inline-flex; align-items: center; justify-content: center;
  background: #fff; flex-shrink: 0; color: #fff;
}
.checkbox.on { background: var(--teal); border-color: var(--teal); }
.checkbox.green.on { background: var(--green); border-color: var(--green); }

/* ----- 学员列表 ----- */
.stu-tools {
  display: flex; background: var(--navbg); padding: 8px 16px 14px; flex-shrink: 0;
}
.stu-tools .st {
  flex: 1; display: flex; align-items: center; justify-content: center; gap: 6px;
  color: #fff; font-size: 15px;
}
.stu-tools .st svg { display: block; }
.stu-card {
  background: #fff; display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); cursor: pointer;
}
.stu-card:active { background: #fafafa; }
.stu-card .s-name { font-size: 17px; font-weight: 700; color: var(--ink); }
.stu-card .s-name .s-day { font-size: 14px; font-weight: 400; color: #777; margin-left: 4px; }
.stu-card .s-info { margin-top: 5px; font-size: 13px; color: var(--sub); }
.stu-card .s-info b { color: var(--teal); font-weight: 600; }

/* 头像 */
.avatar-c {
  width: 56px; height: 56px; border-radius: 50%; flex-shrink: 0; overflow: hidden;
  background: #3f3f43; display: flex; align-items: flex-end; justify-content: center;
}
.avatar-c.tint { background: linear-gradient(160deg, #6ec6cd, #3a9aa2); }
.avatar-c.lg { width: 64px; height: 64px; }

/* ----- 选择学员（深色） ----- */
.idx-letter { padding: 8px 16px; color: #888; font-size: 14px; background: #2c2c30; }
.pick-row {
  display: flex; align-items: center; gap: 14px; padding: 12px 16px;
  background: #232327; cursor: pointer;
}
.pick-row:active { background: #2a2a2f; }
.pick-row .p-name { font-size: 16px; color: #e8e8e8; }
.pick-row .p-name .p-tag { color: #999; font-size: 14px; }

/* ----- 学员详情 ----- */
.stu-head { background: var(--navbg); padding: 22px 20px 0; color: #fff; }
.stu-head .sh-top { display: flex; align-items: center; gap: 14px; }
.stu-head .sh-name { font-size: 18px; font-weight: 600; }
.stu-head .sh-name .sh-tag { font-size: 14px; font-weight: 400; color: #cfcfd4; }
.stu-head .sh-last { margin-top: 5px; font-size: 13px; color: #cfcfd4; }
.stu-head .sh-last b { color: var(--teal); font-weight: 500; }
.stu-head .sh-call { margin-left: auto; color: #cfcfd4; display: flex; }
.stu-stats {
  display: flex; text-align: center; padding: 18px 0 16px; margin-top: 18px;
}
.stu-stats .ss { flex: 1; }
.stu-stats .ss .n { font-size: 17px; font-weight: 600; }
.stu-stats .ss .t { font-size: 12px; color: #cfcfd4; margin-top: 4px; }

.grid-3 { display: flex; background: #fff; border-bottom: 1px solid var(--line); }
.grid-3 .g3 {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 16px 0 14px; color: var(--ink); font-size: 14px;
}
.grid-3 .g3 + .g3 { border-left: 1px solid var(--line); }
.grid-3 .g3:active { background: #fafafa; }
.grid-3 .g3 svg { color: #555; display: block; }

.remark-row { background: #fff; padding: 14px 16px 20px; font-size: 14px; color: var(--ink); }

/* ----- 我的 ----- */
.mine-head { background: var(--navbg); color: #fff; padding: 20px 20px 0; }
.mine-head .mh-top { display: flex; align-items: center; gap: 14px; }
.mine-head .mh-name { font-size: 18px; font-weight: 600; }
.mine-head .mh-id { font-size: 13px; color: #cfcfd4; margin-top: 5px; }
.mine-head .mh-right { margin-left: auto; text-align: right; }
.mine-head .mh-right .n { font-size: 14px; color: #e8e8e8; }
.mine-head .mh-right .t { font-size: 12px; color: #cfcfd4; margin-top: 5px; }
.mine-links { display: flex; text-align: center; padding: 20px 0 18px; }
.mine-links .ml {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 8px;
  color: #e8e8e8; font-size: 14px;
}
.mine-links .ml svg { display: block; }

.grid-4 { display: flex; flex-wrap: wrap; background: #fff; }
.grid-4 .g4 {
  width: 25%; display: flex; flex-direction: column; align-items: center; gap: 8px;
  padding: 18px 0 16px; font-size: 13px; color: var(--ink);
  border-bottom: 1px solid var(--line);
}
.grid-4 .g4:nth-child(4n) { border-right: none; }
.grid-4 .g4:not(:nth-child(4n)) { border-right: 1px solid var(--line); }
.grid-4 .g4:active { background: #fafafa; }
.grid-4 .g4 svg { color: #555; display: block; }

/* ----- 数据统计 ----- */
.stats-top {
  background: #fff; display: flex; align-items: center; gap: 14px; padding: 16px;
}
.stats-top .st-t1 { font-size: 16px; font-weight: 700; }
.stats-top .st-t2 { font-size: 13px; color: var(--sub); margin-top: 4px; }
.stats-top .month-box {
  margin-left: auto; width: 92px; border: 1px solid #e0e0e0; border-radius: 8px;
  text-align: center; padding: 10px 0 8px;
}
.stats-top .month-box .m1 { font-size: 26px; color: var(--teal); font-weight: 700; line-height: 1; }
.stats-top .month-box .m1 span { font-size: 13px; color: var(--ink); font-weight: 400; }
.stats-top .month-box .m2 { font-size: 13px; color: #555; margin-top: 4px; }
.stats-3 { display: flex; background: #fff; padding: 14px 16px 18px; }
.stats-3 .s3 { flex: 1; }
.stats-3 .s3 .n { font-size: 22px; color: #bbb; font-weight: 500; }
.stats-3 .s3 .n.on { color: var(--teal); }
.stats-3 .s3 .t { font-size: 13px; color: var(--sub); margin-top: 6px; }
.income-row {
  background: #fff; display: flex; align-items: flex-end; padding: 18px 16px 12px;
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.income-row .i1 { font-size: 22px; color: var(--teal); width: 90px; }
.income-row .i2 { flex: 1; text-align: center; font-size: 17px; color: #bbb; }
.income-row .i3 { width: 90px; text-align: right; color: var(--teal); font-size: 13px; }
.income-cap { background: #fff; padding: 0 16px 14px; font-size: 13px; color: var(--ink); border-bottom: 1px solid var(--line); }
.stats-detail-h { background: #fff; padding: 16px 16px 4px; }
.stats-detail-h .h1 { font-size: 16px; font-weight: 700; }
.stats-detail-h .h2 { font-size: 13px; color: var(--sub); margin-top: 6px; }
.stats-stu {
  background: #fff; display: flex; align-items: center; gap: 12px; padding: 14px 16px;
}
.stats-stu .s-name { font-size: 15px; font-weight: 600; }
.stats-stu .s-tel { font-size: 12px; color: var(--sub); margin-top: 3px; }
.stats-stu .s-right { margin-left: auto; font-size: 14px; color: var(--ink); line-height: 1.7; }
.stats-stu .s-right b { color: var(--teal); font-weight: 600; }

/* ----- 排课周视图 ----- */
.week-strip {
  display: flex; background: var(--navbg); color: #e8e8e8; flex-shrink: 0;
  padding-bottom: 4px;
}
.week-strip .ws-ym {
  width: 46px; flex-shrink: 0; text-align: center; color: var(--orange);
  font-size: 12px; line-height: 1.4; padding-top: 4px; cursor: pointer;
}
.week-strip .ws-d {
  flex: 1; text-align: center; padding-top: 2px; cursor: pointer;
}
.week-strip .ws-d .d {
  width: 26px; height: 26px; margin: 0 auto; border-radius: 50%;
  display: flex; align-items: center; justify-content: center; font-size: 14px;
}
.week-strip .ws-d .w { font-size: 11px; color: #9a9aa0; margin-top: 3px; }
.week-strip .ws-d.on .d { background: var(--teal); color: #fff; font-weight: 600; }
.week-strip .ws-d.on .w { color: #fff; }
.week-strip .ws-d.sel .d { background: #b9b9bd; color: #fff; }

.week-grid { position: relative; display: flex; background: #fff; min-height: 100%; }
.wg-times { width: 46px; flex-shrink: 0; }
.wg-times .t {
  height: 50px; font-size: 11px; color: #999; text-align: right;
  padding: 0 6px 0 0; transform: translateY(-6px); cursor: pointer;
}
.wg-times .t.hour-major { color: #5e969a; font-weight: 600; }
.wg-cols { flex: 1; display: flex; position: relative; }
.wg-col { flex: 1; border-left: 1px solid #e2e2e2; position: relative; }
.wg-col.alt { background: var(--teal-soft); }
.wg-col .h-line { height: 50px; border-bottom: 1px solid #e2e2e2; }
.wg-col .h-line.hour-alt { background: rgba(39, 176, 186, 0.035); }
.wg-col .h-line.hour-major { border-bottom-color: #cde1e2; box-shadow: inset 0 1px 0 rgba(39, 176, 186, 0.12); }
.wg-block {
  position: absolute; left: 2px; right: 2px; border-radius: 8px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  color: #fff; font-size: 12px; gap: 2px; overflow: hidden; cursor: pointer;
}
.wg-block.teal { background: #37b6c0; }
.wg-block.orange { background: var(--orange-block); }
.wg-block.green { background: #8bc34a; }
.wg-block .bi { display: flex; }

/* ----- 底部弹层（日历 / 月份选择） ----- */
.sheet-mask {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40;
  display: flex; flex-direction: column; justify-content: flex-end;
  animation: fadeIn 0.15s ease;
}
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.sheet {
  background: #fff; border-radius: 0; animation: slideUp 0.18s ease;
  padding-bottom: 20px;
}
@keyframes slideUp { from { transform: translateY(30px); opacity: 0.6; } to { transform: none; opacity: 1; } }
.sheet-bar {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; font-size: 15px; color: var(--ink);
}
.sheet-bar .ok { color: var(--ink); font-weight: 500; }

/* 日历 */
.cal-head { display: flex; align-items: center; justify-content: center; gap: 24px; padding: 4px 16px 10px; }
.cal-head .ch-t { font-size: 16px; font-weight: 600; }
.cal-head .ch-nav { color: #666; display: flex; padding: 4px 8px; }
.cal-head .ch-today {
  margin-left: auto; font-size: 12px; color: #666;
  border: 1px solid #ddd; border-radius: 12px; padding: 3px 10px;
}
.cal-week { display: flex; padding: 6px 10px; }
.cal-week span { flex: 1; text-align: center; font-size: 13px; color: #999; padding: 6px 0; }
.cal-grid { display: flex; flex-wrap: wrap; padding: 0 10px; }
.cal-d {
  width: 14.2857%; text-align: center; padding: 5px 0 4px; border-radius: 6px;
}
.cal-d .cd1 { font-size: 15px; color: var(--ink); }
.cal-d .cd2 { font-size: 10px; color: #aaa; margin-top: 1px; }
.cal-d.out .cd1, .cal-d.out .cd2 { color: #c8c8c8; }
.cal-d.today { background: #4a90d9; }
.cal-d.today .cd1, .cal-d.today .cd2 { color: #fff; }
.cal-d.sel:not(.today) { background: var(--teal-soft); }
.cal-d.sel:not(.today) .cd1 { color: var(--teal); font-weight: 600; }

/* 月份滚轮 */
.wheel { display: flex; padding: 10px 40px 16px; position: relative; }
.wheel::before {
  content: ''; position: absolute; left: 30px; right: 30px; top: 50%; height: 40px;
  transform: translateY(-50%); border-top: 1px solid #eee; border-bottom: 1px solid #eee;
  pointer-events: none;
}
.wheel .wc { flex: 1; text-align: center; }
.wheel .wc.wheel-col { max-height: 200px; overflow-y: auto; scrollbar-width: none; }
.wheel .wc.wheel-col::-webkit-scrollbar { display: none; }
.wheel-cap { display: flex; padding: 2px 40px 0; }
.wheel-cap span { flex: 1; text-align: center; font-size: 12px; color: var(--sub); }
.wheel .wc .wi { height: 40px; display: flex; align-items: center; justify-content: center; font-size: 16px; color: #c5c5c5; }
.wheel .wc .wi.cur { color: var(--ink); font-size: 18px; font-weight: 600; }
.wheel .wc .wi.near { color: #8a8a8a; }
.wheel .wc .wi.bu { color: #d2d2d2; }
.wheel .wc .wi.bu .bu-tip { margin-left: 8px; font-size: 12px; color: #e9a3a3; }
.wheel .wc .wi-sp { height: 80px; }
.sheet-btns { display: flex; gap: 14px; padding: 4px 24px 6px; }
.sheet-btns .sb-cancel {
  flex: 1; padding: 11px 0; text-align: center; background: #f2f2f2;
  border-radius: 8px; font-size: 16px; color: var(--ink);
}
.sheet-btns .sb-ok {
  flex: 1; padding: 11px 0; text-align: center; background: var(--green);
  border-radius: 8px; font-size: 16px; color: #fff;
}

/* ----- 居中模态框 ----- */
.modal-mask {
  position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 40;
  display: flex; align-items: center; justify-content: center; animation: fadeIn 0.15s ease;
}
.modal {
  width: 300px; background: #fff; border-radius: 12px; overflow: hidden;
  animation: slideUp 0.18s ease;
}
.modal .m-title { text-align: center; font-size: 17px; font-weight: 600; padding: 24px 16px 10px; }
.modal .m-body { text-align: center; font-size: 15px; color: var(--ink); padding: 0 16px 22px; }
.modal .m-btns { display: flex; border-top: 1px solid var(--line); }
.modal .m-btns button {
  flex: 1; padding: 13px 0; font-size: 16px; color: var(--ink); background: #fff;
}
.modal .m-btns button + button { border-left: 1px solid var(--line); }
.modal .m-btns button.link { color: var(--link); }
.modal .m-btns button:active { background: #f5f5f5; }

/* ----- 表单注释 ----- */
.form-note { padding: 20px 16px; font-size: 13px; color: #4aa8b8; line-height: 1.7; }

/* ----- 个人信息表单 ----- */
.pf-row {
  background: #fff; display: flex; align-items: center; gap: 10px;
  padding: 14px 16px; border-bottom: 1px solid var(--line); font-size: 14px;
}
.pf-row .pf-label { color: var(--ink); white-space: nowrap; }
.pf-row .pf-val { margin-left: auto; color: #555; display: flex; align-items: center; gap: 6px; }
.pf-row .pf-val.green { color: var(--green); }
.pf-row .pf-arrow { color: #c8c8cc; display: flex; }
.pf-row.column { flex-direction: column; align-items: stretch; gap: 10px; }
.pf-row .pf-cap { font-size: 12px; color: var(--sub); }
.pf-gap { height: 8px; background: var(--pagebg); }

.tag-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.tag-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--green);
  border: 1px solid var(--green); border-radius: 4px; padding: 3px 8px; background: #fff;
}
.tag-chip .tx { display: flex; }
.tag-chip.add { border-style: dashed; }

.radio {
  width: 18px; height: 18px; border-radius: 50%; border: 1px solid #cfcfcf;
  display: inline-flex; align-items: center; justify-content: center; background: #fff;
}
.radio.on { border-color: var(--green); background: var(--green); color: #fff; }
.radio-opt { display: inline-flex; align-items: center; gap: 5px; margin-left: 14px; color: #555; }

.pf-textarea {
  width: 100%; min-height: 64px; border: none; outline: none; resize: none;
  font-family: inherit; font-size: 14px; color: var(--ink); background: transparent; line-height: 1.6;
}
.pf-count { text-align: right; font-size: 12px; color: var(--sub); }

.store-list { display: flex; flex-direction: column; gap: 10px; }
.store-item { display: flex; align-items: center; gap: 8px; color: #555; font-size: 13px; }

.time-range { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.time-range input {
  width: 64px; padding: 6px 0; text-align: center; border: 1px solid #e0e0e0;
  border-radius: 4px; font-size: 13px; font-family: inherit; outline: none; color: #555;
}
.pf-input-sm {
  width: 90px; padding: 6px 8px; border: 1px solid #e0e0e0; border-radius: 4px;
  font-size: 13px; font-family: inherit; outline: none; color: #555; text-align: center;
}

.album { display: flex; flex-wrap: wrap; gap: 10px; }
.album .ph {
  width: 96px; height: 96px; border-radius: 6px; position: relative;
  background: linear-gradient(160deg, #d7dee2, #b9c4ca);
  display: flex; align-items: center; justify-content: center; color: #fff;
}
.album .ph .px {
  position: absolute; top: -6px; right: -6px; width: 20px; height: 20px; border-radius: 50%;
  background: rgba(0, 0, 0, 0.55); color: #fff; font-size: 12px;
  display: flex; align-items: center; justify-content: center;
}
.album .ph-add {
  width: 96px; height: 96px; border-radius: 6px; border: 1px dashed #d0d0d0;
  background: #fafafa; display: flex; align-items: center; justify-content: center;
  color: #c5c5c5; font-size: 26px;
}

/* ----- 屏幕内 toast ----- */
.toast-wrap {
  position: absolute; top: 100px; left: 0; right: 0; z-index: 80;
  display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none;
}
.toast {
  max-width: 300px; padding: 10px 16px; border-radius: 8px;
  background: rgba(0, 0, 0, 0.72); color: #fff; font-size: 13px; line-height: 1.5;
  animation: toastIn 0.18s ease; text-align: center;
}
@keyframes toastIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: none; } }

/* ==================== 手机适配（真机 / 窄窗口） ==================== */
/* 放在文件末尾，确保覆盖上方所有基础规则；≤768px 时去掉手机壳、全屏铺满 */
@media (max-width: 768px) {
  .canvas { height: 100vh; height: 100dvh; }
  .stage { gap: 0; background: #fff; }
  .phone {
    width: 100vw; height: 100vh; height: 100dvh;
    padding: 0; border-radius: 0;
    background: transparent; box-shadow: none; transform: none;
  }
  .screen { width: 100vw; height: 100vh; height: 100dvh; border-radius: 0; }
  .statusbar { display: none; }
}