@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:400;font-display:optional;src:url(/fonts/plex-sans-latin-400.3b646991.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plex-sans-latin-700.42e7b0c1.woff2) format("woff2");unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:400;font-display:optional;src:url(/fonts/plex-sans-arabic-400.6010e7fd.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"IBM Plex Sans Arabic";font-style:normal;font-weight:700;font-display:swap;src:url(/fonts/plex-sans-arabic-700.04c730b4.woff2) format("woff2");unicode-range:U+0600-06FF,U+0750-077F,U+0870-088E,U+0890-0891,U+0897-08E1,U+08E3-08FF,U+200C-200E,U+2010-2011,U+204F,U+2E41,U+FB50-FDFF,U+FE70-FE74,U+FE76-FEFC}
@font-face{font-family:"Plex Fallback";src:local("Arial");size-adjust:103%;ascent-override:102%;descent-override:27%;line-gap-override:0%}
@font-face{font-family:"Plex Arabic Fallback";src:local("Tahoma");size-adjust:100%;line-gap-override:0%}
:root{color-scheme:light dark;--bg:#fbfaf7;--surface:#ffffff;--fg:#1b1d21;--muted:#555b66;--accent:#1d5c4f;--accent-ink:#ffffff;--accent-soft:#e6f0ec;--edge:#8f8a7c;--line:#e3e0d8;--danger:#a4262c;--danger-soft:#fbeaea;--font:"IBM Plex Sans","Plex Fallback",system-ui,-apple-system,"Segoe UI",sans-serif;--font-ar:"IBM Plex Sans Arabic","Plex Arabic Fallback","IBM Plex Sans","Plex Fallback",Tahoma,sans-serif;--mono:ui-monospace,SFMono-Regular,Menlo,monospace}
@media(prefers-color-scheme:dark){:root{--bg:#15171a;--surface:#1c1f23;--fg:#ecebe6;--muted:#a8adb6;--accent:#7cc8b4;--accent-ink:#0f1513;--accent-soft:#1d2a27;--edge:#6b717b;--line:#2c3036;--danger:#ff9aa0;--danger-soft:#3a1d20}}
*{box-sizing:border-box}
html{background:var(--bg)}
body{margin:0;min-block-size:100vh;display:grid;place-items:center;padding:1rem;background:var(--bg);color:var(--fg);font:400 1.0625rem/1.6 var(--font);overflow-wrap:anywhere}
:lang(ar){font-family:var(--font-ar);line-height:1.8}
main{inline-size:min(100%,26rem);background:var(--surface);border:1px solid var(--line);border-radius:1.25rem;padding:2rem;display:grid;gap:1rem}
h1{margin:0;font-size:1.5rem;line-height:1.3}
h2{margin:0;font-size:1.25rem}
p{margin:0}
a{color:var(--accent);text-underline-offset:.18em}
.brand{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.logo{display:inline-flex;align-items:center;gap:.5rem;font-weight:700;color:var(--fg);text-decoration:none}
.lang{font-size:.9375rem}
form{display:grid;gap:1rem}
.field{display:grid;gap:.375rem}
label{font-weight:600}
input{inline-size:100%;padding:.75rem;border:1px solid var(--edge);border-radius:.5rem;background:var(--surface);color:var(--fg);font:inherit}
input[aria-invalid=true]{border-color:var(--danger)}
input#code{font-family:var(--mono);font-size:1.5rem;letter-spacing:.4em;text-align:center}
.pw{display:flex;gap:.5rem}
.pw input{flex:1;min-inline-size:0}
button{padding:.75rem 1rem;border:1px solid var(--edge);border-radius:.5rem;background:var(--surface);color:var(--fg);font:inherit;font-weight:600;cursor:pointer}
button.primary{border-color:var(--accent);background:var(--accent);color:var(--accent-ink);font-weight:700}
button.link{border:0;background:none;color:var(--accent);padding:.25rem 0;text-decoration:underline}
button:disabled{opacity:.6;cursor:not-allowed}
.reveal{font-size:.875rem;white-space:nowrap}
.row{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.hint{color:var(--muted);font-size:.9375rem}
.err{color:var(--danger);font-size:.9375rem}
.summary{background:var(--danger-soft);color:var(--danger);border:1px solid var(--danger);border-radius:.5rem;padding:.75rem 1rem}
.summary ul{margin:0;padding-inline-start:1.25rem}
.status{min-block-size:1.5rem;color:var(--muted)}
[hidden]{display:none!important}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
@media(prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important;scroll-behavior:auto!important}}