* { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
body {
  font-family:"PingFang SC","Microsoft YaHei",sans-serif;
  background:#f5f6f8; color:#222;
  min-height:100vh; padding-bottom:90px;
}
.bg-layer { position:fixed; inset:0; z-index:0; background-size:cover; background-position:center; filter:blur(2px) brightness(.55); transform:scale(1.1); }
.page { position:relative; z-index:1; max-width:560px; margin:0 auto; padding:16px 14px; }

/* 商家头部 */
.shop-head { text-align:center; color:#fff; padding:26px 12px 22px; text-shadow:0 2px 8px rgba(0,0,0,.4); }
.shop-logo-wrap { width:84px; height:84px; margin:0 auto 12px; border-radius:50%; background:rgba(255,255,255,.92); display:flex; align-items:center; justify-content:center; overflow:hidden; border:3px solid #fff; box-shadow:0 6px 18px rgba(0,0,0,.3); }
.shop-logo { width:100%; height:100%; object-fit:cover; }
.shop-logo-fallback { font-size:40px; }
.shop-name { font-size:22px; font-weight:700; letter-spacing:1px; }
.shop-intro { font-size:13px; margin-top:6px; opacity:.92; padding:0 10px; }
.shop-addr { font-size:12px; margin-top:4px; opacity:.75; }

/* banner */
.banner { margin:8px 0 14px; border-radius:14px; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.12); }
.banner img { width:100%; display:block; height:150px; object-fit:cover; }

/* 功能网格 */
.mod-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px 10px; }
.mod-item {
  background:#fff; border-radius:14px; padding:16px 6px 12px; text-align:center;
  box-shadow:0 3px 10px rgba(0,0,0,.07); cursor:pointer; transition:transform .12s;
  user-select:none;
}
.mod-item:active { transform:scale(.95); }
.mod-item.disabled { opacity:.45; filter:grayscale(.6); pointer-events:none; transform:none; }
.mod-ico { width:44px; height:44px; margin:0 auto 8px; border-radius:12px; object-fit:cover; font-size:26px; line-height:44px; display:flex; align-items:center; justify-content:center; }
.mod-name { font-size:13px; color:#333; font-weight:600; }
.mod-item.hot .mod-name::after { content:"红包"; display:inline-block; margin-left:4px; font-size:10px; color:#fff; background:linear-gradient(90deg,#ff5f5f,#ff9a3d); border-radius:8px; padding:1px 5px; vertical-align:1px; }

/* 弹层 */
.mask { position:fixed; inset:0; background:rgba(0,0,0,.55); z-index:20; display:none; }
.modal {
  position:fixed; z-index:21; left:50%; top:50%; transform:translate(-50%,-50%) scale(.92);
  width:88%; max-width:420px; background:#fff; border-radius:18px;
  padding:22px 20px; box-shadow:0 18px 50px rgba(0,0,0,.3); opacity:0; transition:.2s; max-height:80vh; overflow-y:auto;
}
.modal.show { opacity:1; transform:translate(-50%,-50%) scale(1); }
.modal-title { font-size:18px; font-weight:700; text-align:center; margin-bottom:16px; }
.modal-body { font-size:14px; color:#444; line-height:1.8; }
.m-btn {
  display:block; width:100%; padding:13px; margin-top:12px; border:none; border-radius:12px;
  font-size:16px; font-weight:600; cursor:pointer; color:#fff; text-align:center;
}
.m-btn-primary { background:linear-gradient(90deg,#ff6b6b,#ff9a3d); }
.m-btn-blue { background:linear-gradient(90deg,#2b7fff,#4f9dff); }
.m-btn-green { background:linear-gradient(90deg,#00b894,#55efc4); color:#16623f; }
.m-btn-gray { background:#eef0f3; color:#666; }
.m-input { width:100%; padding:11px 12px; border:1px solid #e2e6ea; border-radius:10px; font-size:14px; margin-top:8px; }
.text-center { text-align:center; }
.muted { color:#999; font-size:12px; }

/* 流程步骤动画 */
.flow-anim { text-align:center; padding:20px 0; }
.spinner {
  width:58px; height:58px; margin:0 auto 14px; border-radius:50%;
  border:5px solid #eee; border-top-color:#ff9a3d; animation:spin 1s linear infinite;
}
@keyframes spin { to { transform:rotate(360deg); } }
.gray-box { background:#f7f8fa; border-radius:10px; padding:12px; font-size:13px; color:#555; margin-top:10px; border:1px dashed #d8dce1; }
.copy-btn { display:inline-block; background:#2b7fff; color:#fff; padding:6px 16px; border-radius:8px; font-size:13px; border:none; cursor:pointer; margin-top:8px; }

/* 红包弹出 */
.hb-pop { position:fixed; inset:0; z-index:40; background:rgba(0,0,0,.7); display:none; align-items:center; justify-content:center; }
.hb-card { position:relative; width:300px; background:linear-gradient(160deg,#ffe29a,#ffd27a); border-radius:20px; padding:34px 20px 26px; text-align:center; box-shadow:0 20px 60px rgba(0,0,0,.4); animation:popIn .3s; }
@keyframes popIn { from { transform:scale(.5); opacity:0; } to { transform:scale(1); opacity:1; } }
.hb-close { position:absolute; top:10px; right:16px; font-size:24px; color:#b08830; cursor:pointer; }
.hb-env { font-size:80px; animation:shake 1.2s infinite; }
@keyframes shake { 0%,100%{transform:rotate(-6deg);} 50%{transform:rotate(6deg);} }
.hb-amount { font-size:44px; font-weight:800; color:#e3412f; margin:10px 0 4px; }
.hb-amount small { font-size:16px; font-weight:600; }
.hb-tip { font-size:13px; color:#8a6d1f; }
.hb-btn { margin-top:16px; background:linear-gradient(90deg,#ff5f5f,#ff8a3d); color:#fff; border:none; border-radius:50px; padding:11px 42px; font-size:15px; font-weight:700; cursor:pointer; }

/* 立鹏科技版权 */
.user-footer { margin-top:22px; padding:16px 0 26px; text-align:center; font-size:13px; letter-spacing:1px; color:#fff; font-weight:600; text-shadow:0 1px 3px rgba(0,0,0,.35); }
