.rvspin{width:46px;height:46px;border-radius:50%;
  border:3px solid rgba(255,255,255,.10);border-top-color:var(--ac);
  animation:rvspin 0.9s linear infinite}
@keyframes rvspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.rvspin{animation-duration:2.5s}}
/* ══ DESIGN TOKENS · SHUMA "Ledger" ══════════════════════════════
   מקור: מפרט העיצוב של המשתמש (SHUMA · Direction 07 · Ledger).

   ⚠️ שונו כאן **ערכים בלבד**. שמות הטוקנים נשארו כפי שהיו, ולכן אף
   אחד מ-300+ השימושים ב-CSS וב-JS לא נגע. זו הסיבה שהשינוי הזה בטוח:
   אין דרך שרכיב יישבר, כי אף רכיב לא נערך.

   כללי המערכת שהמפרט קובע, וכך הם מיושמים:
     • אין צללים        → --sh --glow --accent-glow = none
     • אין גרדיאנטים    → --logo-gradient = צבע אחד
     • רדיוס 6px בלבד   → --r --r2 = 6px, --r3 = 4px (תמונות ממוזערות)
     • פלטה חמה         → אף פעם לא שחור טהור ולא לבן טהור
     • אוקר = כסף ופעולה ראשית · ירוק = קול והשלמה · לבנה = פער
       צבע לעולם לא מייצג שני דברים.

   ⚠️ במפרט הכהה הגוונים הרכים **כהים** מהמשטח ולא בהירים ממנו, וההפרדה
   נוצרת מקווים ולא מהעלאת בהירות. לכן --s1/--s2 הם משטח אטום ולא
   שכבת לובן שקופה כמו קודם.
*/
:root {
  --bg:#17160F;
  --s1:#201E17;
  --s2:#201E17;
  --s3:#2A2417;
  --glass:#201E17;
  --glass-border:#2F2C22;
  --ac:#C9A052;--ac2:#C9A052;--ac3:#7E9A85;
  --gold:#C9A052;--ok:#7E9A85;--er:#C4746C;
  --tx:#F1ECDE;--t2:#9A9382;--t3:#6E695E;
  --r:6px;--r2:6px;--r3:4px;
  --blur:none;
  --glow:none;
  --sh:none;
  --logo-gradient:#C9A052;
  /* ⚠️ ה-U לוקח את var(--bg) ב-index.html, ולכן כאן הוא הופך
     לצבע הטקסט של המותג; הקו התחתון לצבע הראשי. ראה .logo-mark. */
  --logo-under:#C9A052;
  --accent-glow:none;
  --bd:#2F2C22;
}
[data-theme="light"]{
  --bg:#F4F1E9;
  --s1:#FBF9F3;
  --s2:#FBF9F3;
  --s3:#EFE7D4;
  --glass:#FBF9F3;
  --glass-border:#E2DCCC;
  --ac:#8A6E2E;--ac2:#8A6E2E;--ac3:#4E6656;
  --gold:#8A6E2E;--ok:#4E6656;--er:#8C4A44;
  --tx:#1F1D18;--t2:#6E695E;--t3:#95907F;
  --glow:none;
  --sh:none;
  --logo-gradient:#8A6E2E;
  --logo-under:#8A6E2E;
  --accent-glow:none;
  --bd:#E2DCCC;
}
/* ספרות טבלאיות בכל האפליקציה — כל ספרה ברוחב זהה, ולכן עמודות
   מספרים מתיישרות זו מתחת לזו. זה מה שהמפרט קורא לו "tabular-nums".

   ⚠️ מה שעוד **לא** בוצע: המפרט דורש שכל ספרה תהיה גם ב-IBM Plex Mono.
   לא עשיתי את זה כאן כי אין דרך ב-CSS לבחור ספרות בלבד — הגופן חל על
   האלמנט כולו, וטקסט לועזי בגוף ההודעה היה הופך למונו יחד איתן. זה
   דורש סימון של המספרים עצמם בקוד, וזה שינוי במבנה ולא בצבע. נרשם
   כמשימה נפרדת ולא הוברח פנימה. */
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent;
  font-feature-settings:"tnum" 1;font-variant-numeric:tabular-nums}
html,body{height:100%;overflow:hidden;background:var(--bg);color:var(--tx);font-family:'Assistant',sans-serif;font-size:16px;transition:background .4s,color .3s}
/* ⚠️ הכלל הזה נשבר ב-09/08 ותוקן באותו יום, אחרי שהמשתמש דיווח:
   *"נכנסתי לאפליקציה וצריך לשים לב — זה לא נותן לגלול למטה, כאילו
   תקוע. גם במסך הראשי, גם בכל תבנית, גם בהגדרות."*

   מה קרה: ביטוי רגולרי שנועד למחוק את `body::before{...}` תפס גם את
   החצי השני של `[data-theme="light"] body::before{...}`, מחק את
   `body::before{...}` והשאיר את התחילית `[data-theme="light"]` תלויה
   — והיא נדבקה לכלל הבא. `.page` הפך ל-`[data-theme="light"] .page`,
   כלומר **חל רק במצב בהיר**. באפליקציה, שהיא כהה כברירת מחדל, המסכים
   איבדו `position:fixed` ו-`display:flex`, גדלו לגובה התוכן, ואזור
   הגלילה לא היה לו למה להיצמד.

   ⚠️ הלקח: מחיקה בביטוי רגולרי על CSS מסוכנת בדיוק כמו על JS. שם
   היא בלעה 700 שורות; כאן היא בלעה חצי שורה — וזה היה גרוע יותר,
   כי שום בדיקה לא נפלה והקובץ נשאר תקין לחלוטין.

   `tools/verify_css_sanity.js` נוצר כדי שזה ייתפס בפעם הבאה. */
.page{position:fixed;inset:0;display:flex;flex-direction:column;background:transparent;z-index:1;animation:pageIn .3s cubic-bezier(.22,.68,0,1.2)}
.page.gone{display:none}
/* ⚠️ באג חי שנמצא ב-03/08, לא שיפור. הכלל היחיד שהיה כאן הוא
   `.page.gone`, כלומר המחלקה `gone` **עבדה רק על מסכים שלמים**.
   `hide(id)` ו-`classList.add('gone')` על כל אלמנט אחר לא עשו כלום,
   בשקט. נמדד בדפדפן: כרטיס קודי ההזמנה של המייסד היה גלוי לכל משתמש
   מחובר (השרת חוסם ב-403, ולכן זו לא פרצה — אבל הוא ראה כרטיס שאינו
   שלו), וכך גם קופסת "הקוד החדש" הריקה. */
/* ── ⚠️ "מוסתר" הוא מצב מוחלט, ולכן !important ──────────────
   17/08 — המשתמש, בפעם השלישית: "למה למשתמש יש עדיין חשוף
   את כפתור העתק דיבאג סריקה?"

   ב-16/08 הוספתי `admin-only` לכפתור, וב-17/08 גם למסך השני
   שנשכח. שניהם היו נכונים, ושניהם לא הספיקו: לכפתור יש
   `style="display:block"` **בתוך התג**, וסגנון מוטבע גובר על כל
   מחלקה. כלומר `gone` נוסף כמו שצריך — ופשוט לא עשה כלום.

   ⚠️ זו הסיבה שהתיקון כאן ולא שם: להסיר `display` מוטבע משני
   כפתורים פותר שני כפתורים, ומשאיר את המלכודת דרוכה לכל
   כפתור שייכתב מחר. `gone` פירושו "לא על המסך" — לא "הצעה
   להיעלם". */
.gone{display:none!important}
@keyframes pageIn{from{opacity:0;transform:translateY(14px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
/* AUTH */
#pgAuth{justify-content:center;align-items:center;overflow-y:auto;padding:20px 0}
.auth-box{width:92%;max-width:380px;background:rgba(255,255,255,0.05);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border:1px solid var(--glass-border);border-radius:6px;padding:40px 28px;box-shadow:var(--sh),var(--glow)}
[data-theme="light"] .auth-box{background:rgba(255,255,255,0.82)}
.auth-logo{text-align:center;margin-bottom:32px}
/* ── הסימן של SHUMA ───────────────────────────────────────────
   ⚠️ עד 10/08 ישב כאן ריבוע זהב עם U כהה. מסמך המותג
   (SHUMA LEDGER) מגדיר את השימוש הראשי אחרת לגמרי: הסימן **בלי
   ריבוע**, U בצבע הטקסט וקו תחתון בצבע הראשי, ישר על רקע הדף.

   המשתמש, 10/08, כשראה את האייקון שנגזר מכאן: *"הלוגו בכלל זה
   לא הלוגו של האפליקציה."* — האפליקציה היא שהתרחקה מהמסמך.

   הצבעים ב-index.html נשארו var(--bg) ו-var(--logo-under), ולכן
   מה שהשתנה הוא הערכים שלהם למטה, לא ה-SVG. */
.logo-mark{width:64px;height:64px;margin:0 auto 16px;display:flex;align-items:center;justify-content:center;position:relative}
/* ההילה מסביב לריבוע ירדה יחד עם הריבוע. */
/* ⚠️ בלי stroke ובלי stroke-width כאן. הכלל הקודם דרס את מה
   שכתוב ב-SVG עצמו (#fff ועובי 2) — כלומר הצבעים והעובי של הסימן
   נקבעו ב-CSS ולא ב-path, וזו הייתה ההגדרה השנייה. עכשיו ה-SVG
   הוא המקור, וה-CSS רק קובע גודל. */
.logo-mark svg{width:56px;height:56px;fill:none;stroke-linecap:round;stroke-linejoin:round}
.logo-name{font-family:'Assistant',sans-serif;font-size:30px;font-weight:500;letter-spacing:.16em;direction:ltr}
.logo-name span{background:var(--logo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.logo-tagline{font-size:12px;color:var(--t2);margin-top:6px;letter-spacing:0.5px}
.auth-tabs{display:flex;background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:var(--r2);padding:4px;margin-bottom:24px;gap:4px}
.auth-tab{flex:1;padding:10px;border:none;border-radius:6px;font-family:'Assistant',sans-serif;font-size:13px;font-weight:600;cursor:pointer;background:transparent;color:var(--t2);transition:all .2s}
.auth-tab.active{background:rgba(201,160,82,0.15);color:var(--ac)}
.fg{margin-bottom:14px}
.fl{font-size:10px;font-weight:700;color:var(--t2);margin-bottom:6px;display:block;text-transform:uppercase;letter-spacing:0.6px}
.fi{width:100%;padding:13px 16px;background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:var(--r2);color:var(--tx);font-family:'Assistant',sans-serif;font-size:14px;outline:none;-webkit-appearance:none;transition:border-color .2s,background .2s}
[data-theme="light"] .fi{background:rgba(255,255,255,0.7);border-color:rgba(201,160,82,0.18)}
.fi::placeholder{color:var(--t3)}
[data-theme="light"] .fi{color:#1F1D18!important}
.fi:focus{border-color:var(--ac);background:rgba(201,160,82,0.05)}
.fi.bad{border-color:var(--er);animation:shake .35s}
@keyframes shake{0%,100%{transform:translateX(0)}25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.btn-primary{width:100%;padding:15px;background:var(--logo-gradient);border:none;border-radius:var(--r2);color:#fff;font-family:'Assistant',sans-serif;font-size:15px;font-weight:700;cursor:pointer;box-shadow:var(--accent-glow);transition:transform .15s;letter-spacing:0.2px}
.btn-primary:active{transform:scale(.97)}
.btn-primary:disabled{opacity:0.5;cursor:not-allowed}
.err-msg{color:var(--er);font-size:12px;text-align:center;margin-top:10px;min-height:16px}
.ok-msg{color:var(--ok);font-size:12px;text-align:center;margin-top:10px}
.forgot-link{text-align:center;margin-top:14px;font-size:12px;color:var(--t2);cursor:pointer;transition:color .2s}
.forgot-link:hover{color:var(--ac)}
.pwd-wrap{position:relative}
/* מד חוזק סיסמה — הצבע והטקסט נגזרים מ-nzPwdScore (01-core.js),
   הגדרה אחת לניקוד ואחת לתצוגה. */
.rel-pub{background:rgba(255,255,255,.03);border:1px solid var(--glass-border);border-radius:10px;padding:10px 12px;margin-bottom:6px}
.rel-pub summary{font-size:12px;color:var(--t2);cursor:pointer;font-family:'IBM Plex Mono',ui-monospace,monospace}
.rel-draft{background:rgba(201,160,82,.07);border:1px solid rgba(201,160,82,.25);border-radius:12px;padding:14px;margin-bottom:10px}
.rel-draft-v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:var(--ac);margin-bottom:8px}
.rel-draft-n{font-size:13px;color:var(--tx);line-height:1.8;white-space:pre-line}
/* ── עדכוני גרסה: כרטיס בגובה קבוע, והשאר בשקף ──────────────────
   ⚠️ ה-min-height אינו קוסמטי. הכרטיס הזה נטען מהשרת אחרי שהמסך
   נצבע, ובלי גובה שמור הוא גדל תחת האצבע ודוחף את כל מה שמתחתיו —
   נמדד 221px בכרום ו-557px בסך הכל באייפון. עכשיו המקום שמור מראש,
   וההחלפה של השלד בתוכן אינה משנה את גובה הדף. */
.rel-now{min-height:108px;background:rgba(255,255,255,.03);border:1px solid var(--glass-border);
  border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;justify-content:center}
.rel-now-v{display:flex;align-items:center;gap:8px;margin-bottom:7px}
.rel-now-v b{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:14px;color:var(--ac);font-weight:700}
.rel-now-v i{font-size:11px;color:var(--t3);font-style:normal}
.rel-now-t{font-size:12.5px;color:var(--t2);line-height:1.7;display:-webkit-box;
  -webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.rel-now-none{font-size:12.5px;color:var(--t2);line-height:1.7}
.rel-pend{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;
  color:var(--ac);background:rgba(201,160,82,.12);border-radius:20px;padding:3px 9px;margin-top:10px;align-self:flex-start}
/* שלד: תופס בדיוק את הגובה של התוכן, כדי שהמעבר לא יזיז כלום */
.rel-now-sk{height:82px;border-radius:8px;background:linear-gradient(90deg,
  rgba(255,255,255,.04) 25%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:relSk 1.4s linear infinite}
@keyframes relSk{0%{background-position:200% 0}100%{background-position:-200% 0}}
/* ── מה רץ אצל המשתמשים — מחוון לבעלים בלבד ───────────────────
   19/08. אותו עיקרון של גובה שמור כמו `.rel-now` למעלה: הכרטיס
   נטען מהשרת, ובלי מקום שמור מראש הוא היה קופץ תחת האצבע. */
.dep-now{min-height:96px;background:rgba(255,255,255,.03);border:1px solid var(--glass-border);
  border-radius:12px;padding:13px 14px;display:flex;flex-direction:column;justify-content:center}
.dep-row{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:3px 0}
.dep-k{font-size:12px;color:var(--t2)}
.dep-v{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:13px;font-weight:700;
  color:var(--ac);direction:ltr}
.dep-t{font-size:12px;color:var(--t3)}
.dep-hint{font-size:11.5px;color:var(--t3);line-height:1.7;margin-top:9px;
  padding-top:9px;border-top:1px solid var(--bd)}
.dep-none{font-size:12.5px;color:var(--t2);line-height:1.7}
.dep-now-sk{height:70px;border-radius:8px;background:linear-gradient(90deg,
  rgba(255,255,255,.04) 25%,rgba(255,255,255,.07) 50%,rgba(255,255,255,.04) 75%);
  background-size:200% 100%;animation:relSk 1.4s linear infinite}
/* השקף: רשימה שגוללת בתוך עצמה, ולא שקף שנמתח מעבר למסך */
/* ⚠️ `.modal-card` מיושר למרכז ומוגדר אחרי הבלוק הזה בקובץ, ולכן
   הוא גובר על מחלקה בודדת. שתי המחלקות יחד — כדי שפסקה של עדכון
   תיקרא כמו טקסט ולא כמו כיתוב מתחת לתמונה. */
.modal-card.rel-card{max-width:400px;text-align:right;padding:20px 18px;
  display:flex;flex-direction:column;max-height:82vh}
.rel-head{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-shrink:0}
.rel-x{background:rgba(255,255,255,.06);border:1px solid var(--glass-border);border-radius:8px;
  color:var(--t2);width:32px;height:32px;cursor:pointer;font-size:15px;flex-shrink:0}
.rel-body{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;
  margin:14px 0 4px;padding-left:2px;min-height:120px}
.rel-man{flex-shrink:0;border-top:1px solid var(--bd);padding-top:12px;margin-top:4px}
.rel-man summary{font-size:12px;color:var(--t2);cursor:pointer}
.rel-sec{font-size:11px;font-weight:700;color:var(--t3);letter-spacing:.4px;margin:2px 0 8px}
.rel-sec+.rel-sec,.rel-draft+.rel-sec,.rel-pub+.rel-sec{margin-top:16px}
/* ── ⚠️ הרשימות של האדמין: גובה קבוע, גלילה בתוך עצמן ────────────
   שלוש הרשימות האלה נטענות מהשרת אחרי שמסך ההגדרות נצבע, וכל אחת
   מהן מחליפה שורת "טוען…" בתוכן גבוה בהרבה. נמדד באייפון (שאין בו
   עוגן גלילה): 132px + 204px + 221px = **557px** שנדחפו תחת האצבע
   בזמן שהוא גלל — כלומר שני שלישים ממסך.
   גובה קבוע פותר את זה לגמרי ולא בקירוב: הדף לא יכול לגדול, לא
   משנה מה חוזר מהשרת ומתי. */
#acList,#incRecent,#inviteList{height:158px;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;border:1px solid var(--bd);border-radius:10px;padding:10px}
#acList:empty::after,#incRecent:empty::after,#inviteList:empty::after{content:'טוען…';font-size:12px;color:var(--t2)}
.nzic{opacity:.45;transition:opacity .15s,border-color .15s}
.nzic.on{opacity:1;border-color:var(--ac)!important}
.pwd-meter{display:flex;align-items:center;gap:8px;margin-top:8px}
.pwd-bar{flex:1;height:5px;border-radius:3px;background:rgba(255,255,255,.09);overflow:hidden}
.pwd-bar i{display:block;height:100%;width:0;border-radius:3px;transition:width .25s,background .25s}
.pwd-meter span{font-size:11px;font-weight:700;min-width:56px;text-align:left}
.pwd-s1 .pwd-bar i{width:25%;background:#C4746C}   .pwd-s1 span{color:#C4746C}
.pwd-s2 .pwd-bar i{width:50%;background:#D9A441}   .pwd-s2 span{color:#D9A441}
.pwd-s3 .pwd-bar i{width:75%;background:#C9A052}   .pwd-s3 span{color:#C9A052}
.pwd-s4 .pwd-bar i{width:100%;background:#7E9A85}  .pwd-s4 span{color:#7E9A85}
.pwd-wrap .fi{padding-left:44px}
.pwd-eye{position:absolute;left:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--t2);cursor:pointer;padding:6px;display:flex;align-items:center}
.pwd-eye svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* HEADER */
.hdr{background:rgba(23,22,15,0.75);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-border);padding:max(16px,env(safe-area-inset-top)) 16px 14px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0;position:sticky;top:0;z-index:50}
[data-theme="light"] .hdr{background:rgba(244,241,233,0.85)}
.hdr-logo{display:flex;align-items:center;gap:10px}
.hdr-ic{width:34px;height:34px;background:var(--logo-gradient);border-radius:6px;display:flex;align-items:center;justify-content:center}
.hdr-ic svg{width:18px;height:18px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
.hdr-name{font-family:'Assistant',sans-serif;font-size:16px;font-weight:500;letter-spacing:.16em}
.hdr-name span{background:var(--logo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
.hdr p{font-size:10px;color:var(--t2);margin-top:1px}
.hdr-btns{display:flex;gap:6px}
.hbtn{height:36px;border-radius:6px;background:rgba(255,255,255,0.06);border:1px solid var(--glass-border);color:var(--t2);font-family:'Assistant',sans-serif;font-size:12px;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:6px;padding:0 12px;transition:all .15s}
.hbtn:active{background:rgba(255,255,255,0.1)}
.hbtn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.hbtn.colored{background:rgba(201,160,82,0.12);color:var(--ac);border-color:rgba(201,160,82,0.25)}
/* SCROLL */
/* ⚠️ 16/08 — המשתמש, במחשב: "אם אני לא מצמצם את הרזולוציה אני לא
   יכול לגלול למטה ולראות את הכפתורים."
   נמדד: סרגל הניווט התחתון קבוע (position:fixed) ובגובה 73px, בעוד
   שכאן היו 40px בלבד — כלומר הסוף של כל רשימה נחתך מאחוריו. בשני
   מסכים המרווח היה אפילו 14px, כי סגנון מוטבע ב-HTML דרס את הכלל
   הזה לגמרי (padding:14px מאפס גם את padding-bottom).
   96px = 73 של הסרגל + מרווח נשימה. */
/* ── ⚠️ overscroll-behavior:contain — למה זה כאן ─────────────────
   המשתמש, 17/08: "כשאני במסך של ההגדרות ויורד למטה או בכללי גולל זה
   קופץ לי." חלק מהקפיצה היה תוכן שנטען מעליו (מטופל בכרטיסים עצמם),
   וחלק הוא שרשור הגלילה: כשאזור הגלילה מגיע לקצה, המחווה עוברת
   לגוף הדף ומייצרת קפיצה/ריבאונד. contain עוצר את המחווה בגבול
   האזור, ובאייפון זה ההבדל בין גלילה שנעצרת לגלילה שמתנתקת. */
.scroll{flex:1;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:96px}
/* ── פס מצב הרשת — גלובלי, לא בתוך מסך אחד ────────────────────
   המשתמש, 11/08: "לבדוק שיש התרעות למשתמש שיבין מצב רגיל מצב אופליין".
   ⚠️ position:fixed ולא sticky: הפס יושב מחוץ ל-.page, וכל מסך גולל
   בנפרד. sticky היה נצמד לתוך מסך אחד ונעלם בשאר. */
.nz-net{position:fixed;top:0;left:0;right:0;z-index:400;display:none;
  align-items:center;justify-content:center;gap:10px;
  padding:calc(6px + env(safe-area-inset-top)) 12px 6px;
  font-size:12px;font-weight:700;letter-spacing:.3px;
  font-family:'Assistant',sans-serif;text-align:center}
.nz-net.on{display:flex}
.nz-net.off{background:#3A2F14;border-bottom:1px solid rgba(201,160,82,.4);color:#E8C87A}
.nz-net.back{background:#16301F;border-bottom:1px solid rgba(52,211,153,.35);color:#6EE7B7}
.nz-net.update{background:#3A2F14;border-bottom:1px solid rgba(201,160,82,.4);color:#E8C87A}
.nz-net-b{background:var(--ac);border:0;border-radius:6px;color:#17160F;
  font-family:'Assistant',sans-serif;font-size:12px;font-weight:800;
  padding:6px 14px;cursor:pointer;min-height:32px}
.nz-net-b:active{opacity:.8}
.offline-bar{background:rgba(201,160,82,.08);border-bottom:1px solid rgba(201,160,82,.18);color:var(--gold);text-align:center;font-size:11px;font-weight:700;padding:6px;flex-shrink:0;display:none;letter-spacing:0.4px}
.offline-bar.on{display:block}
/* HOME */
.hero{margin:14px;background:linear-gradient(135deg,rgba(201,160,82,0.1),rgba(201,160,82,0.06));border:1px solid rgba(201,160,82,0.18);border-radius:6px;padding:24px 22px;position:relative;overflow:hidden}
.hero::before{content:'';position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(201,160,82,0.12),transparent 65%);pointer-events:none}
.hero::after{content:'';position:absolute;bottom:-40px;left:-40px;width:150px;height:150px;background:radial-gradient(circle,rgba(201,160,82,0.08),transparent 65%);pointer-events:none}
.hero h3{font-size:22px;font-weight:800;font-family:'Assistant',sans-serif;position:relative;z-index:1}
.hero .sub{color:var(--t2);font-size:12px;margin-top:4px;position:relative;z-index:1}
.hero .dt{font-size:11px;color:var(--ac);font-weight:600;margin-top:14px;position:relative;z-index:1;letter-spacing:0.3px}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin:0 14px}
.stat{background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:var(--r2);padding:16px 10px;text-align:center}
.stat .n{font-size:28px;font-weight:800;background:var(--logo-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;font-family:'Assistant',sans-serif;line-height:1}
.stat .l{font-size:10px;color:var(--t2);margin-top:5px;font-weight:600;text-transform:uppercase;letter-spacing:0.5px}
.sec-lbl{font-size:10px;font-weight:700;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin:16px 14px 8px}
.new-cta{margin:12px 14px 0;background:var(--logo-gradient);border:none;border-radius:6px;padding:22px 22px;display:flex;align-items:center;gap:18px;cursor:pointer;width:calc(100% - 28px);text-align:right;box-shadow:var(--accent-glow);transition:transform .15s;position:relative;overflow:hidden}
.new-cta::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.14),transparent 55%);pointer-events:none}
.new-cta:active{transform:scale(.97)}
.new-cta-icon{width:48px;height:48px;background:rgba(255,255,255,0.18);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.new-cta-icon svg{width:24px;height:24px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.new-cta h4{font-size:17px;font-weight:800;color:#fff;font-family:'Assistant',sans-serif}
.new-cta p{font-size:12px;color:rgba(255,255,255,.7);margin-top:3px}
/* REPORT LIST */
.rlist{display:flex;flex-direction:column;gap:8px;margin:0 14px}
.ritem{background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:var(--r2);padding:14px 16px;display:flex;align-items:center;gap:12px;cursor:pointer;transition:background .15s}
.ritem:active{background:rgba(255,255,255,0.07)}
[data-theme="light"] .ritem{background:rgba(255,255,255,0.72)}
.ric{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ric svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.rname{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rmeta{font-size:10px;color:var(--t2);margin-top:3px;letter-spacing:0.2px}
.rstatus{font-size:9px;font-weight:700;padding:4px 10px;border-radius:6px;flex-shrink:0;text-transform:uppercase;letter-spacing:0.4px}
.st-d{background:rgba(201,160,82,.1);color:var(--gold)}
.st-ok{background:rgba(126,154,133,.1);color:var(--ok)}
.rdel{background:none;border:none;color:var(--er);cursor:pointer;padding:6px;flex-shrink:0;opacity:0.5;transition:opacity .15s}
.rdel:active{opacity:1}
.rdel svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
/* ⚠️ אותו משקל ויזואלי כמו כפתור המחיקה, בצבע האפליקציה ולא באדום:
   כניסה לתיק אינה פעולה מסוכנת. 44px שטח נגיעה. */
.rtik{background:none;border:none;color:var(--ac);cursor:pointer;padding:6px;
  flex-shrink:0;opacity:.65;transition:opacity .15s;min-width:32px;min-height:32px;
  display:flex;align-items:center;justify-content:center}
.rtik:active{opacity:1}
/* PICKER */
.picker-ov{position:fixed;inset:0;z-index:100;background:rgba(23,22,15,.88);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;align-items:flex-end;padding:12px;opacity:0;pointer-events:none;transition:opacity .3s}
.picker-ov.open{opacity:1;pointer-events:all}
.picker-card{width:100%;background:rgba(32,30,23,0.97);border:1px solid var(--glass-border);border-radius:6px 28px 20px 20px;padding:28px 18px 24px;max-height:88vh;overflow-y:auto}
[data-theme="light"] .picker-card{background:rgba(244,241,233,0.98)}
.picker-card h3{font-size:18px;font-weight:800;margin-bottom:4px;font-family:'Assistant',sans-serif}
.picker-card>p{font-size:12px;color:var(--t2);margin-bottom:18px}
.type-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.tbtn{background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:6px;padding:20px 16px;cursor:pointer;text-align:right;display:flex;flex-direction:column;gap:8px;transition:transform .12s,border-color .2s,background .2s;position:relative;overflow:hidden}
[data-theme="light"] .tbtn{background:rgba(255,255,255,0.8)}
.tbtn::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,0.04),transparent);pointer-events:none}
.tbtn:active{transform:scale(.93)}
.tbtn.selected{border-color:var(--ac);background:rgba(201,160,82,0.12)}
.tbtn-locked{cursor:not-allowed!important;opacity:0.35}
.tbtn-locked:active{transform:none!important}
.tbtn .ti-wrap{width:40px;height:40px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.tbtn .ti-wrap svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.tbtn .tn{font-size:14px;font-weight:700;color:var(--tx)}
.tbtn .td{font-size:10px;color:var(--t2)}
.custom-type-inp{margin-top:12px;display:none}
.custom-type-inp.show{display:block}
/* FORM */
#pgForm .fhdr{background:rgba(23,22,15,0.75);backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);border-bottom:1px solid var(--glass-border);padding:max(16px,env(safe-area-inset-top)) 16px 14px;display:flex;align-items:center;gap:12px;flex-shrink:0}
[data-theme="light"] #pgForm .fhdr{background:rgba(244,241,233,0.88)}
.back-btn{width:36px;height:36px;background:rgba(255,255,255,0.07);border:1px solid var(--glass-border);border-radius:6px;color:var(--tx);cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:background .15s}
.back-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2.5;stroke-linecap:round}
.ftitle{font-size:15px;font-weight:800;font-family:'Assistant',sans-serif}
.fsub{font-size:11px;color:var(--t2);letter-spacing:0.2px}
/* ── ⚠️ שם תבנית ארוך שביצע את כל הכותרת ────────────
   21/08. המשתמש צילם את "חוות דעת מים פורמט שני": *"תשים לב
   שהשם של התבנית לאורך וזה לא מסודר טוב."* הכותרת נשברה למילה
   בשורה, ודחפה את כל הסרגל לגובה של שמונה שורות.

   הסיבה: הסרגל הוא flex, וכל שאר הפריטים בו מסרבים להתכווץ
   (`flex-shrink:0`). לכן כל הלחץ נפל על הכותרת לבדה — ובלי `min-width:0`
   היא לא יכולה לקצץ, אז היא שברה שורות במקום.

   ⚠️ השם אינו מקוצר בקוד ואינו נמחק — הוא נשאר שלם ב-title
   ונקטע בתצוגה בלבד. קיצוץ בטקסט עצמו היה מוריד מידע
   שהשמאי צריך כדי לדעת באיזה דוח הוא נמצא. */
.fhtx{flex:1 1 auto;min-width:0}
.ftitle,.fsub{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.fbadge{margin-right:auto;font-size:9px;font-weight:700;padding:4px 10px;border-radius:6px;background:rgba(201,160,82,0.14);color:var(--ac);text-transform:uppercase;letter-spacing:0.5px;flex:0 1 auto;min-width:0;max-width:38%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prog-wrap{padding:12px 18px;background:rgba(23,22,15,0.5);border-bottom:1px solid var(--glass-border);flex-shrink:0}
[data-theme="light"] .prog-wrap{background:rgba(244,241,233,0.65)}
.prog-steps{display:flex;gap:5px}
.ps{flex:1;height:3px;border-radius:4px;background:rgba(255,255,255,0.07);transition:background .3s}
/* ── סרגל הניווט בין שלבים ─────────────────────────────────────
   הבקשה: *"אפשרות לעבור בין פתיחת הדוח לאמצע שלו במהירות"*.
   הפסים כבר היו שם וסימנו התקדמות — כאן הם גם הופכים לכפתורים.
   שטח הלחיצה גדול מהפס עצמו כדי שאפשר יהיה לפגוע בהם באצבע. */
.psbtn{flex:1;padding:9px 0;background:none;border:0;cursor:pointer;min-height:0;
  display:flex;align-items:center;margin:-9px 0}
.psbtn .ps{width:100%}
.psbtn:hover .ps{background:rgba(255,255,255,0.22)}
.prog-steps{align-items:center}
.ps.done{background:var(--ac)}
.ps.cur{background:linear-gradient(90deg,var(--ac),var(--ac2));box-shadow:0 0 10px rgba(201,160,82,0.45)}
.prog-lbl{font-size:10px;color:var(--t2);margin-top:6px;font-weight:600;letter-spacing:0.3px}
.fsec{padding:18px 16px 0}
.fsec-title{font-size:10px;font-weight:800;color:var(--ac);text-transform:uppercase;letter-spacing:1.5px;margin-bottom:14px;display:flex;align-items:center;gap:8px}
.fsec-title::before{content:'';width:3px;height:14px;background:var(--logo-gradient);border-radius:4px;flex-shrink:0}
.fg2{margin-bottom:16px}
.fl2{font-size:10px;font-weight:700;color:var(--t2);margin-bottom:6px;display:flex;align-items:center;gap:4px;text-transform:uppercase;letter-spacing:0.5px}
textarea.fi{resize:none;min-height:90px;line-height:1.7}
select.fi{cursor:pointer;padding-left:34px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath fill='%238899B4' d='M5 6L0 0h10z'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:left 12px center}
.vrow{display:flex;gap:8px;align-items:flex-start}
.vrow .fi{flex:1}
.vbtn{width:46px;height:46px;flex-shrink:0;border-radius:var(--r2);border:1px solid var(--glass-border);background:rgba(255,255,255,0.06);color:var(--t2);cursor:pointer;display:flex;align-items:center;justify-content:center;transition:all .15s}
.vbtn:active{background:rgba(201,160,82,0.2);color:var(--ac)}
.spk-btn{width:22px;height:22px;flex-shrink:0;border:none;background:transparent;padding:0;margin:0;cursor:pointer;color:var(--t2);display:flex;align-items:center;justify-content:center;transition:color .15s}
.spk-btn:active{color:var(--ac)}
.spk-btn svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.vbtn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.date-row{display:flex;gap:6px}
.date-row select{flex:1;padding:10px 8px;font-size:12px;text-align:center}
/* `.other-inp` נמחקה עם פקד הבחירה — היא הסתירה ופתחה את תיבת
   "אחר" שלו, ואין עוד פקד כזה. */
/* DAMAGE TABLE */
.tbl-wrap{overflow-x:auto;border-radius:var(--r2);border:1px solid var(--glass-border)}
.dtbl{width:100%;border-collapse:collapse;font-size:12px}
.dtbl th{background:rgba(201,160,82,0.08);color:var(--t2);font-size:10px;font-weight:700;padding:10px 8px;text-align:right;white-space:nowrap;text-transform:uppercase;letter-spacing:0.5px}
.dtbl td{padding:8px 6px;border-top:1px solid rgba(255,255,255,0.04);vertical-align:middle}
.dtbl tr:last-child td{border-bottom:none}
.dtbl input{background:transparent;border:none;color:var(--tx);font-family:'Assistant',sans-serif;font-size:12px;width:100%;outline:none}
.dtbl input[type=number]{-moz-appearance:textfield}
.dtbl input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none}
.add-row-btn{width:100%;padding:11px;margin-top:8px;background:rgba(255,255,255,0.03);border:1px dashed rgba(255,255,255,0.1);border-radius:var(--r2);color:var(--t2);font-family:'Assistant',sans-serif;font-size:12px;cursor:pointer;transition:all .15s}
.add-row-btn:active{background:rgba(201,160,82,0.1);border-color:var(--ac);color:var(--ac)}
.del-row-btn{background:none;border:none;color:var(--er);font-size:16px;cursor:pointer;opacity:0.55;transition:opacity .15s;padding:2px}
.del-row-btn:active{opacity:1}
/* BUTTONS */
.fcta{padding:16px 16px 0}
.btn-main{width:100%;padding:16px;background:var(--logo-gradient);border:none;border-radius:var(--r);color:#fff;font-family:'Assistant',sans-serif;font-size:15px;font-weight:800;cursor:pointer;box-shadow:var(--accent-glow);transition:transform .15s;letter-spacing:0.3px}
.btn-main:active{transform:scale(.97)}
.btn-main:disabled{opacity:0.45;cursor:not-allowed}
.btn-sec{width:100%;padding:14px;margin-top:8px;background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:var(--r);color:var(--t2);font-family:'Assistant',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
.btn-sec:active{background:rgba(255,255,255,0.08)}
/* תיבת הסיכום ושורת ה"סה\"כ" נמחקו ב-09/08 יחד עם ה-HTML שלהן —
   .sum-box .sum-row .sum-divider .sum-total .tot-row. נמדד שאף אחת מהן
   אינה מוזכרת בשום קובץ JS או HTML לפני המחיקה. */
/* RECORDING */
.rec-ov{position:fixed;inset:0;z-index:200;background:rgba(23,22,15,.97);backdrop-filter:blur(28px);-webkit-backdrop-filter:blur(28px);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:20px;opacity:0;pointer-events:none;transition:opacity .25s}
.rec-ov.open{opacity:1;pointer-events:all}
.rec-ic{width:72px;height:72px;background:rgba(196,116,108,0.12);border:1px solid rgba(196,116,108,0.25);border-radius:50%;display:flex;align-items:center;justify-content:center;animation:rb 1.2s ease-in-out infinite}
.rec-ic svg{width:32px;height:32px;stroke:var(--er);fill:none;stroke-width:2;stroke-linecap:round}
@keyframes rb{0%,100%{transform:scale(1);box-shadow:0 0 0 0 rgba(196,116,108,0.25)}50%{transform:scale(1.04);box-shadow:0 0 0 16px rgba(196,116,108,0)}}
.wv{display:flex;align-items:center;gap:4px;height:36px}
.wv span{display:inline-block;width:4px;background:var(--er);border-radius:4px;animation:wv .8s ease-in-out infinite;opacity:0.65}
.wv span:nth-child(1){animation-delay:0s}.wv span:nth-child(2){animation-delay:.1s}.wv span:nth-child(3){animation-delay:.2s}.wv span:nth-child(4){animation-delay:.3s}.wv span:nth-child(5){animation-delay:.4s}.wv span:nth-child(6){animation-delay:.3s}.wv span:nth-child(7){animation-delay:.2s}.wv span:nth-child(8){animation-delay:.1s}
@keyframes wv{0%,100%{height:4px}50%{height:30px}}
.rec-lbl{font-size:15px;font-weight:700;color:var(--er);letter-spacing:0.3px}
/* ⚠️ המשתמש, 13/08: "כרגע זה נראה כאילו האפליקציה נתקעת (בפועל זה
   הולך לשרת ומחכה)." אחרי "סיימתי" — גם כאן וגם במצב נהיגה — הכל
   המשיך לפעום כאילו עדיין מקליט. .proc עוצר את זה ומראה טבעת
   שמסתובבת (nzspin, משותפת לשני המקומות — לא שני ניחושים לאותו דבר). */
@keyframes nzspin{to{transform:rotate(360deg)}}
.rec-ov.proc .rec-ic{animation:none;position:relative}
.rec-ov.proc .rec-ic::after{content:'';position:absolute;inset:-4px;border-radius:50%;border:2px solid transparent;border-top-color:var(--ac);animation:nzspin .9s linear infinite}
.rec-ov.proc .wv span{animation:none;opacity:.2}
.rec-ov.proc .rec-lbl{color:var(--ac)}
.rec-timer{font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums;font-weight:600}
.rec-tx{background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:var(--r);padding:16px 20px;font-size:14px;line-height:1.8;color:var(--tx);width:88vw;text-align:center;min-height:70px;direction:rtl}
.rec-dim{color:var(--t3)}
.btn-stop{padding:14px 44px;background:rgba(196,116,108,0.12);border:1px solid rgba(196,116,108,0.3);border-radius:50px;color:var(--er);font-family:'Assistant',sans-serif;font-size:15px;font-weight:700;cursor:pointer;transition:all .15s}
.btn-stop:active{background:rgba(196,116,108,0.22)}
/* CONFIRM */
.conf-ov{position:fixed;inset:0;z-index:180;background:rgba(23,22,15,.88);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);display:flex;align-items:flex-end;padding:16px;opacity:0;pointer-events:none;transition:opacity .25s}
.conf-ov.open{opacity:1;pointer-events:all}
.conf-card{width:100%;background:rgba(32,30,23,0.98);border:1px solid var(--glass-border);border-radius:6px;padding:24px 18px}
[data-theme="light"] .conf-card{background:rgba(244,241,233,0.98)}
.conf-card h4{font-size:14px;font-weight:700;margin-bottom:10px}
.conf-tx{background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:var(--r2);padding:14px;font-size:13px;line-height:1.7;min-height:65px;margin-bottom:14px}
.conf-btns{display:flex;gap:8px}
.conf-ok{flex:1;padding:13px;background:rgba(126,154,133,.12);border:1px solid rgba(126,154,133,.25);border-radius:var(--r2);color:var(--ok);font-family:'Assistant',sans-serif;font-size:14px;font-weight:700;cursor:pointer;transition:all .15s}
.conf-ok:active{background:rgba(126,154,133,.22)}
.conf-ed{flex:1;padding:13px;background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:var(--r2);color:var(--t2);font-family:'Assistant',sans-serif;font-size:14px;cursor:pointer;transition:all .15s}
/* MODAL */
.modal-ov{position:fixed;inset:0;z-index:220;background:rgba(23,22,15,.92);backdrop-filter:blur(24px);-webkit-backdrop-filter:blur(24px);display:flex;align-items:center;justify-content:center;padding:24px;opacity:0;pointer-events:none;transition:opacity .25s}
.modal-ov.open{opacity:1;pointer-events:all}
.modal-card{width:100%;max-width:340px;background:rgba(32,30,23,0.98);border:1px solid var(--glass-border);border-radius:6px;padding:32px 24px;text-align:center;box-shadow:var(--sh)}
[data-theme="light"] .modal-card{background:rgba(244,241,233,0.98)}
.modal-ic{width:64px;height:64px;margin:0 auto 18px;border-radius:6px;display:flex;align-items:center;justify-content:center}
.modal-ic svg{width:30px;height:30px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.modal-card h3{font-size:20px;font-weight:800;font-family:'Assistant',sans-serif}
.modal-card p{font-size:13px;color:var(--t2);margin-top:8px;line-height:1.6}
.modal-btns{display:flex;flex-direction:column;gap:8px;margin-top:24px}
.modal-btn{padding:14px;border-radius:var(--r2);font-family:'Assistant',sans-serif;font-size:14px;font-weight:700;cursor:pointer;border:none;transition:transform .12s;letter-spacing:0.2px}
.mb-p{background:var(--logo-gradient);color:#fff;box-shadow:var(--accent-glow)}
.mb-p:active{transform:scale(.97)}
.mb-g{background:rgba(255,255,255,0.05);border:1px solid var(--glass-border)!important;color:var(--t2);font-weight:600}
.mb-e{background:rgba(126,154,133,.09);border:1px solid rgba(126,154,133,.22)!important;color:var(--ok)}
/* DRIVE MODE — עיצוב נעול (docs/SESSION_2026-08-11.md סעיף 4), לא
   תלוי בערכת light/dark: זה תמיד אותו מראה כהה, בכוונה. */
.drive-ov{position:fixed;inset:0;z-index:230;background:#17160F;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .25s}
.drive-ov.open{opacity:1;pointer-events:all}
.drive-card{display:flex;flex-direction:column;height:100%;max-width:480px;margin:0 auto;width:100%}
.drive-top{display:flex;align-items:center;justify-content:space-between;padding:16px 20px;flex-shrink:0}
.drive-count{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:12px;color:#8A6E2E}
.drive-x{width:32px;height:32px;border:none;background:transparent;color:#8A6E2E;font-size:18px;cursor:pointer;display:flex;align-items:center;justify-content:center}
.drive-dbg{width:32px;height:32px;border:none;background:transparent;color:#8A6E2E;font-size:14px;opacity:.55;cursor:pointer;display:flex;align-items:center;justify-content:center}
.drive-dbg:active{opacity:1}
.drive-body{flex:1;overflow-y:auto;padding:0 24px 24px;display:flex;flex-direction:column}
.drv-label{font-size:11px;font-weight:700;color:#8A6E2E;text-transform:uppercase;letter-spacing:0.8px;text-align:center;margin-bottom:10px}
.drv-mic{width:64px;height:64px;margin:24px auto;border-radius:50%;border:2px solid #C9A052;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.drv-mic svg{width:28px;height:28px;stroke:#C9A052;fill:none;stroke-width:2;stroke-linecap:round}
.drv-h1{font-size:24px;font-weight:800;color:#F1ECDE;text-align:center;margin-bottom:12px}
.drv-p{font-size:14px;color:#F1ECDE;text-align:center;line-height:1.7;opacity:.85}
.drv-p b{color:#C9A052}
.drv-hint{font-size:12px;color:#8A6E2E;text-align:center;margin-top:auto;padding-top:16px}
.drv-question{font-size:26px;font-weight:800;color:#F1ECDE;text-align:center;line-height:1.4;margin:0 0 6px}
.drv-sub{font-size:13px;color:#8A6E2E;text-align:center}
.drv-linklike{color:#C9A052;text-decoration:underline;text-underline-offset:2px;cursor:pointer}
/* גיבור המסך — הקבוצה (תווית/שאלה + אורב + כיתוב) ממורכזת יחד
   בשטח הפנוי שבין הכותרת לכפתורים. המשתמש: "הסימן... יהיה בגדול
   באמצע." */
.drv-hero{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%}
/* אורב פועם — טבעות שמתרחבות ונעלמות סביב סימן SHUMA עצמו (לא
   אייקון גנרי). אותו רכיב בדיוק לשני המצבים ("מדברת"/"מקשיבה"),
   צבע הטבעות בלבד משתנה: זהב = היא מדברת, מנטה = היא מקשיבה.
   בלי גרדיאנט ובלי צל — טבעות, סימן וצבע אחיד. */
.drv-orb{position:relative;width:150px;height:150px;margin:18px auto;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.drv-orb-core{width:92px;height:92px;border-radius:50%;border:1px solid rgba(255,255,255,0.14);display:flex;align-items:center;justify-content:center;background:#17160F;position:relative;z-index:2}
.drv-orb-core svg{width:44px;height:44px}
.drv-orb i{position:absolute;inset:0;border-radius:50%;border:1px solid var(--oc);opacity:0;animation:drvorb 2.2s cubic-bezier(.25,.6,.35,1) infinite;font-style:normal}
.drv-orb i:nth-child(2){animation-delay:.73s}
.drv-orb i:nth-child(3){animation-delay:1.46s}
@keyframes drvorb{0%{transform:scale(.62);opacity:.5}100%{transform:scale(1.5);opacity:0}}
.drv-orb.gold{--oc:#C9A052}
.drv-orb.mint{--oc:#6EE7B7}
/* מסך "מעבדת" — אותה סיבה כמו .rec-ov.proc למעלה, אותו nzspin.
   טבעת שמסתובבת במקום הטבעות המתרחבות, כדי שיהיה ברור שזה כבר לא
   מקשיב לך — זה עובד על מה שכבר אמרת. */
.drv-orb .drv-spinner{position:absolute;inset:0;border-radius:50%;border:2px solid transparent;border-top-color:#C9A052;animation:nzspin .9s linear infinite}
/* פסי קול — בלי כיתוב, רק תנועה. תשע רצועות דקות, כל אחת בגובה,
   קצב ועיכוב משלה כדי שהתנועה תיראה חיה ולא מכנית (בניגוד לגרסה
   הקודמת, חמישה פסים עם אותו קצב בדיוק — זו הייתה הבעיה). זזות רק
   כל עוד המסך הזה על המסך, שזה בדיוק כל עוד היא מדברת/מקשיבה. */
.drv-bars{display:flex;align-items:center;justify-content:center;gap:4px;height:34px;margin-top:6px}
.drv-bars span{width:3px;border-radius:3px;display:inline-block;animation:drvbar ease-in-out infinite}
.drv-bars.gold span{background:#C9A052}
.drv-bars.mint span{background:#6EE7B7}
.drv-bars span:nth-child(1){height:8px;animation-duration:.9s;animation-delay:0s}
.drv-bars span:nth-child(2){height:18px;animation-duration:1.15s;animation-delay:.06s}
.drv-bars span:nth-child(3){height:28px;animation-duration:.8s;animation-delay:.12s}
.drv-bars span:nth-child(4){height:14px;animation-duration:1.05s;animation-delay:.18s}
.drv-bars span:nth-child(5){height:34px;animation-duration:.72s;animation-delay:.24s}
.drv-bars span:nth-child(6){height:16px;animation-duration:1.2s;animation-delay:.3s}
.drv-bars span:nth-child(7){height:26px;animation-duration:.88s;animation-delay:.36s}
.drv-bars span:nth-child(8){height:10px;animation-duration:1.1s;animation-delay:.42s}
.drv-bars span:nth-child(9){height:20px;animation-duration:.96s;animation-delay:.48s}
@keyframes drvbar{0%,100%{transform:scaleY(.32)}50%{transform:scaleY(1)}}
.drv-box{background:rgba(255,255,255,0.05);border:1px solid rgba(255,255,255,0.09);border-radius:10px;padding:16px;margin:16px 0;font-size:15px;color:#F1ECDE;line-height:1.6}
.drv-confirm-q{font-size:22px;font-weight:800;color:#F1ECDE;text-align:center;margin-top:8px}
.drv-btns{display:flex;gap:10px;margin-top:auto;padding-top:16px;flex-shrink:0}
.drv-btn{flex:1;padding:15px;border-radius:10px;font-family:'Assistant',sans-serif;font-size:14px;font-weight:700;cursor:pointer;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.05);color:#F1ECDE}
.drv-btn.drv-main{background:#C9A052;color:#17160F;border-color:#C9A052}
.drv-btn.drv-ok{background:#1C3325;color:#6EE7B7;border-color:#1C3325}
.drv-start{padding:18px;border-radius:10px;font-family:'Assistant',sans-serif;font-size:17px;font-weight:800;cursor:pointer;border:none;background:#C9A052;color:#17160F;margin-top:auto}
/* PHOTO */
.photo-btn{flex:1;height:50px;border-radius:var(--r2);border:1px solid var(--glass-border);background:rgba(255,255,255,0.05);color:var(--t2);font-size:13px;font-weight:600;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:8px;transition:all .15s;font-family:'Assistant',sans-serif}
.photo-btn svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round}
.photo-btn:active{background:rgba(201,160,82,0.14);border-color:var(--ac);color:var(--ac)}
.photo-preview{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.photo-thumb{width:72px;height:72px;border-radius:6px;object-fit:cover;border:1px solid var(--glass-border);cursor:pointer}
.photo-input{display:none}
/* SIGNATURE */
#sigCanvas{background:#fff;border-radius:6px;border:1px solid var(--glass-border);touch-action:none;cursor:crosshair;width:100%;max-width:320px}
/* SETTINGS */
.set-card{background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:var(--r);padding:20px;margin-bottom:12px}
[data-theme="light"] .set-card{background:rgba(255,255,255,0.72)}
.set-card-title{font-size:11px;font-weight:800;color:var(--ac);margin-bottom:16px;display:flex;align-items:center;gap:8px;text-transform:uppercase;letter-spacing:1px}
.set-card-title svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;opacity:0.8}
.toggle-row{display:flex;justify-content:space-between;align-items:center;padding:8px 0}
.toggle-row span{font-size:13px;font-weight:500}
.toggle{width:46px;height:26px;background:rgba(255,255,255,0.09);border-radius:6px;cursor:pointer;position:relative;transition:background .25s;border:none;flex-shrink:0}
.toggle.on{background:var(--ac)}
.toggle::after{content:'';position:absolute;top:3px;right:3px;width:20px;height:20px;background:#fff;border-radius:6px;transition:transform .25s;box-shadow:0 1px 4px rgba(0,0,0,0.3)}
.toggle.on::after{transform:translateX(-20px)}
/* ARCHIVE */
.arch-filters{padding:14px 14px 0;display:flex;flex-direction:column;gap:8px}
.arch-filter-row{display:flex;gap:8px}
.arch-filter-row select{flex:1;padding:11px 12px;background:rgba(255,255,255,0.05);border:1px solid var(--glass-border);border-radius:var(--r2);color:var(--tx);font-family:'Assistant',sans-serif;font-size:12px;outline:none}
/* ONBOARDING */
#pgOnboarding{justify-content:flex-start;align-items:center;overflow-y:auto}
.ob-wrap{width:92%;max-width:480px;padding:48px 0 60px;margin:0 auto}
.ob-header{text-align:center;margin-bottom:36px}
.ob-step{background:rgba(255,255,255,0.04);border:1px solid var(--glass-border);border-radius:6px;padding:20px;margin-bottom:12px;transition:border-color .3s,background .3s}
.ob-step.processing{border-color:rgba(201,160,82,0.35);background:rgba(201,160,82,0.04)}
.ob-step.done{border-color:rgba(126,154,133,0.35);background:rgba(126,154,133,0.04)}
.ob-step.error{border-color:rgba(196,116,108,0.35);background:rgba(196,116,108,0.04)}
.ob-step-header{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.ob-step-icon{width:42px;height:42px;border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ob-step-icon svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.ob-step-title{font-size:14px;font-weight:700}
.ob-step-sub{font-size:11px;color:var(--t2);margin-top:2px}
.ob-status{font-size:10px;font-weight:700;padding:4px 10px;border-radius:6px;flex-shrink:0;margin-right:auto;text-transform:uppercase;letter-spacing:0.4px}
.ob-status.waiting{background:rgba(136,153,180,.08);color:var(--t2)}
.ob-status.processing{background:rgba(201,160,82,.1);color:var(--gold)}
.ob-status.done{background:rgba(126,154,133,.1);color:var(--ok)}
.ob-status.error{background:rgba(196,116,108,.1);color:var(--er)}
.ob-progress{height:2px;background:rgba(255,255,255,0.06);border-radius:4px;overflow:hidden;margin-top:12px}
.ob-progress-bar{height:100%;background:var(--gold);border-radius:4px;transition:width .5s;width:0%}
.ob-progress-bar.done{background:var(--ok);width:100%}
.ob-fields{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.ob-field-tag{background:rgba(201,160,82,0.07);border:1px solid rgba(201,160,82,0.18);border-radius:6px;padding:3px 10px;font-size:10px;color:var(--ac)}
.ob-upload-btn{width:100%;padding:18px;background:rgba(201,160,82,0.05);border:1px dashed rgba(201,160,82,0.22);border-radius:var(--r);color:var(--t2);font-family:'Assistant',sans-serif;font-size:14px;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:12px;transition:all .2s;font-weight:600}
.ob-upload-btn svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;flex-shrink:0}
.ob-upload-btn:hover{border-color:var(--ac);color:var(--ac);background:rgba(201,160,82,0.09)}
.ob-bypass{text-align:center;margin-top:20px;font-size:12px;color:var(--t3);cursor:pointer}
.ob-continue{width:100%;margin-top:10px}
/* PHOTO EDITOR */
.photo-editor-ov{position:fixed;inset:0;z-index:350;background:#000;display:flex;flex-direction:column;opacity:0;pointer-events:none;transition:opacity .2s}
.photo-editor-ov.open{opacity:1;pointer-events:all}
.photo-editor-hdr{padding:max(16px,env(safe-area-inset-top)) 16px 14px;display:flex;align-items:center;justify-content:space-between;background:rgba(0,0,0,0.88);flex-shrink:0;border-bottom:1px solid rgba(255,255,255,0.07)}
.photo-editor-hdr h3{font-size:15px;font-weight:700;color:#fff}
.editor-canvas-wrap{flex:1;position:relative;display:flex;align-items:center;justify-content:center;overflow:hidden}
#editorCanvas{max-width:100%;max-height:100%;touch-action:none}
.editor-tools{background:rgba(0,0,0,0.9);padding:12px 16px;display:flex;gap:10px;align-items:center;overflow-x:auto;flex-shrink:0;border-top:1px solid rgba(255,255,255,0.06)}
.etool{width:42px;height:42px;border-radius:6px;border:1px solid rgba(255,255,255,0.1);background:rgba(255,255,255,0.07);color:#fff;font-size:16px;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0;transition:all .2s}
.etool.active{border-color:var(--ac);background:rgba(201,160,82,0.22)}
.ecolor{width:28px;height:28px;border-radius:50%;cursor:pointer;border:2px solid transparent;flex-shrink:0;transition:transform .1s}
.ecolor.active{border-color:#fff;transform:scale(1.2)}
.photo-caption-bar{background:rgba(0,0,0,0.88);padding:12px 16px;display:flex;gap:8px;flex-shrink:0;border-top:1px solid rgba(255,255,255,0.06)}
.photo-caption-bar input{flex:1;background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:#fff;padding:9px 12px;font-family:'Assistant',sans-serif;font-size:13px;outline:none}
.photo-section-sel{background:rgba(255,255,255,0.07);border:1px solid rgba(255,255,255,0.12);border-radius:6px;color:#fff;padding:9px 12px;font-family:'Assistant',sans-serif;font-size:12px;outline:none}
/* FLOATING CAMERA */
.cam-fab{position:fixed;bottom:96px;left:16px;width:54px;height:54px;border-radius:50%;background:var(--logo-gradient);border:none;cursor:pointer;display:none;align-items:center;justify-content:center;box-shadow:0 6px 20px rgba(201,160,82,0.45);z-index:80;transition:transform .12s}
.cam-fab:active{transform:scale(.9)}
.cam-fab.show{display:flex}
.cam-fab svg{width:22px;height:22px;stroke:#fff;fill:none;stroke-width:2;stroke-linecap:round}
/* MISC */
/* ── ⚠️ תווית שקופה שבלעה קליקים ─────────────────────────────
   17/08 — המשתמש: "בעכבר הסימן שלו הופך ללא לחיץ אלא לכזה שאתה
   מסמן איתו וזה לא לוחץ לי על הכפתור של התיקים."

   נמדד ב-`elementFromPoint` על מרכז הכפתור, בשלוש רזולוציות:
   מה שמחזיר זה **`asvBadge`** ולא הכפתור. התווית `position:fixed`
   בתחתית המסך, ברוחב 117px, z-index 90 מול 80 של הסרגל — כלומר
   היא יושבת בדיוק מעל הכפתור האמצעי-ימני, שהוא "תיקים".

   ⚠️ `opacity:0` **אינו** מסתיר מקליקים. אלמנט שקוף לגמרי עדיין
   מקבל את האירוע, והסמן הופך לסמן טקסט — בדיוק מה שהוא תיאר.
   תווית מצב אינה כפתור ואין בה מה ללחוץ, ולכן `pointer-events:none`
   הוא התיקון הנכון ולא הזזה או שינוי z-index: הזזה מעתיקה את
   הבעיה למקום אחר במסך. */
.asv-badge{pointer-events:none;position:fixed;bottom:22px;left:50%;transform:translateX(-50%);z-index:90;background:rgba(126,154,133,0.1);border:1px solid rgba(126,154,133,0.25);border-radius:50px;padding:7px 16px;font-size:11px;font-weight:700;color:var(--ok);opacity:0;transition:opacity .3s;white-space:nowrap;letter-spacing:0.3px}
.asv-badge.show{opacity:1}
.toast-el{position:fixed;bottom:100px;left:50%;transform:translateX(-50%) translateY(14px);background:rgba(32,30,23,0.96);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:50px;padding:11px 20px;font-size:13px;font-weight:600;opacity:0;transition:all .3s cubic-bezier(.22,.68,0,1.2);z-index:999;white-space:nowrap;box-shadow:var(--sh)}
.toast-el.show{opacity:1;transform:translateX(-50%) translateY(0)}
::-webkit-scrollbar{width:3px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.09);border-radius:4px}
.loading-spinner{display:inline-block;width:18px;height:18px;border:2px solid rgba(255,255,255,.2);border-top-color:#fff;border-radius:50%;animation:spin .7s linear infinite;vertical-align:middle;margin-left:6px}
@keyframes spin{to{transform:rotate(360deg)}}

.pwd-wrap{position:relative}
.pwd-wrap input{padding-left:44px!important}
[data-theme="light"] .fi{color:#1F1D18!important}
[data-theme="light"] .fi::placeholder{color:#9AAEC8}

/* ══════════════════════════════════════════════════════════════
   שכבת "כיוון א" — זכוכית וזוהר
   ══════════════════════════════════════════════════════════════
   מגיעה מהטיוטה החיה שהמשתמש אישר. יושבת אחרי כל שאר ה-CSS
   ומגבירה בלי לערוך כלל קיים: כך אפשר להסיר אותה בשלמותה אם
   משהו יתגלה, ואי אפשר לשבור בטעות כלל שקיים מזמן.
   ────────────────────────────────────────────────────────────── */
/* ⚠️ כאן ישב **בלוק טוקנים שני** שדרס את הראשון ─────────────────
   הוא הגדיר שוב `--ac`, `--ac2`, `--logo-gradient` ו-`--accent-glow`
   בכחול-סגול, ומכיוון שהוא יושב אחרי הבלוק הראשי — הוא ניצח.

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

   זו בדיוק "שתי הגדרות לאותו דבר" שהפרויקט הזה נפל בה 12 פעמים,
   והפעם באותו קובץ, במרחק 350 שורות. הבלוק נמחק; ההגדרה היחידה
   של הצבעים היא זו שבראש הקובץ.

   ⚠️ **רק בלוק הטוקנים נמחק.** שאר השכבה הזאת מכילה CSS פונקציונלי
   (נספח התמונות, עורך הסימון, צ'יפי השלבים, שלד הטעינה) ולא נגעתי בה. */

/* ⚠️ כאן ישבו שתי הילות מטושטשות שנעו לאט ברקע ────────────────
   הן נמחקו ב-09/08 עם בחירת כיוון "מכשיר". שתי סיבות, ושתיהן של
   המשתמש: מפרט SHUMA אוסר במפורש אפקטי זכוכית וגרדיאנטים, והכיוון
   שנבחר בנוי על **רקע נקי שהנתונים יושבים עליו** — הילה מאחורי
   טבלת מספרים מורידה ניגודיות בלי להוסיף דבר.

   ⚠️ ה-`<div class="nz-glow">` נשאר ב-HTML ריק מכללי עיצוב, ולכן אינו
   מצייר כלום. לא הסרתי אותו משם באותו קומיט כדי שמחיקת CSS ומחיקת
   HTML לא יתערבבו — אם משהו יתגלה, יש נקודה אחת לחזור אליה. */
.nz-glow{display:none}

/* ── מפת השלבים — צ'יפים נגררים במקום פסים דקים ─────────────
   הפסים סימנו התקדמות ולא היו יעד לאצבע. הצ'יפים גם אומרים
   **לאן** קופצים, לא רק כמה נשאר. */
.prog-wrap{padding:10px 0 8px}
.prog-steps{display:flex;gap:8px;overflow-x:auto;padding:2px 16px 6px;
  scrollbar-width:none;scroll-snap-type:x proximity}
.prog-steps::-webkit-scrollbar{display:none}
.psbtn{flex:none;scroll-snap-align:center;min-width:118px;min-height:56px;
  padding:9px 13px;margin:0;border-radius:6px;border:1px solid var(--glass-border);
  background:rgba(255,255,255,.035);display:flex;flex-direction:column;
  justify-content:center;gap:2px;text-align:center;cursor:pointer;
  transition:transform .22s cubic-bezier(.2,.9,.3,1.4),border-color .2s,background .2s}
.psbtn .ps{display:none}
.psbtn .nzn{font-size:11px;color:var(--t3);letter-spacing:.4px;font-variant-numeric:tabular-nums}
.psbtn .nzl{font-size:13px;font-weight:700;white-space:nowrap;overflow:hidden;
  text-overflow:ellipsis;max-width:132px}
.psbtn.nz-done{border-color:rgba(126,154,133,.28);background:rgba(126,154,133,.07)}
.psbtn.nz-done .nzn{color:var(--ok)}
.psbtn.nz-cur{border-color:transparent;transform:scale(1.06);
  background:linear-gradient(135deg,rgba(201,160,82,.24),rgba(201,160,82,.24));
  box-shadow:0 8px 26px rgba(201,160,82,.25)}
.psbtn:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.prog-lbl{display:none}

/* ── בועת העוזר ──────────────────────────────────────────────
   העוזר פותח כל שלב במשפט אחד. זה מה שמבדיל אותו מטופס. */
.nz-say{display:flex;gap:11px;margin:2px 0 18px}
.nz-av{width:34px;height:34px;border-radius:6px;flex:none;display:grid;place-items:center;
  background:var(--logo-gradient);box-shadow:0 5px 18px rgba(201,160,82,.4)}
.nz-av svg{width:17px;height:17px;fill:none;stroke:#fff;stroke-width:2.5;
  stroke-linecap:round;stroke-linejoin:round}
.nz-bub{background:rgba(255,255,255,.045);border:1px solid var(--glass-border);
  border-radius:4px 16px 16px 16px;padding:12px 14px;font-size:14.5px;
  line-height:1.65;color:var(--t2)}
.nz-bub b{color:var(--tx);font-weight:700}
[data-theme="light"] .nz-bub{background:rgba(255,255,255,.7)}

/* ── שדות: כרטיס זכוכית עם מסגרת שנדלקת ─────────────────────── */
#pgForm .fsec{padding:18px 16px 0}
#pgForm .fsec-title{font-size:11px;letter-spacing:1.6px}
#pgForm .fl2{font-size:13.5px;font-weight:700;color:var(--tx);text-transform:none;
  letter-spacing:0;margin-bottom:8px;display:flex;align-items:center;gap:8px}
#pgForm .fl2::before{content:'';width:6px;height:6px;border-radius:50%;flex:none;
  background:var(--ac);box-shadow:0 0 0 4px rgba(201,160,82,.16)}
#pgForm .fg2{margin-bottom:20px}
#pgForm .fi{background:rgba(255,255,255,.045);border:1px solid var(--glass-border);
  border-radius:6px;padding:15px 16px;font-size:16px;line-height:1.65;
  transition:border-color .2s,box-shadow .2s,background .2s}
#pgForm .fi:focus{border-color:var(--ac);background:rgba(201,160,82,.06);
  box-shadow:0 0 0 3px rgba(201,160,82,.14)}
#pgForm textarea.fi{min-height:96px}
[data-theme="light"] #pgForm .fi{background:rgba(255,255,255,.75)}

/* ── הפעולה התחתונה ─────────────────────────────────────────── */
#pgForm .fcta{padding:12px 16px calc(22px + env(safe-area-inset-bottom));
  background:linear-gradient(0deg,rgba(23,22,15,.98),rgba(23,22,15,.72));
  backdrop-filter:var(--blur);-webkit-backdrop-filter:var(--blur);
  border-top:1px solid var(--glass-border)}
[data-theme="light"] #pgForm .fcta{background:linear-gradient(0deg,rgba(244,241,233,.98),rgba(244,241,233,.7))}
#pgForm .fcta .btn-main{border-radius:6px;padding:18px;font-size:17px;font-weight:800;
  background:var(--logo-gradient);box-shadow:0 10px 30px rgba(201,160,82,.32);
  position:relative;overflow:hidden}
#pgForm .fcta .btn-main::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.26),transparent);
  transform:translateX(-120%);animation:nzSheen 4.2s ease-in-out infinite}
@keyframes nzSheen{0%,62%{transform:translateX(-120%)}100%{transform:translateX(120%)}}
#pgForm .fcta .btn-sec{border-radius:6px;padding:15px}

/* ── רמז ההחלקה ─────────────────────────────────────────────── */
.nz-swipe-hint{display:flex;align-items:center;justify-content:center;gap:8px;
  font-size:12.5px;color:var(--t3);padding:2px 0 10px}
.nz-swipe-hint svg{width:14px;height:14px;fill:none;stroke:var(--ac);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}

@media (prefers-reduced-motion:reduce){
  .nz-glow i,#pgForm .fcta .btn-main::after{animation:none!important}
}

/* ── נספח התמונות ─────────────────────────────────────────────
   רשימה ולא רשת: הסדר הוא מה שייכנס לדוח, ולכן הוא חייב להיות
   גלוי וניתן לשינוי. */
.nz-ph{display:flex;gap:11px;align-items:center;padding:10px;margin-bottom:9px;
  border-radius:6px;border:1px solid var(--glass-border);background:rgba(255,255,255,.04)}
[data-theme="light"] .nz-ph{background:rgba(255,255,255,.7)}
.nz-ph-n{width:24px;flex:none;text-align:center;font-size:12px;font-weight:800;
  color:var(--t3);font-variant-numeric:tabular-nums}
.nz-ph-img{width:64px;height:64px;flex:none;object-fit:cover;border-radius:6px;
  border:1px solid var(--glass-border);cursor:pointer}
.nz-ph-mid{flex:1;min-width:0;display:flex;flex-direction:column;gap:7px}
.nz-ph-cap{width:100%;background:rgba(255,255,255,.04);border:1px solid var(--glass-border);
  border-radius:6px;color:var(--tx);font-family:'Assistant',sans-serif;font-size:13.5px;
  padding:9px 11px;outline:none}
.nz-ph-cap:focus{border-color:var(--ac);box-shadow:0 0 0 3px rgba(201,160,82,.14)}
.nz-ph-ord{display:flex;gap:6px}
.nz-ph-ord button{min-width:42px;min-height:38px;border-radius:6px;cursor:pointer;
  border:1px solid var(--glass-border);background:rgba(255,255,255,.05);color:var(--t2);
  font-family:'Assistant',sans-serif;font-size:13px}
.nz-ph-ord button:disabled{opacity:.32}
.nz-ph-ord .nz-ph-del{margin-inline-start:auto;color:var(--er);
  border-color:rgba(196,116,108,.28);background:rgba(196,116,108,.08);padding:0 14px}
/* פתיחת מסך הסימון. גם התמונה עצמה לחיצה — אבל כפתור עם מילה הוא מה
   שאומר למי שמגיע מבחוץ שיש כאן בכלל אפשרות. */
.nz-ph-ord .nz-ph-edit{padding:0 13px;font-weight:700;color:var(--ac);
  border-color:rgba(201,160,82,.32);background:rgba(201,160,82,.11)}
/* ── מסמך מצורף ────────────────────────────────────────────────
   אותה שורה כמו תמונה, עם סיומת הקובץ במקום תמונה ממוזערת. */
.nz-file-ic{width:64px;height:64px;flex:none;border-radius:6px;
  display:flex;align-items:center;justify-content:center;font-size:12px;
  font-weight:800;letter-spacing:.4px;color:var(--ac);
  border:1px solid rgba(201,160,82,.28);background:rgba(201,160,82,.1)}
.nz-file-nm{font-size:13.5px;font-weight:700;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nz-file-nm span{display:block;font-size:11.5px;font-weight:500;color:var(--t3);
  margin-top:2px}
/* אטב ברשימת הדוחות + גיליון הפתיחה */
.rclip{flex:none;display:flex;align-items:center;gap:4px;min-height:32px;padding:0 10px;
  border-radius:6px;cursor:pointer;font-family:'Assistant',sans-serif;font-size:12px;
  font-weight:800;color:var(--ac);border:1px solid rgba(201,160,82,.3);
  background:rgba(201,160,82,.11);margin-inline-end:6px}
.rclip svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.nz-file-row{width:100%;display:flex;align-items:center;gap:11px;margin-bottom:8px;
  padding:11px 12px;border-radius:6px;cursor:pointer;text-align:right;
  border:1px solid var(--bd);background:var(--s2);font-family:'Assistant',sans-serif}
.nz-file-row .ic{flex:none;width:42px;height:42px;border-radius:6px;display:flex;
  align-items:center;justify-content:center;font-size:11px;font-weight:800;
  color:var(--ac);border:1px solid rgba(201,160,82,.28);background:rgba(201,160,82,.1)}
.nz-file-row .nm{flex:1;min-width:0;font-size:13.5px;font-weight:700;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.nz-file-row .go{flex:none;font-size:12.5px;font-weight:700;color:var(--ac)}

/* ── שלד טעינה ────────────────────────────────────────────────
   כשנכנסים לדוח קיים, הציור של השלב מחכה ל-schema. עד שהוא חוזר
   נשאר על המסך הטופס הקודם — ולכן המשתמש ראה את המקום האחרון שבו
   היה, ורק אחר כך קפיצה לתחילת הדוח. השלד הזה תופס את המקום במקום
   התוכן הישן, כך שאין תוכן שגוי ואין קפיצה. */
.nz-skel{padding:18px 16px}
.nz-skel span{display:block;border-radius:6px;margin-bottom:12px;
  background:linear-gradient(90deg,rgba(255,255,255,.05) 25%,
    rgba(255,255,255,.11) 50%,rgba(255,255,255,.05) 75%);
  background-size:220% 100%;animation:nzSkel 1.25s ease-in-out infinite}
[data-theme="light"] .nz-skel span{
  background-image:linear-gradient(90deg,rgba(31,29,24,.05) 25%,
    rgba(31,29,24,.11) 50%,rgba(31,29,24,.05) 75%)}
@keyframes nzSkel{to{background-position:-120% 0}}
@media (prefers-reduced-motion:reduce){.nz-skel span{animation:none}}

/* ── מסך הסימון על תמונה ──────────────────────────────────────
   כל כלי עם **מילה** ולא רק אייקון. אייקון לבד הוא ניחוש, וכבר
   שילמנו על זה במסך הסקירה: ההסבר ישב ב-title, שאינו קיים במגע. */
.nzed{position:fixed;inset:0;z-index:350;display:flex;flex-direction:column;
  background:#070B14;opacity:0;pointer-events:none;transition:opacity .18s;
  padding-bottom:env(safe-area-inset-bottom)}
.nzed.open{opacity:1;pointer-events:auto}
.nzed-top{display:flex;align-items:center;gap:10px;padding:12px 14px 8px;
  padding-top:calc(14px + env(safe-area-inset-top));flex:none}
.nzed-top .ttl{flex:1;min-width:0;font-size:16px;font-weight:800;color:#fff}
.nzed-top .ttl small{display:block;font-size:12px;font-weight:500;
  color:rgba(255,255,255,.55);margin-top:2px}
.nzed-ic{width:42px;height:42px;flex:none;border-radius:6px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);
  color:#fff;display:flex;align-items:center;justify-content:center;font-size:19px}
.nzed-ok{flex:none;border:none;border-radius:6px;cursor:pointer;color:#fff;
  padding:12px 20px;font-family:'Assistant',sans-serif;font-size:14.5px;font-weight:800;
  background:var(--logo-gradient);box-shadow:0 8px 24px rgba(201,160,82,.34)}
.nzed-stage{flex:1;min-height:0;display:flex;align-items:center;justify-content:center;
  padding:4px 10px;overflow:hidden}
.nzed-stage canvas{max-width:100%;max-height:100%;border-radius:6px;
  box-shadow:0 18px 50px rgba(0,0,0,.6);touch-action:none;cursor:crosshair}
.nzed-bar{flex:none;display:flex;gap:8px;overflow-x:auto;padding:8px 12px 2px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none}
.nzed-bar::-webkit-scrollbar{display:none}
.nzed-t{flex:none;min-width:60px;min-height:56px;border-radius:6px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;
  border:1.5px solid rgba(255,255,255,.12);background:rgba(255,255,255,.05);
  color:rgba(255,255,255,.72);font-family:'Assistant',sans-serif;padding:0 10px}
.nzed-t svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round}
.nzed-t span{font-size:11.5px;font-weight:700;line-height:1}
.nzed-t.on{color:#fff;border-color:var(--ac);background:rgba(201,160,82,.2);
  box-shadow:0 0 0 3px rgba(201,160,82,.12)}
.nzed-cols{display:flex;gap:9px;align-items:center;padding:8px 12px 2px;flex:none}
.nzed-c{width:32px;height:32px;border-radius:50%;cursor:pointer;flex:none;
  border:2px solid transparent;box-shadow:0 2px 8px rgba(0,0,0,.4)}
.nzed-c.on{border-color:#fff;transform:scale(1.14)}
.nzed-foot{flex:none;display:flex;gap:8px;align-items:center;padding:8px 12px 0}
.nzed-foot:last-of-type{padding-bottom:12px}
.nzed-foot input{flex:1;min-width:0;background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.14);border-radius:6px;color:#fff;
  padding:12px 14px;font-family:'Assistant',sans-serif;font-size:14px;outline:none}
.nzed-foot input:focus{border-color:var(--ac)}
.nzed-act{flex:none;min-height:46px;padding:0 14px;border-radius:6px;cursor:pointer;
  border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.06);color:#fff;
  font-family:'Assistant',sans-serif;font-size:13.5px;font-weight:700}
.nzed-act[disabled]{opacity:.34;cursor:default}
.nzed-act.warn{color:#FFB4B4;border-color:rgba(196,116,108,.3);
  background:rgba(196,116,108,.1)}
/* ── שורת ההסבר של העוזר, באותו ניסוח כמו בשאר המסכים ─────── */
/* ⚠️ block ולא flex. עם flex כל קטע טקסט ו-<b> הופכים לפריט נפרד
   ברשת, והמשפט נקרע לשלושה חלקים שמסתדרים בסדר לא נכון ב-RTL. */
.nzed-say{flex:none;display:block;padding:0 14px 6px;
  font-size:12.5px;line-height:1.5;color:rgba(255,255,255,.6)}
.nzed-say b{color:#fff}

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

   ⚠️ זו יציאה מודעת ממפרט SHUMA, שאומר "שום דבר לא זז" ואוסר תנועה
   דקורטיבית. ההוראה של המשתמש גוברת, וזה נרשם כאן כדי שלא ייראה
   בעתיד כמו סטייה שקרתה בהיסח הדעת.

   ⚠️ כל תנועה כאן מכבדת `prefers-reduced-motion` בסוף הקובץ. נגישות
   אינה מתחלפת בתחושה טכנולוגית — היא תנאי שלה.
   ────────────────────────────────────────────────────────────────── */

/* ── הסרגל ─────────────────────────────────────────────────────── */
.navbar{position:fixed;left:0;right:0;bottom:0;z-index:80;
  display:grid;grid-template-columns:1fr 1fr auto 1fr 1fr 1fr;align-items:end;
  /* ⚠️ שש עמודות מ-10/08: 'תיקים' נוסף לצד 'ארכיון'. הכפתור
     המרכזי (+) נשאר במקומו, ושלושה כפתורים יושבים אחריו. */
  background:var(--s1);border-top:1px solid var(--bd);
  padding:8px 6px calc(8px + env(safe-area-inset-bottom));
  animation:navUp .34s cubic-bezier(.2,.9,.25,1) both}
@keyframes navUp{from{transform:translateY(100%)}to{transform:translateY(0)}}

/* המחוון שנוסע בין הכפתורים. הוא שכבה נפרדת ולכן אפשר להזיז אותו
   בטרנספורם בלבד — בלי לצייר מחדש אף כפתור. */
/* ⚠️ עוגן ל-`left` ולא ל-`right`, למרות שהממשק RTL: `offsetLeft`
   נמדד תמיד מהקצה השמאלי של ההורה. עם עוגן ימני המחוון קפץ אל מחוץ
   למסך — נמדד בצילום, לא בהיגיון. */
.nv-ind{position:absolute;top:0;left:0;height:2px;background:var(--ac);
  opacity:0;transform:translateX(0);border-radius:0 0 2px 2px;
  transition:transform .34s cubic-bezier(.2,.9,.25,1),width .34s cubic-bezier(.2,.9,.25,1),opacity .2s}

.nvb{background:none;border:none;cursor:pointer;padding:7px 2px 5px;
  display:flex;flex-direction:column;align-items:center;gap:3px;
  color:var(--t2);font-family:'Assistant',sans-serif;
  transition:color .2s;min-height:52px}
.nvb .nvi{display:flex;transition:transform .3s cubic-bezier(.2,.9,.25,1)}
.nvb svg{width:21px;height:21px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}
.nvl{font-size:10.5px;font-weight:600;letter-spacing:-.1px}
.nvb.on{color:var(--ac)}
.nvb.on .nvi{transform:translateY(-2px)}
.nvb:active .nvi{transform:scale(.86)}

/* ── "דוח חדש" — הפעולה הראשית, במרכז ופיזית גדולה יותר ─────────
   ⚠️ היא לא נושאת תווית. הצורה והמיקום הם התווית, ותווית מתחתיה
   הייתה דוחפת אותה למטה ומקטינה את יעד המגע. `aria-label` נושא
   את השם לקורא מסך — נגישות בלי לוותר על הצורה. */
.nv-new{padding:0;margin:0 4px}
.nv-new-ic{width:56px;height:56px;border-radius:var(--r);background:var(--ac);
  display:flex;align-items:center;justify-content:center;
  transform:translateY(-14px);
  transition:transform .26s cubic-bezier(.2,.9,.25,1),background .2s}
.nv-new-ic svg{width:26px;height:26px;stroke:var(--bg);stroke-width:2.4}
.nv-new:active .nv-new-ic{transform:translateY(-14px) scale(.9) rotate(90deg)}

/* המסכים שיש בהם סרגל צריכים מקום מתחת, אחרת הוא יושב על התוכן */
#pgHome .scroll,#pgArchive .scroll,#pgSettings .scroll,#pgTemplates .scroll{
  padding-bottom:calc(86px + env(safe-area-inset-bottom))}

/* ── מעבר מסך ─────────────────────────────────────────────────── */
.pg-r{animation:pgR .3s cubic-bezier(.2,.9,.25,1) both}
.pg-l{animation:pgL .3s cubic-bezier(.2,.9,.25,1) both}
@keyframes pgR{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
@keyframes pgL{from{opacity:0;transform:translateX(16px)}to{opacity:1;transform:none}}

/* ── כפתורים ──────────────────────────────────────────────────
   ⚠️ הכפתור הקודם היה גוש מלא ברוחב המסך עם פינות עגולות. מה
   שהוחלף: משקל קל יותר, אות מרווחת, וברק שעובר עליו בלחיצה — כלומר
   המשוב הוא **תנועה**, לא שינוי צבע. `overflow:hidden` הוא מה שכולא
   את הברק בתוך הכפתור. */
.btn-main,.btn-primary{position:relative;overflow:hidden;
  letter-spacing:.2px;font-weight:700;
  transition:transform .16s cubic-bezier(.2,.9,.25,1),filter .16s}
.btn-main::after,.btn-primary::after{content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.30),transparent);
  transform:translateX(-120%)}
.btn-main:active,.btn-primary:active{transform:scale(.975);filter:brightness(.94)}
.btn-main:active::after,.btn-primary:active::after{animation:sheen .5s ease-out}
@keyframes sheen{to{transform:translateX(120%)}}

.btn-sec{transition:border-color .18s,color .18s,transform .16s}
.btn-sec:active{transform:scale(.985);border-color:var(--ac);color:var(--ac)}

/* ── כניסת פריטים ברשימה ──────────────────────────────────────
   השהיה עולה לפי הסדר, עד הפריט השמיני. מעבר לזה השהיה נוספת רק
   מאחרת את המסך בלי שאיש רואה הבדל. */
.rlist .ritem{animation:itemUp .34s cubic-bezier(.2,.9,.25,1) both}
.rlist .ritem:nth-child(1){animation-delay:.02s}
.rlist .ritem:nth-child(2){animation-delay:.06s}
.rlist .ritem:nth-child(3){animation-delay:.10s}
.rlist .ritem:nth-child(4){animation-delay:.14s}
.rlist .ritem:nth-child(5){animation-delay:.18s}
.rlist .ritem:nth-child(6){animation-delay:.22s}
.rlist .ritem:nth-child(7){animation-delay:.26s}
.rlist .ritem:nth-child(n+8){animation-delay:.30s}
@keyframes itemUp{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.ritem{transition:transform .16s cubic-bezier(.2,.9,.25,1),border-color .18s}
.ritem:active{transform:scale(.985);border-color:var(--ac)}

/* ── ⚠️ נגישות: מי שביקש פחות תנועה מקבל פחות תנועה ───────────
   הכול הופך לשינוי מצב מיידי. שום פונקציונליות לא תלויה באנימציה,
   ולכן אין מה לאבד כאן. */
@media (prefers-reduced-motion:reduce){
  .navbar,.pg-r,.pg-l,.rlist .ritem{animation:none}
  .nv-ind,.nvb .nvi,.nv-new-ic,.btn-main,.btn-primary,.btn-sec,.ritem{transition:none}
  .btn-main:active::after,.btn-primary:active::after{animation:none}
}

/* ══════════════════════════════════════════════════════════════════
   כיוון "מכשיר" — מסך הבית
   ══════════════════════════════════════════════════════════════════
   המשתמש בחר את הכיוון הזה מתוך שלושה, 09/08: הנתונים יושבים על הרקע
   ומופרדים בקו שיער, בלי קלפים ובלי קישוט. הלוגו והשם במרכז, ומתחתם
   שורה אחת: "שלום X" מתוך השם המלא בפרופיל.
   ────────────────────────────────────────────────────────────────── */
.brand{padding:30px 0 14px;display:flex;flex-direction:column;align-items:center;gap:6px}
.brand-mark{width:46px;height:46px;display:block}
.brand-mark svg{width:46px;height:46px;display:block}
.brand-wm{font-size:25px;font-weight:500;letter-spacing:.19em;direction:ltr}
.brand-hi{font-size:12.5px;color:var(--t2)}

/* שני מספרים, לא שלושה קלפים */
.instr{display:flex;align-items:center;gap:11px;padding:4px 2px 2px}
.instr-n{font-size:38px;font-weight:700;letter-spacing:-.03em;line-height:1;color:var(--ac)}
.instr-n.dim{color:var(--t2)}
.instr-l{font-size:11px;color:var(--t2);line-height:1.3}
.instr-sep{width:1px;height:30px;background:var(--bd);margin:0 3px}
.instr-out{display:none}

/* ── שורת דוח ─────────────────────────────────────────────────
   ⚠️ אין כאן `background` ואין `border` מסביב. ההפרדה היא קו תחתון
   אחד. זה מה שמבדיל את הכיוון הזה מהקודם, ולא הצבעים. */
.hrow{display:flex;align-items:center;gap:10px;padding:13px 0;
  border-bottom:1px solid var(--bd);cursor:pointer;
  transition:transform .16s cubic-bezier(.2,.9,.25,1)}
.hrow:active{transform:scale(.99)}
.hk{width:3px;height:26px;border-radius:1px;flex:0 0 3px}
.hmain{flex:1;min-width:0}
.hmain b{display:block;font-size:13.5px;font-weight:600;color:var(--tx);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.hmain i{display:block;font-size:10.5px;color:var(--t2);font-style:normal;margin-top:1px}
.hnum{font-size:10.5px;color:var(--t3)}

/* החוגה. ריקה כשאין מדידה — ואז גם בלי מספר. */
.ring{position:relative;display:inline-flex;flex:0 0 auto}
.ring svg{transform:rotate(-90deg);display:block}
.ring b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-size:9px;font-weight:600;color:var(--tx)}

/* ── ספרות במונו ──────────────────────────────────────────────
   המפרט: "כל ספרה באפליקציה היא מונו וטבלאית". מוחל דרך מחלקה `.num`
   על המספרים עצמם, ולא על הגוף כולו — Plex Mono נושא גם אותיות
   לטיניות, והחלה גורפת הייתה הופכת כל מילה באנגלית למונו. */
.num{font-family:'IBM Plex Mono',ui-monospace,monospace;direction:ltr;
  unicode-bidi:isolate;font-variant-numeric:tabular-nums}

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

   ⚠️ הבלוק הזה יושב **בסוף הקובץ ומשנה רכיבים משותפים**, ולא כל מסך
   בנפרד. `.set-card` מופיע 20 פעם ב-HTML, `.fi` 29 פעם, `.ritem`
   בארכיון ובתבניות — ולכן שינוי אחד כאן מעדכן את ההגדרות, התבניות,
   הארכיון והטופס יחד. לצייר כל מסך בנפרד היה מייצר חמש שפות שיתפצלו,
   וזו המחלה שחזרה בפרויקט הזה 12 פעמים.

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

/* ── מקטע במקום קלף ─────────────────────────────────────────── */
.set-card{background:transparent;border:0;border-top:1px solid var(--bd);
  border-radius:0;padding:20px 0 18px;margin:0}
.set-card:first-of-type{border-top:0;padding-top:6px}
.set-card-title{font-family:'IBM Plex Mono',ui-monospace,monospace;
  font-size:9.5px;font-weight:500;letter-spacing:.13em;color:var(--t3);
  text-transform:uppercase;margin-bottom:14px;direction:ltr;flex-direction:row-reverse;
  justify-content:flex-end}
.set-card-title svg{width:14px;height:14px;stroke:var(--t3)}

/* ── תוויות שדה: אותה תווית מונו כמו כותרת מקטע ─────────────── */
.fl2{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9.5px;
  font-weight:500;letter-spacing:.11em;color:var(--t2);text-transform:none}

/* ── שדה: מלבן שקוף עם קו, לא זכוכית ────────────────────────── */
.fi{background:transparent;border:1px solid var(--bd);border-radius:var(--r2)}
[data-theme="light"] .fi{background:transparent;border-color:var(--bd)}
.fi:focus{border-color:var(--ac);background:transparent}

/* ── שורה ברשימה: קו שיער במקום מסגרת ───────────────────────── */
.ritem{background:transparent;border:0;border-bottom:1px solid var(--bd);
  border-radius:0;padding:13px 0}
.ritem:active{transform:scale(.99);border-color:var(--bd)}
.rlist{gap:0}
.ric{width:3px;height:26px;border-radius:1px;flex:0 0 3px;padding:0}
.ric svg{display:none}
.rstatus{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;
  font-weight:500;letter-spacing:.1em;padding:3px 9px;border-radius:99px;
  background:transparent;border:1px solid var(--bd);color:var(--t2)}
.rstatus.st-ok{border-color:var(--ac);color:var(--ac)}

/* ── כותרת הטופס ────────────────────────────────────────────── */
.fhdr{background:transparent;border-bottom:1px solid var(--bd)}
.ftitle{font-weight:700}
.fbadge{font-family:'IBM Plex Mono',ui-monospace,monospace;font-size:9px;
  letter-spacing:.1em;background:transparent!important;border:1px solid var(--bd);
  color:var(--t2)!important;border-radius:99px;padding:3px 9px}

/* ── צ'יפ שלב ───────────────────────────────────────────────── */
.psbtn{background:transparent;border:1px solid var(--bd);border-radius:99px}
.psbtn.nz-cur{border-color:var(--ac)}
.psbtn.nz-done{border-color:var(--bd);opacity:.6}

/* ── בורר סוג הנזק ──────────────────────────────────────────── */
.tbtn{background:transparent;border:1px solid var(--bd);border-radius:var(--r2)}
.tbtn::before{display:none}
.ti-wrap{border-radius:var(--r3)}

/* ── ומה שהכיוון אוסר, בכל מסך ─────────────────────────────── */
.auth-box{background:transparent;border:1px solid var(--bd);box-shadow:none}
[data-theme="light"] .auth-box{background:transparent}
.logo-mark::after{display:none}
.hero{display:none}

/* ⚠️ כאן ישבו `.dialbar` ו-`.chaps` — שורת חוגה שנפרסת לרשימת פרקים.
   נמחקו באותו יום שנכתבו: המשתמש ביקש סרגל צדדי שבו כל השמות גלויים
   תמיד, ואז אין מה לפרוס. ראה `.chaprail` למטה. */


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

   1. `.navbar` הוגדר `display:grid` **אחרי** `.gone{display:none}`
      בקובץ. שתי המחלקות באותה עוצמה, ולכן המאוחרת ניצחה — והסרגל
      לא נעלם אף פעם, גם במסך מילוי הדוח ובמסך ההתחברות. נמדד: הוא
      הופיע מעל הטופס עם "הגדרות" מסומן פעיל.

   2. `.prog-steps` היה `display:flex` בשביל צ'יפים בשורה. החוגה
      והפרקים שיושבים בו עכשיו נדחסו זה לצד זה במקום זה מתחת לזה.

   3. הפעולה התחתונה נשארה עם גרדיאנט, טשטוש, הילה מתחתיה, וברק
      שרץ **מעצמו** כל 4.2 שניות. הכיוון שנבחר אוסר את ארבעתם, והברק
      האוטומטי גם מושך את העין בלי שקרה שום דבר. */
.navbar.gone{display:none}
.prog-steps{display:block;overflow:visible;padding:0}
#pgForm .fcta{background:var(--bg);backdrop-filter:none;-webkit-backdrop-filter:none;
  border-top:1px solid var(--bd)}
[data-theme="light"] #pgForm .fcta{background:var(--bg)}
#pgForm .fcta .btn-main{box-shadow:none;font-weight:700}
#pgForm .fcta .btn-main::after{animation:none}

/* ── סריקה אחרונה: שאריות מהעיצוב הקודם ──────────────────────
   המשתמש: *"נעבור על כל העיצוב, נראה שאין פאדיחות ואין שום דבר
   מהעיצוב הקודם."*

   נסרקו כל הגרדיאנטים, הצללים, הטשטושים והרדיוסים בקובץ. הרדיוסים
   כבר נקיים (1 · 2 · 4 · 6 · 50 · 99 בלבד). מה שנשאר חי ותוקן: */

/* ⚠️ שכבת הצללה תחת דיאלוגים — 50 פיקסל טשטוש שחור. הכיוון בנוי על
   הפרדה בקווים, ולא על עומק מזויף. */
.nzed-stage{box-shadow:none;border:1px solid var(--bd)}

/* ⚠️ פס השלב הישן: גרדיאנט + הילה. `--ac2` שווה היום ל-`--ac`, ולכן
   הגרדיאנט צייר צבע אחד ובזבז ציור. */
.ps.cur{background:var(--ac);box-shadow:none}

/* ⚠️ בועת העוזר: גרדיאנט בין אותו צבע לעצמו. */
.nz-bub{background:rgba(201,160,82,.14)}

/* ⚠️ טשטושים על שכבות כיסוי. הרקע שלהן כבר אטום כמעט לגמרי, ולכן
   הטשטוש רק עולה בביצועים על מכשיר בשטח. */
.picker-ov,.rec-ov,.conf-ov,.modal-ov{backdrop-filter:none;-webkit-backdrop-filter:none}
.hdr,.auth-box{backdrop-filter:none;-webkit-backdrop-filter:none}

/* ══════════════════════════════════════════════════════════════════
   סרגל הפרקים בצד — במקום הפאנל שנפרס
   ══════════════════════════════════════════════════════════════════
   המשתמש: *"סרגל שזז ואז אפשר ללחוץ ולעבור... השמות יהיו גלויים
   תמיד."*

   ⚠️ נמדד על 11 התבניות לפני הבנייה: חציון 9 פרקים, מקסימום 11.
   בגובה מסך של טלפון זה 68px ליעד מגע — מעל המינימום של 44. מ-13
   ומעלה זה נשבר, ולכן הסרגל **נגלל** (`overflow-y:auto`) ולא נדחס
   לגובה שאי אפשר ללחוץ עליו.
   ────────────────────────────────────────────────────────────────── */
.formbody{flex:1;display:flex;min-height:0}
.formbody .scroll{flex:1;min-width:0}

/* ⚠️ הכיווניות כאן נמדדה בצילום ולא נגזרה בקריאה. בממשק RTL הסרגל
   הוא הילד הראשון ולכן הוא **מימין**, ומכאן:
     border-inline-end   = הקו שמפריד בינו לבין התוכן (בצד שמאל שלו)
     margin-inline-start = ההרחקה מקצה המסך הימני
   הגרסה הראשונה עשתה את שניהם הפוך — הקו צויר על קצה המסך והסרגל
   נדבק אליו, בדיוק במקום שבו iOS קולט מחוות "חזור". */
.chaprail{flex:0 0 96px;display:flex;flex-direction:column;gap:2px;
  overflow-y:auto;overflow-x:hidden;scrollbar-width:none;
  border-inline-end:1px solid var(--bd);padding:8px 0}
.chaprail::-webkit-scrollbar{display:none}

/* ⚠️ הסרגל מוסט 10px פנימה מהקצה. בממשק RTL הקצה הימני הוא גם המקום
   שבו iOS קולט מחוות "חזור" — סרגל צמוד לקצה היה גונב אותה. */
.chaprail{margin-inline-start:10px}

.crail{display:flex;align-items:center;gap:7px;padding:9px 6px 9px 4px;
  background:transparent;border:0;cursor:pointer;text-align:right;
  font-family:'Assistant',sans-serif;color:var(--t2);min-height:44px;
  transition:color .2s}
.crail-bar{flex:0 0 3px;width:3px;align-self:stretch;min-height:22px;
  background:var(--bd);border-radius:2px;display:flex;align-items:flex-end}
.crail-bar u{display:block;width:100%;background:var(--ac);border-radius:2px;
  transition:height .3s cubic-bezier(.2,.9,.25,1)}
.crail-n{flex:1;min-width:0;font-size:10.5px;line-height:1.25;
  overflow:hidden;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

.crail.on{color:var(--tx)}
.crail.on .crail-bar{width:3px;background:var(--bd)}
.crail.on .crail-n{font-weight:700}
.crail.full{color:var(--t2)}
/* ⚠️ פרק שכל תוכנו טבלה — אין בו מה לספור, ופס ריק היה משקר.
   קו מקווקו אומר "לא רלוונטי" ולא "0%". */
.crail.nocount .crail-bar{background:transparent;
  border-inline-start:3px dotted var(--bd)}
.crail.nocount .crail-bar u{display:none}
.crail:active{color:var(--ac)}

/* ── שורת שם הפרק, מעל התוכן ─────────────────────────────────
   אומרת דבר אחד: איפה אתה. בלי חוגה, בלי אחוזים, בלי כפתור לפתוח —
   כל אלה עברו לסרגל. */
.stepname{padding:9px 16px 10px;border-bottom:1px solid var(--bd)}
.stepname b{display:block;font-size:14px;font-weight:700}
.stepname i{display:block;font-size:10.5px;color:var(--t2);font-style:normal;margin-top:1px}

@media (prefers-reduced-motion:reduce){ .crail,.crail-bar u{transition:none} }

/* ⚠️ בוררי התאריך נשארו בעיצוב ברירת המחדל של הדפדפן — לבנים, בתוך
   מסך כהה. `.date-row select` הגדיר רק מידות, ולא צבע ולא מסגרת,
   ולכן הם ירשו את הלבן של המערכת. נמצא בצילום ולא בקריאה.
   מקבלים עכשיו בדיוק את מה שכל שדה אחר מקבל. */
.date-row select{background:transparent;border:1px solid var(--bd);
  border-radius:var(--r2);color:var(--tx);font-family:'Assistant',sans-serif;
  -webkit-appearance:none;appearance:none;outline:none}
.date-row select:focus{border-color:var(--ac)}
.date-row select option{background:var(--s1);color:var(--tx)}

/* ══ שער הייצוא — "אילו שדות נשארו ריקים" ═══════════════════════
   ⚠️ אותה צורה בדיוק כמו הגיליון שבמסך הסקירה, ובכוונה: שני רגעי
   עצירה שנראים אחרת מלמדים את השמאי שני דברים במקום אחד. */
#nzGate{display:none}
#nzGate.on{display:block}
.gate-veil{position:fixed;inset:0;background:rgba(14,13,9,.62);z-index:80}
.gate{position:fixed;inset-inline:0;bottom:0;z-index:81;background:var(--bg);
  border-top:1px solid var(--bd);border-radius:14px 14px 0 0;
  padding:9px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:13px;max-height:86dvh;overflow-y:auto}
.gate-grab{width:38px;height:4px;border-radius:2px;background:var(--bd);margin:0 auto}
.gate-hd{display:flex;align-items:flex-start;gap:12px}
.gate-n{width:52px;height:52px;flex:none;border-radius:50%;border:3px solid var(--ac);
  display:flex;align-items:center;justify-content:center;color:var(--ac);
  font-size:21px;font-weight:800;font-variant-numeric:tabular-nums}
.gate h2{margin:0;font-size:19px;font-weight:800}
.gate-hd p{margin:2px 0 0;font-size:14.5px;color:var(--t2)}
.gate-list{display:flex;flex-direction:column;border:1px solid var(--bd);
  border-radius:var(--r);overflow:hidden;background:var(--s1)}
.gate-list button{display:flex;align-items:center;gap:10px;padding:10px 13px;
  border:0;border-bottom:1px solid var(--bd);min-height:48px;border-radius:0;
  background:none;color:var(--tx);width:100%;text-align:right;font:inherit}
.gate-list button:last-child{border-bottom:0}
.gate-list s{width:3px;align-self:stretch;border-radius:2px;background:var(--ac);
  flex:none;text-decoration:none}
.gate-list button.full s{background:var(--ok)}
.gate-list .t{flex:1;min-width:0;font-size:15px;font-weight:700;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.gate-list .c{font-size:13.5px;color:var(--ac);flex:none;
  font-variant-numeric:tabular-nums}
.gate-list button.full .c{color:var(--ok)}
/* ── שמות השדות החסרים, מתחת לפרק שלהם ────────────────────────
   ⚠️ הם יושבים **בתוך** הרשימה ולא במסך נפרד: השמאי צריך לראות
   את הפרק ואת מה שחסר בו במבט אחד. */
.gate-fl{display:flex;flex-direction:column;background:var(--bg);
  border-bottom:1px solid var(--bd)}
.gate-fl .gate-f{display:flex;align-items:center;gap:9px;width:100%;
  padding:9px 26px 9px 13px;min-height:42px;border:0;border-radius:0;
  background:none;color:var(--t2);font:inherit;font-size:14px;text-align:right}
.gate-fl .gate-f .d{width:5px;height:5px;border-radius:50%;flex:none;
  background:var(--ac)}
.gate-fl .gate-f:active{background:var(--s1);color:var(--tx)}
.gate-more{padding:4px 26px 10px;font-size:13px;color:var(--t3)}

.gate-note{border-inline-start:2px solid var(--ac);padding-inline-start:12px;
  font-size:14.5px;color:var(--t2)}
.gate-note b{color:var(--tx)}
.gate-btns{display:flex;gap:8px}
.gate-btns button{flex:1;min-height:52px;font-weight:800;font-size:15.5px;
  border-radius:var(--r);border:1px solid var(--bd);background:var(--s1);
  color:var(--tx);font-family:inherit}
.gate-btns .go{background:var(--ac);border-color:var(--ac);color:#17160F}

/* ── איפה החתימה תופיע — בחירה, לא הנחה ────────────────────────
   המשתמש, 10/08: *"אחרי שהוא מקשקש את החתימה תהיה לו אפשרות לבחור
   בכל דוח אם הוא רוצה שזה יופיע במייל ואם הוא רוצה שזה יופיע בדוח."*

   ⚠️ שתי האפשרויות נפתחות **כבויות**. חתימה היא הדבר שהופך מסמך
   למחייב, ואפליקציה שמסמנת אותה מראש קובעת במקומו במקום היחיד שבו
   אסור לה. השקף הוא השאלה, לא אישור של תשובה שכבר נבחרה. */
#nzSigWhere{display:none}
#nzSigWhere.on{display:block}
.sgw-veil{position:fixed;inset:0;background:rgba(14,13,9,.62);z-index:260}
.sgw{position:fixed;inset-inline:0;bottom:0;z-index:261;background:var(--bg);
  border-top:1px solid var(--bd);border-radius:14px 14px 0 0;
  padding:9px 16px calc(18px + env(safe-area-inset-bottom));
  display:flex;flex-direction:column;gap:14px;max-height:86dvh;overflow-y:auto}
.sgw h2{margin:0;font-size:19px;font-weight:800}
.sgw-sub{margin:2px 0 0;font-size:14.5px;color:var(--t2)}
.sgw-ink{border:1px solid var(--bd);border-radius:var(--r);background:#fff;
  padding:8px;display:flex;align-items:center;justify-content:center;min-height:74px}
.sgw-ink img{max-width:190px;max-height:64px}
.sgw-opts{display:flex;flex-direction:column;gap:9px}
.sgw-opt{display:flex;align-items:center;gap:12px;padding:13px 14px;min-height:62px;
  border:1px solid var(--bd);border-radius:var(--r);background:var(--s1);
  color:var(--tx);width:100%;text-align:right;font:inherit}
/* ⚠️ הווי הוא **מלבן**, לא עיגול: עיגול בממשק הזה אומר "אחת מיני
   רבות", וכאן שתי האפשרויות עצמאיות לגמרי — אפשר שתיהן, אפשר אף אחת. */
.sgw-opt i{width:26px;height:26px;flex:none;border-radius:6px;
  border:2px solid var(--bd);display:flex;align-items:center;justify-content:center;
  font-size:15px;font-style:normal;color:transparent}
.sgw-opt.on{border-color:var(--ac);background:rgba(201,160,82,.09)}
.sgw-opt.on i{background:var(--ac);border-color:var(--ac);color:#17160F}
.sgw-opt .tx{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px}
.sgw-opt .tx b{font-size:15.5px;font-weight:700}
.sgw-opt .tx span{font-size:13px;color:var(--t2);line-height:1.5}
.sgw-note{border-inline-start:2px solid var(--ac);padding-inline-start:12px;
  font-size:13.5px;color:var(--t2);line-height:1.6}
.sgw-go{min-height:54px;font-weight:800;font-size:16px;border-radius:var(--r);
  background:var(--ac);border:1px solid var(--ac);color:#17160F;font-family:inherit}

/* ── שדה שנשאר ריק, כשחוזרים אליו מהשער ────────────────────────
   ⚠️ שתי דרגות, ובכוונה: כל הריקים מסומנים בקו דק כדי שהעין תמצא
   אותם בסריקה, והאחד שקפצנו אליו מודגש. סימון אחיד על עשרים שדות
   הוא בדיוק "שעה של חיפוש" בלבוש אחר. */
.nz-missing{border-inline-start:3px solid var(--ac);padding-inline-start:10px;
  margin-inline-start:-13px}
.nz-missing-now{background:rgba(201,160,82,.10);border-radius:var(--r);
  padding:8px 10px 8px 10px;margin-inline-start:-13px}
.nz-missing-now .fl2{color:var(--ac)}
.nz-missing-now .fi{border-color:var(--ac)}
@media (prefers-reduced-motion:no-preference){
  .nz-missing-now{animation:nzFound .5s ease}
}
@keyframes nzFound{from{background:rgba(201,160,82,.30)}to{background:rgba(201,160,82,.10)}}

/* ══ התיק ═══════════════════════════════════════════════════════
   המשתמש, 10/08: *"תזכור את העיצוב ואת הטכנולוגיות והנגישות
   שאנחנו רוצים, אז לא לעשות דברים שייראו מ-2010."*

   ⚠️ אותם אסימונים של כל האפליקציה — אין כאן ערכת צבעים שנייה,
   אין גרדיאנטים ואין צללים. מה שנושא את המסך הוא מרווח והיררכיה. */
#pgCase{padding:0}
.cwrap{padding:0 0 34px}
.ccover{padding:16px 16px 18px;border-bottom:1px solid var(--bd)}
.cback{background:none;border:0;color:var(--t2);font:inherit;font-size:14.5px;
  padding:6px 0;min-height:44px;display:flex;align-items:center}
.ccover h1{margin:0;font-size:25px;font-weight:800;line-height:1.2;color:var(--tx)}
.csub{margin-top:5px;font-size:14px;color:var(--t2)}
.ckeys{display:flex;gap:8px;margin-top:14px;flex-wrap:wrap}
.ck{background:var(--s1);border:1px solid var(--bd);border-radius:var(--r);
  padding:7px 11px;min-width:0;flex:1}
.ck .k{font-size:10.5px;color:var(--t3);letter-spacing:.05em;font-weight:600;
  white-space:nowrap}
.ck .v{font-size:14.5px;font-weight:700;margin-top:2px;color:var(--tx);
  font-variant-numeric:tabular-nums;overflow:hidden;text-overflow:ellipsis;
  white-space:nowrap}

.cgrp{margin:14px 16px 0;border:1px solid var(--bd);border-radius:8px;
  background:var(--s1);overflow:hidden}
.chd{display:flex;align-items:center;gap:10px;padding:11px 13px;
  border-bottom:1px solid var(--bd)}
.chd .ic{width:30px;height:30px;border-radius:var(--r);flex:none;
  background:rgba(201,160,82,.13);display:flex;align-items:center;
  justify-content:center;font-size:15px}
.cgrp.sent .chd .ic{background:rgba(126,154,133,.16)}
.chd h2{margin:0;flex:1;font-size:15.5px;font-weight:700;color:var(--tx);
  background:none;padding:0;border:0}
.chd .n{font-size:13px;color:var(--t2);font-variant-numeric:tabular-nums}

/* ⚠️ 48px גובה מינימלי לכל שורה לחיצה — אצבע, לא עכבר. */
.crow{display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 13px;min-height:48px;border:0;border-bottom:1px solid var(--bd);
  border-radius:0;background:none;color:var(--tx);font:inherit;font-size:14.5px;
  text-align:right}
.crow:last-of-type{border-bottom:0}
.crow .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.crow .mt{font-size:12.5px;color:var(--t3);flex:none}
.crow:active{background:var(--s3)}
.crow.bad .nm{color:var(--er)}
.crow.bad .mt{color:var(--er)}
.cwhy{padding:0 13px 10px;font-size:12.5px;color:var(--t2);
  border-bottom:1px solid var(--bd)}
.cempty{padding:14px 13px;font-size:13.5px;color:var(--t2);line-height:1.6}

.cthumbs{display:flex;gap:6px;padding:11px 13px;overflow-x:auto;
  scroll-snap-type:x proximity}
.cth{width:64px;height:64px;flex:none;border-radius:var(--r);overflow:hidden;
  border:1px solid var(--bd);background:var(--s3);padding:0;position:relative;
  scroll-snap-align:start}
.cth img{width:100%;height:100%;object-fit:cover;display:block}
.cth span{position:absolute;inset-inline:0;bottom:0;font-size:9.5px;
  background:rgba(23,22,15,.72);color:var(--tx);padding:2px 3px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.cth.more{display:flex;align-items:center;justify-content:center;
  color:var(--t2);font-size:14px;font-weight:700}

.cadd{display:flex;align-items:center;justify-content:center;gap:7px;
  padding:13px;min-height:50px;color:var(--ac);font-size:14.5px;font-weight:700;
  border-top:1px dashed var(--bd);cursor:pointer}
.cadd:active{background:var(--s3)}

/* ⚠️ מי שמעדיף פחות תנועה — לא מקבל תנועה. */
@media (prefers-reduced-motion: reduce){
  .cthumbs{scroll-behavior:auto}
}

/* ── כפתור החתימה בשלב האחרון ──────────────────────────────────
   ⚠️ הוא יושב **מעל** "שמור וצור Word", כי החתימה חייבת להיקבע
   לפני שהקובץ נבנה. עד 11/08 הכניסה היחידה אליה הייתה בשקף
   שנפתח אחרי היצירה — ולכן היא לא יכלה להיכנס לקובץ בשום מצב. */
.nz-sigbtn{display:flex;align-items:center;justify-content:space-between;
  gap:10px;width:100%;text-align:right}
.nz-sigst{font-size:12.5px;color:var(--t2);font-weight:600;flex:none}

/* ── מחיקה מתוך התיק ───────────────────────────────────────────
   ⚠️ ה-✕ הוא **שכן** של השורה ולא בתוכה: כפתור בתוך כפתור אינו
   חוקי ב-HTML, והדפדפן מפרק אותו — כלומר הלחיצה על אחד מהם
   מפעילה את השני. */
.crow2{display:flex;align-items:stretch;border-bottom:1px solid var(--bd)}
.crow2:last-of-type{border-bottom:0}
.crow2 .crow{border-bottom:0;flex:1;min-width:0}
.cdel,.cthdel{background:none;border:0;color:var(--er);opacity:.5;
  font-size:15px;line-height:1;padding:0 14px;min-width:44px;min-height:44px;
  display:flex;align-items:center;justify-content:center;flex:none}
.cdel:active,.cthdel:active{opacity:1}
.cthw{position:relative;flex:none}
.cthdel{position:absolute;top:-2px;inset-inline-start:-2px;padding:0;
  min-width:22px;min-height:22px;width:22px;height:22px;border-radius:50%;
  background:rgba(23,22,15,.86);color:var(--er);opacity:1;font-size:11px}

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

   ⚠️ והתיקון אינו שלוש ערכות צבע. שלוש ערכות היו שלוש הגדרות
   לאותה שפה, והמסכים היו מפסיקים להיראות כמו אותה אפליקציה.
   מה שמבדיל כאן הוא **סימן זהות אחד לכל מסך**: פס בצבע שונה
   מתחת לכותרת, וגוון אחר לריבוע האייקון. אותם אסימונים, זהות
   שונה. */
#pgHome .brand{position:relative}
.hdr{position:relative}
#pgCases .hdr:after,#pgArchive .hdr:after,#pgSettings .hdr:after,
#pgTemplates .hdr:after{content:'';position:absolute;inset-inline:0;bottom:-1px;
  height:2px}
#pgCases .hdr:after{background:var(--ac)}
#pgArchive .hdr:after{background:var(--ac3)}
#pgTemplates .hdr:after{background:#8398B4}
#pgSettings .hdr:after{background:var(--t3)}
#pgArchive .hdr-ic{background:var(--ac3)}
#pgTemplates .hdr-ic{background:#8398B4}
#pgSettings .hdr-ic{background:var(--t3)}
/* ⚠️ שם המסך גדול ובולט — הוא הדבר הראשון שהעין תופסת, והוא
   מה שהיה חסר: שלושה מסכים עם אותה כותרת קטנה נראים זהים. */
.hdr-name{font-size:19px;font-weight:800;letter-spacing:-.2px}

/* ══ לכל מסך צורה משלו ══════════════════════════════════════════
   המשתמש, 11/08: *"אני רוצה עיצובים שונים לכל עמוד."* — אחרי
   שאמר שהמסכים *"אשכרה נראים אותו דבר."*

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

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

/* ── תיקים: כרטיסים ─────────────────────────────────────────── */
#pgCases .rlist{display:flex;flex-direction:column;gap:8px;padding:0 2px}
#pgCases .hrow{border:1px solid var(--bd);border-radius:var(--r);
  background:var(--s1);padding:13px 13px 13px 11px;gap:11px;
  /* פס הזהות של התיק — עבה יותר, כמו לשונית של תיקייה */
  position:relative;overflow:hidden}
#pgCases .hrow .hk{width:4px;height:auto;align-self:stretch;border-radius:2px;
  flex:0 0 4px}
#pgCases .hmain b{font-size:16px;font-weight:700}
#pgCases .hmain i{font-size:12px;margin-top:3px}
#pgCases .hnum{font-size:12px;color:var(--ac);font-weight:700;
  font-variant-numeric:tabular-nums;align-self:flex-start;padding-top:2px}

/* ── ארכיון: שורות צפופות לסריקה ─────────────────────────────── */
#pgArchive .rlist{padding:0 2px}
#pgArchive .hrow{padding:9px 2px;gap:9px;border-bottom:1px solid var(--bd)}
#pgArchive .hrow .hk{height:18px;width:2px;flex:0 0 2px;opacity:.75}
#pgArchive .hmain b{font-size:13.5px;font-weight:600}
#pgArchive .hmain i{font-size:10px;opacity:.8}
/* ⚠️ מספר התביעה הוא מה שמחפשים בארכיון — ולכן הוא, ולא השם,
   מקבל את הבליטה. במסך הבית ההפך: שם המבוטח הוא מה שמזהים. */
#pgArchive .hnum{font-size:12.5px;color:var(--tx);font-weight:700;
  font-variant-numeric:tabular-nums;font-family:'IBM Plex Mono',monospace}
#pgArchive .ring{transform:scale(.82)}

/* ── דוחות: נשאר מסך העבודה, נושם יותר ──────────────────────── */
#pgHome .hrow{padding:14px 0}
#pgHome .hmain b{font-size:14.5px}

/* ── שלד רשימת התבניות ─────────────────────────────────────────
   21/08. המשתמש: "למה כשאני נכנס לתבניות אני רואה כאילו זה ריק ורק
   אחרי כמה שניות או דקה זה מתאפס?"
   מצב האישור מגיע מ-Render, ו-Render בחינם מרדים שירות שאינו
   בשימוש — ההתעוררות לבדה לוקחת כדקה. עד אז המסך היה ריק, וריק
   נראה כמו "אין לך תבניות" ולא כמו "רגע, טוען".
   ⚠️ בגובה של שורת תבנית אמיתית, כדי שהמעבר לא יקפיץ את הדף. */
.tpl-sk{height:58px;border-bottom:1px solid var(--bd);
  background:linear-gradient(90deg,rgba(255,255,255,.03) 25%,
    rgba(255,255,255,.06) 50%,rgba(255,255,255,.03) 75%);
  background-size:200% 100%;animation:relSk 1.4s linear infinite}

/* ── ⚠️ עזרה קצרה ליד שדה, ומרכז התמיכה ──────────────────────
   הבעלים, 22/08: *"להוסיף סימן שאלה מעל המקום למלא פרטים, שיסביר
   שזה בשביל המייל שיוצא."* ובנוסף: כתובת התמיכה בהגדרות בלבד —
   **לא** ככפתור צף על המסך, שהיה מסתיר תוכן בזמן עבודה. */
.fl-q{width:16px;height:16px;border-radius:50%;border:1px solid var(--ac);
  background:transparent;color:var(--ac);font-size:10px;font-weight:800;
  line-height:1;padding:0;margin-inline-start:5px;cursor:pointer;
  font-family:'Assistant',sans-serif;vertical-align:middle}
.fl-q:focus-visible{outline:2px solid var(--ac);outline-offset:2px}
.help-note{background:rgba(201,160,82,.08);border:1px solid rgba(201,160,82,.24);
  border-radius:10px;padding:11px 13px;font-size:12px;color:var(--t2);
  line-height:1.75;margin:0 0 12px}
.help-note b{color:var(--tx);font-weight:700}

/* ── ⚠️ שקפי הפתיחה ──────────────────────────────────────────
   שלושה מסכים שמלווים שמאי חדש. אושרו בצילום לפני שנבנו.
   ההסברים **מצוירים** ולא כתובים: מי שמקבל את זה עובד בשטח
   ולא קורא מדריכים. */
/* ⚠️ רוחב וגובה גדולים מ-.modal-card הרגיל. הבעלים, 23/08:
   *"השקופיות קטנות, הן יכולות לתפוס יותר מקום במסך."* */
.intro-card{max-width:min(430px,94vw);text-align:right;max-height:92vh;
  overflow-y:auto;padding:26px 20px}
.intro-pane{display:flex;flex-direction:column;gap:11px}
.intro-brand{display:flex;flex-direction:column;align-items:center;gap:7px;margin-bottom:2px}
.intro-brand svg{width:44px;height:44px}
/* ⚠️ מועתק מ-.brand-wm — Assistant 500 בריווח .19em. לא גופן אחר. */
.intro-wm{font-size:25px;font-weight:500;letter-spacing:.19em;direction:ltr;color:var(--ac)}
.intro-h{font-size:19px;font-weight:800;line-height:1.45;margin:0;text-align:center}
.intro-t{font-size:19px;font-weight:800;line-height:1.35;margin:0 0 2px}
.intro-p{font-size:14.5px;color:var(--t2);line-height:1.85;margin:0}
.intro-pane .intro-p{text-align:center}
.intro-pane#introIos .intro-p,.intro-pane#introAndroid .intro-p{text-align:right}
.intro-p b{color:var(--tx);font-weight:700}
.intro-slogan{text-align:center;color:var(--ac);font-weight:800;font-size:13px;letter-spacing:.06em;margin:4px 0 0}
.intro-ask{text-align:center;font-size:13.5px;font-weight:700;color:var(--tx);margin:8px 0 0}
.intro-pick{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.intro-dev{border:1px solid var(--bd);border-radius:14px;background:var(--s2);
  padding:14px 6px 12px;display:flex;flex-direction:column;align-items:center;gap:6px;
  cursor:pointer;font-family:'Assistant',sans-serif}
.intro-dev svg{width:34px;height:34px}
.intro-dev b{font-size:15.5px;font-weight:800;color:var(--tx)}
.intro-dev span{font-size:11px;color:var(--t3)}
.intro-dev:focus-visible{outline:2px solid var(--ac);outline-offset:2px}

.intro-step{display:grid;grid-template-columns:26px 1fr;gap:11px;align-items:start;font-size:15px;line-height:1.5}
.intro-n{width:26px;height:26px;border-radius:8px;background:var(--ac);color:#191713;
  font-size:13px;font-weight:800;display:grid;place-items:center;margin-top:1px}
.intro-step b{font-weight:800;color:var(--tx)}
.intro-step em{display:block;font-style:normal;color:var(--t3);font-size:13px;margin-top:3px}

/* ⚠️ ההמחשות ב-HTML ולא ב-SVG: טקסט עברי בתוך SVG אינו מתיישר
   ואינו מקבל ריווח פנימי, ובצילום שהבעלים שלח הוא נדחק לקצה. */
.ui-mock{border:1px solid var(--bd);border-radius:13px;background:var(--s2);
  padding:10px;display:flex;flex-direction:column;gap:8px;overflow:hidden}
.ui-url{background:rgba(255,255,255,.06);border-radius:100px;padding:9px 16px;
  font-size:13.5px;color:var(--t2);text-align:center;direction:ltr}
.ui-sep{height:1px;background:var(--bd);margin:1px -10px}
.ui-bar{display:flex;align-items:center;justify-content:space-between;padding:2px}
.ui-bar > svg{width:20px;height:20px;stroke:var(--t3);fill:none;stroke-width:2;
  stroke-linecap:round;stroke-linejoin:round;flex:none;opacity:.6}
.ui-ring{width:52px;height:52px;border-radius:50%;background:rgba(201,160,82,.14);
  border:2px solid var(--ac);display:grid;place-items:center;flex:none}
.ui-ring svg{width:24px;height:24px;stroke:var(--ac);fill:none;stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round}
/* ⚠️ הבעלים, 23/08: *"השלוש נקודות של הכרום נמצאות בחוץ."*
   `display:flex` דרס את ה-`place-items:center` של `.ui-ring`, ובלי
   יישור משלו הנקודות נדחקו לפינה. */
.ui-dots{display:flex;flex-direction:column;align-items:center;
  justify-content:center;gap:4px}
.ui-dots i{width:4.5px;height:4.5px;border-radius:50%;background:var(--ac);flex:none}
.ui-row{display:flex;align-items:center;gap:10px;background:rgba(255,255,255,.05);
  border-radius:10px;padding:11px 13px;font-size:14px;color:var(--t3)}
.ui-row svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;flex:none}
.ui-row.hot{background:rgba(201,160,82,.15);border:1.5px solid var(--ac);
  color:var(--ac);font-weight:800;padding:7px 10px}
.ui-line{height:8px;border-radius:4px;background:rgba(255,255,255,.05)}

.intro-rules{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:13px}
.intro-rules li{display:grid;grid-template-columns:22px 1fr;gap:12px;align-items:start;font-size:14.5px;line-height:1.65}
.intro-rules svg{width:22px;height:22px;margin-top:1px;stroke:var(--ac);fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.intro-rules b{display:block;font-weight:700;color:var(--tx)}
.intro-rules span{color:var(--t2)}

.intro-help{border:1px solid var(--bd);border-radius:12px;background:var(--s2);
  padding:11px 12px;display:grid;grid-template-columns:20px 1fr;gap:10px;align-items:start}
.intro-help > svg{width:20px;height:20px;stroke:var(--ok);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;margin-top:1px}
.intro-help b{display:block;font-size:12.5px;font-weight:700;color:var(--tx)}
.intro-help span{font-size:12px;color:var(--t2);line-height:1.65}
.intro-help a{color:var(--ok);font-weight:700;text-decoration:none;direction:ltr;display:inline-block}

.intro-mic{width:56px;height:56px;border-radius:50%;background:rgba(201,160,82,.14);
  display:grid;place-items:center;margin:0 auto}
.intro-mic svg{width:24px;height:24px;stroke:var(--ac);fill:none;stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round}

.intro-dont{display:flex;align-items:center;gap:10px;font-size:14px;color:var(--t2);
  border-top:1px solid var(--bd);padding-top:12px;margin-top:2px;cursor:pointer}
.intro-dont input{width:17px;height:17px;accent-color:var(--ac);flex:none}