/* صفحة الدخول «وافي»: هادئة، وحركتها مرة واحدة ثم تتوقف */
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 100 900; font-display: swap; src: url("/static/fonts/noto-kufi-arabic.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 100 900; font-display: swap; src: url("/static/fonts/noto-kufi-latin.woff2") format("woff2"); unicode-range: U+0000-00FF; }
:root { color-scheme: dark; --bg: #11142A; --field: #191D38; --border: #2C3154; --ink: #DDE0EE; --muted: #8B91AE; --mark: #C9975A; --btn: #2B3157; --btn-ink: #E6E8F4; --good: #8FCFB2; --bad: #E9A0A0; }
* { box-sizing: border-box; margin: 0; }
html, body { height: 100%; background: var(--bg); color: var(--ink); font-family: "Noto Kufi Arabic", system-ui, sans-serif; }
.stage { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.box { width: min(340px, 100%); }
.head { display: flex; flex-direction: column; align-items: center; margin-bottom: 30px; }
h1 { font-size: 46px; font-weight: 600; line-height: 1.45; animation: fade 0.5s both ease-out; }
.line { width: 48px; height: 2px; margin-top: 2px; border-radius: 2px; background: var(--mark); transform-origin: right; animation: draw 0.9s 0.2s both cubic-bezier(0.2, 0.7, 0.2, 1); }
@keyframes fade { from { opacity: 0; } }
@keyframes draw { from { transform: scaleX(0); } }
form { animation: fade 0.5s 0.15s both ease-out; }
label { display: block; font-size: 13px; color: var(--muted); margin: 12px 0 7px; }
form label:first-child { margin-top: 0; }
input { width: 100%; height: 46px; padding: 0 14px; font: inherit; font-size: 15px; color: var(--ink); background: var(--field); border: 1px solid var(--border); border-radius: 10px; outline: none; transition: border-color 0.2s; }
input:focus { border-color: var(--muted); }
input.code { direction: ltr; text-align: center; letter-spacing: 2px; }
button { width: 100%; height: 46px; margin-top: 12px; font: inherit; font-size: 15px; font-weight: 500; color: var(--btn-ink); background: var(--btn); border: 0; border-radius: 10px; cursor: pointer; transition: opacity 0.2s; }
button:hover { opacity: 0.9; }
button:focus-visible { outline: 2px solid var(--muted); outline-offset: 2px; }
.alert { margin-bottom: 14px; padding: 9px 12px; font-size: 13px; line-height: 1.7; border: 1px solid var(--border); border-radius: 10px; background: var(--field); }
.alert.ok { color: var(--good); }
.alert.bad { color: var(--bad); }
.has-err, input.has-err { border-color: var(--bad); }
.ui-err { margin-top: 5px; font-size: 12.5px; color: var(--bad); }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }