/* ===== 原生 APP 在线体验版骨架：舞台 / 手机框 / iOS 导航 / Tab / 浮层 ===== */
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Text","PingFang SC","Hiragino Sans GB","Microsoft YaHei","Noto Sans CJK SC","Source Han Sans SC",sans-serif;
  color:var(--ink);background:var(--stage);-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent;overflow:hidden}
button{font:inherit;color:inherit;border:0;background:none;padding:0;cursor:pointer}
input,textarea,select{font:inherit;color:inherit}
a{color:inherit}
.num{font-family:"SF Pro Display","DIN Alternate","Helvetica Neue",Arial,sans-serif;font-variant-numeric:tabular-nums}
.ic{display:inline-block;vertical-align:middle;flex:none;stroke-width:1.8}

/* ---------- 桌面舞台 ---------- */
.stage{position:relative;height:100vh;display:flex;align-items:center;justify-content:center;gap:88px;padding:24px;overflow:hidden}
.stage-art{position:absolute;inset:0;pointer-events:none;overflow:hidden}
.stage-art svg{position:absolute;width:100%;height:100%;left:0;top:0}
.intro{position:relative;z-index:1;width:372px;flex:none;color:var(--stage-ink,var(--ink))}
.intro .brand{display:flex;align-items:center;gap:12px;margin-bottom:30px}
.intro .brand .logo{width:46px;height:46px;border-radius:13px;display:grid;place-items:center;flex:none}
.intro .brand b{font-size:17px;letter-spacing:.4px;display:block}
.intro .brand small{display:block;font-size:12px;opacity:.62;margin-top:3px;font-weight:400}
.intro .tag{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;letter-spacing:.6px;padding:5px 11px;border-radius:99px;margin-bottom:14px;background:var(--tag-bg);color:var(--tag-ink)}
.intro h1{font-size:31px;line-height:1.28;margin:0 0 14px;letter-spacing:.3px}
.intro p{font-size:14px;line-height:1.8;opacity:.72;margin:0 0 22px}
.intro p{text-wrap:pretty}.intro h1,.intro li{text-wrap:balance}/* 避免末行孤字 */
.intro ul{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:11px}
.intro li{display:flex;gap:10px;font-size:13.5px;line-height:1.6;opacity:.88}
.intro li .ic{color:var(--tag-ink);margin-top:2px}
.intro .jt{font-size:12px;opacity:.55;margin-bottom:10px;letter-spacing:1px}
.intro .jumps{display:flex;flex-wrap:wrap;gap:8px}
.intro .jumps a{font-size:13px;text-decoration:none;padding:6px 12px;border-radius:99px;transition:.2s;background:var(--jump-bg);border:1px solid var(--jump-line);color:inherit}
.intro .jumps a:hover,.intro .jumps a.on{color:#fff;background:var(--brand);border-color:var(--brand)}
.intro .tools{margin-top:24px;display:flex;gap:10px;align-items:center;font-size:12px;opacity:.8}
.intro .tools button{display:inline-flex;align-items:center;gap:6px;font-size:12.5px;padding:7px 12px;border-radius:10px;background:var(--jump-bg);border:1px solid var(--jump-line)}

.device{position:relative;z-index:1;flex:none;width:calc(414px * var(--s,1));height:calc(868px * var(--s,1))}
.device-inner{position:absolute;left:0;top:0;width:414px;height:868px;transform:scale(var(--s,1));transform-origin:0 0;border-radius:66px;background:var(--bezel,#1b1c20);padding:12px;
  box-shadow:0 0 0 2px var(--bezel2,#34363c) inset,0 0 0 1px #000,0 50px 90px -24px rgba(10,14,30,.5),0 14px 34px -14px rgba(10,14,30,.4)}
.device-inner::before{content:"";position:absolute;right:-3px;top:196px;width:3px;height:92px;border-radius:0 3px 3px 0;background:var(--bezel2,#34363c)}
.device-inner::after{content:"";position:absolute;left:-3px;top:164px;width:3px;height:58px;border-radius:3px 0 0 3px;background:var(--bezel2,#34363c);box-shadow:0 82px 0 var(--bezel2,#34363c)}
.screen{--sb:50px;--safe-b:24px;position:relative;width:390px;height:844px;border-radius:54px;overflow:hidden;background:var(--bg);isolation:isolate;display:flex;flex-direction:column}
.island{position:absolute;top:11px;left:50%;transform:translateX(-50%);width:124px;height:36px;border-radius:20px;background:#000;z-index:500;pointer-events:none}
.homebar{position:absolute;bottom:8px;left:50%;transform:translateX(-50%);width:138px;height:5px;border-radius:3px;background:#0b0b0c;z-index:500;pointer-events:none;transition:background .25s}
.screen.sb-light .homebar{background:#f2f2f2}
.statusbar{position:absolute;top:0;left:0;right:0;height:50px;display:flex;align-items:center;justify-content:space-between;padding:6px 32px 0 48px;z-index:450;font-size:16.5px;font-weight:600;pointer-events:none;color:#0b0b0c;transition:color .25s;letter-spacing:-.2px}
.screen.sb-light .statusbar{color:#fff}
.statusbar .r{display:flex;gap:6px;align-items:center}
.statusbar svg{display:block}

/* ---------- 页面与转场 ---------- */
.area{position:relative;flex:1;min-height:0;overflow:hidden;touch-action:pan-y}
.page{position:absolute;inset:0;background:var(--bg);will-change:transform}
.page.dragging{box-shadow:-12px 0 32px rgba(0,0,0,.14);z-index:3}
.page.under{z-index:1}
.page.in-r{animation:inR .38s cubic-bezier(.2,.85,.25,1) both;z-index:3;box-shadow:-12px 0 32px rgba(0,0,0,.1)}
.page.out-l{animation:outL .38s cubic-bezier(.2,.85,.25,1) both;z-index:1}
.page.in-l{animation:inL .38s cubic-bezier(.2,.85,.25,1) both;z-index:1}
.page.out-r{animation:outR .38s cubic-bezier(.2,.85,.25,1) both;z-index:3;box-shadow:-12px 0 32px rgba(0,0,0,.1)}
.page.in-f{animation:inF .2s ease both;z-index:3}
.page.out-f{animation:outF .2s ease both;z-index:1}
@keyframes inR{from{transform:translateX(100%)}to{transform:none}}
@keyframes outL{from{transform:none}to{transform:translateX(-28%);filter:brightness(.93)}}
@keyframes inL{from{transform:translateX(-28%);filter:brightness(.93)}to{transform:none}}
@keyframes outR{from{transform:none}to{transform:translateX(100%)}}
@keyframes inF{from{opacity:0}to{opacity:1}}
@keyframes outF{from{opacity:1}to{opacity:0}}

.pg{position:absolute;inset:0;display:flex;flex-direction:column}
.pg-body{flex:1;min-height:0;overflow-y:auto;overflow-x:hidden;scrollbar-width:none;overscroll-behavior:contain;padding-bottom:28px}
.pg-body::-webkit-scrollbar{display:none}
.pg-foot{flex:none;padding:10px 16px calc(var(--safe-b) + 8px);background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line)}

/* iOS 导航栏：大标题折叠 */
.nv{flex:none;position:relative;z-index:20;padding-top:var(--sb);background:transparent;transition:background .2s,box-shadow .2s}
.nv-row{height:44px;display:flex;align-items:center;justify-content:space-between;padding:0 8px;position:relative}
.nv-l,.nv-r{display:flex;align-items:center;gap:2px;min-width:44px;z-index:2}
.nv-r{justify-content:flex-end;padding-right:4px}
.nv-t{position:absolute;left:70px;right:70px;text-align:center;font-size:17px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .2s}
.has-lg .nv-t{opacity:0}
.has-lg.scrolled .nv-t{opacity:1}
.pg.scrolled .nv,.pg.solid .nv{background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);box-shadow:0 .5px 0 var(--line)}
.nv-back{display:flex;align-items:center;height:44px;color:var(--brand-t,var(--brand));font-size:17px;margin-left:-4px}
.nv-back span:empty{display:none}
.nv-btn{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;color:var(--brand-t,var(--brand));position:relative}
.nv-btn:active{opacity:.5}
.nv-btn .dot{position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--red,#ff3b30);border:1.5px solid var(--bg)}
.lg{padding:2px 20px 10px;display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:4px 10px}
.lg h1{margin:0;font-size:33px;line-height:1.2;font-weight:800;letter-spacing:.2px}
.lg-r{display:flex;align-items:center;gap:8px;padding-bottom:4px}
.lg-sub{width:100%;margin:2px 0 0;font-size:13.5px;color:var(--muted)}

/* ---------- Tab 栏 ---------- */
.tabbar{flex:none;position:relative;z-index:30;display:flex;background:var(--nav-bg);backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px);border-top:.5px solid var(--line);padding-bottom:var(--safe-b)}
.tabbar.hide{display:none}
.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:54px;font-size:10.5px;font-weight:500;color:var(--tab-off,#999);text-decoration:none;position:relative}
.tabbar a.on{color:var(--brand-t,var(--brand))}
.tabbar .badge{position:absolute;top:4px;left:calc(50% + 7px);min-width:18px;height:18px;border-radius:9px;padding:0 5px;font-size:11px;line-height:18px;text-align:center;color:#fff;background:var(--red,#ff3b30);font-weight:600}
.tabbar .tb-c{color:var(--ink2)}
.tabbar .tb-c i{width:48px;height:48px;margin-top:-22px;border-radius:50%;display:grid;place-items:center;background:var(--brand);color:var(--on-brand,#fff);box-shadow:0 8px 18px -6px var(--brand),0 0 0 4px var(--bg)}

/* ---------- 浮层 ---------- */
.mask{position:absolute;inset:0;background:rgba(0,0,0,.4);z-index:300;opacity:0;transition:opacity .28s}
.mask.show{opacity:1}
.sheet{position:absolute;left:0;right:0;bottom:0;z-index:301;background:var(--sheet,var(--card));border-radius:14px 14px 0 0;transform:translateY(105%);transition:transform .34s cubic-bezier(.2,.85,.25,1);max-height:88%;display:flex;flex-direction:column;padding-bottom:var(--safe-b)}
.sheet.show{transform:none}
.sh-grab{height:22px;display:grid;place-items:center;cursor:grab;flex:none;touch-action:none}
.sh-grab i{width:38px;height:5px;border-radius:3px;background:var(--line2,rgba(120,120,128,.3))}
.sh-hd{display:flex;align-items:center;justify-content:center;position:relative;padding:0 50px 12px;flex:none}
.sh-hd b{font-size:17px}
.sh-x{position:absolute;right:14px;top:-4px;width:30px;height:30px;border-radius:50%;display:grid;place-items:center;background:var(--fill);color:var(--muted)}
.sh-bd{overflow-y:auto;min-height:0;scrollbar-width:none}
.alert{position:absolute;left:50%;top:50%;width:274px;z-index:301;background:var(--alert,rgba(242,242,242,.96));backdrop-filter:blur(30px);border-radius:14px;transform:translate(-50%,-50%) scale(1.1);opacity:0;transition:.22s;overflow:hidden;text-align:center}
.alert.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.al-bd{padding:20px 18px 18px}
.alert h4{margin:0 0 4px;font-size:17px;font-weight:600}
.alert p{margin:0;font-size:13.5px;line-height:1.5;color:var(--ink2)}
.al-btns{display:flex;border-top:.5px solid var(--line2,rgba(60,60,67,.29))}
.al-btns button{flex:1;height:45px;font-size:17px;color:var(--brand-t,var(--brand))}
.al-btns button+button{border-left:.5px solid var(--line2,rgba(60,60,67,.29))}
.al-btns.col{flex-direction:column}.al-btns.col button+button{border-left:0;border-top:.5px solid var(--line2,rgba(60,60,67,.29))}
.al-btns .strong{font-weight:600}.al-btns .danger{color:#ff3b30}
.asheet{position:absolute;left:8px;right:8px;bottom:calc(var(--safe-b) + 6px);z-index:301;transform:translateY(120%);transition:transform .32s cubic-bezier(.2,.85,.25,1)}
.asheet.show{transform:none}
.as-g{background:var(--alert,rgba(242,242,242,.96));backdrop-filter:blur(30px);border-radius:14px;overflow:hidden;margin-top:8px}
.as-t{padding:14px;font-size:13px;color:var(--muted);text-align:center;border-bottom:.5px solid var(--line2,rgba(60,60,67,.29))}
.as-g button{display:block;width:100%;height:56px;font-size:19px;color:var(--brand-t,var(--brand))}
.as-g button+button{border-top:.5px solid var(--line2,rgba(60,60,67,.29))}
.as-g .strong{font-weight:600}.as-g .danger{color:#ff3b30}
.hud{position:absolute;left:50%;top:47%;transform:translate(-50%,-50%) scale(.92);z-index:400;background:rgba(28,28,30,.86);backdrop-filter:blur(10px);color:#fff;border-radius:14px;padding:12px 18px;font-size:14px;opacity:0;transition:.2s;pointer-events:none;display:flex;flex-direction:column;align-items:center;gap:9px;max-width:250px;text-align:center;line-height:1.5}
.hud.icon{min-width:128px;padding:20px 18px 15px}
.hud.show{opacity:1;transform:translate(-50%,-50%) scale(1)}
.ibanner{position:absolute;left:10px;right:10px;top:54px;z-index:420;display:flex;gap:10px;align-items:flex-start;padding:11px 13px;border-radius:20px;background:var(--alert,rgba(245,245,245,.92));backdrop-filter:blur(30px);box-shadow:0 10px 30px -10px rgba(0,0,0,.3);transform:translateY(-140%);transition:transform .45s cubic-bezier(.2,.9,.25,1.1);cursor:pointer}
.ibanner.show{transform:none}
.ibanner .ib-ic{width:36px;height:36px;border-radius:9px;display:grid;place-items:center;background:var(--brand);color:var(--on-brand,#fff);flex:none}
.ibanner div{flex:1;min-width:0}.ibanner b{font-size:14px}.ibanner p{margin:2px 0 0;font-size:13px;color:var(--ink2);line-height:1.4}
.ibanner time{font-size:12px;color:var(--muted)}
.spin{display:inline-block;width:18px;height:18px;border-radius:50%;border:2.2px solid currentColor;border-right-color:transparent;animation:spin .7s linear infinite}
.spin.w{color:#fff;width:32px;height:32px;border-width:3px}
@keyframes spin{to{transform:rotate(360deg)}}
.ptr{height:0;overflow:hidden;display:flex;align-items:flex-end;justify-content:center;font-size:12px;color:var(--muted);transition:height .25s}
.ptr .in{height:48px;display:flex;align-items:center;gap:8px}
.ptr .spin{width:15px;height:15px;border-width:2px}
.ptr:not(.loading) .spin{animation:none}
.skel{background:linear-gradient(90deg,var(--fill) 25%,var(--fill2,rgba(128,128,128,.06)) 37%,var(--fill) 63%);background-size:400% 100%;animation:skel 1.2s ease infinite;border-radius:8px}
@keyframes skel{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* 演示标记 */
.demo-mark{position:fixed;right:16px;bottom:14px;z-index:999;font-size:11.5px;color:var(--stage-ink,var(--ink));opacity:.7;background:var(--jump-bg);border:1px solid var(--jump-line);backdrop-filter:blur(6px);padding:4px 11px;border-radius:99px;letter-spacing:.5px;pointer-events:none}

/* ---------- Web 视图（运营后台） ---------- */
#web{display:none}
body.web-mode{overflow:auto;background:var(--w-bg,#f4f5f7)}
body.web-mode .stage{display:none}
body.web-mode #web{display:block;min-height:100vh}
body.web-mode .demo-mark{display:none}

/* ---------- 窄屏：隐藏说明 / 手机上全屏 ---------- */
@media (max-width:1060px) and (min-width:601px){.intro{display:none}}
@media (max-width:600px){
  .stage{display:block;height:100dvh;padding:0;gap:0}
  .stage-art,.intro{display:none}
  .device{width:100%;height:100dvh}
  .device-inner{position:static;width:100%;height:100dvh;transform:none;border-radius:0;background:none;padding:0;box-shadow:none}
  .device-inner::before,.device-inner::after,.island,.homebar,.statusbar{display:none}
  .screen{--sb:max(env(safe-area-inset-top,0px),20px);--safe-b:env(safe-area-inset-bottom,0px);width:100%;height:100dvh;border-radius:0}
  .ibanner{top:26px}
  .demo-mark{left:50%;right:auto;top:max(env(safe-area-inset-top,0px),0px);bottom:auto;transform:translateX(-50%);font-size:10px;line-height:18px;height:20px;padding:1px 9px 0;border:0;border-radius:0 0 8px 8px;background:rgba(255,255,255,.9);box-shadow:0 1px 4px rgba(0,0,0,.12);backdrop-filter:none;color:#6b6f78;opacity:1;z-index:460}/* 实底，彩色头图上也清楚可见 */
}