/* «السلوك المميز» — قاعة الأوسمة
   ضوء واحد من الأعلى، أجسام لها سُمك (مرفوع يُضغط / غائر يُملأ / طافٍ يُقرأ)،
   زمرّد وذهب في غرفة عاجية. القانون: translateY + الحافة = ثابت. */
@import url('/assets/fonts/fonts.css');

:root {
  --em1: #22b892; --em2: #0b7a61; --em3: #064f3f;
  --au1: #f7df98; --au2: #cf9f3f; --au3: #8c6716;
  --ru1: #ef6f63; --ru2: #c23a2e; --ru3: #86231a;
  --sk1: #66aeea; --sk2: #2b72b6; --sk3: #184d80;
  --ink: #112620; --ink2: #3c544c; --ink3: #7d918a;
  --line: #e3ddcd; --line2: #d3cbb6;
  --bg: #f4f0e5; --card: #fffdf8; --tint: #faf6ec; --well: #efe9da;
  --ok: #0f7d5c; --warn: #9a6512; --dan: #b2392f;
  --ui: 'IBM Plex Sans Arabic', 'Segoe UI', Tahoma, sans-serif;
  --disp: 'Aref Ruqaa', 'Amiri', serif;
  --sh-float: 0 1px 0 #fff inset, 0 -1px 0 rgba(17,38,32,.04) inset, 0 2px 4px rgba(17,38,32,.05),
              0 14px 26px -14px rgba(17,38,32,.24), 0 36px 54px -36px rgba(17,38,32,.32);
  --well-sh: inset 0 2px 4px rgba(17,38,32,.10), 0 1px 0 #fff;
  --e-in: cubic-bezier(.2,.9,.2,1); --e-pop: cubic-bezier(.2,1.1,.3,1); --e-bounce: cubic-bezier(.2,1.25,.3,1);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; direction: rtl; font-family: var(--ui); font-size: 15px; line-height: 1.75; color: var(--ink);
  background:
    radial-gradient(1100px 600px at 92% -10%, #f3e3b4 0, transparent 60%),
    radial-gradient(900px 560px at -8% 108%, #cfeee2 0, transparent 58%),
    var(--bg);
  background-attachment: fixed; min-height: 100vh;
}
button, input, select, textarea { font: inherit; color: inherit; }
[hidden] { display: none !important; }
.mono { direction: ltr; unicode-bidi: embed; font-variant-numeric: tabular-nums; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
a { color: var(--em2); }
main svg, .dlg svg, .pop svg { width: 20px; height: 20px; flex: none; }
.gcard h3 svg { color: var(--em2); }
.stu .pts svg { width: 12px; height: 12px; }
#dust { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; pointer-events: none; }
html, body { overflow-x: clip; }
#app, #auth { position: relative; z-index: 1; }

/* ───────── الأزرار: أجسام مرفوعة ───────── */
.btn {
  --c1: #fff; --c2: #efe9da; --c3: #c8bea6; --tx: var(--ink);
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 0; border-radius: 13px; padding: 10px 18px; min-height: 44px; cursor: pointer;
  font-weight: 700; font-size: 14.5px; color: var(--tx); white-space: nowrap;
  background: linear-gradient(180deg, var(--c1), var(--c2));
  box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 4px 0 var(--c3), 0 10px 16px -6px rgba(17,38,32,.30);
  transform: translateY(0); transition: transform .12s var(--e-in), box-shadow .12s var(--e-in), filter .15s;
  -webkit-tap-highlight-color: transparent; user-select: none;
}
.btn:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 6px 0 var(--c3), 0 14px 20px -6px rgba(17,38,32,.30); }
.btn:active:not(:disabled) { transform: translateY(4px); box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 0 0 var(--c3), 0 3px 6px -3px rgba(17,38,32,.3); }
.btn:disabled { opacity: .5; cursor: not-allowed; filter: grayscale(.4); }
.btn:focus-visible, .tab:focus-visible, .stu:focus-visible, .chipb:focus-visible { outline: 3px solid var(--au2); outline-offset: 3px; }
.btn.em { --c1: var(--em1); --c2: var(--em2); --c3: var(--em3); --tx: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.22); }
.btn.au { --c1: var(--au1); --c2: var(--au2); --c3: var(--au3); --tx: #3a2a05; }
.btn.ru { --c1: var(--ru1); --c2: var(--ru2); --c3: var(--ru3); --tx: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.22); }
.btn.sk { --c1: var(--sk1); --c2: var(--sk2); --c3: var(--sk3); --tx: #fff; text-shadow: 0 1px 0 rgba(0,0,0,.22); }
.btn.sm { min-height: 36px; padding: 6px 13px; font-size: 13px; border-radius: 11px; }
.btn.lg { min-height: 56px; padding: 12px 26px; font-size: 17px; border-radius: 16px; }
.btn.ic { width: 44px; padding: 0; }
.btn.sm.ic { width: 36px; }
.btn svg { width: 19px; height: 19px; flex: none; }
.btn.sm svg { width: 16px; height: 16px; }
.btn.ghost { background: transparent; box-shadow: none; color: var(--ink2); }
.btn.ghost:hover:not(:disabled) { background: rgba(17,38,32,.06); box-shadow: none; transform: none; }

/* ───────── الحقول: غائرة ───────── */
.f { display: flex; flex-direction: column; gap: 5px; min-width: 0; }
.f > span { font-size: 12.5px; font-weight: 700; color: var(--ink2); }
.in, select.in, textarea.in {
  width: 100%; min-height: 44px; padding: 9px 13px; border: 1px solid var(--line2); border-radius: 13px;
  background: var(--well); box-shadow: var(--well-sh); outline: none; transition: border-color .15s, background .15s;
}
textarea.in { min-height: 88px; resize: vertical; line-height: 1.7; }
.in:focus { border-color: var(--em1); background: #fff; }
select.in { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink2) 50%), linear-gradient(135deg, var(--ink2) 50%, transparent 50%);
  background-position: 18px 50%, 13px 50%; background-size: 5px 5px; background-repeat: no-repeat; padding-left: 32px; }
.grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 12px; }

/* ───────── البطاقات: طافية ───────── */
.card {
  position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 20px; padding: 20px 22px;
  box-shadow: var(--sh-float);
}
.card h2 { margin: 0 0 12px; font-size: 17px; display: flex; align-items: center; gap: 9px; }
.card h2 .sp { flex: 1; }
.card h2 svg { width: 21px; height: 21px; color: var(--em2); }
.tilt { transform: perspective(900px) rotateX(var(--rx, 0)) rotateY(var(--ry, 0)); transition: transform .25s var(--e-in); will-change: transform; }
.tilt.on { transition: transform .08s linear; }
.tilt::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: 0; transition: opacity .25s;
  background: radial-gradient(420px circle at var(--gx, 50%) var(--gy, 50%), rgba(255,255,255,.55), transparent 45%); mix-blend-mode: soft-light; }
.tilt.on::after { opacity: 1; }
.rise { animation: rise .55s var(--e-in) both; animation-delay: calc(var(--i, 0) * 60ms); }
@keyframes rise { from { opacity: 0; transform: perspective(900px) translateY(18px) rotateX(10deg); } }

.empty { text-align: center; color: var(--ink3); padding: 26px 12px; font-size: 14px; }
.empty b { display: block; color: var(--ink); font-size: 15.5px; margin-bottom: 4px; }
.muted { color: var(--ink3); font-size: 13px; }

/* ───────── شاشة الدخول ───────── */
#auth { min-height: 100vh; display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 30px; padding: 30px 6vw; }
.stage { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; }
.brand-big { font-family: var(--disp); font-size: clamp(38px, 6vw, 64px); line-height: 1.25; margin: 0; color: var(--em3);
  text-shadow: 0 1px 0 #fff, 0 2px 0 #e6dcc2, 0 4px 0 #d2c6a6, 0 10px 18px rgba(17,38,32,.18); }
.brand-sub { margin: 0; color: var(--ink2); font-size: 16px; max-width: 420px; }
.authcard { width: 100%; max-width: 430px; justify-self: center; padding: 28px; }
.authcard h2 { font-size: 21px; }
.authcard form { display: flex; flex-direction: column; gap: 14px; }
.authcard .err { color: var(--dan); font-size: 13.5px; font-weight: 600; min-height: 22px; }
.pwrap { position: relative; }
.pwrap .eye { position: absolute; inset-inline-start: 6px; top: 50%; transform: translateY(-50%); }

/* الوسام ثلاثي الأبعاد: نجمة ثمانية مبثوقة من طبقات */
.medal-scene { width: min(300px, 62vw); aspect-ratio: 1; perspective: 1100px; position: relative; }
.medal-scene::after { content: ''; position: absolute; left: 18%; right: 18%; bottom: -10%; height: 16%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(17,38,32,.30), transparent); animation: shadowPulse 7s ease-in-out infinite; }
.medal { position: absolute; inset: 0; transform-style: preserve-3d; animation: spinY 9s linear infinite; }
.medal .ly { position: absolute; inset: 0; clip-path: var(--star); }
.medal .face { display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 35% 28%, #fff5cf 0, var(--au1) 22%, var(--au2) 58%, var(--au3) 100%); }
.medal .face.back { transform: translateZ(-1px) rotateY(180deg); }
.medal .core { width: 46%; aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center;
  background: radial-gradient(circle at 35% 30%, var(--em1), var(--em2) 60%, var(--em3));
  box-shadow: 0 0 0 6px rgba(255,255,255,.35), inset 0 -6px 12px rgba(0,0,0,.25), inset 0 6px 10px rgba(255,255,255,.3); }
.medal .core svg { width: 52%; height: 52%; color: #fff6d8; filter: drop-shadow(0 2px 2px rgba(0,0,0,.3)); }
.medal .shine { position: absolute; inset: 0; clip-path: var(--star); background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.75) 46%, transparent 60%);
  background-size: 260% 100%; animation: shine 4.5s ease-in-out infinite; mix-blend-mode: soft-light; }
:root { --star: polygon(50% 0%, 61% 26%, 85% 15%, 74% 39%, 100% 50%, 74% 61%, 85% 85%, 61% 74%, 50% 100%, 39% 74%, 15% 85%, 26% 61%, 0% 50%, 26% 39%, 15% 15%, 39% 26%); }
@keyframes spinY { to { transform: rotateY(360deg); } }
@keyframes shine { 0%, 100% { background-position: 120% 0; } 50% { background-position: -20% 0; } }
@keyframes shadowPulse { 0%, 100% { transform: scaleX(1); opacity: .9; } 50% { transform: scaleX(.55); opacity: .5; } }
.medal-orbit { position: absolute; inset: -14%; border-radius: 50%; border: 1px dashed rgba(140,103,22,.35); animation: orbit 30s linear infinite; }
.medal-orbit i { position: absolute; top: -6px; left: 50%; width: 12px; height: 12px; border-radius: 50%; background: radial-gradient(circle at 30% 30%, #fff, var(--em1)); box-shadow: 0 0 12px var(--em1); }
@keyframes orbit { to { transform: rotate(360deg); } }

/* ───────── الهيكل ───────── */
.top {
  position: sticky; top: 0; z-index: 30; display: flex; align-items: center; gap: 14px; padding: 10px 22px;
  background: rgba(250,246,236,.86); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.logo { display: flex; align-items: center; gap: 11px; text-decoration: none; color: inherit; min-width: 0; }
.logo .mini { width: 42px; height: 42px; flex: none; perspective: 300px; }
.logo .mini .medal { animation-duration: 6s; }
.logo b { font-family: var(--disp); font-size: 23px; color: var(--em3); line-height: 1.1; display: block; white-space: nowrap; }
.logo small { display: block; font-size: 11.5px; color: var(--ink3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 260px; }
.top .sp { flex: 1; }
.who { display: flex; align-items: center; gap: 9px; font-size: 13px; }
.avatar { width: 38px; height: 38px; border-radius: 12px; display: grid; place-items: center; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, var(--em1), var(--em2)); box-shadow: 0 3px 0 var(--em3); }
.who .nm { line-height: 1.3; }
.who .nm b { display: block; }
.who .nm small { color: var(--ink3); }
.bell { position: relative; }
.bell .dot { position: absolute; top: -5px; inset-inline-start: -5px; min-width: 21px; height: 21px; border-radius: 11px; padding: 0 5px;
  background: linear-gradient(180deg, var(--ru1), var(--ru2)); color: #fff; font-size: 11px; font-weight: 800; display: grid; place-items: center;
  box-shadow: 0 2px 0 var(--ru3); animation: bump .5s var(--e-bounce); }
@keyframes bump { from { transform: scale(.3); } }

/* شريط التنقّل: مسار غائر وتبويبات ترتفع */
.nav { display: flex; gap: 6px; padding: 6px; margin: 16px auto 0; max-width: fit-content; border-radius: 18px; background: var(--well); box-shadow: var(--well-sh); overflow-x: auto; scrollbar-width: none; }
.nav::-webkit-scrollbar { display: none; }
.tab { display: flex; align-items: center; gap: 8px; padding: 9px 16px; min-height: 44px; border: 0; border-radius: 13px; background: transparent; cursor: pointer;
  font-weight: 700; color: var(--ink2); white-space: nowrap; transition: transform .15s var(--e-in), background .2s, color .2s, box-shadow .2s; }
.tab svg { width: 19px; height: 19px; }
.tab:hover { color: var(--ink); }
.tab.on { color: #fff; background: linear-gradient(180deg, var(--em1), var(--em2)); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 4px 0 var(--em3), 0 10px 16px -6px rgba(6,79,63,.45);
  transform: translateY(-2px); text-shadow: 0 1px 0 rgba(0,0,0,.2); }

main { max-width: 1240px; margin: 0 auto; padding: 22px 18px 90px; }
.page-h { display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap; margin: 6px 0 18px; }
.page-h h1 { margin: 0; font-family: var(--disp); font-size: 34px; line-height: 1.2; color: var(--em3); }
.page-h p { margin: 0; color: var(--ink3); font-size: 14px; }
.page-h .sp { flex: 1; }
.view { animation: viewIn .45s var(--e-in) both; }
@keyframes viewIn { from { opacity: 0; transform: perspective(1200px) translateY(14px) rotateX(6deg); } }

/* ───────── مكعّبات الأرقام ───────── */
.cubes { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin-bottom: 18px; }
.cube { --c1: var(--em1); --c2: var(--em2); --c3: var(--em3);
  position: relative; border-radius: 20px; padding: 16px 18px 14px; color: #fff; overflow: hidden;
  background: linear-gradient(145deg, var(--c1), var(--c2)); box-shadow: 0 1px 0 rgba(255,255,255,.35) inset, 0 6px 0 var(--c3), 0 18px 26px -10px rgba(17,38,32,.4);
  text-shadow: 0 1px 0 rgba(0,0,0,.2); }
.cube.au { --c1: var(--au1); --c2: var(--au2); --c3: var(--au3); color: #3a2a05; text-shadow: 0 1px 0 rgba(255,255,255,.4); }
.cube.sk { --c1: var(--sk1); --c2: var(--sk2); --c3: var(--sk3); }
.cube.ru { --c1: var(--ru1); --c2: var(--ru2); --c3: var(--ru3); }
.cube b { display: block; font-size: 34px; font-weight: 800; line-height: 1.15; }
.cube span { font-size: 13px; opacity: .92; font-weight: 600; }
.cube svg { position: absolute; inset-inline-start: 12px; top: 12px; width: 54px; height: 54px; opacity: .22; transform: rotate(-12deg); }

.dash { display: grid; grid-template-columns: 1.25fr 1fr; gap: 18px; }
.dash .wide { grid-column: 1 / -1; }

/* منصّة التتويج ثلاثية الأبعاد */
.podium { display: flex; align-items: flex-end; justify-content: center; gap: 12px; padding: 34px 6px 6px; perspective: 900px; min-height: 270px; }
.pd { display: flex; flex-direction: column; align-items: center; width: 31%; max-width: 170px; text-align: center; }
.pd .who2 { font-weight: 700; font-size: 13.5px; line-height: 1.4; margin-bottom: 6px; min-height: 40px; }
.pd .who2 small { display: block; color: var(--ink3); font-weight: 500; font-size: 11.5px; }
.pd .coin { width: 54px; height: 54px; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 20px; margin-bottom: 8px;
  animation: bob 3s ease-in-out infinite; animation-delay: var(--d, 0s); box-shadow: 0 4px 0 rgba(0,0,0,.18), 0 10px 18px -6px rgba(0,0,0,.35); }
.pd.g1 .coin { background: radial-gradient(circle at 35% 30%, #fff3c4, var(--au2) 60%, var(--au3)); color: #4a3406; }
.pd.g2 .coin { background: radial-gradient(circle at 35% 30%, #ffffff, #c4ccd0 60%, #7f8b91); color: #2f3a40; }
.pd.g3 .coin { background: radial-gradient(circle at 35% 30%, #ffe2c7, #c98a52 60%, #7f4f22); color: #3c2209; }
@keyframes bob { 0%, 100% { transform: translateY(0) rotateY(0); } 50% { transform: translateY(-8px) rotateY(180deg); } }
.block { position: relative; width: 100%; transform-style: preserve-3d; transform: rotateX(16deg); transform-origin: bottom; }
.block .fr { height: var(--h); border-radius: 12px 12px 0 0; display: grid; place-items: center; font-family: var(--disp); font-size: 30px; color: #fff;
  background: linear-gradient(180deg, var(--c1), var(--c2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); text-shadow: 0 2px 0 rgba(0,0,0,.2); animation: grow .9s var(--e-in) both; transform-origin: bottom; }
.block .tp { position: absolute; left: 3%; right: 3%; top: -13px; height: 14px; border-radius: 10px 10px 2px 2px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--c1) 55%, #fff), var(--c1)); box-shadow: inset 0 1px 0 rgba(255,255,255,.7);
  transform: perspective(300px) rotateX(48deg); transform-origin: bottom; animation: fadeIn .9s both; }
.pd.g1 .block { --c1: var(--au1); --c2: var(--au2); --h: 150px; }
.pd.g2 .block { --c1: #b9c5cb; --c2: #8b979d; --h: 110px; }
.pd.g3 .block { --c1: #dda06a; --c2: #a8682f; --h: 80px; }
@keyframes grow { from { transform: scaleY(.05); } }

/* أعمدة ثلاثية الأبعاد للرصد اليومي */
.bars { display: flex; align-items: flex-end; gap: 7px; height: 190px; padding: 18px 4px 0; perspective: 700px; }
.bar3 { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; min-width: 0; }
.bar3 .col { position: relative; width: 70%; height: var(--v); min-height: 3px; border-radius: 6px 6px 2px 2px; transform-origin: bottom;
  background: linear-gradient(90deg, var(--em2), var(--em1) 55%, var(--em2)); box-shadow: 4px 0 0 var(--em3), 0 6px 10px -4px rgba(6,79,63,.4);
  animation: grow .8s var(--e-in) both; animation-delay: calc(var(--i) * 40ms); }
.bar3 .col::before { content: ''; position: absolute; top: -5px; left: 2px; right: -4px; height: 6px; border-radius: 4px; background: #7de0c2; transform: skewX(-40deg); }
.bar3.today .col { background: linear-gradient(90deg, var(--au2), var(--au1) 55%, var(--au2)); box-shadow: 4px 0 0 var(--au3), 0 6px 10px -4px rgba(140,103,22,.4); }
.bar3.today .col::before { background: #fff1c4; }
.bar3 small { font-size: 10.5px; color: var(--ink3); margin-top: 6px; white-space: nowrap; }
.bar3 em { font-style: normal; font-size: 11px; font-weight: 800; color: var(--ink2); margin-bottom: 4px; }

/* شريط نسبة غائر */
.meter { height: 12px; border-radius: 8px; background: var(--well); box-shadow: var(--well-sh); overflow: hidden; }
.meter i { display: block; height: 100%; border-radius: 8px; background: linear-gradient(180deg, var(--em1), var(--em2)); box-shadow: inset 0 1px 0 rgba(255,255,255,.4); animation: fill .9s var(--e-in) both; transform-origin: right; }
.meter.au i { background: linear-gradient(180deg, var(--au1), var(--au2)); }
@keyframes fill { from { transform: scaleX(0); } }
.rank { display: grid; grid-template-columns: 1fr 2fr auto; gap: 10px; align-items: center; padding: 6px 0; font-size: 13.5px; }
.rank b { font-weight: 700; }

/* الخلاصة الحيّة */
.feed { display: flex; flex-direction: column; gap: 8px; max-height: 420px; overflow-y: auto; padding: 2px 4px 6px; }
.fi { display: flex; gap: 11px; align-items: center; padding: 9px 12px; border-radius: 14px; background: var(--tint); border: 1px solid var(--line);
  animation: flipIn .5s var(--e-pop) both; animation-delay: calc(var(--i, 0) * 50ms); }
@keyframes flipIn { from { opacity: 0; transform: perspective(700px) rotateX(-50deg); transform-origin: top; } }
.fi .md { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center; font-weight: 900; font-size: 13px; color: #3a2a05;
  background: radial-gradient(circle at 35% 30%, #fff3c4, var(--au2) 65%, var(--au3)); box-shadow: 0 3px 0 var(--au3); }
.fi .md.comp { background: radial-gradient(circle at 35% 30%, #d8f1ff, var(--sk2) 65%, var(--sk3)); color: #fff; box-shadow: 0 3px 0 var(--sk3); }
.fi .tx { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.55; }
.fi .tx b { font-weight: 700; }
.fi .tx small { display: block; color: var(--ink3); font-size: 11.5px; }

/* ───────── الرصد ───────── */
.rec { display: grid; grid-template-columns: 1fr 380px; gap: 18px; align-items: start; }
.picker { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 14px; }
.picker .f { flex: 1 1 170px; }
.tools { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.tools .sp { flex: 1; }
.stus { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 12px; perspective: 1000px; }
.stu { position: relative; text-align: center; border: 1px solid var(--line); border-radius: 18px; padding: 14px 10px 12px; cursor: pointer; background: var(--card);
  box-shadow: 0 1px 0 #fff inset, 0 4px 0 #ddd3bb, 0 10px 18px -8px rgba(17,38,32,.28);
  transition: transform .18s var(--e-in), box-shadow .18s var(--e-in), background .2s; user-select: none;
  animation: rise .5s var(--e-in) both; animation-delay: calc(var(--i, 0) * 35ms); }
.stu:hover { transform: translateY(-3px); box-shadow: 0 1px 0 #fff inset, 0 7px 0 #ddd3bb, 0 16px 22px -8px rgba(17,38,32,.3); }
.stu:active { transform: translateY(4px); box-shadow: 0 1px 0 #fff inset, 0 0 0 #ddd3bb, 0 4px 8px -4px rgba(17,38,32,.3); }
.stu.on { background: linear-gradient(180deg, #fff8df, #f8e6ad); border-color: var(--au2); box-shadow: 0 1px 0 #fff inset, 0 4px 0 var(--au3), 0 12px 20px -8px rgba(140,103,22,.5); }
.stu .av { width: 52px; height: 52px; margin: 0 auto 8px; border-radius: 16px; display: grid; place-items: center; font-size: 20px; font-weight: 800; color: #fff;
  background: linear-gradient(145deg, hsl(var(--hue) 55% 52%), hsl(var(--hue) 60% 36%)); box-shadow: 0 3px 0 hsl(var(--hue) 60% 26%); transition: transform .4s var(--e-bounce); }
.stu.on .av { transform: rotateY(360deg) scale(1.06); }
.stu .nm { font-weight: 700; font-size: 13.5px; line-height: 1.45; min-height: 39px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.stu .pts { display: inline-flex; align-items: center; gap: 4px; margin-top: 6px; font-size: 12px; font-weight: 800; color: var(--au3); background: #fff3cf; border-radius: 999px; padding: 1px 9px; }
.stu .chk { position: absolute; top: 8px; inset-inline-start: 8px; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; color: #fff;
  background: linear-gradient(180deg, var(--em1), var(--em2)); box-shadow: 0 2px 0 var(--em3); transform: scale(0); transition: transform .3s var(--e-bounce); }
.stu .chk svg { width: 15px; height: 15px; }
.stu.on .chk { transform: scale(1); }
.stu .today { position: absolute; top: 8px; inset-inline-end: 8px; font-size: 10.5px; font-weight: 800; color: var(--em2); background: #ddf5ec; border-radius: 7px; padding: 0 6px; }
.stu.pop { animation: popGlow .9s var(--e-bounce); }
@keyframes popGlow { 30% { transform: translateY(-8px) scale(1.06); box-shadow: 0 0 0 4px rgba(207,159,63,.45), 0 18px 26px -8px rgba(140,103,22,.5); } }

.panel { position: sticky; top: 86px; }
.panel .card { padding: 18px; }
.cats { display: flex; gap: 5px; padding: 5px; border-radius: 14px; background: var(--well); box-shadow: var(--well-sh); margin-bottom: 10px; }
.cats button { flex: 1; border: 0; background: transparent; border-radius: 10px; padding: 7px 4px; font-weight: 700; font-size: 13px; color: var(--ink2); cursor: pointer; min-height: 38px; }
.cats button.on { background: #fff; color: var(--em2); box-shadow: 0 2px 0 #d8cfb8, 0 6px 10px -6px rgba(17,38,32,.3); }
.bhs { display: flex; flex-direction: column; gap: 7px; max-height: 330px; overflow-y: auto; padding: 2px 3px 6px; }
.chipb { display: flex; align-items: center; gap: 10px; width: 100%; text-align: start; border: 1px solid var(--line); border-radius: 13px; background: var(--card); padding: 8px 11px; cursor: pointer;
  box-shadow: 0 3px 0 #e2d9c2; transition: transform .12s var(--e-in), box-shadow .12s var(--e-in), background .15s; min-height: 44px; }
.chipb:hover { transform: translateY(-1px); box-shadow: 0 4px 0 #e2d9c2; }
.chipb:active { transform: translateY(3px); box-shadow: 0 0 0 #e2d9c2; }
.chipb .t { flex: 1; font-size: 13.5px; font-weight: 600; line-height: 1.45; }
.chipb .pt { flex: none; min-width: 34px; text-align: center; font-size: 12px; font-weight: 800; border-radius: 9px; padding: 2px 6px; background: #fff3cf; color: var(--au3); }
.chipb.comp .pt { background: #e2f0fb; color: var(--sk3); }
.chipb.on { background: linear-gradient(180deg, #ecfbf5, #d3f2e6); border-color: var(--em1); box-shadow: 0 3px 0 var(--em2); }
.chipb .bx { width: 22px; height: 22px; flex: none; border-radius: 7px; border: 2px solid var(--line2); display: grid; place-items: center; transition: .2s; }
.chipb.on .bx { background: var(--em2); border-color: var(--em2); color: #fff; }
.chipb .bx svg { width: 14px; height: 14px; opacity: 0; }
.chipb.on .bx svg { opacity: 1; }
.summary { display: flex; justify-content: space-between; gap: 8px; margin: 12px 0; padding: 10px 12px; border-radius: 13px; background: var(--well); box-shadow: var(--well-sh); font-size: 13px; }
.summary b { font-size: 19px; color: var(--em2); display: block; line-height: 1.2; }
.summary div { text-align: center; flex: 1; }

/* أوسمة تطير، وقصاصات احتفال */
.fab-give { display: none; }
@media (max-width: 980px) {
  .fab-give:not([hidden]) { display: inline-flex; position: fixed; z-index: 45; left: 50%; transform: translateX(-50%); bottom: 96px; box-shadow: 0 1px 0 rgba(255,255,255,.55) inset, 0 4px 0 var(--c3), 0 18px 30px -8px rgba(0,0,0,.45); animation: toastIn .45s var(--e-bounce) both; }
  .fab-give:active:not(:disabled) { transform: translateX(-50%) translateY(4px); }
  .fab-give:hover:not(:disabled) { transform: translateX(-50%) translateY(-2px); }
}
@media (min-width: 641px) and (max-width: 980px) { .fab-give:not([hidden]) { bottom: 24px; } }
.fly { position: fixed; z-index: 90; width: 30px; height: 30px; margin: -15px 0 0 -15px; pointer-events: none; clip-path: var(--star);
  background: radial-gradient(circle at 35% 30%, #fff5cf, var(--au2) 60%, var(--au3)); filter: drop-shadow(0 4px 6px rgba(0,0,0,.3)); }
.plus { position: fixed; z-index: 91; pointer-events: none; font-weight: 900; font-size: 20px; color: var(--au3); text-shadow: 0 2px 0 #fff, 0 4px 10px rgba(0,0,0,.2); }
.conf { position: fixed; z-index: 89; width: 9px; height: 14px; pointer-events: none; border-radius: 2px; }

/* ───────── الجداول ───────── */
.tbl-wrap { overflow-x: auto; border-radius: 14px; border: 1px solid var(--line); }
table.t { width: 100%; border-collapse: collapse; font-size: 13.5px; background: var(--card); }
table.t th { position: sticky; top: 0; background: var(--tint); color: var(--ink2); font-weight: 700; text-align: start; padding: 10px 12px; border-bottom: 1px solid var(--line); white-space: nowrap; z-index: 1; }
table.t td { padding: 9px 12px; border-bottom: 1px solid #efe9da; vertical-align: middle; }
table.t tbody tr { transition: background .15s; }
table.t tbody tr:hover { background: #fbf7ea; }
table.t td.num { text-align: center; font-variant-numeric: tabular-nums; }
table.t .acts { display: flex; gap: 5px; justify-content: flex-end; }
.pill { display: inline-block; font-size: 11.5px; font-weight: 700; border-radius: 999px; padding: 1px 9px; background: #ddf5ec; color: var(--em2); }
.pill.comp { background: #e2f0fb; color: var(--sk3); }
.pill.off { background: #f3e1df; color: var(--dan); }
.pill.au { background: #fff3cf; color: var(--au3); }

/* الصفوف والفصول */
.tree { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.gcard h3 { margin: 0 0 10px; font-size: 16.5px; display: flex; align-items: center; gap: 8px; }
.gcard h3 .sp { flex: 1; }
.clsl { display: flex; flex-wrap: wrap; gap: 8px; }
.cls { display: inline-flex; align-items: center; gap: 6px; padding: 5px 6px 5px 12px; border-radius: 12px; background: var(--tint); border: 1px solid var(--line); font-weight: 700; font-size: 13.5px; }
.cls .n { font-size: 11.5px; color: var(--ink3); font-weight: 600; }
.cls button { border: 0; background: transparent; cursor: pointer; width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; color: var(--ink3); }
.cls button:hover { background: rgba(17,38,32,.08); color: var(--ink); }
.cls button svg { width: 15px; height: 15px; }

/* ───────── النوافذ ───────── */
.veil { position: fixed; inset: 0; z-index: 70; display: grid; place-items: center; padding: 18px; background: rgba(17,38,32,.42); backdrop-filter: blur(3px); animation: fadeIn .2s both; }
@keyframes fadeIn { from { opacity: 0; } }
.dlg { width: min(560px, 100%); max-height: calc(100vh - 36px); overflow-y: auto; background: var(--card); border-radius: 22px; padding: 22px; box-shadow: 0 40px 80px -20px rgba(0,0,0,.45);
  animation: dPop .45s var(--e-pop) both; }
.dlg.wide { width: min(860px, 100%); }
@keyframes dPop { from { opacity: 0; transform: perspective(900px) translateY(24px) rotateX(16deg) scale(.96); } }
.dlg h3 { margin: 0 0 14px; font-size: 19px; display: flex; align-items: center; gap: 10px; }
.dlg h3 .sp { flex: 1; }
.dlg .body { display: flex; flex-direction: column; gap: 12px; }
.dlg .acts { display: flex; gap: 10px; justify-content: flex-start; margin-top: 18px; flex-wrap: wrap; }
.dlg .err { color: var(--dan); font-weight: 600; font-size: 13.5px; min-height: 0; }
.dlg .note { font-size: 13px; color: var(--ink2); background: var(--tint); border-radius: 12px; padding: 10px 12px; }

/* الإشعارات */
.pop { position: absolute; top: 58px; inset-inline-end: 0; width: min(360px, 92vw); background: var(--card); border-radius: 18px; padding: 12px; z-index: 60;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.4); border: 1px solid var(--line); animation: dPop .35s var(--e-pop) both; }
.pop h4 { margin: 2px 4px 8px; font-size: 14.5px; display: flex; }
.pop h4 .sp { flex: 1; }

/* التنبيهات */
#toasts { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); z-index: 100; display: flex; flex-direction: column; gap: 8px; align-items: center; pointer-events: none; }
.toast { pointer-events: auto; display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-radius: 15px; color: #fff; font-weight: 700; font-size: 14px; max-width: 92vw;
  background: linear-gradient(180deg, #2b4239, #172a24); box-shadow: 0 4px 0 #0c1915, 0 16px 30px -10px rgba(0,0,0,.5); animation: toastIn .5s var(--e-bounce) both; }
.toast.ok { background: linear-gradient(180deg, var(--em1), var(--em2)); box-shadow: 0 4px 0 var(--em3), 0 16px 30px -10px rgba(0,0,0,.45); }
.toast.er { background: linear-gradient(180deg, var(--ru1), var(--ru2)); box-shadow: 0 4px 0 var(--ru3), 0 16px 30px -10px rgba(0,0,0,.45); }
.toast button { border: 0; border-radius: 9px; padding: 4px 11px; font-weight: 800; cursor: pointer; background: rgba(255,255,255,.22); color: #fff; }
.toast.out { animation: toastOut .3s ease both; }
@keyframes toastIn { from { opacity: 0; transform: perspective(600px) translateY(30px) rotateX(40deg); } }
@keyframes toastOut { to { opacity: 0; transform: translateY(14px); } }

/* ملف الطالب */
.hero { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.hero .av { width: 84px; height: 84px; border-radius: 24px; font-size: 32px; display: grid; place-items: center; color: #fff; font-weight: 800;
  background: linear-gradient(145deg, hsl(var(--hue) 55% 52%), hsl(var(--hue) 60% 36%)); box-shadow: 0 5px 0 hsl(var(--hue) 60% 26%), 0 16px 24px -10px rgba(0,0,0,.35); }
.hero h2 { margin: 0; font-size: 24px; }
.hero .sp { flex: 1; }
.big-pts { text-align: center; }
.big-pts b { font-family: var(--disp); font-size: 46px; line-height: 1; color: var(--au3); display: block; }

/* ───────── الجوال ───────── */
@media (max-width: 980px) {
  #auth { grid-template-columns: 1fr; padding: 24px 16px; }
  .rec, .dash { grid-template-columns: 1fr; }
  .panel { position: static; order: -1; }
}
@media (max-width: 640px) {
  body { font-size: 14.5px; }
  .top { padding: 8px 12px; gap: 8px; }
  .logo small, .who .nm { display: none; }
  .logo b { font-size: 20px; }
  main { padding: 14px 12px 110px; }
  .nav { position: fixed; bottom: 10px; left: 10px; right: 10px; z-index: 40; margin: 0; max-width: none; justify-content: space-between; background: rgba(239,233,218,.95); backdrop-filter: blur(10px); }
  .tab { flex-direction: column; gap: 0; padding: 5px 8px; font-size: 10.5px; min-height: 50px; flex: 1; }
  .tab.on { transform: translateY(-4px); }
  .page-h h1 { font-size: 27px; }
  .stus { grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 9px; }
  .card { padding: 16px; }
  .podium { min-height: 230px; }
  .pd.g1 .block { --h: 120px; } .pd.g2 .block { --h: 88px; } .pd.g3 .block { --h: 64px; }
  #toasts { bottom: 86px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ───────── الطباعة ───────── */
#print { display: none; }
@media print {
  body { background: #fff !important; }
  #app, #auth, #toasts, #dust, .veil { display: none !important; }
  #print { display: block; }
  * { box-shadow: none !important; text-shadow: none !important; animation: none !important; }
}
.doc { -webkit-print-color-adjust: exact; print-color-adjust: exact; background: #fff; color: #10222f; font-family: var(--ui); font-size: 12px; line-height: 1.7;
  width: 210mm; min-height: 297mm; padding: 11mm 12mm; margin: 0 auto; box-sizing: border-box; display: flex; flex-direction: column; page-break-after: always; }
.doc.land { width: 297mm; min-height: 210mm; }
.doc:last-child { page-break-after: auto; }
.lh { display: flex; align-items: center; gap: 14px; background: url('/assets/hd-top.png') no-repeat center/100% 100%; border-radius: 4px 4px 12px 12px;
  padding: 9px 16px; min-height: 21mm; color: #fff; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.lh img.moe { height: 15mm; width: auto; }
.lh .rule { width: 2px; align-self: stretch; background: rgba(255,255,255,.45); margin: 3px 0; }
.lh .tx { display: flex; flex-direction: column; font-size: 10.5px; line-height: 1.55; }
.lh .tx b { font-size: 12.5px; }
.lh .school { height: 13mm; width: auto; margin-right: auto; background: rgba(255,255,255,.92); border-radius: 6px; padding: 3px; }
.docttl { text-align: center; font-family: var(--disp); font-size: 25px; font-weight: 700; margin: 12px 0 0; color: #0b2230; }
.docsub { text-align: center; font-size: 11.5px; color: #5b7183; margin-bottom: 10px; }
.doc table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 10.5px; }
.doc th, .doc td { border: 1px solid #b9c9d3; padding: 4px 5px; text-align: center; vertical-align: middle; }
.doc th { background: #e8f1ee; color: #1d3f36; font-weight: 700; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.doc td.nm { text-align: right; white-space: nowrap; }
.doc th.vert { writing-mode: vertical-rl; transform: rotate(180deg); white-space: normal; height: 40mm; max-height: 40mm; font-size: 9px; line-height: 1.3; padding: 4px 2px; overflow: hidden; }
.doc table { table-layout: auto; }
.doc th.tot, .doc td.tot { width: 15mm; }
.doc td.nm { min-width: 48mm; }
.doc .tot { background: #fff4d6; font-weight: 800; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.sigs { display: flex; justify-content: space-between; gap: 20px; margin-top: auto; padding-top: 18px; font-size: 12px; }
.sigs div { text-align: center; min-width: 160px; }
.sigs b { display: block; margin-bottom: 26px; }
.lf { height: 7mm; margin-top: 12px; background: url('/assets/hd-foot.png') no-repeat center/100% 100%; border-radius: 12px 12px 4px 4px; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
.meta { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px; font-size: 11px; color: #3f5866; margin: 4px 2px 6px; }

/* الشهادة */
.cert { -webkit-print-color-adjust: exact; print-color-adjust: exact; width: 297mm; height: 210mm; padding: 10mm; box-sizing: border-box; background: #fffdf6; margin: 0 auto; position: relative; overflow: hidden; }
.cert .frame { position: absolute; inset: 8mm; border: 2.5mm solid #c9a24a; border-radius: 4mm; outline: 1px solid #c9a24a; outline-offset: -5mm; }
.cert .inner { position: relative; height: 100%; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 12mm 26mm 14mm; }
.cert .lhs { width: 100%; display: flex; justify-content: space-between; align-items: center; font-size: 11px; color: #3b4b45; line-height: 1.6; }
.cert .lhs img { height: 20mm; }
.cert h1 { font-family: var(--disp); font-size: 52px; color: #0b6b55; margin: 4mm 0 0; line-height: 1.2; }
.cert .lead { font-size: 15px; color: #3b4b45; margin: 3mm 0; }
.cert .name { font-family: var(--disp); font-size: 40px; color: #8c6716; margin: 1mm 0 3mm; border-bottom: 1px dashed #c9a24a; padding: 0 12mm 2mm; }
.cert .why { font-size: 15px; line-height: 2; max-width: 210mm; color: #24342f; font-family: 'Amiri', serif; }
.cert .seal { position: absolute; left: 50%; margin-left: -17mm; bottom: 20mm; width: 34mm; height: 34mm; clip-path: var(--star); background: radial-gradient(circle at 35% 30%, #fff5cf, #cf9f3f 60%, #8c6716); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 11px; }
.cert .sigs { width: 100%; margin-top: auto; }

/* شريط الاشتراك */
.subbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: center; max-width: fit-content; margin: 14px auto 0; padding: 8px 10px 8px 16px;
  border-radius: 16px; background: linear-gradient(180deg, #fff8df, #f8e6ad); border: 1px solid var(--au2); box-shadow: 0 3px 0 var(--au3), 0 12px 20px -10px rgba(140,103,22,.5); font-size: 14px; animation: rise .5s var(--e-in) both; }
.subbar svg { width: 20px; height: 20px; color: var(--au3); }
.subbar.warn { background: linear-gradient(180deg, #ffe9e6, #f9c9c2); border-color: var(--ru2); box-shadow: 0 3px 0 var(--ru3), 0 12px 20px -10px rgba(134,35,26,.4); }