/* ==========================================================================
   中医馆患者端 H5 · 样式
   设计口径（改样式前先读）：
     · 按 375px 宽设计，字号偏大（正文 15px），一格一卡、圆角 + 大留白。
     · 颜色只有四个来源：墨绿主色 / 米色底 / 暖棕点缀 / 状态色（橙蓝绿灰）。
       不在页面上堆渐变，避免「不像中医馆」。
     · 所有组件都是「壳」：类名固定，页面只拼 HTML，不写行内样式。
   ========================================================================== */

:root{
  --brand:#1f7a5c;
  --brand-d:#14523d;
  --brand-l:#e7f2ed;
  --brand-l2:#f2f8f5;
  --brown:#9c6b3f;
  --brown-l:#f7f0e7;
  /* 近白底 + 极淡描边：参考图那种「白底近乎无卡片」的观感。
     以前是米色 #f6f4ef + 暖灰描边，卡片边界很明显，页面看着更"碎"。 */
  --bg:#f5f6f7;
  --card:#ffffff;
  --line:#e9ebee;
  --ink:#2b2a26;
  --ink-2:#6d6a60;
  --ink-3:#a39f93;
  --orange:#c8811f;
  --orange-l:#fdf4e5;
  --blue:#2f6fb0;
  --blue-l:#eaf2fa;
  --green:#1f7a5c;
  --green-l:#e7f2ed;
  --gray:#8c887d;
  --gray-l:#f1f2f3;
  --danger:#c0472f;
  /* 圆角与阴影都往「轻」里调：16px 圆角 + 投影会显得浮、也显碎 */
  --radius:12px;
  --radius-s:8px;
  --shadow:0 1px 4px rgba(0,0,0,.04);
  --tab-h:56px;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  background:var(--bg);
  color:var(--ink);
  font:15px/1.55 -apple-system,BlinkMacSystemFont,"PingFang SC","Hiragino Sans GB","Microsoft YaHei",sans-serif;
  -webkit-font-smoothing:antialiased;
  overscroll-behavior-y:none;
}
a{color:var(--brand);text-decoration:none}
button{font:inherit;color:inherit}
img{max-width:100%;display:block}
input,textarea,select{font:inherit;color:inherit}
/* 手机上点按钮会有灰蓝色高亮，很难看，统一去掉 */
*{-webkit-tap-highlight-color:transparent}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* 整个 App 收在一个 480px 的列里：手机上是全屏，桌面浏览器打开也不至于拉成一条 */
#app{
  max-width:480px;margin:0 auto;min-height:100vh;min-height:100dvh;
  display:flex;flex-direction:column;background:var(--bg);
  position:relative;
}
#view{flex:1;display:flex;flex-direction:column;min-height:0}
.page{flex:1;padding-bottom:20px}
/* 有底部 tab 的页面要给它让位，否则最后一屏内容被压住 */
.page.has-tabbar{padding-bottom:calc(var(--tab-h) + 14px + env(safe-area-inset-bottom))}
/* 有吸底操作条的页面同理 */
.page.has-actionbar{padding-bottom:calc(72px + env(safe-area-inset-bottom))}

/* ------------------------------ 顶部栏 ------------------------------ */
.appbar{
  position:sticky;top:0;z-index:20;
  display:flex;align-items:center;gap:8px;
  padding:calc(8px + env(safe-area-inset-top)) 12px 8px;
  background:rgba(246,244,239,.92);backdrop-filter:blur(8px);
  border-bottom:1px solid transparent;
}
.appbar.bordered{border-bottom-color:var(--line)}
.appbar .ab-title{flex:1;text-align:center;font-size:17px;font-weight:600}
.appbar .ab-back,.appbar .ab-slot{
  width:34px;height:34px;flex:0 0 34px;display:flex;align-items:center;justify-content:center;
  border:0;background:transparent;border-radius:50%;font-size:18px;color:var(--ink);
}
.appbar .ab-back:active{background:var(--gray-l)}
.appbar .ab-slot{font-size:14px;color:var(--brand);width:auto;flex:0 0 auto;padding:0 4px}
/* 首页不要顶部标题条（馆名在下面的卡片里），收起来但保留安全区 */
.appbar.appbar--hidden{display:none}
.page.no-appbar{padding-top:calc(env(safe-area-inset-top) + 10px)}

/* ------------------------------ 底部 tab ------------------------------ */
.tabbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;
  max-width:480px;margin:0 auto;
  display:flex;
  padding-bottom:env(safe-area-inset-bottom);
  background:rgba(255,255,255,.96);backdrop-filter:blur(10px);
  border-top:1px solid var(--line);
}
.tabbar a{
  flex:1;height:var(--tab-h);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;
  color:var(--ink-2);font-size:11px;position:relative;
}
.tabbar a .ic{font-size:22px;line-height:1}
.tabbar a.active{color:var(--brand);font-weight:600}
.tabbar .badge-float{position:absolute;top:6px;left:calc(50% + 5px)}

/* ------------------------------ 卡片与栅格 ------------------------------ */
.card{
  background:var(--card);border-radius:var(--radius);border:1px solid var(--line);
  padding:14px;margin:12px 12px 0;box-shadow:var(--shadow);
}
.card.tight{padding:0;overflow:hidden}
.card.flat{box-shadow:none}
.card-hd{display:flex;align-items:center;gap:8px;padding:12px 14px;border-bottom:1px solid var(--line)}
.card-hd h3{margin:0;font-size:15px;font-weight:600}
.card-hd .more{margin-left:auto;font-size:13px;color:var(--brand)}
.sec-title{display:flex;align-items:center;gap:8px;margin:20px 14px 9px;font-size:16px;font-weight:600}
.sec-title .more{margin-left:auto;font-size:13px;font-weight:400;color:var(--ink-2)}
.sec-title::before{content:"";width:4px;height:15px;border-radius:2px;background:var(--brand)}
.muted{color:var(--ink-2)}
.small{font-size:13px}
.tiny{font-size:12px}
.center{text-align:center}
.strong{font-weight:600}
.mono{font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace}
.row{display:flex;align-items:center;gap:10px}
.row.wrap{flex-wrap:wrap}
.spacer{flex:1}
.mt0{margin-top:0}.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}
.hr{height:1px;background:var(--line);margin:12px 0}
.gap6{gap:6px}

/* 横向滚动条：科室 / 分类筛选，隐藏滚动条保持干净 */
.scroll-x{
  display:flex;gap:8px;overflow-x:auto;padding:2px 12px 2px;
  scrollbar-width:none;-ms-overflow-style:none;
}
.scroll-x::-webkit-scrollbar{display:none}
.chip{
  flex:0 0 auto;padding:7px 14px;border-radius:999px;border:1px solid var(--line);
  background:#fff;color:var(--ink-2);font-size:14px;white-space:nowrap;
}
.chip.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:600}

/* ------------------------------ 按钮 ------------------------------ */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  height:46px;padding:0 18px;border:0;border-radius:12px;
  background:var(--brand);color:#fff;font-size:16px;font-weight:600;
  transition:opacity .15s,transform .05s;
}
.btn:active{transform:scale(.99)}
.btn.block{display:flex;width:100%}
.btn.sm{height:34px;padding:0 14px;font-size:13px;border-radius:9px;font-weight:500}
.btn.ghost{background:#fff;color:var(--ink);border:1px solid var(--line)}
.btn.ghost-brand{background:#fff;color:var(--brand);border:1px solid var(--brand)}
.btn.warm{background:var(--brown)}
.btn.danger{background:#fff;color:var(--danger);border:1px solid #e8ccc5}
.btn[disabled],.btn.is-loading{opacity:.55;pointer-events:none}
.btn .spin{width:15px;height:15px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite}
.btn.ghost .spin,.btn.ghost-brand .spin{border-color:rgba(31,122,92,.3);border-top-color:var(--brand)}
.btn-row{display:flex;gap:10px;margin:16px 12px 0}
.btn-row .btn{flex:1}

/* 吸底操作条 */
.actionbar{
  position:fixed;left:0;right:0;bottom:0;z-index:30;max-width:480px;margin:0 auto;
  display:flex;align-items:center;gap:10px;
  padding:10px 14px calc(10px + env(safe-area-inset-bottom));
  background:rgba(255,255,255,.97);backdrop-filter:blur(10px);border-top:1px solid var(--line);
}
.actionbar .ab-price{font-size:13px;color:var(--ink-2)}
.actionbar .ab-price b{display:block;font-size:19px;color:var(--danger)}
.actionbar .btn{flex:1}

/* ------------------------------ 表单 ------------------------------ */
.field{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.field:last-child{border-bottom:0}
.field label{flex:0 0 76px;color:var(--ink-2);font-size:14px}
.field input,.field select,.field textarea{
  flex:1;min-width:0;border:0;background:transparent;padding:2px 0;font-size:16px;outline:none;
}
.field textarea{min-height:56px;resize:none;line-height:1.5}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-3)}
.field .hint{font-size:12px;color:var(--ink-3)}
.seg{display:flex;gap:8px;flex:1}
.seg button{
  flex:1;height:36px;border-radius:9px;border:1px solid var(--line);background:#fff;
  color:var(--ink-2);font-size:14px;
}
.seg button.on{background:var(--brand-l);border-color:var(--brand);color:var(--brand-d);font-weight:600}
.field.err{border-bottom-color:var(--danger)}
.field .err-msg{color:var(--danger);font-size:12px;flex:0 0 auto}

/* ------------------------------ 医师卡片 ------------------------------ */
.doc-card{display:flex;gap:12px;padding:14px;border-bottom:1px solid var(--line)}
.doc-card:last-child{border-bottom:0}
.doc-card:active{background:#faf9f5}
.avatar{
  flex:0 0 56px;width:56px;height:56px;border-radius:14px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
  color:#fff;font-size:22px;font-weight:600;background:var(--brand);
}
.avatar img{width:100%;height:100%;object-fit:cover}
.avatar.lg{flex:0 0 68px;width:68px;height:68px;border-radius:18px;font-size:26px}
.avatar.sm{flex:0 0 40px;width:40px;height:40px;border-radius:11px;font-size:16px}
.doc-main{flex:1;min-width:0}
.doc-name{display:flex;align-items:center;gap:8px;font-size:16px;font-weight:600}
.doc-name .title{font-size:12px;color:var(--brown);background:var(--brown-l);border-radius:6px;padding:1px 6px;font-weight:500}
.doc-meta{font-size:12.5px;color:var(--ink-2);margin-top:3px}
.doc-spec{
  margin-top:6px;font-size:12.5px;color:var(--ink-2);
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.doc-foot{display:flex;align-items:flex-end;gap:10px;margin-top:8px}
.fee{color:var(--danger);font-weight:600}
.fee .num{font-size:17px}
.left-tag{font-size:12.5px;color:var(--brand)}
.left-tag.none{color:var(--ink-3)}

/* 号源胶囊 */
.pill{
  display:inline-flex;align-items:center;height:22px;padding:0 8px;border-radius:999px;
  font-size:12px;font-weight:500;background:var(--green-l);color:var(--green);
}
.pill.orange{background:var(--orange-l);color:var(--orange)}
.pill.blue{background:var(--blue-l);color:var(--blue)}
.pill.gray{background:var(--gray-l);color:var(--gray)}
.pill.brown{background:var(--brown-l);color:var(--brown)}
.pill.line{background:#fff;border:1px solid var(--line);color:var(--ink-2)}

/* ------------------------------ 状态徽标 ------------------------------ */
.st{display:inline-flex;align-items:center;height:24px;padding:0 9px;border-radius:8px;font-size:12.5px;font-weight:600}
.st.orange{background:var(--orange-l);color:var(--orange)}
.st.blue{background:var(--blue-l);color:var(--blue)}
.st.green{background:var(--green-l);color:var(--green)}
.st.gray{background:var(--gray-l);color:var(--gray)}
.st.brown{background:var(--brown-l);color:var(--brown)}

/* ------------------------------ 预约卡片 ------------------------------ */
.appt-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);margin:12px 12px 0;overflow:hidden;box-shadow:var(--shadow)}
.appt-hd{display:flex;align-items:center;gap:10px;padding:12px 14px;border-bottom:1px dashed var(--line)}
.appt-hd .nm{font-size:15.5px;font-weight:600}
.appt-hd .st{margin-left:auto}
.appt-bd{display:flex;gap:12px;padding:14px}
.appt-when{flex:0 0 96px;border-right:1px solid var(--line);padding-right:12px}
.appt-when .d{font-size:14px;font-weight:600}
.appt-when .t{font-size:19px;font-weight:700;color:var(--brand);margin-top:2px;font-variant-numeric:tabular-nums}
.appt-when .p{font-size:12px;color:var(--ink-2);margin-top:2px}
.appt-info{flex:1;min-width:0;font-size:13px;color:var(--ink-2)}
.appt-info .k{display:flex;gap:6px;margin-bottom:5px}
.appt-info .k span:first-child{color:var(--ink-3);flex:0 0 42px}
.appt-ft{display:flex;align-items:center;gap:10px;padding:10px 14px;border-top:1px solid var(--line);background:var(--brand-l2)}
.appt-ft .btn{margin-left:auto}
.appt-ft .btn + .btn{margin-left:0}

/* 核销码小块（列表里用） */
.code-box{
  display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--ink-2);
}
.code-box b{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:16px;letter-spacing:2px;color:var(--ink);
}

/* ------------------------------ 日期条与时段 ------------------------------ */
.datebar{
  display:flex;gap:8px;overflow-x:auto;padding:12px 12px;
  scrollbar-width:none;
}
.datebar::-webkit-scrollbar{display:none}
.date-cell{
  flex:0 0 62px;padding:8px 4px 7px;border-radius:12px;border:1px solid var(--line);
  background:#fff;text-align:center;color:var(--ink-2);
}
.date-cell .wd{font-size:12px}
.date-cell .dd{font-size:14px;font-weight:600;color:var(--ink);margin-top:1px}
.date-cell .lft{font-size:11px;margin-top:3px;color:var(--brand)}
.date-cell.on{background:var(--brand);border-color:var(--brand);color:#fff}
.date-cell.on .dd{color:#fff}
.date-cell.on .lft{color:rgba(255,255,255,.9)}
.date-cell.off{opacity:.45}
.date-cell.full .lft{color:var(--ink-3)}

.period{margin:14px 12px 0}
.period-hd{display:flex;align-items:center;gap:8px;font-size:14.5px;font-weight:600;margin-bottom:9px}
.period-hd .rng{font-size:12.5px;font-weight:400;color:var(--ink-2)}
.slot-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.slot{
  border:1px solid var(--line);background:#fff;border-radius:10px;padding:9px 2px;
  text-align:center;font-size:13.5px;color:var(--ink);font-variant-numeric:tabular-nums;
}
.slot .l{display:block;font-size:11px;color:var(--ink-3);margin-top:2px}
.slot.on{background:var(--brand);border-color:var(--brand);color:#fff}
.slot.on .l{color:rgba(255,255,255,.9)}
.slot.off,.slot[disabled]{background:var(--gray-l);color:var(--ink-3);border-color:var(--line);text-decoration:line-through}
.slot.off .l,.slot[disabled] .l{color:var(--ink-3);text-decoration:none}
.closed-box{
  margin:12px;padding:18px;border-radius:var(--radius);border:1px dashed var(--line);
  background:#fff;color:var(--ink-2);text-align:center;font-size:14px;
}

/* ------------------------------ 时间线 ------------------------------ */
.timeline{margin-top:6px}
.tl{display:flex;gap:12px;position:relative;padding-bottom:16px}
.tl:last-child{padding-bottom:0}
.tl::before{
  content:"";position:absolute;left:6px;top:16px;bottom:-2px;width:1px;background:var(--line);
}
.tl:last-child::before{display:none}
.tl .dot{
  flex:0 0 13px;width:13px;height:13px;border-radius:50%;margin-top:3px;
  background:#fff;border:2px solid var(--line);z-index:1;
}
.tl.done .dot{background:var(--brand);border-color:var(--brand)}
.tl.now .dot{background:#fff;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-l)}
.tl .tl-bd{flex:1;min-width:0}
.tl .tl-t{font-size:14.5px;font-weight:600}
.tl.wait .tl-t{color:var(--ink-3);font-weight:500}
.tl .tl-d{font-size:12.5px;color:var(--ink-3);margin-top:1px}

/* ------------------------------ 商品 ------------------------------ */
.goods-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;padding:12px}
.goods-card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.goods-card:active{transform:scale(.995)}
.goods-img{
  height:120px;display:flex;align-items:center;justify-content:center;font-size:46px;
  background:linear-gradient(180deg,#fbfaf6,#f3efe6);
}
.goods-img img{width:100%;height:100%;object-fit:cover}
.goods-bd{padding:9px 10px 11px}
.goods-nm{font-size:14px;font-weight:600;line-height:1.35;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;min-height:38px}
.goods-eff{font-size:12px;color:var(--ink-2);margin-top:4px;display:-webkit-box;-webkit-line-clamp:1;-webkit-box-orient:vertical;overflow:hidden}
.goods-pr{display:flex;align-items:baseline;gap:6px;margin-top:7px}
.goods-pr .now{color:var(--danger);font-weight:700}
.goods-pr .was{font-size:12px;color:var(--ink-3);text-decoration:line-through}
.goods-pr .sold{margin-left:auto;font-size:11.5px;color:var(--ink-3)}

.hero{
  height:230px;display:flex;align-items:center;justify-content:center;font-size:88px;
  background:linear-gradient(180deg,#fbfaf6,#f1ece1);
}
.hero img{width:100%;height:100%;object-fit:cover}
.spec-line{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--ink-2);margin-top:6px}
.spec-line .pill{background:var(--brand-l2);color:var(--brand-d)}

/* 详情四段：功效 / 适应人群 / 用法用量 / 注意事项 —— 产品卖点，排版要能一眼扫到 */
.info-sec{padding:13px 14px;border-bottom:1px solid var(--line)}
.info-sec:last-child{border-bottom:0}
.info-sec .hd{display:flex;align-items:center;gap:7px;font-size:14.5px;font-weight:600;margin-bottom:6px}
.info-sec .hd .ic{font-size:15px}
.info-sec .bd{font-size:14px;line-height:1.7;color:#4a473f;white-space:pre-wrap}
.info-sec.warn{background:#fdfbf6}
.info-sec.warn .bd{color:#7a5a2e}

/* 数量步进器 */
.stepper{display:flex;align-items:center;border:1px solid var(--line);border-radius:9px;overflow:hidden;background:#fff}
.stepper button{width:34px;height:32px;border:0;background:#fff;font-size:17px;color:var(--ink-2);line-height:1}
.stepper button:disabled{color:#d6d2c8}
.stepper span{min-width:38px;text-align:center;font-size:14.5px;font-variant-numeric:tabular-nums}

.cart-item{display:flex;gap:10px;padding:12px 14px;border-bottom:1px solid var(--line)}
.cart-item:last-child{border-bottom:0}
.cart-thumb{
  flex:0 0 56px;width:56px;height:56px;border-radius:12px;background:#f5f2ea;
  display:flex;align-items:center;justify-content:center;font-size:26px;overflow:hidden;
}
.cart-thumb img{width:100%;height:100%;object-fit:cover}
.cart-bd{flex:1;min-width:0}
.cart-bd .nm{font-size:14.5px;font-weight:600}
.cart-bd .sp{font-size:12px;color:var(--ink-3);margin-top:2px}
.cart-ft{display:flex;align-items:center;gap:10px;margin-top:8px}
.cart-ft .pr{color:var(--danger);font-weight:600}

/* ------------------------------ 消息 ------------------------------ */
.msg{display:flex;gap:10px;padding:14px;border-bottom:1px solid var(--line);background:#fff}
.msg.unread{background:#fbfdfc}
.msg .ic{
  flex:0 0 38px;width:38px;height:38px;border-radius:11px;background:var(--brand-l);
  display:flex;align-items:center;justify-content:center;font-size:18px;
}
.msg .bd{flex:1;min-width:0}
.msg .tt{display:flex;align-items:center;gap:6px;font-size:14.5px;font-weight:600}
.msg .ct{font-size:13px;color:var(--ink-2);margin-top:3px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.msg .tm{font-size:12px;color:var(--ink-3);margin-top:5px}
.badge-dot{width:8px;height:8px;border-radius:50%;background:#d9534f;flex:0 0 8px}
.badge-num{
  min-width:18px;height:18px;padding:0 5px;border-radius:9px;background:#d9534f;color:#fff;
  font-size:11px;display:inline-flex;align-items:center;justify-content:center;
  font-weight:500;line-height:1;
}

/* ------------------------------ 首页 ------------------------------ */
/*
 * 首页 —— 极简单列。一屏只讲一条主线：
 *   这是谁（Banner）→ 什么时候开（营业时间）→ 在哪怎么去（门店卡）→ 干什么（两个大按钮）
 *
 * 所以这里刻意**没有**深色大色块、没有宫格、没有轮播、没有阴影卡片。
 * 手法：弱卡片（白底 + 极淡描边、无阴影）+ 小圆角 + 低信息密度。
 * 这些区块的取舍理由写在 pages/home.js 的文件头，改之前先看那段。
 */

/* ① Banner：浅青绿柔和渐变 + 右手一个超大装饰字（纯 CSS，不引图片资源） */
.hero{
  position:relative;overflow:hidden;
  padding:calc(22px + env(safe-area-inset-top)) 16px 24px;
  background:linear-gradient(155deg,#d7eee6 0%,#e9f6f1 55%,#f4faf7 100%);
  border-radius:0 0 12px 12px;
}
.hero-art{
  position:absolute;right:-10px;top:-22px;
  font-family:"STKaiti","KaiTi","Songti SC",serif;
  font-size:136px;line-height:1;font-weight:700;
  color:rgba(31,122,92,.10);
  pointer-events:none;user-select:none;
}
.hero-txt{position:relative;z-index:1}
.hero-name{
  font-family:"STKaiti","KaiTi","Songti SC",serif;
  font-size:27px;font-weight:700;letter-spacing:1px;color:#12523c;line-height:1.25;
}
.hero-sub{font-size:12.5px;color:#4d7f6d;margin-top:6px}
.hero-tel{display:inline-block;margin-top:15px;font-size:17px;font-weight:700;color:#12523c;letter-spacing:.4px;text-decoration:none}
.hero-addr{font-size:12px;color:#6b8b7f;margin-top:5px;line-height:1.5;padding-right:40px}

/* 公告：一行就够。停诊/放假通知必须看得见，但不值得占一块大卡片 */
.notice-line{
  display:flex;align-items:flex-start;gap:8px;
  margin:10px 14px 0;padding:9px 12px;
  background:#fff;border:1px solid var(--line);border-radius:8px;
  font-size:12.5px;color:var(--ink-2);line-height:1.5;
}
.notice-line .tag{flex:0 0 auto;font-size:11px;color:var(--brand);background:var(--brand-l);border-radius:4px;padding:1px 6px;margin-top:1px}
.notice-line .tx{flex:1;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}

/* ② 机构名片 */
.clinic-row{display:flex;align-items:center;gap:10px;margin:14px 14px 0;padding:12px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.clinic-logo{
  flex:0 0 auto;width:40px;height:40px;border-radius:10px;
  background:linear-gradient(145deg,var(--brand),var(--brand-d));
  color:#fff;font-size:20px;font-weight:700;
  display:flex;align-items:center;justify-content:center;
  font-family:"STKaiti","KaiTi",serif;
}
.clinic-nm{font-size:15.5px;font-weight:600;color:var(--ink)}
.clinic-sub{font-size:11.5px;color:var(--ink-3);margin-left:auto;text-align:right;max-width:46%}

/* ③ 营业时间：独立浅灰整宽条 */
.hours-bar{display:flex;align-items:baseline;gap:8px;margin:10px 14px 0;padding:11px 14px;background:var(--gray-l);border-radius:8px;font-size:13px}
.hours-bar .lbl{color:var(--ink-3);font-size:12px;flex:0 0 auto}
.hours-bar .val{color:var(--ink);font-weight:500;line-height:1.45}

/* ④ 门店信息卡：左边名称地址，右边「导航 / 电话」两个等权图标按钮 */
.store-card{display:flex;align-items:center;gap:12px;margin:10px 14px 0;padding:13px 14px;background:#fff;border:1px solid var(--line);border-radius:10px}
.store-l{flex:1;min-width:0}
.store-nm{font-size:14.5px;font-weight:600;color:var(--ink)}
.store-addr{font-size:11.5px;color:var(--ink-3);margin-top:3px;line-height:1.45}
.store-ops{flex:0 0 auto;display:flex;gap:4px;padding-left:12px;border-left:1px solid var(--line)}
.store-op{display:flex;flex-direction:column;align-items:center;gap:2px;width:52px;padding:2px 0;text-decoration:none;color:var(--ink-2);font-size:11.5px}
.store-op .ic{font-size:19px;line-height:1}
.store-op:active{opacity:.6}

.warn-line{margin:10px 14px 0;padding:10px 14px;border-radius:8px;background:var(--orange-l);color:#8a5a10;font-size:12.5px;line-height:1.5}

/* ⑤ 两个并排大按钮 —— 全页唯一的主动作，两者等权 */
.big-ops{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:16px 14px 0}
.big-op{
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:56px;border-radius:10px;text-decoration:none;
  background:var(--brand);color:#fff;font-size:16.5px;font-weight:600;letter-spacing:.5px;
}
.big-op .ic{font-size:18px;line-height:1}
.big-op:active{background:var(--brand-d)}

/* ⑥ 我的下一个预约：细长一行，不做成大卡片，避免打断单列节奏 */
.next-line{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin:10px 14px 0;padding:11px 14px;
  background:#fff;border:1px solid var(--line);border-left:3px solid var(--brand);
  border-radius:8px;text-decoration:none;color:var(--ink);
}
.next-line .wl{font-size:13px;font-weight:600;color:var(--brand)}
.next-line .wn{font-size:12.5px;color:var(--ink-2)}
.next-line .wa{margin-left:auto;font-size:12.5px;color:var(--brand)}
.next-line .st{font-size:11px;padding:1px 6px}

/* ------------------------------------------------------------------ */
/* 装修区块（管理后台可配的：头图轮播 / 导流 / 相册 / 特色 / 动态）        */
/* ------------------------------------------------------------------ */

/* 图片加载失败时用 data-emoji 兜底，不留裂图 */
.img-fallback::after{content:attr(data-emoji);font-size:30px;opacity:.5}

/* 区块通用外壳：小标题 + 内容 */
.blk{margin:16px 14px 0}
.blk-title{font-size:15px;font-weight:600;color:var(--ink);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.blk-title::before{content:"";width:3px;height:14px;border-radius:2px;background:var(--brand);flex:0 0 auto}

/* ① 头图（图片轮播模式） */
.hero-banner{position:relative;overflow:hidden;border-radius:0 0 12px 12px;background:#e9f0ee}
.hero-link{display:block;height:100%;text-decoration:none;color:inherit}
.hero-slide{position:absolute;inset:0;opacity:0;transition:opacity .5s ease;pointer-events:none}
.hero-slide.on{opacity:1;pointer-events:auto}
.hero-img{width:100%;height:100%;object-fit:cover;display:block}
.hero-cap{position:absolute;left:0;right:0;bottom:0;padding:22px 16px 14px;color:#fff;
  background:linear-gradient(to top,rgba(0,0,0,.52),rgba(0,0,0,0))}
.hero-cap .t{font-size:18px;font-weight:700;line-height:1.3}
.hero-cap .s{font-size:12.5px;opacity:.92;margin-top:4px}
.hero-dots{position:absolute;left:0;right:0;bottom:8px;display:flex;gap:4px;justify-content:center;z-index:2}
.hero-dots i{width:5px;height:5px;border-radius:50%;background:rgba(255,255,255,.55);transition:width .2s}
.hero-dots i.on{background:#fff;width:13px;border-radius:3px}

/* ③ 导流入口宫格 */
.nav-block{margin:14px 14px 0}
.nav-grid{display:grid;gap:4px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 6px}
.nv{display:flex;flex-direction:column;align-items:center;gap:6px;padding:6px 2px;text-decoration:none;color:var(--ink)}
.nv:active{opacity:.6}
.nv-ic{font-size:25px;line-height:1;height:27px;display:flex;align-items:center;justify-content:center}
.nv-ic img{width:27px;height:27px;border-radius:7px;object-fit:cover}
.nv-tx{font-size:12px;color:var(--ink-2);text-align:center;line-height:1.25}

/* ④ 相册：横滑大图 / 三列九宫格 */
.gl-scroll{display:flex;gap:8px;overflow-x:auto;padding-bottom:4px;scrollbar-width:none;scroll-snap-type:x proximity}
.gl-scroll::-webkit-scrollbar{display:none}
.gl-scroll .gl{flex:0 0 62%;scroll-snap-align:start}
.gl-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:6px}
.gl{margin:0}
.gl-img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:8px;display:block;background:#eef1f0}
.gl-grid .gl-img{aspect-ratio:1/1}
.gl figcaption{font-size:11.5px;color:var(--ink-3);margin-top:5px;text-align:center;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ⑤ 环境特色 */
.ft-list{background:#fff;border:1px solid var(--line);border-radius:10px;padding:4px 14px}
.ft{display:flex;gap:11px;padding:12px 0;border-bottom:1px solid var(--line)}
.ft:last-child{border-bottom:0}
.ft-ic{font-size:22px;line-height:1.2;flex:0 0 auto;width:26px;text-align:center}
.ft-ic img{width:26px;height:26px;border-radius:7px;object-fit:cover}
.ft-bd{flex:1;min-width:0}
.ft-t{font-size:14.5px;font-weight:600;color:var(--ink)}
.ft-d{font-size:12.5px;color:var(--ink-2);line-height:1.55;margin-top:3px}

/* ⑦ 商家动态 */
.ps-list{background:#fff;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.ps{display:flex;gap:11px;padding:12px 14px;border-bottom:1px solid var(--line);text-decoration:none;color:inherit}
.ps:last-child{border-bottom:0}
.ps:active{background:var(--brand-l2)}
.ps-cover{flex:0 0 auto;width:88px;height:66px;border-radius:8px;overflow:hidden;background:#eef1f0}
.ps-img{width:100%;height:100%;object-fit:cover;display:block}
.ps-bd{flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center}
.ps-t{font-size:14.5px;font-weight:600;color:var(--ink);line-height:1.4;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ps-s{font-size:12.5px;color:var(--ink-2);line-height:1.5;margin-top:4px;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.ps-d{font-size:11.5px;color:var(--ink-3);margin-top:5px}

/* ------------------------------ 空态 / 错误 / 骨架 ------------------------------ */
.empty{padding:56px 24px;text-align:center;color:var(--ink-2)}
.empty .ic{font-size:42px;opacity:.55}
.empty .tx{margin-top:10px;font-size:14px}
.empty .sub{font-size:12.5px;color:var(--ink-3);margin-top:4px}
.empty .op{margin-top:16px;display:flex;gap:10px;justify-content:center}
.empty .op .btn{padding:0 20px}

.skel{padding:14px}
.sk-line{height:13px;border-radius:7px;background:linear-gradient(90deg,#eeeae1 25%,#f6f3ec 37%,#eeeae1 63%);background-size:400% 100%;animation:sk 1.2s ease infinite;margin-bottom:9px}
.sk-line.w40{width:40%}.sk-line.w60{width:60%}.sk-line.w80{width:80%}
@keyframes sk{0%{background-position:100% 0}100%{background-position:0 0}}
@keyframes spin{to{transform:rotate(360deg)}}

/* ------------------------------ toast / 遮罩 ------------------------------ */
#toasts{
  position:fixed;left:0;right:0;top:calc(14px + env(safe-area-inset-top));z-index:100;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;padding:0 24px;
}
.toast{
  max-width:100%;padding:10px 16px;border-radius:12px;background:rgba(38,37,33,.92);color:#fff;
  font-size:14px;line-height:1.45;box-shadow:0 6px 18px rgba(0,0,0,.18);
  animation:tin .18s ease;word-break:break-word;
}
.toast.ok{background:rgba(24,102,74,.95)}
.toast.err{background:rgba(163,56,38,.95)}
@keyframes tin{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}

.mask{position:fixed;inset:0;z-index:90;background:rgba(245,243,237,.6);display:flex;align-items:center;justify-content:center}
.spinner{width:30px;height:30px;border:3px solid rgba(31,122,92,.22);border-top-color:var(--brand);border-radius:50%;animation:spin .7s linear infinite}
.mask .txt{margin-top:10px;font-size:13px;color:var(--ink-2)}
.mask .box{display:flex;flex-direction:column;align-items:center}

/* 弹层（取消原因） */
.sheet-mask{position:fixed;inset:0;z-index:80;background:rgba(30,28,24,.4);display:flex;align-items:flex-end}
.sheet{
  width:100%;max-width:480px;margin:0 auto;background:#fff;border-radius:18px 18px 0 0;
  padding:16px 14px calc(16px + env(safe-area-inset-bottom));animation:sup .2s ease;
}
.sheet h3{margin:0 0 12px;font-size:16px;text-align:center}
.sheet textarea{width:100%;min-height:66px;border:1px solid var(--line);border-radius:10px;padding:10px;resize:none;outline:none;font-size:15px}
.sheet .ops{display:flex;gap:10px;margin-top:14px}
.sheet .ops .btn{flex:1}
@keyframes sup{from{transform:translateY(24px);opacity:.6}to{transform:none;opacity:1}}

/* ------------------------------ 登录页 ------------------------------ */
.login-wrap{padding:0 22px 30px}
.login-hd{padding:calc(48px + env(safe-area-inset-top)) 0 26px;text-align:center}
.login-hd .seal{
  width:64px;height:64px;border-radius:50%;background:var(--brand);color:#fff;margin:0 auto 14px;
  display:flex;align-items:center;justify-content:center;font-size:28px;letter-spacing:1px;
  box-shadow:0 8px 20px rgba(31,122,92,.24);
}
.login-hd .cn{font-size:21px;font-weight:700}
.login-hd .sl{font-size:12.5px;color:var(--ink-2);margin-top:5px}
.login-box{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:6px 14px;box-shadow:var(--shadow)}
.code-row{display:flex;align-items:center;gap:8px;flex:1}
.code-row input{flex:1;min-width:0;border:0;background:transparent;font-size:16px;outline:none;letter-spacing:2px}
.code-row .btn{flex:0 0 auto}
.demo-box{
  margin-top:14px;padding:11px 13px;border-radius:12px;background:var(--orange-l);
  border:1px dashed #e6c489;font-size:13px;color:#8a5a12;display:flex;align-items:center;gap:8px;
}
.demo-box b{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:17px;letter-spacing:2px;color:#7a4c07}
.demo-box .fill{margin-left:auto;flex:0 0 auto;background:#fff;border:1px solid #e6c489;color:#8a5a12;border-radius:8px;height:28px;padding:0 10px;font-size:12.5px}
.login-tip{font-size:12px;color:var(--ink-3);margin-top:14px;line-height:1.6}
.agree{display:flex;gap:7px;align-items:flex-start;font-size:12px;color:var(--ink-2);margin-top:14px}
.agree input{margin:2px 0 0}

/* ------------------------------ 支付页 ------------------------------ */
.pay-amount{text-align:center;padding:26px 16px 20px}
.pay-amount .lb{font-size:13px;color:var(--ink-2)}
.pay-amount .num{font-size:38px;font-weight:700;color:var(--ink);margin-top:6px;font-variant-numeric:tabular-nums}
.pay-amount .num small{font-size:20px;font-weight:600;margin-right:2px}
.countdown{
  display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:5px 12px;border-radius:999px;
  background:var(--orange-l);color:var(--orange);font-size:13px;
}
.countdown b{font-variant-numeric:tabular-nums;font-weight:700}
.countdown.over{background:var(--gray-l);color:var(--gray)}
.pay-methods{padding:4px 0}
.pay-method{display:flex;align-items:center;gap:10px;padding:13px 14px;border-bottom:1px solid var(--line)}
.pay-method:last-child{border-bottom:0}
.pay-method .ic{font-size:20px}
.pay-method .nm{font-size:14.5px}
.pay-method .st{margin-left:auto}
.pay-method .rd{
  width:19px;height:19px;border-radius:50%;border:1.5px solid var(--line);flex:0 0 19px;margin-left:auto;
}
.pay-method.on .rd{border-color:var(--brand);background:var(--brand);box-shadow:inset 0 0 0 3.5px #fff}
.note{margin:12px;padding:11px 13px;border-radius:12px;background:var(--brand-l2);font-size:12.5px;color:var(--brand-d);line-height:1.6}

/* 成功页 */
.done-wrap{padding:46px 22px 24px;text-align:center}
.done-ic{
  width:66px;height:66px;border-radius:50%;background:var(--green-l);color:var(--brand);
  display:flex;align-items:center;justify-content:center;font-size:34px;margin:0 auto;
}
.done-wrap h2{font-size:19px;margin:16px 0 6px}
.done-wrap p{font-size:13.5px;color:var(--ink-2);margin:0}
.kv{display:flex;gap:10px;padding:11px 0;border-bottom:1px solid var(--line);font-size:14px}
.kv:last-child{border-bottom:0}
.kv .k{flex:0 0 84px;color:var(--ink-2)}
.kv .v{flex:1;text-align:right;word-break:break-all}
.kv .v.left{text-align:left}

/* 核销码大图（预约详情） */
.qr-block{text-align:center;padding:20px 16px 16px}
.qr-block .qr{
  width:200px;height:200px;margin:0 auto;border-radius:14px;background:#fff;border:1px solid var(--line);
  overflow:hidden;display:flex;align-items:center;justify-content:center;
}
.qr-block .qr img{width:200px;height:200px}
.qr-block .cd{margin-top:14px;font-size:12.5px;color:var(--ink-2)}
.qr-block .code{
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:32px;font-weight:700;letter-spacing:6px;
  margin-top:4px;color:var(--ink);
}
.qr-block .no{font-size:12px;color:var(--ink-3);margin-top:8px;word-break:break-all}

/* 统计格 */
.stat-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:0;padding:6px 0}
.stat{text-align:center;padding:12px 4px}
.stat .n{font-size:20px;font-weight:700;font-variant-numeric:tabular-nums}
.stat .l{font-size:12px;color:var(--ink-2);margin-top:3px}
.stat.warn .n{color:var(--orange)}

/* 通用列表行 */
.li{display:flex;align-items:center;gap:10px;padding:14px;border-bottom:1px solid var(--line);background:#fff;font-size:15px}
.li:last-child{border-bottom:0}
.li .ic{font-size:18px}
.li .arw{margin-left:auto;color:var(--ink-3);font-size:15px}
.li .val{margin-left:auto;color:var(--ink-2);font-size:14px}