/* ---- inline style block ---- */

:root{
  --brand:#6B4CF6; --brand-deep:#5A38E8; --brand-soft:#A78CEB;
  --bg:#F1F4FF; --card:#FFFFFF; --ink:#111222; --ink2:#7E8196;
  --line:#EEF0F7; --hl:#EEE8FF; --pill:#F3EFFE; --pill-line:#E7E1FA;
  --sd:0 6px 24px rgba(97,86,160,.08);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0}
body{
  position:relative;
  background:var(--bg);color:var(--ink);
  font:14px/1.5 -apple-system,BlinkMacSystemFont,"PingFang SC","Microsoft YaHei",sans-serif;
  /* 真机浏览器自带状态栏，这里只留安全区 */
  padding-top:env(safe-area-inset-top);
  padding-bottom:calc(76px + env(safe-area-inset-bottom));
  -webkit-font-smoothing:antialiased;
}
/* 顶部背景装饰：随文档顶端滚动，330px 后只剩均匀浅蓝紫底 */
body::before{
  content:"";position:absolute;left:0;right:0;top:0;height:330px;z-index:0;pointer-events:none;
  background:
    radial-gradient(ellipse 160px 112px at 81% 17%, rgba(203,190,255,.20) 0%, rgba(203,190,255,.14) 52%, rgba(203,190,255,.04) 78%, rgba(203,190,255,0) 94%),
    linear-gradient(180deg,#FAFBFF 0%,#EDF2FF 86%,#F1F4FF 100%);
}
/* 右上到左下的白色斜切面：大而弱、边界柔和 */
body::after{
  content:"";position:absolute;left:0;right:0;top:0;height:330px;z-index:0;pointer-events:none;
  background:linear-gradient(116deg, rgba(255,255,255,0) 20%, rgba(255,255,255,.35) 45%, rgba(255,255,255,.30) 70%, rgba(255,255,255,0) 88%);
}
a{color:inherit}
.num{font-variant-numeric:tabular-nums;font-feature-settings:"tnum"}
.wrap{position:relative;z-index:1;max-width:430px;margin:0 auto;padding:0 11px}

/* 状态栏已移除：真机自带状态栏 */

/* ── 顶部品牌区（开放式，不做白卡） ───────────── */
.hdr{position:relative;padding:6px 0 0}
.hdr-top{position:relative;z-index:3;display:flex;align-items:center;gap:7px;height:26px;padding:0 1px 0 8px}
.hdr-top .cap{width:24px;height:24px;flex:0 0 auto;display:block}
.hdr-top .ct{font-size:11.5px;color:var(--ink2);letter-spacing:.2px}
.msg{
  position:absolute;top:-5px;right:0;width:27px;height:27px;border-radius:50%;background:#fff;
  display:flex;align-items:center;justify-content:center;text-decoration:none;
  box-shadow:0 3px 10px rgba(97,86,160,.14);
}
.msg svg{width:14px;height:14px;stroke:#8E8AA8;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.msg:active{transform:scale(.94)}
.hdr h1{
  position:relative;z-index:2;margin:4px 0 0;padding:0 9px;
  font-size:34px;font-weight:800;letter-spacing:0;line-height:1.12;color:#080818;
}
.hdr h1 i{position:relative;display:inline-block;font-style:normal;color:var(--brand-deep)}
/* 「一点」下面那道手写紫杠（跟着紫色两个字走） */
.hdr h1 .hl{position:absolute;left:-3px;bottom:-6px;width:calc(100% + 9px);height:9px;z-index:-1;display:block}
.hdr .sub{position:relative;z-index:2;margin:5px 0 0;padding:0 9px;font-size:14px;line-height:1.25;color:var(--ink2)}
.pills{position:relative;z-index:2;display:flex;gap:5px;padding:0 7px;margin-top:8px}
.pill{
  display:inline-flex;align-items:center;gap:4px;height:23px;padding:0 9px;border-radius:999px;
  background:rgba(255,255,255,.94);border:1px solid #EFEBFB;
  font-size:10px;font-weight:500;color:#5B4CE8;white-space:nowrap;box-shadow:0 2px 8px rgba(97,86,160,.06);
}
.pill svg{width:12px;height:12px;flex:0 0 auto;display:block}
.art{position:absolute;right:-7px;top:34px;width:170px;z-index:0;pointer-events:none}
.art img{display:block;width:170px;height:auto}
.art-say{position:absolute;left:12px;top:-30px;font-size:10px;font-style:italic;font-weight:400;
  color:#6E5BE8;letter-spacing:.3px;white-space:nowrap;transform:rotate(-9deg);transform-origin:left center}
.art-arc{position:absolute;left:14px;top:-5px;width:92px;height:8px;display:block}

/* ── 分组白卡 ─────────────────────────────────── */
.grp{position:relative;z-index:2;background:var(--card);border-radius:13px;padding:11px 5px 6px;margin-top:12px;box-shadow:0 6px 20px rgba(97,110,165,.04)}
.hdr + .grp{margin-top:10px}
.hdr + .search{margin-top:10px}
.grp-h{display:flex;align-items:flex-start;gap:6.5px;padding:0 5px 0 2px}
.chip{width:31px;height:31px;margin-top:-3px;border-radius:50%;background:#F1ECFD;display:grid;place-items:center;flex:0 0 auto}
.grp + .grp .chip{background:#FEF6FC}
.chip .gi{width:22px;height:22px;display:block}
.gt{flex:1;min-width:0}
.gt h2{margin:0;font-size:17px;font-weight:700;letter-spacing:-.1px;line-height:21px;color:var(--ink)}
.blurb{margin:3px 0 0;font-size:10px;font-weight:400;line-height:14px;color:#666B8D;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.all{margin-left:auto;display:inline-flex;align-items:center;gap:6px;text-decoration:none;
  font-size:10.5px;color:var(--ink2);line-height:1;white-space:nowrap}
.all i{width:22px;height:22px;border-radius:50%;background:var(--pill);display:grid;place-items:center;font-style:normal}
.all i svg{width:9px;height:9px;stroke:var(--brand);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.all:active{opacity:.6}

.grid{display:grid;grid-template-columns:repeat(3,1fr);column-gap:3px;row-gap:6.2px;margin-top:7px}
.c{
  position:relative;display:flex;align-items:center;gap:7px;padding:0 8px;
  background:linear-gradient(145deg,#FFFFFF 0%,#FCFBFE 56%,#F8F6FC 100%);
  border:1px solid rgba(110,128,180,.09);border-radius:12px;min-width:0;
  height:58px;
  text-decoration:none;
  box-shadow:0 2px 8px rgba(76,92,150,.06), 0 6px 18px rgba(76,92,150,.04);
  transition:transform .14s ease,box-shadow .14s ease;
}
.c:active{transform:scale(.98);box-shadow:0 1px 4px rgba(76,92,150,.05), 0 3px 8px rgba(76,92,150,.03)}
.c img{width:29px;height:29px;flex:0 0 auto;display:block;object-fit:contain}
.c .txt{min-width:0;flex:1;display:flex;flex-direction:column;justify-content:center}
.c b{
  overflow:hidden;white-space:nowrap;text-overflow:ellipsis;
  font-size:11px;line-height:15px;font-weight:600;color:var(--ink);letter-spacing:0;
}
.c .buy{
  margin-top:4px;display:inline-flex;align-items:center;gap:3px;height:18px;padding:0 7px;
  align-self:flex-start;border-radius:999px;background:#fff;border:1px solid #E5DDF4;color:#6B4CF6;
  font-size:9px;font-weight:500;white-space:nowrap;line-height:1;letter-spacing:0;
}
.c .buy svg{width:6px;height:6px;stroke:#6B4CF6;fill:none;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
/* 375 这类窄屏：只收名称字号，Logo 与卡片尺寸不变 */
@media (max-width:379px){
  .c b{font-size:10.5px}
  .hdr h1{font-size:31px;letter-spacing:-1px}
  .art{width:160px;right:-5px}
  .art img{width:160px}
}

/* ── 内页通用顶栏 ─────────────────────────────── */
.pnav{display:flex;align-items:center;gap:8px;padding:6px 0 10px}
.pnav .back,.pnav .kf{
  width:32px;height:32px;border-radius:50%;background:#fff;display:flex;align-items:center;
  justify-content:center;flex:0 0 auto;text-decoration:none;box-shadow:0 2px 8px rgba(97,86,160,.10);
}
.pnav .back svg,.pnav .kf svg{width:16px;height:16px;stroke:#5B5A72;fill:none;stroke-width:2.1;stroke-linecap:round;stroke-linejoin:round}
.pnav .tt{flex:1;text-align:center;min-width:0}
.pnav .tt b{display:block;font-size:16px;font-weight:600;letter-spacing:-.3px}
.pnav .tt span{display:block;font-size:11px;color:var(--ink2);margin-top:1px}
.pnav .back:active,.pnav .kf:active{transform:scale(.94)}

.search{
  display:flex;align-items:center;gap:8px;height:44px;border-radius:999px;background:#fff;
  padding:0 5px 0 14px;margin-top:2px;border:1px solid var(--line);box-shadow:var(--sd);
}
.search svg{width:16px;height:16px;stroke:#B7B3C6;fill:none;stroke-width:2.1;stroke-linecap:round;flex:0 0 auto}
.search input{
  flex:1;min-width:0;border:0;background:transparent;height:100%;font:inherit;font-size:13px;
  outline:none;padding:0;color:var(--ink);
}
.search input::placeholder{color:#B7B3C6}

/* ── 商品列表 ─────────────────────────────────── */
.list{display:flex;flex-direction:column;gap:9px;margin-top:12px}
.row{
  background:#fff;border:1px solid var(--line);border-radius:16px;padding:11px 12px;
  display:flex;align-items:center;gap:11px;box-shadow:var(--sd);
}
.row img{width:40px;height:40px;object-fit:contain;flex:0 0 auto}
.row .t{flex:1;min-width:0}
.row b{display:block;font-size:14px;font-weight:600;letter-spacing:-.1px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:var(--ink)}
.row .sub{margin-top:3px;font-size:11.5px;color:var(--ink2)}
.row .r{display:flex;flex-direction:column;align-items:flex-end;gap:7px;flex:0 0 auto}
.row .pr{font-size:15px;font-weight:700;color:var(--brand);letter-spacing:-.2px}
.row .pr small{font-size:10.5px;font-weight:600}
.row .buy{
  height:29px;padding:0 15px;border:0;border-radius:999px;
  background:linear-gradient(180deg,#7B5CF8,#5A38E8);color:#fff;
  font:500 12.5px/29px inherit;text-decoration:none;display:inline-block;
  box-shadow:0 4px 10px -4px rgba(90,56,232,.55);
}
.empty{padding:40px 20px;text-align:center;color:var(--ink2);font-size:13px}

/* ── 底部液态玻璃导航 ────────────────────────── */
.tab{
  position:fixed;left:50%;transform:translateX(-50%);
  width:min(408px,calc(100% - 22px));
  bottom:calc(6px + env(safe-area-inset-bottom));
  height:48px;z-index:30;border-radius:24px;
  display:grid;grid-template-columns:repeat(4,1fr);align-items:center;padding:3px;
  background:#fff;
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 8px 24px rgba(97,86,160,.12), inset 0 1px 0 rgba(255,255,255,.95), inset 0 -1px 0 rgba(255,255,255,.4);
}
@supports ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){
  .tab{background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.tab a{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;height:42px;
  width:82px;justify-self:center;
  font-size:10.5px;font-weight:500;color:#8E8AA8;text-decoration:none;border-radius:21px;
  transition:background .18s ease,color .18s ease;
}
.tab a svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;
  stroke-linecap:round;stroke-linejoin:round}
.tab a.on{color:var(--brand);background:var(--hl)}
.tab a:active{opacity:.66}
@media (prefers-reduced-motion: reduce){
  *{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}
}