/* 咸鱼 2026-11-07：客户 / 游客首页改版。顺序 = 轮播图 → 我的会员 → 今日客服 → 价格表，业主定的，不要换。
   会员卡 xy/33-cust-hero.js，客服卡 xy/32-contact.js。
   余额数字字体（XY Member Num）只给客户会员卡，后台不要用。 */
.xm { --f: linear-gradient(180deg, #f6f7fb 0%, #c6ccd8 42%, #828a99 72%, #e2e5ec 100%);
  --line: rgba(205, 211, 224, .5); --line2: rgba(205, 211, 224, .2); --ink: #eff1f6; --sub: rgba(226, 230, 240, .62); --glow: rgba(190, 200, 225, .2); --gem: #d3d8e3;
  --bg: radial-gradient(70% 120% at 50% -10%, rgba(200, 208, 225, .16), transparent 62%), linear-gradient(160deg, #262830 0%, #15161b 100%);
  --metal: linear-gradient(135deg, #3b3e47 0%, #1f2127 45%, #33363e 62%, #15161a 100%);
  position: relative; isolation: isolate; color: var(--ink); }
.xm.t-vip { --f: linear-gradient(180deg, #fff0f6 0%, #f7bcd6 38%, #d9689b 72%, #ffd6e6 100%);
  --line: rgba(244, 179, 207, .55); --line2: rgba(244, 179, 207, .22); --ink: #ffeef5; --sub: rgba(255, 226, 238, .66); --glow: rgba(228, 122, 168, .34); --gem: #f4b3cf;
  --bg: radial-gradient(70% 120% at 50% -10%, rgba(228, 122, 168, .3), transparent 62%), linear-gradient(160deg, #431a31 0%, #1e0b17 100%);
  --metal: linear-gradient(135deg, #7a3257 0%, #3d152c 42%, #6d2b4d 62%, #2a0e1e 100%); }
.xm.t-svip { --f: linear-gradient(180deg, #fff6df 0%, #efd7a2 38%, #c29a52 72%, #f6e3b4 100%);
  --line: rgba(226, 192, 124, .62); --line2: rgba(226, 192, 124, .26); --ink: #fff4dc; --sub: rgba(250, 232, 196, .66); --glow: rgba(214, 170, 92, .36); --gem: #ecd29a;
  --bg: radial-gradient(70% 120% at 50% -10%, rgba(214, 170, 92, .3), transparent 62%), linear-gradient(160deg, #3a2a17 0%, #150e07 100%);
  --metal: linear-gradient(135deg, #8a6a38 0%, #4a3518 40%, #a07c43 60%, #2e200e 100%); }
.xm.t-premier { --f: linear-gradient(180deg, #fffbe9 0%, #f3dca6 34%, #c9a25b 66%, #fff0c6 100%);
  --line: rgba(232, 200, 134, .78); --line2: rgba(232, 200, 134, .32); --ink: #fff6e0; --sub: rgba(243, 220, 166, .7); --glow: rgba(150, 96, 240, .42); --gem: #f3dca6;
  --bg: radial-gradient(58% 130% at 50% -12%, rgba(140, 84, 235, .42), transparent 64%), radial-gradient(40% 90% at 50% 120%, rgba(214, 170, 92, .2), transparent 70%), linear-gradient(160deg, #1c1030 0%, #0b0612 100%);
  --metal: linear-gradient(135deg, #2c1a4c 0%, #120a20 42%, #2a1848 60%, #08040e 100%); }
.xm .num { font-family: var(--font-num); font-variant-numeric: tabular-nums; }
.xm-word { display: inline-flex; align-items: baseline; gap: 6px; font: italic 700 76px/1.02 var(--font-accent); letter-spacing: .01em; white-space: nowrap;
  background: var(--f) 0 0 / 100% 220%; -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 3px 18px var(--glow)); animation: xm-foil 8s ease-in-out infinite alternate; }
.xm-word > b, .xm-word > em { font: inherit; color: transparent; }
.xm-word.is-plain { font: 700 42px/1.2 var(--font-serif); letter-spacing: .14em; }
@keyframes xm-foil { to { background-position: 0 100%; } }
.xm .mv-gems { --mv-gem-c: var(--gem); gap: 6px; flex-wrap: nowrap; justify-content: center; }
.xm .mv-gems > i { width: 8px; height: 8px; }
.xm-bar { display: block; height: 3px; border-radius: 2px; background: var(--line2); }
.xm-bar > i { position: relative; display: block; height: 100%; border-radius: inherit; background: var(--f); background-size: 100% 100%; box-shadow: 0 0 10px var(--glow); }
.xm-bar > i::after { content: ""; position: absolute; right: -4px; top: 50%; width: 7px; height: 7px; margin-top: -3.5px; transform: rotate(45deg); background: var(--ink); box-shadow: 0 0 10px 2px var(--glow); }
:where(.xm button) { all: unset; box-sizing: border-box; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.xm button:focus-visible { outline: 2px solid var(--line); outline-offset: 3px; }

/* B 金属实体卡 */
.xb { display: grid; grid-template-columns: 380px minmax(0, 1fr); gap: 46px; align-items: center; padding: 18px 12px 30px 22px; }
.xb::before { content: ""; position: absolute; z-index: -1; left: -30px; right: 34%; top: -36px; bottom: -6px; background: radial-gradient(50% 58% at 50% 46%, var(--glow), transparent 72%); filter: blur(6px); pointer-events: none; }
.xb-stage { position: relative; perspective: 1000px; }
.xb-card { position: relative; display: grid !important; grid-template-rows: auto 1fr auto; width: 100%; aspect-ratio: 1.586; padding: 16px 20px 15px; border-radius: 18px; overflow: hidden; color: var(--ink);
  background: var(--metal); transform: rotateX(var(--rx, 7deg)) rotateY(var(--ry, 13deg)); transition: transform .25s ease-out;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .13), inset 0 1px 0 rgba(255, 255, 255, .34), inset 0 -2px 3px rgba(0, 0, 0, .5), -14px 26px 34px -18px rgba(0, 0, 0, .9), 0 0 60px -10px var(--glow); }
.xb-tex, .xb-gui, .xb-spec { position: absolute; inset: 0; pointer-events: none; }
.xb-tex { background: var(--xm-brush); mix-blend-mode: overlay; opacity: .55; }
.xb-gui { inset: -30% -34% -30% 26%; background: var(--f); opacity: .3; -webkit-mask: var(--xm-gui) center / contain no-repeat; mask: var(--xm-gui) center / contain no-repeat; }
.xb-spec { background: radial-gradient(60% 80% at var(--mx, 24%) var(--my, 8%), rgba(255, 255, 255, .34), transparent 62%), linear-gradient(112deg, transparent 38%, rgba(255, 255, 255, .13) 47%, transparent 56%); mix-blend-mode: screen; }
.xb-top, .xb-mid, .xb-bot { position: relative; z-index: 1; }
.xb-top { display: flex; align-items: center; gap: 9px; }
.xb-top img { width: 26px; height: 26px; border-radius: 50%; box-shadow: 0 0 0 1px var(--line); }
.xb-top b { font: 700 13.5px/1 var(--font-serif); letter-spacing: .14em; }
.xb-top small { margin-left: auto; font-size: 11.5px; letter-spacing: .16em; color: var(--sub); }
.xb-mid { display: flex; align-items: center; gap: 16px; align-self: center; }
.xb-chip { flex: none; width: 40px; height: 30px; border-radius: 6px; background: linear-gradient(135deg, #fff1cc, #c79f58 55%, #f4dfaa); box-shadow: inset 0 0 0 1px rgba(90, 60, 15, .45), 0 1px 2px rgba(0, 0, 0, .5); }
.xb-chip { background-image: linear-gradient(rgba(90, 60, 15, .5), rgba(90, 60, 15, .5)), linear-gradient(rgba(90, 60, 15, .5), rgba(90, 60, 15, .5)), linear-gradient(90deg, rgba(90, 60, 15, .5), rgba(90, 60, 15, .5)), linear-gradient(135deg, #fff1cc, #c79f58 55%, #f4dfaa); background-size: 100% 1px, 100% 1px, 1px 100%, 100% 100%; background-position: 0 34%, 0 66%, 50% 0, 0 0; background-repeat: no-repeat; }
.xb .xm-word { font-size: 56px; } .xb .xm-word.is-plain { font-size: 28px; }
.xb-bot { display: flex; align-items: flex-end; justify-content: space-between; gap: 10px; }
.xb-bot > span:first-child { display: grid; gap: 3px; min-width: 0; }
.xb-name { font: 700 14px/1.2 var(--font-serif); letter-spacing: .1em; text-shadow: 0 1px 0 rgba(0, 0, 0, .6), 0 -1px 0 rgba(255, 255, 255, .15); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.xb-no { font-size: 11px; letter-spacing: .16em; color: var(--sub); }
.xb .mv-gems { gap: 4px; } .xb .mv-gems > i { width: 6px; height: 6px; }
.xb-info { display: grid; gap: 12px; min-width: 0; }
.xb-info small { font: 700 14px/1.3 var(--font-serif); letter-spacing: .14em; color: var(--sub); }
.xb-bal { display: block; font-size: clamp(38px, 5.4vw, 66px); font-weight: 700; line-height: 1; letter-spacing: -.01em; white-space: nowrap; color: var(--ink); text-shadow: 0 0 34px var(--glow); }
.xb-bal > i { margin-right: 4px; font-size: .46em; font-style: normal; font-weight: 600; opacity: .75; }
.xb-prog { display: grid; gap: 7px; margin-top: 6px; }
@media (max-width: 760px) {
  .xb { grid-template-columns: minmax(0, 1fr); gap: 18px; padding: 6px 0 4px; }
  .xb::before { left: -10px; right: -10px; bottom: 34%; }
  .xb-card { --rx: 0deg; --ry: 0deg; padding: 15px 18px 14px; }
  .xb .xm-word { font-size: 50px; }
  .xb-bal { font-size: 38px; }
}
@media (min-width: 761px) and (max-width: 980px) { .xb { grid-template-columns: 320px minmax(0, 1fr); gap: 28px; } .xb .xm-word { font-size: 46px; } }

/* 金卡上字压成深色，不然金字贴金底看不清 */
.xb.t-svip .xb-card .xm-word { --f: linear-gradient(180deg, #2c1c06 0%, #573a12 50%, #1e1303 100%); filter: drop-shadow(0 1px 0 rgba(255, 240, 200, .4)); }
.xb.t-svip .xb-card { color: #2c1c06; --sub: rgba(44, 28, 6, .9); }
.xb.t-svip .xb-card .xb-name { text-shadow: 0 1px 0 rgba(255, 240, 200, .35); }
.xb.t-svip .xb-card .mv-gems { --mv-gem-c: #2c1c06; }
.xb .xb-card .mv-gems > i { width: 7px; height: 7px; }
.xb.t-vip .xb-card .xm-word { --f: linear-gradient(180deg, #fff 0%, #ffd9e8 55%, #f8b2d0 100%); }

/* 首页公共：大标题、价格表 */
.z-home { --rose: #d62b7c; }
.z-home .latin { font-family: var(--font-accent); font-style: italic; }

/* 会员板块：卡在左、钱在右 */
.z-member.xb { grid-template-columns: 400px minmax(0, 1fr); gap: 64px; padding: 26px 0 84px 26px; }
.z-member.xb::before { display: none; }
.z-member.xb::after { content: ""; position: absolute; z-index: -1; left: 0; right: 0; bottom: 0; height: 170px; pointer-events: none; background: radial-gradient(38% 54% at 24% 40%, var(--glow), transparent 74%); }
.z-member .xb-stage { -webkit-box-reflect: below 10px linear-gradient(transparent 80%, rgba(255, 255, 255, .16)); }
.z-member .xb-info { gap: 14px; }
.z-mon { display: grid; gap: 12px; }
.z-mon small { font: 700 17px/1.3 var(--font-ui); letter-spacing: .1em; color: var(--sub); }
.z-member .xb-bal { font-size: clamp(52px, 6.2vw, 84px); }
.z-member .xb-bal.is-l1 { font-size: clamp(46px, 5.4vw, 70px); } .z-member .xb-bal.is-l2 { font-size: clamp(40px, 4.6vw, 60px); }
.z-frozen { font-size: 13px; color: var(--sub); }
.z-frozen b { color: var(--ink); font-weight: 600; }

/* 价格表 */
.z-price { margin-top: 84px; padding: 0 6px; }
.z-home :is(.z-price, .z-sec) .section-head { align-items: baseline; margin-bottom: 26px; }
.z-home :is(.z-price, .z-sec) .section-head h2 { font: 700 40px/1.15 var(--font-serif); letter-spacing: .06em; color: var(--text-1); }
.z-home :is(.z-price, .z-sec) .xy-sec-en { font-size: 24px; color: var(--sakura-400); }
.z-all.lg-btn { display: inline-flex; align-items: baseline; gap: 2px; height: 38px; padding: 0 14px 0 18px; font-size: 14px; text-decoration: none; }
.z-all svg { width: 15px; height: 15px; }
.z-price .xy-pts { gap: 22px; }
.z-price .xy-pt { gap: 14px; }
.z-price .xy-pt-img { aspect-ratio: 3 / 2; border-radius: 22px; }
.z-price .xy-pt-txt b { font-size: 23px; }
.z-price .xy-pt-txt small { font-size: 13px; color: var(--text-3); }

@media (max-width: 1180px) and (min-width: 761px) {
  .z-member.xb { grid-template-columns: 320px minmax(0, 1fr); gap: 36px; padding-left: 10px; }
}
@media (max-width: 980px) and (min-width: 761px) {
  .z-member.xb { grid-template-columns: 280px minmax(0, 1fr); gap: 28px; padding-bottom: 72px; }
  .z-member .xm-word { font-size: 42px; }
}

/* ───────── 手机 ───────── */
@media (max-width: 760px) {

  /* 手机卡：电脑卡原样缩小，字和侧倾都跟着等比走 */
  .z-member.xb { grid-template-columns: 164px minmax(0, 1fr); gap: 20px 14px; align-items: center; padding: 8px 8px 0; }
  .z-member.xb::after { display: none; }
  .z-member .xb-stage { width: 400px; zoom: .41; }
  .z-member .xb-card { --rx: 7deg; --ry: 13deg; padding: 16px 20px 15px; }
  .z-member .xb-card .xm-word { font-size: 56px; } .z-member .xb-card .xm-word.is-plain { font-size: 28px; }
  .z-member .xb-info { display: contents; }
  .z-member .xb-prog { grid-column: 1 / -1; margin-top: 0; }
  .z-member .xb-bal { font-size: 41px; } .z-member .xb-bal.is-l1 { font-size: 36px; } .z-member .xb-bal.is-l2 { font-size: 29px; }
  .z-mon { gap: 7px; }
  .z-mon small { font-size: 15.5px; }
  .z-frozen { font-size: 12.5px; }

  .z-price { margin: 0; padding: 40px 6px 8px; }
  .z-home :is(.z-price, .z-sec) .section-head { margin-bottom: 18px; }
  .z-home :is(.z-price, .z-sec) .section-head h2 { font-size: 30px; }
  .z-home :is(.z-price, .z-sec) .xy-sec-en { font-size: 19px; }
  .z-price .xy-pts { gap: 14px; }
  .z-price .xy-pt-img { aspect-ratio: 4 / 3; border-radius: 16px; }
  .z-price .xy-pt-txt b { font-size: 18px; }
  .z-price .xy-pt-txt small { font-size: 12px; }
}
@media (max-width: 360px) {
  .z-member.xb { grid-template-columns: 136px minmax(0, 1fr); gap: 16px 12px; }
  .z-member .xb-stage { zoom: .34; }
  .z-member .xb-bal { font-size: 34px; } .z-member .xb-bal.is-l1 { font-size: 30px; } .z-member .xb-bal.is-l2 { font-size: 24px; }
}

/* 金卡：字用实心深色，渐变深字压在金属上发虚 */
.xb.t-svip .xb-card .xm-word { --f: linear-gradient(180deg, #1a0f02, #1a0f02); animation: none; filter: drop-shadow(0 1px 0 rgba(255, 236, 190, .55)); }
.xb.t-svip .xb-card { --metal: linear-gradient(135deg, #c9a566 0%, #8f6d3a 40%, #d6b576 60%, #7d5e30 100%); }

/* 余额板块文字分工 */
.z-member { font-synthesis: none; }
.z-member { --lab: var(--font-serif); --lw: 700; --numf: "XY Member Num", var(--font-num); --nw: 600; --big: 1; }
/* 第一档：金额。整数最大，用等级的金属渐变，和卡面的等级字同色 */
.z-member .xb-bal { font-family: var(--numf); font-weight: var(--nw); font-size: calc(clamp(74px, 8.6vw, 116px) * var(--big)); line-height: .92; letter-spacing: 0; text-shadow: none;
  font-variant-numeric: lining-nums tabular-nums; background: var(--f); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 4px 22px var(--glow)); padding-right: .04em; }
.z-member .xb-bal.is-l1 { font-size: calc(clamp(64px, 7.4vw, 98px) * var(--big)); } .z-member .xb-bal.is-l2 { font-size: calc(clamp(54px, 6.2vw, 82px) * var(--big)); }
.z-member .xb-bal > i { margin-right: .08em; font-size: .4em; font-weight: 500; vertical-align: .95em; line-height: 0; opacity: 1; color: var(--gem); }
.z-dec { font-size: .46em; font-weight: 500; letter-spacing: 0; }
.z-member .xb-bal .z-dec { color: var(--sub); }
/* 第二档：标签和金额同一种暖色，一眼看出是一对 */
.z-mon small { font: var(--lw) 23px/1.2 var(--lab); letter-spacing: .06em; color: var(--gem); }
/* 第三档：累计消费是排面，数字要站出来 */
.z-member .xb-prog { gap: 11px; margin-top: 16px; }
.z-stats { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; }
.z-stat { display: inline-flex; align-items: baseline; gap: 10px; }
.z-stat small { font: var(--lw) 16px/1.2 var(--lab); letter-spacing: .05em; color: var(--sub); }
.z-stat b { font: var(--nw) calc(34px * var(--big) + 2px)/1 var(--numf); color: var(--ink); font-variant-numeric: lining-nums tabular-nums; }
/* 第四档：还差多少是目标，只把数字点亮；到顶了就是荣誉，用金属字 */
.z-goal { font: 400 13px/1.2 var(--font-ui); color: var(--sub); white-space: nowrap; }
.z-goal b { font: 600 20px/1 var(--numf); color: var(--gem); font-variant-numeric: lining-nums tabular-nums; }
.z-goal.is-top { font: var(--lw) 18px/1.2 var(--lab); letter-spacing: .1em; background: var(--f); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* 最后一档：冻结只是备注，最安静 */
.z-frozen { font: 400 13px/1.3 var(--font-ui); color: var(--sub); }
.z-frozen b { font: 500 15px/1 var(--numf); color: var(--sub); }
@media (max-width: 760px) {
  .z-member .xb-bal { font-size: calc(50px * var(--big)); } .z-member .xb-bal.is-l1 { font-size: calc(44px * var(--big)); } .z-member .xb-bal.is-l2 { font-size: calc(38px * var(--big)); }
  .z-mon small { font-size: 18px; }
  .z-member .xb-prog { margin-top: 2px; gap: 9px; }
  .z-stat small { font-size: 14px; } .z-stat b { font-size: calc(26px * var(--big) + 2px); }
  .z-goal { font-size: 12.5px; } .z-goal b { font-size: 17px; } .z-goal.is-top { font-size: 15.5px; }
}
@media (max-width: 360px) {
  .z-member .xb-bal { font-size: calc(40px * var(--big)); } .z-member .xb-bal.is-l1 { font-size: calc(35px * var(--big)); } .z-member .xb-bal.is-l2 { font-size: calc(30px * var(--big)); }
}
.z-member .z-stat b, .z-member .z-goal b, .z-member .z-frozen b { font-family: var(--numf); }

/* 今日客服卡（xy/32-contact.js xyContactStrip）：鱼丸 → 气泡（谁在 + 那句话）→ 联系客服，班表放旁边 */
.z-kf { --ink: #3a1428; --ink2: #5e3048; --hot: #c2186f; --track: rgba(58, 20, 40, .16); position: relative; z-index: 2; isolation: isolate; margin-top: 76px; display: grid; grid-template-columns: minmax(0, 1fr) 240px; align-items: center; gap: 0 40px; padding: 24px 44px 26px 340px; border-radius: 32px; color: var(--ink); }
.z-kf-bg { position: absolute; z-index: -1; inset: 0; border-radius: inherit; }
.z-yw { position: absolute; left: 12px; bottom: 0; width: 322px; height: auto; pointer-events: none; }
.z-talk { display: grid; justify-items: start; gap: 12px; min-width: 0; }
.z-bub { position: relative; max-width: 100%; padding: 13px 22px 15px; border-radius: 20px; background: #fff; box-shadow: 0 14px 28px -16px rgba(150, 30, 90, .55); }
.z-bub::before { content: ""; position: absolute; left: -7px; top: 26px; width: 16px; height: 16px; border-radius: 4px; background: #fff; transform: rotate(45deg); }
.z-bub-top { position: relative; display: flex; align-items: center; flex-wrap: wrap; gap: 2px 12px; }
.z-name { font: 900 32px/1.25 var(--font-round); letter-spacing: .03em; color: var(--hot); }
.z-name.is-rest { font-size: 21px; line-height: 1.5; letter-spacing: .01em; color: #6d3a94; }
.z-name.is-rest i { font: 500 16px/1 var(--font-round); font-style: normal; color: var(--ink2); }
.z-name.is-rest .num { font: 700 24px/1 var(--font-num); }
.z-nm { font-style: normal; }
.z-st { display: inline-flex; align-items: center; gap: 6px; font: 500 14px/1 var(--font-round); color: #15784c; white-space: nowrap; }
.z-st > i { width: 8px; height: 8px; border-radius: 50%; background: #22a56b; box-shadow: 0 0 0 3px rgba(34, 165, 107, .18); }
.z-kf.is-off .z-st { color: var(--ink2); }
.z-st2 { display: none; }
.z-kf.is-off .z-st > i { background: #a58fa6; box-shadow: none; }
.z-say { position: relative; margin: 4px 0 0; text-wrap: balance; word-break: keep-all; overflow-wrap: anywhere; font: 500 17px/1.45 var(--font-round); color: var(--ink); }
.z-say .xy-cs-kao { margin-left: 6px; font: 700 19px/1 var(--font-ui); font-style: normal; color: var(--hot); -webkit-text-fill-color: var(--hot); white-space: nowrap; }
.z-cta.lg-btn { display: inline-flex; align-items: baseline; gap: 7px; height: 50px; padding: 0 26px; font-size: 17px; }
.z-cta svg { width: 17px; height: 17px; }

/* 班表：普通清单。当值那一行粗、亮，小鱼在下面的线上游 */
.z-ros { list-style: none; margin: 0; padding: 0; display: grid; }
.z-ros li { position: relative; display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 14px 0 13px; box-shadow: inset 0 -2px 0 var(--track); }
.z-ros b { font: 500 17px/1.3 var(--font-round); color: var(--ink2); }
.z-ros .num { font: 400 15px/1.3 var(--font-num); color: var(--ink2); font-variant-numeric: tabular-nums; }
.z-ros .is-on, .z-ros .is-next { padding-bottom: 27px; }
.z-ros .is-on { box-shadow: none; }
.z-ros .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #a9176a, #e8388a); box-shadow: 0 0 12px rgba(232, 56, 138, .55); }
.z-ros .is-on b { font-weight: 900; color: var(--hot); }
.z-ros .is-on .num { font-weight: 700; color: var(--hot); }
.z-ros .is-next b { font-weight: 900; color: var(--ink); }
.z-ros .is-next .num { font-weight: 700; color: var(--ink); }
.z-ros .xy-cs-lane { top: auto; bottom: 3px; left: 0; width: 100%; height: 20px; }
.z-ros .xy-cs-lane:not(.is-swim) .xy-cs-swimmer { left: 18px; }

.kf-a .z-kf-bg { background: radial-gradient(30% 135% at 15% 62%, #fff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(104deg, #ffeaf3 0%, #fcc8df 48%, #f39cc4 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 34px 90px -44px rgba(244, 130, 185, .8); }
.kf-a.is-off .z-kf-bg { background: radial-gradient(30% 135% at 15% 62%, #fff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(104deg, #f8f1f9 0%, #e8d9ee 50%, #d3bce0 100%); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .85), 0 34px 90px -44px rgba(170, 130, 190, .6); }

/* 窄一点就把班表放到下面，三列 */
@media (max-width: 1240px) {
  .z-kf { grid-template-columns: minmax(0, 1fr); gap: 22px 0; padding: 20px 28px 18px 326px; }
  .z-yw { width: 322px; left: 2px; }
  .z-ros { grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: 12px; }
  .z-ros li, .z-ros .is-on, .z-ros .is-next { flex-direction: column; align-items: flex-start; gap: 1px; padding: 11px 0 0; box-shadow: inset 0 2px 0 var(--track); }
  .z-ros .is-on { box-shadow: none; }
  .z-ros .is-on::after { top: 0; bottom: auto; }
  .z-ros .xy-cs-lane { top: -17px; bottom: auto; }
}
/* 手机：鱼丸到右上角探出去，气泡朝她说话；块要矮 */
@media (max-width: 760px) {
  .z-kf { margin-top: 70px; gap: 20px 0; padding: 14px 16px 14px; border-radius: 24px; }
  .z-yw { left: auto; right: -6px; top: -72px; bottom: auto; width: 176px; }
  .z-talk { gap: 9px; }
  .z-bub { width: 232px; max-width: 100%; padding: 9px 14px 11px; border-radius: 16px; }
  .z-bub::before { left: auto; right: 16px; top: -6px; width: 13px; height: 13px; border-radius: 3px; }
  .z-name { font-size: 26px; }
  .z-name.is-rest { font-size: 18px; } .z-name.is-rest .num { font-size: 21px; } .z-name.is-rest i { font-size: 15px; }
  .z-st { font-size: 14px; }
  .z-say { margin-top: 2px; font-size: 16px; line-height: 1.4; }
  .z-say .xy-cs-kao { font-size: 18px; }
  .z-cta.lg-btn { height: 46px; padding: 0 20px; font-size: 16px; }
  .z-ros { gap: 10px; }
  .z-ros b { font-size: 16px; } .z-ros .num { font-size: 14px; }
  .kf-a .z-kf-bg { background: radial-gradient(56% 70% at 84% 22%, #fff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(120deg, #ffeaf3 0%, #fcc8df 52%, #f39cc4 100%); }
  .kf-a.is-off .z-kf-bg { background: radial-gradient(56% 70% at 84% 22%, #fff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(120deg, #f8f1f9 0%, #e8d9ee 50%, #d3bce0 100%); }
}
@media (max-width: 360px) {
  .z-yw { width: 150px; top: -58px; }
  .z-bub { width: 214px; }
  .z-say { font-size: 15px; }
  .z-st { font-size: 13px; }
  .z-ros .num { font-size: 13px; }
}

.kf-a { --ink2: #4f2740; }
.kf-a .z-name, .kf-a .z-name.is-rest { color: var(--ink); }
.kf-a .z-say .xy-cs-kao { color: var(--ink2); -webkit-text-fill-color: var(--ink2); }

/* 班表是细线清单，当前这行粗，小鱼在这行。手机上卡片只说谁在、怎么联系，班次落在卡片下面的暗底上 */
.kf-a.z-kf { grid-template-columns: minmax(0, 1fr) 240px; }
.kf-a .z-ros .is-on { box-shadow: inset 0 -2px 0 var(--track); }
.kf-a .z-ros .is-on::after { display: none; }
.kf-a .z-ros .is-on b, .kf-a .z-ros .is-next b { font-weight: 900; color: var(--ink); }
.kf-a .z-ros .is-on .num, .kf-a .z-ros .is-next .num { font-weight: 700; color: var(--ink); }

@media (max-width: 1350px) {
  .kf-a.z-kf { grid-template-columns: minmax(0, 1fr); gap: 24px 0; padding: 18px 28px 16px 286px; }
  .kf-a .z-yw { width: 272px; left: 6px; }
  .kf-a .z-talk { gap: 10px; }
  .kf-a .z-cta.lg-btn { height: 46px; padding: 0 22px; font-size: 16px; }
  .kf-a .z-ros { grid-template-columns: repeat(var(--c, 3), minmax(0, 1fr)); gap: 26px 14px; }
  .kf-a .z-ros li, .kf-a .z-ros .is-on, .kf-a .z-ros .is-next { flex-direction: column; align-items: flex-start; gap: 1px; padding: 9px 0 0; box-shadow: inset 0 2px 0 var(--track); }
  .kf-a .z-ros .xy-cs-lane { top: -17px; bottom: auto; }
}
@media (max-width: 760px) {
  .kf-a.z-kf { margin-top: 48px; gap: 0; padding: 14px 0 0; border-radius: 24px; }
  .kf-a .z-kf-bg { bottom: calc(70px + (var(--r, 1) - 1) * 74px); background: radial-gradient(52% 74% at 18% 34%, #fff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(112deg, #ffeaf3 0%, #fcc8df 50%, #f39cc4 100%); }
  .kf-a.is-off .z-kf-bg { background: radial-gradient(52% 74% at 18% 34%, #fff 0%, rgba(255, 255, 255, 0) 72%), linear-gradient(112deg, #f8f1f9 0%, #e8d9ee 50%, #d3bce0 100%); }
  .kf-a .z-yw { left: -2px; right: auto; top: auto; bottom: calc(70px + (var(--r, 1) - 1) * 74px); width: 158px; }
  .kf-a .z-talk { gap: 10px; padding: 0 10px 14px 156px; }
  /* 气泡和电脑一样两行：谁在，那句话。状态不进气泡，气泡靠那句话撑满 */
  .kf-a .z-bub { width: 100%; padding: 7px 10px 9px 11px; border-radius: 16px; }
  .kf-a .z-bub::before { left: -6px; top: 22px; width: 13px; height: 13px; border-radius: 3px; }
  .kf-a .z-bub-top { gap: 2px 8px; }
  .kf-a .z-bub-top .z-st { display: none; }
  /* 名字是气泡里最重的字：放大、最深色；那句话退后一级，同色系但浅一档 */
  .kf-a .z-name { font-size: 33px; line-height: 1.15; }
  .kf-a .z-name.is-rest { font-size: 14px; line-height: 1.2; white-space: nowrap; }
  .kf-a .z-name.is-rest .num { font-size: 15px; } .kf-a .z-name.is-rest i { font-size: 12px; }
  .kf-a .z-name.is-rest .z-nm { font-size: 25px; font-weight: 900; }
  .kf-a .z-say { margin-top: 2px; font-size: 14px; line-height: 1.35; color: #775468; }
  .kf-a .z-say .xy-cs-kao { position: absolute; right: 0; top: -28px; margin: 0; font-size: 16px; color: #775468; -webkit-text-fill-color: #775468; }
  .kf-a .z-cta.lg-btn { height: 42px; padding: 0 18px; font-size: 16px; }
  /* 暗底上的班次，和价格表一样落在页面上，不再是卡片里的一层 */
  .kf-a .z-ros { --track: rgba(255, 255, 255, .24); margin: 22px 4px 0; gap: 26px 12px; }
  .kf-a .z-ros li, .kf-a .z-ros .is-on, .kf-a .z-ros .is-next { padding: 8px 0 0; }
  .kf-a .z-ros b { font: 500 16px/1.3 var(--font-round); color: #eadfe5; }
  .kf-a .z-ros .num { font: 400 14px/1.3 var(--font-num); color: #d8cbd2; }
  .kf-a .z-ros .is-on b, .kf-a .z-ros .is-next b { color: #fff; }
  .kf-a .z-ros .is-on .num, .kf-a .z-ros .is-next .num { color: #fff; }
  .kf-a .z-ros .is-on, .kf-a .z-ros .is-next { box-shadow: inset 0 2px 0 #f7a8cb; }
  .kf-a .z-ros .xy-cs-lane { top: -17px; }

  .ph-b .z-talk { grid-template-columns: auto minmax(0, 1fr); column-gap: 10px; }
  .ph-b .z-bub { grid-column: 1 / -1; }
  .ph-b .z-talk > .z-st2 { display: inline-flex; align-self: center; font-size: 14px; font-weight: 700; color: var(--ink2); }
}
@media (max-width: 360px) {
  .kf-a .z-yw { width: 134px; left: -4px; }
  .kf-a .z-talk { padding-left: 134px; padding-right: 8px; }
  .kf-a .z-ros { gap: 26px 8px; }
  .kf-a .z-ros .num { font-size: 13px; }
  .kf-a .z-name { font-size: 29px; }
  .kf-a .z-name.is-rest { font-size: 13px; } .kf-a .z-name.is-rest .num { font-size: 14px; } .kf-a .z-name.is-rest i { font-size: 11px; }
  .kf-a .z-name.is-rest .z-nm { font-size: 22px; }
  /* 小屏那句话放不下一行：只在「疑问」后面换行，颜文字跟到第二行末尾，不和名字抢位置 */
  .kf-a .z-say { white-space: nowrap; text-wrap: wrap; }
  .kf-a .z-say .xy-cs-kao { position: static; margin-left: 4px; font-size: 14px; }
  /* 按钮收窄，给右边的状态留位置 */
  .kf-a .z-cta.lg-btn { padding: 0 12px; font-size: 15px; }
  .ph-b .z-talk { column-gap: 8px; }
  .ph-b .z-talk > .z-st2 { font-size: 13px; }
}

/* 三个板块同一种大标题；名字带小一档的 Yu⁺ 前缀，名字最重 */
.z-sec > .section-head { padding: 0 4px; }
.z-msec { margin-top: 44px; }
.z-member.xb { padding-top: 6px; }
.kf-a.z-kf { margin-top: 0; min-height: 270px; padding-left: 318px; }
.kf-a .z-yw { width: 284px; left: 14px; }
.kf-a .z-talk { gap: 16px; }
.kf-a .z-bub { padding: 15px 24px 16px; }
.kf-a .z-bub-top { --pre: 15px; flex-wrap: nowrap; align-items: baseline; }
.kf-a .z-name { display: inline-flex; align-items: baseline; font-size: 27px; line-height: 1.25; letter-spacing: .02em; white-space: nowrap; }
.kf-a .z-pre { margin-right: 6px; font: 500 var(--pre)/1 var(--font-round); letter-spacing: .02em; color: #775468; }
.kf-a .z-name .z-yu, .kf-a .z-name.is-rest .z-yu { font: italic 800 calc(var(--pre) + 1px)/1 var(--font-ui); color: #775468; }
.z-yu sup { position: relative; top: -.42em; margin-left: 1px; font-size: .72em; line-height: 0; vertical-align: baseline; }
.z-w2 { display: none; }
/* 名字再长也只省略名字本身，气泡和页面不被撑宽 */
.kf-a .z-bub { max-width: 100%; box-sizing: border-box; }
.kf-a .z-name { min-width: 0; max-width: 100%; }
.kf-a .z-name > *, .kf-a .z-st { flex-shrink: 0; }
.kf-a .z-name .z-nm { flex-shrink: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.kf-a .z-name.is-rest { gap: 0 5px; font-size: 19px; }
.kf-a .z-name.is-rest .z-pre { margin-right: 0; }
.kf-a .z-name.is-rest .z-nm { font-size: 23px; font-weight: 900; }
/* 休息时所有宽度都写成「名字 + 几点起接待」：和值班同样名字打头，整句放不下名字 */
.kf-a .z-name.is-rest .num { order: 3; margin-left: 8px; font-size: 17px; }
.kf-a .z-name.is-rest .z-w2 { display: inline; order: 4; font-size: 14px; }
.kf-a .z-cta.lg-btn { height: 44px; padding: 0 20px; font-size: 15px; }

@media (max-width: 1350px) {
  .kf-a.z-kf { min-height: 0; padding: 20px 28px 18px 272px; }
  .kf-a .z-yw { width: 248px; left: 8px; }
  .kf-a .z-talk { gap: 12px; }
}
@media (max-width: 760px) {
  .z-msec { margin-top: 0; padding-top: 30px; }
  .z-member.xb { padding-top: 0; }
  .z-ksec { padding-top: 40px; }
  .kf-a.z-kf { margin-top: 0; padding: 18px 0 0; }
  .kf-a .z-yw { width: 146px; left: 2px; }
  .kf-a .z-talk { gap: 12px; padding: 0 14px 18px 146px; }
  .kf-a .z-bub { padding: 9px 12px 10px 13px; }
  .kf-a .z-bub-top { --pre: 12px; gap: 2px 6px; }
  .kf-a .z-name { font-size: 23px; line-height: 1.2; }
  .kf-a .z-pre { margin-right: 4px; }
  .kf-a .z-say { margin-top: 3px; }
  .kf-a .z-say .xy-cs-kao { top: -22px; font-size: 14px; }
  .kf-a .z-cta.lg-btn { height: 38px; padding: 0 14px; font-size: 14px; }
  .kf-a.z-n3 .z-name .z-nm { font-size: 21px; }
  .kf-a.z-n4 .z-name .z-nm { font-size: 18px; }
  /* 休息时和值班同一行样子：名字在左，几点起接待靠右；颜文字让位 */
  .kf-a .z-bub-top, .kf-a .z-name.is-rest { width: 100%; }
  .kf-a .z-name.is-rest { gap: 0 3px; font-size: 13px; line-height: 1.2; }
  .kf-a .z-name.is-rest .z-pre { margin-right: 1px; }
  .kf-a .z-name.is-rest .z-nm { font-size: 23px; }
  .kf-a .z-name.is-rest .num { order: 3; margin-left: auto; font-size: 14px; }
  .kf-a .z-name.is-rest .z-w2 { display: inline; order: 4; font-size: 12px; }
  .kf-a.is-off .z-say .xy-cs-kao { display: none; }
  /* 休息时名字长也跟着收小，再长就省略名字，时间不出气泡 */
  .kf-a.z-n3 .z-name.is-rest .z-nm { font-size: 21px; }
  .kf-a.z-n4 .z-name.is-rest .z-nm { font-size: 18px; }
}
@media (max-width: 360px) {
  .kf-a .z-yw { width: 126px; left: 0; }
  .kf-a .z-talk { padding-left: 124px; padding-right: 10px; }
  .kf-a .z-bub-top { --pre: 11px; }
  .kf-a .z-name, .kf-a .z-name.is-rest .z-nm { font-size: 21px; }
  .kf-a .z-say .xy-cs-kao { top: auto; font-size: 13px; }
  .kf-a.is-off .z-say .xy-cs-kao { display: inline; }
  .kf-a .z-name.is-rest .num { font-size: 13px; }
  .kf-a .z-name.is-rest .z-w2 { font-size: 11px; }
  .kf-a.z-n3 .z-name .z-nm { font-size: 19px; }
  .kf-a.z-n4 .z-name .z-nm { font-size: 16px; }
  .kf-a.z-n3 .z-name.is-rest .z-nm { font-size: 19px; }
  .kf-a.z-n4 .z-name.is-rest .z-nm { font-size: 16px; }
  .kf-a .z-cta.lg-btn { padding: 0 11px; font-size: 13.5px; }
}

/* 平板和电脑：气泡不许比卡片内容区宽（名字特别长时才用得上） */
@media (min-width: 761px) {
  .kf-a .z-talk { grid-template-columns: minmax(0, 1fr); }
}

/* 320 宽休息时四个字以上的名字：省掉「起接待」，把名字写全 */
@media (max-width: 360px) {
  .kf-a.z-n4 .z-name.is-rest .z-w2 { display: none; }
}

/* 没登录：卡面写未登录，右边一句话 + 登录按钮（按钮按字宽，不拉满） */
.z-guest { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; font: 400 14px/1.4 var(--font-ui); color: var(--sub); }
.z-guest .lg-btn { display: inline-flex; flex: none; gap: 7px; height: 44px; padding: 0 22px 0 18px; font-size: 15px; line-height: 1; }
.z-guest .lg-btn svg { width: 17px; height: 17px; }
@media (max-width: 760px) {
  .z-guest { grid-column: 1 / -1; font-size: 13px; }
  .z-guest .lg-btn { gap: 6px; height: 38px; padding: 0 15px 0 12px; font-size: 14px; }
  .z-guest .lg-btn svg { width: 14px; height: 14px; }
}

@media (prefers-reduced-motion: reduce) { .xm-word { animation: none; } }

/* 咸鱼 2026-11-08：今日客服下面的小提示「不太明白如何点单？」+「点单指南」（去 guide.html）。客户首页和游客页共用（xyContactStrip）。
   业主从三版里定的：B 的样子（渐变细光边 + 玻璃圆珠里的像素小鱼 + 两颗小星星）配 A 的颜色（浅樱花底、深色字、白按钮）。
   三版原稿在 work/bak-guide-20261108/41-home.3variants.css。粉色只用浅樱花（业主不喜欢深粉）。 */
.z-tip { position: relative; display: flex; align-items: center; gap: 12px; margin-top: 18px; padding: 10px 10px 10px 12px; border-radius: 24px; color: #2a1420;
  background: radial-gradient(40% 150% at 0% 50%, #fff 0%, rgba(255, 255, 255, 0) 75%), linear-gradient(100deg, #fff4f8 0%, #fde3ee 55%, #f8cfe1 100%);
  box-shadow: 0 0 0 1px rgba(244, 179, 207, .12), 0 18px 40px -22px rgba(244, 140, 190, .75), 0 0 34px -12px rgba(244, 179, 207, .4); }
/* 渐变细光边：樱花粉 → 淡紫 → 白 → 樱花粉，左边和右边亮，中间淡 */
.z-tip::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.5px; pointer-events: none;
  background: linear-gradient(100deg, #f4a9cb, #c9b0f0 38%, rgba(255, 255, 255, .9) 66%, #f4b3cf);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.z-tip-ic { position: relative; flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  background: radial-gradient(circle at 34% 28%, #fff 0%, #fff 30%, #fde3ee 78%); box-shadow: inset 0 0 0 1px rgba(244, 179, 207, .65), 0 6px 14px -8px rgba(200, 90, 140, .55); }
.z-tip-fish { position: relative; display: block; }
.z-tip .xy-cs-fish { width: 27px; height: 17px; filter: none; }
.z-tip-spark { position: absolute; left: 44px; top: 4px; width: 15px; height: 15px; color: #fff; filter: drop-shadow(0 0 3px rgba(240, 150, 195, .9)); pointer-events: none; }
.z-tip-spark + .z-tip-spark { left: 8px; top: auto; bottom: 5px; width: 9px; height: 9px; color: #c3a6ee; filter: none; }
.z-tip-spark svg { display: block; width: 100%; height: 100%; }
.z-tip-q { position: relative; flex: 1; min-width: 0; margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 10px; font: 700 16px/1.35 var(--font-serif); letter-spacing: .06em; }
.z-tip-kao { font: 500 13px/1 var(--font-round); font-style: normal; letter-spacing: 0; white-space: nowrap; color: #8a5a72; }
.z-tip .lg-btn.lg-dark { flex: none; display: inline-flex; gap: 2px; height: 38px; padding: 0 13px 0 18px; font-size: 14px; text-decoration: none;
  color: #2a1420; background: #fff; box-shadow: inset 0 0 0 1px rgba(244, 179, 207, .7), 0 8px 18px -10px rgba(200, 90, 140, .6); }
.z-tip .lg-btn.lg-dark::before { display: none; }
.z-tip .lg-btn.lg-dark:hover { background: #fff8fb; }
.z-tip .lg-btn svg { width: 15px; height: 15px; }
@media (max-width: 760px) {
  .z-tip { margin-top: 16px; gap: 9px; padding: 8px 8px 8px 9px; border-radius: 22px; }
  .z-tip-ic { width: 38px; height: 38px; }
  .z-tip .xy-cs-fish { width: 23px; height: 15px; }
  .z-tip-spark { left: 37px; top: 3px; width: 13px; height: 13px; }
  .z-tip-q { font-size: 14.5px; letter-spacing: .03em; }
  .z-tip .lg-btn.lg-dark { height: 36px; padding: 0 11px 0 15px; font-size: 13.5px; }
}
@media (max-width: 400px) { .z-tip-kao { display: none; } }
@media (max-width: 360px) {
  .z-tip { gap: 7px; }
  .z-tip-q { font-size: 13.5px; letter-spacing: 0; }
  .z-tip .lg-btn.lg-dark { padding: 0 9px 0 13px; font-size: 13px; }
}