/* ==========================================================
   怪兽 UI 主题（点单端第二款皮肤）— 1:1 仿照参考站
   参考：gssjzdj.shangfencloub.com（怪兽三角洲俱乐部）
   作用域：body.monster-theme（shopMode + uiTheme=monster）
   ========================================================== */
.monster-theme { --mth-gold: #FAC423; --mth-red: #E54D42; --mth-price: #FC630A; --mth-brown: #A26D47; }

/* ---------- 页面骨架：顶部黄色光晕 + 浅灰底 ---------- */
.monster-theme #pages .page { background: #F5F7FA; }
.monster-theme .mth-wrap { min-height: 100%; padding-bottom: 20px; }
.monster-theme .mth-topbg {
  position: absolute; left: 0; right: 0; top: 0; height: 300px; pointer-events: none;
  background:
    radial-gradient(68.2% 98.4% at -14.2% -11.5%, rgba(255,195,3,.31), rgba(255,195,3,0)),
    radial-gradient(69.3% 99.9% at 89% 10%, rgba(255,195,3,.29), rgba(255,195,3,0));
}
.monster-theme .mth-body { position: relative; }

/* ---------- 顶栏：毛玻璃搜索 + 客服 ---------- */
.mth-header { display: flex; align-items: center; gap: 10px; padding: 12px; }
.mth-search {
  flex: 1; min-width: 0; height: 48px; padding: 5px 16px; border-radius: 24px;
  background: rgba(255,255,255,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 1px 10px rgba(0,0,0,.04), inset 0 1px rgba(255,255,255,.8);
  display: flex; align-items: center; gap: 6px; box-sizing: border-box; cursor: pointer;
}
.mth-search img { width: 16px; height: 16px; flex: none; }
.mth-search span { font-size: 13px; color: #999; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mth-service {
  width: 48px; height: 48px; min-width: 48px; border-radius: 24px; position: relative; cursor: pointer;
  background: rgba(255,255,255,.45); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.6); box-shadow: 0 1px 10px rgba(0,0,0,.04), inset 0 1px rgba(255,255,255,.8);
  display: flex; align-items: center; justify-content: center;
}
.mth-service img { width: 20px; height: 20px; }

/* ---------- 公告跑马灯 ---------- */
.mth-notice { margin: 10px 20px 0; background: #fff; border-radius: 12px; display: flex; align-items: center; gap: 8px; padding: 10px 12px; box-shadow: 0 1px 8px rgba(0,0,0,.04); }
.mth-notice-ic { flex: none; width: 19px; height: 19px; }
.mth-notice-box { flex: 1; min-width: 0; overflow: hidden; height: 19px; position: relative; }
.mth-notice-inner { display: flex; flex-direction: column; transition: transform .5s ease; }
.mth-notice-inner span { display: block; height: 19px; line-height: 19px; font-size: 14px; color: var(--mth-brown); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ---------- 首页金刚区（3 列图片卡） ---------- */
.mth-cats { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; padding: 14px 20px 4px; }
.mth-cat { position: relative; border-radius: 6px; overflow: hidden; aspect-ratio: 110/60; background: #fff; cursor: pointer; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.mth-cat img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mth-cat b { position: absolute; left: 0; right: 0; bottom: 0; font-size: 11px; color: #fff; padding: 8px 6px 4px; background: linear-gradient(transparent, rgba(0,0,0,.55)); font-weight: 600; }
.mth-cat-empty { grid-column: 1/-1; font-size: 12px; color: #999; text-align: center; padding: 8px 0; }

/* ---------- 限时秒杀 ---------- */
.mth-seckill { margin: 10px 10px 6px; padding: 10px; background: #fff; border-radius: 8px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.mth-sk-head { display: flex; align-items: baseline; padding: 0 2px 8px; }
.mth-sk-title { font-size: 16px; font-weight: 700; color: #222; }
.mth-sk-sub { margin-left: 8px; font-size: 11px; color: #999; }
.mth-sk-item { display: flex; align-items: stretch; padding: 8px 0; border-top: 1px solid #f2f2f2; }
.mth-sk-item:first-of-type { border-top: none; }
.mth-sk-cover { width: 90px; height: 90px; border-radius: 6px; flex: none; background: #f5f5f5 center/cover no-repeat; position: relative; }
.mth-sk-cover img { width: 100%; height: 100%; object-fit: cover; border-radius: 6px; display: block; }
.mth-sk-body { flex: 1; min-width: 0; margin-left: 10px; display: flex; flex-direction: column; justify-content: space-between; }
.mth-sk-name { font-size: 14px; color: #222; line-height: 1.4; font-weight: 500; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }
.mth-sk-countdown { margin-top: 4px; font-size: 11px; color: var(--mth-red); }
.mth-sk-foot { display: flex; align-items: center; }
.mth-sk-pricebox { flex: 1; min-width: 0; display: flex; align-items: baseline; flex-wrap: wrap; }
.mth-sk-yen { font-size: 13px; color: var(--mth-red); font-weight: 700; }
.mth-sk-price { font-size: 18px; color: var(--mth-red); font-weight: 700; line-height: 1; }
.mth-sk-origin { margin-left: 5px; font-size: 11px; color: #bbb; text-decoration: line-through; }
.mth-sk-fold { margin-left: 5px; font-size: 10px; color: #fff; background: linear-gradient(90deg,#FF8A65,#E54D42); border-radius: 3px; padding: 1px 4px; }
.mth-sk-btn { flex: none; margin-left: 8px; padding: 5px 11px; font-size: 12px; color: #fff; background: var(--mth-red); border-radius: 14px; line-height: 1.2; border: none; }
.mth-sk-progwrap { display: flex; align-items: center; margin-top: 6px; }
.mth-sk-progtrack { flex: 1; height: 7px; background: #f3e6e4; border-radius: 7px; overflow: hidden; }
.mth-sk-progbar { height: 100%; background: linear-gradient(90deg,#FF8A65,#E54D42); border-radius: 7px; transition: width .3s ease; }
.mth-sk-progtext { margin-left: 6px; font-size: 10px; color: var(--mth-red); flex: none; min-width: 45px; text-align: right; }

/* ---------- 商品卡片（2 列） ---------- */
.mth-goods { display: flex; flex-wrap: wrap; padding: 4px 4px 8px; box-sizing: border-box; }
.mth-gcard { width: 50%; box-sizing: border-box; padding: 4px; }
.mth-gcard-inner { overflow: hidden; border-radius: 10px; background: #fff; box-shadow: 2px 2px 3px rgba(0,0,0,.1), -2px 2px 3px rgba(0,0,0,.1); cursor: pointer; }
.mth-gcover { width: 100%; height: 160px; overflow: hidden; position: relative; background: #0E1620 center/cover no-repeat; }
.mth-gcover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mth-baoka {
  position: absolute; top: 8px; right: -22px; width: 76px; text-align: center; font-size: 10px; color: #4A2A00;
  font-weight: 700; padding: 2px 0; transform: rotate(38deg);
  background: linear-gradient(90deg,#FFD666,#FFA940); box-shadow: 0 1px 4px rgba(0,0,0,.18);
}
.mth-gbody { padding: 8px 10px 10px; }
.mth-gtitle { display: flex; align-items: center; line-height: 17px; min-width: 0; }
.mth-gtitle i { width: 3.5px; height: 15px; background: #000; flex: none; border-radius: 2px; }
.mth-gtitle b { margin-left: 3px; font-size: 15px; color: #000; font-weight: 800; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mth-gdesc { margin-top: 2px; overflow: hidden; max-height: 30px; font-size: 12px; color: #343536; line-height: 1.25; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; word-break: break-all; }
.mth-gprice { display: flex; align-items: center; min-width: 0; margin-top: 4px; }
.mth-gprice .yen { font-size: 13px; color: #F50B00; font-weight: 800; flex: none; }
.mth-gprice .val { font-size: 15px; color: var(--mth-price); font-weight: 800; flex: none; }
.mth-gprice .orig { color: gray; text-decoration: line-through; font-size: 13px; margin-left: 4px; flex: none; }
.mth-gprice .sold { color: gray; font-size: 11px; margin-left: auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mth-gbuy { flex: none; margin-left: 6px; border: none; background: linear-gradient(90deg,#FF8A65,#E54D42); color: #fff; font-size: 11px; border-radius: 999px; padding: 4px 10px; }
.mth-empty { text-align: center; color: #999; font-size: 13px; padding: 36px 0; }

/* ---------- 分类页 ---------- */
.mth-cattop { padding: 12px 12px 6px; }
.mth-catchips { display: flex; gap: 8px; overflow-x: auto; padding: 0 12px 10px; scrollbar-width: none; }
.mth-catchips::-webkit-scrollbar { display: none; }
.mth-catchip { flex: none; font-size: 13px; color: #666; background: #fff; border-radius: 999px; padding: 6px 14px; border: 1px solid #EEE; cursor: pointer; }
.mth-catchip.on { color: #fff; background: linear-gradient(90deg,#FFC53D,#FA8C16); border-color: transparent; font-weight: 600; }

/* ---------- 选人页 ---------- */
.mth-pick { padding: 12px; }
.mth-pick-biz { display: flex; gap: 10px; margin-bottom: 12px; }
.mth-pick-bizbtn { flex: 1; border: none; border-radius: 10px; padding: 12px 0; font-size: 14px; font-weight: 700; color: #fff; background: linear-gradient(135deg,#2B3A4B,#1B2530); cursor: pointer; }
.mth-pick-bizbtn.on { background: linear-gradient(135deg,#FFC53D,#FA8C16); color: #4A2A00; }
.mth-pcard { display: flex; align-items: center; gap: 10px; background: #fff; border-radius: 12px; padding: 12px; margin-bottom: 10px; box-shadow: 0 1px 6px rgba(0,0,0,.05); cursor: pointer; }
.mth-pava { width: 52px; height: 52px; border-radius: 50%; flex: none; object-fit: cover; background: #f0f0f0; }
.mth-pinfo { flex: 1; min-width: 0; }
.mth-pname { font-size: 15px; font-weight: 700; color: #1D2129; display: flex; align-items: center; gap: 6px; }
.mth-pname i { font-style: normal; font-size: 10px; border-radius: 4px; padding: 1px 5px; }
.mth-pname i.f { background: #FFE3EC; color: #EB2F96; }
.mth-pname i.m { background: #E6F4FF; color: #1677FF; }
.mth-ponline { font-size: 10px; color: #52C41A; }
.mth-ponline.off { color: #999; }
.mth-psub { font-size: 11px; color: #86909C; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mth-pbtn { flex: none; border: none; background: linear-gradient(90deg,#FFC53D,#FA8C16); color: #4A2A00; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 7px 14px; }

/* ---------- 消息页 ---------- */
.monster-theme [data-page="shopMessage"] { background: linear-gradient(180deg,#FFF7E0 0%,#FFFDF6 220px,#F5F7FA 480px); }
.mth-msgseg { display: flex; background: #fff; border-radius: 999px; padding: 3px; margin: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.05); }
.mth-msgseg span { flex: 1; text-align: center; font-size: 13px; color: #666; border-radius: 999px; padding: 8px 0; cursor: pointer; }
.mth-msgseg span.on { background: #1D2129; color: #fff; font-weight: 600; }
.mth-msgrow { display: flex; align-items: center; gap: 12px; background: #fff; border-radius: 12px; margin: 0 12px 10px; padding: 14px; box-shadow: 0 1px 6px rgba(0,0,0,.05); cursor: pointer; }
.mth-msgic { width: 42px; height: 42px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg,#FFE58F,#FFC53D); }
.mth-msgic.green { background: linear-gradient(135deg,#B7EB8F,#52C41A); }
.mth-msgic svg { width: 22px; height: 22px; }
.mth-msginfo { flex: 1; min-width: 0; }
.mth-msginfo b { display: block; font-size: 15px; color: #1D2129; }
.mth-msginfo span { display: block; font-size: 12px; color: #86909C; margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mth-msgbadge { flex: none; min-width: 18px; height: 18px; border-radius: 999px; background: #FF4D4F; color: #fff; font-size: 11px; font-style: normal; display: flex; align-items: center; justify-content: center; padding: 0 5px; }
.mth-msg-empty { text-align: center; color: #999; font-size: 13px; padding: 40px 0; }

/* ---------- 我的页 ---------- */
.monster-theme [data-page="shopMine"] { background: linear-gradient(180deg,#FFE58F 0%,#FFF7E0 200px,#F5F7FA 460px); }
.mth-minehero { position: relative; padding: 18px 16px 14px; display: flex; align-items: center; gap: 14px; }
.mth-mineava { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; background: #fff; box-shadow: 0 2px 8px rgba(0,0,0,.08); flex: none; }
.mth-mineinfo { flex: 1; min-width: 0; }
.mth-minename { font-size: 19px; font-weight: 800; color: #1D2129; display: flex; align-items: center; gap: 6px; }
.mth-minelv { font-size: 10px; color: #4A2A00; background: linear-gradient(90deg,#FFD666,#FFA940); border-radius: 4px; padding: 1px 6px; font-weight: 700; }
.mth-mineid { font-size: 12px; color: #8C6D1F; margin-top: 4px; }
.mth-minegear { position: absolute; top: 16px; right: 14px; width: 34px; height: 34px; border-radius: 50%; background: rgba(255,255,255,.6); border: none; display: flex; align-items: center; justify-content: center; cursor: pointer; }
.mth-mineboss { position: absolute; top: 16px; right: 56px; border: none; background: rgba(255,255,255,.75); color: #4A2A00; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 6px 12px; cursor: pointer; }
.mth-mcard { background: #fff; border-radius: 12px; margin: 0 12px 12px; padding: 12px; box-shadow: 0 1px 8px rgba(0,0,0,.05); }
.mth-mcard-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.mth-mcard-head b { font-size: 15px; color: #1D2129; }
.mth-mcard-head span { font-size: 12px; color: #999; cursor: pointer; }
.mth-ogrid { display: grid; grid-template-columns: repeat(5,1fr); }
.mth-og { text-align: center; cursor: pointer; position: relative; }
.mth-ogic { position: relative; display: inline-block; }
.mth-ogic img { width: 34px; height: 34px; }
.mth-ogic i { position: absolute; top: -4px; right: -8px; min-width: 16px; height: 16px; border-radius: 999px; background: #FF4D4F; color: #fff; font-size: 10px; font-style: normal; display: flex; align-items: center; justify-content: center; padding: 0 4px; }
.mth-og span.mth-ogl { display: block; font-size: 11px; color: #666; margin-top: 5px; }
.mth-balrow { display: flex; gap: 12px; }
.mth-balbox { flex: 1; background: #1D2129; border-radius: 12px; padding: 14px; color: #fff; }
.mth-balbox span { font-size: 12px; color: rgba(255,255,255,.75); }
.mth-balbox b { display: block; font-size: 22px; font-weight: 800; margin-top: 4px; }
.mth-kfbtn { flex: 1; border: none; border-radius: 12px; background: linear-gradient(135deg,#FFD666,#FFA940); color: #4A2A00; font-size: 15px; font-weight: 800; cursor: pointer; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; }
.mth-kfbtn small { font-size: 10px; font-weight: 400; opacity: .75; }
.mth-fgrid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px 0; }
.mth-fg { text-align: center; cursor: pointer; }
.mth-fg svg { width: 24px; height: 24px; color: #FA8C16; }
.mth-fg span { display: block; font-size: 11px; color: #666; margin-top: 5px; }
/* 真实 PNG 图标尺寸（1:1 还原，替代手绘 SVG 占位） */
.mth-icimg { width: 22px; height: 22px; object-fit: contain; display: inline-block; vertical-align: middle; }
.mth-msgic img { width: 24px; height: 24px; object-fit: contain; }
.mth-fg img { width: 24px; height: 24px; object-fit: contain; }
/* 更多功能：线性描边图标加深，避免过淡 */
.mth-mcard .mth-fg img.mth-icimg[src*="fn-"], .mth-mcard .mth-fg img.mth-icimg[src*="ic-pool"] { filter: brightness(.6); }
.mth-balbox img.mth-icimg { width: 20px; height: 20px; margin-right: 6px; vertical-align: middle; }
.mth-kfbtn img.mth-icimg { width: 22px; height: 22px; margin-bottom: 3px; }
.mth-mineava.mth-icimg, .mth-minehero img { object-fit: cover; }
.mth-noticecard { background: #fff; border-radius: 12px; margin: 0 12px 12px; padding: 12px; box-shadow: 0 1px 8px rgba(0,0,0,.05); }
.mth-noticecard h4 { margin: 0 0 8px; font-size: 15px; color: #1D2129; }
.mth-noticecard .mth-ntc-body { font-size: 13px; color: #4E5969; line-height: 1.7; max-height: 180px; overflow: auto; white-space: pre-wrap; word-break: break-all; }
.mth-logout { display: block; width: calc(100% - 24px); margin: 4px 12px 16px; border: none; background: #fff; color: #86909C; font-size: 14px; border-radius: 999px; padding: 12px 0; cursor: pointer; box-shadow: 0 1px 8px rgba(0,0,0,.05); }

/* ---------- 怪兽 Tabbar ---------- */
.monster-theme #tabbar .tab { color: #ABA9A9; }
.monster-theme #tabbar .tab.on { color: var(--mth-gold); }
.monster-theme #tabbar .mth-tab-ic { width: 24px; height: 24px; display: block; margin: 0 auto; }
.monster-theme #tabbar .tab:not(.on) .mth-tab-ic { filter: grayscale(1); opacity: .55; }
.monster-theme #tabbar .tab-badge { background: #FF4D4F; }

/* ---------- 怪兽风格弹窗/详情页微调 ---------- */
.monster-theme .navbar { background: rgba(255,255,255,.92); }
.monster-theme .sub-tabs.plain { background: #fff; }

/* ---------- 搜索页（怪兽） ---------- */
.monster-theme [data-page="shopSearch"] .mth-ss-bar {
  background:
    radial-gradient(68.2% 98.4% at -14.2% -11.5%, rgba(255,195,3,.31), rgba(255,195,3,0)),
    radial-gradient(69.3% 99.9% at 89% 10%, rgba(255,195,3,.29), rgba(255,195,3,0)),
    #FFFDF5;
  padding: 12px 12px 14px;
}
.monster-theme [data-page="shopSearch"] .mth-ss-bar .sh-search {
  background: rgba(255,255,255,.55); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255,255,255,.7); border-radius: 24px; height: 48px; color: #999;
}
.monster-theme [data-page="shopSearch"] .mth-ss-bar .sh-search input { color: #1D2129; }
.monster-theme [data-page="shopSearch"] .mth-ss-bar .sh-cs-btn {
  background: linear-gradient(135deg, #FFD54D, #FAC423); color: #1D2129; font-weight: 700;
  border: none; border-radius: 24px; height: 48px; padding: 0 20px;
}
.monster-theme [data-page="shopSearch"] .mth-ss-scroll { background: #F5F7FA; }
.monster-theme [data-page="shopSearch"] .mth-ss-hot { background: #fff; margin: 10px; border-radius: 12px; padding: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.monster-theme [data-page="shopSearch"] .ss-hot { background: #fff; margin: 10px; border-radius: 12px; padding: 12px; box-shadow: 0 1px 6px rgba(0,0,0,.04); }
.monster-theme [data-page="shopSearch"] .ss-hot-t { font-size: 13px; font-weight: 700; color: #1D2129; margin-bottom: 8px; }
.monster-theme [data-page="shopSearch"] .ss-hot-row { display: flex; flex-wrap: wrap; gap: 8px; }
.monster-theme [data-page="shopSearch"] .ss-hot-k { font-size: 12px; color: #666; background: #F5F5F5; border-radius: 999px; padding: 5px 12px; cursor: pointer; }
.monster-theme [data-page="shopSearch"] .ss-hot-k:active { background: #FFF6DC; color: #A26D47; }
/* 怪兽搜索页商品网格：两列卡片 */
.monster-theme [data-page="shopSearch"] #ssGrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 0 10px; }
.monster-theme [data-page="shopSearch"] #ssGrid .ca-empty { grid-column: 1 / -1; }
/* 带导航栏的怪兽页面：灵动岛下移避让 */
.monster-theme.mth-island-on [data-page="shopSearch"] .navbar { margin-top: 40px; }