:root{
  --ink:#1F2A44; --ink2:#2C3A5C; --gold:#B8924A; --gold-soft:#F3ECDD;
  --bg:#F5F3EE; --card:#FFFFFF; --muted:#8A8FA3; --line:#ECE7DD; --ok:#2E9E6B; --warn:#C0584B;
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
body{margin:0;font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
.app{max-width:480px;margin:0 auto;min-height:100vh;background:var(--bg);padding-bottom:40px}
/* 顶部 */
.topbar{background:linear-gradient(135deg,var(--ink),var(--ink2));color:#fff;padding:22px 20px 10px}
.topbar h1{margin:0;font-size:21px;letter-spacing:1px}
.topbar .slogan{margin-top:4px;font-size:13px;color:var(--gold-soft);opacity:.9}
/* v1.5.6 顶栏版本号标识（紧贴副标题下方，金色淡显、不抢戏） */
.topbar .ver-tag{margin-top:6px;font-size:11px;color:var(--gold-soft);opacity:.55;letter-spacing:.5px;font-family:monospace}
/* 公告 / 滚屏 */
.notice{margin:8px 14px 14px;padding:12px 14px;background:var(--gold-soft);border-left:4px solid var(--gold);
  border-radius:10px;font-size:13px;color:#6b5836}
.marquee{overflow:hidden;background:linear-gradient(135deg,var(--ink),var(--ink2));color:var(--gold-soft);
  white-space:nowrap;font-size:13px;padding:9px 0}
.marquee-track{display:inline-block;white-space:nowrap;animation:mq 18s linear infinite}
.marquee-track span{padding:0 28px;display:inline-block}
@keyframes mq{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media (prefers-reduced-motion:reduce){.marquee-track{animation:none}}
/* 未勾选滚动公告时的静态公告横条（紧贴 topbar 下方，兼容微信等无法播放滚屏的环境） */
.notice-bar{background:linear-gradient(135deg,var(--ink),var(--ink2));color:var(--gold-soft);
  font-size:13px;padding:10px 14px;margin:0;text-align:center;line-height:1.6;
  word-break:break-word}
/* 弹窗 */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.45);display:flex;align-items:center;justify-content:center;z-index:60;padding:24px}
.modal{background:#fff;border-radius:14px;padding:22px;width:100%;max-width:340px}
.modal .ttl{margin:0 0 12px;font-size:16px}
/* 门店信息 */
#shopInfo p{margin:0}
#shopInfo div{line-height:1.6}
/* 卡片块 */
.block{margin:14px;background:var(--card);border-radius:14px;padding:16px;box-shadow:0 2px 10px rgba(31,42,68,.05)}
.block h2{margin:0 0 12px;font-size:16px;display:flex;align-items:center;gap:8px}
.block h2::before{content:"";width:4px;height:16px;background:var(--gold);border-radius:2px}
/* 选项 */
.opt{display:flex;flex-wrap:wrap;gap:10px}
.chip{padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;
  font-size:14px;transition:.15s;user-select:none}
.chip:active{transform:scale(.97)}
.chip.on{border-color:var(--gold);background:var(--gold-soft);color:var(--ink);font-weight:600}
.chip.dis{opacity:.4;cursor:not-allowed}
.chip small{display:block;color:var(--muted);font-size:11px;font-weight:400}
/* 表单 */
.field{margin-bottom:12px}
.field label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}
.field input{width:100%;padding:12px;border:1.5px solid var(--line);border-radius:10px;font-size:15px;outline:none}
.field input:focus{border-color:var(--gold)}
/* 按钮 */
.btn{width:100%;padding:14px;border:none;border-radius:12px;background:linear-gradient(135deg,var(--gold),#a87f38);
  color:#fff;font-size:16px;font-weight:600;cursor:pointer;letter-spacing:1px}
.btn:active{opacity:.9}
.btn.ghost{background:#fff;color:var(--ink);border:1.5px solid var(--line)}
.hint{font-size:12px;color:var(--muted);margin-top:8px;text-align:center}
/* 预约记录 */
.rec{display:flex;justify-content:space-between;align-items:center;padding:12px 0;border-bottom:1px solid var(--line)}
.rec:last-child{border-bottom:none}
.rec .info b{font-size:14px}
.rec .info span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.tag{font-size:11px;padding:3px 8px;border-radius:20px}
.tag.pending{background:#FFF3D6;color:#9a6b00}
.tag.completed{background:#E3F4EA;color:var(--ok)}
.tag.cancelled{background:#FBE7E4;color:var(--warn)}
.tag.noshow{background:#EDE7F6;color:#6A4FA3}
.tag.arrived{background:#E0F0FB;color:#2C7FB8}
.section-title{margin:22px 14px 0;font-size:14px;color:var(--muted)}
.empty{text-align:center;color:var(--muted);padding:24px;font-size:13px}
/* 登录卡片 */
.login-card{margin:18px;background:var(--card);border-radius:16px;padding:22px;box-shadow:0 4px 18px rgba(31,42,68,.08)}
.login-card h2{margin:0 0 16px;font-size:18px}
.login-card .hint{text-align:left;margin-top:12px}
/* 成员信息条 */
.member-bar{display:flex;align-items:center;justify-content:space-between;margin:14px;padding:12px 16px;
  background:linear-gradient(135deg,var(--ink),var(--ink2));color:#fff;border-radius:12px;font-size:14px}
.member-bar b{color:var(--gold-soft)}
.member-bar .btn.ghost{background:transparent;color:#fff;border:1px solid rgba(255,255,255,.4);width:52px;height:44px;padding:0;font-size:13px;display:inline-flex;align-items:center;justify-content:center;text-align:center;line-height:1.25;box-sizing:border-box}
.member-bar .btn.ghost + .btn.ghost{margin-left:8px}
.mb-greeting,.mb-name-line,.mb-count-line,.mb-sep{display:inline}
.pwd-br{display:none}
@media (max-width:480px){
  .member-bar{align-items:flex-start}
  .mb-greeting{display:block;flex:1}
  .mb-name-line{display:block}
  .mb-sep{display:none}
  .mb-count-line{display:block;margin-top:2px}
  .pwd-br{display:block}
}
/* 确认信息 */
.confirm{background:var(--bg);border-radius:12px;padding:12px 14px;margin-bottom:14px}
.confirm .row{display:flex;justify-content:space-between;font-size:15px;padding:6px 0}
.confirm .row span{color:var(--muted)}
.toast{position:fixed;left:50%;top:40%;transform:translate(-50%,-50%);background:rgba(31,42,68,.92);color:#fff;
  padding:12px 20px;border-radius:10px;font-size:14px;z-index:99;display:none;max-width:80%;text-align:center}

/* ============ F2「我的预约」列表优化 ============ */
.up-empty{text-align:center;color:var(--muted);padding:18px;font-size:13px}
/* 即将到来：金竖条大卡（全页唯一金色实心标签） */
.upcoming-card{border:1.5px solid var(--line);border-left:4px solid var(--gold);border-radius:12px;
  padding:12px 14px;margin-bottom:10px;background:#fff}
.upcoming-card .uc-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.upcoming-card .uc-main b{font-size:14px;line-height:1.4}
.upcoming-card .uc-main span{display:block;font-size:12px;color:var(--muted);margin-top:3px}
.upcoming-card .uc-foot{display:flex;justify-content:space-between;align-items:center;
  margin-top:10px;padding-top:10px;border-top:1px solid var(--line)}
.upcoming-card .uc-user{font-size:13px;color:var(--muted)}
.cancel-btn{background:#fff;color:#a87f38;border:1px solid #E2C9A6;border-radius:8px;
  padding:6px 12px;font-size:13px;cursor:pointer}
.cancel-btn:active{background:var(--gold-soft)}
/* 历史记录：折叠 + 紧凑行（三级视觉权重中弱于即将到来） */
.history-box{margin-top:14px;padding-top:10px;border-top:1px dashed var(--line)}
.history-head{display:flex;justify-content:space-between;align-items:center;cursor:pointer;
  font-size:14px;color:var(--ink);padding:8px 2px}
.history-head .chev{color:var(--muted);font-size:12px;transition:transform .15s}
.history-row{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;
  border-bottom:1px solid var(--line)}
.history-row:last-child{border-bottom:none}
.history-row .hr-info b{font-size:13px}
.history-row .hr-info span{display:block;font-size:12px;color:var(--muted);margin-top:2px}
.history-row.is-cancelled{opacity:.45}            /* 已取消：整行淡化，最弱 */
.load-more{text-align:center;color:var(--gold);font-size:13px;padding:12px;cursor:pointer}
.load-more:active{opacity:.7}

/* ================= v1.3.0 ================= */
/* H1：已过时段更弱化（与"已满"区分：已过是灰、已满是淡） */
.chip.past{opacity:.28;text-decoration:line-through;text-decoration-color:var(--muted)}
.chip.past small{text-decoration:none}
/* 当日无可约时段的整段提示 */
.slot-tip{width:100%;font-size:12px;color:var(--muted);line-height:1.6;padding:6px 2px 0}
/* G7 备注（即将到来卡内） */
.upcoming-card .uc-remark{margin-top:8px;font-size:12px;color:#6b5836;background:var(--gold-soft);
  border-radius:8px;padding:6px 9px;line-height:1.6;word-break:break-word}
/* v1.5.51：用户端标签徽章 */
.uc-tags{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.uc-tag{font-size:12px;padding:2px 8px;border-radius:7px;font-weight:700;display:inline-flex;align-items:center;gap:3px;letter-spacing:.3px}
/* 即将到来卡的操作按钮组 */
.upcoming-card .uc-acts{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
.mini-btn{background:#fff;color:var(--ink2);border:1px solid var(--line);border-radius:8px;
  padding:5px 11px;font-size:12px;cursor:pointer;line-height:1.4}
.mini-btn:active{background:#F2F1EE}
.mini-btn.re-btn{color:#a87f38;border-color:#E2C9A6}
/* G3 改约弹窗 */
.re-modal{max-width:400px;max-height:82vh;overflow-y:auto;-webkit-overflow-scrolling:touch}
.re-cur{font-size:12px;color:var(--muted);background:#F7F5F0;border-radius:8px;padding:8px 10px;line-height:1.6}
.re-sec{font-size:13px;font-weight:600;margin:14px 0 8px;color:var(--ink)}
.opt.sm{gap:8px}
.opt.sm .chip{padding:7px 11px;font-size:13px;border-radius:10px}
.opt.sm .chip small{font-size:10px}
.re-btns{display:flex;gap:10px;margin-top:18px}
.re-btns .btn{flex:1;margin:0}

/* ================= v1.5.45 前端 H5 大字版（年纪大同事友好） ================= */
/* 顶栏标题与切换按钮布局 */
.tb-row{display:flex;align-items:flex-start;justify-content:space-between;gap:10px}
.tb-titles{min-width:0;flex:1}
.font-toggle{flex:0 0 auto;align-self:flex-start;background:rgba(255,255,255,.14);color:#fff;
  border:1.5px solid rgba(255,255,255,.45);border-radius:999px;padding:9px 16px;font-size:15px;
  cursor:pointer;white-space:nowrap;line-height:1.2;margin-top:2px}
.font-toggle:active{background:rgba(255,255,255,.25)}
.font-toggle.on{background:var(--gold-soft);color:var(--ink);border-color:var(--gold-soft);font-weight:600}
/* 大字版：整体放大字号、加大按钮与点击区，不改变布局结构（v1.5.46 再次放大） */
body.big-font{font-size:21px}
body.big-font .topbar h1{font-size:29px}
body.big-font .topbar .slogan{font-size:17px}
body.big-font .block h2{font-size:22px}
body.big-font .block h2::before{height:22px}
body.big-font .chip{font-size:20px;padding:15px 18px}
body.big-font .opt.sm .chip{padding:12px 16px;font-size:17px}
body.big-font .opt.sm .chip small{font-size:13px}
body.big-font .btn{font-size:22px;padding:19px}
body.big-font .btn.ghost{font-size:19px}
body.big-font .field label{font-size:17px}
body.big-font .field input{font-size:21px;padding:16px}
body.big-font .hint{font-size:16px}
body.big-font .rec .info b{font-size:20px}
body.big-font .rec .info span{font-size:16px}
body.big-font .tag{font-size:15px;padding:5px 12px}
body.big-font .upcoming-card .uc-main b{font-size:19px}
body.big-font .upcoming-card .uc-main span{font-size:16px}
body.big-font .upcoming-card .uc-user{font-size:17px}
body.big-font .history-head{font-size:18px}
body.big-font .history-row .hr-info b{font-size:19px}
body.big-font .history-row .hr-info span{font-size:16px}
body.big-font .member-bar{font-size:19px}
body.big-font .member-bar .btn.ghost{width:70px;height:56px;font-size:16px}
body.big-font .modal .ttl{font-size:22px}
body.big-font .confirm .row{font-size:21px}
body.big-font .cancel-btn{font-size:17px;padding:9px 16px}
body.big-font .mini-btn{font-size:16px;padding:8px 15px}
body.big-font .notice,body.big-font .notice-bar,body.big-font .marquee{font-size:17px}
body.big-font .toast{font-size:18px}
body.big-font .login-card h2{font-size:24px}
body.big-font .re-cur{font-size:16px}
body.big-font .re-sec{font-size:17px}