/* The look of the sign-in page (public/signin/index.html), for the pages of the sign-up flow (AUTH step 2): the quiz's own colours and its IBM Plex Sans Arabic, the fonts beside this file. */
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(fonts/plex-arabic-400-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+FE70-FEFC}
@font-face{font-family:"Plex";font-weight:400;font-display:swap;src:url(fonts/plex-arabic-400-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(fonts/plex-arabic-600-arabic.woff2) format("woff2");unicode-range:U+0600-06FF,U+FE70-FEFC}
@font-face{font-family:"Plex";font-weight:600;font-display:swap;src:url(fonts/plex-arabic-600-latin.woff2) format("woff2");unicode-range:U+0000-00FF,U+2000-206F}
:root{--paper:#0c0e11;--card:#12151a;--raised:#181c23;--ink:#e9ebef;--muted:#9aa3ae;--line:#262b34;--line2:#363c47;--accent:#8b8cf8;--accent-soft:rgba(139,140,248,.12);--good:#4cc27a;--bad:#ef7a62;--grid:rgba(148,163,184,.055)}
*{box-sizing:border-box;margin:0}
[hidden]{display:none!important}
html{background:var(--paper);-webkit-text-size-adjust:100%}
body{min-height:100vh;background:var(--paper);color:var(--ink);font:400 16px/1.6 "Plex",system-ui,sans-serif;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);background-size:24px 24px;
  display:flex;flex-direction:column;align-items:center;padding:56px 16px 24px}
.card{width:100%;max-width:380px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:24px 20px}
h1{font-size:22px;font-weight:600;margin-bottom:4px}
label{display:block;font-size:14px;color:var(--muted);margin:14px 0 6px}
.field{display:flex;align-items:center;direction:ltr;min-height:48px;border:1px solid var(--line2);background:var(--raised);border-radius:10px}
.field:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.field input{flex:1;min-width:0;min-height:46px;border:0;background:transparent;color:var(--ink);font:inherit;font-size:17px;padding:0 14px;outline:0;border-radius:10px;text-align:left}
.go{display:block;width:100%;min-height:50px;margin-top:20px;border:0;border-radius:10px;background:var(--accent);color:#0c0e11;font:inherit;font-weight:600;font-size:17px;cursor:pointer;text-align:center;text-decoration:none;line-height:50px}
.go:focus-visible,a:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.hint{margin-top:6px;font-size:13px;color:var(--muted)}
.err{margin-top:6px;font-size:14px;color:var(--bad)}
.note{margin-top:12px;font-size:16px}
.cf-turnstile{margin-top:16px}
.msg{margin-top:16px;font-size:15px;text-align:center}
.msg.bad{color:var(--bad)}
.msg.good{color:var(--good)}
.small{margin-top:16px;font-size:14px;color:var(--muted);text-align:center}
.small a{display:inline-block;min-height:44px;line-height:44px;color:var(--accent)}
@media (min-width:900px){body{padding-top:120px}}