.auth-card { width: min(100%, 25rem); }
.auth-logo { display: flex; align-items: center; gap: .8rem; margin-bottom: 3.2rem; }
.auth-logo-mark { display: grid; width: 3.2rem; height: 3.2rem; place-items: center; overflow: hidden; background: var(--primary); border-radius: 1rem; box-shadow: 0 12px 28px color-mix(in srgb, var(--primary) 24%, transparent); }
.auth-logo-mark img { width: 2.55rem; height: 2.55rem; object-fit: contain; }
.auth-logo div { display: flex; flex-direction: column; }
.auth-logo strong { color: var(--text-strong); font-size: .92rem; }
.auth-logo small { color: var(--text-muted); font-size: .68rem; }
.auth-eyebrow { display: inline-block; margin-bottom: .55rem; color: var(--primary); font-size: .73rem; font-weight: 600; }
.auth-card h1 { margin: 0; color: var(--text-strong); font-size: clamp(2rem, 5vw, 3.25rem); font-weight: 800; letter-spacing: -.04em; line-height: 1.25; }
.auth-description { margin: .85rem 0 2rem; color: var(--text-muted); font-size: .84rem; line-height: 2; }
.field-group { display: flex; flex-direction: column; gap: .55rem; }
.field-group label { color: var(--text); font-size: .76rem; font-weight: 500; }
.phone-field { display: flex; height: 3.65rem; align-items: center; overflow: hidden; direction: ltr; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 1rem; transition: border-color .2s ease, box-shadow .2s ease; }
.phone-field:focus-within { border-color: color-mix(in srgb, var(--primary) 58%, var(--border)); box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--primary) 10%, transparent); }
.phone-prefix { display: flex; height: 100%; align-items: center; padding: 0 1rem; color: var(--text-muted); border-right: 1px solid var(--border); font-size: .83rem; }
.phone-field input { width: 100%; height: 100%; padding: 0 1rem; color: var(--text-strong); background: transparent; border: 0; outline: 0; direction: ltr; font-family: 'Yekan Bakh', sans-serif; font-size: 1rem; letter-spacing: .09em; }
.phone-field input::placeholder { color: color-mix(in srgb, var(--text-muted) 62%, transparent); letter-spacing: .08em; }
.field-hint { min-height: 1.4rem; margin: .35rem 0 0; color: var(--text-muted); font-size: .68rem; }
.field-error { color: var(--danger); }
.auth-submit { display: flex; width: 100%; min-height: 3.6rem; align-items: center; justify-content: center; gap: .65rem; margin-top: 1.1rem; padding: .8rem 1rem; color: #fff; background: linear-gradient(135deg, var(--primary), var(--primary-deep)); border: 0; border-radius: 1rem; box-shadow: 0 14px 28px color-mix(in srgb, var(--primary) 22%, transparent); cursor: pointer; font: inherit; font-weight: 700; transition: transform .2s ease, opacity .2s ease; }
.auth-submit:hover:not(:disabled) { transform: translateY(-2px); }
.auth-submit:disabled { cursor: not-allowed; opacity: .45; box-shadow: none; }
.button-spinner { width: 1rem; height: 1rem; border: 2px solid rgb(255 255 255 / 32%); border-top-color: #fff; border-radius: 50%; animation: auth-spin .7s linear infinite; }
.auth-footnote { display: flex; align-items: center; justify-content: center; gap: .35rem; margin-top: 1.5rem; color: var(--text-muted); font-size: .67rem; }
.auth-footnote svg { width: .9rem; height: .9rem; fill: currentColor; }
.phone-summary { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 1.5rem 0 1.8rem; padding: .9rem 1rem; background: var(--surface-soft); border: 1px solid var(--border); border-radius: 1rem; }
.phone-summary div { display: flex; flex-direction: column; }
.phone-summary small { color: var(--text-muted); font-size: .65rem; }
.phone-summary strong { color: var(--text-strong); direction: ltr; font-size: .9rem; letter-spacing: .04em; }
.phone-summary a { color: var(--primary); font-size: .7rem; font-weight: 600; text-decoration: none; }
.otp-label { display: block; margin-bottom: .6rem; color: var(--text); font-size: .76rem; font-weight: 500; }
.otp-control { position: relative; display: grid; direction: ltr; grid-template-columns: repeat(4, 1fr); gap: .7rem; }
.otp-control input { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; cursor: text; opacity: 0; }
.otp-box { display: grid; height: 3.75rem; place-items: center; color: var(--text-strong); background: var(--surface-soft); border: 1px solid var(--border); border-radius: 1rem; font-size: 1.25rem; font-weight: 700; transition: border-color .2s ease, box-shadow .2s ease; }
.otp-control:focus-within .otp-box { border-color: color-mix(in srgb, var(--primary) 38%, var(--border)); }
.otp-box.filled { color: var(--primary); background: color-mix(in srgb, var(--primary) 6%, var(--surface-soft)); border-color: color-mix(in srgb, var(--primary) 42%, var(--border)); }
.otp-meta { display: flex; min-height: 2rem; align-items: center; justify-content: space-between; margin-top: .65rem; color: var(--text-muted); font-size: .68rem; }
.otp-timer { direction: ltr; color: var(--primary); font-weight: 700; font-variant-numeric: tabular-nums; }
.resend-link { padding: 0; color: var(--primary); background: transparent; border: 0; cursor: pointer; font: inherit; font-weight: 600; }
.resend-link:disabled { color: var(--text-muted); cursor: not-allowed; }
.auth-alert { display: grid; grid-template-columns: 1.7rem 1fr; gap: .7rem; margin-top: .9rem; padding: .8rem .85rem; border: 1px solid; border-radius: .9rem; }
.auth-alert-icon { display: grid; width: 1.7rem; height: 1.7rem; place-items: center; color: currentColor; border: 1px solid currentColor; border-radius: 50%; font-size: .75rem; font-weight: 800; }
.auth-alert strong { display: block; margin-bottom: .2rem; color: currentColor; font-size: .72rem; }
.auth-alert p { margin: 0; color: var(--text); font-size: .68rem; line-height: 1.75; }
.auth-alert-error { color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); border-color: color-mix(in srgb, var(--danger) 28%, var(--border)); }
.auth-alert-warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 9%, var(--surface)); border-color: color-mix(in srgb, var(--warning) 30%, var(--border)); }
.mock-scenarios { margin-top: 1.2rem; color: var(--text-muted); font-size: .64rem; }
.mock-scenarios summary { width: fit-content; margin-inline: auto; color: var(--text-muted); cursor: pointer; }
.mock-scenarios p { margin: .55rem 0 0; padding: .7rem .8rem; background: var(--surface-soft); border: 1px dashed var(--border); border-radius: .75rem; line-height: 1.8; }
.mock-scenarios bdi { color: var(--primary); font-weight: 700; }
@keyframes auth-spin { to { transform: rotate(360deg); } }
@media (max-width: 560px) { .auth-logo { margin-bottom: 2.2rem; } .auth-card h1 { font-size: 2.35rem; } }
@media (prefers-reduced-motion: reduce) { .button-spinner { animation: none; } }