/* ===== 羽逸电竞 · 手机网站风格（浅粉紫 · 可爱电竞） ===== */
:root {
  --bg: #fdf3fb; --bg2: #f6e9fc;
  --pink: #ff8fc8; --pink-soft: #ffd9ee;
  --purple: #b07cf0; --purple-soft: #e7d6ff;
  --deep: #7c4dd6; --text: #5b4a6b; --text-2: #927fa6;
  --card: #ffffff; --line: #f1e2f3;
  --shadow: 0 10px 30px rgba(176,124,240,.14);
  --shadow-s: 0 4px 14px rgba(176,124,240,.12);
  --grad: linear-gradient(135deg, #ffd6ef 0%, #ead2ff 55%, #d9c6ff 100%);
  --grad2: linear-gradient(135deg, #ff9ed1, #b07cf0);
  --radius: 16px;
  /* 霓虹点缀 */
  --neon-pink: #ff5fd0; --neon-purple: #a06bff;
  --neon-cyan: #3df0ff;
  --neon-glow: 0 0 14px rgba(255,95,208,.5);
  --neon-glow-p: 0 0 14px rgba(160,107,255,.45);
  --neon-glow-c: 0 0 14px rgba(61,240,255,.55);
  --es-edge: linear-gradient(90deg, var(--neon-pink), var(--neon-cyan));
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; padding: 0; }
body {
  font-family: "PingFang SC", "HarmonyOS Sans SC", "Microsoft YaHei", -apple-system, "Noto Color Emoji", "Helvetica Neue", Arial, sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 500px at 80% -10%, #ffe3f4 0%, rgba(255,227,244,0) 60%),
    radial-gradient(900px 500px at 0% 0%, #e9d8ff 0%, rgba(233,216,255,0) 55%),
    var(--bg);
  min-height: 100vh;
}

/* 底部导航栏 */
.tabbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); border-top: 1px solid var(--line); box-shadow: 0 -6px 22px rgba(176,124,240,.10); padding: 6px 4px calc(6px + env(safe-area-inset-bottom)); }
.tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px 0; cursor: pointer; color: var(--text-2); text-decoration: none; font-size: 11px; position: relative; transition: .2s; }
.tab-item .ic { font-size: 21px; line-height: 1; filter: grayscale(.35); transition: .2s; }
.tab-item.on { color: var(--deep); }
.tab-item.on .ic { filter: none; transform: translateY(-1px) scale(1.08); }
.tab-item.cs .ic { color: #fff; background: var(--grad2); width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; box-shadow: var(--shadow-s); }
.tab-item.cs.on .ic { transform: scale(1.08); }
.tab-item .bdg { position: absolute; top: 0; right: 50%; margin-right: -24px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; background: #ff4f6d; color: #fff; font-size: 10px; display: grid; place-items: center; border: 2px solid #fff; }

/* 主区域 */
.site-main { max-width: 860px; margin: 0 auto; padding: 16px 14px 88px; }
.wrap { width: 100%; }
.view { display: none; }
.view.on { display: block; animation: fade .3s ease; }
@keyframes fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* 首页 hero */
.hero { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; background: var(--grad); border-radius: 20px; padding: 20px 22px; box-shadow: var(--shadow); position: relative; overflow: hidden; margin-bottom: 16px; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: var(--hero-bg, url('images/hero-bg.jpg')); background-size: cover; background-position: center; opacity: var(--hero-op, .18); z-index: 0; }
.hero::after { content: "🎮💜🎀"; position: absolute; right: 12px; bottom: -8px; font-size: 64px; opacity: .12; z-index: 1; }
.hero .brand { display: flex; align-items: center; gap: 11px; position: relative; z-index: 1; }
.hero .brand img { width: 76px; height: 76px; border-radius: 18px; object-fit: cover; box-shadow: var(--shadow-s); flex: 0 0 auto; }
.hero .bt b { font-size: 23px; color: var(--deep); display: block; }
.hero .bt i { font-size: 12px; color: #8a6fb0; font-style: normal; }
.hero .live { display: inline-flex; align-items: center; gap: 5px; margin-top: 7px; font-size: 11px; color: #fff; background: rgba(124,77,214,.85); padding: 3px 9px; border-radius: 999px; }
.hero .live em { width: 6px; height: 6px; border-radius: 50%; background: #7CFFB0; box-shadow: 0 0 0 3px rgba(124,255,176,.4); animation: blink 1.4s infinite; }
@keyframes blink { 50% { opacity: .4; } }
.hero .notice { margin-left: auto; max-width: 360px; display: flex; gap: 8px; align-items: center; background: rgba(255,255,255,.7); border-radius: 13px; padding: 10px 13px; font-size: 13px; position: relative; z-index: 1; }
.hero .notice span { font-size: 16px; flex: 0 0 auto; }
.hero .notice .txt { flex: 1; min-width: 0; color: #6b5682; overflow: hidden; }
.hero .notice .txt .track { display: inline-flex; white-space: nowrap; animation: marquee 14s linear infinite; }
.hero .notice .txt .track span { flex: 0 0 auto; padding-right: 50px; white-space: nowrap; }
@keyframes marquee { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } }

/* 轮播 */
.swiper { position: relative; border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 16px; touch-action: pan-y; }
.swiper .track { display: flex; transition: transform .5s ease; }
.swiper .slide { flex: 0 0 100%; position: relative; cursor: pointer; }
.swiper .slide img { width: 100%; height: 200px; object-fit: cover; display: block; }
.swiper .cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 26px 18px 14px; color: #fff; font-size: 17px; font-weight: 700; background: linear-gradient(transparent, rgba(80,40,120,.55)); display: flex; justify-content: space-between; align-items: end; }
.swiper .cap em { font-style: normal; font-size: 13px; background: var(--grad2); padding: 3px 10px; border-radius: 999px; }
.dots { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); display: flex; gap: 6px; z-index: 3; }
.dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(255,255,255,.55); transition: .3s; cursor: pointer; }
.dots i.on { width: 20px; border-radius: 999px; background: #fff; }

/* 四宫格入口 */
.entries { display: grid; grid-template-columns: repeat(4, 1fr); gap: 9px; margin-bottom: 20px; }
.entry { position: relative; background: var(--card); border-radius: var(--radius); padding: 11px 4px; text-align: center; cursor: pointer; box-shadow: var(--shadow-s); transition: .22s; border: 1px solid var(--line); }
.entry:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.entry img { width: 30px; height: 30px; object-fit: contain; margin-bottom: 4px; }
.entry b { display: block; font-size: 12px; color: var(--deep); }
.entry i { font-style: normal; font-size: 10px; color: var(--text-2); }
.entry .dot { position: absolute; top: 9px; right: 9px; font-size: 9px; color: #fff; background: #ff5fa2; padding: 2px 6px; border-radius: 999px; }

/* 区块 */
.sec { margin-bottom: 22px; }
.sec-hd { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; }
.sec-hd .bar { width: 5px; height: 18px; border-radius: 4px; background: var(--grad2); }
.sec-hd b { font-size: 18px; color: var(--text); }
.sec-hd i { font-style: normal; font-size: 12px; color: var(--text-2); }
.sec-hd .more { margin-left: auto; font-size: 12px; color: var(--deep); cursor: pointer; background: var(--pink-soft); padding: 4px 11px; border-radius: 999px; }
.hgrid, .hscroll { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }

/* 单子卡片 */
.ocard { background: var(--card); border-radius: var(--radius); overflow: hidden; cursor: pointer; box-shadow: var(--shadow-s); transition: .22s; border: 1px solid var(--line); display: flex; flex-direction: column; }
.ocard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.ocard .thumb { position: relative; aspect-ratio: 4/3; overflow: hidden; }
.ocard .thumb img { width: 100%; height: 100%; object-fit: cover; transition: .3s; }
.ocard:hover .thumb img { transform: scale(1.05); }
.ocard .tag { position: absolute; left: 7px; top: 7px; font-size: 10px; color: #fff; background: var(--grad2); padding: 2px 8px; border-radius: 999px; }
.ocard .zoom { position: absolute; right: 7px; bottom: 7px; font-size: 10px; color: #fff; background: rgba(60,30,90,.5); padding: 2px 7px; border-radius: 999px; }
.ocard .bd { padding: 11px 12px 13px; }
.ocard .bd b { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.ocard .sub { font-size: 11px; color: var(--text-2); margin: 3px 0 7px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ocard .pr { display: flex; align-items: baseline; gap: 7px; }
.ocard .pr strong { color: #ff4fa3; font-size: 17px; }
.ocard .pr s { color: #c2b2cf; font-size: 11px; }
.ocard .pr span { font-size: 11px; color: var(--text-2); margin-left: auto; }

/* 热门套餐 */
.hotbox { background: linear-gradient(135deg,#fff,#fff6fc); border: 1px solid var(--pink-soft); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); position: relative; overflow: hidden; }
.hotbox::before { content: ""; position: absolute; inset: 0; background-image: var(--hot-bg, none); background-size: cover; background-position: center; opacity: var(--hot-op, 0); z-index: 0; border-radius: 20px; }
.hotbox .hb-hd, .hotbox .hswipe { position: relative; z-index: 1; }
.hb-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.hb-hd b { font-size: 17px; }
.hb-hd i { font-style: normal; font-size: 12px; color: var(--text-2); }
.hb-hd .go { margin-left: auto; font-size: 12px; color: #fff; background: var(--grad2); padding: 4px 12px; border-radius: 999px; cursor: pointer; }
/* 热门套餐 - 左右滑动 */
.hswipe { display: flex; gap: 11px; overflow-x: auto; padding: 4px 2px 10px; margin: 0 -2px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.hswipe::-webkit-scrollbar { display: none; }
.hslide { flex: 0 0 auto; width: 176px; display: flex; flex-direction: column; background: #fff; border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-s); cursor: pointer; scroll-snap-align: start; transition: .2s; border: 1px solid var(--pink-soft); }
.hslide:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.hslide .pic { width: 100%; height: 138px; flex: 0 0 auto; background: var(--purple-soft); }
.hslide .pic img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hslide .info { flex: 1; min-width: 0; padding: 9px 10px 11px; display: flex; flex-direction: column; justify-content: center; }
.hslide .info b { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.hslide .sub { font-size: 11px; color: var(--text-2); margin: 3px 0 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hslide .tags { display: none; }
.hslide .bt { display: flex; align-items: baseline; gap: 4px; margin-top: 7px; }
.hslide .bt strong { color: #ff4fa3; font-size: 17px; }
.hslide .bt span { font-size: 11px; color: var(--text-2); }

/* 爆款专区 */
.boom { background: linear-gradient(135deg,#fff0f7,#f3e8ff); border: 1px solid var(--pink-soft); border-radius: 20px; padding: 16px; box-shadow: var(--shadow); }
.bm-hd { display: flex; align-items: center; gap: 7px; margin-bottom: 12px; }
.bm-hd b { font-size: 17px; }
.bm-hd i { font-style: normal; font-size: 12px; color: var(--text-2); }
.bm-hd .cd { margin-left: auto; font-size: 11px; color: #fff; background: linear-gradient(135deg,#ff6ba6,#ff9a3d); padding: 4px 10px; border-radius: 999px; display: inline-flex; align-items: center; gap: 4px; box-shadow: 0 0 12px rgba(255,107,166,.45); }
.bm-hd .cd .cd-ico { font-size: 12px; animation: cdPulse 1s ease-in-out infinite; }
.bm-hd .cd em { font-style: normal; font-weight: 700; font-variant-numeric: tabular-nums; min-width: 15px; text-align: center; }
.bm-hd .cd.urgent { background: linear-gradient(135deg,#ff3b3b,#ff7a3d); box-shadow: 0 0 16px rgba(255,59,59,.6); animation: cdFlash .8s ease-in-out infinite; }
@keyframes cdPulse { 0%,100% { transform: scale(1); opacity:.9 } 50% { transform: scale(1.18); opacity:1 } }
@keyframes cdFlash { 0%,100% { opacity:1 } 50% { opacity:.65 } }
/* 爆款专区 - 展示全部单子，一排两个网格 */
.blist { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.bcard { position: relative; display: flex; flex-direction: column; background: #fff; border-radius: 14px; padding: 0; cursor: pointer; box-shadow: var(--shadow-s); overflow: hidden; transition: .22s; }
.bcard:hover { transform: translateY(-2px); box-shadow: var(--shadow); }
.bcard .badge { position: absolute; top: 13px; left: -32px; width: 120px; height: auto; object-fit: contain; transform: rotate(-45deg); transform-origin: center; z-index: 3; filter: drop-shadow(0 2px 4px rgba(0,0,0,.22)); }
.bcard .badge-txt { position: absolute; top: 13px; left: -32px; width: 120px; text-align: center; background: linear-gradient(135deg,#ff5fae,#ff9a3d); color: #fff; font-size: 11px; font-weight: 700; padding: 5px 0; transform: rotate(-45deg); transform-origin: center; box-shadow: 0 2px 6px rgba(0,0,0,.2); z-index: 3; white-space: nowrap; }
.bcard .pic { width: 100%; height: 152px; border-radius: 0; object-fit: cover; flex: 0 0 auto; }
.bcard .bd { flex: 1; min-width: 0; padding: 9px 10px 10px; display: flex; flex-direction: column; }
.bcard .bd b { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.bcard .bd .sub { font-size: 11px; color: var(--text-2); margin: 3px 0 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bcard .pr { display: flex; align-items: center; gap: 5px; margin-top: 8px; }
.bcard .pr strong { color: #ff4fa3; font-size: 16px; }
.bcard .pr s { color: #c2b2cf; font-size: 11px; }
.bcard .pr .go { margin-left: auto; font-size: 11px; color: #fff; background: linear-gradient(135deg,#ff5fae,#ff9a3d); padding: 3px 10px; border-radius: 999px; }

/* 打手 */
.pbanner { background: var(--grad); border-radius: 20px; padding: 18px 22px; box-shadow: var(--shadow); margin-bottom: 16px; display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.pbanner b { font-size: 22px; color: var(--deep); }
.pbanner i { font-style: normal; font-size: 13px; color: #8a6fb0; }
.pbanner .stat { margin-left: auto; display: flex; gap: 18px; }
.pbanner .stat div { font-size: 11px; color: #8a6fb0; text-align: center; }
.pbanner .stat em { display: block; font-size: 18px; font-style: normal; color: var(--deep); font-weight: 700; }
.plist { display: grid; grid-template-columns: 1fr; gap: 14px; }
.pcard { display: flex; gap: 13px; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 13px; box-shadow: var(--shadow-s); cursor: pointer; transition: .22s; }
.pcard:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.pcard .av { position: relative; width: 70px; height: 70px; flex: 0 0 auto; }
.pcard .av img { width: 70px; height: 70px; border-radius: 15px; object-fit: cover; }
.pcard .av .on { position: absolute; right: 0; bottom: 0; font-size: 9px; color: #fff; background: #36c98a; padding: 2px 6px; border-radius: 999px; border: 2px solid #fff; }
.pcard .info { flex: 1; min-width: 0; }
.pcard .r1 { display: flex; align-items: center; gap: 7px; }
.pcard .r1 b { font-size: 15px; }
.pcard .g { font-size: 10px; color: #fff; background: var(--pink); padding: 2px 7px; border-radius: 999px; }
.pcard .star { font-size: 11px; color: #ffac33; margin-left: auto; }
.pcard .lv { font-size: 11px; color: var(--text-2); margin: 3px 0; }
.pcard .intro { font-size: 11px; color: var(--text-2); margin-bottom: 5px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pcard .tags { display: flex; gap: 5px; flex-wrap: wrap; }
.pcard .tags em { font-style: normal; font-size: 10px; color: var(--deep); background: var(--purple-soft); padding: 2px 7px; border-radius: 999px; }
.pcard .bt { display: flex; align-items: center; gap: 5px; margin-top: 7px; }
.pcard .bt strong { color: #ff4fa3; font-size: 17px; }
.pcard .bt span { font-size: 10px; color: var(--text-2); }
.pcard .bt .btn { margin-left: auto; font-size: 12px; color: #fff; background: var(--grad2); padding: 6px 13px; border-radius: 999px; }

/* 我的 */
.mine-hd { background: var(--grad); border-radius: 20px; padding: 20px; box-shadow: var(--shadow); margin-bottom: 14px; }
.mine-hd .u { display: flex; align-items: center; gap: 13px; }
.mine-hd .u img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; border: 3px solid #fff; box-shadow: var(--shadow-s); }
.mine-hd .u b { font-size: 17px; color: var(--deep); display: block; }
.mine-hd .u i { font-size: 11px; color: #8a6fb0; font-style: normal; }
.mine-hd .vip { display: inline-block; margin-top: 5px; font-size: 11px; color: #fff; background: rgba(124,77,214,.8); padding: 3px 9px; border-radius: 999px; }
.mine-card { background: var(--card); border-radius: 16px; padding: 16px; box-shadow: var(--shadow-s); margin-bottom: 14px; text-align: center; border: 1px solid var(--line); }
.mine-card .t { font-size: 16px; color: var(--deep); margin-bottom: 5px; }
.mine-card .d { font-size: 12px; color: var(--text-2); margin-bottom: 10px; }
.mine-card .nums { display: flex; justify-content: space-around; }
.mine-card .nums div { font-size: 11px; color: var(--text-2); }
.mine-card .nums em { display: block; font-size: 20px; font-style: normal; color: var(--deep); font-weight: 700; }
.cells { background: var(--card); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-s); border: 1px solid var(--line); }
.cell { display: flex; align-items: center; gap: 11px; padding: 14px 16px; cursor: pointer; border-bottom: 1px solid var(--line); font-size: 14px; }
.cell:last-child { border-bottom: none; }
.cell em { font-size: 17px; }
.cell .cnt { margin-left: auto; font-size: 12px; color: var(--deep); }
.cell .ar { margin-left: auto; color: var(--text-2); }
.cell:hover { background: var(--bg2); }

/* 列表 / 详情 / 历史 顶部栏 */
.navbar { display: flex; align-items: center; gap: 11px; margin-bottom: 14px; }
.navbar .back { width: 54px; height: 54px; border-radius: 50%; background: #fff; box-shadow: var(--shadow-s); display: flex; align-items: center; justify-content: center; cursor: pointer; font-size: 36px; line-height: 1; color: var(--deep); flex: 0 0 auto; margin: -4px 0; }
.navbar b { font-size: 17px; color: var(--text); }
.navbar .rt { margin-left: auto; font-size: 12px; color: #fff; background: var(--grad2); padding: 6px 13px; border-radius: 999px; cursor: pointer; }
.filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 14px; }
.chip { font-size: 12px; padding: 6px 13px; border-radius: 999px; background: #fff; color: var(--text-2); cursor: pointer; border: 1px solid var(--line); }
.chip.on { color: #fff; background: var(--grad2); border-color: transparent; }
.listbox { display: grid; grid-template-columns: 1fr; gap: 12px; }
.lrow { display: flex; gap: 13px; background: #fff; border: 1px solid var(--line); border-radius: 14px; padding: 11px; cursor: pointer; box-shadow: var(--shadow-s); transition: .2s; }
.lrow:hover { transform: translateY(-3px); box-shadow: var(--shadow); }
.lrow img { width: 88px; height: 88px; border-radius: 11px; object-fit: cover; flex: 0 0 auto; }
.lrow .info { flex: 1; min-width: 0; }
.lrow .info b { font-size: 15px; }
.lrow .sub { font-size: 11px; color: var(--text-2); margin: 3px 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lrow .tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 5px; }
.lrow .tags em { font-style: normal; font-size: 10px; color: var(--deep); background: var(--purple-soft); padding: 2px 7px; border-radius: 999px; }
.lrow .bt { display: flex; align-items: center; gap: 5px; }
.lrow .bt strong { color: #ff4fa3; font-size: 17px; }
.lrow .bt span { font-size: 11px; color: var(--text-2); }
.lrow .bt .btn { margin-left: auto; font-size: 12px; color: #fff; background: var(--grad2); padding: 6px 11px; border-radius: 999px; }

/* 详情 */
#view-detail .navbar { background: var(--card); border-radius: 13px; padding: 7px 11px; box-shadow: var(--shadow-s); }
.showbox { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); margin-bottom: 14px; }
.showbox .swiper { margin-bottom: 0; }
.showbox .slide img { height: 220px; }
.dcard { background: #fff; border-radius: 16px; padding: 18px; box-shadow: var(--shadow-s); border: 1px solid var(--line); margin-bottom: 14px; }
.dcard h2 { margin: 0 0 5px; font-size: 20px; color: var(--text); }
.dcard .sub { font-size: 13px; color: var(--text-2); margin-bottom: 10px; }
.dcard .prow { display: flex; align-items: center; gap: 8px; }
.dcard .prow strong { color: #ff4fa3; font-size: 24px; }
.dcard .prow s { color: #c2b2cf; }
.dcard .sales { margin-left: auto; font-size: 11px; color: var(--text-2); }
.block { background: #fff; border-radius: 16px; padding: 16px; box-shadow: var(--shadow-s); border: 1px solid var(--line); margin-bottom: 14px; }
.block .bh { display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.block .bh .bar { width: 5px; height: 16px; border-radius: 4px; background: var(--grad2); }
.block .bh b { font-size: 16px; }
.block .bh i { font-style: normal; font-size: 11px; color: var(--text-2); }
.block .full { width: 100%; border-radius: 12px; display: block; cursor: zoom-in; box-shadow: var(--shadow-s); }
.block .txt { font-size: 13px; line-height: 1.8; color: #6b5682; white-space: pre-wrap; }
.block.qr { text-align: center; }
.block.qr img { width: 150px; height: 150px; border-radius: 12px; box-shadow: var(--shadow-s); cursor: zoom-in; margin: 8px 0; }
.block.qr b { color: var(--deep); }
.block.qr i { font-style: normal; font-size: 11px; color: var(--text-2); display: block; }

/* 详情底栏（固定购买条） */
.dbar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; display: none; align-items: center; gap: 12px; background: rgba(255,255,255,.95); backdrop-filter: blur(10px); border-top: 1px solid var(--line); padding: 10px 16px; box-shadow: 0 -6px 20px rgba(176,124,240,.12); }
.dbar .fav { font-size: 21px; cursor: pointer; }
.dbar .lp { display: flex; align-items: baseline; gap: 4px; }
.dbar .lp strong { color: #ff4fa3; font-size: 22px; }
.dbar .lp span { font-size: 11px; color: var(--text-2); }
.dbar .rb { margin-left: auto; font-size: 15px; font-weight: 700; color: #fff; background: var(--grad2); padding: 11px 26px; border-radius: 999px; cursor: pointer; }
.dbar .rb:hover { filter: brightness(1.05); }

/* 悬浮客服 */
.float-cs { position: fixed; right: 18px; bottom: 70px; z-index: 55; width: 52px; height: 52px; border-radius: 50%; background: var(--grad2); color: #fff; font-size: 22px; display: grid; place-items: center; cursor: pointer; box-shadow: var(--shadow); }
.float-cs:hover { transform: scale(1.06); }
.float-cs .bdg { position: absolute; top: -2px; right: -2px; min-width: 17px; height: 17px; padding: 0 5px; border-radius: 999px; background: #ff4f6d; font-size: 10px; display: grid; place-items: center; border: 2px solid #fff; }

/* toast */
.toast { position: fixed; left: 50%; top: 70px; transform: translateX(-50%); background: rgba(60,30,90,.9); color: #fff; padding: 10px 18px; border-radius: 999px; font-size: 13px; opacity: 0; pointer-events: none; transition: .3s; z-index: 90; }
.toast.on { opacity: 1; }

/* 空状态 */
.empty { text-align: center; padding: 36px 18px; color: var(--text-2); }
.empty em { font-size: 38px; display: block; margin-bottom: 7px; }
.empty p { margin: 4px 0; font-size: 12px; }

/* 图片放大 */
.viewer { position: fixed; inset: 0; background: rgba(40,18,60,.92); display: none; z-index: 100; align-items: center; justify-content: center; }
.viewer.on { display: flex; }
.viewer .vimg { max-width: 92vw; max-height: 86vh; border-radius: 12px; cursor: zoom-in; box-shadow: 0 20px 60px rgba(0,0,0,.5); touch-action: none; transition: transform .18s ease; user-select: none; -webkit-user-drag: none; }
.viewer .close { position: absolute; top: 20px; right: 24px; color: #fff; font-size: 28px; cursor: pointer; }
.viewer .nav { position: absolute; top: 50%; transform: translateY(-50%); color: #fff; font-size: 38px; cursor: pointer; padding: 0 16px; user-select: none; }
.viewer .nav.l { left: 0; } .viewer .nav.r { right: 0; }
.viewer .idx { position: absolute; bottom: 24px; color: #fff; font-size: 13px; background: rgba(0,0,0,.4); padding: 4px 14px; border-radius: 999px; }
.viewer .ops { position: absolute; bottom: 24px; right: 24px; display: flex; gap: 12px; }
.viewer .ops b { color: #fff; font-size: 13px; cursor: pointer; background: rgba(255,255,255,.18); padding: 6px 12px; border-radius: 999px; }

/* 客服聊天 */
/* 客服聊天 - 独立全屏浮层 */
#view-chat { position: fixed; inset: 0; z-index: 90; background: #fff; }
#view-chat.on { display: flex; flex-direction: column; }
.chat { display: flex; flex-direction: column; height: 100%; overflow: hidden; }
.chat .navbar { margin: 0; border-radius: 0; padding: 13px 15px; box-shadow: none; border-bottom: 1px solid var(--line); background: var(--bg2); }
.chat-body { flex: 1; overflow-y: auto; padding: 16px; background: linear-gradient(180deg,#fff,#fbf4fc); }
.chat-time { text-align: center; font-size: 11px; color: var(--text-2); margin: 10px 0; }
.msg { display: flex; gap: 9px; margin-bottom: 13px; align-items: flex-start; }
.msg .av { width: 36px; height: 36px; border-radius: 50%; background: var(--purple-soft); display: grid; place-items: center; font-size: 19px; flex: 0 0 auto; overflow: hidden; }
.msg > div:nth-child(2) { flex: 0 0 auto; max-width: calc(100% - 45px); }
.msg .bub { background: #fff; border: 1px solid var(--line); border-radius: 13px; padding: 9px 13px; font-size: 13px; max-width: min(78vw, 280px); min-width: auto; line-height: 1.6; writing-mode: horizontal-tb; text-orientation: mixed; white-space: normal; word-break: break-word; flex-shrink: 0; }
.msg.me { flex-direction: row-reverse; }
.msg.me .bub { background: var(--grad2); color: #fff; border: none; }
.msg .bub img { max-width: 160px; border-radius: 9px; display: block; }
.chat-card { display: flex; gap: 9px; align-items: center; background: var(--bg2); border-radius: 11px; padding: 9px; cursor: pointer; }
.chat-card img { width: 44px; height: 44px; border-radius: 9px; object-fit: cover; }
.chat-card b { font-size: 12px; } .chat-card strong { display: block; color: #ff4fa3; font-size: 13px; }
.quick { display: flex; gap: 7px; flex-wrap: wrap; padding: 9px 13px; border-top: 1px solid var(--line); }
.quick b { font-size: 11px; color: var(--deep); background: var(--purple-soft); padding: 5px 11px; border-radius: 999px; cursor: pointer; }
.chat-in { display: flex; gap: 9px; padding: 11px 13px; border-top: 1px solid var(--line); }
.chat-in input { flex: 1; border: 1px solid var(--line); border-radius: 999px; padding: 10px 15px; font-size: 13px; outline: none; }
.chat-in input:focus { border-color: var(--purple); }
.chat-in .send { color: #fff; background: var(--grad2); padding: 0 20px; border-radius: 999px; display: grid; place-items: center; cursor: pointer; font-weight: 600; }

/* 底部 footer */
.site-foot { background: #fff; border-top: 1px solid var(--line); }
.site-foot .inner { max-width: 860px; margin: 0 auto; padding: 18px 16px; display: flex; flex-direction: column; align-items: center; gap: 0; text-align: center; }
.site-foot .slogan { font-size: 13px; color: var(--deep); letter-spacing: .3px; }

/* 响应式：桌面端更宽松 */
@media (min-width: 768px) {
  .site-main { max-width: 1080px; padding: 22px 20px 80px; }
  .swiper .slide img, .showbox .slide img { height: 300px; }
  .entries { grid-template-columns: repeat(4, 1fr); }
  .blist { gap: 13px; }
  .hgrid, .hscroll { grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); }
  .plist { grid-template-columns: repeat(2, 1fr); }
  .nav-inner { padding: 0 20px; }
  .logo b { font-size: 20px; }
}

/* 我的：编辑资料按钮 */
.mine-hd { display: flex; align-items: center; justify-content: space-between; }
.mine-hd .edit { flex: 0 0 auto; font-size: 12px; color: #fff; background: rgba(255,255,255,.22); border: 1px solid rgba(255,255,255,.5); padding: 6px 12px; border-radius: 999px; cursor: pointer; }
.mine-hd .edit:active { transform: scale(.96); }

/* 编辑资料弹窗 */
.modal { position: fixed; inset: 0; z-index: 95; display: none; align-items: flex-end; justify-content: center; }
.modal.on { display: flex; }
.modal .mask { position: absolute; inset: 0; background: rgba(0,0,0,.4); }
.modal .sheet { position: relative; z-index: 1; width: 100%; max-width: 480px; background: #fff; border-radius: 18px 18px 0 0; padding: 18px 16px calc(18px + env(safe-area-inset-bottom)); animation: up .25s ease; }
@keyframes up { from { transform: translateY(100%); } to { transform: translateY(0); } }
.modal .st { font-size: 16px; font-weight: 700; color: var(--deep); text-align: center; margin-bottom: 14px; }
.modal .pavatar { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-bottom: 14px; cursor: pointer; }
.modal .pavatar img { width: 72px; height: 72px; border-radius: 50%; object-fit: cover; border: 2px solid var(--line); }
.modal .pavatar span { font-size: 12px; color: var(--sub); }
.modal .field { margin-bottom: 14px; }
.modal .field label { display: block; font-size: 12px; color: var(--sub); margin-bottom: 6px; }
.modal .field input { width: 100%; box-sizing: border-box; border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; font-size: 14px; outline: none; }
.modal .field input:focus { border-color: var(--purple); }
.modal .mrow { display: flex; gap: 10px; }
.modal .btn { flex: 1; background: var(--grad2); color: #fff; border: none; border-radius: 10px; padding: 11px; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: 0 0 14px rgba(255,95,208,.45); }
.modal .btn.gray { background: #eee; color: #666; box-shadow: none; }

/* ===== 霓虹点缀（轻微·保留浅粉紫可爱底） ===== */
/* 区块标题：霓虹辉光 */
.sec-hd b { text-shadow: 0 0 12px rgba(255,95,208,.35); }
.sec-hd .bar { box-shadow: 0 0 10px rgba(255,95,208,.6); }
.hero .bt b { text-shadow: 0 0 12px rgba(255,95,208,.3); }

/* 主按钮 / 强调元素：霓虹辉光 */
.dbar .rb, .chat-in .send, .entry .dot, .pcard .bt .btn, .lrow .bt .btn,
.hb-hd .go, .bm-hd .cd, .navbar .rt, .chip.on, .bcard .pr .go, .mine-hd .vip {
  box-shadow: 0 0 14px rgba(255,95,208,.5);
}

/* 区块霓虹描边 */
.boom { border-color: rgba(255,95,208,.45); box-shadow: 0 0 24px rgba(255,95,208,.16), var(--shadow); }
.hotbox { border-color: rgba(176,124,240,.5); box-shadow: 0 0 24px rgba(176,124,240,.16), var(--shadow); }
.hero { box-shadow: 0 0 28px rgba(255,143,200,.16), var(--shadow); }

/* 爆款徽标霓虹辉光 */
.bcard .badge { filter: drop-shadow(0 2px 4px rgba(0,0,0,.2)) drop-shadow(0 0 7px rgba(255,95,208,.7)); }
.bcard .badge-txt { box-shadow: 0 0 10px rgba(255,95,208,.6); }

/* 悬浮客服：霓虹辉光 + 轻微呼吸 */
.float-cs { box-shadow: 0 0 20px rgba(255,95,208,.6); animation: neonPulse 2.4s ease-in-out infinite; }
@keyframes neonPulse { 0%,100% { box-shadow: 0 0 16px rgba(255,95,208,.5); } 50% { box-shadow: 0 0 26px rgba(255,95,208,.85); } }

/* 底部导航选中态霓虹辉光 */
.tab-item.on .ic { filter: drop-shadow(0 0 6px rgba(255,95,208,.55)); }

/* 微信内打开提示条 */
#wx-tip { position: fixed; left: 10px; right: 10px; top: 10px; z-index: 999; background: rgba(28,16,48,.92); color: #fff; font-size: 12px; line-height: 1.5; padding: 9px 12px; border-radius: 12px; box-shadow: 0 6px 20px rgba(0,0,0,.3); text-align: center; }
#wx-tip .wx-copy { display: block; margin: 8px auto 0; border: none; background: linear-gradient(135deg,#ff5fae,#ff9a3d); color: #fff; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 999px; cursor: pointer; }
#wx-tip .wx-copy:active { transform: scale(.97); }

/* ================= 电竞风增强 ================= */
/* 全局科技网格 + 角落霓虹光晕 */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(160,107,255,.06) 1px, transparent 1px),
    linear-gradient(90deg, rgba(160,107,255,.06) 1px, transparent 1px);
  background-size: 28px 28px;
  -webkit-mask-image: radial-gradient(130% 90% at 50% 0%, #000 55%, transparent 100%);
          mask-image: radial-gradient(130% 90% at 50% 0%, #000 55%, transparent 100%);
}
body::after {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(440px 340px at 100% 0%, rgba(61,240,255,.10), transparent 70%),
    radial-gradient(460px 360px at 0% 100%, rgba(255,95,208,.12), transparent 70%);
}

/* 区块标题：斜切霓虹条 + 青粉双色 */
.sec-hd .bar {
  width: 6px; height: 20px; border-radius: 2px; transform: skewX(-14deg);
  background: linear-gradient(180deg, var(--neon-cyan), var(--neon-pink));
  box-shadow: var(--neon-glow-c);
}
.sec-hd b { letter-spacing: .5px; }
.sec-hd i { color: var(--neon-purple); opacity: .9; }

/* 卡片统一：相对定位 + 顶部青粉霓虹边线 + 斜切角标 */
.hslide, .bcard, .ocard { position: relative; }
.hslide::after, .bcard::after, .ocard::after {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 4;
  background: var(--es-edge); opacity: .9;
}
/* 卡片右上角斜切小三角，营造电竞切角感 */
.hslide, .bcard, .ocard {
  border-radius: 14px;
}
.hslide > .pic, .bcard > .pic, .ocard > .thumb {
  -webkit-clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
          clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 16px, 100% 100%, 0 100%);
}

/* 热门 / 爆款容器：HUD 霓虹角框 */
.hotbox, .boom { position: relative; }
.hotbox::after, .boom::after {
  content: ""; position: absolute; top: 12px; left: 12px; width: 24px; height: 24px; z-index: 2;
  border-top: 3px solid var(--neon-cyan); border-left: 3px solid var(--neon-cyan);
  border-radius: 4px; opacity: .85; pointer-events: none;
}
.boom::before {
  content: ""; position: absolute; bottom: 12px; right: 12px; width: 24px; height: 24px; z-index: 2;
  border-bottom: 3px solid var(--neon-pink); border-right: 3px solid var(--neon-pink);
  border-radius: 4px; opacity: .85; pointer-events: none;
}

/* 顶部 hero：霓虹角框（左上，呼应右下 emoji 装饰） */
.hero { position: relative; }
.hero .brand::before {
  content: ""; position: absolute; left: -6px; top: -6px; width: 30px; height: 30px;
  border-top: 3px solid var(--neon-cyan); border-left: 3px solid var(--neon-cyan);
  border-radius: 6px; opacity: .9;
}

/* 入口：悬浮霓虹环 + 斜切角标 */
.entry { border-radius: 14px; overflow: hidden; position: relative; }
.entry::after {
  content: ""; position: absolute; right: 0; top: 0; width: 16px; height: 16px;
  border-top: 3px solid var(--neon-pink); border-right: 3px solid var(--neon-pink);
  border-top-right-radius: 6px; opacity: .8; pointer-events: none;
}
.entry:hover { box-shadow: var(--neon-glow-c), var(--shadow); border-color: rgba(61,240,255,.5); }
.entry b { letter-spacing: .5px; }

/* 轮播图角：青粉描边 + 斜切 */
.swiper { border-radius: 14px; }
.swiper .cap em {
  background: var(--es-edge); color: #1a1030; font-weight: 800;
  box-shadow: var(--neon-glow), var(--neon-glow-c);
}

/* 价格 / 标签更电竞：青粉描边微光 */
.hslide .bt strong, .bcard .pr strong, .ocard .pr strong { text-shadow: var(--neon-glow-p); }
.ocard .tag { background: var(--es-edge); color: #1a1030; font-weight: 700; }
.ocard .zoom { background: rgba(40,20,70,.6); backdrop-filter: blur(2px); }

/* 进入按钮更锐利 + 霓虹 */
.hb-hd .go, .sec-hd .more, .bcard .pr .go {
  border-radius: 8px; letter-spacing: .5px; box-shadow: var(--neon-glow);
}
.bcard .pr .go { background: var(--es-edge); color: #1a1030; font-weight: 800; }