/* גופן Rubik — @import חייב לבוא ראשון בקובץ. נופל חזרה ל-Segoe UI
   אם הטעינה נכשלת. index.html מבצע preconnect כדי לקצר את הטעינה. */
@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap');

/* ════════════════════════════════════════════════════════════
   מחציות בקליק (web) — "פנקס שקט" (Calm Ledger) v4  ·  2026-08-11
   ────────────────────────────────────────────────────────────
   מה השתנה, ולמה:

   1. שכבה אחת במקום חמש. הקובץ הקודם היה בסיס + ארבע שכבות-על
      (PREMIUM LAYER, PREMIUM CARDS, POLISH v2, BOLD REVAMP v3),
      וכל אחת דרסה את קודמתה. אותו .card הוגדר בארבעה מקומות עם
      ארבעה רדיוסים — כלומר כל שינוי עתידי דרש לאתר איזו שכבה
      מנצחת. כאן יש הגדרה אחת לכל רכיב.

   2. נייבי → טורקיז. זה לא רענון אופנתי. האפליקציה משמשת שני
      הורים גרושים לתעד כסף על הילדים שלהם. כחול-מוסדי כהה קורא
      כמו טופס מבנק, וזה בדיוק הטון שמעלה את מפלס הוויכוח.

   3. ⚠️ הכי חשוב: חוב מוצג בענבר, לא באדום.
      אדום על מאזן בין שני הורים הוא האשמה. ענבר הוא מידע.
      השמות .box-red ו-[data-status="unpaid"] נשמרו כי ה-JS
      וה-HTML תלויים בהם — הערך החזותי הוא שהשתנה. מי שיבוא
      "לתקן" את זה חזרה לאדום, שיקרא את השורה הזו קודם.

      אדום נשאר בדיוק במקום אחד: מחיקה. שם הוא נכון — הפעולה
      באמת בלתי הפיכה.

   4. כל שמות המחלקות, המזהים וטוקני ה-CSS הישנים נשמרו במלואם.
      index.html ו-app.js מזריקים סגנון inline שמפנה ל-
      var(--text-label), var(--text-title), var(--history-meta),
      var(--border-color) ו-var(--input-bg) — מחיקת אחד מהם
      הייתה שוברת מרקאפ שנבנה ב-JS, בלי שגיאה בקונסולה.

   5. מצב לילה נשאר מבוסס-מחלקה (.dark-mode על body, נשלט מ-
      app.js) ולא prefers-color-scheme. ערבוב שתי המכניקות מייצר
      בדיוק את התקלה שמתועדת ב-games_site: משתמש שהעדפת המערכת
      שלו כהה אך בחר מצב יום מקבל רכיבים משתי הערכות בו-זמנית.
   ════════════════════════════════════════════════════════════ */

body {
  /* ------------------------------------------------------------
     שכבת כינויים — הערכים מגיעים מ-tokens.generated.css
     ------------------------------------------------------------
     עד עכשיו ישבו כאן שתי ערכות מלאות בערכים קשיחים: ‎:root
     לערכת היום ו-‎.dark-mode לערכת הלילה. עכשיו יש מקור אחד
     (shared/tokens.json), והבלוק הזה רק ממפה את השמות שהקובץ
     הזה מדבר בהם אל אוצר המילים הקנוני.

     ⚠️ אין כאן בלוק ‎.dark-mode. ההיפוך קורה ב-tokens.generated.css
     על ‎--bc-*, וכל הכינויים כאן יורשים אותו אוטומטית. הוספת בלוק
     לילה כאן תחזיר בדיוק את הכפילות שהמהלך הזה בא לבטל.

     ⚠️ הבלוק יושב על body ולא על :root. ערכת הלילה מגדירה את
     --bc-* על body.dark-mode, ומשתנה שמוצהר ב-:root אינו רואה
     ערך שהוגדר על צאצא שלו — כינוי ב-:root היה נשאר על ערכי
     היום גם בלילה, ב-143 מקומות.

     השמות הישנים נשמרו כי index.html ו-app.js מזריקים סגנון
     inline שמפנה אליהם — ראו סעיף 4 בראש הקובץ.
     ------------------------------------------------------------ */

  /* ---------- מותג ---------- */
  --brand:        var(--bc-brand);
  --brand-strong: var(--bc-brand-strong);
  --brand-deep:   var(--bc-brand-deep);
  --brand-lit:    var(--bc-brand-lit);
  --brand-soft:   var(--bc-brand-soft);
  --brand-wash:   var(--bc-brand-wash);

  /* ---------- ענבר: "טרם שולם" ---------- */
  --owe:      var(--bc-owe);
  --owe-lit:  var(--bc-owe-lit);
  --owe-soft: var(--bc-owe-soft);
  --owe-wash: var(--bc-owe-wash);

  /* ---------- ירוק: "שולם / נסגר" ---------- */
  --paid:      var(--bc-success);
  --paid-lit:  var(--bc-btn-success-a);
  --paid-soft: var(--bc-success-soft);
  --paid-wash: var(--bc-success-wash);

  /* ---------- זהב פרימיום ---------- */
  --gold:      var(--bc-accent);
  --gold-deep: var(--bc-btn-accent-b);
  --gold-ink:  var(--bc-btn-accent-ink);

  /* ---------- אדום: הרס בלבד ---------- */
  --danger:      var(--bc-danger);
  --danger-lit:  var(--bc-btn-danger-a);

  /* ---------- צבעי כפתור מלא (אינם מתהפכים בין ערכות) ---------- */
  --btn-brand-a:  var(--bc-btn-brand-a);   --btn-brand-b:  var(--bc-btn-brand-b);
  --btn-paid-a:   var(--bc-btn-success-a); --btn-paid-b:   var(--bc-btn-success-b);
  --btn-danger-a: var(--bc-btn-danger-a);  --btn-danger-b: var(--bc-btn-danger-b);
  --btn-gold-a:   var(--bc-btn-accent-a);  --btn-gold-b:   var(--bc-btn-accent-b);
  --btn-gold-ink: var(--bc-btn-accent-ink);

  /* ---------- טוקנים היסטוריים (שמות נשמרו) ---------- */
  --bg-main:         var(--bc-bg);
  --card-bg:         var(--bc-surface);
  --text-main:       var(--bc-ink-2);
  --text-title:      var(--bc-brand-strong);
  --text-label:      var(--bc-ink-dim);
  --border-color:    var(--bc-line);
  --history-card-bg: var(--bc-surface-2);
  --history-title:   var(--bc-ink);
  --history-meta:    var(--bc-ink-dim);
  --input-bg:        var(--bc-surface);
  --modal-bg:        var(--bc-surface);
  --calc-box-bg:     var(--bc-brand-wash);
  --calc-box-border: var(--bc-calc-border);
  /* --navy נשאר כשם לתאימות אחורה; הערך הוא הטורקיז. */
  --navy:            var(--bc-brand);

  /* ---------- צורה, צל, האטה ---------- */
  --r-sm:   var(--bc-r-sm);
  --r-md:   var(--bc-r-md);
  --r-lg:   var(--bc-r-lg);
  --r-pill: var(--bc-r-pill);
  --sh-1:   var(--bc-sh-1);
  --sh-2:   var(--bc-sh-2);
  --sh-3:   var(--bc-sh-3);
  --ring:   var(--bc-ring);
  --ease:   var(--bc-ease-spring);
}

/* ════════════════════════════════════════════════════════════
   בסיס
   ════════════════════════════════════════════════════════════ */
* { box-sizing: border-box; }

body {
  margin: 0;
  padding: 0 15px 84px;          /* הריפוד התחתון פנוי לבאנר הדביק */
  font-family: 'Rubik', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  line-height: 1.55;
  color: var(--text-main);
  background:
    radial-gradient(1100px 560px at 88% -10%, rgba(20,184,166,.10), transparent 62%),
    radial-gradient(900px 520px at -10% 2%, rgba(15,118,110,.07), transparent 58%),
    var(--bg-main);
  background-attachment: fixed;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* המחלקה יושבת על ה-body עצמו (app.js), ולכן הסלקטור הוא
   body.dark-mode ולא ‎.dark-mode body. */
body.dark-mode {
  background:
    radial-gradient(1100px 560px at 88% -10%, rgba(20,184,166,.10), transparent 62%),
    radial-gradient(900px 520px at -10% 2%, rgba(45,212,191,.06), transparent 58%),
    var(--bg-main);
}

.wrap { max-width: 620px; margin: 0 auto; }
.hidden { display: none !important; }

:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* ════════════════════════════════════════════════════════════
   כותרת עליונה — "רחצת" טורקיז
   ────────────────────────────────────────────────────────────
   קודם: לוח נייבי מלא בגובה 46px עם טקסט לבן. הוא נראה כמו
   כותרת של מערכת ממשלתית, והוא הדבר הראשון שנראה במסך.
   כאן: הטורקיז דוהה אל תוך צבע הרקע של העמוד, והכיתוב כהה על
   בהיר. הכותרת מפסיקה להיות שלט ומתחילה להיות רקע.
   ════════════════════════════════════════════════════════════ */
header {
  position: relative;
  margin: 0 -15px 22px;
  padding: 40px 16px 26px;
  text-align: center;
  overflow: hidden;
  border-radius: 0 0 28px 28px;
  border-bottom: 1px solid var(--border-color);
  background:
    radial-gradient(120% 140% at 88% -20%, rgba(20,184,166,.22), transparent 58%),
    linear-gradient(180deg, var(--brand-soft) 0%, var(--brand-wash) 52%, var(--card-bg) 100%);
  color: var(--brand-deep);
  box-shadow: 0 10px 30px -20px rgba(15,118,110,.5);
}
header h1 {
  position: relative; z-index: 1;
  margin: 0;
  font-size: 25px; font-weight: 900; letter-spacing: -.2px;
  color: var(--brand-deep);
}
header .sub {
  position: relative; z-index: 1;
  margin: 6px 0 0;
  font-size: 13.5px; font-weight: 500;
  color: var(--brand-strong); opacity: .85;
}

/* קישור חזרה לפורטל — גלוי תמיד, גם לפני התחברות */
.home-link {
  position: absolute; z-index: 1;
  top: 12px; inset-inline-start: 12px;
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 12px; border-radius: var(--r-pill);
  font-size: 12.5px; font-weight: 700; text-decoration: none;
  color: var(--brand-strong);
  background: rgba(255,255,255,.72);
  border: 1px solid rgba(15,118,110,.20);
  transition: background .18s var(--ease), transform .18s var(--ease);
}
.home-link:hover { background: #fff; transform: translateY(-1px); }
.dark-mode .home-link {
  color: var(--brand-deep);
  background: rgba(45,212,191,.12);
  border-color: rgba(45,212,191,.28);
}
.dark-mode .home-link:hover { background: rgba(45,212,191,.20); }

/* ════════════════════════════════════════════════════════════
   באנר הרשת (פוטר בזרימת העמוד — לא fixed)
   ════════════════════════════════════════════════════════════ */
.netbar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 12px 16px;
  font-size: 13.5px; font-weight: 700; text-decoration: none;
  color: var(--text-label);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.netbar:hover { border-color: var(--brand); transform: translateY(-1px); }
.netbar b { color: var(--brand-strong); }
.netbar-go { color: var(--brand); white-space: nowrap; }
.netbar--footer {
  max-width: 620px; margin: 12px auto 0;
  border-radius: var(--r-md);
  box-shadow: var(--sh-1);
}
@media (max-width: 400px) { .netbar { font-size: 12.5px; padding: 10px 12px; } }

/* ════════════════════════════════════════════════════════════
   כרטיסים וכותרות מדור
   ════════════════════════════════════════════════════════════ */
.card {
  margin-bottom: 20px;
  padding: 24px 22px;
  border-radius: var(--r-lg);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--sh-2);
  color: var(--text-main);
  transition: box-shadow .25s var(--ease), transform .25s var(--ease);
}
.card:hover { box-shadow: var(--sh-3); transform: translateY(-3px); }

/* פס-מבטא במקום קו-הפרדה: הקו התחתון חתך את הכותרת מהתוכן
   שהיא מכותרת; פס אנכי קושר אותם. */
h2 {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin: 0 0 18px;
  font-size: 19.5px; font-weight: 800; letter-spacing: -.1px;
  color: var(--text-title);
  border-bottom: none; padding-bottom: 0;
}
h2::before {
  content: ""; flex: none;
  width: 5px; height: 21px; border-radius: 5px;
  background: linear-gradient(180deg, var(--brand-lit), var(--brand));
  margin-inline-end: 3px;
}

/* ════════════════════════════════════════════════════════════
   שדות קלט
   ════════════════════════════════════════════════════════════ */
label {
  display: block; margin-bottom: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .2px;
  color: var(--text-label);
}
input, textarea, select {
  width: 100%;
  margin-bottom: 16px; padding: 13px 15px;
  font: inherit; font-size: 15px;
  color: var(--text-main); background: var(--input-bg);
  border: 1.5px solid var(--border-color); border-radius: var(--r-md);
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: var(--ring);
}
input::placeholder, textarea::placeholder { color: var(--text-label); opacity: .65; }

.locked-field {
  background: var(--bg-main); color: var(--text-label);
  cursor: not-allowed; border-style: dashed;
}

/* select — חץ מותאם, ומקום פנוי שלא ידרוס את הטקסט */
select {
  appearance: none; -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--text-label) 50%),
    linear-gradient(135deg, var(--text-label) 50%, transparent 50%);
  background-position: 16px calc(50% - 2px), 21px calc(50% - 2px);
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-inline-start: 34px;
}

/* ---- שדה סיסמה: מעטפת וכפתור עין ----
   הכפתור בצד שמאל לפי הנחיית העיצוב. השדה עצמו dir="ltr"
   (סיסמאות נכתבות משמאל לימין), ולכן הטקסט מתחיל בדיוק מתחת
   לכפתור — ה-padding-left כאן מונע מהתווים להיעלם מאחוריו,
   והוא נדרש תפקודית ולא רק אסתטית. */
.mz-pass-wrap { position: relative; }
.mz-pass-wrap input { padding-left: 48px; }

.mz-eye {
  position: absolute; left: 7px; top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; padding: 0;
  display: flex; align-items: center; justify-content: center;
  border: none; border-radius: 10px; cursor: pointer;
  background: transparent; color: var(--text-label);
  transition: color .16s var(--ease), background .16s var(--ease);
}
.mz-eye:hover { color: var(--brand); background: rgba(15,118,110,.10); }
.mz-eye:active { transform: translateY(-50%) scale(.94); }
.mz-eye svg { width: 19px; height: 19px; display: block; pointer-events: none; }
/* מבוסס-מחלקה ולא prefers-color-scheme — ראו סעיף 5 בראש הקובץ.
   קודם היה כאן @media, וזה גרם לכפתור כהה במצב יום. */
.dark-mode .mz-eye:hover { color: var(--brand-deep); background: rgba(45,212,191,.14); }

/* ════════════════════════════════════════════════════════════
   כפתורים
   ════════════════════════════════════════════════════════════ */
.btn { cursor: pointer; border: none; font: inherit; }

.btn-save, .btn-primary, .btn-upgrade, .btn-yes,
.btn-pdf, .btn-pdf-annual, .btn-ghost, .btn-google, .btn-no {
  width: 100%; min-height: 52px; padding: 12px 18px;
  font: inherit; font-size: 15.5px; font-weight: 800; letter-spacing: .2px;
  border: none; border-radius: var(--r-md); cursor: pointer;
  box-shadow: var(--sh-1);
  transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease);
}
.btn-save:hover, .btn-primary:hover, .btn-upgrade:hover, .btn-yes:hover,
.btn-pdf:hover, .btn-pdf-annual:hover {
  transform: translateY(-2px); box-shadow: var(--sh-2); filter: brightness(1.05);
}
.btn-save:active, .btn-primary:active, .btn-upgrade:active, .btn-yes:active,
.btn-pdf:active, .btn-pdf-annual:active { transform: translateY(0) scale(.985); }

/* פעולה ראשית. קודם היה כאן ורוד-אדום (#f43f5e) על כפתור שכתוב
   עליו "שמור נתונים במערכת" — צבע של הרס על פעולה בונה. */
.btn-save {
  color: #fff;
  background: linear-gradient(135deg, var(--btn-brand-a), var(--btn-brand-b));
  box-shadow: 0 12px 26px -14px rgba(15,118,110,.65), var(--sh-1);
}
.btn-primary {
  color: #fff;
  background: linear-gradient(135deg, var(--btn-brand-a), var(--btn-brand-b));
  box-shadow: 0 12px 26px -14px rgba(15,118,110,.55), var(--sh-1);
}
.btn-yes {
  color: #fff;
  background: linear-gradient(135deg, var(--btn-paid-a), var(--btn-paid-b));
  box-shadow: 0 12px 26px -14px rgba(21,128,61,.55), var(--sh-1);
}
.btn-upgrade {
  color: var(--btn-gold-ink);
  background: linear-gradient(135deg, var(--btn-gold-a), var(--btn-gold-b));
  box-shadow: 0 12px 26px -14px rgba(217,119,6,.6), var(--sh-1);
}
/* דוחות — פעולה משנית: מילוי רך ולא גרדיאנט מלא, כדי שלא
   יתחרו חזותית בכפתור השמירה שמעליהם. */
.btn-pdf, .btn-pdf-annual {
  color: var(--brand-strong);
  background: var(--brand-wash);
  border: 1.5px solid var(--calc-box-border);
  box-shadow: none;
}
.btn-pdf:hover, .btn-pdf-annual:hover { background: var(--brand-soft); }

.btn-ghost {
  color: var(--brand); background: transparent;
  border: 1.5px solid var(--brand);
}
.btn-ghost:hover { background: var(--brand-wash); }
.btn-google {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  color: var(--text-main); background: var(--card-bg);
  border: 1.5px solid var(--border-color);
}
.btn-google:hover { border-color: var(--brand); }
.btn-no {
  color: var(--text-main); background: var(--bg-main);
  border: 1.5px solid var(--border-color);
}
.btn-no:hover { border-color: var(--text-label); }

.pdf-actions { display: flex; gap: 10px; margin-top: 12px; }
.pdf-actions .btn-pdf, .pdf-actions .btn-pdf-annual { flex: 1; }

.btn-settings {
  width: 100%; min-height: 50px; margin-bottom: 12px; padding: 11px 16px;
  font: inherit; font-size: 14.5px; font-weight: 700;
  color: var(--text-title); background: var(--card-bg);
  border: 1.5px solid var(--border-color); border-radius: var(--r-md);
  cursor: pointer; box-shadow: var(--sh-1);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.btn-settings:hover { border-color: var(--brand); transform: translateY(-1px); }

.dark-toggle-wrap { display: flex; justify-content: center; margin-bottom: 18px; }
.btn-toggle-dark {
  min-height: 44px; padding: 10px 22px;
  font: inherit; font-size: 14px; font-weight: 700;
  color: var(--text-main); background: var(--card-bg);
  border: 1.5px solid var(--border-color); border-radius: var(--r-pill);
  cursor: pointer; box-shadow: var(--sh-1);
  transition: border-color .18s var(--ease), transform .18s var(--ease);
}
.btn-toggle-dark:hover { border-color: var(--brand); transform: translateY(-1px); }

.btn-logout {
  padding: 6px 14px;
  font: inherit; font-size: 12px; font-weight: 700;
  color: var(--text-label); background: transparent;
  border: 1.5px solid var(--border-color); border-radius: var(--r-pill);
  cursor: pointer;
}
.btn-logout:hover { border-color: var(--text-label); color: var(--text-main); }

/* Google Play */
.btn-play {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 13px; border: none; border-radius: var(--r-md);
  font-weight: 800; font-size: 15px; color: #fff; text-decoration: none;
  cursor: pointer; box-sizing: border-box;
  background: linear-gradient(135deg, var(--btn-paid-a), var(--btn-paid-b));
  box-shadow: 0 10px 24px -14px rgba(21,128,61,.6);
  transition: transform .15s var(--ease), filter .2s var(--ease);
}
.btn-play:hover { transform: translateY(-2px); filter: brightness(1.05); }
.btn-play.small { width: auto; padding: 7px 13px; font-size: 12.5px; border-radius: var(--r-pill); }

/* ════════════════════════════════════════════════════════════
   דשבורד — שני אריחי מאזן
   ────────────────────────────────────────────────────────────
   ‏.box-red הוא "יתרת חוב". השם נשאר (HTML/JS), הצבע ענבר.
   ראו סעיף 3 בראש הקובץ לפני שינוי.
   ════════════════════════════════════════════════════════════ */
.dashboard { display: flex; gap: 14px; margin-bottom: 18px; }
.dash-box {
  position: relative; overflow: hidden;
  flex: 1; width: auto;
  padding: 20px 18px 18px;
  text-align: start; font-size: 13.5px; font-weight: 700;
  border-radius: var(--r-lg);
  box-shadow: var(--sh-1);
  transition: transform .2s var(--ease), box-shadow .2s var(--ease);
}
.dash-box::after {
  content: ""; position: absolute; pointer-events: none;
  inset-inline-end: -34px; top: -34px;
  width: 124px; height: 124px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.5), transparent 70%);
}
.dash-box:hover { transform: translateY(-2px); box-shadow: var(--sh-2); }
.dash-amount { margin-top: 8px; font-size: 28px; font-weight: 900; letter-spacing: -.5px; }

.box-green {
  color: var(--paid);
  background: linear-gradient(160deg, var(--paid-wash), var(--paid-soft));
  border: 1px solid var(--paid-soft);
}
.box-red {
  color: var(--owe);
  background: linear-gradient(160deg, var(--owe-wash), var(--owe-soft));
  border: 1px solid var(--owe-soft);
}
.dark-mode .dash-box::after { background: radial-gradient(circle, rgba(255,255,255,.10), transparent 70%); }
.dark-mode .box-green, .dark-mode .box-red { border-color: rgba(255,255,255,.06); }

/* ════════════════════════════════════════════════════════════
   תיבת החישוב — "הסכום שיתווסף לחוב"
   ────────────────────────────────────────────────────────────
   הייתה צהובה (#fef9c3 על #fde047). צהוב-אזהרה על סכום שהמשתמש
   בדיוק הזין בעצמו קרא כמו שגיאת ולידציה. עכשיו זו הדגשה שקטה
   בצבע המותג: זה סיכום, לא התרעה.
   ════════════════════════════════════════════════════════════ */
.calc-box {
  margin-bottom: 16px; padding: 16px;
  text-align: center; font-size: 14px; font-weight: 700;
  color: var(--brand-strong);
  background: var(--calc-box-bg);
  border: 1.5px solid var(--calc-box-border);
  border-radius: var(--r-md);
}
.calc-box > div { color: var(--brand-deep); font-weight: 900; letter-spacing: -.4px; }

/* ════════════════════════════════════════════════════════════
   באנרים
   ════════════════════════════════════════════════════════════ */
.cpi-banner {
  margin-bottom: 16px; padding: 11px 15px;
  text-align: center; font-size: 13.5px; font-weight: 700;
  color: #fff; border-radius: var(--r-md);
  background: linear-gradient(135deg, var(--btn-brand-a), var(--btn-brand-b));
  box-shadow: var(--sh-1);
}

.fixed-banner {
  margin-bottom: 18px; padding: 18px;
  text-align: center; border-radius: var(--r-md);
  color: var(--brand-deep);
  background: var(--brand-wash);
  border: 1.5px solid var(--calc-box-border);
}
.fixed-banner h3 { margin: 0 0 6px; font-size: 16px; font-weight: 800; }
.fixed-banner p  { margin: 0 0 12px; font-size: 14px; }
.fixed-banner .flex-btns { margin-top: 0; }

/* ════════════════════════════════════════════════════════════
   העלאת קובץ
   ════════════════════════════════════════════════════════════ */
.file-upload-wrapper { margin-bottom: 16px; }
.file-upload-input { display: none; }
.file-upload-label {
  display: block; padding: 14px; text-align: center;
  font-size: 14px; font-weight: 700; cursor: pointer;
  color: var(--brand-strong);
  background: var(--brand-wash);
  border: 2px dashed var(--calc-box-border);
  border-radius: var(--r-md);
  transition: border-color .18s var(--ease), background .18s var(--ease);
}
.file-upload-label:hover { border-color: var(--brand); background: var(--brand-soft); }
.file-name-display {
  display: block; margin-top: 6px; text-align: center;
  font-size: 12px; font-weight: 700; color: var(--paid);
}

/* ════════════════════════════════════════════════════════════
   כרטיסי היסטוריה
   ════════════════════════════════════════════════════════════ */
.history-card {
  position: relative; overflow: hidden;
  margin-bottom: 14px;
  padding: 16px 16px 14px 18px;   /* 18px בצד ההתחלה — מקום לפס-הסטטוס */
  padding-inline-start: 18px;
  border-radius: var(--r-md);
  background: var(--history-card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--sh-1);
  transition: box-shadow .2s var(--ease), transform .2s var(--ease);
}
.history-card:hover { box-shadow: var(--sh-2); transform: translateY(-2px); }

.history-card::before {
  content: ""; position: absolute;
  inset-block: 0; inset-inline-start: 0;
  width: 5px; border-radius: 0 5px 5px 0;
}
.history-card[data-status="unpaid"]::before { background: linear-gradient(180deg, var(--owe-lit), var(--owe)); }
.history-card[data-status="paid"]::before   { background: linear-gradient(180deg, var(--paid-lit), var(--paid)); }
.history-card[data-status="paid"] { opacity: .94; }

.history-details { margin-bottom: 10px; }
.history-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 8px; }
.history-head .history-title { margin-bottom: 0; }
.history-title {
  display: block; margin-bottom: 4px;
  font-size: 16px; font-weight: 800; letter-spacing: -.01em;
  color: var(--history-title);
}
.history-meta { font-size: 12.5px; line-height: 1.7; color: var(--history-meta); }
/* הסכום הפתוח — ענבר, לא אדום. ראו סעיף 3. */
.history-debt { color: var(--owe); font-weight: 800; }

.hist-pill {
  flex: none; display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.hist-pill::before { content: ""; width: 7px; height: 7px; border-radius: 50%; }
.history-card[data-status="unpaid"] .hist-pill { background: var(--owe-soft); color: var(--owe); }
.history-card[data-status="unpaid"] .hist-pill::before { background: var(--owe-lit); }
.history-card[data-status="paid"]   .hist-pill { background: var(--paid-soft); color: var(--paid); }
.history-card[data-status="paid"]   .hist-pill::before { background: var(--paid-lit); }

.history-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
/* ברירת המחדל היא נייטרלית ולא לבן-על-כלום: app.js מזריק גם
   ‏.action-btn חשוף (כפתור "נסה שוב" בכשל טעינת המחציות הקבועות),
   וכל בסיס שמניח שיגיע וריאנט צבעוני אחריו הופך אותו לבלתי נראה.
   הווריאנטים המלאים דורסים כאן border ו-color. */
.action-btn {
  flex: 1; min-width: 30%; min-height: 44px; padding: 0 12px;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  font: inherit; font-size: 13px; font-weight: 700; text-align: center;
  color: var(--text-main); background: var(--card-bg);
  border: 1.5px solid var(--border-color); border-radius: var(--r-sm);
  cursor: pointer; box-shadow: var(--sh-1);
  transition: transform .14s var(--ease), filter .2s var(--ease), border-color .18s var(--ease);
}
.action-btn:hover { filter: brightness(1.06); }
.action-btn:active { transform: scale(.96); }

.btn-pay    { background: linear-gradient(135deg, var(--btn-paid-a), var(--btn-paid-b)); color: #fff; border: none; }
.btn-charge { background: linear-gradient(135deg, var(--btn-gold-a), var(--btn-gold-b)); color: var(--btn-gold-ink); border: none; }
.btn-copy   { background: var(--brand-wash); color: var(--brand-strong); border: 1.5px solid var(--calc-box-border); box-shadow: none; }
.btn-copy:hover { background: var(--brand-soft); }
/* אדום — כאן, ורק כאן. מחיקה היא באמת בלתי הפיכה. */
.btn-delete { background: linear-gradient(135deg, var(--btn-danger-a), var(--btn-danger-b)); color: #fff; border: none; }
.btn-paid-status {
  background: var(--paid-wash); color: var(--paid);
  border: 1.5px solid var(--paid-soft); box-shadow: none; cursor: default;
}
/* אסמכתא — פעולה נייטרלית. קודם הייתה סגול ‎#8b5cf6 קשיח בתוך
   app.js: גוון חמישי שלא השתייך לאף מצב, על כפתור שרק פותח קובץ. */
.btn-receipt {
  color: var(--text-main); background: var(--card-bg);
  border: 1.5px solid var(--border-color); box-shadow: none;
}
.btn-receipt:hover { color: var(--brand); border-color: var(--brand); }
.btn-receipt.is-legacy { opacity: .78; }

.toggle-paid-btn {
  padding: 6px 13px;
  font: inherit; font-size: 12px; font-weight: 700; cursor: pointer;
  color: var(--text-label); background: var(--bg-main);
  border: 1.5px solid var(--border-color); border-radius: var(--r-pill);
}
.toggle-paid-btn:hover { border-color: var(--brand); color: var(--brand); }

/* ════════════════════════════════════════════════════════════
   שורת זהות + תגית PRO
   ════════════════════════════════════════════════════════════ */
.user-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  margin-bottom: 14px; font-size: 13px; color: var(--text-label);
}
.pro-badge {
  padding: 4px 11px; border-radius: var(--r-pill);
  font-size: 12px; font-weight: 800;
  color: var(--btn-gold-ink);
  background: linear-gradient(135deg, #FDE68A, var(--btn-gold-a));
  border: 1px solid rgba(255,255,255,.5);
  box-shadow: 0 4px 14px -6px rgba(245,158,11,.6);
}

/* ════════════════════════════════════════════════════════════
   כרטיס התחברות
   ════════════════════════════════════════════════════════════ */
.auth-card { max-width: 420px; margin: 10px auto; }
.auth-sep {
  position: relative; margin: 16px 0;
  text-align: center; font-size: 13px; color: var(--text-label);
}
.auth-sep::before, .auth-sep::after {
  content: ""; position: absolute; top: 50%;
  width: 36%; height: 1px; background: var(--border-color);
}
.auth-sep::before { right: 0; }
.auth-sep::after  { left: 0; }
.auth-error {
  margin-bottom: 12px; padding: 10px 12px;
  text-align: center; font-size: 13px; font-weight: 700;
  color: var(--danger);
  background: rgba(220,38,38,.08);
  border: 1px solid rgba(220,38,38,.25);
  border-radius: var(--r-sm);
}
.auth-row { display: flex; gap: 10px; }
.auth-row .btn-primary, .auth-row .btn-ghost { flex: 1; }

/* ════════════════════════════════════════════════════════════
   מודלים
   ════════════════════════════════════════════════════════════ */
.modal-overlay {
  display: none; position: fixed; inset: 0; z-index: 2000;
  align-items: center; justify-content: center; padding: 15px;
  background: rgba(15,32,29,.55);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.modal-content {
  width: 100%; max-width: 340px; padding: 26px 24px;
  text-align: center; color: var(--text-main);
  background: var(--modal-bg);
  border: 1px solid var(--border-color);
  border-radius: var(--r-lg);
  box-shadow: var(--sh-3);
}
.modal-content h3 { margin: 0 0 10px; font-size: 18px; font-weight: 800; color: var(--text-title); }
.modal-content p  { margin: 0 0 6px; color: var(--text-main); }
.flex-btns { display: flex; gap: 10px; margin-top: 16px; }
.flex-btns > * { flex: 1; }
.close-text {
  display: inline-block; margin-top: 15px;
  font-size: 13px; color: var(--text-label);
  text-decoration: underline; cursor: pointer;
}
.close-text:hover { color: var(--text-main); }

/* ════════════════════════════════════════════════════════════
   חסימת פיצ'ר פרימיום
   ════════════════════════════════════════════════════════════ */
.locked-note {
  margin-top: 12px; padding: 18px; text-align: center;
  background: var(--brand-wash);
  border: 1px dashed var(--calc-box-border);
  border-radius: var(--r-md);
}
.locked-note .lt { margin-bottom: 4px; font-weight: 800; color: var(--text-title); }
.locked-note .ls { margin-bottom: 12px; font-size: 13px; color: var(--text-label); }
.locked-note .lbtns { display: flex; flex-direction: column; gap: 8px; }

/* ════════════════════════════════════════════════════════════
   טוסט
   ════════════════════════════════════════════════════════════ */
.toast {
  position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%);
  z-index: 3000; padding: 12px 20px;
  font-size: 14px; font-weight: 700; color: #fff;
  background: #14302C; border-radius: var(--r-sm);
  box-shadow: var(--sh-3);
}

/* ════════════════════════════════════════════════════════════
   פרסומות
   ────────────────────────────────────────────────────────────
   ‏min-height שמור מראש בכל יחידה — יחידה שנטענת לתוך גובה 0
   דוחפת את התוכן למטה אחרי שהמשתמש כבר התחיל לקרוא (CLS).
   ‏body[data-ads="off"] (מנוי PRO) מסתיר את הכל.
   ════════════════════════════════════════════════════════════ */
.ad-slot {
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  min-height: 100px; margin: 18px 0;
  border-radius: var(--r-md);
  background: var(--history-card-bg);
  border: 1px solid var(--border-color);
}
.ad-slot ins.adsbygoogle { width: 100%; }
.ad-slot::after {
  content: "מודעה";
  font-size: 11px; font-weight: 700; color: var(--text-label); opacity: .5;
}
/* יחידה שהתמלאה כבר אינה זקוקה לתווית-מציין-מקום */
.ad-slot:has(ins[data-adsbygoogle-status="done"])::after { content: none; }
.ad-slot.ad-inline { margin: 14px 0; min-height: 110px; }
body[data-ads="off"] .ad-slot { display: none; }

.ad-sticky {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 1600;
  display: none;                       /* ברירת מחדל: מסך התחברות / PRO */
  align-items: center; justify-content: center;
  min-height: 66px;                    /* שמירת גובה → בלי CLS */
  padding: 6px 12px calc(6px + env(safe-area-inset-bottom));
  background: var(--card-bg);
  border-top: 1px solid var(--border-color);
  border-radius: 18px 18px 0 0;
  box-shadow: 0 -12px 30px -18px rgba(23,42,38,.5);
}
body[data-ads="on"] .ad-sticky { display: flex; }
body.sticky-ad-closed .ad-sticky { display: none !important; }
.ad-sticky ins.adsbygoogle { display: block; width: 100%; max-width: 468px; }
.ad-sticky-close {
  position: absolute; top: 4px; inset-inline-start: 8px;
  width: 26px; height: 26px; border-radius: 50%;
  font-size: 16px; line-height: 1; cursor: pointer;
  color: var(--text-label); background: var(--bg-main); border: none;
}
.ad-sticky-close:hover { color: var(--text-main); }

/* מזמין מקום לבאנר הדביק רק כשהוא באמת גלוי */
body[data-ads="on"] { padding-bottom: calc(80px + env(safe-area-inset-bottom)); }
body.sticky-ad-closed { padding-bottom: 24px; }

/* ════════════════════════════════════════════════════════════
   מצב טעינה — ספינר + שלד
   ════════════════════════════════════════════════════════════ */
.mz-loading { margin: 2px 0 22px; animation: mzl-fade .3s var(--ease) both; }
@keyframes mzl-fade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.mz-loading .mzl-head {
  display: flex; flex-direction: column; align-items: center; gap: 12px;
  padding: 28px 0 24px; text-align: center;
}
.mzl-spinner {
  width: 54px; height: 54px; border-radius: 50%;
  background: conic-gradient(from 0deg, var(--brand), var(--brand-lit), #5EEAD4, var(--brand));
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 6px), #000 calc(100% - 6px));
  animation: mzl-spin .9s linear infinite;
  box-shadow: 0 8px 22px -10px rgba(15,118,110,.6);
}
@keyframes mzl-spin { to { transform: rotate(360deg); } }
.mzl-text { font-size: 15.5px; font-weight: 800; color: var(--text-title); }
.mzl-sub  { font-size: 12.5px; color: var(--text-label); }

.mzl-tiles { display: flex; gap: 14px; margin-bottom: 16px; }
.mzl-block {
  padding: 22px; border-radius: var(--r-lg);
  background: var(--card-bg);
  border: 1px solid var(--border-color);
  box-shadow: var(--sh-1);
}
.mzl-sk {
  position: relative; overflow: hidden;
  background: var(--history-card-bg); border-radius: var(--r-sm);
}
.mzl-tile { flex: 1; height: 104px; border-radius: var(--r-lg); box-shadow: var(--sh-1); }
.mzl-line { height: 15px; margin-bottom: 13px; border-radius: 8px; }
.mzl-line:last-child { margin-bottom: 0; }
.mzl-sk::after {
  content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation: mzl-shimmer 1.3s ease-in-out infinite;
}
.dark-mode .mzl-sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.08), transparent); }
@keyframes mzl-shimmer { 100% { transform: translateX(100%); } }

/* ════════════════════════════════════════════════════════════
   נגישות — כיבוד תנועה מופחתת
   ────────────────────────────────────────────────────────────
   הרמות והזזות מבוטלות; שינויי צבע וצל נשארים, כי הם מעבירים
   מצב ולא תנועה.
   ════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; }
  .card:hover, .dash-box:hover, .history-card:hover, .netbar:hover,
  .btn-save:hover, .btn-primary:hover, .btn-upgrade:hover, .btn-yes:hover,
  .btn-pdf:hover, .btn-pdf-annual:hover, .btn-play:hover,
  .btn-settings:hover, .btn-toggle-dark:hover, .home-link:hover { transform: none; }
  .action-btn:active, .btn-save:active, .btn-primary:active,
  .btn-upgrade:active, .btn-yes:active { transform: none; }
  .mz-loading { animation: none; }
  .mzl-spinner { animation-duration: 2.4s; }
  .mzl-sk::after { animation: none; opacity: .5; }
}

/* ════════════════════════════════════════════════════════════
   מסכים צרים
   ════════════════════════════════════════════════════════════ */
@media (max-width: 420px) {
  header { padding: 34px 14px 22px; }
  header h1 { font-size: 22px; }
  .card { padding: 20px 17px; }
  .dashboard { gap: 10px; }
  .dash-box { padding: 17px 14px 15px; }
  .dash-amount { font-size: 24px; }
  .pdf-actions { flex-direction: column; }
}