/* ============================================================
   games_site — Screens & Quiz
   נטען אחרי game-core.css ומסתמך על המשתנים שלו.
   ============================================================ */

/* ============================================================
   כותרת הדשבורד
   ============================================================ */
.sc-hero{
  padding:22px 20px; margin-bottom:20px;
  border-radius:var(--radius-lg);
  background:var(--grad-primary);
  color:#fff; box-shadow:var(--shadow-glow), var(--shadow-md);
  position:relative; overflow:hidden;
  isolation:isolate;
}
/* שתי הילות — אחת עליונה בהירה ואחת תחתונה סגולה — נותנות
   עומק בלי להוסיף תמונת רקע */
.sc-hero::after{
  content:""; position:absolute; inset-inline-end:-46px; top:-56px;
  width:170px; height:170px; border-radius:50%;
  background:radial-gradient(circle,rgba(255,255,255,.26),transparent 68%);
  pointer-events:none; z-index:-1;
}
.sc-hero::before{
  content:""; position:absolute; inset-inline-start:-60px; bottom:-70px;
  width:190px; height:190px; border-radius:50%;
  background:radial-gradient(circle,rgba(167,139,250,.34),transparent 66%);
  pointer-events:none; z-index:-1;
}
.sc-hero h2{ margin:0 0 5px; font-size:22px; font-weight:800; letter-spacing:-.5px; }
.sc-hero p{ margin:0; font-size:13.5px; opacity:.86; font-weight:400; }
.sc-hero-row{ display:flex; gap:8px; margin-top:15px; flex-wrap:wrap; }
.sc-hero-chip{
  font-size:12px; font-weight:600; padding:6px 13px; border-radius:var(--radius-pill);
  background:rgba(255,255,255,.16); border:1px solid rgba(255,255,255,.26);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}

/* שבב שהוא כפתור. ⚠ ‏font/color יורשים מ-<button>, שאינו יורש
   אותם לבד — בלי שתי השורות האלה הוא מקבל את פונט המערכת
   וטקסט כהה על הבאנר הסגול, ונראה כמו תקלה ולא ככפתור. */
.sc-hero-chip-go{
  font-family:inherit; color:inherit; cursor:pointer;
  background:rgba(255,255,255,.26); border-color:rgba(255,255,255,.42);
  transition:background .16s var(--ease), transform .16s var(--ease);
}
.sc-hero-chip-go:hover{ background:rgba(255,255,255,.36); }
.sc-hero-chip-go:active{ transform:scale(.96); }

.sc-section-t{
  margin:24px 0 12px; font-size:15.5px; font-weight:800; letter-spacing:-.3px;
  display:flex; align-items:center; justify-content:space-between;
}
.sc-section-t small{ font-size:12px; font-weight:500; color:var(--text-dim); }

/* ============================================================
   כרטיסי כניסה
   ============================================================ */
.sc-entry{
  position:relative; overflow:hidden;
  width:100%; display:flex; align-items:center; gap:14px;
  padding:17px 16px; margin-bottom:12px;
  border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow); font-family:inherit; text-align:start;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease);
}
.sc-entry::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glow-primary); opacity:0;
  transition:opacity .28s var(--ease);
}
.sc-entry:hover{ box-shadow:var(--shadow-md); border-color:rgba(99,102,241,.32); }
.sc-entry:hover::after{ opacity:1; }
.sc-entry:active{ transform:scale(.985); box-shadow:var(--shadow); }
.sc-entry-ic{
  width:50px; height:50px; flex:0 0 50px;
  display:flex; align-items:center; justify-content:center;
  font-size:24px; border-radius:17px;
  background:linear-gradient(145deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border);
  box-shadow:var(--shadow-inset);
}
.sc-entry-b{ flex:1; min-width:0; }
.sc-entry-t{ display:block; font-size:15.5px; font-weight:700; letter-spacing:-.2px; }
.sc-entry-s{ display:block; font-size:12.5px; color:var(--text-dim); margin-top:3px; line-height:1.45; }
.sc-entry-go{
  font-size:15px; font-weight:800; color:var(--indigo-ink); flex:0 0 auto;
  transition:transform .2s var(--ease-out);
}
.sc-entry:hover .sc-entry-go{ transform:translateX(-3px); }
[dir="ltr"] .sc-entry:hover .sc-entry-go{ transform:translateX(3px); }

/* ============================================================
   אריחי המקצועות — זוהר פינתי לכל אריח
   ============================================================ */
.sc-subjects{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.sc-subj{
  position:relative; overflow:hidden;
  padding:22px 14px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border);
  box-shadow:var(--shadow);
  font-family:inherit; text-align:center;
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
/* הזוהר יושב בפינה העליונה של האריח וצף פנימה במגע */
.sc-subj::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:var(--glow-primary); opacity:.65;
  transition:opacity .3s var(--ease);
}
.sc-subj:nth-child(2)::before{ background:var(--glow-gold); }
.sc-subj:nth-child(3)::before{ background:var(--glow-purple); }
.sc-subj:nth-child(4)::before{ background:var(--glow-green); }
.sc-subj:hover{ box-shadow:var(--shadow-md); }
.sc-subj:hover::before{ opacity:1; }
.sc-subj:active{ transform:scale(.97); }
.sc-subj.is-on{
  border-color:var(--indigo-l);
  box-shadow:var(--shadow-glow);
}
.sc-subj.is-on::before{ opacity:1; }
.sc-subj-ic{
  font-size:30px; display:block; margin-bottom:8px;
  filter:drop-shadow(0 4px 10px rgba(13,21,38,.14));
}
/* שני ה-span היו inline בתוך .sc-subj שאינו flex, ולכן נדבקו
   למילה אחת — "מתמטיקהחשבון, אלגברה, הנדסה" — וה-margin-top
   שנכתב על התיאור מעולם לא חל. block מפריד ומחזיר אותו לתוקף. */
.sc-subj-t{ display:block; font-size:15px; font-weight:700; letter-spacing:-.2px; }
.sc-subj-s{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:3px; font-weight:500; }

/* ============================================================
   בורר כיתות
   ============================================================ */
.sc-grades{
  display:flex; gap:8px; overflow-x:auto; padding:4px 0 12px;
  -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.sc-grades::-webkit-scrollbar{ display:none; }
.sc-grade{
  flex:0 0 auto; min-width:50px; padding:12px 15px;
  border-radius:var(--radius-sm); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border);
  box-shadow:var(--shadow);
  font-family:inherit; font-size:15px; font-weight:700; color:var(--text-dim);
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.sc-grade:active{ transform:scale(.95); }
.sc-grade.is-on{
  background:var(--grad-primary);
  color:#fff; border-color:transparent; box-shadow:var(--shadow-glow);
}

/* ---------- מסלול-כיתות: הבאה בתור (זמינה למבחן מעבר) ---------- */
.sc-grade{ display:flex; flex-direction:column; align-items:center; gap:4px; }
/* "הבאה בתור" היא קריאה לפעולה, לא הישג — ולכן צבע המותג
   ולא זהב. זהב שמור למה שכבר הושג. */
.sc-grade.is-next{
  background:var(--grad-primary); color:#fff; border-color:transparent;
  box-shadow:var(--shadow-glow);
}
.sc-grade-lock{ font-size:10px; font-weight:700; opacity:.85; white-space:nowrap; }

/* ---------- מסלול-כיתות: נעולה — אותה שפה כמו .sc-topic.is-wait ---------- */
.sc-grade.is-locked{
  opacity:.55; border-style:dashed; cursor:default; box-shadow:none;
}
.sc-grade.is-locked:active{ transform:none; }

/* ============================================================
   רשימת נושאים
   ============================================================ */
.sc-topics{ display:flex; flex-direction:column; gap:10px; }
.sc-topic{
  display:flex; align-items:center; gap:13px;
  padding:16px 15px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  font-family:inherit; text-align:start; box-shadow:var(--shadow); color:var(--text);
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.sc-topic:hover{ box-shadow:var(--shadow-md); border-color:rgba(99,102,241,.26); }
.sc-topic:active{ transform:scale(.985); }
.sc-topic-n{
  width:38px; height:38px; flex:0 0 38px;
  display:flex; align-items:center; justify-content:center;
  border-radius:13px; font-size:13px; font-weight:800;
  background:linear-gradient(145deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border); color:var(--text-dim);
  box-shadow:var(--shadow-inset);
}
.sc-topic.is-done .sc-topic-n{
  background:var(--grad-green);
  color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(22,163,74,.34);
}
/* צומת ההדגמה — נראה נעול אבל לחיץ (הוא פותח את שער הפתיחה),
   ולכן לא משתמשים ב-cursor:not-allowed כמו ב-.sk-node.is-locked */
/* ⚠️ תיקון: נעול וכבוש נראו זהים.
   שניהם צוירו ב---grad-gold על אותו .sc-topic-n, וההבדל היחיד
   היה מסגרת מקווקוות בעטיפה. כלומר צומת שהתלמיד כבש נראה
   בדיוק כמו צומת שהוא לא יכול בכלל להיכנס אליו — בדיוק ההפך
   ממה שמסלול התקדמות אמור לשדר.
   נעול = אפור ומושתק. כבוש = זהב. */
.sc-topic.is-locked{ border-style:dashed; opacity:.72; }
.sc-topic.is-locked .sc-topic-n{
  background:var(--surface-3); color:var(--text-dim);
  border-color:var(--border); box-shadow:none;
}
.sc-topic.is-locked .sc-topic-s{ color:var(--text-dim); font-weight:600; }
.sc-topic-b{ flex:1; min-width:0; }
.sc-topic-t{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.sc-topic-s{ display:block; font-size:12px; color:var(--text-dim); margin-top:3px; }
.sc-topic-go{ font-size:17px; color:var(--text-dim); }

/* ---------- צמתי המסלול ---------- */

/* נכבש (80%+) — הצומת היחיד שפותח את הבא אחריו */
.sc-topic.is-mastered .sc-topic-n{
  background:var(--grad-gold); color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(245,158,11,.34);
}
.sc-topic.is-mastered{ border-color:rgba(245,158,11,.3); }

/* ממתין לקודם. cursor:default ולא not-allowed: זו לא שגיאה
   אלא סדר — הלחיצה מסבירה מה פותח אותו. */
.sc-topic.is-wait{
  opacity:.62; border-style:dashed; cursor:default; box-shadow:none;
}
.sc-topic.is-wait:hover{ box-shadow:none; border-color:var(--border); }
.sc-topic.is-wait:active{ transform:none; }
.sc-topic.is-wait .sc-topic-n{ background:var(--surface-2); }

/* ---------- פס ההתקדמות של הכיתה ---------- */
.sc-chain{ margin:0 0 14px; }
.sc-chain-bar{
  height:8px; border-radius:999px; overflow:hidden;
  background:var(--surface-3); border:1px solid var(--border-soft);
}
/* התקדמות = ציאן. פס מילוי אינו נושא טקסט, ולכן הגוון הבהיר. */
.sc-chain-fill{
  height:100%; border-radius:999px; background:var(--fill-cyan);
  transition:width .5s var(--ease);
}
.sc-chain-tx{
  margin-top:6px; font-size:11.5px; font-weight:600; color:var(--text-dim);
}

/* תגית מסלול היחידות על כרטיס המקצוע */
.sc-subj-track{
  position:absolute; inset-block-start:9px; inset-inline-end:9px;
  padding:2px 7px; border-radius:999px;
  background:var(--surface-3); border:1px solid var(--border-soft);
  font-size:10px; font-weight:800; color:var(--text-dim);
}

/* מצב הצומת בראש מסך הנושא */
.tp-node{
  display:inline-block; margin-top:8px; padding:5px 12px; border-radius:999px;
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:12px; font-weight:700; color:var(--text-dim);
}
.tp-node.is-mastered{
  background:var(--grad-gold); color:#fff; border-color:transparent;
}

/* ============================================================
   ראש מסך נושא ובוררי מצב
   ============================================================ */
.tp-head{
  padding:24px 18px; margin-bottom:18px; text-align:center;
  border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow-md);
  position:relative; overflow:hidden; isolation:isolate;
}
.tp-head::after{
  content:""; position:absolute; inset-inline-end:-40px; top:-50px;
  width:150px; height:150px; border-radius:50%; z-index:-1;
  background:var(--glow-primary);
}
.tp-ic{ font-size:42px; margin-bottom:9px; filter:drop-shadow(0 6px 16px rgba(13,21,38,.18)); }
.tp-head h2{ margin:0 0 5px; font-size:21px; font-weight:800; letter-spacing:-.4px; }
.tp-head p{ margin:0; font-size:13.5px; color:var(--text-dim); }

.tp-modes{ display:flex; flex-direction:column; gap:12px; }
.tp-mode{
  padding:18px 17px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1.5px solid var(--border);
  font-family:inherit; text-align:start; box-shadow:var(--shadow); color:var(--text);
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.tp-mode:hover{ box-shadow:var(--shadow-md); }
.tp-mode:active{ transform:scale(.985); }
.tp-mode-h{ display:flex; align-items:center; gap:10px; }
.tp-mode-ic{ font-size:24px; filter:drop-shadow(0 4px 10px rgba(13,21,38,.16)); }
.tp-mode-t{ font-size:15.5px; font-weight:800; letter-spacing:-.25px; }
.tp-mode-s{ margin:8px 0 0; font-size:12.5px; color:var(--text-dim); line-height:1.55; }
.tp-mode.is-challenge{
  border-color:rgba(245,158,11,.45);
  background:linear-gradient(150deg,rgba(251,191,36,.10),transparent 70%);
}
.tp-mode.is-challenge:hover{ box-shadow:var(--shadow-gold); }

/* המבחן המלא הוא הפעולה הראשית במסך התאוריה — הכרטיס הבולט */
.tp-mode.is-exam{
  border-color:rgba(99,102,241,.45);
  background:linear-gradient(150deg,rgba(99,102,241,.12),transparent 70%);
}
.tp-mode.is-exam:hover{ box-shadow:var(--glow-primary); }

.tp-offline{
  margin-top:16px; padding:12px 14px; border-radius:var(--radius-sm);
  background:rgba(245,158,11,.10); border:1px solid rgba(245,158,11,.25);
  font-size:12.5px; color:var(--gold-ink); text-align:center;
}

.qz{ display:flex; flex-direction:column; min-height:100dvh; padding:calc(var(--safe-top) + 12px) 16px calc(var(--safe-bottom) + 16px); max-width:640px; margin:0 auto; }

/* ------------------------------------------------------------
   הסבב תופס את הבמה כולה — ולא 100dvh *ועוד* ריפודים
   ------------------------------------------------------------
   .qz מבקש 100dvh, אבל הוא יושב בתוך .gs-screen (ריפוד 16px)
   שיושב בתוך .gs-stage (ריפוד השטח הבטוח במצב אימרסיבי).
   שלושת הריפודים נערמים *מעל* גובה החלון, ולכן שורת
   💡 הסבר / ⏭️ דילוג נדחקת אל מתחת לקצה המסך.

   נמדד: במחשב 10px מתחת לקצה וטווח גלילה של 42px בלבד;
   באייפון עם מגרעת זה 125px, וסרגל ספארי התחתון בולע בדיוק
   גלילה קצרה כזו — הכפתורים נראים על המסך אבל לא ניתנים
   ללחיצה. גרוע מכך, 100dvh גדל תוך כדי שהסרגל מתכווץ, כך
   שהגלילה "בורחת" קדימה.

   .qz כבר מטפל בשטח הבטוח בעצמו, ולכן כאן מאפסים סביבו.
   ------------------------------------------------------------ */
body.gs-quiz .gs-stage{ padding:0; }
body.gs-quiz .gs-screen{ padding:0; max-width:none; }

/* איפוס הריפוד מבטל גם את השטח שהבמה שמרה לסרגל התחתון
   ולבאנר. חמשת הצרכנים של המנוע קוראים ל-GS.immersive(true)
   לפני השיגור וזה מספיק — אבל "מספיק כל עוד כולם זוכרים"
   הוא בדיוק הסוג של תלות ששוברת מסך שישי. הדגל gs-quiz
   מסתיר את הכרום בעצמו, באותם ערכים בדיוק כמו gs-immersive. */
body.gs-quiz .gs-topbar{ transform:translateY(-100%); }
body.gs-quiz .gs-tabbar{ transform:translateY(140%); }
body.gs-quiz .gs-ad-anchor{ display:none !important; }

.qz-top{ display:flex; align-items:center; gap:12px; }
.qz-x{
  width:36px; height:36px; flex:0 0 36px; border-radius:12px;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-dim); font-size:15px; cursor:pointer; font-family:inherit;
  transition:transform .14s var(--ease);
}
.qz-x:active{ transform:scale(.9); }
.qz-progress{ flex:1; min-width:0; }
.qz-bar{
  height:9px; border-radius:var(--radius-pill); background:var(--border); overflow:hidden;
  box-shadow:inset 0 1px 2px rgba(13,21,38,.10);
}
.qz-bar-fill{
  height:100%; width:0%; border-radius:var(--radius-pill);
  background:var(--grad-indigo);
  box-shadow:0 0 12px rgba(99,102,241,.55);
  transition:width .4s var(--ease-out);
}
.qz-count{ font-size:11px; color:var(--text-dim); margin-top:4px; text-align:center; }
.qz-stats{ display:flex; align-items:center; gap:8px; flex:0 0 auto; }
.qz-hearts{ font-size:14px; letter-spacing:-1px; }
.qz-streak{ font-size:12px; font-weight:800; color:var(--gold-ink); }

.qz-pace-row{ display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:14px; }
.qz-pace{
  padding:7px 14px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border);
  font-family:inherit; font-size:12px; font-weight:600; color:var(--text-dim); cursor:pointer;
  transition:transform .14s var(--ease);
}
.qz-pace:active{ transform:scale(.94); }
.qz-topic{ font-size:12px; color:var(--text-dim); font-weight:600; }

.qz-timer{
  height:5px; margin-top:12px; border-radius:var(--radius-pill);
  background:var(--border); overflow:hidden;
}
.qz-timer-fill{
  height:100%; width:100%;
  background:linear-gradient(90deg,var(--green),var(--gold) 55%,var(--red));
}

/* השאלה ממורכזת אנכית, אבל לא יותר מדי: על מסך שולחני גבוה
   justify-content:center לבדו דחף שאלה בת שורה אחת אל אמצע
   עמודה בגובה 100dvh, והתלמיד קיבל שאלה שצפה בחלל ריק. הריווח
   העליון תחום עכשיו, ולכן השאלה מתחילה קרוב לראש המסך גם על
   צג גדול — ובנייד שום דבר לא משתנה. */
.qz-body{
  flex:1; display:flex; flex-direction:column; justify-content:flex-start;
  padding:18px 0; gap:16px;
}
@media (min-height:760px){
  .qz-body{ justify-content:center; padding-top:min(6vh,54px); }
}

/* כרטיס השאלה — התרחיש, השרטוט, השאלה וההערה הם עצם אחד ולא
   ארבעה בלוקים שמרחפים. זה גם מה שנותן לשרטוט מסגרת להישען
   עליה, כמו בדף תרגול מודפס. */
.qz-card{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius); box-shadow:var(--shadow);
  padding:20px 18px;
  display:flex; flex-direction:column; gap:14px;
}

/* נוסח התרחיש המשותף */
.qz-stem{
  font-size:15px; line-height:1.7; color:var(--text-dim);
  text-align:right; unicode-bidi:plaintext;
  padding-inline-start:12px; border-inline-start:3px solid var(--border);
}

.qz-img{ text-align:center; }
.qz-img img{ max-width:100%; max-height:180px; border-radius:var(--radius); }

/* השרטוט לא נמתח לרוחב הכרטיס. ה-viewBox הוא כ-320 רוחב,
   ו-max-width:100% לבדו ניפח אותו לרוחב העמודה — כלומר גובה
   של מעל 500px, שדחף את השאלה ואת האפשרויות אל מתחת לקפל.
   התקרה היא הגודל שבו השרטוט תוכנן, לא הגודל שהמכל מרשה. */
.qz-img svg{
  display:block; margin:0 auto;
  width:100%; max-width:340px; max-height:260px; height:auto;
}

.qz-question{
  font-size:22px; font-weight:800; line-height:1.5; text-align:center;
  padding:0 4px; letter-spacing:-.4px;
  unicode-bidi:plaintext; text-wrap:balance;
}

/* "שימו לב" — נתון שאי אפשר לענות בלעדיו */
.qz-note{
  font-size:13px; line-height:1.6; text-align:right;
  color:var(--gold-ink); background:rgba(234,179,8,.10);
  border:1px solid rgba(234,179,8,.28); border-radius:var(--radius-sm);
  padding:9px 12px; unicode-bidi:plaintext;
}

.qz-options{ display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.qz-opt{
  padding:19px 13px; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--surface); border:2px solid var(--border);
  box-shadow:var(--shadow);
  font-family:inherit; font-size:16px; font-weight:600; color:var(--text);
  min-height:64px;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
  unicode-bidi:plaintext;
}
.qz-opt:hover:not(:disabled){ box-shadow:var(--shadow-md); border-color:rgba(99,102,241,.34); }
.qz-opt:active:not(:disabled){ transform:scale(.97); box-shadow:var(--shadow); }
.qz-opt:disabled{ cursor:default; }
.qz-opt.is-correct{
  background:linear-gradient(135deg,rgba(34,197,94,.20),rgba(21,128,61,.08));
  border-color:var(--green); color:var(--green-ink);
  box-shadow:0 6px 22px rgba(22,163,74,.28);
}
.qz-opt.is-wrong{
  background:linear-gradient(135deg,rgba(248,113,113,.18),rgba(220,38,38,.06));
  border-color:var(--red); color:var(--red-ink);
  box-shadow:0 6px 22px rgba(220,38,38,.24);
  animation:qzShake .4s var(--ease);
}
.qz-opt.is-dim{ opacity:.4; box-shadow:none; }
@keyframes qzShake{
  0%,100%{ transform:translateX(0); }
  25%{ transform:translateX(-6px); } 75%{ transform:translateX(6px); }
}

.qz-feedback{
  margin-top:18px; padding:16px; border-radius:var(--radius);
  box-shadow:var(--shadow);
  animation:gsFadeUp .26s var(--ease-out);
}
.qz-feedback.is-ok{ background:rgba(34,197,94,.12); border:1px solid rgba(22,163,74,.30); }
.qz-feedback.is-bad{ background:rgba(248,113,113,.10); border:1px solid rgba(220,38,38,.26); }
.qz-fb-icon{ font-size:19px; font-weight:800; margin-bottom:5px; }
.qz-feedback.is-ok .qz-fb-icon{ color:var(--green-ink); }
.qz-feedback.is-bad .qz-fb-icon{ color:var(--red-ink); }
.qz-fb-text{ font-size:14px; line-height:1.6; unicode-bidi:plaintext; }
.qz-fb-sol{
  margin-top:12px; padding-top:12px; border-top:1px dashed var(--border);
  font-size:13.5px; color:var(--text-dim); line-height:1.65; unicode-bidi:plaintext;
}

/* דביקה לתחתית: משוב ארוך (הסבר מלא) מאריך את העמוד מעבר
   לחלון, ואז שורת הפעולות הייתה נודדת שוב מתחת לקצה. סטיקי
   מבטיח שהיא בהישג אצבע בכל אורך תוכן, ולא רק כשהעמוד קצר. */
.qz-actions{
  position:sticky; bottom:0; z-index:3;
  display:flex; gap:10px; flex-wrap:wrap;
  margin-top:16px; padding:10px 0 4px;
  background:linear-gradient(to top, var(--bg) 74%, transparent);
}
.qz-act{
  flex:1; min-width:120px; padding:13px; border-radius:var(--radius-sm); cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border);
  font-family:inherit; font-size:13.5px; font-weight:600; color:var(--text-dim);
  transition:transform .14s var(--ease);
}
.qz-act:active{ transform:scale(.97); background:var(--surface-3); }
.qz-next{ flex:1 0 100%; margin-top:4px !important; }

.qz-end{
  min-height:100dvh; display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
  padding:calc(var(--safe-top) + 24px) 22px calc(var(--safe-bottom) + 24px);
  max-width:440px; margin:0 auto;
  animation:gsFadeUp .3s var(--ease);
}
.qz-end-ic{
  font-size:62px; margin-bottom:12px;
  filter:drop-shadow(0 10px 26px rgba(13,21,38,.22));
  animation:qzPop .45s var(--ease-out);
}
@keyframes qzPop{ from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:none; } }
.qz-end h2{ margin:0 0 6px; font-size:25px; font-weight:800; letter-spacing:-.5px; }
.qz-end p{ margin:0 0 22px; font-size:14.5px; color:var(--text-dim); }
.qz-end-stats{ display:grid; grid-template-columns:repeat(3,1fr); gap:11px; width:100%; margin-bottom:8px; }
.qz-stat{
  padding:17px 7px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow);
}
.qz-stat .n{ font-size:22px; font-weight:800; letter-spacing:-.5px; }
.qz-stat .l{ font-size:11px; color:var(--text-dim); margin-top:3px; }
.qz-end-note{
  margin-top:14px; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border);
  font-size:12.5px; color:var(--text-dim);
}
.qz-end .gs-btn{ width:100%; }

/* ===== רגע של שמחה — חגיגת סיום סבב מוצלח (חזותי בלבד) ===== */
.qz-end.is-win .qz-end-ic,
.qz-end.is-perfect .qz-end-ic{ animation:qzPop .45s var(--ease-out), qzBounce 1.4s .45s ease-in-out infinite; }
.qz-end.is-perfect h2{
  background:linear-gradient(90deg,#f59e0b,#ef4444,#a855f7,#3b82f6);
  -webkit-background-clip:text; background-clip:text; color:transparent;
}
@keyframes qzBounce{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(-8px); } }
.qz-confetti{
  position:fixed; top:-16px; width:10px; height:14px; border-radius:2px;
  pointer-events:none; z-index:60; opacity:.95;
  animation:qzFall 2.4s linear forwards;
}
@keyframes qzFall{
  0%{ transform:translateY(-12vh) rotate(0); opacity:1; }
  100%{ transform:translateY(106vh) rotate(560deg); opacity:0; }
}
@media (prefers-reduced-motion: reduce){
  .qz-confetti{ display:none; }
  .qz-end.is-win .qz-end-ic,
  .qz-end.is-perfect .qz-end-ic{ animation:qzPop .45s var(--ease-out); }
}

@media (min-width:768px){
  .qz-options{ gap:14px; }
  .qz-question{ font-size:24px; }
}
/* ============================================================
   כרטיס "המשך מאיפה שהפסקתם"  ·  Step 4
   ============================================================ */
.hm-resume{ margin:0 0 18px; }

.hm-resume-btn{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:16px 15px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1.5px solid rgba(99,102,241,.35);
  box-shadow:var(--shadow-md); color:var(--text);
  font-family:inherit; text-align:start;
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.hm-resume-btn:active{ transform:scale(.985); }

.hm-resume-ic{
  flex:0 0 46px; width:46px; height:46px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:24px;
  background:linear-gradient(145deg,var(--surface-2),var(--surface-3));
  border:1px solid var(--border);
}
.hm-resume-b{ flex:1; min-width:0; }
.hm-resume-k{
  display:block; font-size:10.5px; font-weight:800; letter-spacing:.03em;
  color:var(--brand,#6366f1);
}
.hm-resume-t{
  display:block; margin-top:2px; font-size:16px; font-weight:800;
  letter-spacing:-.3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.hm-resume-s{
  display:block; margin-top:3px; font-size:11.5px; color:var(--text-dim); font-weight:600;
}
.hm-resume-go{ flex:0 0 auto; font-size:20px; color:var(--text-dim); }

/* חזרה על נושא שהתיישן — כתום, לא אדום: זו המלצה ולא כישלון.
   וגם לא זהב: "התיישן" הוא ההפך מהישג, ובזהב הוא נקרא כפרס. */
.hm-resume.is-stale .hm-resume-btn{ border-color:rgba(234,88,12,.45); }
.hm-resume.is-stale .hm-resume-k{ color:var(--warn-ink); }
.hm-resume.is-stale .hm-resume-ic{
  background:var(--grad-warn); border-color:transparent; color:#fff;
}

/* ============================================================
   צומת שהתיישן במסלול  ·  Step 5
   הכיבוש לא בוטל — רק סימון שכדאי לחזור
   ============================================================ */
.sc-topic.is-stale{ border-color:rgba(234,88,12,.42); }
.sc-topic.is-stale .sc-topic-n{
  background:var(--grad-warn); color:#fff; border-color:transparent;
  box-shadow:0 4px 14px rgba(234,88,12,.3);
}
.sc-topic.is-stale .sc-topic-s{ color:var(--warn-ink); font-weight:700; }

/* ============================================================
   מבחן המיפוי  —  כניסה, מבחן ותוצאה
   ------------------------------------------------------------
   שלוש מחלקות עיקריות: .pl-entry (הכניסה מתוך המסלול),
   .pl-quiz (המבחן עצמו) ו-.pl-result (התוצאה). המבחן מכוון
   לקריאה במרכז המסך בלי הסחות — אין ניקוד, אין מונה נכונות,
   ואין צבע אדום: זו מדידה, לא בחינה.
   ============================================================ */

/* ---------- כרטיס הכניסה ---------- */
.pl-entry{
  display:flex; align-items:center; gap:13px; width:100%;
  margin-top:16px; padding:15px 16px; cursor:pointer;
  border-radius:var(--radius); text-align:start; font-family:inherit;
  color:var(--text); background:var(--surface);
  border:1.5px solid rgba(99,102,241,.30);
  box-shadow:var(--shadow);
  transition:transform .16s var(--ease), box-shadow .22s var(--ease);
}
.pl-entry:hover{ box-shadow:var(--shadow-md); border-color:rgba(99,102,241,.5); }
.pl-entry:active{ transform:scale(.985); }
.pl-entry-ic{
  flex:0 0 auto; width:44px; height:44px; border-radius:14px;
  display:flex; align-items:center; justify-content:center; font-size:21px;
  background:var(--grad-indigo); color:#fff;
  box-shadow:0 6px 18px rgba(79,70,229,.30);
}
.pl-entry-tx{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.pl-entry-tx b{ font-size:14.5px; font-weight:800; letter-spacing:-.3px; }
.pl-entry-tx small{ font-size:12px; color:var(--text-dim); line-height:1.5; }
.pl-entry-go{ flex:0 0 auto; font-size:19px; color:var(--text-dim); }

/* ---------- מסך ההסבר ---------- */
.pl-intro{
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:26px 20px 20px;
  text-align:center; box-shadow:var(--shadow);
}
.pl-intro-ic{
  width:60px; height:60px; margin:0 auto 12px; border-radius:20px;
  display:flex; align-items:center; justify-content:center; font-size:30px;
  background:var(--grad-indigo); color:#fff;
  box-shadow:0 10px 26px rgba(79,70,229,.32);
}
.pl-intro h3{ margin:0 0 16px; font-size:19px; font-weight:800; letter-spacing:-.4px; }
.pl-steps{
  list-style:none; margin:0 0 20px; padding:0;
  display:flex; flex-direction:column; gap:10px; text-align:start;
}
.pl-steps li{
  padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:13.5px; line-height:1.6; color:var(--text-dim);
}
.pl-steps li b{ color:var(--text); font-weight:800; }
.pl-cta{
  display:block; width:100%; padding:16px; cursor:pointer;
  border:none; border-radius:var(--radius-sm); font-family:inherit;
  font-size:16px; font-weight:800; color:#fff;
  background:var(--grad-indigo); box-shadow:0 8px 24px rgba(79,70,229,.30);
  transition:transform .16s var(--ease);
}
.pl-cta:active{ transform:scale(.98); }
.pl-ghost{
  display:block; width:100%; margin-top:9px; padding:12px; cursor:pointer;
  background:none; border:none; font-family:inherit;
  font-size:13.5px; font-weight:600; color:var(--text-dim);
}

/* ---------- המבחן ---------- */
.pl-quiz{ display:flex; flex-direction:column; }
.pl-bar-row{ display:flex; align-items:center; gap:11px; }
.pl-exit{
  flex:0 0 auto; width:32px; height:32px; border-radius:50%; cursor:pointer;
  background:var(--surface-2); border:1px solid var(--border);
  color:var(--text-dim); font-size:14px; font-weight:800;
  font-family:inherit; line-height:1;
}
.pl-exit:active{ transform:scale(.92); }
.pl-bar-wrap{
  flex:1; height:7px; border-radius:var(--radius-pill);
  background:var(--surface-3); overflow:hidden;
}
.pl-bar{
  height:100%; width:0; border-radius:var(--radius-pill);
  background:var(--grad-indigo); transition:width .32s var(--ease-out);
}
.pl-count{
  flex:0 0 auto; font-size:12.5px; font-weight:800;
  color:var(--text-dim); font-variant-numeric:tabular-nums;
}
.pl-hint{
  text-align:center; font-size:12px; color:var(--text-dim);
  margin:13px 0 20px; line-height:1.5;
}
.pl-q{ margin-bottom:22px; }
.pl-q-img{ display:block; max-width:100%; max-height:170px; margin:0 auto 14px; border-radius:var(--radius); }
.pl-q-t{
  font-size:21px; font-weight:800; line-height:1.5; text-align:center;
  letter-spacing:-.4px; padding:0 4px; unicode-bidi:plaintext;
}
.pl-opts{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.pl-opt{
  padding:18px 12px; min-height:62px; cursor:pointer;
  border-radius:var(--radius-sm); background:var(--surface);
  border:2px solid var(--border); box-shadow:var(--shadow);
  font-family:inherit; font-size:16px; font-weight:600; color:var(--text);
  unicode-bidi:plaintext;
  transition:transform .16s var(--ease), box-shadow .22s var(--ease), opacity .22s var(--ease);
}
.pl-opt:hover:not(:disabled){ box-shadow:var(--shadow-md); border-color:rgba(99,102,241,.34); }
.pl-opt:active:not(:disabled){ transform:scale(.97); }
.pl-opt:disabled{ cursor:default; }
/* משוב שקט בכוונה — אין כאן "טעית", ולכן גם אין אדום ואין רעידה */
.pl-opt.is-ok{
  border-color:var(--green); color:var(--green-ink);
  background:linear-gradient(135deg,rgba(34,197,94,.16),rgba(21,128,61,.05));
}
.pl-opt.is-miss{ opacity:.45; box-shadow:none; }

/* ---------- התוצאה ---------- */
.pl-result{
  position:relative; margin-top:30px; padding:36px 20px 20px;
  text-align:center; border-radius:var(--radius-lg);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow-md);
}
.pl-result-badge{
  position:absolute; top:-26px; inset-inline-start:50%; transform:translateX(50%);
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:27px;
  background:var(--grad-indigo); color:#fff;
  box-shadow:0 10px 26px rgba(79,70,229,.38);
}
.pl-result-cap{ font-size:13px; font-weight:600; color:var(--text-dim); }
.pl-result-grade{
  font-size:38px; font-weight:800; line-height:1.2;
  letter-spacing:-1.2px; margin-top:2px;
}
.pl-result-topic{ font-size:13px; color:var(--text-dim); margin-top:3px; }

/* סולם הכיתות — התוצאה כמיקום על ציר ולא כמספר מרחף */
.pl-scale{
  display:flex; justify-content:center; align-items:flex-end; gap:5px;
  margin:20px 0 6px;
}
.pl-dot{
  flex:0 0 auto; width:20px; height:20px; border-radius:6px;
  background:var(--surface-3); position:relative;
  transition:transform .2s var(--ease-out);
}
.pl-dot i{
  font-style:normal; font-size:9px; font-weight:800;
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
  color:var(--text-dim);
}
.pl-dot.is-done{ background:var(--surface-3); }
.pl-dot.is-done i{ color:var(--text); opacity:.5; }
/* רצועת אי-הוודאות: המיפוי מדויק עד כדי כיתה, ועדיף שזה ייראה */
.pl-dot.is-near{ background:rgba(99,102,241,.24); }
.pl-dot.is-near i{ color:var(--text); opacity:.75; }
.pl-dot.is-on{
  width:32px; height:32px; border-radius:10px;
  background:var(--grad-indigo); transform:translateY(-4px);
  box-shadow:0 6px 16px rgba(79,70,229,.42);
}
.pl-dot.is-on i{ color:#fff; font-size:13px; }

.pl-result-sum{
  font-size:14px; font-weight:600; color:var(--text); margin-top:14px; line-height:1.6;
}
.pl-result-note{
  margin:14px 0 18px; padding:12px 14px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:13px; font-weight:600; color:var(--text-dim); line-height:1.6;
}

@media (max-width:340px){
  .pl-opts{ grid-template-columns:1fr; }
  .pl-dot{ width:17px; height:17px; }
  .pl-dot.is-on{ width:27px; height:27px; }
}

/* ============================================================
   מבחן תאוריה  (screens/theory.js)
   ------------------------------------------------------------
   המבחן אינו סבב QuizEngine ולכן גם אינו יורש את qz-*. הוא
   מקבל שפה משלו, ובכוונה מאופקת: שעון, מונה ושתי מדידות.
   הצבע היחיד שקופץ הוא זה של הטעות האחרונה שנשארה.
   ============================================================ */

/* --- בורר הנושאים --- */
.th-topics:empty{ display:none; }
.th-chips{
  display:flex; flex-wrap:wrap; gap:8px; margin-bottom:4px;
}
.th-chip{ font-size:13px; }
.th-chip.is-on{
  background:var(--grad-primary); color:#fff; border-color:transparent;
  box-shadow:var(--glow-primary);
}
.th-chip-n{
  opacity:.65; font-size:11px; font-weight:700; margin-inline-start:2px;
}

/* --- בחירת סוג המבחן --- */
.ex-pick{ display:grid; gap:12px; margin-bottom:16px; }
.ex-card-p{
  display:block; width:100%; text-align:start; cursor:pointer;
  padding:16px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow); transition:transform .16s var(--ease),
             border-color .16s var(--ease), box-shadow .16s var(--ease);
}
.ex-card-p:hover{
  transform:translateY(-2px); border-color:var(--border-soft);
  box-shadow:var(--shadow-md);
}
.ex-card-p:active{ transform:translateY(0) scale(.99); }
.ex-card-h{ display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.ex-card-ic{ font-size:26px; line-height:1; }
.ex-card-t{ font-size:17px; font-weight:800; color:var(--text); }
.ex-card-f{
  display:flex; flex-wrap:wrap; gap:6px; list-style:none; margin:0; padding:0;
}
.ex-card-f li{
  font-size:12px; font-weight:700; color:var(--text-dim);
  background:var(--surface-2); border:1px solid var(--border-soft);
  border-radius:var(--radius-pill); padding:4px 10px;
}

/* --- שורת המדידה --- */
.ex-bar{
  display:flex; align-items:center; gap:12px; margin-bottom:18px;
  padding:12px 14px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
}
.ex-bar-mid{ flex:1; min-width:0; }
.ex-clock{
  font-size:19px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums; letter-spacing:.5px;
}
.ex-clock.is-low{ color:var(--red-ink); }
.ex-count{ font-size:12px; font-weight:700; color:var(--text-dim); margin-bottom:6px; }
.ex-prog{
  height:6px; border-radius:99px; background:var(--surface-3); overflow:hidden;
}
.ex-prog-f{
  height:100%; width:0; border-radius:99px; background:var(--grad-primary);
  transition:width .28s var(--ease-out);
}
.ex-mist{
  font-size:14px; font-weight:800; color:var(--text-dim);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.ex-mist.is-last{ color:var(--red-ink); }

/* --- השאלה --- */
.ex-img{ text-align:center; margin-bottom:14px; }
.ex-img img{
  max-width:100%; max-height:210px; border-radius:var(--radius-sm);
  background:var(--surface-2);
}
.ex-q{
  font-size:18px; font-weight:800; color:var(--text);
  line-height:1.55; margin:0 0 16px;
}
.ex-opts{ display:grid; gap:10px; }
.ex-opt{
  display:flex; align-items:flex-start; gap:10px; width:100%;
  text-align:start; cursor:pointer;
  padding:14px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border);
  font-size:15px; font-weight:600; color:var(--text); line-height:1.5;
  transition:border-color .14s var(--ease), transform .14s var(--ease);
}
.ex-opt:hover{ border-color:var(--border-soft); }
.ex-opt:active{ transform:scale(.99); }
.ex-opt-n{
  flex:0 0 auto; width:22px; height:22px; border-radius:50%;
  background:var(--surface-3); color:var(--text-dim);
  font-size:12px; font-weight:800; text-align:center; line-height:22px;
}
.ex-opt-t{ flex:1; min-width:0; }

.ex-quit{
  display:block; margin:22px auto 0; padding:8px 16px;
  background:none; border:none; cursor:pointer;
  font-size:13px; font-weight:700; color:var(--text-dim);
  text-decoration:underline; text-underline-offset:3px;
}

/* --- הדוח --- */
.ex-end{ text-align:center; }
.ex-end-ic{ font-size:52px; line-height:1; margin-bottom:8px; }
.ex-end h2{ font-size:24px; font-weight:800; color:var(--text); margin:0 0 6px; }
.ex-end.is-pass h2{ color:var(--green-ink); }
.ex-end.is-fail h2{ color:var(--red-ink); }
.ex-end-sub{ font-size:14px; font-weight:600; color:var(--text-dim); margin:0 0 18px; }
.ex-end-stats{ display:flex; gap:10px; justify-content:center; margin-bottom:16px; }
.ex-stat{
  flex:1; max-width:130px; padding:12px 8px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.ex-stat b{
  display:block; font-size:19px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ex-stat span{ display:block; font-size:11px; font-weight:700; color:var(--text-dim); margin-top:3px; }
.ex-end-note{
  margin:0 0 14px; padding:11px 14px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:13px; font-weight:600; color:var(--text-dim); line-height:1.6;
}
.ex-end-note.is-warn{ border-color:var(--warn-ink); color:var(--text); }
.ex-end-btns{ display:grid; gap:10px; margin-top:18px; }

/* --- חזרה על הטעויות --- */
.ex-rev-t{ text-align:start; margin-top:20px; }
.ex-rev{ display:grid; gap:10px; text-align:start; }
.ex-rev-i{
  padding:14px; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border);
  border-inline-start:3px solid var(--red);
}
.ex-rev-q{
  font-size:14px; font-weight:700; color:var(--text);
  line-height:1.55; margin-bottom:8px;
}
.ex-rev-n{
  display:inline-block; min-width:20px; margin-inline-end:6px;
  font-size:11px; font-weight:800; color:var(--text-dim);
}
.ex-rev-img{ margin:0 0 8px; }
.ex-rev-img img{
  max-width:120px; max-height:90px; border-radius:6px; background:var(--surface-2);
}
.ex-rev-c{ font-size:13px; font-weight:600; color:var(--red-ink); margin-bottom:3px; }
.ex-rev-a{ font-size:13px; font-weight:700; color:var(--green-ink); margin-bottom:6px; }
.ex-rev-s{
  font-size:12.5px; font-weight:500; color:var(--text-dim);
  line-height:1.6; padding-top:6px; border-top:1px solid var(--border-soft);
}
.ex-rev-tp{
  display:inline-block; margin-top:8px; padding:3px 9px;
  border-radius:var(--radius-pill); background:var(--surface-2);
  font-size:11px; font-weight:700; color:var(--text-dim);
}

@media (max-width:340px){
  .ex-end-stats{ flex-direction:column; }
  .ex-stat{ max-width:none; }
  .ex-bar{ gap:8px; padding:10px; }
  .ex-clock{ font-size:17px; }
}

/* --- מד המוכנות בהאב התאוריה --- */
.th-ready{
  margin-bottom:18px; padding:14px 16px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border);
}
.th-ready:empty{ display:none; }
.th-ready-empty{
  font-size:13px; font-weight:600; color:var(--text-dim); line-height:1.6;
}
.th-ready-h{ display:flex; align-items:baseline; gap:8px; margin-bottom:9px; }
.th-ready-t{ font-size:14px; font-weight:800; color:var(--text); }
.th-ready-p{
  margin-inline-start:auto; font-size:12px; font-weight:700;
  color:var(--text-dim); font-variant-numeric:tabular-nums;
}
.th-ready-bar{
  height:8px; border-radius:99px; background:var(--surface-3);
  overflow:hidden; margin-bottom:12px;
}
.th-ready-bar span{
  display:block; height:100%; border-radius:99px;
  background:var(--grad-primary); transition:width .4s var(--ease-out);
}
.th-ready-row{ display:flex; gap:8px; }
.th-rs{
  flex:1; text-align:center; padding:8px 4px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.th-rs b{
  display:block; font-size:17px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.th-rs span{ display:block; font-size:10.5px; font-weight:700; color:var(--text-dim); margin-top:2px; }
.th-weak{
  margin-top:11px; padding:9px 12px; border-radius:var(--radius-sm);
  background:rgba(239,68,68,.10); border:1px solid rgba(239,68,68,.22);
  font-size:12.5px; font-weight:600; color:var(--text); line-height:1.5;
}
.th-ready-btn{ margin-top:11px; width:100%; font-size:13.5px; }
.th-cov{
  margin:-6px 0 12px; font-size:12px; font-weight:600;
  color:var(--text-dim); line-height:1.5;
}

/* ============================================================
   מבחן מסכם ויומן המבחנים
   ------------------------------------------------------------
   הכרטיס יושב בסוף רשימת הנושאים של הכיתה וקבוע שם — הוא
   אינו נעלם אחרי שהמבחן עבר. השפה הוויזואלית מכוונת: זהב
   למה שכבר הושג (is-passed), ניטרלי לפני כן. ראו את ההערה
   ליד .sc-grade.is-next — אותו כלל בדיוק.
   ============================================================ */
.sc-exam{
  display:flex; align-items:center; gap:13px; width:100%;
  padding:16px 15px; border-radius:var(--radius); cursor:pointer;
  background:var(--surface); border:1px solid var(--border);
  box-shadow:var(--shadow); font-family:inherit; text-align:start;
  transition:transform .16s var(--ease), box-shadow .24s var(--ease);
}
.sc-exam:hover{ box-shadow:var(--shadow-md); border-color:rgba(99,102,241,.26); }
.sc-exam:active{ transform:scale(.985); }
.sc-exam.is-passed{ border-color:rgba(245,158,11,.34); }
.sc-exam-ic{
  flex:0 0 40px; width:40px; height:40px; border-radius:50%;
  display:flex; align-items:center; justify-content:center; font-size:19px;
  background:var(--surface-2); border:1px solid var(--border-soft);
}
.sc-exam.is-passed .sc-exam-ic{ background:var(--grad-gold); border-color:transparent; }
.sc-exam-b{ flex:1; min-width:0; }
.sc-exam-t{ display:block; font-size:14.5px; font-weight:700; letter-spacing:-.2px; }
.sc-exam-s{ display:block; font-size:12px; color:var(--text-dim); margin-top:3px; line-height:1.45; }
.sc-exam-go{ font-size:17px; color:var(--text-dim); }
.sc-exam-best{
  flex:0 0 auto; padding:5px 10px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:13px; font-weight:800; color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.sc-exam.is-passed .sc-exam-best{ color:var(--gold-ink); border-color:rgba(245,158,11,.32); }
.sc-exam-log{ margin-top:10px; }

/* ---------- יומן המבחנים (/exams) ---------- */
.ex-stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin:16px 0 18px;
}
.ex-stat{
  padding:12px 6px; text-align:center; border-radius:var(--radius-sm);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
}
.ex-stat-n{
  font-size:19px; font-weight:800; letter-spacing:-.5px;
  font-variant-numeric:tabular-nums;
}
.ex-stat-l{ font-size:10.5px; font-weight:700; color:var(--text-dim); margin-top:3px; line-height:1.3; }

.ex-group{
  margin-bottom:14px; padding:14px; border-radius:var(--radius);
  background:var(--surface); border:1px solid var(--border); box-shadow:var(--shadow);
}
.ex-group-h{ display:flex; align-items:center; gap:12px; }
.ex-group-ic{ font-size:26px; flex:0 0 auto; }
.ex-group-b{ flex:1; min-width:0; }
.ex-group-t{ display:block; font-size:14.5px; font-weight:800; letter-spacing:-.2px; }
.ex-group-s{ display:block; font-size:11.5px; color:var(--text-dim); margin-top:3px; }
.ex-group-best{
  flex:0 0 auto; padding:6px 11px; border-radius:var(--radius-pill);
  background:var(--surface-2); border:1px solid var(--border-soft);
  font-size:14px; font-weight:800; color:var(--text-dim);
  font-variant-numeric:tabular-nums;
}
.ex-group-best.is-pass{
  background:var(--grad-gold); color:#fff; border-color:transparent;
}

.ex-rows{ margin-top:12px; display:flex; flex-direction:column; gap:7px; }
.ex-row{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border-soft);
  /* פס צד במקום רקע צבעוני מלא: ארבעה ניסיונות ברצף עם רקע
     ירוק/אדום הופכים את הכרטיס לשלט חוצות. */
  border-inline-start-width:3px;
}
.ex-row.is-unlock{ border-inline-start-color:var(--gold); }
.ex-row.is-pass{   border-inline-start-color:var(--green); }
.ex-row.is-miss{   border-inline-start-color:var(--red); }
.ex-row-pct{
  flex:0 0 46px; font-size:15px; font-weight:800; color:var(--text);
  font-variant-numeric:tabular-nums;
}
.ex-row-b{ flex:1; min-width:0; }
.ex-row-t{ display:block; font-size:12.5px; font-weight:700; }
.ex-row-s{ display:block; font-size:11px; color:var(--text-dim); margin-top:2px; }

.ex-again{
  margin-top:12px; width:100%; padding:10px; border-radius:var(--radius-sm);
  background:var(--surface-2); border:1px solid var(--border); cursor:pointer;
  font-family:inherit; font-size:12.5px; font-weight:700; color:var(--text-dim);
}
.ex-again:active{ transform:scale(.99); }

@media (max-width:400px){
  .ex-stats{ grid-template-columns:repeat(2,1fr); }
}

/* הדגשת נתון בשאלה ובמשפט התשובה — המוסכמה של דפי התרגול.
   צבע ולא רק משקל: ב-font-weight 800 של השאלה, עוד הדגשה
   במשקל אינה נראית כלל. */
.qz-em{ color:var(--gold-ink); font-weight:900; }
.qz-question .qz-em{ text-decoration:underline; text-underline-offset:4px; text-decoration-thickness:2px; }