/* صفحة الدخول — قائمةٌ بنفسها ولا تحمّل أنماط التطبيق كلّها،
   فهي أوّل ما يُفتح وعلى شبكةٍ قد تكون بطيئة. */
:root {
  --bg:#f4f7f5; --panel:#fff; --ink:#0f1f1b; --ink-2:#5b716c;
  --line:#dfe8e4; --brand:#0f766e; --brand-ink:#fff;
  --red:#b42318; --red-bg:#fef3f2; --ok:#047857; --ok-bg:#ecfdf5;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg:#0a1412; --panel:#101d1a; --ink:#e6f0ed; --ink-2:#93a9a4;
    --line:#1f312d; --brand:#5eead4; --brand-ink:#08201c;
    --red:#fda29b; --red-bg:#2b1512; --ok:#6ee7b7; --ok-bg:#0f2a20;
  }
}
* { box-sizing:border-box; }
body {
  margin:0; min-height:100dvh; display:grid; place-items:center; padding:24px;
  background:var(--bg); color:var(--ink);
  font-family:"Segoe UI","Noto Sans Arabic",Tahoma,system-ui,sans-serif;
  line-height:1.6;
}
.wrap { width:100%; max-width:380px; }
.brand { display:flex; gap:12px; align-items:center; margin-bottom:22px; }
.mark {
  width:44px; height:44px; flex:0 0 44px; border-radius:13px;
  background:var(--brand); color:var(--brand-ink);
  display:grid; place-items:center; font-size:22px; font-weight:700;
}
.brand h1 { margin:0; font-size:19px; }
.brand p  { margin:1px 0 0; font-size:12.5px; color:var(--ink-2); }

.card {
  background:var(--panel); border:1px solid var(--line); border-radius:16px;
  padding:22px; display:flex; flex-direction:column; gap:14px;
  box-shadow:0 1px 2px rgb(0 0 0/.04), 0 16px 40px -28px rgb(0 0 0/.35);
}
.card h2 { margin:0 0 2px; font-size:16px; }
label { display:flex; flex-direction:column; gap:6px; }
[hidden] { display:none !important; }
label span { font-size:12.5px; font-weight:650; color:var(--ink-2); }
input {
  font:inherit; color:var(--ink); background:var(--bg);
  border:1px solid var(--line); border-radius:10px; padding:11px 13px; width:100%;
}
input:focus-visible, button:focus-visible {
  outline:2px solid var(--brand); outline-offset:2px;
}
button {
  font:inherit; font-weight:650; cursor:pointer; margin-top:2px;
  background:var(--brand); color:var(--brand-ink);
  border:0; border-radius:10px; padding:12px;
}
button[disabled] { opacity:.65; cursor:default; }
button.lang { background:transparent; color:var(--brand); border:1px solid var(--line); padding:7px 12px; font-size:13px; justify-self:center; }

.msg { margin:0; font-size:13.5px; padding:9px 12px; border-radius:10px; }
.msg.bad { background:var(--red-bg); color:var(--red); }
.msg.ok  { background:var(--ok-bg);  color:var(--ok); }
.hint { margin:2px 0 0; font-size:12px; color:var(--ink-2); }