/* ═══════════════════════════════════════════════════════════════════
   ورود و تأییدِ کد — «آتلیه» (۲۰۲۶-۱۰-۰۱)
   نیمهٔ هنری: نقاشیِ مدادی در قابِ قوسیِ طلایی روی مخمل · نیمهٔ فرم: کارتِ کاغذی
   beUI: Segmented Tabs · Input (تیکِ زنده + لرزش) · Expanding-arrow CTA · Loader
   ═══════════════════════════════════════════════════════════════════ */
body{background:var(--bg)}
.zau{display:grid;min-height:100svh;grid-template-columns:1fr}
@media(min-width:960px){.zau{grid-template-columns:minmax(380px,46%) 1fr}}

/* ── نیمهٔ هنری ── */
.zau-art{position:relative;overflow:hidden;isolation:isolate;display:none;flex-direction:column;justify-content:space-between;padding:36px 44px;color:#fff;
  background:radial-gradient(110% 80% at 85% 0%,color-mix(in srgb,var(--zb-accent-solid,var(--zb-accent)) 55%,#141A3A) 0%,transparent 60%),
             radial-gradient(90% 70% at 0% 100%,color-mix(in srgb,var(--zb-gold,#C9A46C) 26%,#141A3A) 0%,transparent 70%),
             linear-gradient(180deg,#141A3A,#0c0f27)}
@media(min-width:960px){.zau-art{display:flex}}
.zau-art-bg{position:absolute;inset:0;z-index:-1;opacity:.08;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='64' height='84'%3E%3Cpath d='M8 80V36a24 24 0 0 1 48 0v44' fill='none' stroke='%23C9A46C' stroke-width='.8'/%3E%3C/svg%3E")}
.zau-brand{display:inline-flex;align-items:center;gap:10px;color:#fff;text-decoration:none;font-size:18px}
.zau-mark{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);overflow:hidden}
.zau-mark img{width:100%;height:100%;object-fit:cover}
.zau-mirror{position:relative;align-self:center;margin:26px 0;width:min(300px,64%);aspect-ratio:300/400}
.zau-mirror svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:2}
.zau-mirror path{fill:none;stroke:#d9bd86;stroke-width:2.5;stroke-dasharray:1500;stroke-dashoffset:1500;animation:zauDraw 2.6s cubic-bezier(.65,0,.35,1) .2s forwards}
.zau-mirror path.i{stroke-width:1;opacity:.6;animation-delay:.5s}
@keyframes zauDraw{to{stroke-dashoffset:0}}
.zau-pic{position:absolute;inset:5.5% 7.5% 3.5%;overflow:hidden;border-radius:47% 47% 8px 8px/35% 35% 8px 8px;background:#f4ede2}
.zau-pic img{width:100%;height:100%;object-fit:cover;object-position:70% 60%;filter:sepia(.15) contrast(1.02);animation:zauKen 22s ease-in-out infinite alternate}
@keyframes zauKen{to{transform:scale(1.12) translate(-3%,2%)}}
.zau-copy h2{margin:0 0 14px;font-size:clamp(24px,2.4vw,32px);font-weight:250;line-height:1.35}
.zau-copy h2 em{font-style:normal;font-weight:800;color:#f1d9a8}
.zau-copy ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px}
.zau-copy li{display:flex;align-items:center;gap:10px;font-size:14px;color:rgba(247,241,234,.85)}
.zau-copy li i{width:7px;height:7px;border-radius:50%;background:#c9a46c;box-shadow:0 0 0 4px rgba(201,164,108,.18)}

/* ── نیمهٔ فرم ── */
.zau-main{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:28px 16px 40px}
.zau-top{position:absolute;top:18px;inset-inline:18px;display:flex;justify-content:space-between;align-items:center}
.zau-back{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:var(--text-2);text-decoration:none;padding:8px 12px;border-radius:12px;transition:background .2s}
.zau-back:hover{background:color-mix(in srgb,var(--text) 6%,transparent);color:var(--text)}
.zau-back svg,.zau-theme svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zau-theme{display:grid;place-items:center;width:38px;height:38px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);color:var(--text-2);cursor:pointer}
.zau-card{width:min(440px,100%);margin-top:40px;padding:32px 28px 26px;border-radius:28px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(40,30,50,.05),0 40px 80px -50px rgba(30,20,60,.55)}
html[data-theme="dark"] .zau-card{background:linear-gradient(180deg,color-mix(in srgb,var(--surface) 100%,#fff 4%),var(--surface));box-shadow:inset 0 1px 0 rgba(255,255,255,.06),0 40px 80px -40px rgba(0,0,0,.8)}
.zau-kick{display:inline-flex;align-items:center;gap:10px;font-size:12.5px;color:var(--zb-gold-ink,#8a6a36)}
.zau-kick::before{content:"";width:24px;height:1px;background:currentColor}
html[data-theme="dark"] .zau-kick{color:#e6cd9c}
.zau-card h1{margin:8px 0 6px;font-size:clamp(28px,4vw,36px);font-weight:300;letter-spacing:-.4px;color:var(--text)}
.zau-sub{margin:0 0 20px;font-size:14px;line-height:1.9;color:var(--text-2)}
.zau-msg{margin:0 0 14px;padding:10px 14px;border-radius:12px;font-size:13px;line-height:1.8}
.zau-msg.err{color:var(--zb-bad);background:color-mix(in srgb,var(--zb-bad) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--zb-bad) 30%,transparent)}
.zau-msg.ok{color:var(--zb-ok);background:color-mix(in srgb,var(--zb-ok) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--zb-ok) 30%,transparent)}

/* سگمنت */
.zau-seg{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:4px;margin-bottom:18px;border-radius:15px;background:color-mix(in srgb,var(--text) 6%,var(--surface));border:1px solid var(--border)}
.zau-seg button{position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:7px;height:40px;border:0;border-radius:11px;background:none;font:inherit;font-size:13.5px;font-weight:700;color:var(--text-2);cursor:pointer;transition:color .3s}
.zau-seg button svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.zau-seg button.on{color:var(--text)}
.zau-seg-pill{position:absolute;z-index:0;top:4px;left:0;height:40px;border-radius:11px;background:var(--surface);box-shadow:0 6px 16px -10px rgba(20,26,58,.6),0 0 0 1px var(--border);
  transition:transform .45s cubic-bezier(.34,1.4,.64,1),width .45s}
html[data-theme="dark"] .zau-seg-pill{background:color-mix(in srgb,var(--zb-accent) 30%,var(--surface))}

/* فیلدِ شماره */
.zau-field{display:flex;flex-direction:column;gap:7px;margin-bottom:16px}
.zau-label{font-size:13px;font-weight:700;color:var(--text)}
.zau-input{position:relative;display:flex;align-items:center;height:56px;border-radius:16px;border:1.5px solid var(--border-strong);background:var(--surface-2);transition:border-color .25s,box-shadow .25s}
.zau-input:focus-within{border-color:var(--zb-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--zb-accent) 13%,transparent);background:var(--surface)}
.zau-input.good{border-color:var(--zb-ok)}
.zau-input.bad{border-color:var(--zb-bad);animation:zauShake .45s}
@keyframes zauShake{20%,60%{transform:translateX(-7px)}40%,80%{transform:translateX(7px)}}
.zau-cc{flex:none;height:100%;display:grid;place-items:center;padding:0 14px;font-size:14px;font-weight:700;color:var(--text-2);border-inline-start:1px solid var(--border);order:2;direction:ltr}
.zau-input input{flex:1;min-width:0;height:100%;border:0!important;background:transparent!important;box-shadow:none!important;outline:0;padding:0 16px!important;font:inherit;font-size:19px;letter-spacing:1.5px;color:var(--text);text-align:left}
.zau-input input::placeholder{color:var(--muted);letter-spacing:1px}
.zau-ok{position:absolute;inset-inline-start:12px;display:grid;place-items:center;width:24px;height:24px;border-radius:50%;background:var(--zb-ok);opacity:0;transform:scale(.4);transition:all .35s cubic-bezier(.34,1.56,.64,1)}
.zau-ok svg{width:14px;height:14px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.zau-input.good .zau-ok{opacity:1;transform:none}
.zau-hint{font-size:12px;color:var(--muted)}
.zau-input.good~.zau-hint{color:var(--zb-ok)}
.zau-input.bad~.zau-hint{color:var(--zb-bad)}

/* دکمهٔ Expanding-arrow */
.zau-btn{position:relative;width:100%;height:56px;display:flex;align-items:center;justify-content:center;gap:10px;border:0;border-radius:16px;cursor:pointer;overflow:hidden;
  font:inherit;font-size:15.5px;font-weight:800;color:#fff;background:var(--zb-navy,#141A3A);box-shadow:0 18px 30px -18px rgba(20,26,58,.8);transition:transform .2s,background .3s}
html[data-theme="dark"] .zau-btn{background:var(--zb-accent-solid,var(--zb-accent))}
.zau-btn::before{content:"";position:absolute;inset:0;background:linear-gradient(110deg,transparent 30%,rgba(255,255,255,.18) 50%,transparent 70%);transform:translateX(-120%);transition:transform .8s}
.zau-btn:hover::before{transform:translateX(120%)}
.zau-btn:hover{transform:translateY(-1px)}
.zau-btn .a{display:grid;place-items:center;width:30px;height:30px;border-radius:10px;background:rgba(255,255,255,.14);transition:width .35s cubic-bezier(.34,1.4,.64,1)}
.zau-btn:hover .a{width:42px}
.zau-btn .a svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.zau-btn .ld{display:none;gap:5px}
.zau-btn .ld i{width:7px;height:7px;border-radius:50%;background:#fff;animation:zauDot 1s infinite ease-in-out}
.zau-btn .ld i:nth-child(2){animation-delay:.15s}.zau-btn .ld i:nth-child(3){animation-delay:.3s}
@keyframes zauDot{0%,80%,100%{transform:scale(.55);opacity:.45}40%{transform:none;opacity:1}}
.zau-btn.busy .t,.zau-btn.busy .a{display:none}
.zau-btn.busy .ld{display:inline-flex}
.zau-btn:disabled{cursor:wait}

.zau-trust{display:flex;flex-wrap:wrap;justify-content:center;gap:8px 16px;margin:18px 0 6px}
.zau-trust span{display:inline-flex;align-items:center;gap:5px;font-size:12px;color:var(--text-2)}
.zau-trust svg{width:14px;height:14px;fill:none;stroke:var(--zb-gold,#C9A46C);stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zau-note{margin:10px 0 0;font-size:12px;line-height:2;text-align:center;color:var(--muted)}
.zau-note a,.zau-pro a{color:var(--zb-accent);font-weight:700;text-decoration:none}
.zau-pro{margin:12px 0 0;padding-top:14px;border-top:1px dashed var(--border);font-size:13px;text-align:center;color:var(--text-2)}

/* ── صفحهٔ تأییدِ کد: کارتِ قدیمی درونِ پوستهٔ جدید ── */
.zau .auth-card{width:min(440px,100%);margin:40px auto 0;padding:32px 28px 26px;border-radius:28px;background:var(--surface);border:1px solid var(--border);
  box-shadow:0 1px 2px rgba(40,30,50,.05),0 40px 80px -50px rgba(30,20,60,.55);text-align:center}
.zau .auth-card h1{font-size:clamp(26px,3.6vw,32px);font-weight:300;color:var(--text)}
.zau .auth-logo{display:none}
.zau .otp-row{direction:ltr;display:flex;justify-content:center;gap:8px;margin:18px 0}
.zau .otp-box{width:52px;height:60px;border-radius:14px;border:1.5px solid var(--border-strong);background:var(--surface-2);text-align:center;font-size:24px;font-weight:700;color:var(--text);transition:border-color .2s,box-shadow .2s,transform .2s}
.zau .otp-box:focus{outline:0;border-color:var(--zb-accent);box-shadow:0 0 0 5px color-mix(in srgb,var(--zb-accent) 13%,transparent);transform:translateY(-2px)}
.zau .auth-card .btn-primary{height:52px;border-radius:15px;font-weight:800;background:var(--zb-navy,#141A3A);border:0;color:#fff}
html[data-theme="dark"] .zau .auth-card .btn-primary{background:var(--zb-accent-solid,var(--zb-accent))}
@media(max-width:520px){.zau-card,.zau .auth-card{padding:26px 18px 22px;border-radius:24px}.zau .otp-box{width:44px;height:54px}}
@media(prefers-reduced-motion:reduce){.zau-mirror path{animation:none;stroke-dashoffset:0}.zau-pic img{animation:none}}

/* سه گزینه (بله / پیامک / ایمیل) + راهنمای بله */
.zau-seg.three{grid-template-columns:1fr 1fr 1fr}
.zau-bale{margin:0 0 16px;padding:16px;border-radius:16px;border:1px solid color-mix(in srgb,#2ea8e0 40%,transparent);background:color-mix(in srgb,#2ea8e0 7%,var(--surface))}
.zau-bale b{display:block;font-size:14px;color:var(--text);margin-bottom:8px}
.zau-bale ol{margin:0 0 12px;padding-inline-start:18px;display:flex;flex-direction:column;gap:5px;font-size:13px;line-height:1.8;color:var(--text-2)}
.zau-bale-open{display:inline-flex;align-items:center;justify-content:center;width:100%;height:44px;border-radius:13px;font-weight:800;font-size:14px;text-decoration:none;color:#fff;background:#1f9bd6;margin-bottom:10px}
.zau-bale-open:hover{background:#1784b8;color:#fff}
.zau-bale-wait{display:flex;align-items:center;justify-content:center;gap:5px;font-size:12.5px;color:var(--text-2)}
.zau-bale-wait i{width:6px;height:6px;border-radius:50%;background:#1f9bd6;animation:zauDot 1s infinite ease-in-out}
.zau-bale-wait i:nth-child(2){animation-delay:.15s}.zau-bale-wait i:nth-child(3){animation-delay:.3s}
.zau-bale.done{border-color:var(--zb-ok)}
.zau-card{animation:zauIn .6s cubic-bezier(.16,1,.3,1) both}
@keyframes zauIn{from{opacity:0;transform:translateY(14px)}}

/* ═══ تأییدِ کد — beUI OTP + Ring ═══ */
.zv-ic{position:relative;display:grid;place-items:center;width:74px;height:74px;margin:0 auto 14px;border-radius:24px;color:var(--zb-accent);
  background:color-mix(in srgb,var(--zb-accent) 10%,var(--surface));border:1px solid color-mix(in srgb,var(--zb-accent) 25%,transparent)}
.zv-ic.bale{color:#1f9bd6;background:color-mix(in srgb,#1f9bd6 10%,var(--surface));border-color:color-mix(in srgb,#1f9bd6 30%,transparent)}
.zv-ic svg{width:32px;height:32px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.zv-wave{animation:zvWave 1.6s ease-in-out infinite}
@keyframes zvWave{0%,100%{opacity:.25}50%{opacity:1}}
.zv-ring{position:absolute;inset:-6px;border-radius:28px;border:2px solid currentColor;opacity:0;animation:zvPing 2.4s ease-out infinite}
@keyframes zvPing{0%{transform:scale(.9);opacity:.5}100%{transform:scale(1.25);opacity:0}}
.zau .auth-card .zau-kick{justify-content:center}
.zau .auth-card .au-sub{color:var(--text-2);font-size:14px;margin:6px 0 10px}
.zv-phone{display:inline-flex!important;align-items:center;gap:10px;margin:0 auto 16px!important;padding:6px 8px 6px 14px;border-radius:99px;background:var(--surface-2);border:1px solid var(--border)}
.zv-phone b{font-size:15px;letter-spacing:1px;color:var(--text)}
.zv-phone a{display:inline-flex;align-items:center;gap:4px;padding:5px 10px;border-radius:99px;font-size:12px;font-weight:700;text-decoration:none;color:var(--zb-accent);background:color-mix(in srgb,var(--zb-accent) 10%,var(--surface))}
.zv-phone a svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zau .otp-box{caret-color:var(--zb-accent)}
.zau .otp-box.filled,.zau .otp-box.fill,.zau .otp-box.is-filled{border-color:var(--zb-accent);background:color-mix(in srgb,var(--zb-accent) 7%,var(--surface));animation:zvPop .28s cubic-bezier(.34,1.56,.64,1)}
@keyframes zvPop{50%{transform:scale(1.1)}}
.zv-timer{display:flex;align-items:center;justify-content:center;gap:10px;margin-top:4px}
.zv-timer .auth-timer{margin:0}
.zv-dial{--p:100;position:relative;width:34px;height:34px;border-radius:50%;
  background:conic-gradient(var(--zb-accent) calc(var(--p)*1%),color-mix(in srgb,var(--text) 10%,transparent) 0);transition:background .25s}
.zv-dial::after{content:"";position:absolute;inset:4px;border-radius:50%;background:var(--surface)}
.zv-dial.low{background:conic-gradient(var(--zb-bad) calc(var(--p)*1%),color-mix(in srgb,var(--text) 10%,transparent) 0)}
.zau .zv-go{height:54px!important;border-radius:16px!important;font-size:15.5px!important}
.zv-resend{display:inline-flex;align-items:center;gap:6px;margin-top:14px;padding:8px 14px;border-radius:12px;border:1px solid var(--border-strong);background:var(--surface);font:inherit;font-size:13px;font-weight:700;color:var(--zb-accent);cursor:pointer}
.zv-resend:disabled{color:var(--muted);cursor:not-allowed;opacity:.8}
.zv-resend svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.zv-help{margin:12px 0 0;font-size:11.5px;line-height:1.9;color:var(--muted)}
.zau .auth-debug{margin:0 0 12px;padding:8px 12px;border-radius:12px;font-size:12.5px;border:1px dashed color-mix(in srgb,var(--zb-gold,#C9A46C) 60%,transparent);color:var(--zb-gold-ink,#8a6a36);background:color-mix(in srgb,var(--zb-gold,#C9A46C) 8%,var(--surface))}
.zau .auth-msg{margin:0 0 12px;padding:9px 12px;border-radius:12px;font-size:13px}
.zau .auth-msg.ok{color:var(--zb-ok);background:color-mix(in srgb,var(--zb-ok) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--zb-ok) 28%,transparent)}
.zau .auth-msg.err{color:var(--zb-bad);background:color-mix(in srgb,var(--zb-bad) 9%,var(--surface));border:1px solid color-mix(in srgb,var(--zb-bad) 28%,transparent)}
.zau .otp-box.zb-ok,.zau .otp-box.zb-bad,.zau-input input.zb-ok,.zau-input input.zb-bad{background-image:none!important;padding-inline-end:0!important}