/* مدرسة أجيالنا — التنسيقات المشتركة */
:root{
  --ground:#F9FAFB; --ground-2:#EEF1F5; --surface:#FFFFFF; --surface-2:#F7F9FB;
  --ink:#25272E; --ink-2:#5C6472; --ink-3:#8E97A6; --line:#E3E7ED;
  --brand:#6C2C91; --brand-ink:#6C2C91; --brand-soft:#F4E9FA;
  --sky:#4E9BD6; --sky-soft:#E8F2FB;
  --sun:#E0AE00; --sun-fill:#FFD426; --sun-soft:#FFF6D6;
  --mandarin:#E0700F; --mandarin-fill:#EE7C1B; --mandarin-soft:#FDEEDF;
  --lime:#7BA81C; --lime-fill:#A6CE39; --lime-soft:#F0F7DC;
  --danger:#CE3B43; --danger-soft:#FBE9EA;
  --shadow-s:0 1px 2px rgba(30,40,55,.05), 0 2px 8px rgba(30,40,55,.05);
  --shadow-m:0 4px 12px rgba(30,40,55,.07), 0 12px 32px rgba(30,40,55,.08);
  --shadow-l:0 -8px 40px rgba(44,32,51,.16);
  --r-s:12px; --r-m:18px; --r-l:26px; --r-xl:34px;
  --ease:cubic-bezier(.32,.72,.28,1);
  --spring:cubic-bezier(.22,1.2,.36,1);
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --ground:#111419; --ground-2:#191D24; --surface:#1E232B; --surface-2:#242A33;
    --ink:#EDF0F4; --ink-2:#A9B2C0; --ink-3:#7C8697; --line:#2D343F;
    --brand:#C482E6; --brand-ink:#D9A6F2; --brand-soft:#31203B;
    --sky:#74B7E8; --sky-soft:#1B2A38;
    --sun:#FFD94F; --sun-fill:#FFD426; --sun-soft:#33290C;
    --mandarin:#FF9A45; --mandarin-fill:#EE7C1B; --mandarin-soft:#35210E;
    --lime:#B6DB4E; --lime-fill:#A6CE39; --lime-soft:#232E11;
    --danger:#F0787E; --danger-soft:#3A1A1D;
    --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
    --shadow-m:0 4px 12px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.32);
    --shadow-l:0 -8px 40px rgba(0,0,0,.5);
  }
}
:root[data-theme="dark"]{
  --ground:#111419; --ground-2:#191D24; --surface:#1E232B; --surface-2:#242A33;
  --ink:#EDF0F4; --ink-2:#A9B2C0; --ink-3:#7C8697; --line:#2D343F;
  --brand:#C482E6; --brand-ink:#D9A6F2; --brand-soft:#31203B;
  --sky:#74B7E8; --sky-soft:#1B2A38;
  --sun:#FFD94F; --sun-fill:#FFD426; --sun-soft:#33290C;
  --mandarin:#FF9A45; --mandarin-fill:#EE7C1B; --mandarin-soft:#35210E;
  --lime:#B6DB4E; --lime-fill:#A6CE39; --lime-soft:#232E11;
  --danger:#F0787E; --danger-soft:#3A1A1D;
  --shadow-s:0 1px 2px rgba(0,0,0,.3), 0 2px 8px rgba(0,0,0,.25);
  --shadow-m:0 4px 12px rgba(0,0,0,.35), 0 12px 32px rgba(0,0,0,.32);
  --shadow-l:0 -8px 40px rgba(0,0,0,.5);
}
*,*::before,*::after{box-sizing:border-box}
body{
  margin:0; direction:rtl; background:var(--ground); color:var(--ink);
  font-family:"IBM Plex Sans Arabic",system-ui,"Segoe UI",sans-serif;
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
  min-height:100vh; display:flex; align-items:center; justify-content:center;
  padding:0; position:relative; overflow-x:hidden;
}
h1,h2,h3,.display{font-family:Tajawal,"IBM Plex Sans Arabic",sans-serif; margin:0; text-wrap:balance}
button{font:inherit; color:inherit; border:0; background:none; cursor:pointer}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:3px; border-radius:6px}

/* ---------- ambient backdrop (desktop only) ---------- */
.backdrop{position:fixed; inset:0; z-index:0; overflow:hidden; pointer-events:none}
.blob{position:absolute; border-radius:42% 58% 55% 45%/50% 45% 55% 50%; opacity:.16; filter:blur(6px); animation:drift 26s var(--ease) infinite}
.blob.b1{width:340px;height:340px;background:var(--sky);   top:-70px;  right:6%;  animation-delay:-2s}
.blob.b2{width:300px;height:300px;background:var(--sun-fill);bottom:-80px;right:22%;animation-delay:-9s}
.blob.b3{width:280px;height:280px;background:var(--lime-fill);top:14%;  left:8%;   animation-delay:-15s}
.blob.b4{width:260px;height:260px;background:var(--mandarin-fill);bottom:6%;left:16%;animation-delay:-21s}
@keyframes drift{0%,100%{transform:translate(0,0) rotate(0)}33%{transform:translate(24px,-30px) rotate(40deg)}66%{transform:translate(-20px,22px) rotate(-25deg)}}

/* ---------- phone frame ---------- */
.phone{
  position:relative; z-index:1; width:min(430px,100vw); height:min(880px,100vh);
  background:var(--ground); display:flex; flex-direction:column; overflow:hidden;
  box-shadow:var(--shadow-m);
}
@media (min-width:520px) and (min-height:900px){
  body{padding:24px}
  .phone{border-radius:38px; border:1px solid var(--line); height:860px}
}

/* ---------- brand stripe ---------- */
.stripe{display:flex; height:6px; flex:0 0 auto}
.stripe span{flex:1; transform:scaleX(0); transform-origin:right center; animation:stripeIn .7s var(--ease) forwards}
.stripe span:nth-child(1){background:var(--sky)}
.stripe span:nth-child(2){background:var(--mandarin-fill); animation-delay:.09s}
.stripe span:nth-child(3){background:var(--sun-fill); animation-delay:.18s}
.stripe span:nth-child(4){background:var(--lime-fill); animation-delay:.27s}
@keyframes stripeIn{to{transform:scaleX(1)}}

/* ---------- header ---------- */
.appbar{
  flex:0 0 auto; display:flex; align-items:center; gap:12px; padding:12px 18px 10px;
  background:var(--surface); border-bottom:1px solid var(--line);
}
.logo{
  width:46px;height:46px;border-radius:14px; background:#fff; padding:3px; flex:0 0 auto;
  box-shadow:var(--shadow-s); animation:pop .6s var(--spring) .25s both;
}
.logo img{width:100%;height:100%;object-fit:contain;border-radius:11px;display:block}
@keyframes pop{from{opacity:0;transform:scale(.6) rotate(-8deg)}to{opacity:1;transform:none}}
.appbar .who{flex:1; min-width:0; animation:riseIn .55s var(--ease) .35s both}
.appbar .who b{display:block; font-family:Tajawal; font-weight:800; font-size:16px; color:var(--brand-ink); line-height:1.3}
.appbar .who span{display:block; font-size:12.5px; color:var(--ink-3)}
.avatar{
  width:40px;height:40px;border-radius:50%; flex:0 0 auto; display:grid; place-items:center;
  background:var(--brand-soft); color:var(--brand-ink); font-family:Tajawal; font-weight:800; font-size:14px;
  animation:pop .6s var(--spring) .45s both;
}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}


/* ---------- مسار التنقل ---------- */
.rail{flex:0 0 auto; display:flex; align-items:center; gap:6px; padding:10px 18px;
  background:var(--surface); border-bottom:1px solid var(--line); overflow-x:auto; scrollbar-width:none}
.rail::-webkit-scrollbar{display:none}
.crumb{display:inline-flex; align-items:center; gap:6px; white-space:nowrap; flex:0 0 auto;
  padding:6px 12px; border-radius:999px; font-size:13px; font-weight:600;
  background:var(--ground-2); color:var(--ink-2); transition:background .2s,color .2s}
.crumb.is-active{background:var(--brand); color:#fff}
.crumb.is-link{cursor:pointer}
.crumb.is-link:hover{background:var(--brand-soft); color:var(--brand-ink)}

/* ---------- الشاشات ---------- */
.viewport{position:relative; flex:1 1 auto; overflow:hidden}
.screen{position:absolute; inset:0; overflow-y:auto; overscroll-behavior:contain;
  padding:18px 18px 32px; display:flex; flex-direction:column; gap:14px}
.screen[hidden]{display:none}
.screen.enter-fwd{animation:slideInFwd .34s var(--ease) both}
.screen.enter-back{animation:slideInBack .34s var(--ease) both}
@keyframes slideInFwd{from{opacity:0;transform:translateX(-22px)}to{opacity:1;transform:none}}
@keyframes slideInBack{from{opacity:0;transform:translateX(22px)}to{opacity:1;transform:none}}
.eyebrow{font-size:12px; font-weight:600; letter-spacing:.08em; color:var(--ink-3)}
.screen h2{font-size:23px; font-weight:900; letter-spacing:-.01em; line-height:1.25}
.screen .lede{color:var(--ink-2); font-size:13.5px}
.head{flex:0 0 auto; display:flex; flex-direction:column; gap:4px; animation:riseIn .4s var(--ease) both}
@keyframes riseIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* ---------- مكوّنات مشتركة ---------- */
.stats{flex:0 0 auto; display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.stat{padding:13px 11px; border-radius:var(--r-m); background:var(--surface); border:1px solid var(--line);
  box-shadow:var(--shadow-s); text-align:center; animation:tileIn .4s var(--ease) both;
  animation-delay:calc(var(--i,0) * 55ms)}
@keyframes tileIn{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
.stat b{display:block; font-family:Tajawal; font-size:25px; font-weight:900; line-height:1.1; color:var(--tone)}
.stat span{display:block; font-size:11px; color:var(--ink-3); margin-top:3px}

.chips{flex:0 0 auto; display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.chips::-webkit-scrollbar{display:none}
.chip{flex:0 0 auto; white-space:nowrap; padding:7px 13px; border-radius:999px; font-size:12.5px;
  font-weight:600; background:var(--ground-2); color:var(--ink-2); transition:background .2s,color .2s}
.chip.on{background:var(--brand); color:#fff}
.chip em{font-style:normal; opacity:.65; margin-inline-start:4px}

.list{flex:0 0 auto; display:flex; flex-direction:column; gap:9px}
.row-card{display:flex; align-items:center; gap:12px; width:100%; text-align:right; padding:13px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-s);
  animation:tileIn .4s var(--ease) both; animation-delay:calc(var(--i,0) * 40ms);
  transition:transform .16s var(--ease), box-shadow .16s, border-color .16s}
button.row-card:hover{transform:translateY(-2px); box-shadow:var(--shadow-m); border-color:var(--brand)}
.ini{width:42px;height:42px;border-radius:13px;flex:0 0 auto;display:grid;place-items:center;
  font-family:Tajawal;font-weight:800;font-size:13px;line-height:1;color:#fff;background:var(--tone);
  overflow:hidden;text-align:center;padding:2px}
.row-card .txt{flex:1; min-width:0}
.row-card .txt b{display:block; font-size:14.5px; font-weight:700}
.row-card .txt span{display:block; font-size:11.5px; color:var(--ink-3); margin-top:1px}
.tally{flex:0 0 auto; font-size:11.5px; font-weight:700; padding:5px 10px; border-radius:999px;
  background:var(--brand-soft); color:var(--brand-ink); white-space:nowrap}
.tally.hot{background:var(--danger-soft); color:var(--danger)}
.tally.calm{background:var(--lime-soft); color:var(--lime)}
.tally.zero{background:var(--danger-soft); color:var(--danger)}
.row-card .chev{width:16px;height:16px;color:var(--ink-3);flex:0 0 auto}

.grid{display:grid; grid-template-columns:1fr 1fr; gap:10px}
.tile{position:relative; padding:14px; border-radius:var(--r-m); background:var(--surface);
  border:1px solid var(--line); box-shadow:var(--shadow-s); text-align:right; overflow:hidden;
  animation:tileIn .4s var(--ease) both; animation-delay:calc(var(--i,0) * 45ms);
  transition:transform .16s var(--ease), box-shadow .16s, border-color .16s}
.tile:hover{transform:translateY(-2px); box-shadow:var(--shadow-m); border-color:var(--brand)}
.tile .cap{position:absolute; top:12px; left:12px; width:26px;height:26px;border-radius:9px;
  display:grid;place-items:center;font-family:Tajawal;font-weight:800;font-size:12px;color:#fff;background:var(--tone)}
.tile b{display:block; font-size:15px; font-weight:800; margin-top:20px}
.tile small{display:block; font-size:11.5px; color:var(--ink-3); margin-top:3px}

.search{flex:0 0 auto; display:flex; align-items:center; gap:8px; height:42px; padding:0 12px;
  border:1px solid var(--line); background:var(--surface); border-radius:var(--r-m)}
.search svg{width:18px;height:18px;color:var(--ink-3);flex:none}
.search input{flex:1; min-width:0; border:0; outline:0; background:none; font:inherit; color:inherit}

.qcard{display:flex; flex-direction:column; gap:8px; width:100%; text-align:right; padding:13px 14px;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--r-m); box-shadow:var(--shadow-s);
  position:relative; overflow:hidden; animation:tileIn .4s var(--ease) both;
  animation-delay:calc(var(--i,0) * 40ms); transition:transform .16s var(--ease), box-shadow .16s, border-color .16s}
button.qcard:hover{transform:translateY(-2px); box-shadow:var(--shadow-m); border-color:var(--brand)}
.qcard::before{content:""; position:absolute; inset-block:0; inset-inline-start:0; width:4px; background:var(--tone)}
.qtop{display:flex; align-items:center; gap:8px}
.badge{flex:0 0 auto; font-size:10.5px; font-weight:800; padding:4px 9px; border-radius:7px;
  background:var(--tone-soft); color:var(--tone-ink)}
.qtop .when{margin-inline-start:auto; font-size:11px; color:var(--ink-3)}
.sev{flex:0 0 auto; display:inline-flex; gap:2px; align-items:center}
.sev i{width:5px;height:5px;border-radius:50%;background:var(--line);display:block}
.sev i.f{background:var(--tone)}
.qbody{font-size:13.5px; line-height:1.65; color:var(--ink)}
.qfoot{display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-3); flex-wrap:wrap}
.qfoot b{color:var(--ink-2); font-weight:700}
.qfoot .sep{opacity:.45}
.qfoot .st{margin-inline-start:auto; font-weight:700}
.st-wait{color:var(--mandarin)} .st-sent{color:var(--lime)} .st-no{color:var(--danger)}

.who-strip{flex:0 0 auto; display:flex; align-items:center; gap:11px; padding:13px;
  background:var(--brand-soft); border-radius:var(--r-m); animation:riseIn .4s var(--ease) both}
.who-strip b{display:block; font-size:14.5px}
.who-strip span{display:block; font-size:11.5px; color:var(--ink-2); margin-top:2px}

.note-box{flex:0 0 auto; padding:15px; background:var(--surface); border:1px solid var(--line);
  border-radius:var(--r-m); box-shadow:var(--shadow-s); font-size:14.5px; line-height:1.8}
.note-box .src{display:block; font-size:10.5px; font-weight:800; letter-spacing:.06em;
  color:var(--ink-3); margin-bottom:9px}

.route{flex:0 0 auto; display:flex; flex-direction:column; gap:8px; padding:13px; border-radius:var(--r-m);
  background:var(--surface-2); border:1px solid var(--line)}
.route .rt{font-size:11px; font-weight:800; letter-spacing:.06em; color:var(--ink-3)}
.steps{display:flex; align-items:center; gap:5px; flex-wrap:wrap}
.step{display:inline-flex; align-items:center; gap:5px; padding:5px 10px; border-radius:999px;
  font-size:11.5px; font-weight:700; background:var(--ground-2); color:var(--ink-3)}
.step.done{background:var(--lime-soft); color:var(--lime)}
.step.now{background:var(--brand); color:#fff}
.steps .arrow{color:var(--ink-3); font-size:12px}

.actbar{flex:0 0 auto; display:flex; gap:8px; padding:12px 18px; background:var(--surface);
  border-top:1px solid var(--line); box-shadow:var(--shadow-l)}
.btn{flex:1; padding:12px 10px; border-radius:14px; font-weight:800; font-size:13px;
  background:var(--brand); color:#fff; box-shadow:var(--shadow-s);
  transition:transform .16s var(--spring), opacity .2s}
.btn:hover{transform:translateY(-1px)}
.btn:disabled{opacity:.42; cursor:not-allowed; transform:none}
.btn.soft{background:var(--ground-2); color:var(--ink-2); box-shadow:none}
.btn.no{background:var(--danger-soft); color:var(--danger); box-shadow:none}
.btn.slim{flex:0 0 auto; padding-inline:15px}

.veil{position:absolute; inset:0; z-index:8; background:rgba(20,26,38,.42); animation:fadeIn .2s both}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
.sheet{position:absolute; inset-inline:0; bottom:0; z-index:9; padding:18px 18px 20px; background:var(--surface);
  border-radius:var(--r-xl) var(--r-xl) 0 0; box-shadow:var(--shadow-l);
  animation:sheetUp .34s var(--spring) both; display:flex; flex-direction:column; gap:12px; max-height:88%; overflow-y:auto}
@keyframes sheetUp{from{transform:translateY(102%)}to{transform:none}}
.grabber{width:38px;height:4px;border-radius:99px;background:var(--line); align-self:center; flex:none}
.sheet h3{margin:0; font-family:Tajawal; font-size:18px; font-weight:800}
.sheet p{margin:0; font-size:12.5px; color:var(--ink-2)}
.sheet textarea, .sheet input[type=number]{font:inherit; color:inherit; width:100%; padding:11px 12px;
  border-radius:var(--r-s); border:1.5px solid var(--line); background:var(--surface-2); font-size:14px; line-height:1.6}
.sheet textarea{min-height:100px; resize:none}
.sheet textarea:focus, .sheet input:focus{outline:none; border-color:var(--brand)}
.reasons{display:flex; flex-wrap:wrap; gap:6px}
.reason{padding:8px 12px; border-radius:999px; font-size:12px; font-weight:600;
  background:var(--ground-2); color:var(--ink-2); transition:background .2s,color .2s}
.reason.on{background:var(--danger); color:#fff}
.sevpick{display:grid; grid-template-columns:repeat(5,1fr); gap:6px}
.sevpick button{padding:9px 0; border-radius:10px; font-weight:800; font-size:13px;
  background:var(--ground-2); color:var(--ink-2)}
.sevpick button.on{background:var(--mandarin-fill); color:#fff}
.sevhint{font-size:11.5px; color:var(--ink-3); line-height:1.6}

.warn{flex:0 0 auto; display:flex; gap:10px; align-items:flex-start; padding:13px 14px; border-radius:var(--r-m);
  font-size:12.5px; line-height:1.65; background:var(--sky-soft); color:var(--ink-2)}
.warn svg{width:17px;height:17px;flex:0 0 auto;margin-top:3px;color:var(--sky)}
.warn b{color:var(--ink); font-weight:800}
.warn.risk{background:var(--danger-soft)} .warn.risk svg{color:var(--danger)}

.toast{position:absolute; inset-inline:18px; bottom:18px; z-index:10; display:flex; align-items:center; gap:10px;
  padding:13px 15px; background:var(--ink); color:var(--ground); border-radius:var(--r-m);
  box-shadow:var(--shadow-m); font-size:13px; font-weight:600; animation:sheetUp .34s var(--spring) both}
.toast svg{width:18px;height:18px;color:var(--lime-fill);flex:none}
.toast.err svg{color:var(--danger)}
.empty{flex:1; display:grid; place-content:center; text-align:center; color:var(--ink-3); font-size:13px; gap:8px; padding:30px}
.empty svg{width:34px;height:34px;color:var(--lime);justify-self:center}
.stage-label{display:flex; align-items:center; gap:9px; font-size:12px; font-weight:700; color:var(--ink-3); margin-top:6px}
.stage-label::after{content:""; flex:1; height:1px; background:var(--line)}

/* ── صورة الطالب فوق حروف اسمه ── */
.face{position:relative;overflow:hidden}
.face img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  opacity:0;transition:opacity .25s var(--ease)}
.face img.in{opacity:1}

/* ورقة رفع الصورة */
.shot{display:flex;flex-direction:column;align-items:center;gap:12px}
.shot .big{width:140px;height:140px;border-radius:50%;overflow:hidden;position:relative;
  background:var(--sky-soft);border:3px solid var(--surface);box-shadow:var(--shadow-m);
  display:grid;place-items:center;font-family:Tajawal;font-weight:800;font-size:34px;color:var(--brand)}
.shot .big img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .hint{font-size:12px;color:var(--ink-3);text-align:center;line-height:1.7;margin:0}
.shot .acts{display:flex;gap:8px;width:100%}
.shot input[type=file]{display:none}
.pill-cam{position:absolute;inset-inline-start:-4px;inset-block-end:-4px;width:26px;height:26px;
  border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;
  border:2px solid var(--surface);box-shadow:var(--shadow-s)}
.pill-cam svg{width:13px;height:13px}