/* ============================================================
   基础层：重置 / 变量 / 状态栏 / 通用组件 / 浮层
   配色完全对齐美团：主色 #FFD100 袋鼠黄
   ============================================================ */

:root{
  --mt-yellow:#FFD100;          /* 美团主色 */
  --mt-yellow-d:#F5C400;
  --mt-yellow-l:#FFF7CC;
  --mt-orange:#FF8000;
  --mt-red:#FF4B33;
  --mt-green:#00C46A;
  --mt-black:#222222;
  --t1:#222222;   /* 主文字 */
  --t2:#666666;   /* 次要 */
  --t3:#999999;   /* 辅助 */
  --t4:#C8C8C8;   /* 占位/描边 */
  --bg:#F5F5F5;
  --card:#FFFFFF;
  --line:#F0F0F0;
  --radius:12px;
  --shadow:0 2px 12px rgba(0,0,0,.06);
  --safe-b:env(safe-area-inset-bottom, 0px);
}

*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
/* 移动端浏览器地址栏收起/展开时用动态视口高度，避免底部露白或被裁 */
@supports (height:100dvh){
  html,body{height:100dvh}
}
body{
  font-family:-apple-system,BlinkMacSystemFont,"PingFang SC","Helvetica Neue","Microsoft YaHei",sans-serif;
  background:#fff;color:var(--t1);font-size:14px;line-height:1.5;
  overflow:hidden;-webkit-text-size-adjust:100%;color-scheme:light;
}
img{display:block;max-width:100%}
/* 兜底：图标容器里的 SVG 默认按 1em 显示。
   裸 <svg> 会用浏览器默认 300x150 + 默认黑色填充，把整行撑成一个黑块（踩过坑）。 */
.ico>svg,.ico svg{width:1em;height:1em;fill:currentColor;flex:0 0 auto}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
input,textarea{font:inherit;color:inherit;background:none;border:none;outline:none;-webkit-appearance:none}
ul,li{list-style:none}
a{color:inherit;text-decoration:none}

/* ========== 应用外壳（原生化：铺满设备屏幕，不用模拟手机壳） ========== */
/* 顶部安全区：刘海/灵动岛/状态栏高度，由系统给出；非刘海机为 0 */
:root{ --safe-t:env(safe-area-inset-top, 0px); }

.phone-frame{
  width:100%;height:100%;display:flex;align-items:stretch;justify-content:center;
  background:#FFFFFF;
}
.phone-screen{
  position:relative;width:100%;height:100%;
  background:var(--bg);overflow:hidden;display:flex;flex-direction:column;
}
/* 仅在宽屏（桌面预览）时居中成一列，手机上完全铺满 */
@media (min-width:640px){
  .phone-frame{background:#E9E9E9}
  .phone-screen{max-width:430px;box-shadow:0 0 30px rgba(0,0,0,.12)}
}

/* ========== 微信小程序导航栏 ========== */
.wx-navbar{
  flex:0 0 auto;position:relative;z-index:120;
  height:calc(var(--safe-t) + 44px);padding-top:var(--safe-t);
  background:#FFFFFF;color:#111111;
  transition:background .22s ease,color .22s ease;
}
.wx-navbar::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:1px;
  background:rgba(0,0,0,.07);transform:scaleY(.5);transform-origin:bottom;
}
.wx-navbar.dark{background:#000000;color:#FFFFFF}
.wx-navbar.dark::after{background:rgba(255,255,255,.1)}
.wx-navbar.plain{background:transparent;box-shadow:none}
.wx-navbar.plain::after{display:none}

.wx-nb-inner{position:relative;height:44px;display:flex;align-items:center}
.wx-nb-title{
  position:absolute;left:0;right:0;top:0;height:44px;line-height:44px;text-align:center;
  font-size:17px;font-weight:600;color:inherit;pointer-events:none;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:0 100px;
}
.wx-nb-back{
  position:relative;z-index:3;width:44px;height:44px;flex:0 0 44px;
  display:flex;align-items:center;justify-content:center;
}
.wx-nb-back svg{width:11px;height:19px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}

/* ========== 右上角胶囊按钮 ========== */
.wx-capsule{
  position:absolute;right:7px;top:calc(var(--safe-t) + 6px);z-index:130;
  width:44px;height:32px;border-radius:16px;overflow:hidden;
  display:flex;align-items:center;
  background:rgba(255,255,255,.65);
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 0 2px rgba(0,0,0,.04);
}
.wx-navbar.dark .wx-capsule{background:rgba(0,0,0,.45);border-color:rgba(255,255,255,.16)}
.wx-cap-half{flex:1;height:100%;display:flex;align-items:center;justify-content:center;position:relative}
.wx-cap-half:not(:last-child)::after{
  content:'';position:absolute;right:0;top:7px;bottom:7px;width:1px;background:rgba(0,0,0,.1);
}
.wx-navbar.dark .wx-cap-half:not(:last-child)::after{background:rgba(255,255,255,.18)}
.wx-cap-half:active{background:rgba(0,0,0,.05)}
.wx-navbar.dark .wx-cap-half:active{background:rgba(255,255,255,.1)}
/* 三个点（更多） */
.wx-cap-dots{display:flex;align-items:center;gap:3px}
.wx-cap-dots i{width:3.5px;height:3.5px;border-radius:50%;background:#000;display:block}
.wx-navbar.dark .wx-cap-dots i{background:#fff}
/* 圆环（关闭） */
.wx-cap-ring{width:14px;height:14px;border-radius:50%;border:1.3px solid #000;position:relative}
.wx-cap-ring::after{
  content:'';position:absolute;left:50%;top:50%;width:3.5px;height:3.5px;margin:-1.75px 0 0 -1.75px;
  border-radius:50%;background:#000;
}
.wx-navbar.dark .wx-cap-ring{border-color:#fff}
.wx-navbar.dark .wx-cap-ring::after{background:#fff}

/* ========== 微信右上角菜单面板 ========== */
.wx-menu-mask{
  position:absolute;inset:0;background:rgba(0,0,0,.45);z-index:900;
  opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s;
}
.wx-menu-mask.show{opacity:1;visibility:visible}
.wx-menu{
  position:absolute;left:0;right:0;bottom:0;z-index:910;background:#fff;
  border-radius:12px 12px 0 0;transform:translateY(101%);
  transition:transform .28s cubic-bezier(.32,.72,0,1);
  padding-bottom:var(--safe-b);
}
.wx-menu.show{transform:none}
.wm-head{padding:18px 16px 14px;display:flex;align-items:center;gap:10px}
.wm-logo{
  width:44px;height:44px;flex:0 0 44px;border-radius:8px;overflow:hidden;
  display:flex;align-items:center;justify-content:center;
}
.wm-logo svg{width:30px;height:30px}
.wm-name{font-size:15px;font-weight:600;color:#111}
.wm-sub{font-size:11px;color:#999;margin-top:3px}
.wm-grid{display:flex;padding:6px 4px 14px;border-bottom:1px solid #F0F0F0}
.wm-g{flex:1;display:flex;flex-direction:column;align-items:center;gap:7px;padding:8px 0}
.wm-g:active{background:#F7F7F7}
.wm-gi{
  width:44px;height:44px;border-radius:22px;background:#F5F5F5;
  display:flex;align-items:center;justify-content:center;
}
.wm-gi svg{width:22px;height:22px;fill:#333}
.wm-gt{font-size:11px;color:#666}
.wm-row{
  height:52px;display:flex;align-items:center;padding:0 18px;font-size:15px;color:#111;
  border-bottom:1px solid #F0F0F0;
}
.wm-row:active{background:#F7F7F7}
.wm-cancel{height:54px;display:flex;align-items:center;justify-content:center;font-size:16px;color:#111;border-top:6px solid #F2F2F2}
.wm-cancel:active{background:#F7F7F7}

/* ========== 下拉刷新（微信三个点） ========== */
.wx-pull{
  position:absolute;left:0;right:0;top:calc(var(--safe-t) + 44px);height:56px;
  display:none;align-items:center;justify-content:center;z-index:80;pointer-events:none;
}
.wx-pull.show{display:flex}
.wx-pull-dots{display:flex;align-items:center;gap:7px}
.wx-pull-dots i{
  width:7px;height:7px;border-radius:50%;background:#9A9A9A;display:block;
  animation:pullDot 1s ease-in-out infinite;
}
.wx-pull-dots i:nth-child(2){animation-delay:.14s}
.wx-pull-dots i:nth-child(3){animation-delay:.28s}
@keyframes pullDot{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

/* ========== 页面容器 ========== */
.page-container{
  flex:1;position:relative;overflow:hidden;
}
.page{
  display:none;position:absolute;inset:0;overflow-y:auto;-webkit-overflow-scrolling:touch;
  background:var(--bg);will-change:transform;
}
.page.active{display:block}
.page.leaving{display:block}
/* 小程序页面切换：新页从右推入 / 返回时旧页向右滑出、下页从左侧归位 */
@keyframes pgInRight{from{transform:translateX(100%)}to{transform:none}}
@keyframes pgOutRight{from{transform:none}to{transform:translateX(100%)}}
@keyframes pgInLeft{from{transform:translateX(-26%)}to{transform:none}}
@keyframes pgMaskIn{from{opacity:0}to{opacity:1}}
.pg-in-right{animation:pgInRight .3s cubic-bezier(.32,.72,0,1) both}
.pg-out-right{animation:pgOutRight .3s cubic-bezier(.32,.72,0,1) both}
.pg-in-left{animation:pgInLeft .3s cubic-bezier(.32,.72,0,1) both}
.pg-fade{animation:pgMaskIn .22s ease both}

/* ========== 底部 TabBar（微信小程序原生规格） ========== */
.tabbar{
  flex:0 0 auto;height:calc(50px + var(--safe-b));padding-bottom:var(--safe-b);
  background:#fff;border-top:1px solid #E5E5E5;
  display:flex;align-items:center;z-index:50;position:relative;
}
.tabbar.hide{display:none}
.tab-item{
  flex:1;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:3px;color:#7A7E83;
}
.tab-item .ti-ico{width:24px;height:24px;fill:currentColor}
.tab-item span{font-size:10px;line-height:1}
.tab-item:active{background:#FAFAFA}
.tab-item.on{color:#F5C400}
.tab-item.on .ti-ico{fill:#F5C400}
.tab-item.on span{color:#F5C400;font-weight:500}

/* ========== 通用卡片 / 行 ========== */
.card{background:#fff;border-radius:var(--radius);overflow:hidden}
.row{display:flex;align-items:center;justify-content:space-between;padding:13px 14px;border-bottom:1px solid var(--line)}
.row:last-child{border-bottom:none}
.row-l{display:flex;align-items:center;gap:8px;font-size:14px;color:var(--t1)}
.row-r{display:flex;align-items:center;gap:4px;font-size:13px;color:var(--t3)}
.arrow{width:7px;height:7px;border-top:1.5px solid var(--t4);border-right:1.5px solid var(--t4);transform:rotate(45deg)}

/* ========== 按钮 ========== */
.btn{
  display:flex;align-items:center;justify-content:center;width:100%;height:46px;
  border-radius:23px;font-size:16px;font-weight:600;background:var(--mt-yellow);color:#222;
  transition:transform .1s,opacity .15s;
}
.btn:active{transform:scale(.975);opacity:.9}
.btn.disabled{background:#E0E0E0;color:#fff;pointer-events:none}
.btn-yellow{background:var(--mt-yellow);color:#222}
.btn-black{background:#222;color:var(--mt-yellow)}
.btn-orange{background:linear-gradient(90deg,#FF9500,#FF6A00);color:#fff}
.btn-ghost{background:#fff;color:var(--t1);border:1px solid var(--t4)}
.btn-sm{height:32px;border-radius:16px;font-size:13px;width:auto;padding:0 16px}

/* ========== 标签 ========== */
.tag{display:inline-flex;align-items:center;height:18px;padding:0 6px;border-radius:3px;font-size:11px;line-height:1}
.tag-yellow{background:var(--mt-yellow-l);color:#A06800}
.tag-red{background:#FFECEA;color:var(--mt-red)}
.tag-green{background:#E6F9EF;color:#00994F}
.tag-gray{background:#F5F5F5;color:var(--t3)}
.tag-blue{background:#EAF3FF;color:#3A7BFF}

/* ========== Toast ========== */
.toast-wrap{position:absolute;left:0;right:0;top:0;bottom:0;display:flex;align-items:center;justify-content:center;pointer-events:none;z-index:900}
.toast{
  background:rgba(0,0,0,.82);color:#fff;font-size:14px;padding:11px 20px;border-radius:8px;
  max-width:76%;text-align:center;line-height:1.5;animation:toastIn .18s ease;
}
.toast.ok::before{content:"✓ ";color:#52D07F}
.toast.err::before{content:"✕ ";color:#FF6B5B}
@keyframes toastIn{from{opacity:0;transform:scale(.94)}to{opacity:1;transform:none}}

/* ========== 遮罩 ========== */
.mask{position:absolute;inset:0;background:rgba(0,0,0,.5);z-index:800;opacity:0;visibility:hidden;transition:opacity .22s}
.mask.show{opacity:1;visibility:visible}

/* ========== 对话框 ========== */
.dialog-wrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;z-index:850;pointer-events:none}
.dialog{
  width:290px;background:#fff;border-radius:14px;overflow:hidden;pointer-events:auto;
  transform:scale(.9);opacity:0;transition:all .2s;
}
.dialog.show{transform:none;opacity:1}
.dlg-body{padding:26px 22px 22px;text-align:center}
.dlg-title{font-size:17px;font-weight:600;margin-bottom:10px}
.dlg-text{font-size:14px;color:var(--t2);line-height:1.65}
.dlg-btns{display:flex;border-top:1px solid var(--line)}
.dlg-btn{flex:1;height:48px;display:flex;align-items:center;justify-content:center;font-size:16px;color:var(--t2)}
.dlg-btn+.dlg-btn{border-left:1px solid var(--line)}
.dlg-btn.primary{color:#1A7BFF;font-weight:600}

/* ========== 底部弹层 ========== */
.sheet-wrap{position:absolute;left:0;right:0;bottom:0;z-index:860;pointer-events:none}
.sheet{
  background:#fff;border-radius:16px 16px 0 0;pointer-events:auto;
  transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  padding-bottom:var(--safe-b);max-height:78%;overflow-y:auto;
}
.sheet.show{transform:none}
.sheet-head{height:52px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line);font-size:16px;font-weight:600}
.sheet-close{position:absolute;right:14px;top:50%;transform:translateY(-50%);width:22px;height:22px;fill:var(--t4)}

/* ========== 支付密码键盘 ========== */
.pay-kb-wrap{position:absolute;left:0;right:0;bottom:0;z-index:880;pointer-events:none}
.pay-kb{
  background:#fff;pointer-events:auto;transform:translateY(100%);transition:transform .26s cubic-bezier(.32,.72,0,1);
  padding-bottom:var(--safe-b);
}
.pay-kb.show{transform:none}
.pk-head{height:50px;display:flex;align-items:center;justify-content:center;position:relative;border-bottom:1px solid var(--line)}
.pk-title{font-size:16px;font-weight:600}
.pk-close{position:absolute;left:14px;width:20px;height:20px;fill:var(--t3)}
.pk-amount{padding:20px 0 14px;text-align:center}
.pk-amount .amt{font-size:30px;font-weight:600}
.pk-amount .amt i{font-size:20px;font-style:normal;margin-right:2px}
.pk-amount .who{font-size:12px;color:var(--t3);margin-top:6px}
.pk-dots{display:flex;justify-content:center;gap:0;margin:0 30px 12px;border:1px solid #E5E5E5;border-radius:6px;overflow:hidden}
.pk-dot{flex:1;height:46px;display:flex;align-items:center;justify-content:center;border-right:1px solid #E5E5E5}
.pk-dot:last-child{border-right:none}
.pk-dot i{width:9px;height:9px;border-radius:50%;background:#222;display:none}
.pk-dot.on i{display:block;animation:dotPop .12s}
@keyframes dotPop{from{transform:scale(.3)}to{transform:scale(1)}}
.pk-err{text-align:center;font-size:12px;color:var(--mt-red);height:18px;margin-bottom:2px}
.pk-keys{display:flex;flex-wrap:wrap;background:#D1D5DB;gap:1px;padding:1px 0 0}
.pk-key{
  width:33.333%;flex:1 0 33.333%;height:50px;background:#fff;display:flex;align-items:center;justify-content:center;
  font-size:23px;font-weight:500;margin-bottom:1px;
}
.pk-key:active{background:#E8E8E8}
.pk-key.fn{background:#D1D5DB;font-size:15px}
.pk-key.zero{width:66.666%;flex-basis:66.666%}
.pk-loading{position:absolute;inset:0;background:rgba(255,255,255,.94);display:none;flex-direction:column;align-items:center;justify-content:center;gap:12px;font-size:13px;color:var(--t2)}
.pk-loading.show{display:flex}
.spinner{width:30px;height:30px;border:2.5px solid #EEE;border-top-color:var(--mt-yellow);border-radius:50%;animation:spin .7s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* ========== 启动页 ========== */
.splash{
  position:absolute;inset:0;background:linear-gradient(180deg,#FFD100 0%,#FFE24D 100%);
  z-index:950;display:flex;flex-direction:column;align-items:center;justify-content:center;
  transition:opacity .4s,visibility .4s;
}
.splash.hide{opacity:0;visibility:hidden}
.splash-logo{animation:spIn .5s cubic-bezier(.2,.9,.3,1.3)}
@keyframes spIn{from{transform:scale(.5);opacity:0}to{transform:none;opacity:1}}
.splash-name{font-size:22px;font-weight:700;color:#222;margin-top:14px;letter-spacing:2px}
.splash-sub{font-size:12px;color:#7A6400;margin-top:6px;letter-spacing:1px}
.splash-bar{width:120px;height:3px;background:rgba(0,0,0,.12);border-radius:2px;margin-top:34px;overflow:hidden}
.splash-bar i{display:block;height:100%;width:0;background:#222;border-radius:2px;transition:width .3s}
.splash-tip{font-size:11px;color:#8A7400;margin-top:12px}

/* ========== 其他通用 ========== */
.price{color:var(--mt-red);font-weight:600}
.price i{font-size:12px;font-style:normal;font-weight:600}
.empty{padding:70px 0;text-align:center;color:var(--t3);font-size:13px}
.empty-ico{width:76px;height:76px;margin:0 auto 14px;fill:#E0E0E0}
.pull-more{text-align:center;padding:16px;font-size:12px;color:var(--t4)}
.divider{height:8px;background:var(--bg)}
.flex{display:flex}.flex-c{display:flex;flex-direction:column}
.f1{flex:1}.aic{align-items:center}.jcb{justify-content:space-between}.jcc{justify-content:center}
.g4{gap:4px}.g8{gap:8px}.g12{gap:12px}
.tc{text-align:center}.tr{text-align:right}
.ell{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt8{margin-top:8px}.mt12{margin-top:12px}.mt16{margin-top:16px}

/* 数字等宽（计时器不跳动） */
.mono{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}