:root { --blue: #1540E5; --ink: #101828; --line: #D0D5DD; --bg: #F2F4F7; --red: #D92D20; }
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; }
body { background: var(--bg); color: var(--ink); font-family: -apple-system, "SF Arabic", "Segoe UI", Tahoma, sans-serif; -webkit-text-size-adjust: 100%; }
[hidden] { display: none !important; }
.screen { min-height: 100%; display: flex; align-items: center; justify-content: center; padding: 24px; }
.card { width: 100%; max-width: 420px; background: #fff; border-radius: 20px; padding: 32px; box-shadow: 0 8px 30px rgba(16, 24, 40, .08); display: flex; flex-direction: column; }
h1 { margin: 0 0 24px; font-size: 26px; text-align: center; }
label { font-size: 16px; margin: 0 0 8px; }
input { height: 54px; border: 1.5px solid var(--line); border-radius: 12px; padding: 0 16px; font-size: 18px; margin: 0 0 18px; outline: none; background: #fff; color: var(--ink); }
input:focus { border-color: var(--blue); }
button { height: 56px; border: 0; border-radius: 12px; background: var(--blue); color: #fff; font-size: 19px; font-weight: 600; font-family: inherit; }
button:disabled { opacity: .55; }
button.plain { background: #fff; color: var(--ink); border: 1.5px solid var(--line); }
.msg { min-height: 22px; margin: 0 0 14px; color: var(--red); font-size: 15px; text-align: center; }