/* 品源商家端专属样式（2026-10-02）：首登引导层 + 身份卡/顶栏账号菜单
   ─────────────────────────────────────────────────────────────────────────
   为什么单独一个文件：整层内联进 merchant.html 会当场撞 preflight ⑦ 的
   「merchant.html 代码字节 < 110,000」门（实测内联后 122,403，超 12,403）——
   处置同 storeprofile.js：**一个功能一个文件**，别把入口文件喂胖。
   · 改了本文件要同步 bump merchant.html 里的 `?v=`（同 pinyuan.css 的规矩）。
   · 配色/时长全部走下面这组 `--ob*` token：换色只改这一处，页面里不写裸色值。
   · 只动 transform/opacity，不用 transition:all。 */
/* ══ 首登引导层（2026-10-02）· 整屏接管，只在**未登录**时出现 ══════════════════════
   1) 为什么内联在这一页而不是 pinyuan.css：那是 admin/merchant 共享的，
      改它要同步 bump 两处 `?v=`；而"登录前的引导"是商家端独有场景 —— 同上面 .py-beian 的处置。
   2) 配色全走本层自己的 token（`--ob*`）：规则同全局 —— 页面里不写裸色值，换色只改这一处。
   3) 时长也走 token（`--obt*`）：460ms 入场 / 320ms 离场不在 --dur-1..3 那三档里，
      但那三档是"控件级"的；整屏过场是另一档，所以另立 token 而不是写裸毫秒。
   4) 动效纪律同全局：只动 transform/opacity，不用 transition:all。 */
#ob{--ob1:#070A22;--ob2:#101743;--ob3:#251458;--obr1:#4F7BFF;--obr2:#7C5CFF;--obr3:#B45CFF;
  --obcy:#38E1FF;--obok:#3BE8B0;--obtx:#F3F6FF;--obtx2:#A7B0DA;--obtx3:#6F79A6;--obbad:#FF7089;
  --obln:rgba(255,255,255,.12);--obln2:rgba(255,255,255,.22);--obg1:rgba(255,255,255,.055);--obg2:rgba(255,255,255,.095);
  --obgd:linear-gradient(135deg,#4F7BFF,#7C5CFF 52%,#B45CFF);
  --obsh:0 24px 60px rgba(3,5,22,.55);--obglow:0 14px 40px rgba(96,92,255,.42);
  --obeo:cubic-bezier(.22,.9,.28,1);--obei:cubic-bezier(.5,0,.88,.42);--obsp:cubic-bezier(.18,1.04,.3,1);
  --obt0:25ms;--obt1:460ms;--obt2:320ms;--obt3:60ms;--obt4:460ms;--obt5:620ms;--obt6:170ms;
  --obd1:40ms;--obd2:110ms;--obd3:180ms;--obd4:250ms;
  /* ★ 2026-10-05 修（D11）：`overflow:hidden` 是**隐藏但可滚**的 ——
     而未激活的两屏各带 `translate3d(46px,0,0)`（见下面 .ob-scr），
     于是 #ob 的 scrollWidth=421 > clientWidth=375，成了一个"有 46px 可滚"的容器。
     只要有人 focus 到里面的输入框（`onboard.js` 的 toLogin() 就会），
     浏览器就把这个容器滚 11px 去"露出"输入框 —— 顶栏/背景/圆点/当前屏**一起左移且不回来**。
     `overflow:clip` **不产生滚动容器**，正是这里要的语义（裁掉，但永远不许滚）。
     两条声明是有意的：不支持 `clip` 的旧浏览器仍拿 `hidden` 兜底
     （另有 JS 侧一行兜底，见 onboard.js 的 toLogin）。 */
  position:fixed;inset:0;z-index:500;overflow:hidden;overflow:clip;color:var(--obtx);font-size:14px;line-height:1.6;
  background:linear-gradient(150deg,var(--ob1),var(--ob2) 52%,var(--ob3))}
#ob[hidden]{display:none!important}
#ob *{box-sizing:border-box}
/* ⚠️ 组件级重置必须用 `:where()` 压成**零特异性**（实拍踩过两次，写下来防复发）：
   写成 `#ob form{padding:0}`（特异性 1,0,1）会压过组件类 `.ob-card`（0,1,0）→
   登录卡内边距清零（标题贴边、底部文字压住按钮）；
   `#ob button{background:none}` 同理会抹掉 `.ob-pri` 的渐变（只剩 box-shadow 辉光，
   第一眼还像有底色）；`#ob p{margin:0}` 会清掉 .ob-lead / .ob-foot 的间距。
   零特异性之后顺序才是对的：作者重置 > 浏览器默认，组件类 > 重置。 */
:where(#ob) :where(h2,h3,p,ul,li,figure,form){margin:0;padding:0;font-weight:inherit;list-style:none}
:where(#ob) :where(button){font:inherit;cursor:pointer}
#ob a{color:var(--obr1);text-decoration:none;border-bottom:1px solid rgba(79,123,255,.4)}
#ob :focus-visible{outline:2px solid var(--obcy);outline-offset:2px;border-radius:6px}
/* —— 常驻背景：整段过场里它始终不透明（放在每一屏里会让转场中途"暗一下"）—— */
.ob-bg,.ob-grid,.ob-vig{position:absolute;inset:0;pointer-events:none}
.ob-bg{overflow:hidden}
.ob-grid{inset:-60px;opacity:.5;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 78%);mask-image:radial-gradient(70% 60% at 50% 40%,#000 20%,transparent 78%);animation:obgm 36s linear infinite}
.ob-vig{background:radial-gradient(120% 90% at 50% 40%,transparent 42%,rgba(2,3,14,.55))}
.ob-blob{position:absolute;border-radius:50%;mix-blend-mode:screen;will-change:transform}
.ob-b1{width:820px;height:820px;left:-190px;top:-260px;opacity:.55;background:radial-gradient(closest-side,rgba(79,123,255,.85),rgba(79,123,255,0) 72%);animation:obd1 34s ease-in-out infinite alternate}
.ob-b2{width:900px;height:900px;right:-260px;top:-180px;opacity:.5;background:radial-gradient(closest-side,rgba(180,92,255,.8),rgba(180,92,255,0) 72%);animation:obd2 42s ease-in-out infinite alternate}
.ob-b3{width:760px;height:760px;left:38%;bottom:-420px;opacity:.34;background:radial-gradient(closest-side,rgba(56,225,255,.75),rgba(56,225,255,0) 72%);animation:obd3 50s ease-in-out infinite alternate}
@keyframes obgm{from{transform:none}to{transform:translate3d(56px,56px,0)}}
@keyframes obd1{from{transform:none}to{transform:translate3d(90px,70px,0) scale(1.14)}}
@keyframes obd2{from{transform:none}to{transform:translate3d(-80px,90px,0) scale(1.06)}}
@keyframes obd3{from{transform:none}to{transform:translate3d(60px,-70px,0) scale(1.16)}}
/* —— 常驻顶栏与进度点：**不参与三屏滑动** ——
   跟着屏一起滑的话，任何一帧画面上都会出现两个"品源"（实拍抓到过）。 */
.ob-top{position:absolute;left:0;right:0;top:0;height:76px;display:flex;align-items:center;padding:0 56px;z-index:30}
.ob-mark{width:34px;height:34px;border-radius:11px;background:var(--obgd);display:grid;place-items:center;font-size:16px;font-weight:700;box-shadow:var(--obglow)}
.ob-name{font-size:16px;font-weight:650;margin-left:11px}
.ob-sub{font-size:11.5px;color:var(--obtx3);border-left:1px solid var(--obln2);padding-left:11px;margin-left:11px;letter-spacing:.04em}
.ob-pill{margin-left:auto;font-size:11.5px;color:var(--obtx2);background:var(--obg1);border:1px solid var(--obln);border-radius:999px;padding:4px 11px;transition:opacity var(--dur-2) linear}
.ob-dots{position:absolute;left:0;right:0;bottom:30px;display:flex;justify-content:center;z-index:30}
.ob-dots .ob-rail{display:flex;align-items:center;gap:9px;padding:8px 14px;border-radius:999px;background:rgba(10,12,34,.5);border:1px solid var(--obln);backdrop-filter:blur(10px)}
.ob-dots i{width:9px;height:9px;border-radius:50%;background:rgba(255,255,255,.26);transition:transform var(--dur-3) var(--obsp),background-color var(--dur-2)}
.ob-dots i.ob-on{width:26px;border-radius:99px;background:var(--obgd)}
.ob-dots span{margin-left:6px;font-size:11.5px;color:var(--obtx3);letter-spacing:.06em}
/* —— 三屏：同一页三个状态，只走 transform/visibility —— */
.ob-scr{position:absolute;inset:0;z-index:1;visibility:hidden;transform:translate3d(46px,0,0);transition:transform var(--obt1) var(--obeo),visibility 0s}
.ob-scr.ob-on{z-index:3;visibility:visible;transform:none}
.ob-scr.ob-leave{z-index:2;visibility:visible;transform:translate3d(-34px,0,0);transition:transform var(--obt2) var(--obei),visibility 0s}
/* ★ 防穿帮：旧屏内容 60ms 淡出；新屏第一块 65ms（=基准 25ms + 首块 40ms）起跑。
   两套内容不重叠 → 不会"旧屏标题和新屏标题同框"；只差 5ms → 中间也不空场。
   （两者都实拍抓到过：重叠会透出鬼影，间隔给大了会空 3 帧。） */
.ob-st{opacity:0;transform:translate3d(0,16px,0);transition:opacity var(--obt4) var(--obeo) var(--d,0ms),transform var(--obt5) var(--obsp) var(--d,0ms)}
.ob-scr.ob-on .ob-st{opacity:1;transform:none;transition-delay:calc(var(--obt0) + var(--d,0ms)),calc(var(--obt0) + var(--d,0ms))}
.ob-scr.ob-leave .ob-st{opacity:0;transform:translate3d(-16px,0,0);transition-duration:var(--obt3),calc(var(--obt3) * 2.8);transition-delay:0s,0s}
.ob-scr:not(.ob-on) .ob-st{transition-duration:var(--obt6);transition-delay:0s}
/* —— 版式 —— */
.ob-body{position:absolute;inset:76px 0 0;display:flex;align-items:center;padding:0 86px 30px;gap:56px}
.ob-copy{width:600px;flex:0 0 auto}
.ob-mid{width:456px}
.ob-welwrap{flex:1 1 auto;display:flex;justify-content:center}
.ob-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:12px;color:#C9D3FF;background:rgba(120,140,255,.14);border:1px solid rgba(140,160,255,.3);border-radius:999px;padding:6px 14px 6px 10px;letter-spacing:.03em}
.ob-eyebrow::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--obcy);box-shadow:0 0 0 4px rgba(56,225,255,.16);animation:obbeat 2.4s ease-in-out infinite}
@keyframes obbeat{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.45;transform:scale(.7)}}
#ob h2{margin-top:22px;font-size:44px;line-height:1.2;font-weight:700;letter-spacing:-.02em}
#ob h2 em{font-style:normal;background:linear-gradient(100deg,#7FD2FF,#9E8CFF 46%,#E0A3FF);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}
.ob-lead{margin-top:18px;font-size:15px;color:var(--obtx2);line-height:1.95;max-width:520px}
.ob-chips{display:flex;gap:9px;flex-wrap:wrap;margin-top:24px}
.ob-chip{font-size:12.5px;color:#CFD7FF;background:var(--obg1);border:1px solid var(--obln);border-radius:999px;padding:7px 14px}
.ob-cta{display:flex;align-items:center;gap:14px;margin-top:34px}
.ob-list{margin-top:24px;display:flex;flex-direction:column;gap:13px}
.ob-list li{display:flex;gap:11px;align-items:flex-start;font-size:13.5px;color:#C6CEEE}
.ob-list li::before{content:"✓";flex:0 0 auto;width:20px;height:20px;border-radius:50%;background:rgba(59,232,176,.14);border:1px solid rgba(59,232,176,.36);color:var(--obok);font-size:11px;display:grid;place-items:center;margin-top:1px}
/* —— 按钮 —— */
.ob-btn{position:relative;height:46px;padding:0 26px;border-radius:var(--r-md);font-size:14.5px;font-weight:600;display:inline-flex;align-items:center;justify-content:center;gap:9px;overflow:hidden;background:none;border:0;color:inherit;transition:transform var(--dur-2) var(--obeo),background-color var(--dur-2),border-color var(--dur-2),box-shadow var(--dur-3)}
.ob-pri{background:var(--obgd);color:#fff;box-shadow:var(--obglow)}
.ob-pri::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.42),transparent);transform:translate3d(-120%,0,0) skewX(-18deg)}
.ob-pri:hover{transform:translateY(-2px);box-shadow:0 20px 46px rgba(96,92,255,.52)}
.ob-pri:hover::after{transform:translate3d(420%,0,0) skewX(-18deg);transition:transform 900ms var(--obeo)}
.ob-pri:active{transform:translateY(0) scale(.985)}
.ob-ghost{background:var(--obg1);border:1px solid var(--obln);color:var(--obtx2)}
.ob-ghost:hover{color:#fff;border-color:var(--obln2);background:var(--obg2)}
.ob-btn:disabled{opacity:.62;cursor:default;transform:none;box-shadow:none}
.ob-btn svg{transition:transform var(--dur-3) var(--obeo)}
.ob-btn:hover svg{transform:translate3d(4px,0,0)}
/* —— 屏 1 右侧：AI 回答示意 —— */
.ob-vis{flex:1 1 auto;display:flex;align-items:center;justify-content:center}
.ob-rig{position:relative;width:452px}
.ob-ai{border-radius:var(--r-md);padding:20px;background:linear-gradient(180deg,rgba(255,255,255,.1),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.16);box-shadow:var(--obsh);backdrop-filter:blur(18px)}
.ob-aih{display:flex;align-items:center;gap:8px;margin-bottom:16px}
.ob-tab{font-size:12px;color:var(--obtx2);border:1px solid var(--obln);border-radius:8px;padding:4px 10px;background:rgba(255,255,255,.04)}
.ob-tab.ob-on{color:#fff;background:var(--obgd);border-color:transparent;font-weight:600}
.ob-live{margin-left:auto;font-size:11.5px;color:var(--obok)}
.ob-bu{font-size:13.5px;line-height:1.75;border-radius:12px;padding:11px 14px;max-width:88%}
.ob-user{margin-left:auto;background:rgba(120,140,255,.2);border:1px solid rgba(140,160,255,.28);color:#E7ECFF;border-bottom-right-radius:4px}
.ob-ai2{margin-top:12px;background:var(--obg1);border:1px solid var(--obln);color:#DDE3FB;border-bottom-left-radius:4px}
.ob-ai2 b{color:#fff}
.ob-src{display:flex;align-items:center;gap:8px;margin-top:10px;padding-top:10px;border-top:1px dashed rgba(255,255,255,.16);font-size:11.5px;color:var(--obtx3)}
.ob-src span{font-size:11px;color:#BBD0FF;background:rgba(79,123,255,.18);border:1px solid rgba(79,123,255,.34);border-radius:6px;padding:2px 8px}
.ob-fb{position:absolute;font-size:12px;color:#E8ECFF;background:rgba(16,18,48,.7);border:1px solid var(--obln2);border-radius:999px;padding:7px 14px;backdrop-filter:blur(10px);box-shadow:0 2px 10px rgba(3,5,22,.4);white-space:nowrap}
.ob-fb1{top:-44px;left:10px;animation:obf1 7s ease-in-out infinite alternate}
.ob-fb2{top:-44px;right:10px;animation:obf2 8.5s ease-in-out infinite alternate}
.ob-fb3{bottom:-46px;left:10px;animation:obf3 9.5s ease-in-out infinite alternate}
@keyframes obf1{from{transform:translate3d(0,0,0) rotate(-3deg)}to{transform:translate3d(6px,-14px,0) rotate(1deg)}}
@keyframes obf2{from{transform:translate3d(0,0,0) rotate(2deg)}to{transform:translate3d(-10px,12px,0) rotate(-2deg)}}
@keyframes obf3{from{transform:translate3d(0,0,0) rotate(1deg)}to{transform:translate3d(8px,-10px,0) rotate(-2deg)}}
/* —— 屏 2：登录卡 —— */
.ob-card{width:428px;border-radius:20px;padding:32px 34px 28px;background:linear-gradient(180deg,rgba(255,255,255,.105),rgba(255,255,255,.045));border:1px solid rgba(255,255,255,.16);box-shadow:var(--obsh);backdrop-filter:blur(22px)}
#ob h3{font-size:22px;font-weight:700}
.ob-sub2{margin-top:7px;font-size:12.5px;color:var(--obtx3)}
.ob-lab{display:block;font-size:12.5px;color:var(--obtx2);margin:18px 0 8px}
.ob-inp{width:100%;height:46px;border-radius:var(--r-md);padding:0 15px;background:var(--obg1);border:1px solid var(--obln);color:var(--obtx);font-size:14.5px;transition:border-color var(--dur-2),background-color var(--dur-2),box-shadow var(--dur-3)}
.ob-inp::placeholder{color:var(--obtx3)}
.ob-inp:focus{outline:none;border-color:transparent;background:var(--obg2);box-shadow:0 0 0 2px rgba(124,92,255,.75),0 0 0 6px rgba(124,92,255,.16)}
.ob-pw{position:relative;display:flex;align-items:center}
.ob-pw .ob-inp{padding-right:50px}
.ob-eye{position:absolute;right:8px;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:none;border:0;color:var(--obtx3);transition:color var(--dur-2),background-color var(--dur-2)}
.ob-eye.ob-on{color:#fff;background:rgba(255,255,255,.08)}
.ob-eye:hover{color:#fff;background:rgba(255,255,255,.08)}
.ob-agree{display:flex;align-items:flex-start;gap:10px;margin-top:18px;font-size:12.5px;color:var(--obtx2);line-height:1.7;cursor:pointer;user-select:none}
.ob-agree input{position:absolute;opacity:0;width:0;height:0}
.ob-box{flex:0 0 auto;width:18px;height:18px;border-radius:6px;margin-top:2px;border:1.5px solid var(--obln2);background:var(--obg1);display:grid;place-items:center;transition:background-color var(--dur-2),border-color var(--dur-2),transform var(--dur-3) var(--obsp)}
.ob-agree:hover .ob-box{border-color:#8FA0E8}
.ob-box svg{opacity:0;transform:scale(.5);transition:opacity .16s,transform var(--dur-3) var(--obsp)}
.ob-agree input:checked+.ob-box{background:var(--obgd);border-color:transparent;box-shadow:0 6px 16px rgba(96,92,255,.42)}
.ob-agree input:checked+.ob-box svg{opacity:1;transform:scale(1)}
.ob-agree input:focus-visible+.ob-box{outline:2px solid var(--obcy);outline-offset:2px}
.ob-agree.ob-unmet .ob-box{border-color:var(--obbad);box-shadow:0 0 0 4px rgba(255,112,137,.14)}
.ob-err{margin-top:16px;font-size:12.5px;color:var(--obbad);background:rgba(255,112,137,.1);border:1px solid rgba(255,112,137,.3);border-radius:var(--r-sm);padding:9px 12px;line-height:1.6}
.ob-card.ob-shake{animation:obshake .42s var(--obeo)}
@keyframes obshake{0%,100%{transform:none}18%{transform:translate3d(-7px,0,0)}38%{transform:translate3d(6px,0,0)}58%{transform:translate3d(-4px,0,0)}78%{transform:translate3d(2px,0,0)}}
.ob-foot{margin-top:20px;padding-top:18px;border-top:1px solid var(--obln);font-size:12px;color:var(--obtx3);line-height:1.75}
/* —— 屏 3：欢迎 —— */
.ob-wel{width:640px;text-align:center;position:relative}
.ob-ring{width:88px;height:88px;margin:0 auto;border-radius:50%;display:grid;place-items:center;background:linear-gradient(150deg,rgba(59,232,176,.22),rgba(79,123,255,.2));border:1px solid rgba(120,220,200,.42);box-shadow:0 18px 50px rgba(30,180,160,.24)}
.ob-ring path{stroke-dasharray:36;stroke-dashoffset:36;transition:stroke-dashoffset 560ms var(--obeo) 260ms}
.ob-scr.ob-on .ob-ring path{stroke-dashoffset:0}
.ob-panel{margin-top:32px;border-radius:var(--r-md);padding:22px 24px;background:linear-gradient(180deg,rgba(255,255,255,.09),rgba(255,255,255,.04));border:1px solid rgba(255,255,255,.15);box-shadow:var(--obsh);display:flex;align-items:center;gap:18px;text-align:left}
.ob-panel div{flex:1 1 auto}
.ob-panel b{display:block;font-size:15.5px;font-weight:650}
.ob-panel span{display:block;margin-top:6px;font-size:12.5px;color:var(--obtx3);line-height:1.7}
.ob-after{margin-top:18px;font-size:12.5px;color:var(--obtx3)}
.ob-after button{background:none;border:0;padding:0;color:var(--obtx3);border-bottom:1px solid transparent;transition:color var(--dur-2),border-color var(--dur-2)}
.ob-after button:hover{color:var(--obtx2);border-bottom-color:var(--obln2)}
/* —— 屏 3 成功礼花：26 粒，只动 transform/opacity（容器挂在 .ob-wel 上，对着打勾环炸开）—— */
.ob-burst{position:absolute;left:50%;top:44px;width:0;height:0;z-index:5;pointer-events:none}
.ob-burst i{position:absolute;width:8px;height:8px;border-radius:2px;opacity:0;background:var(--obc,#9E8CFF);box-shadow:0 0 9px var(--obc,#9E8CFF)}
.ob-burst.ob-go i{animation:obfly 1100ms var(--obeo) forwards;animation-delay:calc(var(--i) * 26ms)}
@keyframes obfly{
  0%{opacity:0;transform:translate3d(0,0,0) scale(.4) rotate(0)}
  12%{opacity:1}
  100%{opacity:0;transform:translate3d(var(--obx),var(--oby),0) scale(1) rotate(var(--obr))}}
/* —— 减少动效：直接切换、不做动画（功能不减）—— */

/* ═══════════════════════════════════════════════════════════════════════════
   手机窄屏（≤640px）· 2026-10-05
   ───────────────────────────────────────────────────────────────────────────
   首登三屏是**未登录商家的第一屏**，而它此前是按**电脑端**设计的（本文件所有宽度
   都是固定 px：`.ob-copy` 600 / `.ob-rig` 452 / `.ob-card` 428 / `.ob-wel` 640，
   `.ob-body` 还是横向两栏 + `padding:0 86px`），且 `startOnboard()` **没有任何设备
   判断** —— 手机上照样弹。实跑量到的后果（375×760）：

     `.ob-copy` 600px → right=686（右侧溢出 311px）
     `.ob-rig`  452px → left=742（整块在屏外）
     `.ob-card` 428px → left=-73（**左侧被裁 73px，滚不回来**）
     `.ob-mid`  456px → left=-585（整块在屏外）

   ⚠️ 注意 `documentElement.scrollWidth` 量出来是 **375**（不横滑）—— 因为 `#ob` 是
   `overflow:hidden` 的全屏层。**"没横滑"不等于"没被裁"**：left=-73 就是被裁掉
   且够不着的活标本。所以这一块的判据不能只看 scrollWidth（见 cdp-verify-mobile.py 的 M7）。

   本块只做两件事：**改成纵向 + 让内容够得着**。宽屏口径一个字不动。
   ═══════════════════════════════════════════════════════════════════════════ */
@media (max-width:640px){

  /* ① 顶栏：76px 高、左右各 56px 内边距（375px 上吃掉 112px）→ 收紧 */
  .ob-top{height:56px;padding:0 14px;gap:8px}
  #ob .ob-sub{display:none}                 /* "商家端"三个字在窄屏是奢侈 */
  .ob-pill{margin-left:auto;font-size:10.5px;padding:3px 9px}

  /* ② ★ 主体：横向两栏 → 纵向，并且**可纵向滚动**。
     不改 `overflow-y` 的话，屏1/屏2 的内容比视口高，下半截（含按钮）**够不着** ——
     这与"横向溢出够不着"是同一个毛病，只是方向不同。
     `padding-bottom` 只是呼吸位（下面那条 `.ob-dots{display:none}` 之后不需要再给圆点留位）。 */
  .ob-body{inset:56px 0 0;flex-direction:column;align-items:stretch;
    justify-content:flex-start;gap:16px;padding:10px 16px 28px;
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain}

  /* ★ 窄屏**隐藏底部圆点**（2026-10-05 实拍发现）：` .ob-dots` 是 `position:absolute;
     bottom:30px` 的**浮动**层，而 `.ob-body` 现在会纵向滚动 —— 于是首屏不动时
     它正好压在「登录」按钮上（实拍：按钮像被切了一截）。
     步骤提示并没有丢：顶栏那个 pill 一直写着「首次使用引导 · 第 N 步」。
     去掉它同时把内容区还给了正文（手机上一屏很贵）。 */
  .ob-dots{display:none}

  /* ③ 四个固定宽 → 自适应（这是"被裁"的根，必须一起清） */
  .ob-copy,.ob-mid,.ob-wel{width:100%;max-width:none;flex:0 0 auto}
  .ob-card{width:100%;max-width:428px;margin:0 auto;padding:20px 18px 18px;border-radius:16px}

  /* ④ 字号：44px 的标题在 375px 上会折成四五行、把 CTA 顶到屏幕外 */
  #ob h2{font-size:26px;margin-top:14px}
  .ob-lead{margin-top:12px;font-size:14px;line-height:1.75;max-width:none}
  .ob-chips{margin-top:16px}
  .ob-list{margin-top:16px;gap:10px}

  /* ⑤ 按钮：竖排满宽，落在拇指区 */
  .ob-cta{flex-direction:column;align-items:stretch;gap:10px;margin-top:20px}
  .ob-cta .ob-btn{width:100%;justify-content:center}

  /* ⑥ 屏1 右侧那块 452px 的 AI 演示卡：窄屏**隐藏**。
     它不是装饰 —— 它是"AI 会念到你的店"的证据；但 452px 的固定版式在 375px 上
     既放不下也没法读（内部还有绝对定位的"已收录"浮标）。硬缩会把浮标叠到卡片上。
     所以选择"先隐藏、文字承担信息"，**手机版专用插图记为挂账**（见施工脚本末尾）。 */
  .ob-vis{display:none}
}

@media (prefers-reduced-motion:reduce){
  #ob *{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0ms!important}
  .ob-blob,.ob-grid{animation:none!important}
}
/* ══ 商家端外壳微调（2026-10-02）· 身份卡 + 账号「设置」面板 ═══════════════════
   为什么写在这个文件里：`pinyuan.css` 是 admin/merchant **共享**的，改它要同步 bump
   两处 `?v=`；而下面这些只针对商家端（超管端不引本文件）。
   什么时候该搬走：超管端也要这套东西时，把本段整体搬进 `pinyuan.css` 并 bump `?v=`。
   ⚠️ 特异性：`.idcard-m`（0,1,0）与 pinyuan 的 `.idcard`（0,1,0）**同分**，
   靠的是本文件在 pinyuan.css **之后**加载才赢 —— 别把这两段的顺序调换。 */
/* ① 身份卡：114px 大色块 → 80px 一行式，**左 logo / 右店名**两分。
   几何（用户 2026-10-02 定，侧栏内容宽 228）：
     卡片 228×80 · 左侧 80×80 正方形放 logo（顶格，占满左边缘）·
     右侧 228−80=148 放店名与到期状态，店名再让 12px 做与 logo 的间隙。
   ⚠️ 卡片外层 padding 必须是 0：logo 要顶到卡片左边缘；右侧的间隙由 `.si` 的
   padding-left 给，不要用卡片 padding（那样 logo 就不是 80 宽了）。 */
.idcard-m{height:80px;padding:0;gap:0;margin:0 0 10px;overflow:hidden}
/* 没 logo 时左上那格的颜色收成一个**局部 token**（换色只改这一处，别写裸色值）。
   用户口径：原来 `--brand` 实底**太重**，左右两边不像一个整体；
   现在用品牌色 12% 的浅底 + 品牌色字 —— 与右边卡片同色系、只差一档深浅，
   同时保住左侧那 80px 区域（有 logo 时那里是满格图片，两态要占同一块地方）。 */
/* 左块（用户 2026-10-02 定）：**内缩 64×64 · 四周 8px · 圆角 10px**，
   里面**永远是一张图** —— 有 logo 用商家的图，没有就用内置默认图（`PY_DEFAULT_LOGO`）。
   所以这里没有「字号 / 字色 / 底色」那一套：一套样式，不存在两套观感对不上的问题。 */
.idcard-m .slogo{width:64px;height:64px;flex:none;margin:8px;border-radius:10px;
  overflow:hidden;background:var(--brand-soft)}
.idcard-m .slogo img{width:100%;height:100%;object-fit:cover;display:block}
.idcard-m .si{flex:1 1 auto;min-width:0;align-self:stretch;
  justify-content:space-between;padding:10px 10px 10px 12px;gap:0}
.idcard-m .si b{font-size:19px;line-height:1.2;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.idcard-m .si small{font-size:12px;line-height:1.25;display:block;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* 到期是这个产品**最关键的救命令**（到期直接登不进来），原来是最浅的 11px 灰字。
   现在按 days_to_expiry 说状态：>7 天中性、≤7 天黄、到期红；只有后两种可点。 */
.idcard-m.exp-warn{background:var(--warn-soft)}
.idcard-m.exp-warn .si small{color:var(--warn);font-weight:600}
.idcard-m.exp-bad{background:var(--danger-soft)}
.idcard-m.exp-bad .si small{color:var(--danger);font-weight:600}
.idcard-m[role="button"]{cursor:pointer}
.idcard-m[role="button"]:hover{box-shadow:var(--sh2)}
.idcard-m[role="button"]:focus-visible{outline:2px solid var(--brand);outline-offset:2px}