:root{
  --bg:#F5F9F6;
  --bg-2:#EAF3ED;
  --surface:#FFFFFF;
  --surface-2:#F0F6F2;
  --ink:#123326;
  --ink-soft:#3F5B4E;
  --muted:#7C9187;
  --line:#DEEAE2;
  --primary:#0F3D2E;
  --primary-600:#17553F;
  --accent:#2F7A56;
  --cyan:#0E7C93;
  --gold:#D99B2B;
  --coral:#C0392B;
  --mint:#DCEFE4;
  --radius-lg:24px;
  --radius-md:16px;
  --radius-sm:12px;
  --shadow-sm:0 1px 2px rgba(18,51,38,.06), 0 4px 12px rgba(18,51,38,.05);
  --shadow-md:0 10px 30px rgba(18,51,38,.10), 0 2px 6px rgba(18,51,38,.06);
  --shadow-clay:0 12px 28px rgba(18,51,38,.10), inset 0 1px 0 rgba(255,255,255,.9);
  --font-body:"Noto Sans Arabic",system-ui,-apple-system,sans-serif;
  --font-head:"Noto Naskh Arabic","Noto Sans Arabic",serif;
  --ease:cubic-bezier(.22,1,.36,1);
}
*,*::before,*::after{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
  font-family:var(--font-body);
  background:
    radial-gradient(900px 500px at 88% -8%, #DBEFE2 0%, transparent 60%),
    radial-gradient(700px 420px at -10% 12%, #E4F1F4 0%, transparent 55%),
    var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  min-height:100vh;
}
h1,h2,h3{font-family:var(--font-head);margin:0;line-height:1.35;letter-spacing:0}
p{margin:0}
button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit}
.muted{color:var(--muted);font-size:12.5px}
.ic{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round;flex:none}
.app{max-width:860px;margin:0 auto;padding:0 16px 96px}

/* ---------- الشريط العلوي ---------- */
.topbar{
  position:sticky;top:0;z-index:40;
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:14px 16px;margin:0 -16px 14px;
  background:rgba(245,249,246,.78);
  backdrop-filter:blur(14px) saturate(140%);
  -webkit-backdrop-filter:blur(14px) saturate(140%);
  border-bottom:1px solid rgba(222,234,226,.9);
}
.brand{display:flex;align-items:center;gap:11px;min-width:0}
.brand-mark{
  width:42px;height:42px;border-radius:14px;flex:none;
  background:linear-gradient(150deg,#17553F,#0F3D2E 70%);
  display:flex;align-items:flex-end;justify-content:center;gap:3px;padding:9px 8px;
  box-shadow:var(--shadow-clay);
}
.brand-mark span{width:5px;border-radius:3px;background:#DCEFE4}
.brand-mark span:nth-child(1){height:10px;background:#7AC7A3}
.brand-mark span:nth-child(2){height:16px;background:#FFFFFF}
.brand-mark span:nth-child(3){height:12px;background:#A9D9C1}
.brand-mark span:nth-child(4){height:20px;background:#F0C45A}
.brand-text h1{font-size:19px;font-weight:700;color:var(--primary)}
.brand-text p{font-size:11.5px;color:var(--muted)}
.topbar-actions{display:flex;align-items:center;gap:6px;position:relative}
.icon-btn{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:var(--surface);color:var(--primary);
  box-shadow:var(--shadow-sm);transition:transform .22s var(--ease), box-shadow .22s var(--ease), background .2s;
}
.icon-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);background:#fff}
.icon-btn:active{transform:scale(.94)}
.menu{
  position:absolute;top:46px;left:0;min-width:216px;z-index:60;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius-md);
  box-shadow:var(--shadow-md);padding:6px;display:grid;gap:2px;
  animation:pop .18s var(--ease);
}
.menu button{
  display:flex;align-items:center;gap:9px;padding:10px 11px;border-radius:11px;
  font-size:13px;color:var(--ink-soft);text-align:right;width:100%;
  transition:background .18s;
}
.menu button:hover{background:var(--surface-2)}
.menu button.danger{color:var(--coral)}

/* ---------- التبويبات ---------- */
.tabs{
  display:grid;grid-template-columns:repeat(3,1fr);gap:6px;
  background:var(--surface);padding:6px;border-radius:18px;
  box-shadow:var(--shadow-sm);margin-bottom:16px;
}
.tab{
  display:flex;align-items:center;justify-content:center;gap:7px;
  padding:10px 8px;border-radius:13px;font-size:13px;font-weight:500;
  color:var(--ink-soft);transition:all .24s var(--ease);
}
.tab .ic{width:16px;height:16px;opacity:.8}
.tab:hover{background:var(--surface-2)}
.tab.is-active{background:var(--primary);color:#fff;box-shadow:0 6px 16px rgba(15,61,46,.24)}
.view{display:none}
.view.is-active{display:block;animation:fadeUp .32s var(--ease)}

/* ---------- البطاقات والمؤشرات ---------- */
.card{
  background:var(--surface);border:1px solid rgba(222,234,226,.8);
  border-radius:var(--radius-lg);padding:16px;margin-bottom:14px;
  box-shadow:var(--shadow-sm);
}
.card-head{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.card-head h2{font-size:15.5px;font-weight:700;color:var(--primary)}
.kpi-row{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kpi-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.kpi{
  background:var(--surface);border:1px solid rgba(222,234,226,.8);border-radius:18px;
  padding:13px 14px;box-shadow:var(--shadow-sm);transition:transform .24s var(--ease), box-shadow .24s var(--ease);
}
.kpi:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.kpi .k-label{font-size:11.5px;color:var(--muted);display:flex;align-items:center;gap:5px}
.kpi .k-value{font-family:var(--font-head);font-size:25px;font-weight:700;line-height:1.25;margin-top:2px}
.kpi .k-hint{font-size:10.5px;color:var(--muted)}
.kpi.accent-green .k-value{color:var(--accent)}
.kpi.accent-cyan .k-value{color:var(--cyan)}
.kpi.accent-gold .k-value{color:var(--gold)}
.kpi.accent-coral .k-value{color:var(--coral)}
.list-head{display:flex;align-items:baseline;justify-content:space-between;margin:4px 4px 10px}
.list-head h2{font-size:14.5px;font-weight:700;color:var(--primary)}
.list{display:grid;gap:8px}

/* ---------- صف الطالب ---------- */
.student{
  display:flex;align-items:center;gap:11px;
  background:var(--surface);border:1px solid rgba(222,234,226,.85);
  border-radius:var(--radius-md);padding:11px 12px;
  box-shadow:var(--shadow-sm);transition:transform .22s var(--ease), box-shadow .22s var(--ease);
  animation:fadeUp .3s var(--ease) both;
}
.student:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.avatar{
  width:40px;height:40px;border-radius:13px;flex:none;display:grid;place-items:center;
  font-family:var(--font-head);font-weight:700;font-size:15px;
}
.student-main{flex:1;min-width:0}
.student-name{font-size:14px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.student-sub{font-size:11px;color:var(--muted)}
.student-score{text-align:center;min-width:56px}
.student-score b{font-family:var(--font-head);font-size:17px;line-height:1}
.chip{
  display:inline-block;padding:2px 9px;border-radius:999px;font-size:10.5px;font-weight:600;
  margin-top:3px;white-space:nowrap;
}
.icon-btn.small{width:32px;height:32px;border-radius:11px;box-shadow:none;background:transparent;color:var(--muted)}
.icon-btn.small:hover{background:#FBEDEB;color:var(--coral);transform:none}
.pill{
  padding:3px 10px;border-radius:999px;font-size:11px;font-weight:600;
  background:var(--mint);color:var(--primary-600);
}
.pill.warn{background:#FDF1DC;color:#9A6A0F}
.muted-pill{background:var(--surface-2);color:var(--muted)}

/* ---------- شاشة الرصد ---------- */
.subject-strip{display:flex;gap:7px;overflow-x:auto;padding:2px 2px 12px;scrollbar-width:none}
.subject-strip::-webkit-scrollbar{display:none}
.subj{
  flex:none;padding:8px 14px;border-radius:999px;background:var(--surface);
  border:1px solid var(--line);font-size:12.5px;color:var(--ink-soft);
  transition:all .22s var(--ease);box-shadow:var(--shadow-sm);
}
.subj:hover{transform:translateY(-1px)}
.subj.is-active{background:var(--primary);border-color:var(--primary);color:#fff;box-shadow:0 8px 18px rgba(15,61,46,.22)}
.entry{
  display:flex;align-items:center;gap:10px;background:var(--surface);
  border:1px solid rgba(222,234,226,.85);border-radius:var(--radius-md);
  padding:9px 12px;box-shadow:var(--shadow-sm);
}
.entry .student-main{font-size:13.5px;font-weight:500}
.mark{
  width:76px;height:40px;border-radius:12px;border:1.5px solid var(--line);
  text-align:center;font-family:var(--font-head);font-size:16px;font-weight:600;
  color:var(--primary);background:var(--surface-2);transition:all .2s var(--ease);
}
.mark:focus{outline:none;border-color:var(--accent);background:#fff;box-shadow:0 0 0 4px rgba(47,122,86,.12)}
.mark.is-error{border-color:var(--coral);background:#FBEDEB;color:var(--coral)}
.mark.is-filled{border-color:#BFDCC9;background:#F2FAF5}
.progress{height:6px;border-radius:99px;background:var(--line);overflow:hidden;margin:6px 2px 14px}
.progress i{display:block;height:100%;border-radius:99px;background:linear-gradient(90deg,var(--accent),#7AC7A3);transition:width .4s var(--ease)}

/* ---------- التحليل ---------- */
.meters{display:grid;gap:11px}
.meter-top{display:flex;justify-content:space-between;font-size:12.5px;margin-bottom:5px}
.meter-top b{font-weight:600}
.track{height:9px;border-radius:99px;background:var(--surface-2);overflow:hidden}
.track i{display:block;height:100%;border-radius:99px;transition:width .7s var(--ease)}
.meter-note{font-size:10.5px;color:var(--muted);margin-top:3px}
.dist{display:grid;gap:9px}
.dist-row{display:grid;grid-template-columns:74px 1fr 46px;align-items:center;gap:9px;font-size:12px}
.dist-bar{height:22px;border-radius:8px;background:var(--surface-2);overflow:hidden;position:relative}
.dist-bar i{display:block;height:100%;border-radius:8px;transition:width .7s var(--ease)}
.dist-row b{font-size:12px;text-align:left;font-weight:600}
.rank-list,.risk-list{display:grid;gap:7px}
.rank-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:12px;background:var(--surface-2)}
.rank-no{width:24px;height:24px;border-radius:8px;display:grid;place-items:center;font-size:11.5px;font-weight:700;background:#fff;color:var(--primary)}
.rank-name{flex:1;font-size:13px}
.rank-val{font-family:var(--font-head);font-weight:700;font-size:14px}
.risk-item{display:flex;gap:9px;padding:9px 11px;border-radius:12px;background:#FDF7EE;border:1px solid #F4E3C8}
.risk-dot{width:7px;height:7px;border-radius:50%;background:var(--gold);margin-top:7px;flex:none}
.risk-item strong{font-size:12.8px;font-weight:600}
.risk-item p{font-size:11px;color:#8B7444}
.insight-card{background:linear-gradient(180deg,#F2FAF5,#FFFFFF)}
.insights{margin:0;padding-inline-start:4px;list-style:none;display:grid;gap:8px}
.insights li{position:relative;padding-inline-start:18px;font-size:12.8px;color:var(--ink-soft)}
.insights li::before{content:"";position:absolute;inset-inline-start:0;top:8px;width:7px;height:7px;border-radius:50%;background:var(--accent)}

/* ---------- نافذة الإضافة والتنبيهات ---------- */
.dialog{
  border:none;border-radius:26px;padding:22px;width:min(420px,92vw);
  box-shadow:0 30px 70px rgba(18,51,38,.28);background:var(--surface);
  animation:pop .26s var(--ease);
}
.dialog::backdrop{background:rgba(14,38,29,.42);backdrop-filter:blur(3px)}
.dialog h2{font-size:17px;color:var(--primary);margin-bottom:4px}
.dialog .field{display:block;margin-top:14px}
.dialog .field span{display:block;font-size:12px;color:var(--ink-soft);margin-bottom:5px}
.dialog input{
  width:100%;height:44px;border-radius:13px;border:1.5px solid var(--line);
  background:var(--surface-2);padding:0 13px;font-family:inherit;font-size:14px;color:var(--ink);
  transition:all .2s var(--ease);
}
.dialog input:focus{outline:none;background:#fff;border-color:var(--accent);box-shadow:0 0 0 4px rgba(47,122,86,.12)}
.dialog-actions{display:flex;gap:8px;justify-content:flex-start;margin-top:20px}
.btn{
  padding:10px 18px;border-radius:13px;font-size:13px;font-weight:600;
  transition:transform .2s var(--ease), box-shadow .2s var(--ease), background .2s;
}
.btn:active{transform:scale(.96)}
.btn.primary{background:var(--primary);color:#fff;box-shadow:0 8px 20px rgba(15,61,46,.24)}
.btn.primary:hover{background:var(--primary-600);transform:translateY(-1px)}
.btn.ghost{background:var(--surface-2);color:var(--ink-soft)}
.btn.ghost:hover{background:#E6EFE9}
.toast{
  position:fixed;bottom:26px;left:50%;transform:translate(-50%,20px);
  background:var(--primary);color:#fff;padding:12px 20px;border-radius:14px;
  font-size:13px;box-shadow:0 18px 40px rgba(15,61,46,.3);
  opacity:0;pointer-events:none;transition:all .3s var(--ease);z-index:90;max-width:90vw;
}
.toast.is-on{opacity:1;transform:translate(-50%,0)}
.foot{display:flex;justify-content:space-between;gap:10px;font-size:10.5px;color:var(--muted);padding:8px 4px 0}
.empty{text-align:center;padding:42px 20px;color:var(--muted);background:var(--surface);border:1px dashed var(--line);border-radius:var(--radius-lg)}
.empty b{display:block;color:var(--ink-soft);font-size:14px;margin-bottom:5px;font-family:var(--font-head)}

/* ---------- الحركة والتجاوب ---------- */
@keyframes fadeUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.96)}to{opacity:1;transform:scale(1)}}
@media (min-width:700px){
  .app{padding-bottom:40px}
  .kpi-grid{grid-template-columns:repeat(4,1fr)}
  .list{grid-template-columns:1fr 1fr}
  .list-head{grid-column:1/-1}
  #entryList{grid-template-columns:1fr 1fr}
  .kpi-row{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:380px){
  .brand-text h1{font-size:17px}
  .topbar-actions{gap:4px}
  .icon-btn{width:34px;height:34px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important}
}