/* 久享 App · 美团级对比度：灰底白卡、价格大红、主色焦糖橙（不是美团黄） */
:root{
  --jx:#ff5a1f;
  --jx-2:#ff8a4c;
  --jx-dim:#fff1ea;
  --price:#ff2d2d;
  --ios-bg:#f5f5f5;
  --ios-fill:#f0f0f0;
  --hair:#f0f0f0;
  --ink:#111;
  --sub:#666;
  --mute:#999;
}

.phone{
  max-width:322px;height:692px;
  background:#111;border:10px solid #111;border-radius:46px;
  box-shadow:0 24px 60px rgba(0,0,0,.18);
}
.phone:before{
  top:10px;width:96px;height:26px;border-radius:18px;background:#111;z-index:9;
}
.phone-screen{
  background:var(--ios-bg);color:var(--ink);
  font-family:-apple-system,"SF Pro Text","PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",sans-serif;
  letter-spacing:-.01em;
}
.phone-status{
  height:48px;padding:0 24px 8px;color:var(--ink);font-size:12px;font-weight:650;background:#fff;
}
.phone-head{padding:8px 16px 10px;background:#fff}
.phone-head h3{font-size:20px;font-weight:750;letter-spacing:-.03em}
.phone-screen .pad{padding:0 16px 24px}
.phone-screen .pad-tab{padding:0 16px 92px}

.phone-screen .loc-bar{
  padding:0 16px 10px;gap:10px;background:#fff;
}
.phone-screen .loc{
  font-size:16px;font-weight:750;letter-spacing:-.03em;display:flex;align-items:center;gap:2px;
}
.phone-screen .search{
  background:#f5f5f5;border-radius:18px;padding:8px 12px;color:#999;font-size:13px;
}

.phone-screen .king{
  background:#fff;margin:0 -16px;padding:8px 8px 12px;
  display:grid;grid-template-columns:repeat(4,1fr);
}
.phone-screen .king-item{font-size:11px;font-weight:600;color:#333}
.phone-screen .king-item .ki{
  width:48px;height:48px;border-radius:16px;margin:0 auto 6px;
  display:grid;place-items:center;color:#fff;
}
.phone-screen .king-item:nth-child(1) .ki{background:#ff4d4f}
.phone-screen .king-item:nth-child(2) .ki{background:#fa8c16}
.phone-screen .king-item:nth-child(3) .ki{background:#9254de}
.phone-screen .king-item:nth-child(4) .ki{background:#eb2f96}
.phone-screen .king-item:nth-child(5) .ki{background:#13c2c2}
.phone-screen .king-item:nth-child(6) .ki{background:#fa541c}
.phone-screen .king-item:nth-child(7) .ki{background:#2f54eb}
.phone-screen .king-item:nth-child(8) .ki{background:#52c41a}

.phone-screen .shop{
  grid-template-columns:92px 1fr;gap:12px;
  background:#fff;border:0;border-radius:12px;padding:10px;margin:8px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.phone-screen .shop img{width:92px;height:92px;border-radius:8px}
.phone-screen .shop .name{font-size:15px;font-weight:700;letter-spacing:-.02em}
.phone-screen .shop .meta{font-size:12px;color:var(--sub);margin:3px 0 6px}
.phone-screen .now,.phone-screen .price{
  color:var(--price)!important;font-size:18px;font-weight:800;letter-spacing:-.04em;
}
.phone-screen .old-price{color:#bbb;font-size:12px}
.phone-screen .tag-d{
  background:var(--jx-dim);color:var(--jx);border-radius:3px;font-size:10px;font-weight:700;padding:2px 5px;
}
.phone-screen .pts{color:var(--jx);font-size:11px;font-weight:650}

.phone-screen .grid2{gap:10px}
.phone-screen .gcard{
  background:#fff;border-radius:12px;padding:0 0 10px;overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.phone-screen .gcard img{height:118px;border-radius:12px 12px 0 0}
.phone-screen .gcard b{
  font-size:13px;font-weight:700;margin:8px 8px 4px;line-height:1.3;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;
}
.phone-screen .gcard .tag-d,.phone-screen .gcard .now,.phone-screen .gcard .old-price,.phone-screen .gcard .sold{
  margin-left:8px;
}

.phone-screen .btn{
  height:44px;border-radius:8px;background:var(--jx);color:#fff;
  font-size:16px;font-weight:700;letter-spacing:0;
}
.phone-screen .btn.secondary{
  background:#fff;color:var(--ink);border:1px solid #e5e5e5;
}
.phone-screen .btn.ghost{background:#fff;color:var(--ink);border:1px solid #e5e5e5}
.phone-screen .btn.sm{height:34px;border-radius:8px;font-size:13px;width:auto;padding:0 14px}
.phone-screen .btn.wechat{background:#07c160}

.phone-screen .tabbar{
  height:72px;padding-bottom:14px;
  background:#fff;border-top:1px solid #f0f0f0;
}
.phone-screen .tabbar .tab{color:#999;height:58px;padding-top:8px;font-weight:500}
.phone-screen .tabbar .tab.active{color:var(--jx);font-weight:700}
.phone-screen .tabbar .tab.active > svg{stroke:var(--jx)}
.phone-screen .scan-fab{
  width:28px;height:28px;border-radius:8px;background:var(--jx);
}
.phone-screen .tabbar .tab.scan.active .scan-fab{background:var(--jx)}

.phone-screen .cell{
  background:#fff;border:0;border-radius:12px;padding:14px;margin:8px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.phone-screen .note{
  background:var(--jx-dim);color:#9a3412;border-radius:10px;font-size:12px;line-height:1.55;
}
.phone-screen .chip{
  background:#f5f5f5;color:#333;border-radius:14px;padding:5px 12px;font-size:12px;font-weight:600;
}
.phone-screen .chip.on{background:var(--jx);color:#fff}
.phone-screen .chip.ok{background:#e8f8ef;color:#15803d}
.phone-screen .chip.warn{background:#fff4e5;color:#c2410c}
.phone-screen .seg{gap:8px;padding:8px 0}

.phone-screen .feat{height:148px;border-radius:12px;margin-top:8px}
.phone-screen .feat .cap{
  background:linear-gradient(transparent,rgba(0,0,0,.55));
  left:0;right:0;bottom:0;padding:28px 14px 14px;
}
.phone-screen .feat .cap b{font-size:18px;font-weight:800;letter-spacing:-.03em}
.scan-view span{z-index:1}
.scan-view:after{position:absolute}

.phone-screen .field input,.phone-screen .field textarea,.phone-screen .field select{
  border:0;background:#f5f5f5;border-radius:10px;padding:13px 14px;font-size:16px;
}
.phone-screen .row{border-bottom:1px solid #f0f0f0;padding:13px 0}
.phone-screen .hr{background:#f0f0f0}

.phone-screen .hero-login{background:#fff;padding:28px 24px 40px}
.phone-screen .word{font-size:40px;font-weight:750;letter-spacing:-.05em}
.phone-screen .lede{color:var(--sub);font-size:15px;line-height:1.5}

.phone-screen .pay-ok{background:#fff;min-height:100%}
.phone-screen .pay-ok .mark{background:var(--jx);border-radius:50%}
.phone-screen .qr-box{border:1px solid #eee;border-radius:16px;background:#fff}

.buybar{
  position:absolute;left:0;right:0;bottom:0;
  padding:10px 16px 16px;
  background:#fff;border-top:1px solid #f0f0f0;
  display:flex;align-items:center;gap:8px;
}
.points-bar{
  display:flex;align-items:center;justify-content:space-between;
  background:linear-gradient(135deg,#ff5a1f,#ff8a4c);
  color:#fff;border-radius:12px;padding:14px 16px;margin:8px 0 12px;
}
.points-bar .tiny{opacity:.9}
.sec-h{
  display:flex;align-items:baseline;justify-content:space-between;
  margin:14px 4px 6px;font-size:15px;font-weight:750;
}
.sec-h .more{font-size:12px;color:var(--mute);font-weight:500}
.star{color:var(--jx);font-weight:700;font-size:12px}
.ico-back{
  position:absolute;top:50px;left:12px;z-index:3;
  width:32px;height:32px;border-radius:50%;border:0;
  background:rgba(255,255,255,.94);display:grid;place-items:center;
}
.scan-view{
  height:240px;border-radius:16px;background:#111;overflow:hidden;position:relative;
  display:grid;place-items:center;color:#fff;
}
.scan-view:after{
  content:"";width:168px;height:168px;border:2px solid var(--jx);border-radius:16px;
}
.m-stat{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:10px 0}
.m-stat .cell{margin:0}
.ios-group{
  background:#fff;border-radius:12px;overflow:hidden;margin:10px 0;
  box-shadow:0 1px 2px rgba(0,0,0,.04);
}
.ios-group .row{padding:13px 14px;margin:0}
.rate{font-size:12px;color:var(--sub)}
.sold{font-size:11px;color:var(--mute)}
.grab{
  height:36px;padding:0 20px;border-radius:8px;border:0;
  background:var(--jx);color:#fff;font-size:14px;font-weight:750;
}

.phone-screen .brand{color:var(--price)}
.phone-screen .chat-bubble.me{background:var(--jx);color:#fff}