@import url("https://fonts.googleapis.com/css2?family=Heebo:wght@400;500;600;700&display=swap");
/* ─────────────────────────────────────────────────────────────
   שפת העיצוב של LabTop — קובץ אחד לכל האפליקציות.
   עד עכשיו כל דף נשא עותק של הטוקנים שלו, ולכן "אותו כחול"
   היה שלושה כחולים שונים. מכאן זו הגדרה אחת.

   שלושה עקרונות שמכתיבים את השאר:

   1. סקאלה מודולרית, לא גדלים לפי תחושה. שבעה גדלי טקסט
      ושבעה מרווחים. מספר שאינו בסקאלה הוא באג.
   2. צבע אף פעם לא לבד. קריטי הוא אדום *וגם* אייקון *וגם*
      מילה — מסך שנקרא רק בצבע לא נקרא בשמש ולא נקרא לעיוור
      צבעים, ושניהם קורים בשטח.
   3. תנועה מסבירה, לא מקשטת. 150ms לשינוי מצב, 220ms
      למעבר מסך, ואפס כשהמערכת ביקשה פחות תנועה.
   ───────────────────────────────────────────────────────────── */

:root{
  /* ── מותג ──
     הערכים מגיעים מבריף העיצוב של סנטינל, ויושבים כאן ולא
     בגיליון שני עם קידומת sn-. הבריף ביקש קידומת כדי למנוע
     התנגשויות בקוד שאין בו מערכת עיצוב; כאן יש אחת, ושתי
     מערכות צבע במקביל היו בדיוק ההתנגשות שהכלל בא למנוע. */
  --navy:#0b1f4d; --navy-2:#16409F;

  /* כתום הוא צבע הפעולה, לא מבטא. שלושה עצירות לגרדיאנט,
     ושתי גרסאות טקסט — כי כתום על לבן אינו נקרא וכתום כמילוי
     כן, וזה שני שימושים שאסור לבלבל. */
  --orange-1:#FFA043; --orange:#FF7A1C; --orange-3:#E8600A;
  --orange-soft:#FFF1E2; --orange-line:#FFD2A8;
  --orange-tx:#AD4A02;
  /* טקסט על כתום הוא כהה ולא לבן: 8:1 מול 2.4:1. */
  --on-orange:#0b0e14;

  /* כחול המותג נושא נתונים, קישורים ומיקוד — לא פעולות. */
  --brand:#0B1F4D; --brand-rgb:11,31,77; --brand-soft:#EEF2F9; --brand-ink:#fff; --brand-3:#26407E;

  /* ── משטחים ── */
  --chrome:#0b1f4d;
  --ground:#F6F8FC; --ground-2:#EEF2F9; --card:#fff; --raise:#F2F5FA;
  --line:#EDF0F6; --line-2:#D5DCE8;
  --ink:#0E1526; --ink-2:#586178; --ink-3:#707A8C;

  /* טקסט על המסגרת. התפריט הוא המשטח היחיד שיושב על נייבי. */
  --chrome-ink:#fff; --chrome-ink-2:#C9D6F2;
  /* דרגה שלישית, לשורת ההסבר בסרגל: עמומה מהשם ועדיין קריאה. */
  --chrome-ink-3:#9DB2E0;
  --chrome-line:rgba(255,255,255,.12); --chrome-hover:rgba(255,255,255,.08);
  --chrome-active:rgba(255,255,255,.12);

  /* ── מצב ──
     אין ענבר נפרד. ״ממתין״ הוא כתום, וזה מכוון: במערכת הזאת
     כתום כבר אומר ״שים לב״, וצבע שלישי לאותה משמעות רק מלמד
     את העין שאין הבדל בין השניים. */
  --crit:#C82B44; --crit-rgb:200,43,68; --crit-soft:#FDE8EC; --crit-line:#F6BFC9;
  /* גוון אחד עמוק יותר, לריחוף על כפתור מסוכן. היה כתוב קשיח. */
  --crit-soft-2:#FBDAE0;
  --warn:#C2540E; --warn-soft:#FDECE0; --warn-line:#F5CDB0;
  --ok:#0B7A52;   --ok-soft:#DFF5EB; --ok-line:#A9E3C9; --ok-bright:#12B076;
  --info:#087884; --info-soft:#DFF4F6; --info-line:#A6DDE4;

  /* ── טיפוגרפיה ──
     רוביק מהבריף. המונו נשאר למספרים בלבד — הבריף לא התייחס
     לזה, ובמסך שכולו סכומים ספרה ברוחב משתנה היא עמודה שלא
     מתיישרת. ₪ נופל לרוביק כי אין לו גליף ב-Plex. */
  --ui:"Heebo","Rubik",system-ui,-apple-system,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,"Rubik",monospace;

  --t-xs:11.5px; --t-sm:13px; --t-base:15px; --t-md:17px;
  --t-lg:20px;   --t-xl:24px; --t-2xl:29px;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px;
  --s-5:22px; --s-6:30px; --s-7:42px;

  /* פינות מהבריף: רכות, לא מהודקות. */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-full:999px;

  --shadow-1:0 6px 18px rgba(13,28,66,.05);
  --shadow-2:0 8px 24px rgba(13,28,66,.06);
  --shadow-3:0 24px 60px rgba(13,28,66,.12);

  /* רשת הנקודות של הבריף — המרקם היחיד במערכת. */
  --dots:radial-gradient(rgba(22,64,159,.09) 3px,transparent 3px);

  --e:cubic-bezier(.4,0,.2,1);
  --t-fast:130ms; --t-mid:200ms; --t-slow:520ms;

  /* מוצהר גם כאן ולא רק ב-meta של כל דף. בלי זה ספארי צובע
     קנבס כהה ופקדי טופס כהים מתחת לעיצוב בהיר, והדף נראה
     ריק — וזה בדיוק מה שקרה אחרי שהעיצוב חזר לבהיר והמטא
     נשאר על dark. */
  color-scheme:light;
}

/* גם מי שביקש כהה מקבל את אותו המסך: זה עולם אחד. */
:root[data-theme="dark"]{ color-scheme:light }

@media (prefers-reduced-motion:reduce){
  :root{ --t-fast:0ms; --t-mid:0ms; --t-slow:0ms; }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important; }
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0; color:var(--ink);
  /* רשת נקודות מעל גרדיאנט. attachment:fixed כדי שהמרקם לא
     ייגלל עם התוכן ויהפוך לרעש נע. */
  background:var(--ground);
  background-size:56px 56px, 100% 100%;
  background-attachment:fixed;
  font-family:var(--ui);
  font-size:var(--t-base); line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
.ltr{unicode-bidi:isolate; direction:ltr; display:inline-block}
.num{font-family:var(--mono); font-variant-numeric:tabular-nums;
     letter-spacing:-.2px}
button{font:inherit; cursor:pointer; color:inherit}
a{color:var(--brand)}
[hidden]{display:none !important}
:focus-visible{outline:2.5px solid var(--brand); outline-offset:2px; border-radius:6px}

/* ── אייקונים ────────────────────────────────────────────
   משפחה אחת, רשת 24, קו 1.75, currentColor. אייקון לצד
   טקסט הוא דקורטיבי ומוסתר מקורא מסך; אייקון לבדו חייב שם. */
.i{
  width:1.15em; height:1.15em; flex:none; display:inline-block;
  vertical-align:-.18em; fill:none; stroke:currentColor;
  stroke-width:1.75; stroke-linecap:round; stroke-linejoin:round;
}
.i-lg{width:1.5em; height:1.5em}
.i-xl{width:22px; height:22px}

/* ── טיפוגרפיה ─────────────────────────────────────────── */
h1{font-size:var(--t-xl); line-height:1.25; margin:0; letter-spacing:-.4px}
h2{font-size:var(--t-md); line-height:1.3; margin:0; letter-spacing:-.2px}
h3{font-size:var(--t-base); margin:0}
.sub{color:var(--ink-2); font-size:var(--t-sm); margin:var(--s-1) 0 0}
.muted{color:var(--ink-3); font-size:var(--t-sm)}

/* ── כפתורים ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:var(--s-2);
  min-height:38px; padding:var(--s-2) var(--s-4);
  border:1px solid var(--line-2); background:var(--card); border-radius:var(--r-sm);
  font-weight:600; font-size:var(--t-sm); white-space:nowrap;
  transition:background var(--t-fast) var(--e), border-color var(--t-fast) var(--e),
             transform var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
.btn:hover{background:var(--raise); border-color:var(--navy-2)}
.btn:active{transform:translateY(1px)}

/* הפעולה הראשית היא כתומה, לא כחולה. הכחול נושא נתונים
   וקישורים; הכתום אומר ״זה מה שלוחצים״, והפרדה בין השניים
   היא מה שמאפשר לסרוק מסך ולמצוא את הפעולה בלי לקרוא. */
.btn.pri{
  background:var(--brand);
  border-color:transparent; color:#fff;
  box-shadow:0 10px 26px rgba(11,31,77,.20)}
.btn.pri:hover{transform:translateY(-1px); box-shadow:0 14px 30px rgba(11,31,77,.26);
  background:var(--brand-3, #26407E)}
.btn.pri:active{transform:translateY(0)}

/* פעולה משנית כבדה — נייבי מלא, כשצריך משהו חזק שאינו הפעולה
   הראשית של המסך. */
.btn.navy{background:linear-gradient(150deg, var(--navy), var(--navy-2));
  border-color:transparent; color:#fff; box-shadow:0 10px 24px rgba(11,31,77,.22)}
.btn.navy:hover{transform:translateY(-1px)}

.btn.ghost{border-color:transparent; background:transparent}
.btn.ghost:hover{background:var(--raise); border-color:var(--line)}
.btn.danger{color:var(--crit); background:var(--crit-soft);
  border-color:var(--crit-line)}
.btn.danger:hover{background:var(--crit-soft-2); border-color:var(--crit)}
/* פוקוס עבה בצבע הרכיב עצמו — עובד על כל רקע, כולל על כתום
   ועל נייבי, בלי סט כללים לכל וריאנט. */
.btn:focus-visible{outline:3px solid currentColor; outline-offset:3px}
.btn.sm{min-height:32px; padding:var(--s-1) var(--s-3); font-size:var(--t-xs)}
.btn.wide{width:100%}
.btn:disabled{opacity:.5; cursor:default; transform:none}
/* משוב על שליחה: הכפתור אומר שהוא עובד, ולא קופא בשקט */
.btn.busy{position:relative; color:transparent !important; pointer-events:none}
.btn.busy::after{
  content:""; position:absolute; width:15px; height:15px; border-radius:50%;
  border:2px solid currentColor; border-top-color:transparent; color:var(--brand-ink);
  animation:spin .7s linear infinite;
}
.btn:not(.pri).busy::after{color:var(--ink-2)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── תגים ──────────────────────────────────────────────── */
/* צ׳יפ מצב. נקודה בצבע הטקסט לפני המילה — כך שהמצב נקרא גם
   בשחור-לבן וגם למי שאינו מבחין בין כתום לירוק, וזה הכלל
   השני של הקובץ הזה: צבע אף פעם לא לבד. */
.tag{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--t-xs); font-weight:700; padding:4px 11px;
  border-radius:var(--r-full); white-space:nowrap; line-height:1.35;
  border:1px solid transparent;
}
.tag .i{width:13px; height:13px; stroke-width:2}
.tag.crit{background:var(--crit-soft); color:var(--crit); border-color:var(--crit-line)}
.tag.warn{background:var(--warn-soft); color:var(--warn); border-color:var(--orange-line)}
.tag.ok  {background:var(--ok-soft);   color:var(--ok);   border-color:var(--ok-line)}
.tag.info{background:var(--info-soft); color:var(--info)}
.tag.dim {background:var(--raise);     color:var(--ink-3); border:1px solid var(--line)}
.tag.brand{background:var(--brand-soft); color:var(--brand)}

/* ── כרטיסים ───────────────────────────────────────────── */
.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-1); padding:var(--s-4);
}
.panel + .panel{margin-top:var(--s-3)}
.panel > header{
  display:flex; align-items:center; gap:var(--s-2); margin-bottom:var(--s-3);
}
.panel > header h2{flex:1}

/* שורה שלא נכנסת יורדת לשורה שנייה, ולא דוחפת את המסמך כולו
   לגלילה לרוחב. שורה עם שתי פעולות — ״שייך אליי״ ו״פתיחה״ —
   רחבה מ-390 פיקסלים, ובלי העטיפה הטלפון נגלל הצידה בכל מסך
   שיש בו שורה אחת כזאת. */
.kv{
  display:flex; align-items:baseline; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-2) 0; border-bottom:1px solid var(--line); font-size:var(--t-sm);
}
.kv:last-child{border-bottom:0}
/* שורה שמחכה יותר מדי. פס בקצה ולא רקע אדום: הרשימה עדיין צריכה
   להיקרא, והצבע לבדו ממילא אינו מספיק — התגית שבתוכה אומרת כמה. */
.kv.stale{border-inline-start:3px solid var(--crit);
  padding-inline-start:var(--s-3); background:var(--crit-soft)}
/* ── סרגל הצד: קבוצות, ושתי שורות לכל פריט ──────────────
   שם לבדו אומר לאן, ולא מה קורה שם. שורת ההסבר חוסכת את
   הפתיחה כדי לגלות — וזה ההבדל בין תפריט שלומדים לתפריט
   שקוראים.

   כאן ולא בכל עמוד: המבנה זהה בארבעת הדלפקים, ושלושה עותקים
   שלו נסחפים ביום שמישהו משנה אחד מהם.
   ───────────────────────────────────────────────────── */
/* ── הבדיקה החכמה: דף ההסבר ──────────────────────────────
   כאן ולא בעמוד, כי הדף עצמו משותף לשני הדלפקים ‎(scan-page.js)‎
   ושני עותקים של הכללים נסחפים ביום שמישהו מתקן אחד מהם.
   ───────────────────────────────────────────────────── */
.scan-hero{border-color:var(--warn-line, var(--line))}
.scan-hero-row{display:flex; align-items:flex-start; gap:var(--s-3); flex-wrap:wrap}
.scan-hero-tx{flex:1; min-width:15rem}
.scan-hero-tx h2{margin:var(--s-2) 0 var(--s-1)}
.scan-hero-tx p{margin:0; max-width:60ch}
.scan-disc{flex:none; width:2.75rem; height:2.75rem; border-radius:var(--r-2);
  display:grid; place-items:center; color:#fff;
  background:linear-gradient(150deg, var(--navy-2,#16409F), var(--navy,#0B1F4D))}

/* שלושה צעדים: נופל לעמודה אחת בטלפון בלי שאלה, כי שלוש עמודות
   ברוחב 360 הן שלוש עמודות של מילה וחצי. */
.scan-steps{display:grid; gap:var(--s-3); grid-template-columns:1fr}
@media (min-width:56rem){ .scan-steps{grid-template-columns:repeat(3,1fr)} }
.scan-step{border:1px solid var(--line); border-radius:var(--r-2);
  padding:var(--s-3); background:var(--raise, transparent)}
.scan-step b{display:block; margin:var(--s-2) 0 var(--s-1)}
.scan-step small{display:block; color:var(--ink-2); line-height:1.5}
.scan-n{width:1.75rem; height:1.75rem; border-radius:999px; display:grid;
  place-items:center; font-weight:700; font-size:var(--t-xs);
  background:var(--brand-soft, var(--raise)); color:var(--brand, inherit)}

.scan-use, .scan-dl{display:flex; align-items:flex-start; gap:var(--s-3);
  padding:var(--s-3) 0; border-bottom:1px solid var(--line); flex-wrap:wrap}
.scan-use:last-of-type{border-bottom:0}
.scan-dl{align-items:center; border-bottom:0}
.scan-dl .t{flex:1; min-width:12rem}
.scan-use > div{flex:1; min-width:12rem}
.scan-use small, .scan-dl small{display:block; color:var(--ink-2); line-height:1.5}
.scan-ic{flex:none; width:2rem; height:2rem; border-radius:var(--r-1);
  display:grid; place-items:center; background:var(--raise, transparent);
  color:var(--brand, inherit)}
.scan-share{margin-top:var(--s-3)}
/* קוד שמוקרא בטלפון. גדול, מרווח, ובכיוון אחד — מי שמקריא
   ספרות מתוך שורה צפופה מקריא אותן לא נכון. */
.scan-code{font-family:var(--mono,"IBM Plex Mono",monospace); font-size:2.4rem;
  font-weight:700; letter-spacing:.32em; text-align:center; padding:var(--s-4);
  border:1px dashed var(--line-2, var(--line)); border-radius:var(--r-2);
  background:var(--raise, transparent); color:var(--brand, inherit)}
/* הדוח מוצג בגובה שאפשר לקרוא בו, ועם רקע לבן משלו: הוא מסמך
   של הלקוח ולא חלק מהמסך שמסביבו. */
.scan-frame{width:100%; height:min(70vh,40rem); border:1px solid var(--line);
  border-radius:var(--r-1); background:#fff; display:block}
.scan-faq{padding:var(--s-3) 0; border-bottom:1px solid var(--line)}
.scan-faq:last-of-type{border-bottom:0}
.scan-faq b{display:flex; align-items:center; gap:var(--s-2)}
.scan-faq p{margin:var(--s-1) 0 0; max-width:70ch}

nav.side .grp{color:var(--chrome-ink-2); font-size:var(--t-xs); font-weight:700;
  opacity:.62; letter-spacing:.06em;
  padding:var(--s-4) var(--s-2) var(--s-1)}
nav.side .grp:first-of-type{padding-top:var(--s-2)}
nav.side .grp[hidden]{display:none}

nav.side a.nav .tx{flex:1; min-width:0; display:block; line-height:1.3}
nav.side a.nav .tx b{display:block; font-weight:600}
/* ההסבר עמום מהשם בכוונה: הוא נקרא כשמחפשים, לא בכל מבט. */
nav.side a.nav .tx small{display:block; font-size:var(--t-xs);
  color:var(--chrome-ink-3, var(--chrome-ink-2)); opacity:.78;
  font-weight:400; margin-top:1px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
nav.side a.nav[aria-current=page] .tx small{opacity:.9}

/* אות ראשונה בכותרת כרטיס לקוח. לא תמונה — אין תמונות במערכת
   הזאת, ועיגול עם אות הוא מה שמבדיל בין שני כרטיסים במבט אחד.
   כאן ולא בעמוד, כי הכרטיס עצמו משותף לשני הדלפקים. */
.av{display:inline-grid; place-items:center; width:38px; height:38px;
  border-radius:12px; background:var(--brand-soft); color:var(--brand);
  font-weight:800; font-size:17px; margin-inline-end:var(--s-3);
  vertical-align:-9px}

.kv > .k{color:var(--ink-3); flex:none; min-width:78px}
/* רצפה לטקסט. בלעדיה העטיפה שלמעלה מוציאה שורה מכוערת: הפקדים
   נשארים בשורה הראשונה ודוחסים את הנושא לעמודה בת ארבע אותיות
   במקום לרדת בעצמם לשורה שנייה. עם רצפה, מה שלא נכנס יורד — וזה
   תמיד הפקדים, שהם הצרים. */
.kv > .v{flex:1; min-width:9rem; font-weight:600; text-align:start}

/* ── מדדים ─────────────────────────────────────────────── */
.stats{display:grid; grid-template-columns:repeat(auto-fill,minmax(168px,1fr)); gap:var(--s-3)}
.stat{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  padding:var(--s-3) var(--s-4); box-shadow:var(--shadow-1);
  display:flex; align-items:center; gap:var(--s-3);
  transition:border-color var(--t-fast) var(--e), transform var(--t-fast) var(--e);
}
.stat:hover{border-color:var(--line-2); transform:translateY(-1px)}
/* ריבוע כתום רך סביב האייקון — זה מה שהופך שורת מספרים
   לכרטיסי מדד ולא לרשימה. גוני המצב שמתחת גוברים עליו. */
.stat .ic{
  width:42px; height:42px; border-radius:var(--r); flex:none;
  display:grid; place-items:center;
  background:var(--orange-soft); border:1px solid var(--orange-line);
  color:var(--orange-3);
}
.stat.crit .ic{background:var(--crit-soft); color:var(--crit)}
.stat.warn .ic{background:var(--warn-soft); color:var(--warn)}
.stat.ok   .ic{background:var(--ok-soft);   color:var(--ok)}
.stat.brand .ic{background:var(--brand-soft); color:var(--brand)}
.stat .n{font-size:var(--t-lg); font-weight:800; letter-spacing:-.6px; line-height:1.1}
.stat .l{color:var(--ink-3); font-size:var(--t-xs); font-weight:600}
.stat.crit .n{color:var(--crit)} .stat.ok .n{color:var(--ok)} .stat.warn .n{color:var(--warn)}

/* ── טבלאות ────────────────────────────────────────────── */
.tbl{width:100%; border-collapse:collapse; background:var(--card);
     border:1px solid var(--line); border-radius:var(--r); overflow:hidden;
     box-shadow:var(--shadow-1)}
.tbl th,.tbl td{padding:var(--s-3) var(--s-4); text-align:start;
                border-bottom:1px solid var(--line); font-size:var(--t-sm)}
/* ראש הטבלה בגוון הרקע ובנייבי המותג, לא אפור על לבן. בטבלה
   ארוכה השורה הראשונה צריכה להיקרא ככותרת גם אחרי שגללת. */
.tbl th{color:var(--navy); font-weight:700; font-size:var(--t-xs);
        background:var(--ground-2); letter-spacing:.2px}
.tbl tbody tr:last-child td{border-bottom:0}
.tbl tbody tr[data-go]{cursor:pointer; transition:background var(--t-fast) var(--e)}
.tbl tbody tr[data-go]:hover{background:var(--brand-soft)}

/* ── מצבים ריקים ───────────────────────────────────────── */
.empty{
  text-align:center; padding:var(--s-7) var(--s-4); color:var(--ink-3);
  border:1px dashed var(--line-2); border-radius:var(--r); background:var(--card);
}
.empty .i{width:34px; height:34px; stroke-width:1.4; color:var(--line-2); margin-bottom:var(--s-2)}
.empty b{display:block; color:var(--ink-2); font-size:var(--t-md); margin-bottom:var(--s-1)}
.empty span{font-size:var(--t-sm)}

/* ── הודעות ────────────────────────────────────────────── */
/* פס בקצה, לא רק רקע. הודעה שכל הרקע שלה צבוע מתחרה בתוכן
   שסביבה; קו אחד אומר את אותו הדבר בשקט. */
.note-bar{border-inline-start:4px solid transparent; 
  display:flex; align-items:flex-start; gap:var(--s-2);
  border-radius:var(--r-sm); padding:var(--s-3) var(--s-4);
  margin-bottom:var(--s-4); font-size:var(--t-sm); font-weight:600;
  animation:rise var(--t-mid) var(--e);
}
.note-bar .i{margin-top:2px}
.note-bar.err {border-inline-start-color:var(--crit); background:var(--crit-soft); color:var(--crit)}
.note-bar.ok  {background:var(--ok-soft);   color:var(--ok)}
.note-bar.warn{border-inline-start-color:var(--warn); background:var(--warn-soft); color:var(--warn)}
.note-bar.info{border-inline-start-color:var(--brand); background:var(--brand-soft); color:var(--brand)}
@keyframes rise{from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none}}

/* ── טפסים ─────────────────────────────────────────────── */
/* התווית היא השאלה, לא הערת שוליים. ב-11px היא נקראת כרעש ליד
   השדה, ומי שממלא טופס קורא אותה לפני שהוא מקליד — לא אחרי. */
label{display:block; font-size:var(--t-sm); color:var(--ink-2); font-weight:700;
      margin:var(--s-4) 0 var(--s-1)}
label + .hint{color:var(--ink-3); font-size:var(--t-xs); margin:0 0 var(--s-2)}
/* 16px אינו טעם: מתחת לזה ספארי מקרב את המסך בכל הקלקה על שדה,
   ואז הטופס קופץ. ו-44px הוא הגובה שאצבע פוגעת בו. */
input,select,textarea{
  font:inherit; font-size:var(--t-md); width:100%; min-height:44px;
  padding:var(--s-3); border-radius:var(--r-sm);
  border:1px solid var(--line-2); background:var(--card); color:var(--ink);
  resize:vertical; transition:border-color var(--t-fast) var(--e), box-shadow var(--t-fast) var(--e);
}
textarea{min-height:88px; line-height:1.55}
input:focus,select:focus,textarea:focus{
  outline:none; border-color:var(--brand); box-shadow:0 0 0 3px rgba(var(--brand-rgb),.16);
}

/* ── דיאלוג ────────────────────────────────────────────── */
/* width ולא רק max-width. בלי רוחב מפורש הדיאלוג מתכווץ לתוכן,
   והתוצאה היא טופס צר באמצע מסך רחב — השדות בפנים הם 100% של
   קופסה שכיווצה את עצמה. */
dialog{
  border:1px solid var(--line); border-radius:var(--r-lg); padding:0;
  width:min(94vw,560px); max-width:min(94vw,560px);
  max-height:88dvh; overflow:hidden;
  background:var(--card); color:var(--ink);
  box-shadow:var(--shadow-3);
  animation:pop var(--t-mid) var(--e);
}
/* מסמך שלם אינו נכנס לרוחב של טופס. דוח הבדיקה נבנה לעמוד,
   וב-560 פיקסלים כל שורה בו נשברת לשלוש. */
dialog.wide{width:min(96vw,60rem); max-width:min(96vw,60rem)}
dialog::backdrop{background:rgba(8,16,32,.55); backdrop-filter:blur(2px)}
@keyframes pop{from{opacity:0; transform:translateY(8px) scale(.985)} to{opacity:1; transform:none}}
dialog .dhead{display:flex; align-items:center; gap:var(--s-2);
              padding:var(--s-5) var(--s-5) var(--s-2);
              border-bottom:1px solid var(--line)}
dialog .dhead h2{flex:1; font-size:var(--t-lg)}
/* הגוף גולל, לא הדיאלוג: הכותרת והכפתורים נשארים במקום, אחרת
   ״שמירה״ יורד מתחת לקצה המסך בטופס ארוך ואי אפשר להגיע אליו. */
dialog .dbody{padding:var(--s-2) var(--s-5) var(--s-4); overflow-y:auto;
              max-height:calc(88dvh - 150px)}
dialog .dbody > label:first-child{margin-top:var(--s-3)}
/* שגיאה של פעולה שנעשתה בתוך דיאלוג חייבת להופיע בתוכו. הבאנר של
   העמוד יושב מאחורי המסך המושחר, ולכן פעולה שנכשלה נראתה בדיוק כמו
   פעולה שלא קרה כלום בה — והמשתמש לוחץ שוב ושוב. */
dialog .derr{margin:0 var(--s-5) var(--s-3); padding:var(--s-3) var(--s-4);
  border-radius:var(--r-sm); background:var(--crit-soft); color:var(--crit);
  border:1px solid var(--crit); font-size:var(--t-sm); line-height:1.6;
  display:flex; gap:var(--s-2); align-items:flex-start}
dialog .derr:empty{display:none}
dialog .dfoot{padding:var(--s-4) var(--s-5); display:flex; gap:var(--s-2);
              border-top:1px solid var(--line); background:var(--raise)}
dialog .dfoot .btn{flex:1; justify-content:center}
pre.code{
  background:var(--raise); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:var(--s-3); overflow-x:auto; font-family:"IBM Plex Mono",monospace;
  font-size:var(--t-xs); direction:ltr; text-align:left; margin:0; line-height:1.6;
}

/* ── מעבר מסך ──────────────────────────────────────────── */
.view-in{animation:viewin var(--t-mid) var(--e)}
@keyframes viewin{from{opacity:0; transform:translateY(5px)} to{opacity:1; transform:none}}

/* ── דשבורד הגביה ───────────────────────────────────────
   גרפים בלי ספרייה: העמודות האלה הן div-ים. אין כאן build,
   ולהוסיף ספריית תרשימים בשביל שמונה מלבנים היה קונה תלות
   שצריך לתחזק בשביל משהו ש-CSS עושה.
   כל עמודה נושאת גם את המספר שלה, לא רק גובה — גובה לבד הוא
   דבר שמשווים בעין ותמיד טועים בו.
   ───────────────────────────────────────────────────── */
/* הגובה של העמודה חייב להימדד מול משבצת בגובה ידוע, ולא מול
   העמודה עצמה. בגרסה הקודמת התווית והחודש היו שכנים של העמודה
   באותו flex, ואחוז גובה נמדד מול מכל שכבר היה מלא — אז flex
   כיווץ את כל העמודות הגבוהות לאותו גודל: 100% ו-92% נצבעו
   שניהם 94 פיקסלים. גרף שמראה שני חודשים שונים כשווים גרוע
   מלא להראות גרף בכלל, כי מסתכלים עליו ומאמינים.

   המשבצת יחסית והעמודה מוחלטת בתוכה: לאלמנט ממוקם מוחלטת
   האחוז נמדד מול גובה המשבצת, שהוא מוגדר גם כשהוא בא מ-flex. */
.mbars{display:flex; align-items:stretch; gap:var(--s-3); height:168px;
  padding:var(--s-3) 0 0; overflow-x:auto}
.mbars .b{flex:1; min-width:30px; display:flex; flex-direction:column;
  align-items:center; gap:4px; justify-content:flex-end}
.mbars .b .v{flex:0 0 auto; font-size:var(--t-xs); font-weight:700;
  color:var(--ink-2); white-space:nowrap; font-variant-numeric:tabular-nums}
.mbars .b .track{flex:1 1 auto; min-height:0; width:100%; position:relative}
/* העבר עמום, ההווה בולט. חמישה חודשים בכחול זוהר וחודש אחד
   בירוק הפכו את ההיסטוריה לגיבור ואת החודש הנוכחי לחריג —
   ההפך ממה שמסתכלים על הגרף הזה בשבילו. */
.mbars .b .bar{position:absolute; inset-inline:0; bottom:0; min-height:3px;
  border-radius:2px 2px 0 0; background:var(--line-2);
  transition:height var(--t-mid) var(--e)}
.mbars .b.now .bar{background:var(--brand)}
.mbars .b .v{color:var(--ink-3)}
.mbars .b.now .v{color:var(--ink)}
.mbars .b .m{flex:0 0 auto; font-size:var(--t-xs); color:var(--ink-3);
  white-space:nowrap}
@media (prefers-reduced-motion:reduce){ .mbars .b .bar{transition:none} }

/* ── דיסקית הלפטופ ──────────────────────────────────────
   האלמנט הדקורטיבי היחיד בשפה, ולכן הוא מרוויח את מקומו —
   כל השאר הוא טיפוגרפיה, קו וצבע. הקשת הכתומה חותכת אותה
   בזווית, כדי שהיא לא תיראה כמו ספינר שנתקע.
   ───────────────────────────────────────────────────── */
.disc{position:relative; width:96px; height:96px; border-radius:50%;
  display:grid; place-items:center; flex:none;
  background:radial-gradient(circle at 33% 27%, #fff 0%, #f0f3fa 58%, #dde5f4 100%);
  box-shadow:0 14px 32px rgba(11,31,77,.18)}
.disc::before{content:""; position:absolute; inset:-8px; border-radius:50%;
  border:4px solid transparent;
  border-top-color:var(--orange); border-inline-start-color:var(--orange);
  transform:rotate(-18deg)}
.disc svg{width:58%; height:58%}
.disc.sm{width:64px; height:64px}
.disc.sm::before{inset:-6px; border-width:3px}
.disc.lg{width:118px; height:118px}

/* מצב ריק עם הדיסקית: כשאין מה להראות, מראים את הזהות ולא
   ריבוע אפור עם טקסט באמצע. */
.blank{display:grid; justify-items:center; gap:var(--s-4);
  padding:var(--s-7) var(--s-4); text-align:center}
.blank b{font-size:var(--t-md); color:var(--navy)}
.blank span{color:var(--ink-3); font-size:var(--t-sm); max-width:44ch}

/* כתמי אור מאחורי כרטיס הכניסה. שניים, מהפינות, בעוצמה
   נמוכה — מספיק כדי שהרקע לא יהיה שטוח, לא מספיק כדי
   להתחרות בכרטיס. */
.glow{position:absolute; border-radius:50%; pointer-events:none}
.glow.a{inset:auto -170px -240px auto; width:560px; height:560px;
  background:radial-gradient(circle, rgba(11,31,77,.10), transparent 65%)}
.glow.b{inset:-190px auto auto -150px; width:520px; height:520px;
  background:radial-gradient(circle, rgba(22,64,159,.12), transparent 65%)}

/* ══ טלפון ══════════════════════════════════════════════
   סרגל הצד הופך למגירה, ובמקומו נכנס סרגל עליון עם המותג,
   מי אתה, וכפתור אחד. המגירה היא אותו nav.side בדיוק — אותם
   קישורים, אותו DOM, אותו מצב פעיל — מוזז ולא נבנה מחדש,
   כדי ששום דבר שנצבע לתוכו לא יצטרך לדעת שזה קיים.

   הכלל הקודם הפך אותו לשורה עוטפת, וזה הדבר הישר לעשות עם
   סרגל צד כשאין מקום לצד התוכן — עד שנים־עשר קישורים.
   ═══════════════════════════════════════════════════════ */
@media (max-width:960px){
  .shell{grid-template-columns:1fr}

  /* ── הסרגל העליון ── */
  .mbar{position:sticky; top:0; z-index:70; display:flex; align-items:center;
    gap:var(--s-3);
    background:linear-gradient(150deg, var(--navy) 20%, var(--navy-2));
    color:var(--chrome-ink);
    padding:10px 14px;
    padding-top:calc(10px + env(safe-area-inset-top,0px));
    box-shadow:0 6px 20px rgba(11,31,77,.25)}
  .mbar .id{display:flex; align-items:center; gap:10px; min-width:0}
  .mbar .id img{border-radius:8px; flex:none}
  .mbar .id b{display:block; font-size:var(--t-sm); line-height:1.2;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
  .mbar .id small{display:block; color:var(--chrome-ink-2);
    font-size:var(--t-xs); line-height:1.2}
  .mbar .burger{margin-inline-start:auto; position:relative; flex:none;
    width:44px; height:44px; border-radius:var(--r); font:inherit; cursor:pointer;
    border:1px solid var(--chrome-line); background:var(--chrome-hover);
    color:var(--chrome-ink); display:grid; place-items:center}
  .mbar .burger:focus-visible{outline:3px solid var(--orange); outline-offset:2px}
  /* סכום ההתראות מהתפריט, על הכפתור. אחרת סגירת התפריט מסתירה
     גם את מה שדחוף. */
  .mbar .badge{position:absolute; top:-6px; inset-inline-end:-6px;
    min-width:20px; height:20px; border-radius:var(--r-full);
    background:var(--orange); color:var(--on-orange);
    font-size:var(--t-xs); font-weight:800; display:grid; place-items:center;
    padding:0 5px; border:2px solid var(--navy)}

  /* ── המגירה ──
     `.shell nav.side` ולא `nav.side`: ה-<style> של כל דף נטען
     אחרי הקובץ הזה ומגדיר `nav.side{position:sticky}` מחוץ ל-media,
     כלומר סלקטור זהה שבא מאוחר יותר מנצח. בלי הספציפיות הנוספת
     התפריט נשאר בזרימה, תפס שורת גריד בגובה מסך מלא, ודחף את
     התוכן 908 פיקסלים למטה — מסך ריק לגמרי בטלפון. */
  .shell nav.side{position:fixed; top:0; bottom:0; inset-inline-start:0;
    inset-inline-end:auto; width:min(320px,86vw); height:100dvh; z-index:90;
    display:flex; flex-direction:column; flex-wrap:nowrap; align-items:stretch;
    overflow-y:auto; border:0;
    padding-bottom:calc(var(--s-4) + env(safe-area-inset-bottom,0px));
    transform:translateX(-100%);
    transition:transform var(--t-mid) var(--e);
    box-shadow:24px 0 60px rgba(11,31,77,.35)}
  [dir="rtl"] .shell nav.side{transform:translateX(100%)}
  html[data-navopen] .shell nav.side{transform:none}
  /* מה שהכלל הקודם הסתיר כדי לדחוס שורה — חוזר, כי במגירה
     יש מקום והקבוצות הן מה שהופך שתים־עשרה שורות לרשימה. */
  .shell nav.side .grp{display:block}
  .shell nav.side .spacer{display:block; flex:1}
  .shell nav.side .who{display:flex; padding:var(--s-3);
    border-bottom:1px solid var(--chrome-line); margin-bottom:var(--s-2)}
  .shell nav.side a.nav{width:100%; min-height:48px}
  .shell nav.side a.nav .lbl{flex:1}

  /* ── מסך ההחשכה ── */
  .mscrim{position:fixed; inset:0; z-index:80; background:rgba(7,22,51,.45);
    opacity:0; pointer-events:none; transition:opacity var(--t-fast) var(--e)}
  html[data-navopen] .mscrim{opacity:1; pointer-events:auto}
  html[data-navopen] body{overflow:hidden}

  /* שישה סכומים מלאים מעל שש עמודות לא נכנסים ל-390 פיקסלים —
     הם נדחסים זה לזה ונקראים כמספר אחד ארוך. בטלפון נשאר הסכום
     של החודש הנוכחי בלבד, וזה ממילא המספר שפותחים בשבילו את
     הגרף; השאר נקראים מהגובה ומהחודש שמתחת. */
  .mbars .b .v{opacity:0}
  .mbars .b.now .v{opacity:1; font-size:var(--t-sm); font-weight:700}

  main{padding:var(--s-4) var(--s-4) calc(var(--s-6) + env(safe-area-inset-bottom,0px))}
  .two{grid-template-columns:1fr}
  .btn{min-height:44px}
  .btn.sm{min-height:40px}
  .tabs{overflow-x:auto; -webkit-overflow-scrolling:touch}
}

/* מעל הנקודה הזאת הסרגל והמסך פשוט לא קיימים. */
@media (min-width:961px){
  .mbar, .mscrim{display:none !important}
}
@media (prefers-reduced-motion:reduce){
  .shell nav.side, .mscrim{transition:none}
}

/* ══ מסך הגביה ══════════════════════════════════════════
   הדף הזה עשה ארבע עבודות בטור אחד באורך 3,700 פיקסלים, וכל
   קטע בו נראה כמו הקודם: כותרת, ואז רשימת כרטיסים לבנים.
   מנוי, הרשאת חיוב, חיוב פתוח ותשלום שהתקבל הם ארבעה דברים
   שונים לגמרי — ובעין הם היו זהים.

   שני תיקונים, ושניהם מבניים ולא קוסמטיים:

   **ארבע לשוניות**, אחת לכל עבודה. כמה נכנס · מי חייב ·
   מה רץ כל חודש · מה התקבל. במקום לגלול בין ארבע שאלות,
   בוחרים אחת.

   **אנטומיה לכל סוג.** לא צבע שונה לאותה שורה — מבנה שונה,
   שנגזר ממה שהדבר באמת הוא:
     חיוב  — הכסף הוא הגיבור, ופס צבע בקצה אומר את המצב.
     מנוי  — קצב: היום בחודש בעיגול, כמו תאריך בלוח שנה.
     הרשאה — אמצעי: ארבע הספרות במונו הן הכותרת.
     תשלום — שורת ספר חשבונות: טבלה צפופה, בלי כרטיס בכלל.
   ═══════════════════════════════════════════════════════ */

/* ── לשוניות ─────────────────────────────────────────── */
.tabs{display:flex; gap:2px; margin:0 0 var(--s-5);
  border-bottom:1px solid var(--line); overflow-x:auto;
  scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{
  appearance:none; background:none; border:0; cursor:pointer;
  font:inherit; font-size:var(--t-sm); font-weight:700;
  color:var(--ink-3); white-space:nowrap;
  padding:var(--s-3) var(--s-4); min-height:44px;
  border-bottom:2px solid transparent; margin-bottom:-1px;
  display:flex; align-items:center; gap:var(--s-2);
  transition:color var(--t-fast) var(--e), border-color var(--t-fast) var(--e)}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-selected="true"]{color:var(--brand);
  border-bottom-color:var(--brand)}
.tabs button:focus-visible{outline:2px solid var(--brand);
  outline-offset:-2px; border-radius:var(--r-sm) var(--r-sm) 0 0}
/* מספר על לשונית — כמה פריטים מחכים שם. השתיקה של לשונית
   ריקה שקולה למספר אפס, ולכן היא לא נצבעת. */
.tabs .c{font-size:var(--t-xs); font-weight:700; border-radius:999px;
  padding:1px 7px; background:var(--raise); color:var(--ink-3);
  font-variant-numeric:tabular-nums}
.tabs button[aria-selected="true"] .c{background:var(--brand-soft);
  color:var(--brand)}
.tabs .c.hot{background:var(--crit-soft); color:var(--crit)}

/* ── כותרת קטע בתוך לשונית ───────────────────────────── */
.sec{display:flex; align-items:baseline; gap:var(--s-3);
  margin:var(--s-6) 0 var(--s-3)}
.sec:first-child{margin-top:0}
.sec h3{margin:0; font-size:var(--t-md); display:flex;
  align-items:center; gap:var(--s-2)}
.sec .sub{color:var(--ink-3); font-size:var(--t-xs); flex:0 1 auto}
.sec .rule{flex:1; height:1px; background:var(--line)}

/* ── מנוי: קצב ───────────────────────────────────────── */
/* היום בחודש בעיגול. מנוי הוא לוח שנה, לא רשומה — ומה
   שמזהה אותו בשיחה הוא ״הוא יורד ב-5״. */
/* ‎.plan‎ ולא ‎.sub‎: ‎.sub‎ כבר היה כותרת המשנה של כל מסך,
   ושורת מנוי עם רקע, מסגרת וצל נחתה על כל טקסט הסבר בדף. */
.plan{display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-3) var(--s-4); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:var(--s-2); box-shadow:var(--shadow-1)}
.plan .day{flex:none; width:42px; height:42px; border-radius:50%;
  display:grid; place-items:center; background:var(--brand-soft);
  color:var(--brand); font-weight:700; font-size:var(--t-md);
  font-family:var(--mono); font-variant-numeric:tabular-nums; line-height:1}
.plan .day small{display:block; font-size:9px; font-weight:600;
  opacity:.75; margin-top:-2px}
.plan.late{border-color:var(--warn); background:var(--warn-soft)}
/* כתום המותג, לא אוכרה. העיגול הוא הדבר הצבעוני היחיד בשורה
   והוא צריך להיות הצבע שלנו. */
.plan.late .day{background:var(--orange); color:var(--on-orange)}
.plan .t{flex:1; min-width:0}
.plan .t b{display:block; font-size:var(--t-sm); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.plan .t small{display:block; color:var(--ink-3); font-size:var(--t-xs)}
.plan .amt{flex:none; text-align:end}
.plan .amt .v{font-weight:800}
.plan .amt small{display:block; color:var(--ink-3); font-size:11px}

/* ── הרשאה: אמצעי ────────────────────────────────────── */
/* ארבע הספרות הן הכותרת, לא הערת שוליים. זה מה שהלקוח
   מזהה בטלפון, וזה מה שאומר במה בדיוק נחייב אותו. */
.mand{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:var(--s-2); box-shadow:var(--shadow-1)}
.mand .face{flex:none; min-width:132px; padding:var(--s-2) var(--s-3);
  border-radius:var(--r-sm); background:var(--ground);
  border:1px solid var(--line)}
.mand .face .no{display:block; font-family:var(--mono,"IBM Plex Mono",monospace);
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
  font-weight:700; font-size:var(--t-sm); white-space:nowrap}
.mand .face .kind{display:block; font-size:10px; color:var(--ink-3);
  margin-top:1px}
.mand .t{flex:1; min-width:150px}
.mand .t b{display:block; font-size:var(--t-sm); line-height:1.3}
.mand .t small{display:block; color:var(--ink-3); font-size:var(--t-xs)}
.mand .acts{display:flex; gap:var(--s-2); flex:none; flex-wrap:wrap}
.mand.off{opacity:.72}
.mand.off .face{background:var(--raise)}
.mand.bad{border-color:var(--crit)}
.mand.bad .face{border-color:var(--crit); background:var(--crit-soft)}

/* ── תשלום: שורת ספר ─────────────────────────────────── */
/* בלי כרטיס, בלי מסגרת, בלי צל. תשלום שהתקבל הוא עובדה
   גמורה שאין עליה מה לעשות — הוא צריך להיסרק, לא להיקרא. */
.ledger{width:100%; border-collapse:collapse; font-size:var(--t-sm)}
.ledger th{text-align:start; font-size:var(--t-xs); font-weight:700;
  color:var(--ink-3); padding:0 var(--s-3) var(--s-2);
  border-bottom:1px solid var(--line)}
.ledger td{padding:var(--s-2) var(--s-3);
  border-bottom:1px solid var(--line)}
.ledger tr:last-child td{border-bottom:0}
.ledger .amt{text-align:end; font-weight:700;
  font-family:var(--mono,"IBM Plex Mono",monospace);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.ledger .when{color:var(--ink-3); white-space:nowrap;
  font-variant-numeric:tabular-nums}
.ledger tbody tr:hover{background:var(--raise)}

/* ── לשונית ריקה ─────────────────────────────────────── */
.quiet{display:flex; align-items:center; gap:var(--s-3);
  padding:var(--s-5) var(--s-4); border-radius:var(--r);
  border:1px dashed var(--line); color:var(--ink-3);
  font-size:var(--t-sm)}

@media (max-width:640px){
  .mand .face{min-width:0; flex:1}
  .ledger th:nth-child(3), .ledger td:nth-child(3){display:none}
}

/* ══ תנועה ══════════════════════════════════════════════
   שלושה שימושים בלבד, וכל אחד אומר משהו:

   **שלד** בזמן טעינה, בצורת מה שעומד להגיע. טקסט ״טוען…״
   באמצע מסך ריק לא אומר כמה עוד, והמסך קופץ כשהתוכן מגיע.
   שלד בגודל הנכון שומר את הפריסה במקום ומראה מה בדרך.

   **גדילה** למספר ולעמודה. סכום שעולה מאפס ועמודה שצומחת
   אומרים ״זו מדידה״ — וזה בדיוק מה שהם. מספר שפשוט מופיע
   נראה כמו טקסט.

   **כניסה מדורגת** לרשימה, כדי שהעין תוכל לעקוב אחרי סדר
   השורות במקום לקבל קיר.

   כל אחד מהם מכובה לחלוטין תחת prefers-reduced-motion — לא
   מקוצר, מכובה. אנימציה מקוצרת עדיין מזיזה את המסך.
   ═══════════════════════════════════════════════════════ */

/* ── שלד ─────────────────────────────────────────────── */
.sk{position:relative; overflow:hidden; border-radius:var(--r-sm);
  background:var(--raise)}
.sk::after{content:""; position:absolute; inset:0;
  background:linear-gradient(90deg, transparent, rgba(var(--brand-rgb),.09), transparent);
  transform:translateX(-100%); animation:sheen 1.25s var(--e) infinite}
.sk-line{height:12px; margin:7px 0}
.sk-line.w40{width:40%} .sk-line.w60{width:60%} .sk-line.w80{width:80%}
.sk-card{height:92px; margin-bottom:var(--s-2)}
.sk-row{height:56px; margin-bottom:var(--s-2)}
.sk-chart{height:168px; margin:var(--s-3) 0}
@keyframes sheen{to{transform:translateX(100%)}}
/* הברק זז מימין לשמאל בעברית, אחרת הוא נע נגד כיוון הקריאה */
[dir="rtl"] .sk::after{animation-name:sheen-rtl}
@keyframes sheen-rtl{from{transform:translateX(100%)} to{transform:translateX(-100%)}}

/* ── כניסה מדורגת ────────────────────────────────────── */
/* ההשהיה מגיעה מ---i שהסקריפט שם על השורה. מוגבלת ל-12 כדי
   שרשימה של ארבעים לא תיגמר להיכנס אחרי שנייה וחצי. */
.stagger > *{animation:rowin var(--t-mid) var(--e) backwards;
  animation-delay:calc(min(var(--i, 0), 12) * 26ms)}
@keyframes rowin{from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none}}

/* ── מספר שעולה, עמודה שצומחת ────────────────────────── */
.meter .n.counting{font-variant-numeric:tabular-nums}
.mbars .b .bar{transition:height var(--t-slow) var(--e)}
.split span{transition:width var(--t-slow) var(--e)}

/* ── פס התקדמות לפעולה שנוגעת בכסף ───────────────────── */
/* גביה, חיוב חודשי ושליחת תזכורות לוקחים זמן ופונים החוצה.
   כפתור מסתובב אומר ״לחצת״; פס עליון אומר ״המערכת עסוקה
   עכשיו״, וזה ההבדל בין להמתין לבין ללחוץ שוב. */
.topbar{position:fixed; inset-inline:0; top:0; height:3px; z-index:60;
  background:transparent; pointer-events:none; opacity:0;
  transition:opacity var(--t-fast) var(--e)}
.topbar.on{opacity:1}
.topbar i{display:block; height:100%; width:36%;
  background:linear-gradient(90deg, transparent, var(--brand), transparent);
  animation:sweep 1.05s var(--e) infinite}
@keyframes sweep{from{transform:translateX(-120%)} to{transform:translateX(380%)}}

@media (prefers-reduced-motion:reduce){
  .sk::after{animation:none}
  .stagger > *{animation:none}
  .mbars .b .bar, .split span{transition:none}
  .topbar i{animation:none; width:100%;
    background:linear-gradient(90deg, var(--brand), var(--brand))}
}

/* ── מה צריך לעשות עכשיו ────────────────────────────────
   נקרא needs ולא todo, כי `todo` כבר שימש כמאפיין על שורת
   הוראת קבע שאיחרה — `class="so todo"`. רכיב ומאפיין שחולקים
   שם נלחמים על display, וכל שבע השורות האלה נערמו לעמודה
   בגובה 179 פיקסלים לפני שמישהו הבחין.
   הרשימה היחידה במסך שדורשת פעולה. קודם היא הייתה מפוזרת
   בארבעה מקומות — פס מעל הגרף, פס בתוך המנויים, לוח בתוך
   ההרשאות ושורה ליד התזכורות — וכל אחד החזיק רבע מהתשובה.
   תשובה שמורכבת מגלילה היא תשובה שמפספסים חלק ממנה.
   ───────────────────────────────────────────────────── */
.needs{display:flex; flex-direction:column; gap:var(--s-2);
  margin-bottom:var(--s-5)}
.needs .it{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); border-radius:var(--r);
  border:1px solid var(--line); background:var(--card);
  box-shadow:var(--shadow-1)}
.needs .it.crit{border-color:var(--crit); background:var(--crit-soft)}
.needs .it.warn{border-color:var(--warn); background:var(--warn-soft)}
.needs .it.info{border-color:var(--brand); background:var(--brand-soft)}
.needs .it .ic{flex:none; display:flex}
.needs .it.crit .ic{color:var(--crit)}
.needs .it.warn .ic{color:var(--warn)}
.needs .it.info .ic{color:var(--brand)}
.needs .it .t{flex:1; min-width:180px}
.needs .it .t b{display:block; font-size:var(--t-sm); line-height:1.35}
.needs .it .t small{display:block; color:var(--ink-3); font-size:var(--t-xs);
  line-height:1.5; margin-top:2px}
.needs .it .btn{flex:none}
.needs .clear{display:flex; align-items:center; gap:var(--s-2);
  padding:var(--s-3) var(--s-4); border-radius:var(--r);
  border:1px solid var(--ok); background:var(--ok-soft); color:var(--ok);
  font-size:var(--t-sm); font-weight:700}

/* פס יחסי: גיול חוב ואמצעי תשלום. אותו רכיב, שני שימושים. */
.split{display:flex; height:14px; border-radius:var(--r-full); overflow:hidden;
  background:var(--raise); margin-bottom:var(--s-3)}
.split span{display:block; height:100%}
.legend{display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-4); font-size:var(--t-sm)}
.legend .it{display:flex; align-items:center; gap:6px}
.legend .sw{width:10px; height:10px; border-radius:3px; flex:none}
.legend .n{color:var(--ink-3); font-size:var(--t-xs)}

.so{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:var(--s-2); box-shadow:var(--shadow-1)}
/* ״איחר״, ולא ״לעשות״. השם אומר מה קרה, לא מה נעשה בקשר לזה. */
.so.late{border-color:var(--warn); background:var(--warn-soft)}
.so .t{flex:1; min-width:150px}
.so .t b{display:block; font-size:var(--t-sm); line-height:1.3}
.so .t small{color:var(--ink-3); font-size:var(--t-xs)}

/* ── הרשאות חיוב ────────────────────────────────────────
   שורה כאן מייצגת רשות לקחת כסף מחשבון של מישהו. לכן היא
   נקראת קודם כל כ"של מי ובאיזה אמצעי", ורק אחר כך כפקד:
   השם והתווית גדולים, המצב צבוע, והפעולה ההרסנית — ביטול —
   היא לא כפתור ראשי ולא באותו צבע כמו השאר.
   ───────────────────────────────────────────────────── */
.mnd{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:var(--s-2); box-shadow:var(--shadow-1)}
.mnd.off{opacity:.7; background:var(--raise)}
.mnd.bad{box-shadow:inset 3px 0 0 var(--crit), var(--shadow-1);
  border-color:var(--crit)}
.mnd .t{flex:1; min-width:160px}
.mnd .t b{display:block; font-size:var(--t-sm); line-height:1.35}
.mnd .t small{display:block; color:var(--ink-3); font-size:var(--t-xs)}
/* המספר תמיד לטינית ומשמאל לימין, גם בתוך שורה עברית —
   ‎•••• 4242‎ שהתהפך הוא ארבע ספרות שאי אפשר להשוות לכרטיס. */
.mnd .card{font-family:var(--mono,"IBM Plex Mono",monospace);
  font-variant-numeric:tabular-nums; direction:ltr; unicode-bidi:isolate;
  font-weight:700; white-space:nowrap}
.mnd .acts{display:flex; gap:var(--s-2); flex-wrap:wrap; flex:none}

/* בורר אמצעי התשלום. ארבעה אמצעים שמתנהגים אחרת זה מזה,
   ולכן כל אחד אומר בשורה אחת מה יקרה אם ייבחר — במקום
   רשימה נפתחת שבה כולם נראים אותו דבר.

   שתי שורות כאן קיימות בגלל באג שהגיע לפרודקשן: הכלל הגלובלי
   `input,select,textarea{width:100%; min-height:44px}` חל גם על
   כפתור רדיו, והפך אותו לריבוע של 44 פיקסלים; והטקסט שלידו,
   בלי min-width:0, התכווץ לאות אחת בשורה. שניהם מבוטלים במפורש
   כאן, כי ברירת המחדל נכונה לשדה טקסט ושגויה לחלוטין לרדיו. */
.kindpick{display:grid; gap:var(--s-2); margin-bottom:var(--s-3)}
@media (min-width:560px){ .kindpick{grid-template-columns:1fr 1fr} }
.kindpick label{display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3); border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); cursor:pointer; margin:0; min-width:0;
  transition:border-color .12s ease, background .12s ease}
.kindpick label:hover{border-color:var(--brand)}
.kindpick input[type="radio"]{
  /* ביטול מפורש של סגנון שדה הטקסט הגלובלי */
  width:18px; height:18px; min-height:0; padding:0; margin:3px 0 0;
  flex:0 0 auto; border-radius:50%; accent-color:var(--brand)}
/* העטיפה של הטקסט חייבת לגדול ולהיות מותרת להתכווץ מתחת לרוחב
   המילה הארוכה. בלי min-width:0 היא מקבלת רוחב מינימלי של תוכן
   ואז כל אות יורדת שורה. */
.kindpick label > span{flex:1 1 auto; min-width:0}
.kindpick .n{display:block; font-weight:700; font-size:var(--t-sm);
  line-height:1.35}
.kindpick .d{display:block; color:var(--ink-3); font-size:var(--t-xs);
  line-height:1.5; margin-top:2px}
.kindpick label:has(input:checked){border-color:var(--brand);
  background:var(--brand-soft); box-shadow:inset 0 0 0 1px var(--brand)}
.kindpick input:focus-visible{outline:2px solid var(--brand); outline-offset:2px}

/* מה עומד להיגבות, לפני שנגבה. סכום גדול, ורשימה שאפשר
   לסרוק — אף אחד לא אמור ללחוץ ״גביה״ ולגלות אחר כך במי. */
.collect{border:1px solid var(--line); border-radius:var(--r);
  background:var(--card); padding:var(--s-4); box-shadow:var(--shadow-1)}
.collect .sum{display:flex; align-items:baseline; gap:var(--s-2);
  flex-wrap:wrap; margin-bottom:var(--s-3)}
.collect .sum .big{font-size:var(--t-xl); font-weight:800}
.collect ul{margin:0; padding:0; list-style:none; max-height:230px;
  overflow-y:auto}
.collect li{display:flex; gap:var(--s-3); align-items:center;
  padding:var(--s-2) 0; border-top:1px solid var(--line); font-size:var(--t-sm)}
.collect li span:first-child{flex:1; min-width:0; overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap}

/* תווית שקיימת לקורא מסך ואינה תופסת מקום בעין. `display:none`
   היה מסתיר אותה גם מהם, וזה בדיוק ההפך ממה שהיא נועדה לעשות. */
.sr-only{position:absolute; width:1px; height:1px; margin:-1px; padding:0;
  overflow:hidden; clip:rect(0 0 0 0); clip-path:inset(50%); white-space:nowrap;
  border:0}

/* ── קליטת תיקון חדש ────────────────────────────────────
   שני חלונות זה לצד זה, כי הנציג עושה כאן דבר אחד: מוצא את
   מי שעל הקו ורואה עליו הכול. חיפוש משמאל, הפרטים מימין,
   ושניהם על המסך באותו רגע — הגרסה הקודמת דרשה קליק בין
   ״מצאתי״ ל״מה יש לו״, וקליק כזה נעשה בזמן שמישהו מחכה בטלפון.

   בעברית העמודה הראשונה בגריד היא הימנית, ולכן הפרטים
   נכתבים ראשונים והחיפוש שני — ההפך מסדר הקריאה בקוד.
   ───────────────────────────────────────────────────── */
.intake{display:grid; grid-template-columns:1fr minmax(272px, 340px);
  gap:var(--s-4); align-items:start}
@media (max-width:900px){
  /* בטלפון אין ״לצד״. החיפוש עולה למעלה, כי בלעדיו אין מה להראות. */
  .intake{grid-template-columns:1fr}
  .intake .find{order:-1}
}
.intake .find{position:sticky; top:var(--s-3); align-self:start;
  display:flex; flex-direction:column; gap:var(--s-3)}
.intake .shown{min-width:0}

.finder{background:var(--card); border:1px solid var(--line);
  border-radius:var(--r); padding:var(--s-3); box-shadow:var(--shadow-1)}
.finder input{width:100%; font-size:var(--t-md)}
.finder .hint{display:block; color:var(--ink-3); font-size:var(--t-xs);
  line-height:1.6; margin-top:var(--s-2)}

/* תוצאות. שורה אחת לאדם, וסימון ברור על מי מוצג כרגע —
   בלעדיו הנציג לא יודע אם מה שמימין הוא מי שהוא לחץ עליו. */
/* ‎.found‎ ולא ‎.hit‎: ‎hit‎ כבר שימש כמאפיין על פעימת פס
   החיבור — ‎class="beat hit"‎ — ותוצאת חיפוש ברוחב מלא עם
   מסגרת ורקע נחתה על נקודה בגודל שש פיקסלים. */
.hits{display:flex; flex-direction:column; gap:6px; max-height:58vh;
  overflow-y:auto; padding-left:2px}
.found{display:flex; gap:var(--s-2); align-items:center; width:100%;
  text-align:start; padding:var(--s-2) var(--s-3); cursor:pointer;
  background:var(--card); border:1px solid var(--line);
  border-radius:var(--r-sm); font:inherit; color:inherit;
  transition:border-color .12s ease, background .12s ease}
.found:hover{border-color:var(--brand); background:var(--brand-soft)}
.found[aria-current="true"]{border-color:var(--brand); background:var(--brand-soft);
  box-shadow:inset 2px 0 0 var(--brand)}
.found:focus-visible{outline:2px solid var(--brand); outline-offset:2px}
.found .t{flex:1; min-width:0}
.found .t b{display:block; font-size:var(--t-sm); line-height:1.3;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.found .t small{display:block; color:var(--ink-3); font-size:var(--t-xs);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.found .n{flex:none; font-size:var(--t-xs); font-weight:700; color:var(--brand);
  background:var(--brand-soft); border-radius:999px; padding:1px 7px}

/* ── קליטת לקוח חדש ─────────────────────────────────────
   חמישה שלבים, ורשימה ולא פס התקדמות: פס אומר כמה נשאר,
   רשימה אומרת מה נשאר — ורק אחת מהן אומרת מה לעשות עכשיו.
   ───────────────────────────────────────────────────── */
.pipe{display:flex; gap:var(--s-2); flex-wrap:wrap; margin-bottom:var(--s-5)}
.pipe .col{flex:1; min-width:132px; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r); padding:var(--s-3);
  box-shadow:var(--shadow-1)}
.pipe .col .n{font-size:var(--t-xl); font-weight:800; line-height:1}
.pipe .col .s{font-size:var(--t-sm); font-weight:700; color:var(--ink);
  margin-top:2px}
/* שתי שורות תמיד, גם כשהטקסט קצר: אחרת הכרטיס עם המשפט הקצר יוצא
   בגובה אחר וכל השורה נראית שבורה. */
.pipe .col .w{font-size:var(--t-xs); color:var(--ink-3); margin-top:4px;
  line-height:1.5; min-height:calc(var(--t-xs) * 1.5 * 2)}
/* ‎on‎ ולא ‎live‎: ‎.live‎ הוא פס מצב החיבור, רכיב flex בפני עצמו,
   והעמודה שסומנה ״פעיל״ קיבלה את הפריסה שלו על התוכן שלה. */
.pipe .col.on{border-color:var(--ok)}
.pipe .col.on .n{color:var(--ok)}
.pipe .col.has .n{color:var(--brand)}
.pipe .col.dim{opacity:.6}

/* שורת אדם. שם קודם, ואחריו רק מה שמשתנה בין אדם לאדם — ההסבר על
   השלב כתוב פעם אחת מעל הקבוצה ולא שוב בכל שורה. */
.who-row{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  margin-bottom:var(--s-2); box-shadow:var(--shadow-1)}
.who-row.stuck{border-color:var(--warn); background:var(--warn-soft)}
.who-row .ic{width:36px; height:36px; border-radius:var(--r-full); flex:none;
  display:grid; place-items:center; background:var(--brand-soft); color:var(--brand)}
.who-row.stuck .ic{background:var(--warn-soft); color:var(--warn)}
.who-row .t{flex:1; min-width:150px}
.who-row .t b{display:block; font-size:var(--t-md); line-height:1.25}
.who-row .t small{color:var(--ink-3); font-size:var(--t-xs)}
.who-row .btn{flex:none}

.steps5{list-style:none; padding:0; margin:0 0 var(--s-4)}
.steps5 li{display:flex; gap:var(--s-3); align-items:flex-start;
  padding:var(--s-3) 0; border-bottom:1px solid var(--line)}
.steps5 li:last-child{border-bottom:0}
.steps5 .mark{width:24px; height:24px; border-radius:var(--r-full); flex:none;
  display:grid; place-items:center; font-size:var(--t-xs); font-weight:800;
  background:var(--raise); color:var(--ink-3)}
.steps5 li.done .mark{background:var(--ok); color:#fff}
.steps5 li.now .mark{background:var(--brand); color:#fff}
.steps5 li.now b{color:var(--brand)}
.steps5 .t{flex:1; min-width:0}
.steps5 .t b{display:block; font-size:var(--t-sm)}
.steps5 .t small{display:block; color:var(--ink-3); font-size:var(--t-xs);
  line-height:1.6; margin-top:2px}

.stuckrow{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); border:1px solid var(--warn);
  background:var(--warn-soft); border-radius:var(--r); margin-bottom:var(--s-2)}
.stuckrow .t{flex:1; min-width:150px}
.stuckrow .t b{display:block; font-size:var(--t-sm)}
.stuckrow .t small{color:var(--ink-3); font-size:var(--t-xs)}

/* ── עזרה במקום ────────────────────────────────────────
   הסימן תמיד באותו מקום — ליד כותרת המסך. פקד עזרה שנודד בין
   עמודים הוא פקד שמפסיקים לחפש בו.
   ───────────────────────────────────────────────────── */
.helpq{position:relative; width:22px; height:22px; min-height:22px; flex:none; padding:0;
  border-radius:var(--r-full); border:1px solid var(--line-2);
  background:var(--card); color:var(--ink-3); cursor:pointer;
  font:inherit; font-size:12px; font-weight:800; line-height:1;
  display:inline-grid; place-items:center; vertical-align:middle;
  margin-inline-start:8px;
  transition:background var(--t-fast) var(--e), color var(--t-fast) var(--e),
             border-color var(--t-fast) var(--e)}
.helpq:hover{background:var(--brand); color:#fff; border-color:var(--brand)}
.helpq[aria-expanded=true]{background:var(--brand); color:#fff; border-color:var(--brand)}
.helpq:focus-visible{outline:2px solid var(--focus); outline-offset:2px}
/* העיגול נשאר 22 פיקסלים — הוא סימן שאלה ליד כותרת ולא כפתור
   ראשי — אבל שטח המגע מסביבו נמתח ל-44. אצבע אינה עכבר, ויעד
   של 22 פיקסלים במסך טלפון הוא יעד שמחטיאים. */
.helpq::after{content:""; position:absolute;
  inset:calc((44px - 100%) / -2) calc((44px - 100%) / -2)}

.helppop{position:absolute; z-index:200; background:var(--card);
  border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-3); padding:var(--s-4);
  font-size:var(--t-sm); line-height:1.65; color:var(--ink);
  animation:helpin var(--t-fast) var(--e)}
@keyframes helpin{from{opacity:0; transform:translateY(-4px)} to{opacity:1; transform:none}}
@media (prefers-reduced-motion:reduce){ .helppop{animation:none} }
.helppop .hh{display:flex; align-items:center; gap:var(--s-2);
  margin-bottom:var(--s-2); padding-bottom:var(--s-2);
  border-bottom:1px solid var(--line)}
.helppop .hh b{flex:1; font-size:var(--t-md)}
.helppop .hx{border:0; background:transparent; color:var(--ink-3); cursor:pointer;
  font:inherit; font-size:14px; padding:2px 6px; min-height:28px; border-radius:var(--r-sm)}
.helppop .hx:hover{background:var(--raise); color:var(--ink)}
.helppop p{margin:0 0 var(--s-2)}
.helppop p:last-child{margin:0}
.helppop .why{color:var(--ink-2); background:var(--raise); border-radius:var(--r-sm);
  padding:var(--s-2) var(--s-3); font-size:var(--t-xs); line-height:1.7}
.helppop .why b{color:var(--brand)}
.helppop .more{color:var(--ink-3); font-size:var(--t-xs); margin-top:var(--s-2)}

/* ── חיווי חיבור חי ────────────────────────────────────
   סשן פתוח נבדק כל כמה שניות. עד עכשיו כל בדיקה ציירה את
   המסך מחדש — ולכן הוא הבהב, הגלילה קפצה, ומי שהקליד משהו
   איבד אותו. המסך נצבע מחדש כשמשהו השתנה; הפס הזה מתעדכן
   בכל בדיקה, במקום, בלי לגעת בשאר.
   ───────────────────────────────────────────────────── */
.live{display:flex; align-items:center; gap:var(--s-3); flex-wrap:wrap;
  padding:var(--s-3) var(--s-4); border-radius:var(--r);
  border:1px solid var(--line); background:var(--card);
  margin-bottom:var(--s-4); font-size:var(--t-sm)}
.live .dot{width:10px; height:10px; border-radius:50%; flex:none;
  background:var(--ink-3); position:relative}
.live .txt{flex:1; min-width:140px; font-weight:600}
.live .meta{color:var(--ink-3); font-size:var(--t-xs); white-space:nowrap}
.live .code{font-family:var(--mono,"IBM Plex Mono",monospace); font-size:var(--t-xs);
  font-weight:700; padding:2px 8px; border-radius:var(--r-full);
  background:var(--crit-soft); color:var(--crit); direction:ltr;
  unicode-bidi:isolate; white-space:nowrap}

.live.on{border-color:var(--ok); background:var(--ok-soft)}
.live.on .dot{background:var(--ok)}
.live.on .txt{color:var(--ok)}
.live.wait{border-color:var(--warn); background:var(--warn-soft)}
.live.wait .dot{background:var(--warn)}
.live.wait .txt{color:var(--warn)}
.live.off{border-color:var(--crit); background:var(--crit-soft)}
.live.off .dot{background:var(--crit)}
.live.off .txt{color:var(--crit)}

/* הפעימה אומרת ״נבדק עכשיו״. בלעדיה אי אפשר להבדיל בין חיבור חי
   לבין מסך שקפא לפני עשר דקות — וזו בדיוק ההבחנה שצריך. */
.live .dot::after{content:""; position:absolute; inset:-4px; border-radius:50%;
  border:2px solid currentColor; opacity:0}
.live.on .dot::after{border-color:var(--ok); animation:ping 2s var(--e) infinite}
.live.wait .dot::after{border-color:var(--warn); animation:ping 2s var(--e) infinite}
@keyframes ping{
  0%{transform:scale(.7); opacity:.8}
  70%{transform:scale(1.9); opacity:0}
  100%{opacity:0}
}
.live .beat{width:6px; height:6px; border-radius:50%; background:currentColor;
  opacity:0; flex:none}
.live .beat.found{animation:beat .7s var(--e)}
@keyframes beat{0%{opacity:.9; transform:scale(1.5)} 100%{opacity:0; transform:scale(1)}}

@media (prefers-reduced-motion:reduce){
  .live .dot::after{animation:none !important}
  .live .beat.found{animation:none}
}

/* ── מעבר בין האפליקציות ───────────────────────────────
   ארבע אפליקציות על אותה מערכת. עד עכשיו המעבר ביניהן היה
   דרך הדלת הראשית ועוד הקלדה של אותו טוקן — וזה בדיוק סוג
   החיכוך שגורם לאנשים להחזיק ארבעה טאבים פתוחים.
   ───────────────────────────────────────────────────── */
.appsw{position:relative}
.appsw-btn{width:100%; justify-content:flex-start; color:var(--ink-3)}
.appsw-menu{position:absolute; bottom:calc(100% + 6px); inset-inline-start:0;
  min-width:min(78vw,260px); z-index:80;
  background:var(--card); border:1px solid var(--line); border-radius:var(--r);
  box-shadow:var(--shadow-3); padding:var(--s-2); display:flex;
  flex-direction:column; gap:2px}
.appsw-item{display:flex; align-items:center; gap:var(--s-2); width:100%;
  text-align:start; font:inherit; cursor:pointer; border:0; background:transparent;
  color:var(--ink); padding:var(--s-2) var(--s-3); border-radius:var(--r-sm);
  min-height:52px;
  transition:background var(--t-fast) var(--e)}
.appsw-item:hover{background:var(--raise)}
.appsw-item .ic{flex:none; width:32px; height:32px; border-radius:var(--r-sm);
  display:grid; place-items:center; background:var(--brand-soft); color:var(--brand)}
.appsw-item .t{flex:1; min-width:0}
.appsw-item b{display:block; font-size:var(--t-sm); line-height:1.25}
.appsw-item small{display:block; color:var(--ink-3); font-size:var(--t-xs);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

/* בסרגל שנהיה אופקי במסך צר, התפריט נפתח למטה ולא למעלה */
@media (max-width:960px){
  .appsw-menu{bottom:auto; top:calc(100% + 6px)}
}