@font-face{font-family:'Cairo';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cairo-arabic-600-normal.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:'Cairo';font-style:normal;font-weight:600;font-display:swap;src:url(assets/fonts/cairo-latin-600-normal.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:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/cairo-arabic-700-normal.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:'Cairo';font-style:normal;font-weight:700;font-display:swap;src:url(assets/fonts/cairo-latin-700-normal.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:swap;src:url(assets/fonts/ibm-plex-sans-arabic-arabic-400-normal.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:400;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-latin-400-normal.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:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-arabic-500-normal.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:500;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-latin-500-normal.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:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-arabic-600-normal.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:600;font-display:swap;src:url(assets/fonts/ibm-plex-sans-arabic-latin-600-normal.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}

:root{--g0:#12301A;--g1:#1B4D2B;--g2:#2F6B3A;--sage:#7FA27A;--cream:#efebdf;--ink:#14281A;--muted:#4C6354;--clay:#8A4B3A;--ease:cubic-bezier(.2,.7,.2,1)}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{min-height:100vh;display:flex;flex-direction:column;background:var(--cream);color:var(--ink);font:400 1.02rem/1.8 'IBM Plex Sans Arabic',system-ui,sans-serif;overflow-x:hidden;animation:in .8s var(--ease) both}
@keyframes in{from{opacity:0;transform:translateY(8px)}}
.deco{position:absolute;top:0;left:0;right:0;height:0;pointer-events:none;z-index:0}
.c{position:absolute;top:0;width:clamp(120px,22vw,250px);height:auto;animation:sway 14s ease-in-out infinite alternate;transform-origin:top left}
.tl{left:0}.tr{right:0;transform:scaleX(-1);animation-name:sway2;transform-origin:50% 0}
@keyframes sway{to{transform:rotate(2.5deg)}}@keyframes sway2{from{transform:scaleX(-1) rotate(0)}to{transform:scaleX(-1) rotate(2.5deg)}}
main{position:relative;z-index:1;flex:1;width:min(620px,100% - 2rem);margin:clamp(1.2rem,4vh,2.5rem) auto 2.5rem}
.hero{text-align:center;margin-bottom:1.8rem}
.brand{display:flex;justify-content:center;align-items:center;gap:1rem}
.logo{width:clamp(110px,26vw,150px);height:auto}
.college{height:clamp(70px,18vw,100px);width:auto;max-width:40vw;object-fit:contain}
.vr{width:1px;height:70px;background:var(--sage)}
[hidden]{display:none!important}
.kicker{margin-top:.4rem;font:600 .95rem Cairo,sans-serif;color:var(--g2)}
h1{margin-top:.2rem;font:700 clamp(2rem,6.5vw,3rem)/1.35 Cairo,sans-serif;color:var(--g1)}
.desc{margin:.8rem auto 0;max-width:42ch;color:var(--muted);line-height:1.9}
.card{background:rgba(255,255,255,.62);border:1px solid rgba(127,162,122,.55);border-radius:18px;box-shadow:0 18px 40px -24px rgba(27,77,43,.5);padding:clamp(1.2rem,4vw,1.9rem)}
label{display:block;margin-bottom:.55rem;font-weight:600;color:var(--g2)}
.field{position:relative}
.field svg{position:absolute;inset-inline-start:1rem;top:50%;width:20px;translate:0 -50%;color:var(--g2);pointer-events:none}
input{width:100%;min-height:54px;padding:0 3rem;background:#fff;border:1px solid var(--sage);border-radius:12px;color:var(--ink);font:500 1.05rem 'IBM Plex Sans Arabic',sans-serif;text-align:start;transition:.25s}
input::placeholder{color:#7d8f82}
input:focus{outline:0;border-color:var(--g1);box-shadow:0 0 0 3px rgba(47,107,58,.22)}
input[aria-invalid=true]{border-color:var(--clay)}
.hint{min-height:1.5rem;margin:.4rem 0 .6rem;font-size:.9rem;color:var(--clay)}
button[type=submit]{width:100%;min-height:54px;display:flex;align-items:center;justify-content:center;gap:.7rem;border:1px solid var(--sage);border-radius:99px;background:linear-gradient(90deg,var(--g0),var(--g2),var(--g0));color:var(--cream);font:700 1.1rem Cairo,sans-serif;cursor:pointer;box-shadow:0 12px 24px -14px var(--g0);transition:transform .25s var(--ease),box-shadow .25s,filter .25s}
button[type=submit]:hover{transform:translateY(-2px);filter:brightness(1.12);box-shadow:0 18px 28px -14px var(--g0)}
button:focus-visible{outline:2px solid var(--g1);outline-offset:3px}
button[disabled]{cursor:progress;filter:saturate(.6)}
.spin{display:none;width:18px;height:18px;border:2px solid rgba(239,235,223,.35);border-top-color:var(--cream);border-radius:50%;animation:rot .8s linear infinite}
.loading .spin{display:block}
@keyframes rot{to{rotate:1turn}}
.result{margin-top:1.4rem;padding:clamp(1.2rem,4vw,1.9rem);border-radius:18px;background:rgba(255,255,255,.7);border:1px solid rgba(127,162,122,.6);box-shadow:0 18px 40px -24px rgba(27,77,43,.5);animation:pop .6s var(--ease) both}
@keyframes pop{from{opacity:0;transform:translateY(12px) scale(.98)}}
.status{display:flex;align-items:center;justify-content:center;gap:.8rem;min-height:56px;padding:0 1.2rem;border-radius:99px;border:1px solid var(--sage);color:var(--cream);background:linear-gradient(90deg,var(--g0),var(--g2),var(--g0))}
.no .status{background:linear-gradient(90deg,#4a2418,var(--clay),#4a2418)}
.err .status{background:linear-gradient(90deg,#33403a,#5a6a5f,#33403a)}
.status .ic{width:34px;height:34px;flex:none;border-radius:50%;background:var(--cream);color:var(--g1);display:grid;place-items:center}
.no .ic{color:var(--clay)}.err .ic{color:#4a5a50}
.ic svg{width:20px}
.ok .ic{animation:ring 2.4s ease-out 1}
@keyframes ring{0%{box-shadow:0 0 0 0 rgba(239,235,223,.7)}100%{box-shadow:0 0 0 14px transparent}}
.status h2{font:700 1.15rem Cairo,sans-serif}
.msg{margin-top:1rem;text-align:center}
.member{display:grid;grid-template-columns:112px 1fr;gap:1.4rem;margin-top:1.4rem;padding-top:1.4rem;border-top:1px solid rgba(127,162,122,.55)}
.photo{width:112px;height:143px;border-radius:12px;border:2px solid var(--g1);overflow:hidden;background:#e1dbc9;display:grid;place-items:center;font:700 2.2rem Cairo,sans-serif;color:var(--g1)}
.photo img{width:100%;height:100%;object-fit:cover}
dl{display:grid;gap:.6rem;align-content:start}
dl>div{border-bottom:1px solid var(--sage);padding-bottom:.3rem}
dt{font-size:.8rem;font-weight:600;color:var(--g2)}dd{font-weight:600;overflow-wrap:anywhere}
dd.name{font:700 1.35rem/1.45 Cairo,sans-serif}
dd.id{direction:rtl;unicode-bidi:isolate}
.active{color:var(--g2)}
.again{width:100%;min-height:48px;margin-top:1.4rem;background:transparent;border:1px solid var(--g1);border-radius:99px;color:var(--g1);font:700 1rem Cairo,sans-serif;cursor:pointer;transition:background .25s,transform .25s var(--ease)}
.again:hover{background:rgba(27,77,43,.09);transform:translateY(-1px)}
.again:focus-visible{outline:2px solid var(--g1);outline-offset:3px}
footer{position:relative;z-index:1}
.wave{display:block;width:100%;height:clamp(34px,6vw,60px)}
.fin{background:var(--g1);color:var(--cream);text-align:center;padding:.4rem 1rem 1.8rem;font-size:.9rem;line-height:1.8}
.fin p+p{color:#c9d3c5}
@media(max-width:520px){.member{grid-template-columns:1fr;justify-items:center;text-align:center}.status h2{font-size:1.02rem}}
@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important}}