/* ===================== ورود، قفل، دومرحله‌ای و خطا — لوکس تیره ===================== */
body[data-page="auth"], body[data-page="error"] { background: var(--color-bg) var(--noise); min-height: 100dvh; }
.au { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); min-height: 100dvh; }
@media (max-width: 900px) { .au { grid-template-columns: minmax(0, 1fr); } .au__art { display: none; } }
.au__panel { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-6); padding: var(--space-8) var(--gutter); position: relative; }
.au__brand { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: var(--weight-black); font-size: var(--text-lg); color: var(--color-text); text-decoration: none; }
.au__brand svg { width: 38px; height: 38px; }
.au__card { width: min(460px, 100%); padding: clamp(1.5rem, 1rem + 2vw, 2.5rem); border-radius: 30px; background: linear-gradient(var(--color-surface), var(--color-surface)) padding-box, var(--ring-gold) border-box; border: 1px solid transparent; box-shadow: 0 40px 90px -40px rgb(0 0 0 / 0.8); }
.au__foot { color: var(--color-text-subtle); }
.au__foot a { color: inherit; }
.auth__title { font-size: var(--text-2xl); margin-bottom: var(--space-2); }
.au__icon { width: 60px; height: 60px; display: grid; place-items: center; border-radius: 20px; background: var(--grad-gold); color: #1b1408; margin-bottom: var(--space-4); box-shadow: 0 16px 30px -14px rgb(201 162 75 / 0.9); }
.au__icon .icon { width: 28px; height: 28px; }
.au__icon--ok { margin-inline: auto; background: linear-gradient(135deg, #7ee2a1, #11713a); }
.au__phone .input { border: 0; }
.au__or { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-subtle); font-size: var(--text-xs); }
.au__or::before, .au__or::after { content: ""; flex: 1; height: 1px; background: var(--color-border); }
.au__timer { display: flex; align-items: center; justify-content: center; gap: var(--space-3); min-height: 44px; font-size: var(--text-sm); color: var(--color-text-muted); }
.au__timer .ring-timer circle { stroke-width: 4; }
.au__dest { display: grid; gap: var(--space-2); }
.otp { gap: var(--space-2); }
.otp input { background: var(--color-surface-2); border-color: var(--color-border-strong); transition: border-color var(--motion-fast), transform var(--motion-fast) var(--motion-spring), box-shadow var(--motion-fast); }
.otp input:focus-visible { transform: translateY(-2px); }
.otp input:not(:placeholder-shown), .otp input.is-filled { border-color: var(--color-primary); }
.otp--6 input { width: 48px; height: 58px; font-size: var(--text-xl); }
@media (max-width: 380px) { .otp--6 input { width: 40px; height: 52px; } .otp--6 { gap: 6px; } }
.otp.has-error { animation: shake 400ms; }
@keyframes shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .otp.has-error { animation: none; } }

/* ستون هنری */
.au__art { position: relative; overflow: hidden; display: grid; place-items: center; padding: var(--space-12); background: radial-gradient(70% 60% at 50% 40%, rgb(210 165 76 / 0.18), transparent 70%), linear-gradient(160deg, #1d1914, #0b0a08); border-inline-start: 1px solid rgb(255 255 255 / 0.06); }
.au__rings { position: absolute; inset: 0; display: grid; place-items: center; }
.au__rings span { position: absolute; width: var(--s); aspect-ratio: 1; border-radius: 50%; border: 1px solid rgb(210 165 76 / 0.25); animation: m-spin 60s linear infinite; }
.au__rings span:nth-child(1) { --s: 320px; border-style: dashed; }
.au__rings span:nth-child(2) { --s: 520px; animation-direction: reverse; animation-duration: 90s; }
.au__rings span:nth-child(3) { --s: 760px; border-color: rgb(210 165 76 / 0.12); }
@keyframes m-spin { to { transform: rotate(360deg); } }
.au__art-inner { position: relative; max-width: 460px; text-align: center; color: #f5efe4; }
.au__art-inner h2 { font-size: clamp(1.8rem, 1.2rem + 2vw, 2.8rem); }
.au__art-inner p { color: #b6aa96; }
.au__tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-top: var(--space-8); perspective: 900px; }
.au__tiles span { display: flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-4); border-radius: 18px; background: rgb(255 255 255 / 0.04); border: 1px solid rgb(255 255 255 / 0.08); font-weight: var(--weight-bold); transform: rotateX(18deg); animation: floaty 6s ease-in-out infinite; }
.au__tiles span:nth-child(2) { animation-delay: -1.5s; } .au__tiles span:nth-child(3) { animation-delay: -3s; } .au__tiles span:nth-child(4) { animation-delay: -4.5s; }
.au__tiles .icon { color: #f0cf86; }
@keyframes floaty { 50% { translate: 0 -10px; } }
.au__phone3d { margin: var(--space-8) auto 0; width: 220px; padding: var(--space-6) var(--space-4); border-radius: 32px; background: linear-gradient(160deg, #2a251d, #0d0b08); border: 1px solid rgb(210 165 76 / 0.35); transform: perspective(900px) rotateY(-14deg) rotateX(8deg); box-shadow: 0 40px 70px -30px #000; display: grid; gap: var(--space-2); }
.au__phone3d-code { font-size: 2rem; font-weight: 900; letter-spacing: 0.15em; color: #f0cf86; font-variant-numeric: tabular-nums; direction: ltr; }
.au__phone3d small { color: #8a7f6d; }

/* قفل */
.au__locked { align-items: center; }
.au__lockring { margin-inline: auto; }
.au__lockring .ring-fg { stroke: var(--color-danger); }
.au__lockicon { color: var(--color-danger); animation: lockpulse 2s ease-in-out infinite; }
@keyframes lockpulse { 50% { transform: scale(1.08); } }
.au__count { display: grid; gap: 2px; margin: 0; }
.au__count span { font-size: var(--text-xs); color: var(--color-text-muted); }
.au__count strong { font-size: var(--text-3xl); font-variant-numeric: tabular-nums; letter-spacing: 0.04em; }
.au__tips { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-2); text-align: start; color: var(--color-text-muted); }
.au__tips li { display: flex; gap: var(--space-2); }
.au__tips .icon { color: var(--color-success); }
.btn[aria-disabled="true"] { opacity: 0.5; pointer-events: none; }

/* دومرحله‌ای */
.au__stepper { margin-bottom: var(--space-5); }
.tfa-qr { display: grid; grid-template-columns: auto 1fr; gap: var(--space-4); align-items: center; }
@media (max-width: 420px) { .tfa-qr { grid-template-columns: 1fr; justify-items: center; } }
.tfa-qr .qr-box svg { width: 156px; height: 156px; }
.tfa-secret { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); background: var(--color-surface-2); font-family: var(--font-mono); font-size: var(--text-sm); direction: ltr; word-break: break-all; }
.tfa-codes { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-2); border: 1px dashed var(--color-border-strong); font-family: var(--font-mono); direction: ltr; text-align: center; }
.tfa-codes span { padding: 4px; border-radius: 6px; background: var(--color-surface); }
.tfa-apps { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.tfa-apps span { padding: 4px 10px; border-radius: var(--radius-pill); background: var(--color-surface-2); font-size: var(--text-xs); }
.tfa-benefits { display: grid; gap: var(--space-3); }
.tfa-benefits div { display: flex; gap: var(--space-3); align-items: flex-start; padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface-2); }
.tfa-benefits .icon { color: var(--color-primary); flex: none; margin-top: 3px; }

/* خطاها */
.er { position: relative; isolation: isolate; overflow: hidden; overflow: clip; min-height: 100dvh; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--space-8); padding: var(--space-16) clamp(1rem, 4vw, 5rem) var(--space-10); }
@media (max-width: 860px) { .er { grid-template-columns: minmax(0, 1fr); text-align: center; padding-top: var(--space-20); } .er__actions, .er__links { justify-content: center; } }
.er__brand { position: absolute; top: var(--space-6); inset-inline-start: var(--gutter); }
.er .lx-mesh { position: absolute; inset: -20%; z-index: -1; filter: blur(70px); }
.er .lx-mesh span { position: absolute; width: 45vmax; height: 45vmax; border-radius: 50%; animation: mesh 18s ease-in-out infinite alternate; }
.er .lx-mesh span:nth-child(1) { background: radial-gradient(circle, rgb(210 165 76 / 0.4), transparent 65%); top: 0; inset-inline-end: 0; }
.er .lx-mesh span:nth-child(2) { background: radial-gradient(circle, rgb(140 60 40 / 0.3), transparent 65%); bottom: -10%; inset-inline-start: 10%; animation-delay: -8s; }
.er[data-tone="danger"] .lx-mesh span:nth-child(2) { background: radial-gradient(circle, rgb(220 60 50 / 0.35), transparent 65%); }
@keyframes mesh { 50% { transform: translate3d(8%, 6%, 0) scale(1.15); } }
.er__scene { position: relative; display: grid; place-items: center; min-height: 320px; perspective: 900px; }
.er__code { font-size: clamp(7rem, 4rem + 14vw, 15rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; background: linear-gradient(180deg, #f6dfa4 0%, #c9a24b 45%, #5e4313 100%); -webkit-background-clip: text; background-clip: text; color: transparent; transform: rotateX(16deg) rotateY(-12deg); filter: drop-shadow(0 30px 40px rgb(0 0 0 / 0.6)); animation: er-float 6s ease-in-out infinite; }
.er__code--icon { -webkit-background-clip: initial; background: none; color: #f0cf86; }
.er__code--icon .icon { width: 9rem; height: 9rem; }
@keyframes er-float { 50% { transform: rotateX(10deg) rotateY(-4deg) translateY(-14px); } }
.er__plate { position: absolute; bottom: 8%; inset-inline-start: 18%; width: 88px; height: 88px; border-radius: 28px; display: grid; place-items: center; background: rgb(24 21 17 / 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgb(255 255 255 / 0.1); color: #f0cf86; transform: translateZ(80px) rotate(-8deg); animation: floaty 5s ease-in-out infinite; }
.er__plate .icon { width: 40px; height: 40px; }
.er[data-tone="danger"] .er__plate { color: var(--color-danger); }
.er__orb { position: absolute; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #f6dfa4, #b58630 60%, #5e4313); animation: floaty 7s ease-in-out infinite; }
.er__orb--1 { width: 46px; height: 46px; top: 10%; inset-inline-end: 22%; }
.er__orb--2 { width: 22px; height: 22px; bottom: 22%; inset-inline-end: 12%; animation-delay: -3s; }
.er__body h1 { font-size: clamp(2rem, 1.4rem + 2.6vw, 3.4rem); letter-spacing: -0.02em; }
.er__body p { color: var(--color-text-muted); font-size: var(--text-lg); max-width: 52ch; }
@media (max-width: 860px) { .er__body p { margin-inline: auto; } }
.er__actions { margin-block: var(--space-6); }
.er__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.er__links a { display: inline-flex; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-4); border-radius: var(--radius-pill); border: 1px solid var(--color-border); color: var(--color-text); text-decoration: none; font-size: var(--text-sm); font-weight: var(--weight-bold); }
.er__links a:hover { border-color: var(--color-primary); }
.er__trace { color: var(--color-text-subtle); font-size: var(--text-sm); }
@media (prefers-reduced-motion: reduce) { .er__code, .er__plate, .er__orb, .er .lx-mesh span, .au__rings span, .au__tiles span, .au__lockicon { animation: none; } }
[data-lite="true"] .er .lx-mesh, [data-lite="true"] .au__rings { display: none; }
[data-lite="true"] .er__code, [data-lite="true"] .er__plate, [data-lite="true"] .au__tiles span { animation: none; }