:root{
  /* ===== 金蛭汇平台色系 ===== */
  --ink:#12494A;          /* 主色 墨绿 */
  --ink-deep:#0B3637;     /* 深底 */
  --ink-grad:linear-gradient(160deg,#0B3637 0%,#12494A 70%);
  --gold:#B08D57;         /* 辅助色 香槟金 */
  --gold-2:#D4B982;       /* 浅金 */
  --gold-3:#E5DCC8;       /* 更浅金 */
  --gold-wash:rgba(176,141,87,.12);
  --cream:#F6F1E6;        /* 米白底 */
  --card:#FFFFFF;
  --text:#333333;
  --text-2:rgba(51,51,51,.62);
  --text-3:rgba(51,51,51,.42);
  --line:rgba(18,73,74,.14);
  --line-gold:rgba(176,141,87,.42);

  --serif:"Songti SC","STSong","SimSun",serif;
  --sans:"PingFang SC","Microsoft YaHei",-apple-system,sans-serif;
  --mono:"SF Mono","Menlo","Consolas","DIN Alternate",monospace;

  --r:14px;
}
*{box-sizing:border-box;-webkit-font-smoothing:antialiased}
body{
  margin:0;background:#EDEAE1;color:var(--text);
  font-family:var(--sans);font-size:13px;line-height:1.6;
}
h1,h2,h3,h4{font-family:var(--serif);font-weight:400;margin:0}

/* ============ 页面骨架 ============ */
.wrap{max-width:1560px;margin:0 auto;padding:28px 30px 60px}
body.solo .wrap{max-width:none;padding:0}
body.solo .head,body.solo .col-l,body.solo .col-r{display:none}
body.solo .phone-cap{display:none}
body.solo .stage{justify-content:center;height:100vh}
body.solo .cols{grid-template-columns:1fr;gap:0}
body.solo .stage{gap:0}
.head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;
  padding-bottom:20px;border-bottom:1px solid rgba(18,73,74,.16);margin-bottom:26px}
.head-l .eyebrow{font-size:11px;letter-spacing:3px;color:var(--gold);font-weight:500;margin-bottom:9px}
.head-l h1{font-size:29px;color:var(--ink);letter-spacing:1px}
.head-l h1 em{font-style:normal;color:var(--gold)}
.head-l p{margin:8px 0 0;font-size:13px;color:var(--text-2);max-width:640px}
.head-r{display:flex;gap:9px;flex-wrap:wrap;justify-content:flex-end}
.tag{font-size:11px;padding:5px 11px;border-radius:20px;border:1px solid var(--line);
  color:var(--ink);background:rgba(255,255,255,.5);white-space:nowrap}
.tag.g{border-color:var(--line-gold);color:#8A6A3C;background:var(--gold-wash)}

.cols{display:grid;grid-template-columns:262px minmax(0,1fr) 336px;gap:24px;align-items:start}

/* ============ 左栏 ============ */
.panel{background:rgba(255,255,255,.66);border:1px solid rgba(18,73,74,.13);
  border-radius:var(--r);padding:17px 18px}
.panel+.panel{margin-top:14px}
.panel h3{font-size:14px;color:var(--ink);margin-bottom:11px;display:flex;
  align-items:center;gap:8px}
.panel h3::before{content:"";width:16px;height:2px;background:var(--gold);flex:none}

.flow{display:flex;flex-direction:column;gap:2px;margin-bottom:14px}
.flow-step{display:flex;gap:11px;align-items:flex-start;padding:9px 10px;border-radius:9px;
  cursor:pointer;transition:background .18s;border:1px solid transparent;text-align:left;
  width:100%;background:none;font:inherit;color:inherit}
.flow-step:hover{background:rgba(176,141,87,.09)}
.flow-step.on{background:var(--gold-wash);border-color:var(--line-gold)}
.fs-n{width:21px;height:21px;flex:none;border-radius:50%;background:#fff;
  border:1.4px solid var(--line-gold);color:#8A6A3C;font-size:11px;font-weight:500;
  display:grid;place-items:center;margin-top:1px}
.flow-step.on .fs-n{background:var(--ink);border-color:var(--ink);color:var(--cream)}
.fs-t{font-size:13px;color:var(--ink);line-height:1.45}
.fs-d{font-size:11.5px;color:var(--text-3);line-height:1.5;margin-top:2px}

.specs{list-style:none;padding:0;margin:0}
.specs li{padding:8px 0;border-bottom:1px dashed rgba(18,73,74,.13);font-size:12.5px;
  color:var(--text-2);display:flex;gap:9px}
.specs li:last-child{border-bottom:0}
.specs li b{color:var(--ink);font-weight:500;flex:none;min-width:60px}
.swatchrow{display:flex;gap:7px;margin:3px 0 11px}
.sw{flex:1;height:42px;border-radius:8px;border:1px solid rgba(0,0,0,.07);
  display:flex;align-items:flex-end;justify-content:center;padding-bottom:4px;
  font-size:9px;letter-spacing:.3px;font-family:var(--mono)}
.type-scale{font-size:12.5px;color:var(--text-2);line-height:2}
.type-scale span{color:var(--ink);font-family:var(--serif)}

/* ============ 中栏：手机 ============ */
.stage{display:flex;flex-direction:column;align-items:center;gap:15px}
.phone{width:391px;height:812px;background:var(--cream);border-radius:42px;
  padding:11px;box-shadow:0 26px 60px rgba(11,54,55,.26),0 0 0 1px rgba(18,73,74,.16),
  inset 0 0 0 7px #1B1B1B;position:relative;overflow:hidden}
.notch{position:absolute;top:19px;left:50%;transform:translateX(-50%);
  width:112px;height:25px;background:#1B1B1B;border-radius:14px;z-index:30}
.screen{width:100%;height:100%;border-radius:32px;overflow:hidden;background:var(--cream);
  position:relative;display:flex;flex-direction:column}

/* 状态栏 */
.statusbar{height:46px;flex:none;display:flex;align-items:center;justify-content:space-between;
  padding:0 22px;font-size:12px;font-weight:500;color:var(--ink);position:relative;z-index:5;
  transition:color .2s}
.statusbar.onmask{color:rgba(246,241,230,.9)}
.sb-r{display:flex;align-items:center;gap:4px}
.bars{display:flex;align-items:flex-end;gap:1.6px;height:10px}
.bars i{width:2.6px;background:var(--ink);border-radius:1px;display:block}
.batt{width:22px;height:11px;border:1.3px solid var(--ink);border-radius:3px;position:relative;padding:1.5px}
.batt::after{content:"";position:absolute;right:-3.4px;top:3px;width:2px;height:5px;
  background:var(--ink);border-radius:0 1px 1px 0}
.batt i{display:block;height:100%;width:72%;background:var(--ink);border-radius:1px}

.page{display:none;flex:1;flex-direction:column;overflow-x:hidden;overflow-y:auto;
  position:relative;scrollbar-width:none;-ms-overflow-style:none}
.page::-webkit-scrollbar{display:none}
.page.on{display:flex}
/* 可滚动时的底部渐隐提示 */
.scroll-fade{position:absolute;left:0;right:0;bottom:0;height:34px;pointer-events:none;
  background:linear-gradient(to top,var(--cream),rgba(246,241,230,0));z-index:10}

/* ============ P1 登录 ============ */
.p1{padding:0 22px 12px}
.brandbar{height:4px;background:var(--ink-grad);margin:0 -22px 13px;flex:none}
.p1 h2{font-size:24px;color:var(--ink);letter-spacing:1.2px;line-height:1.26}
.p1 h2 b{font-weight:700;font-family:var(--serif)}
.p1 .sub{font-size:12.5px;color:var(--text-2);margin-top:6px;letter-spacing:.4px}
.rule{width:34px;height:2.5px;background:var(--gold);margin:10px 0 12px}

.fld{margin-bottom:8px}
.lbl{font-size:12px;color:var(--ink);margin-bottom:5px;display:flex;
  justify-content:space-between;align-items:baseline;gap:8px}
.lbl .req{color:#B4553C;font-size:10.5px;margin-left:3px}
.lbl .note{font-size:10.5px;color:var(--text-3)}
.inp{height:36px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:0 12px;display:flex;align-items:center;font-size:13.5px;color:var(--text);
  outline:none;transition:border-color .18s;gap:8px}
.inp.focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.inp.ph{color:var(--text-3)}
.inp .fill{flex:1}
.inp .unit{font-size:11.5px;color:var(--text-3)}

/* 身份下拉框 */
.selwrap{position:relative}
.sel{height:36px;background:var(--card);border:1px solid var(--line);border-radius:10px;
  padding:0 12px;display:flex;align-items:center;gap:8px;cursor:pointer;transition:.18s}
.sel:hover{border-color:var(--gold)}
.sel.open{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}
.sel .fill{flex:1;font-size:13.5px}
.sel .fill.ph{color:var(--text-3)}
.sel .caret{color:var(--gold);font-size:11px;transition:transform .2s;flex:none}
.sel.open .caret{transform:rotate(180deg)}
.sel .tick{margin-left:auto;display:none}
.sel.has .tick{display:grid}
.selmenu{position:absolute;left:0;right:0;top:calc(100% + 5px);z-index:40;
  background:var(--card);border:1px solid var(--line-gold);border-radius:12px;
  box-shadow:0 12px 32px rgba(11,54,55,.2);overflow:hidden;display:none}
.selmenu.on{display:block;animation:menuIn .18s ease}
@keyframes menuIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:none}}
.selopt{padding:9px 12px;display:flex;align-items:center;gap:9px;cursor:pointer;
  border-bottom:1px solid rgba(18,73,74,.08);transition:background .15s}
.selopt:last-child{border-bottom:0}
.selopt:hover{background:var(--gold-wash)}
.selopt.sel{background:rgba(18,73,74,.05)}
.selopt.dis{opacity:.5;cursor:not-allowed}
.selopt .tier-n{font-family:var(--serif);font-size:14.5px;color:var(--ink);letter-spacing:.5px}
.selopt .tier-s{font-size:10.5px;color:var(--text-3);margin:0;display:flex;align-items:center;gap:4px}
.selopt .tick{width:13px;height:13px;margin-left:auto;display:none}
.selopt.sel .tick{display:grid}
.selopt .tier-s{margin-left:auto}

.tick{width:12px;height:12px;border-radius:50%;border:1.4px solid var(--line);flex:none;
  display:grid;place-items:center;font-size:8px;color:transparent}
.tier.ok .tick,.selopt.ok .tick{background:var(--ink);border-color:var(--ink);color:var(--gold-2)}
.tier.wait .tick,.selopt.wait .tick{border-color:var(--gold);background:var(--gold-wash);color:var(--gold)}
.tier.dis .tick,.selopt.dis .tick{border-color:#CFC7B6}
.chkline{font-size:11.5px;margin-top:7px;padding:6px 10px;border-radius:8px;
  background:var(--gold-wash);color:#8A6A3C;border-left:2px solid var(--gold)}
.chkline.bad{background:rgba(180,85,60,.08);color:#9C4A34;border-left-color:#B4553C}

/* 性别 */
.segs{display:flex;gap:8px}
.seg{flex:1;height:36px;border:1px solid var(--line);background:var(--card);border-radius:10px;
  display:flex;align-items:center;justify-content:center;gap:6px;
  font-size:13.5px;color:var(--text-2);cursor:pointer;transition:.18s}
.seg.sel{border-color:var(--ink);border-width:1.5px;color:var(--ink);font-weight:500}
.seg.sel::after{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);
  flex:none;display:block}

/* 隐私 */
.privacy{display:flex;gap:8px;align-items:flex-start;font-size:11.5px;color:var(--text-2);
  margin:4px 0 14px;line-height:1.55}
.pbox{width:15px;height:15px;border:1.4px solid var(--gold);border-radius:4px;flex:none;
  margin-top:1px;display:grid;place-items:center;font-size:10px;color:var(--gold);
  background:var(--gold-wash);cursor:pointer}
.pbox.off{background:transparent;color:transparent;border-color:var(--line)}
.privacy a{color:var(--ink);text-decoration:underline;text-underline-offset:2px}

/* CTA */
.cta{height:48px;border-radius:12px;background:var(--ink);color:var(--cream);
  border:1px solid var(--gold);font-size:15px;font-family:var(--serif);letter-spacing:3px;
  display:grid;place-items:center;cursor:pointer;transition:.2s;flex:none;
  box-shadow:0 4px 14px rgba(18,73,74,.2)}
.cta:active{transform:translateY(1px)}
.cta.dis{background:#B9C3C2;border-color:#D8DEDC;color:#EFF2F1;box-shadow:none;cursor:not-allowed}
.foot-note{text-align:center;font-size:10.5px;color:var(--text-3);margin-top:9px;line-height:1.6}

/* ============ P2 抽号 · 幸运轮盘（老虎机结构 × 金蛭汇色系） ============ */
:root{--slot-h:92px;--slot-gap:2px}
.p2{position:relative;align-items:stretch;justify-content:center;padding:0 20px 20px;min-height:100%;
  background:
    radial-gradient(ellipse 72% 42% at 50% 38%, rgba(176,141,87,.32), transparent 72%),
    linear-gradient(165deg,#0B3637 0%,#12494A 62%,#0D3E3F 100%);
  overflow:hidden}
.p2::after{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;
  background:radial-gradient(ellipse 86% 52% at 50% 34%, transparent 44%, rgba(11,54,55,.6) 100%)}
/* 滚动中的动态中心光晕（静态时不出现） */
.p2.live::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:0;
  background:radial-gradient(ellipse 70% 40% at 50% 38%,rgba(232,200,106,.42),transparent 72%);
  animation:glowBreathe 1.35s ease-in-out infinite alternate}
@keyframes glowBreathe{from{opacity:.18}to{opacity:1}}

/* 背景发光带：两层相位错开半个条纹，滚动时明暗交替反转 + 缓慢旋转 */
.beams{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.beam{position:absolute;left:50%;top:38%;width:150%;height:150%;display:block;
  transform:translate(-50%,-50%);transform-origin:center}
.beam-a{background:repeating-conic-gradient(from 0deg at 50% 50%,
  rgba(232,200,106,.16) 0deg 4.5deg, rgba(6,32,33,.02) 4.5deg 9deg)}
.beam-b{background:repeating-conic-gradient(from 4.5deg at 50% 50%,
  rgba(240,210,130,.22) 0deg 4.5deg, rgba(4,24,25,.62) 4.5deg 9deg);opacity:0}
.p2.live .beam-a{animation:beamSpin 1.5s linear infinite, beamFlipA 1.05s ease-in-out infinite}
.p2.live .beam-b{animation:beamSpin 1.5s linear infinite, beamFlipB 1.05s ease-in-out infinite}
@keyframes beamSpin{
  from{transform:translate(-50%,-50%) rotate(0deg)}
  to{transform:translate(-50%,-50%) rotate(9deg)}
}
@keyframes beamFlipA{0%,100%{opacity:1}50%{opacity:.04}}
@keyframes beamFlipB{0%,100%{opacity:.04}50%{opacity:1}}

/* 背景音乐开关：右上角，不占布局、不受内容上移 100px 影响 */
.bgm-btn{position:absolute;top:14px;right:14px;width:34px;height:34px;z-index:6;
  display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  border:1px solid rgba(232,200,106,.55);background:rgba(11,54,55,.55);
  color:#E8C86A;transition:.2s;
  box-shadow:0 2px 10px rgba(0,0,0,.3),inset 0 0 0 1px rgba(255,255,255,.07)}
.bgm-btn:hover{background:rgba(176,141,87,.28);transform:scale(1.06)}
.bgm-btn svg{width:19px;height:19px}
.bgm-btn .ic-off{display:none}
.bgm-btn.muted .ic-on{display:none}
.bgm-btn.muted .ic-off{display:block}
.bgm-btn.muted{color:rgba(246,241,230,.5);border-color:rgba(246,241,230,.26)}
.bgm-btn.playing{animation:bgmPulse 1.6s ease-in-out infinite}
@keyframes bgmPulse{
  0%,100%{box-shadow:0 2px 10px rgba(0,0,0,.3),0 0 0 0 rgba(232,200,106,.34)}
  50%{box-shadow:0 2px 10px rgba(0,0,0,.3),0 0 0 7px rgba(232,200,106,0)}
}

/* 顶部金星：打开页面即常驻闪烁 */
.stars{position:relative;z-index:3;flex:none;margin:52px 0 8px;
  display:flex;align-items:flex-end;justify-content:center;gap:12px;pointer-events:none}
.st{width:15px;fill:#C9A45E;filter:drop-shadow(0 0 5px rgba(230,190,110,.9));
  animation:twinkle 1.7s ease-in-out infinite}
.st.s2{width:21px;fill:#DCB872;filter:drop-shadow(0 0 8px rgba(230,190,110,.95));
  animation-duration:1.45s;animation-delay:.22s}
.st.s3{width:29px;fill:#E8C86A;filter:drop-shadow(0 0 12px rgba(240,205,120,1));
  animation-duration:1.9s;animation-delay:.44s}
.st.s4{width:21px;fill:#DCB872;filter:drop-shadow(0 0 8px rgba(230,190,110,.95));
  animation-duration:1.55s;animation-delay:.66s}
.st.s5{width:15px;fill:#C9A45E;filter:drop-shadow(0 0 5px rgba(230,190,110,.9));
  animation-duration:1.8s;animation-delay:.88s}
@keyframes twinkle{
  0%,100%{opacity:.38;transform:scale(.82);filter:drop-shadow(0 0 3px rgba(230,190,110,.45))}
  50%{opacity:1;transform:scale(1.14);filter:drop-shadow(0 0 13px rgba(248,216,132,1))}
}

/* 按钮上方内容（金星 / 标题 / 机台）整体上移 100px，按钮保持原位 */
.p2 .stars,.p2 .p2-top,.p2 .cab{transform:translateY(-100px)}

.p2-top{text-align:center;margin-bottom:12px;flex:none;position:relative;z-index:2}
.p2-top h2{font-size:22px;color:var(--cream);letter-spacing:2px;text-shadow:0 2px 10px rgba(0,0,0,.4)}
.p2-top .who{font-size:12px;color:rgba(246,241,230,.68);margin-top:6px}
.p2-top .who b{color:#E8C86A;font-weight:500}
.p2-top .who .sep{color:rgba(212,185,130,.7);margin:0 5px}

/* 金属机台 */
.cab{position:relative;width:100%;align-self:stretch;box-sizing:border-box;
  padding:14px;border-radius:16px;flex:none;
  background:linear-gradient(180deg,#F6F4EE 0%,#D3D0C6 13%,#918E85 50%,#CFCBC1 87%,#F0EEE7 100%);
  box-shadow:0 16px 34px rgba(0,0,0,.5),
             0 0 0 2px rgba(176,141,87,.8),
             0 0 24px rgba(176,141,87,.45),
             inset 0 1px 0 rgba(255,255,255,.95)}
.cab-inner{position:relative;border-radius:8px;padding:13px 7px;
  background:
    radial-gradient(ellipse 80% 70% at 50% 40%, rgba(176,141,87,.22), transparent 72%),
    repeating-conic-gradient(from 0deg at 50% 40%,
      rgba(176,141,87,.08) 0deg 4.5deg, transparent 4.5deg 9deg),
    linear-gradient(160deg,#0B3637,#12494A 74%);
  box-shadow:inset 0 3px 14px rgba(0,0,0,.62)}

/* 中奖线：横向金线 + 三角指针 */
.payline{position:absolute;left:7px;right:7px;top:50%;height:0;z-index:4;pointer-events:none;
  transform:translateY(-1px);
  border-top:1.4px solid rgba(212,185,130,.8)}

/* 滚轮 */
.slots{position:relative;z-index:2;display:flex;gap:2px;justify-content:center;align-items:stretch;
  padding:2px 0;border-radius:5px;
  background:linear-gradient(180deg,#C4C1B7,#8B887F 46%,#C4C1B7)}
.slot{flex:none;height:var(--slot-h);overflow:hidden;position:relative;border-radius:3px;
  background:linear-gradient(180deg,#8E9396 0%,#D9D7CE 15%,#FDFDFB 47%,#D9D7CE 83%,#8E9396 100%);
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),
             inset 0 5px 9px rgba(0,0,0,.3), inset 0 -5px 9px rgba(0,0,0,.3)}
.slot:first-child{transform:perspective(420px) rotateY(6deg)}
.slot:last-child{transform:perspective(420px) rotateY(-6deg)}
.slot .strip{line-height:var(--slot-h);text-align:center;font-family:var(--mono);font-size:34px;
  color:#12494A;will-change:transform;text-shadow:0 1px 1px rgba(255,255,255,.7)}
/* 序号位：次级信息层，压暗 */
.slot.ser{background:linear-gradient(180deg,#84898C 0%,#C3C1B9 15%,#E9E7E0 47%,#C3C1B9 83%,#84898C 100%)}
.slot.ser .strip{color:#6E7A78;text-shadow:0 1px 1px rgba(255,255,255,.55)}
/* 身份字母位：金调 */
.slot.ltr{background:linear-gradient(180deg,#9C8A62 0%,#E5D9BC 15%,#FCF7EA 47%,#E5D9BC 83%,#9C8A62 100%);
  box-shadow:inset 0 0 0 1.4px rgba(176,141,87,.85),
             inset 0 5px 9px rgba(0,0,0,.3), inset 0 -5px 9px rgba(0,0,0,.3)}
.slot.ltr .strip{color:#8A6A3C;font-size:31px;text-shadow:0 1px 1px rgba(255,255,255,.6)}
.slot.landed{box-shadow:inset 0 0 0 1px rgba(255,255,255,.45),
  inset 0 5px 9px rgba(0,0,0,.3), inset 0 -5px 9px rgba(0,0,0,.3), 0 0 12px rgba(232,200,106,.75)}
.slot.ltr.landed{box-shadow:inset 0 0 0 1.6px #E8C86A,
  inset 0 5px 9px rgba(0,0,0,.3), inset 0 -5px 9px rgba(0,0,0,.3), 0 0 14px rgba(232,200,106,.85)}

/* 待机占位 */
.slot.idle .strip{opacity:0}
.slot.idle::after{content:attr(data-ghost);position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--mono);font-size:31px;color:rgba(18,73,74,.34);
  animation:ghostPulse 2.4s ease-in-out infinite}
.slot.idle.ltr::after{font-size:28px;color:rgba(138,106,60,.6)}
@keyframes ghostPulse{0%,100%{opacity:.5}50%{opacity:1}}

/* 机台下方：两个同款香槟金质感按钮（45px / 19px），多层金箔 + 内嵌金线 + 流光 */
.p2-btns{display:flex;gap:10px;justify-content:center;width:100%;margin-top:34px;
  flex:none;position:relative;z-index:3}
.startbtn,.againbtn{
  position:relative;flex:1;max-width:158px;height:45px;border-radius:14px;
  border:1.4px solid #F7E6BC;overflow:hidden;cursor:pointer;
  background:
    linear-gradient(180deg,rgba(255,255,255,.52) 0%,rgba(255,255,255,0) 44%,rgba(90,60,20,.20) 100%),
    linear-gradient(160deg,#F5DEA4 0%,#D9B976 47%,#A8814C 100%);
  color:#103A3A;font-size:19px;font-family:var(--serif);font-weight:700;
  letter-spacing:5px;text-indent:5px;
  text-shadow:0 1px 0 rgba(255,255,255,.5);
  box-shadow:0 8px 20px rgba(0,0,0,.45), 0 0 0 3px rgba(176,141,87,.16),
             inset 0 1px 0 rgba(255,255,255,.72), inset 0 -2px 5px rgba(90,60,20,.28);
  transition:transform .18s,filter .2s,box-shadow .25s}
/* 内嵌细金线，做出金属压边层次 */
.startbtn::before,.againbtn::before{content:"";position:absolute;inset:3.5px;
  border:1px solid rgba(120,85,35,.42);border-radius:10px;pointer-events:none;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.26)}
/* 斜向流光扫过 */
.startbtn::after,.againbtn::after{content:"";position:absolute;top:-50%;bottom:-50%;left:-70%;
  width:40%;transform:skewX(-20deg);pointer-events:none;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.58),transparent);
  animation:btnSheen 3.2s ease-in-out infinite}
@keyframes btnSheen{0%,58%{left:-70%}100%{left:130%}}
.startbtn:active,.againbtn:active{transform:translateY(1px)}
/* 主按钮呼吸光晕 */
.startbtn{animation:btnGlow 2.3s ease-in-out infinite}
@keyframes btnGlow{
  0%,100%{box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 0 3px rgba(176,141,87,.16),
          inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 5px rgba(90,60,20,.28),
          0 0 12px rgba(232,200,106,.30)}
  50%{box-shadow:0 8px 20px rgba(0,0,0,.45),0 0 0 3px rgba(176,141,87,.26),
      inset 0 1px 0 rgba(255,255,255,.72),inset 0 -2px 5px rgba(90,60,20,.28),
      0 0 28px rgba(232,200,106,.82)}
}
/* 禁用态仍保持金色同款，只压暗一点，不做成墨绿 */
.startbtn:disabled,.againbtn:disabled{filter:saturate(.82) brightness(.9);cursor:not-allowed;
  box-shadow:0 4px 12px rgba(0,0,0,.3),0 0 0 3px rgba(176,141,87,.1),
             inset 0 1px 0 rgba(255,255,255,.42)}
.startbtn:disabled{animation:none;cursor:wait}
.startbtn:disabled::after,.againbtn:disabled::after{animation:none;opacity:0}
/* 滚动中：向下高速拖影，落定即移除 */
.slots.spinning .slot .strip{filter:blur(.6px)}
.hint{font-size:11.5px;color:rgba(246,241,230,.6);margin-top:14px;text-align:center;line-height:1.7;
  flex:none;position:relative;z-index:2}

/* ============ P3 结果 · 会员身份卡（象牙金亮面 + 织纹底纹 + 香槟金压印） ============ */
.p3{align-items:center;justify-content:center;padding:24px 22px;text-align:center;min-height:100%;
  background:radial-gradient(125% 72% at 50% 0%,#F7F2E5 0%,#E9E0CC 58%,#D9CFB6 100%)}
.badge{
  width:100%;position:relative;isolation:isolate;overflow:hidden;border-radius:18px;
  padding:27px 20px 21px;color:#6E5427;
  background:
    radial-gradient(135% 95% at 3% -10%,rgba(255,255,255,.98) 0%,rgba(255,255,255,0) 58%),
    radial-gradient(120% 110% at 100% 112%,rgba(176,141,87,.26) 0%,rgba(176,141,87,0) 62%),
    linear-gradient(158deg,#FFFDF7 0%,#F9F1DE 44%,#EEDFC0 100%);
  border:1px solid rgba(176,141,87,.62);
  box-shadow:0 18px 40px rgba(84,64,30,.18),0 3px 10px rgba(84,64,30,.10),
    inset 0 1px 0 rgba(255,255,255,.95),inset 0 -1px 0 rgba(176,141,87,.28);
}
/* 象牙面细颗粒：只提供纸张 / 漆面手感 */
.badge::before{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  opacity:.11;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E");
}
/* 内圈压印双线 + 珍珠斜向柔光 */
.badge::after{
  content:"";position:absolute;inset:8px;z-index:0;pointer-events:none;border-radius:12px;
  border:1px solid rgba(160,120,55,.48);
  box-shadow:inset 0 0 0 3px rgba(255,255,255,.55),inset 0 0 0 4px rgba(160,120,55,.16);
  background:linear-gradient(118deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.55) 47%,rgba(255,255,255,0) 64%);
}
.badge > div:not(.badge-corners):not(.badge-weave):not(.badge-seal){position:relative;z-index:1}
/* 底纹一：菱格织纹 + 方胜暗花，中央渐隐保证号码清晰 */
.badge-weave{
  position:absolute;inset:0;z-index:0;pointer-events:none;opacity:.42;
  background-image:
    repeating-linear-gradient(45deg,rgba(160,120,55,.085) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(-45deg,rgba(160,120,55,.085) 0 1px,transparent 1px 9px),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='64' viewBox='0 0 64 64'%3E%3Cg fill='none' stroke='%23B08D57' stroke-width='.7'%3E%3Cpath d='M32 5 L59 32 L32 59 L5 32 Z'/%3E%3Cpath d='M32 17 L47 32 L32 47 L17 32 Z'/%3E%3Ccircle cx='32' cy='32' r='2.6'/%3E%3C/g%3E%3C/svg%3E");
  background-size:auto,auto,64px 64px;
  -webkit-mask-image:radial-gradient(125% 105% at 50% 42%,rgba(0,0,0,.30) 0%,#000 100%);
  mask-image:radial-gradient(125% 105% at 50% 42%,rgba(0,0,0,.30) 0%,#000 100%);
}
/* 底纹二：中央同心圆 + 放射线水印 */
.badge-seal{
  position:absolute;left:50%;top:46%;width:300px;height:300px;
  transform:translate(-50%,-50%);z-index:0;pointer-events:none;opacity:.34;border-radius:50%;
  background:
    radial-gradient(circle,transparent 0 34%,rgba(176,141,87,.34) 34.2% 34.6%,transparent 34.9% 45%,rgba(176,141,87,.24) 45.2% 45.6%,transparent 45.9%),
    repeating-conic-gradient(from 0deg,rgba(176,141,87,.18) 0deg 1deg,transparent 1deg 10deg);
  -webkit-mask-image:radial-gradient(circle,transparent 0 25%,#000 38%,transparent 72%);
  mask-image:radial-gradient(circle,transparent 0 25%,#000 38%,transparent 72%);
}
/* 四角 L 形金线 */
.badge-corners{position:absolute;inset:0;z-index:2;pointer-events:none}
.badge-corners i{position:absolute;width:13px;height:13px;
  border:0 solid rgba(150,110,45,.82);border-radius:2px}
.badge-corners i:nth-child(1){top:15px;left:15px;border-top-width:1px;border-left-width:1px}
.badge-corners i:nth-child(2){top:15px;right:15px;border-top-width:1px;border-right-width:1px}
.badge-corners i:nth-child(3){bottom:15px;left:15px;border-bottom-width:1px;border-left-width:1px}
.badge-corners i:nth-child(4){bottom:15px;right:15px;border-bottom-width:1px;border-right-width:1px}
/* 品牌行：烫金小字 + 两侧渐隐金线 */
.badge-top{
  display:flex;align-items:center;justify-content:center;gap:11px;
  font-family:var(--serif);font-size:10.5px;letter-spacing:3.4px;
  margin-bottom:19px;
  background:linear-gradient(90deg,#96702F,#B8893B 48%,#96702F);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
}
.badge-top::before,.badge-top::after{content:"";width:28px;height:1px;flex:none;
  -webkit-text-fill-color:initial}
.badge-top::before{background:linear-gradient(90deg,transparent,rgba(150,110,45,.65))}
.badge-top::after{background:linear-gradient(90deg,rgba(150,110,45,.65),transparent)}
/* 身份牌：金边内凹 + 两侧菱形 */
.badge-tier{
  position:relative;display:inline-block;font-family:var(--serif);font-size:20px;
  letter-spacing:6px;text-indent:6px;color:#74541F;
  padding:6px 21px;margin-bottom:19px;border-radius:3px;
  border:1px solid rgba(150,110,45,.62);
  background:linear-gradient(180deg,rgba(255,255,255,.85),rgba(176,141,87,.10));
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 1px 0 rgba(150,110,45,.16);
}
.badge-tier::before,.badge-tier::after{content:"";position:absolute;top:50%;width:4px;height:4px;
  background:#A47B35;transform:translateY(-50%) rotate(45deg);opacity:.9}
.badge-tier::before{left:-13px}
.badge-tier::after{right:-13px}
/* 号码：全字符统一金箔浮雕 —— 日期段、随机序号、身份字母同一套效果，字母无底色。
   亮面卡改用「深香槟金渐变 + 白色高光 + 暗部投影」，浅底上依然清晰立体 */
.code{font-family:var(--mono);font-size:33px;letter-spacing:2.2px;line-height:1.35;
  white-space:nowrap;padding:2px 0 3px}
.code > span,.code .sl,.code .lt{
  font-weight:700;
  background:linear-gradient(180deg,#F6DFA6 0%,#C69A4C 38%,#8E6426 72%,#D1AC63 100%);
  -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.92)) drop-shadow(0 1px 1px rgba(92,64,22,.42));
}
/* 号码下方装饰线 + 中央菱形 */
.code-rule{display:flex;align-items:center;gap:9px;margin:15px 2px 0}
.code-rule::before,.code-rule::after{content:"";flex:1;height:1px;
  background:linear-gradient(90deg,transparent,rgba(150,110,45,.55),transparent)}
.code-rule i{width:5px;height:5px;flex:none;background:#A47B35;
  transform:rotate(45deg);opacity:.9}
/* 底部信息 */
.badge-meta{display:flex;justify-content:space-between;align-items:center;
  font-size:10.5px;letter-spacing:1px;color:rgba(92,70,34,.74);
  margin-top:15px;padding:0 2px}
.badge-meta b{font-weight:600;color:#8A6527;font-family:var(--mono);letter-spacing:.5px}
.badge-meta span:last-child{letter-spacing:2px}
/* 入表回执：领取身份码这一步已写入后台表格 */
.syncbar{display:flex;align-items:center;gap:9px;width:100%;margin-top:12px;
  padding:9px 11px;border-radius:11px;text-align:left;
  border:1px solid rgba(18,73,74,.16);background:rgba(255,255,255,.76);
  box-shadow:0 2px 9px rgba(84,64,30,.07)}
.syncbar .ic{width:20px;height:20px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-size:12px;line-height:1;color:#fff;background:#1E7A68}
.syncbar .txt{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.syncbar .txt b{font-size:12px;color:#12494A;font-weight:600}
.syncbar .txt small{font-size:10.5px;color:rgba(51,51,51,.58);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.syncbar .go{margin-left:auto;flex:none;font-size:11px;color:#8A6527;text-decoration:none;
  border-bottom:1px solid rgba(138,101,39,.45);padding-bottom:1px}
.syncbar.preview .ic,.syncbar.pending .ic{background:#B08D57}
.syncbar.preview .txt b,.syncbar.pending .txt b{color:#8A6527}
.syncbar.done{animation:syncIn .45s ease-out}
@keyframes syncIn{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.chain{margin-top:10px;font-size:11.5px;color:var(--text-2);display:flex;align-items:center;
  justify-content:center;gap:6px;flex-wrap:wrap}
.chain b{color:var(--ink);font-weight:500}
.chain .dot{color:var(--gold)}

/* 全屏礼花层：覆盖整个视窗、不拦截点击，持续 5 秒 */
.fx-full{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;
  z-index:9998;display:none}
.fx-full.on{display:block}
.actions{margin-top:14px;display:flex;flex-direction:column;gap:9px;width:100%}
.replay{margin-top:11px;font-size:11px;letter-spacing:1px;color:#8A6527;
  opacity:.8;cursor:pointer;user-select:none}
.replay:hover{opacity:1;text-decoration:underline}
.btnrow{display:flex;gap:9px}
.btnrow .cta{flex:1;font-size:13px;letter-spacing:1px;height:46px}
.btn2{height:46px;flex:1;border-radius:12px;border:1px solid var(--line-gold);
  background:var(--gold-wash);color:#8A6A3C;font-size:13px;display:grid;place-items:center;
  cursor:pointer;letter-spacing:1px}
.btn2:active{transform:translateY(1px)}
.gift{font-size:11.5px;color:var(--text-3);margin-top:14px;line-height:1.6}

/* ============ P4 弹窗 ============ */
.p4{background:rgba(11,54,55,.5);align-items:center;justify-content:center;padding:22px}
.mask{position:absolute;inset:0;background:rgba(11,54,55,.52);backdrop-filter:blur(2px);z-index:40}
.sheet{width:100%;background:var(--cream);border-radius:20px;overflow:hidden;position:relative;
  box-shadow:0 20px 50px rgba(0,0,0,.28);z-index:41}
.sheet-hd{padding:20px 22px 15px;background:var(--ink-grad);color:var(--cream);position:relative}
.sheet-hd .t{font-family:var(--serif);font-size:20px;letter-spacing:2px}
.sheet-hd .s{font-size:11.5px;color:rgba(246,241,230,.72);margin-top:5px}
.sheet-bd{padding:20px 22px}
.notice{font-size:12.5px;color:var(--text-2);line-height:1.85}
.notice li{margin-bottom:9px;list-style:none;padding-left:16px;position:relative}
.notice li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:5px;
  border-radius:50%;background:var(--gold)}
.notice b{color:var(--ink);font-weight:500}
.sheet-ft{padding:0 22px 20px}
.qrbox{width:150px;height:150px;margin:6px auto 14px;border-radius:12px;background:#fff;
  border:1px solid var(--line-gold);display:grid;place-items:center}
.qr{width:118px;height:118px;border-radius:6px;background:
  repeating-conic-gradient(#12494A 0 25%,#fff 0 50%) 0 0/14px 14px;position:relative}
.qr::after{content:"金蛭汇";position:absolute;inset:38px;background:var(--cream);
  border-radius:4px;display:grid;place-items:center;font-size:9px;color:var(--ink);
  font-family:var(--serif);letter-spacing:1px}
.wechat{text-align:center;font-size:13px;color:var(--ink);margin-bottom:5px}
.wsub{text-align:center;font-size:11px;color:var(--text-3)}

/* ---- 领礼须知：亮面象牙金礼遇卡（沿用 P3 身份卡同一套视觉语言） ---- */
.notice-sheet{
  border:1px solid rgba(160,120,55,.45);border-radius:22px;
  background-image:
    repeating-linear-gradient(45deg,rgba(160,120,55,.045) 0 1px,transparent 1px 9px),
    repeating-linear-gradient(-45deg,rgba(160,120,55,.045) 0 1px,transparent 1px 9px),
    linear-gradient(118deg,rgba(255,255,255,0) 28%,rgba(255,255,255,.62) 48%,rgba(255,255,255,0) 66%),
    radial-gradient(125% 90% at 50% 0%,#FFFDF7 0%,#F8F2E5 56%,#EFE4CE 100%);
  box-shadow:0 24px 60px rgba(9,42,43,.30),inset 0 2px 0 rgba(255,255,255,.9);
  animation:nkIn .42s cubic-bezier(.2,.8,.25,1) both;
}
@keyframes nkIn{from{opacity:0;transform:translateY(16px) scale(.97)}to{opacity:1;transform:none}}
.notice-sheet::before{content:"";position:absolute;top:0;left:0;right:0;height:4px;z-index:4;
  background:linear-gradient(90deg,#96702F,#E8C86A 45%,#B8893B 78%,#96702F)}
.notice-sheet::after{content:"";position:absolute;inset:8px;z-index:2;pointer-events:none;
  border:1px solid rgba(160,120,55,.26);border-radius:15px;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,.5)}
.notice-sheet .sheet-hd{position:relative;z-index:1;background:transparent;color:var(--ink);
  text-align:center;padding:18px 20px 4px}
.notice-sheet .sheet-hd::before{
  content:"";display:block;width:44px;height:44px;margin:0 auto 9px;border-radius:50%;
  border:1px solid rgba(160,120,55,.55);
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='%23A47B35' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 9.5h18V20H3z'/%3E%3Cpath d='M2.5 6.5h19v3h-19z'/%3E%3Cpath d='M12 6.5V20'/%3E%3Cpath d='M12 6.5C9.4 6.5 7.6 5.8 7.6 4.3c0-1.2 1-1.9 2-1.9 1.5 0 2.4 1.4 2.4 4.1z'/%3E%3Cpath d='M12 6.5c2.6 0 4.4-.7 4.4-2.2 0-1.2-1-1.9-2-1.9-1.5 0-2.4 1.4-2.4 4.1z'/%3E%3C/svg%3E") center/23px 23px no-repeat,
    radial-gradient(circle at 32% 26%,#FFFDF6,#F0E1C1);
  box-shadow:0 3px 10px rgba(150,110,45,.20),inset 0 0 0 3px rgba(255,255,255,.72)}
.notice-sheet .sheet-hd .t{font-family:var(--serif);font-size:21px;font-weight:600;
  letter-spacing:5px;text-indent:5px;color:#12494A}
.notice-sheet .sheet-hd .s{font-size:10.5px;letter-spacing:2.4px;color:#8A6527;margin-top:5px}
.notice-sheet .sheet-hd::after{content:"";display:block;height:1px;margin:13px auto 0;
  background:linear-gradient(90deg,transparent,rgba(150,110,45,.55),transparent)}

.notice-sheet .sheet-bd{padding:12px 20px 4px}
.nk-list{display:flex;flex-direction:column;gap:8px}
.nk-item{display:flex;align-items:center;gap:11px;padding:9px 11px;border-radius:12px;
  border:1px solid rgba(176,141,87,.30);
  background:linear-gradient(180deg,rgba(255,255,255,.95),rgba(255,251,242,.86));
  box-shadow:0 2px 8px rgba(120,92,42,.07),inset 0 1px 0 rgba(255,255,255,.92);
  animation:nkItem .4s ease-out both}
.nk-item:nth-child(1){animation-delay:.06s}
.nk-item:nth-child(2){animation-delay:.13s}
.nk-item:nth-child(3){animation-delay:.20s}
.nk-item:nth-child(4){animation-delay:.27s}
@keyframes nkItem{from{opacity:0;transform:translateY(9px)}to{opacity:1;transform:none}}
.nk-no{width:30px;height:30px;flex:none;border-radius:50%;display:grid;place-items:center;
  font-family:var(--mono);font-size:10.5px;font-weight:700;color:#8A6527;
  border:1px solid rgba(160,120,55,.50);
  background:radial-gradient(circle at 30% 24%,#FFFDF6,#EFE0BE);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95)}
.nk-tx{display:flex;flex-direction:column;min-width:0;line-height:1.45}
.nk-tx b{font-size:12.5px;font-weight:600;letter-spacing:1px;color:#12494A}
.nk-tx span{font-size:10.8px;color:rgba(51,51,51,.62);margin-top:2px}
.nk-tip{display:flex;align-items:flex-start;gap:8px;margin-top:11px;
  padding:9px 11px;border-radius:10px;border:1px solid rgba(176,141,87,.28);
  background:rgba(176,141,87,.10);font-size:10.5px;line-height:1.55;color:#7A5C2C}
.nk-tip i{font-style:normal;flex:none;font-size:12px;line-height:1.2;color:#A47B35}

.notice-sheet .sheet-ft{padding:12px 20px 20px}
.notice-sheet .nk-ok{width:100%;height:48px;border:0;border-radius:13px;cursor:pointer;
  font-size:13.5px;letter-spacing:3px;color:#FFF9EC;font-family:var(--sans);
  background:linear-gradient(135deg,#D9BA7C 0%,#B08D57 42%,#96702F 100%);
  box-shadow:0 6px 16px rgba(120,88,34,.26),inset 0 1px 0 rgba(255,255,255,.45);
  transition:transform .15s ease,box-shadow .15s ease}
.notice-sheet .nk-ok:active{transform:translateY(1px);box-shadow:0 3px 9px rgba(120,88,34,.24)}

/* ============ 分享图 ============ */
.share-wrap{background:var(--card);border:1px solid rgba(18,73,74,.13);border-radius:var(--r);
  padding:17px 18px}
.share-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:13px}
.share-head h3{font-size:14px;color:var(--ink)}
.share-head span{font-size:10.5px;color:var(--text-3);font-family:var(--mono)}
.share-stage{background:#E8E4DA;border-radius:10px;padding:16px;display:grid;place-items:center}
.sp{width:216px;height:288px;background:var(--cream);border-radius:9px;overflow:hidden;
  position:relative;display:flex;flex-direction:column;box-shadow:0 8px 22px rgba(0,0,0,.14);
  transform-origin:top center;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
/* 顶部绿底：标志在左 + 两行文字在右，组成一个整体水平居中；两行文字自身左右居中 */
.sp-top{height:64px;background:var(--ink-grad);color:var(--cream);padding:0 10px;flex:none;
  display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden}
.sp-top::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg,rgba(255,255,255,0) 34%,rgba(232,200,106,.10) 50%,rgba(255,255,255,0) 66%)}
.sp-brand{position:relative;z-index:1;display:flex;align-items:center;justify-content:center;gap:9px}
.sp-logo{width:39px;height:39px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:radial-gradient(120% 120% at 30% 20%,#FFF9EA 0%,#EFE2C4 62%,#DCC79B 100%);
  border:1px solid rgba(232,200,106,.85);
  box-shadow:0 2px 7px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.8)}
.sp-logo img{width:33px;height:33px;object-fit:contain;display:block}
.sp-txt{display:flex;flex-direction:column;align-items:center;text-align:center}
.sp-top .a{font-size:7.5px;letter-spacing:2px;color:var(--gold-2);text-align:center;line-height:1.3}
.sp-top .b{font-family:var(--serif);font-size:13.5px;letter-spacing:1.5px;margin-top:5px;
  text-align:center;line-height:1.25;color:var(--cream)}
.sp-bd{flex:1;padding:14px 15px;display:flex;flex-direction:column;align-items:center;
  justify-content:center;text-align:center}
.sp-tier{font-family:var(--serif);font-size:11px;letter-spacing:2.5px;color:#8A6A3C;
  border:1px solid var(--gold);border-radius:12px;padding:2px 11px;background:var(--gold-wash)}
.sp-code{font-family:var(--mono);font-size:16px;color:var(--ink);letter-spacing:1px;margin-top:11px;line-height:1.35}
.sp-code .sl{color:#9AA8A6}
.sp-code .lt{color:var(--gold)}
.sp-meta{font-size:8px;color:var(--text-3);margin-top:8px;letter-spacing:.3px}
.sp-rule{width:22px;height:1.5px;background:var(--gold);margin:11px 0}
.sp-fo{font-size:8px;color:var(--text-3);line-height:1.7}
.sp-ft{height:34px;background:#EFEAE0;display:flex;align-items:center;justify-content:space-between;
  padding:0 15px;font-size:8px;color:var(--text-3);flex:none}
.sp-ft b{color:var(--ink);font-weight:400;font-family:var(--serif);font-size:9.5px}
.sp-qr{width:20px;height:20px;border-radius:3px;background:
  repeating-conic-gradient(#12494A 0 25%,#fff 0 50%) 0 0/5px 5px;position:relative}
.sp-qr::after{content:"";position:absolute;inset:6px;background:#EFEAE0;border-radius:2px}

/* ============ 保存分享卡（长按 / 按钮） ============ */
.save-row{display:flex;align-items:center;gap:10px;margin-top:12px;flex-wrap:wrap}
.save-btn{flex:1;min-width:150px;height:38px;border-radius:9px;cursor:pointer;
  border:1px solid rgba(176,141,87,.65);font-family:var(--sans);font-size:12.5px;letter-spacing:1px;
  color:#F6F1E6;background:linear-gradient(160deg,#12494A,#0B3637);
  box-shadow:0 4px 12px rgba(11,54,55,.18),inset 0 1px 0 rgba(255,255,255,.13)}
.save-btn:hover{background:linear-gradient(160deg,#175758,#0B3637)}
.save-btn:active{transform:translateY(1px)}
.save-tip{font-size:10.5px;color:var(--text-3)}
.save-mask{position:fixed;inset:0;z-index:10000;display:none;align-items:center;justify-content:center;
  padding:20px;background:rgba(6,28,29,.72);backdrop-filter:blur(3px)}
.save-mask.on{display:flex}
.save-panel{width:min(92vw,340px);max-height:92vh;overflow:auto;text-align:center;
  background:var(--cream);border:1px solid rgba(212,185,130,.7);border-radius:16px;padding:16px;
  box-shadow:0 22px 60px rgba(0,0,0,.42)}
.save-title{font-family:var(--serif);font-size:15px;color:var(--ink);letter-spacing:1px}
.save-sub{font-size:11px;color:var(--text-2);margin:5px 0 12px}
.save-panel img{display:block;width:100%;max-width:270px;margin:0 auto;border-radius:9px;
  box-shadow:0 10px 26px rgba(0,0,0,.22)}
.save-acts{display:flex;gap:9px;margin-top:14px}
.save-acts>a,.save-acts>button{flex:1;height:36px;display:grid;place-items:center;border-radius:9px;
  font-size:12px;text-decoration:none;cursor:pointer;font-family:var(--sans)}
.save-dl{color:#F6F1E6;border:1px solid rgba(176,141,87,.6);
  background:linear-gradient(160deg,#12494A,#0B3637)}
.save-acts>button{color:var(--ink);border:1px solid var(--line-gold);background:transparent}

.note{font-size:11.5px;color:var(--text-2);line-height:1.7;margin-top:13px;
  padding:10px 12px;background:var(--gold-wash);border-left:2px solid var(--gold);border-radius:0 8px 8px 0}
.note b{color:#8A6A3C;font-weight:500}
.note.warn{background:rgba(180,85,60,.08);border-left-color:#B4553C}
.note.warn b{color:#9C4A34}

/* 底部说明 */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
@media(max-width:1380px){
  .cols{grid-template-columns:236px minmax(0,1fr)}
  .col-r{grid-column:1/-1;display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .col-r .panel{margin-top:0}
}

/* ============ 正式工程：真实输入控件 ============ */
/* .inp 保持容器外观，内部 input/select 无边框透明 */
.raw{flex:1;min-width:0;width:100%;border:0;outline:0;background:transparent;
  font-family:inherit;font-size:13.5px;color:var(--text);padding:0;
  appearance:none;-webkit-appearance:none}
.raw.ph::placeholder{color:var(--text-3)}
.raw.ph::-webkit-input-placeholder{color:var(--text-3)}
select.raw{cursor:pointer}
select.raw option{color:var(--text);background:#fff}
.inp:focus-within{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}

/* 弹窗内的输入 */
.sheet-bd .raw{height:38px;border:1px solid var(--line);border-radius:9px;
  padding:0 11px;background:#fff}
.sheet-bd .raw:focus{border-color:var(--gold);box-shadow:0 0 0 3px var(--gold-wash)}

/* ============ 正式工程：弹窗改为浮层（盖住当前页，而非替换页面） ============ */
.page.p4{position:absolute;inset:0;z-index:50;flex:none;display:none;
  flex-direction:column;justify-content:flex-end;overflow:hidden}
.page.p4.on{display:flex}