/* 登录门（设计 §3.2 / §3.5 / §3.6；计划 2026-09-26-顾客登录弹窗 Task 11 / 12）。弹窗外形归 shop.css 的 .sheet，这里只给门自己与整页 /login 的外框。
   WhatsApp 码步状态在 [data-wa-state]，.is-dead = 过期或暂停；电脑档两栏要 :has()，不支持照手机单栏。 */
:root{--door-pad:24px;--tile-w:58px;--tile-h:68px;--tile-gap:10px}
@media (max-width:359.98px){:root{--door-pad:18px;--tile-w:54px;--tile-h:64px;--tile-gap:8px}}
.door .sheet-panel{max-width:480px;isolation:isolate;background:linear-gradient(180deg,rgb(255 255 255 / .88),rgb(250 250 248 / .93) 40%,rgb(247 247 244 / .96));-webkit-backdrop-filter:saturate(180%) blur(28px);backdrop-filter:saturate(180%) blur(28px);box-shadow:inset 0 1px 0 rgb(255 255 255 / .75),inset 0 0 0 1px rgb(255 255 255 / .35),var(--shadow-sheet)}
@supports not ((-webkit-backdrop-filter:blur(1px)) or (backdrop-filter:blur(1px))){.door .sheet-panel{background:var(--paper)}}
.lowfx .door .sheet-panel{-webkit-backdrop-filter:none;backdrop-filter:none;background:var(--paper)}
.door .sheet-panel::before,.door-card::before{content:"";position:absolute;inset:0 0 auto;height:220px;border-radius:inherit;pointer-events:none;z-index:-1;background:radial-gradient(110% 95% at 0 0,rgb(0 96 146 / .22),transparent 60%),radial-gradient(70% 80% at 100% 0,rgb(0 132 190 / .12),transparent 62%)}
.door-head{height:44px;padding:0 var(--door-pad)}
.door-logo{width:34px;height:34px;border-radius:10px;background:#fff;box-shadow:0 1px 2px rgb(9 10 12 / .10),inset 0 0 0 1px var(--line);object-fit:contain}
.door-body{padding:0 var(--door-pad) calc(20px + var(--safe-b))}
.door-ui .door-h{font-size:24px;font-weight:700;letter-spacing:-.02em;line-height:1.2;margin-top:12px}
.door-stage{position:relative;margin-top:18px;transition:height .24s var(--ease)}
.door-pane{display:grid;gap:14px}
.door-pane[hidden]{display:none}
.door-pane.in,.door-step.in{animation:door-in .24s var(--ease) both}
.door-pane.in-back,.door-step.in-back{animation:door-in-back .24s var(--ease) both}
@keyframes door-in{from{opacity:0;transform:translateX(14px)}to{opacity:1;transform:none}}
@keyframes door-in-back{from{opacity:0;transform:translateX(-14px)}to{opacity:1;transform:none}}
.door-ui .field>label{font-size:13px;font-weight:600;color:var(--ink-2)}
.door-ui .input{height:52px;border-radius:14px;padding:0 16px;font-size:17px;font-weight:500;background:#fff;transition:box-shadow var(--d-press) var(--ease)}
.door-ui .input::placeholder{color:rgb(100 103 109 / .75);font-weight:400}
.door-ui .input:focus{box-shadow:inset 0 0 0 1.5px var(--ink),0 0 0 4px rgb(0 96 146 / .14)}
.door-ui .input.is-err{box-shadow:inset 0 0 0 1.5px var(--danger),0 0 0 4px rgb(180 35 24 / .10);animation:door-shake .24s var(--ease)}
@keyframes door-shake{25%{transform:translateX(-4px)}50%{transform:translateX(4px)}75%{transform:translateX(-2px)}}
.door-ui .pw{position:relative}
.door-ui .pw .input{padding-right:52px}
.door-ui .eye{position:absolute;top:4px;right:4px;width:44px;height:44px;border-radius:10px;display:grid;place-items:center;color:var(--sub)}
.door-ui .errline{display:flex;align-items:center;gap:6px;margin-top:2px;font-size:13px;font-weight:600;color:var(--danger)}
.door-ui .errline[hidden]{display:none}
.door-ui .btn{height:52px;border-radius:14px;font-size:16px}
.door-ui .btn-ink:not([disabled]){box-shadow:0 10px 24px rgb(9 10 12 / .22)}
.door-ui .btn-ink.is-loading::after{border-color:rgb(255 255 255 / .35);border-top-color:#fff}
.door-ui .btn-ghost{background:rgb(255 255 255 / .82)}
.door-ui .gbtn{gap:10px}
.door-ui .alink{display:inline-flex;align-items:center;justify-self:center;min-height:36px;font-size:14px;font-weight:600;color:var(--ink);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}
.door-ui .or{display:flex;align-items:center;gap:12px;margin:20px 0 14px;font-size:12px;font-weight:600;color:var(--sub)}
.door-ui .or::before,.door-ui .or::after{content:"";flex:1;height:1px;background:var(--line-strong)}
.door-ui .legal{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:18px;font-size:12px;font-weight:600;color:var(--sub)}
.door-ui .legal a{display:inline-flex;align-items:center;min-height:32px}
.door-ui .flash{margin-top:14px}
.door-done{display:grid;justify-items:center;gap:12px;padding:18px 0 6px;text-align:center}
.door-done[hidden]{display:none}
.door-done b{font-size:20px;font-weight:700;letter-spacing:-.01em}
.door-tick{width:72px;height:72px;animation:door-pop .32s var(--ease) both}
.door-tick circle{fill:var(--ink)}
.door-tick path{fill:none;stroke:#fff;stroke-width:3.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:30;stroke-dashoffset:30;animation:door-draw .32s .12s var(--ease) forwards}
@keyframes door-pop{from{transform:scale(.6);opacity:0}to{transform:none;opacity:1}}
@keyframes door-draw{to{stroke-dashoffset:0}}
.door-ui.is-done>:not(.door-done):not(.door-h){display:none}
.door-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;height:46px;padding:4px;margin-top:18px;border-radius:14px;background:rgb(9 10 12 / .06)}
.door-seg[hidden],.door-step[hidden],.door-paused[hidden],.door-cc[hidden]{display:none}
.door-seg-ind{position:absolute;top:4px;bottom:4px;left:4px;width:calc(50% - 4px);border-radius:10px;background:#fff;box-shadow:0 1px 2px rgb(9 10 12 / .08),0 4px 12px rgb(9 10 12 / .06);transform:translateX(calc(100% * var(--i,0)));transition:transform .2s var(--ease)}
.door-seg button{position:relative;display:flex;align-items:center;justify-content:center;gap:6px;min-width:0;white-space:nowrap;font-size:14px;font-weight:600;color:var(--sub)}
.door-seg button[aria-selected=true]{color:var(--ink)}
.door-seg button:disabled{color:rgb(100 103 109 / .7)}
.door-paused{height:20px;padding:0 7px;border-radius:999px;background:rgb(9 10 12 / .07);font-size:12px;line-height:20px}
@media (max-width:359.98px){.door-paused{width:6px;height:6px;padding:0;font-size:0;background:var(--sub);opacity:.6}}
.door-step{display:grid;gap:14px}
.door-phone{display:flex;gap:8px;min-width:0}
.door-cc{position:relative;flex:none;display:flex;align-items:center;justify-content:center;gap:4px;width:76px;height:52px;border-radius:14px;background:#fff;box-shadow:inset 0 0 0 1px var(--line-strong);font-size:16px;font-weight:600}
.door-cc .ic{color:var(--sub)}
.door-cc select{position:absolute;inset:0;opacity:0;font-size:16px}
.door-bound{display:flex;align-items:center;justify-self:center;gap:8px;max-width:100%;height:40px;padding:0 6px 0 12px;border-radius:12px;background:rgb(255 255 255 / .66);box-shadow:inset 0 0 0 1px var(--line);font-size:15px;font-weight:600;font-variant-numeric:tabular-nums;white-space:nowrap}
.door-tiles{display:flex;justify-content:center;gap:var(--tile-gap)}
.door-tiles span{display:grid;place-items:center;width:var(--tile-w);height:var(--tile-h);border-radius:16px;background:#fff;box-shadow:0 1px 2px rgb(9 10 12 / .06),0 8px 20px rgb(9 10 12 / .07),inset 0 0 0 1px var(--line);font-size:32px;font-weight:700;font-variant-numeric:tabular-nums lining-nums;animation:door-tile .2s var(--ease) both;transition:opacity .2s,transform .2s}
.door-tiles span:nth-child(2){animation-delay:40ms}.door-tiles span:nth-child(3){animation-delay:80ms}.door-tiles span:nth-child(4){animation-delay:.12s}
@keyframes door-tile{from{opacity:0;transform:translateY(10px) scale(.94)}}
.door-bar{width:calc(var(--tile-w) * 4 + var(--tile-gap) * 3);max-width:100%;height:2px;margin:0 auto;border-radius:2px;background:rgb(9 10 12 / .08);overflow:hidden}
.door-bar i{display:block;height:100%;background:var(--ink);transform-origin:0 50%;transition:transform 1s linear}
.door-wait{display:flex;align-items:center;justify-content:center;gap:8px;height:24px;font-size:14px;font-weight:600;color:var(--ink-2)}
.door-wait>span{display:none}
.door-dot{width:7px;height:7px;border-radius:50%;background:var(--ink);animation:door-breathe 1.4s ease-in-out infinite}
@keyframes door-breathe{50%{opacity:.25;transform:scale(.8)}}
.door-wait>.door-dot,.door-wait>.door-left,[data-wa-state=wait] .w-wait,[data-wa-state=expired] .w-expired,[data-wa-state=mismatch] .w-mismatch,[data-wa-state=offline] .w-offline,[data-wa-state=paused] .w-paused{display:inline-block}
.door-left{color:var(--sub);font-weight:500;font-variant-numeric:tabular-nums}
[data-wa-state=mismatch] .door-wait{color:var(--danger)}
.door-again,.is-dead :is(.door-open,.door-dot,.door-left,.door-bar,.door-qrtoggle,.door-qrbox){display:none}
[data-wa-state=expired] .door-again{display:flex}
.is-dead .door-tiles span{opacity:.35;transform:scale(.98);animation:none}
.door-qrtoggle{justify-self:center}
.door-qrtoggle .q-hide,.door-qrtoggle[aria-expanded=true] .q-show,.door-open .d{display:none}
.door-qrtoggle[aria-expanded=true] .q-hide{display:inline}
.door-qrbox{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s var(--ease)}
.door-qrbox.open{grid-template-rows:1fr}
.door-qrbox>div{min-height:0;overflow:hidden}
.door-qr{display:block;width:196px;height:196px;margin:4px auto 0;padding:14px;border-radius:20px;background:#fff;box-shadow:0 1px 2px rgb(9 10 12 / .06),0 12px 28px rgb(9 10 12 / .08),inset 0 0 0 1px var(--line)}
.door-manual{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:8px;margin:12px 0 2px;font-size:13px;font-weight:600;color:var(--sub)}
.door-chip{height:30px;padding:0 10px;border-radius:9px;background:rgb(255 255 255 / .8);box-shadow:inset 0 0 0 1px var(--line);font-size:13px;font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums;white-space:nowrap}
.door-result{justify-items:center;text-align:center}
.door-result b{font-size:18px;font-weight:700}
.door-badge{display:grid;place-items:center;width:64px;height:64px;border-radius:50%;background:rgb(9 10 12 / .06);color:var(--ink-2)}
.door-result[data-wa-state=staff] .r-off,.door-result[data-wa-state=disabled] .r-staff{display:none}
.door-gift{display:inline-flex;align-items:center;gap:6px;height:32px;padding:0 12px;border-radius:999px;background:var(--brand-tint);color:var(--brand);font-size:14px;font-weight:700}
.door-done [hidden]{display:none}
.door-ui.is-code>:is(.door-seg,.or,.gbtn,.legal){display:none}
@media (min-width:768px){.door-open{background:rgb(255 255 255 / .82);color:var(--ink);box-shadow:inset 0 0 0 1px var(--line-strong)}.door-open .m{display:none}.door-open .d{display:inline}}
@supports selector(:has(a)){@media (min-width:768px){
.door .door-panel:has(.door-codebox:not([hidden])){max-width:560px}.door-main:has(.door-codebox:not([hidden])){max-width:608px}
.door-codebox{grid-template-columns:196px minmax(0,1fr);column-gap:24px;align-items:center;--tile-w:52px;--tile-h:62px;--tile-gap:8px}
.door-codebox>*{grid-column:2}.door-codebox>.door-bound{grid-column:1/-1}
.door-codebox>.door-qrbox{grid-column:1;grid-row:2/span 5;grid-template-rows:1fr}
.door-codebox .door-qr{margin:0}.door-codebox>.door-qrtoggle{display:none}
.door-codebox .door-tiles,.door-codebox .door-wait{justify-content:flex-start}.door-codebox .door-bar{margin:0}}}
@media (min-width:768px){.door .sheet-panel{max-width:440px;box-shadow:inset 0 1px 0 rgb(255 255 255 / .75),inset 0 0 0 1px rgb(255 255 255 / .35),var(--shadow-dialog)}.door .sheet-grab{display:none}.door-head{padding-top:6px}}
.door-page .band-row>:not(.band-logo):not(.band-word){display:none}
.door-page .band-word{display:block}
.door-page .foot{display:none}
.door-main{max-width:488px;padding-block:20px 32px}
.door-card{position:relative;isolation:isolate;overflow:hidden;background:var(--surface);border-radius:24px;box-shadow:0 1px 2px rgb(9 10 12 / .04),0 12px 32px rgb(9 10 12 / .07);padding:24px var(--door-pad) 26px}
.door-card .door-h{margin-top:0}
@media (min-width:768px){.door-main{padding-block:48px}.door-card{padding:28px 32px 30px}}
@media (prefers-reduced-motion:reduce){.door-stage,.door-seg-ind,.door-qrbox,.door-bar i{transition:none}.door-pane.in,.door-pane.in-back,.door-step.in,.door-step.in-back,.door-tick,.door-ui .input.is-err,.door-tiles span,.door-dot{animation:none}.door-tick path{animation:none;stroke-dashoffset:0}}