/* Lectivo — صفحات التسجيل (المدرّسون والطلاب). نفس نظام الموقع: سبعة ألوان، حواف ناعمة،
   بطاقات بيضاء على البيج، والذهبي علامة لا كلمة على أرضية فاتحة. */
@font-face{font-family:"Thmanyah Sans";src:url("/fonts/thmanyah-sans-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Thmanyah Sans";src:url("/fonts/thmanyah-sans-700.woff2") format("woff2");font-weight:700;font-display:swap}
@font-face{font-family:"Schibsted Grotesk";src:url("/fonts/schibsted-grotesk-latin-var.woff2") format("woff2");font-weight:400 700;font-display:swap}

:root{
  --white:#FFFFFF;--beige:#EFE7DA;--beige-dp:#E3D8C6;--maroon:#6E1B2C;--maroon-dk:#47111D;
  --black:#0F0D0D;--gold:#B08D4F;--ink-2:#514A46;
  --ok:#27512c;--ok-bg:#e4ece4;--warn:#8a3a12;--warn-bg:#f6e7dd;
  --r-sm:14px;--r-md:20px;--r-lg:28px;--r-xl:36px;--r-pill:999px;
  --sh-1:0 2px 6px -2px rgba(71,17,29,.07),0 8px 20px -12px rgba(71,17,29,.13);
  --sh-2:0 4px 12px -4px rgba(71,17,29,.08),0 18px 40px -18px rgba(71,17,29,.18);
  --sh-brand:0 6px 16px -6px rgba(110,27,44,.42),0 18px 34px -18px rgba(110,27,44,.34);
  --ring:inset 0 0 0 1px rgba(71,17,29,.08);
  --ar:"Thmanyah Sans","SF Arabic","Geeza Pro",system-ui,sans-serif;
  --lat:"Schibsted Grotesk",system-ui,sans-serif;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:var(--beige);color:var(--black);font:16px/1.85 var(--ar);direction:rtl;overflow-x:clip}
body::before{content:"";position:fixed;z-index:-1;pointer-events:none;inline-size:80vmax;block-size:80vmax;border-radius:50%;
  inset-block-start:-38vmax;inset-inline-end:-30vmax;background:radial-gradient(circle,rgba(110,27,44,.09),rgba(110,27,44,0) 62%)}
body::after{content:"";position:fixed;z-index:-1;pointer-events:none;inline-size:64vmax;block-size:64vmax;border-radius:50%;
  inset-block-end:-30vmax;inset-inline-start:-26vmax;background:radial-gradient(circle,rgba(176,141,79,.12),rgba(176,141,79,0) 62%)}
.num,.lat{font-family:var(--lat);direction:ltr;unicode-bidi:isolate}
button{font:inherit;cursor:pointer}
button[disabled]{opacity:.55;cursor:default}

main{max-inline-size:640px;margin:0 auto;padding:26px 18px 64px}
.top{text-align:center;margin-block-end:26px}
.top a{display:inline-block;line-height:0;color:var(--maroon)}
.logo{inline-size:126px;block-size:auto;display:block}
.rule{inline-size:44px;block-size:3px;border-radius:var(--r-pill);background:var(--gold);margin:14px auto 0}

.intro{text-align:center;margin-block-end:22px}
.eyebrow{display:inline-flex;align-items:center;gap:9px;font-size:13px;color:var(--ink-2);margin:0 0 6px}
.eyebrow::before{content:"";inline-size:7px;block-size:7px;background:var(--gold);transform:rotate(45deg)}
h1{font-size:clamp(28px,7vw,40px);line-height:1.3;color:var(--maroon);margin:0 0 10px;text-wrap:balance}
.lead{margin:0 auto;max-inline-size:44ch;color:var(--ink-2);font-size:16px}

.card{background:var(--white);border-radius:var(--r-xl);box-shadow:var(--sh-2),var(--ring);padding:26px 22px}
.step+.step{margin-block-start:26px;padding-block-start:24px;border-block-start:1px solid rgba(71,17,29,.07)}
.step__h{display:flex;align-items:center;gap:12px;margin:0 0 14px}
.step__n{inline-size:32px;block-size:32px;flex:none;display:grid;place-items:center;border-radius:var(--r-pill);
  background:var(--beige);color:var(--maroon);font:700 14px/1 var(--lat);transition:background .2s,color .2s}
.step.is-done .step__n{background:var(--maroon);color:var(--beige)}
.step__t{margin:0;font-size:19px;line-height:1.35;color:var(--maroon)}
.step__hint{margin:-8px 0 14px;font-size:13px;color:var(--ink-2)}

.field{display:grid;gap:6px;margin-block-end:14px}
.field:last-child{margin-block-end:0}
.field label{font-size:14px;color:var(--ink-2)}
.input{inline-size:100%;border:0;border-radius:var(--r-sm);background:var(--beige);color:var(--black);
  padding:14px 16px;font:inherit;font-size:16px;box-shadow:var(--ring)}
.input::placeholder{color:rgba(81,74,70,.62)}
.input:focus-visible{outline:2px solid var(--maroon);outline-offset:2px}
.input.num{text-align:left}
.hint{font-size:12.5px;color:var(--ink-2)}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inline-size:1px;block-size:1px;pointer-events:none}
.chip span{display:inline-block;border-radius:var(--r-pill);background:var(--beige);color:var(--black);
  padding:10px 18px;font-size:15px;line-height:1.3;box-shadow:var(--ring);cursor:pointer;user-select:none;
  transition:background .15s,color .15s,transform .15s,box-shadow .15s}
.chip span:hover{transform:translateY(-1px);box-shadow:var(--sh-1),var(--ring)}
.chip input:checked+span{background:var(--maroon);color:var(--beige);box-shadow:var(--sh-brand)}
.chip input:focus-visible+span{outline:2px solid var(--maroon);outline-offset:2px}
.chips--sm .chip span{padding:8px 15px;font-size:14px}

.group{margin-block-start:18px}
.group:first-of-type{margin-block-start:0}
.group__t{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:var(--maroon);margin:0 0 10px}
.group__t small{font-weight:400;color:var(--ink-2)}
.clinical{background:rgba(110,27,44,.035);border-radius:var(--r-lg);padding:16px;margin-block-start:18px;
  box-shadow:inset 0 0 0 1px rgba(110,27,44,.08)}
.clinical .group__t{margin-block-start:0}

.adder{display:flex;gap:8px}
.adder .input{flex:1;min-inline-size:0}
.add-btn{flex:none;border:0;border-radius:var(--r-pill);background:var(--white);color:var(--maroon);
  box-shadow:inset 0 0 0 1.5px rgba(110,27,44,.34);padding:0 18px;font-weight:700;font-size:15px;white-space:nowrap}
.add-btn:hover{background:var(--maroon);color:var(--beige);box-shadow:none}
.tags{display:flex;flex-wrap:wrap;gap:8px;margin-block-start:10px}
.tags:empty{display:none}
.tag{display:inline-flex;align-items:center;gap:4px;border-radius:var(--r-pill);background:var(--maroon);color:var(--beige);
  padding:6px 8px 6px 14px;font-size:14px}
.tag button{border:0;background:rgba(239,231,218,.18);color:var(--beige);inline-size:24px;block-size:24px;border-radius:50%;
  font:700 15px/1 var(--lat);display:grid;place-items:center}
.tag button:hover{background:rgba(239,231,218,.34)}

.hp{position:absolute;inset-inline-start:-9999px;inline-size:1px;block-size:1px;overflow:hidden}

.send{margin-block-start:26px;display:grid;gap:10px;justify-items:center;text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:var(--r-pill);
  background:var(--maroon);color:var(--beige);padding:16px 34px;font-weight:700;font-size:16px;text-decoration:none;
  box-shadow:var(--sh-brand);transition:background .15s,transform .15s}
.btn:hover:not([disabled]){background:var(--maroon-dk);transform:translateY(-2px)}
.btn--block{inline-size:min(100%,380px)}
.btn--ghost{background:transparent;color:var(--maroon);box-shadow:inset 0 0 0 1.5px rgba(110,27,44,.34)}
.btn--ghost:hover:not([disabled]){background:var(--maroon);color:var(--beige)}
.btn--sm{padding:9px 16px;font-size:13.5px;font-weight:700}
.privacy{font-size:13px;color:var(--ink-2);margin:0}
.msg{inline-size:100%;border-radius:var(--r-md);padding:12px 16px;font-size:14.5px;text-align:center;margin:0}
.msg--bad{background:var(--warn-bg);color:var(--warn)}

.done{text-align:center;padding-block:40px}
.done__mark{inline-size:64px;block-size:64px;margin:0 auto 18px;border-radius:50%;background:var(--ok-bg);display:grid;place-items:center}
.done__mark svg{inline-size:30px;block-size:30px;stroke:var(--ok);fill:none;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.done h2{font-size:28px;color:var(--maroon);margin:0 0 8px}
.done p{margin:0 auto 22px;max-inline-size:36ch;color:var(--ink-2)}

footer{text-align:center;margin-block-start:28px;font-size:13px;color:var(--ink-2)}
footer a{color:inherit;text-decoration:none}

/* ---------------- /admin ---------------- */
.gate{max-inline-size:360px;margin:12vh auto 0;text-align:center}
.gate h1{font-size:24px}
.gate .input{text-align:center;font-family:var(--lat);letter-spacing:.3em;font-size:22px}
.gate .btn{inline-size:100%;margin-block-start:12px}
.bar{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-block-end:18px}
.bar h1{font-size:24px;margin:0}
.bar .sp{margin-inline-start:auto}
.count{font:700 13px/1 var(--lat);background:var(--white);color:var(--maroon);border-radius:var(--r-pill);padding:6px 12px;box-shadow:var(--ring)}
.seg{display:inline-flex;background:var(--white);border-radius:var(--r-pill);padding:4px;box-shadow:var(--ring);gap:2px}
.seg button{border:0;background:none;border-radius:var(--r-pill);padding:7px 14px;font-size:13.5px;color:var(--ink-2)}
.seg button[aria-pressed="true"]{background:var(--maroon);color:var(--beige);font-weight:700}
.apps{display:grid;gap:14px}
.app{background:var(--white);border-radius:var(--r-lg);box-shadow:var(--sh-1),var(--ring);padding:20px}
.app__h{display:flex;align-items:flex-start;gap:10px;flex-wrap:wrap;margin-block-end:12px}
.app__name{margin:0;font-size:19px;color:var(--maroon);line-height:1.35}
.app__date{font-size:12.5px;color:var(--ink-2)}
.app__h .sp{margin-inline-start:auto}
.badge{display:inline-block;border-radius:var(--r-pill);padding:3px 12px;font-size:12px;font-weight:700;white-space:nowrap}
.badge--new{background:var(--beige-dp);color:var(--maroon)}
.badge--ok{background:var(--ok-bg);color:var(--ok)}
.kv{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 14px;font-size:14.5px}
.kv dt{color:var(--ink-2)}
.kv dd{margin:0;font-weight:700}
.kv a{color:var(--maroon)}
.pills{display:flex;flex-wrap:wrap;gap:6px}
.pill{display:inline-block;background:var(--beige);border-radius:var(--r-pill);padding:3px 11px;font-size:13px;font-weight:400}
.app__acts{display:flex;gap:8px;flex-wrap:wrap;padding-block-start:14px;border-block-start:1px solid rgba(71,17,29,.07)}
.app__acts .del{margin-inline-start:auto;color:var(--warn);box-shadow:inset 0 0 0 1px rgba(138,58,18,.4)}
.app__acts .del:hover{background:var(--warn);color:var(--white);box-shadow:none}
.empty{text-align:center;padding:48px 20px;color:var(--ink-2)}
.tcode{font-family:var(--lat);font-size:13px;background:var(--beige-dp);color:var(--maroon);
  border-radius:var(--r-pill);padding:3px 11px;letter-spacing:.04em}
.toast{position:fixed;inset-block-end:18px;inset-inline:0;margin:0 auto;inline-size:max-content;max-inline-size:90vw;
  background:var(--maroon-dk);color:var(--beige);border-radius:var(--r-pill);padding:10px 20px;font-size:14px;box-shadow:var(--sh-2);z-index:9}

@media (max-width:480px){
  main{padding:20px 12px 56px}
  .card{padding:22px 16px;border-radius:var(--r-lg)}
  .kv{grid-template-columns:1fr;gap:2px}
  .kv dd{margin-block-end:8px}
}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}