/* روباه پلاس — صفحات ورود و ثبت‌نام (سبک نوین‌هاب) */
.a2-body{--a2-bg:#f5f2ee;--a2-card:#fff;--a2-bd:#e8e2da;--a2-tx:#1f2937;--a2-mu:#6b7280;--a2-in:#fbfaf8;--a2-pri:#e2673a;--a2-pri2:#cf5a2f;--a2-ring:rgba(226,103,58,.18);--a2-nav:#24304a;
  margin:0;min-height:100vh;background:var(--a2-bg);color:var(--a2-tx);display:block;
  background-image:radial-gradient(900px 420px at 85% -10%,rgba(226,103,58,.10),transparent 60%),radial-gradient(700px 380px at 0% 110%,rgba(36,48,74,.08),transparent 60%)}
@media (prefers-color-scheme:dark){.a2-body{--a2-bg:#11151c;--a2-card:#181d26;--a2-bd:#2a313d;--a2-tx:#e7e9ee;--a2-mu:#9aa3b2;--a2-in:#131820;--a2-ring:rgba(226,103,58,.28)}}
.a2-body *{box-sizing:border-box}
.a2-wrap{min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:32px 16px}
.a2-card{width:100%;max-width:440px;background:var(--a2-card);border:1px solid var(--a2-bd);border-radius:16px;box-shadow:0 10px 40px -18px rgba(20,25,40,.25);overflow:hidden;animation:a2in .35s ease-out both}
@keyframes a2in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.a2-hd{display:flex;align-items:center;gap:12px;padding:20px 22px 18px;border-bottom:1px solid var(--a2-bd)}
.a2-logo{flex:none;width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--a2-pri),#f08a5d);display:grid;place-items:center;box-shadow:0 6px 16px -6px rgba(226,103,58,.6)}
.a2-logo svg{display:block}
.a2-hd h1{margin:0 0 3px;font-size:17px;font-weight:800;line-height:1.4;color:var(--a2-tx)}
.a2-hd p{margin:0;font-size:12.5px;color:var(--a2-mu);line-height:1.7}
.a2-hd p a{color:var(--a2-pri);text-decoration:none;font-weight:700}
.a2-bd{padding:20px 22px 22px}
.a2-form{display:flex;flex-direction:column;gap:14px;margin:0}
.a2-f{display:flex;flex-direction:column;gap:7px;margin:0}
.a2-l{font-size:13px;font-weight:700;color:var(--a2-tx)}
.a2-in{position:relative;display:flex;align-items:center}
.a2-in>svg{position:absolute;right:12px;color:var(--a2-mu);pointer-events:none}
.a2-in input,.a2-code{width:100%;height:44px;border:1px solid var(--a2-bd);border-radius:10px;background:var(--a2-in);color:var(--a2-tx);font:inherit;font-size:14px;padding:0 40px 0 12px;outline:none;transition:border-color .15s,box-shadow .15s;margin:0}
.a2-in input[dir=ltr]{text-align:left}
.a2-in input::placeholder,.a2-code::placeholder{color:var(--a2-mu);opacity:.65}
.a2-in input:focus,.a2-code:focus{border-color:var(--a2-pri);box-shadow:0 0 0 4px var(--a2-ring);background:var(--a2-card)}
.a2-in input[type=password],.a2-in input.pw{padding-left:40px}
.a2-eye{position:absolute;left:6px;top:50%;transform:translateY(-50%);width:32px;height:32px;border:0;background:none;color:var(--a2-mu);border-radius:8px;cursor:pointer;display:grid;place-items:center;padding:0}
.a2-eye:hover,.a2-eye.on{color:var(--a2-pri);background:var(--a2-ring)}
.a2-in:has(.a2-eye) input{padding-left:40px}
.a2-code{height:54px;text-align:center;font-size:24px;font-weight:800;letter-spacing:12px;padding:0 12px;font-variant-numeric:tabular-nums}
.a2-btn{height:44px;border:0;border-radius:10px;background:var(--a2-pri);color:#fff;font:inherit;font-size:14.5px;font-weight:800;cursor:pointer;transition:background .15s,transform .1s;margin-top:4px;position:relative}
.a2-btn:hover{background:var(--a2-pri2)}
.a2-btn:active{transform:scale(.99)}
.a2-btn.wait{color:transparent;pointer-events:none}
.a2-btn.wait::after{content:"";position:absolute;inset:0;margin:auto;width:18px;height:18px;border:2px solid rgba(255,255,255,.45);border-top-color:#fff;border-radius:50%;animation:a2sp .7s linear infinite}
@keyframes a2sp{to{transform:rotate(360deg)}}
.a2-link{align-self:center;background:none;border:0;font:inherit;font-size:13px;color:var(--a2-mu);text-decoration:none;cursor:pointer;padding:2px 4px}
.a2-link:hover{color:var(--a2-pri)}
.a2-link:disabled{opacity:.55;cursor:default;color:var(--a2-mu)}
.a2-link em{font-style:normal}
.a2-resend{display:flex;justify-content:center;margin:12px 0 0}
.a2-or{display:flex;align-items:center;gap:12px;margin:18px 0 14px;color:var(--a2-mu);font-size:12px}
.a2-or::before,.a2-or::after{content:"";flex:1;height:1px;background:var(--a2-bd)}
.a2-alt{display:grid;gap:10px}
.a2-alt-b{height:42px;display:flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--a2-bd);border-radius:10px;color:var(--a2-tx);text-decoration:none;font-size:13.5px;font-weight:700;background:var(--a2-card);transition:border-color .15s,background .15s}
.a2-alt-b:hover{border-color:var(--a2-pri);background:var(--a2-ring)}
.a2-alt-b svg{color:var(--a2-pri)}
.a2-terms{margin:0;font-size:12px;color:var(--a2-mu);line-height:1.8}
.a2-terms a{color:var(--a2-pri);text-decoration:none}
.a2-ft{border-top:1px solid var(--a2-bd);padding:15px 22px;text-align:center;font-size:13.5px;color:var(--a2-mu)}
.a2-ft a{color:var(--a2-pri);font-weight:800;text-decoration:none}
.a2-ft a:hover{text-decoration:underline}
.a2-msg{display:flex;gap:8px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.75}
.a2-msg svg{flex:none;margin-top:2px}
.a2-msg.err{background:rgba(220,38,38,.08);color:#b91c1c;border:1px solid rgba(220,38,38,.18)}
.a2-msg.ok{background:rgba(22,163,74,.08);color:#15803d;border:1px solid rgba(22,163,74,.2)}
@media (prefers-color-scheme:dark){.a2-msg.err{color:#fca5a5}.a2-msg.ok{color:#86efac}}
.a2-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0}
.a2-copy{margin:18px 0 0;font-size:11.5px;color:var(--a2-mu);opacity:.8}
@media (max-width:480px){.a2-wrap{justify-content:flex-start;padding-top:24px}.a2-hd,.a2-bd{padding-inline:18px}}
/* پیشنهاد رمز + قدرت رمز */
.a2-lr{display:flex;align-items:center;justify-content:space-between;gap:8px}
.a2-gen{display:inline-flex;align-items:center;gap:5px;border:0;background:none;color:var(--a2-pri);font:inherit;font-size:12px;font-weight:700;cursor:pointer;padding:2px 4px;border-radius:6px}
.a2-gen svg{width:14px;height:14px}
.a2-gen:hover{background:var(--a2-ring)}
.a2-sug{display:flex;align-items:center;gap:6px;padding:7px 8px 7px 7px;border:1px dashed var(--a2-pri);border-radius:10px;background:var(--a2-ring);animation:a2in .2s ease-out}
.a2-sug[hidden]{display:none}
.a2-sug code{flex:1;font:700 14px/1.4 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;color:var(--a2-tx);letter-spacing:.5px;text-align:left;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a2-use{border:0;background:var(--a2-pri);color:#fff;font:inherit;font-size:12px;font-weight:700;border-radius:7px;padding:6px 10px;cursor:pointer;white-space:nowrap}
.a2-re{border:1px solid var(--a2-bd);background:var(--a2-card);color:var(--a2-mu);border-radius:7px;width:30px;height:30px;cursor:pointer;font-size:15px;line-height:1}
.a2-re:hover{color:var(--a2-pri)}
.a2-meter{display:flex;align-items:center;gap:8px;font-size:11.5px;color:var(--a2-mu)}
.a2-meter[hidden]{display:none}
.a2-meter i{flex:1;height:4px;border-radius:4px;background:var(--a2-bd);position:relative;overflow:hidden}
.a2-meter i::after{content:"";position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;transition:width .25s,background .25s}
.a2-meter[data-s="1"] i::after{width:25%;background:#dc2626}.a2-meter[data-s="2"] i::after{width:50%;background:#f59e0b}
.a2-meter[data-s="3"] i::after{width:75%;background:#22c55e}.a2-meter[data-s="4"] i::after{width:100%;background:#16a34a}
.a2-meter em{font-style:normal;min-width:36px}
.a2-cp{font-size:11.5px;color:#15803d}
/* کد ۶ رقمی */
.a2-otp{display:flex;gap:8px;justify-content:center}
.a2-d{width:52px;height:52px;flex:1 1 0;min-width:0;max-width:56px;border:1px solid var(--a2-bd);border-radius:10px;background:var(--a2-in);color:var(--a2-tx);font-family:inherit;font-weight:800;font-size:22px;line-height:1;text-align:center;outline:none;padding:0;transition:border-color .15s,box-shadow .15s}
.a2-d:focus{border-color:var(--a2-pri);box-shadow:0 0 0 4px var(--a2-ring);background:var(--a2-card)}
.a2-d.on{border-color:color-mix(in srgb,var(--a2-pri) 55%,var(--a2-bd))}
.a2-otp.shake{animation:a2sh .35s}
@keyframes a2sh{20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}}
.a2-pill{border:1px solid var(--a2-bd);background:var(--a2-card);color:var(--a2-tx);font:inherit;font-size:12.5px;font-weight:700;border-radius:10px;padding:9px 16px;cursor:pointer}
.a2-pill:disabled{color:var(--a2-mu);cursor:default}
.a2-pill em{font-style:normal}
.a2-link.a2-pri{color:var(--a2-pri);font-weight:700}
/* شماره موبایل با پیش‌شماره */
.a2-ph{display:flex;align-items:stretch;height:44px;border:1px solid var(--a2-bd);border-radius:10px;background:var(--a2-in);overflow:hidden;transition:border-color .15s,box-shadow .15s}
.a2-ph:focus-within{border-color:var(--a2-pri);box-shadow:0 0 0 4px var(--a2-ring);background:var(--a2-card)}
.a2-cc{display:flex;align-items:center;gap:8px;padding:0 12px;border-right:1px solid var(--a2-bd);font-weight:800;font-size:14px;color:var(--a2-tx);white-space:nowrap}
.a2-flag{width:20px;height:14px;border-radius:2px;background:linear-gradient(#239f40 0 33.3%,#fff 33.3% 66.6%,#da0000 66.6%);box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.a2-tel{flex:1;min-width:0;border:0;background:none;outline:none;color:var(--a2-tx);font:inherit;font-size:15px;font-weight:700;letter-spacing:.5px;padding:0 12px;text-align:left}
@media (max-width:380px){.a2-otp{gap:6px}.a2-d{height:46px;font-size:19px}}
