/* 第二輪共用：頁面骨架、手機外框、iOS 開關、加入流程。各設計用 CSS 變數換皮。 */
*{box-sizing:border-box}
body{margin:0;min-height:100vh;font:15px/1.45 -apple-system,"PingFang TC","Noto Sans TC",sans-serif;background:var(--page,#e9e6df);color:var(--ink,#1c1f24)}
button{font:inherit;color:inherit;cursor:pointer}
.hd{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap;padding:14px 22px 0;max-width:1000px;margin:0 auto}
.hd a{color:inherit;opacity:.6;text-decoration:none;font-size:13px}.hd b{font-size:18px}.hd span{opacity:.65;font-size:13.5px}
.sw2{display:none}
.stage{display:flex;justify-content:center;gap:48px;padding:18px 16px 40px;flex-wrap:wrap}
.ph-wrap{margin:0}.ph-wrap figcaption{text-align:center;font-size:13px;opacity:.65;margin-bottom:10px}
.phone{width:375px;height:780px;border-radius:48px;background:#111;padding:11px;box-shadow:0 26px 60px rgba(0,0,0,.28)}
.scr{width:100%;height:100%;border-radius:38px;overflow:hidden;position:relative;background:var(--scr,#fff);color:var(--sink,#111);display:flex;flex-direction:column}
@media(max-width:820px){
  .hd{padding:12px 16px 0}.sw2{display:flex;gap:6px;padding:10px 16px 0}
  .sw2 button{flex:1;border:1px solid currentColor;border-radius:999px;padding:7px;background:none;opacity:.6}.sw2 button.on{opacity:1;font-weight:700}
  body[data-v=h] #wg,body[data-v=g] #wh{display:none}
  .stage{padding:10px 0 0}.ph-wrap figcaption{display:none}
  .phone{width:100vw;height:calc(100vh - 92px);min-height:640px;border-radius:0;padding:0;box-shadow:none}.scr{border-radius:0}
}
/* iOS 開關 */
.tg{width:51px;height:31px;border-radius:16px;border:0;background:#e5e5ea;position:relative;flex:none;transition:background .2s;padding:0;box-shadow:inset 0 0 0 1px rgba(0,0,0,.06)}
.tg::after{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:0 2px 5px rgba(0,0,0,.25);transition:left .2s}
.tg.on::after{left:22px}.tg.on.green{background:#34c759}.tg.on.blue{background:#3b82f6}.tg.on.orange{background:#f0a23a}
.tg.locked{opacity:.45;cursor:not-allowed}.tg.locked::before{content:"🔒";position:absolute;right:6px;top:7px;font-size:11px}
.tg.big{width:84px;height:50px;border-radius:25px}.tg.big::after{width:44px;height:44px;top:3px;left:3px}.tg.big.on::after{left:37px}.tg.big.locked::before{right:12px;top:15px;font-size:15px}
.qr{display:block;border-radius:8px}
/* 加入流程 */
.jn{flex:1;display:flex;flex-direction:column;padding:46px 22px 26px;background:var(--j-bg,#fff);color:var(--j-ink,#111)}
.jn-brand{font-size:12px;letter-spacing:.12em;opacity:.6}
.jn h2{font-size:26px;margin:6px 0 2px}.jn-sub{opacity:.6;margin:0 0 16px;font-size:14px}
.jn-scan{height:170px;border-radius:20px;border:0;background:#111 radial-gradient(circle,#333,#000);color:#fff;font-size:13px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;overflow:hidden}
.jn-scan span{width:96px;height:96px;border:3px solid #fff;border-radius:16px}
.jn-dg{display:flex;gap:7px;justify-content:center;margin:16px 0}
.jn-dg i{font-style:normal;width:42px;height:52px;border:2px solid var(--j-line,#ddd);border-radius:12px;display:grid;place-items:center;font:700 24px ui-monospace,Menlo,monospace}
.jn-dg i.f{border-color:var(--j-acc,#2563eb)}
.jn-pad{display:grid;grid-template-columns:repeat(3,1fr);gap:7px;margin-top:auto}
.jn-pad button{border:0;border-radius:12px;padding:11px;font-size:21px;font-weight:600;background:var(--j-key,#f0f2f5)}
.jn-lang{display:flex;align-items:center;gap:12px;width:100%;text-align:left;border:2px solid var(--j-line,#ddd);background:none;border-radius:14px;padding:12px 14px;margin-bottom:9px;font-size:16px}
.jn-lang b{font-size:24px}.jn-lang small{margin-left:auto;opacity:.55;font-size:12px}.jn-lang.on{border-color:var(--j-acc,#2563eb);background:var(--j-sel,rgba(37,99,235,.06))}
.jn-go{margin-top:auto;border:0;border-radius:14px;padding:15px;font-size:17px;font-weight:700;background:var(--j-acc,#2563eb);color:var(--j-on,#fff)}