:root{
    --bg:#F4F5F2;
    --surface:#FFFFFF;
    --surface-2:#E9EBE5;
    --ink:#1B241E;
    --ink-soft:#5C6660;
    --accent:#2F6B47;
    --accent-strong:#1F4A31;
    --accent-soft:#E3EDE5;
    --line:#D5D9D2;
    --line-strong:#BCC2BA;
    --pin:#C2453A;
    --shadow: 0 14px 34px -20px rgba(27,36,30,0.4);
    --shadow-lg: 0 22px 48px -22px rgba(27,36,30,0.5);
    --radius: 0px;
    --warn-soft:#F0E4C8; --warn-strong:#7A5A18;
    --warn2-soft:#F4DCD8; --warn2-strong:#A3352B;
    --ok-soft:#E3EDE5;   --ok-strong:#1F4A31;
    --fs-h1:28px; --fs-h2:22px; --fs-h3:18px;
    --fs-ui:15px; --fs-base:13px; --fs-meta:12px; --fs-label:11px;
    --ctl:30px;
    --ctl-touch:44px;
  }
  /* מצב כהה: כברירת מחדל לפי הגדרת המכשיר (prefers-color-scheme), אבל data-theme על
     ה-html (ר' js/theme-init.js + toggle ב-js/menu.js) מאפשר למשתמש לדרוס את זה ידנית --
     גם לכפות כהה על מכשיר בהיר (:root[data-theme="dark"]), וגם לכפות בהיר על מכשיר כהה
     (ה-:not([data-theme="light"]) על בלוק ה-media שולל אותו כשהמשתמש בחר "בהיר" ידנית). */
  @media (prefers-color-scheme: dark){
    :root:not([data-theme="light"]){
      --bg:#151A16;
      --surface:#1E251F;
      --surface-2:#28302A;
      --ink:#EDF0EB;
      --ink-soft:#A8B0AA;
      --accent:#6FA583;
      --accent-strong:#8FC0A1;
      --accent-soft:#233A2B;
      --line:rgba(237,240,235,0.14);
      --line-strong:rgba(237,240,235,0.28);
      --pin:#E0705F;
      --shadow: 0 14px 34px -18px rgba(0,0,0,0.6);
      --shadow-lg: 0 22px 50px -20px rgba(0,0,0,0.7);
      --warn-soft:#4A3B1C; --warn-strong:#E3B15D;
      --warn2-soft:#4A2A1E; --warn2-strong:#E3805D;
      --ok-soft:#243A1A; --ok-strong:#8FC96A;
    }
  }
  :root[data-theme="dark"]{
    --bg:#151A16;
    --surface:#1E251F;
    --surface-2:#28302A;
    --ink:#EDF0EB;
    --ink-soft:#A8B0AA;
    --accent:#6FA583;
    --accent-strong:#8FC0A1;
    --accent-soft:#233A2B;
    --line:rgba(237,240,235,0.14);
    --line-strong:rgba(237,240,235,0.28);
    --pin:#E0705F;
    --shadow: 0 14px 34px -18px rgba(0,0,0,0.6);
    --shadow-lg: 0 22px 50px -20px rgba(0,0,0,0.7);
    --warn-soft:#4A3B1C; --warn-strong:#E3B15D;
    --warn2-soft:#4A2A1E; --warn2-strong:#E3805D;
    --ok-soft:#243A1A; --ok-strong:#8FC96A;
  }
  *{ box-sizing:border-box; }
  html,body{ height:100%; }
  body{
    margin:0;
    background:var(--bg);
    color:var(--ink);
    font-family:"Assistant","Segoe UI",Arial,sans-serif;
    direction:rtl;
    line-height:1.5;
    -webkit-text-size-adjust:100%; text-size-adjust:100%;
    /* רשת עמודות רחבה (כמו timeline.html) עלולה לדחוף את כל העמוד לרוחב אם משהו לא
       מכיל אותה נכון -- זה בולם בטיחות: שום דבר לא אמור לגרום לגלילה אופקית של כל העמוד,
       תוכן רחב צריך לגלול בתוך מכל משלו (ר' overflow-x:auto ב-.timeline-wrap). */
    overflow-x:hidden;
  }
  h1,h2,h3{
    font-family:"Assistant",sans-serif;
    font-weight:700;
    text-wrap:balance;
    margin:0;
  }
  ul{ margin:0; padding:0; list-style:none; }

  .app{ display:flex; flex-direction:column; height:100%; }

  header.masthead{
    padding:7px clamp(14px,3vw,24px);
    border-bottom:1px solid var(--line-strong);
    display:flex;
    align-items:center;
    gap:12px;
    background:var(--surface);
    flex-shrink:0;
    min-height:0;
  }
  .title-group{
    display:flex;
    align-items:baseline;
    gap:9px;
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
  }
  .eyebrow{
    font-family:"IBM Plex Mono",monospace;
    font-size:10px;
    letter-spacing:.07em;
    text-transform:uppercase;
    color:var(--accent-strong);
    display:inline-flex;
    align-items:center;
    gap:6px;
    flex-shrink:0;
  }
  .eyebrow::before{ content:""; width:5px;height:5px;border-radius:50%; background:var(--accent); display:inline-block; }
  h1.title{ font-size:var(--fs-h3); line-height:1.2; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-wrap:nowrap; min-width:0; }
  h1.title a{ color:inherit; text-decoration:none; }
  h1.title a:hover{ opacity:.85; }
  .lede{ display:none; }
  .stats{
    display:flex;
    gap:12px;
    font-family:"IBM Plex Mono",monospace;
    font-size:11px;
    color:var(--ink-soft);
    min-width:0;
    overflow:hidden;
    white-space:nowrap;
  }
  .stats b{ color:var(--ink); }

  /* על header-actions (עוטף את כפתור "+ דיווח" ואת auth-widget יחד) ולא על auth-widget
     לבדו -- כך שהשניים נשארים צמודים זה לזה בקצה, ו-stats בין הלוגו לביניהם יכול להצטמצם. */
  .header-actions{ margin-inline-start:auto; flex-shrink:0; display:flex; align-items:center; gap:8px; }
  .auth-widget{ flex-shrink:0; display:flex; align-items:center; }
  .header-report-btn{
    display:inline-flex; align-items:center; flex-shrink:0; white-space:nowrap;
    background:var(--accent-strong); color:var(--surface); text-decoration:none;
    border-radius:var(--radius); padding:6px 11px; font-size:12.5px; font-weight:700;
  }
  .header-report-btn:hover{ opacity:.9; }
  .auth-signin-btn{
    display:flex; align-items:center; gap:6px;
    background:var(--surface-2); border:1px solid var(--line-strong);
    border-radius:var(--radius); padding:5px 10px;
    font-family:inherit; font-size:11.5px; font-weight:700; color:var(--ink);
    cursor:pointer;
  }
  .auth-signin-btn:hover{ background:var(--surface); }
  .auth-user{ position:relative; display:flex; align-items:center; gap:7px; font-size:11.5px; color:var(--ink-soft); }
  .auth-user img{ width:20px; height:20px; border-radius:50%; }
  .auth-signout-btn{
    background:none; border:none; color:var(--accent-strong); font-weight:700;
    font-size:11.5px; cursor:pointer; text-decoration:underline; padding:0;
  }
  .auth-user .text-btn{ margin-top:0; font-size:11.5px; }
  .auth-toggle{
    display:none; background:none; border:none; color:var(--ink-soft); font-size:12px;
    cursor:pointer; padding:2px; line-height:1; transition:transform .15s ease;
  }
  .auth-toggle.open{ transform:rotate(180deg); }
  .auth-details{ display:flex; align-items:center; gap:7px; }
  .auth-name-input{
    width:120px; padding:3px 6px; border-radius:6px; border:1px solid var(--line-strong);
    background:var(--bg); color:var(--ink); font-family:"Assistant",sans-serif; font-size:11.5px;
  }

  /* ---- פוטר (js/footer.js) -- בכל עמוד חוץ מהמפה (index.html) וטופס הדיווח (submit.html) ---- */
  .site-footer{
    flex-shrink:0; border-top:1px solid var(--line-strong); background:var(--surface);
    padding:16px clamp(14px,3vw,24px); margin-top:32px;
  }
  .site-footer-inner{
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
    gap:10px 20px; max-width:900px; margin:0 auto;
  }
  .site-footer-brand{ font-family:"Assistant",sans-serif; font-weight:700; font-size:13px; color:var(--ink-soft); }
  .site-footer-links{ display:flex; flex-wrap:wrap; gap:6px 16px; }
  .site-footer-links a{ font-size:12.5px; color:var(--ink-soft); text-decoration:none; }
  .site-footer-links a:hover{ color:var(--accent-strong); text-decoration:underline; }

  /* ---- consent modal (js/auth.js) ---- */
  .consent-overlay{
    position:fixed; inset:0; z-index:2000;
    background:rgba(0,0,0,0.55);
    display:flex; align-items:center; justify-content:center;
    padding:16px;
  }
  .consent-box{
    width:100%; max-width:440px; max-height:90vh; overflow:auto;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); padding:22px;
  }
  .consent-box h2{ font-size:17px; margin:0 0 8px; }
  .consent-lede{ font-size:13px; color:var(--ink-soft); margin:0 0 16px; }
  .consent-check{
    display:flex; align-items:flex-start; gap:8px;
    font-size:12.5px; margin-bottom:12px; cursor:pointer;
  }
  .consent-check input{ margin-top:3px; flex-shrink:0; }
  .consent-check a{ color:var(--accent-strong); }
  .consent-actions{ display:flex; align-items:center; gap:14px; margin-top:6px; }
  .consent-actions .submit-btn{ width:auto; flex:1; }

  /* מודאל "ליד הפרח עכשיו?" (js/submit.js, askNearFlowerModal) -- אותו .consent-box, אבל
     שני כפתורים שווים זה לצד זה במקום checkbox+submit-btn בודד. */
  .confirm-modal-actions{ display:flex; gap:10px; margin-top:4px; margin-bottom:14px; }
  .confirm-modal-actions .submit-btn, .confirm-modal-actions .secondary-btn{ width:auto; flex:1; }

  .menu-wrap{ position:relative; flex-shrink:0; }
  .menu-btn{
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); border:1px solid var(--line-strong);
    border-radius:var(--radius); padding:5px 11px;
    font-size:14px; line-height:1; color:var(--ink); cursor:pointer;
  }
  .menu-btn:hover{ background:var(--surface); }
  .menu-dropdown{
    position:absolute; top:calc(100% + 6px); inset-inline-start:0;
    display:flex; flex-direction:column; min-width:170px;
    background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
    box-shadow:var(--shadow-lg); overflow:hidden; z-index:1200;
  }
  .menu-dropdown[hidden]{ display:none; }
  .menu-dropdown a{
    padding:9px 14px; font-size:12.5px; font-weight:700; color:var(--ink);
    text-decoration:none; white-space:nowrap;
    display:flex; align-items:center; gap:9px;
  }
  /* display:flex למעלה מנצח בטעות את [hidden]{display:none} של הדפדפן (אותה specificity
     tie שכבר תוקנה פעם ב-.icon-edit-btn/.image-preview) -- בלי זה קישורי ניהול המסומנים
     hidden ע"י menu.js (למי שאינו אדמין) עדיין מוצגים ויזואלית. */
  .menu-dropdown a[hidden]{ display:none; }
  .menu-dropdown a:hover{ background:var(--surface-2); }
  .menu-dropdown a.active{ color:var(--accent-strong); }
  .menu-dropdown a + a{ border-top:1px solid var(--line); }
  /* קישורי ניהול (admin-*) מקובצים בסוף התפריט (ר' HTML) ומסומנים בצבע שונה, כדי שיהיה
     ברור מיד שאלו כלי ניהול ולא ניווט רגיל באתר. */
  .menu-dropdown a.admin-menu-link{ color:var(--warn-strong); }
  .menu-dropdown a.admin-menu-link.active{ color:var(--warn-strong); }
  /* אייקון עדין לכל שורה -- מוזרק דרך menu.js (לא ב-HTML של כל דף בנפרד), currentColor
     כדי שיתאים לצבע הקישור אוטומטית, ו-opacity מנמיך כדי שיישאר "עדין" ולא יתחרה בטקסט */
  .menu-icon{ display:inline-flex; flex-shrink:0; opacity:.55; }
  .menu-dropdown a:hover .menu-icon, .menu-dropdown a.active .menu-icon{ opacity:.85; }
  /* toggle מצב תצוגה (בהיר/כהה/אוטומטי) -- אותה שורת-תפריט חזותית כמו הקישורים, אבל
     button (לא ניווט) עם svg מוזרק ישירות ולא דרך menu.js/MENU_ICONS (ר' menu.js). */
  .menu-theme-toggle{
    padding:9px 14px; font-size:12.5px; font-weight:700; color:var(--ink);
    background:none; border:none; border-top:1px solid var(--line); cursor:pointer;
    display:flex; align-items:center; gap:9px; text-align:start; width:100%;
    font-family:"Assistant",sans-serif;
  }
  .menu-theme-toggle:hover{ background:var(--surface-2); }
  .menu-theme-toggle svg{ flex-shrink:0; opacity:.55; }
  .menu-theme-toggle:hover svg{ opacity:.85; }

  .layout{
    flex:1;
    display:grid;
    direction:ltr;
    grid-template-columns: var(--split,50%) 7px minmax(0,1fr);
    min-height:0;
  }
  .layout.vertical{
    grid-template-columns: minmax(0,1fr);
    grid-template-rows: var(--split,42%) 7px 1fr;
  }

  #map{ height:100%; width:100%; background:var(--surface-2); min-width:0; min-height:0; }

  .resizer{
    background:var(--line-strong);
    position:relative;
    cursor:col-resize;
    flex-shrink:0;
  }
  .layout.vertical .resizer{ cursor:row-resize; }
  .resizer::after{
    content:"";
    position:absolute;
    inset:0;
    margin:auto;
    width:3px; height:34px;
    border-radius:3px;
    background:var(--ink-soft);
    opacity:.5;
  }
  .layout.vertical .resizer::after{ width:34px; height:3px; }
  .resizer:hover::after, .resizer.dragging::after{ opacity:.9; }

  /* מובייל: המגירה התחתונה (bottom sheet) מחליפה את הפיצול/resizer האנכי */
  .sheet-handle{ display:none; }
  .sheet-body{ display:contents; } /* מובייל בלבד הופך למעטפת גלילה — בדסקטופ שקוף לחלוטין */
  .layout.vertical{
    position:relative;
    display:block;
    grid-template-columns:none;
    grid-template-rows:none;
  }
  .layout.vertical .resizer{ display:none; }
  .layout.vertical .panel{
    position:absolute;
    left:0; right:0; bottom:0;
    height:50%;
    z-index:1100; /* above Leaflet's own panes/controls (they go up to 1000) */
    border-top:1px solid var(--line-strong);
    border-radius:var(--radius) var(--radius) 0 0;
    transition:height .32s cubic-bezier(.32,.72,0,1);
    overflow:hidden;
  }
  .layout.vertical .sheet-body{
    display:flex;
    flex-direction:column;
    flex:1;
    min-height:0;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
  }
  /* מובייל: 2 כרטיסים בשורה בכוונה, לא auto-fill(minmax(190px,..)) הרגיל --
     ברוחב מסך טלפון טיפוסי זה כמעט תמיד יוצא עמודה אחת בלבד */
  .layout.vertical .species-list{ flex:none; overflow:visible; grid-template-columns:repeat(2, 1fr); gap:8px; }
  /* מובייל: שורת החיפוש נשארת קבועה למעלה בזמן שגוללים ברשימת המינים למטה */
  .layout.vertical .filter-bar{ position:sticky; top:0; z-index:2; }
  /* כשכרטיס נפתח וגולל אליו (scrollIntoView, ר' app.js), בלי זה הראש שלו נחבא מתחת
     ל-filter-bar הדביק -- הרווח הזה משאיר לו מקום להופיע מתחתיו, לא מתחתיו ומכוסה. */
  .layout.vertical .species-card{ scroll-margin-top:84px; }
  /* כשפותחים "פילטרים נוספים" במובייל, כל קבוצות הצ'יפים ביחד יכולות להיות גבוהות
     בהרבה מהמגירה (50% מגובה המסך) -- ובגלל שסרגל החיפוש דביק, זה נראה "קפוא" בלי
     שום דרך לגלול אליהם. גובה מוגבל + גלילה פנימית פותרים את זה. */
  .layout.vertical .filter-extra{ max-height:55vh; overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .layout.vertical .sheet-handle{
    display:flex;
    flex-direction:column;
    justify-content:center;
    align-items:center;
    gap:4px;
    flex-shrink:0;
    padding:9px 0 5px;
    cursor:grab;
    touch-action:none;
  }
  .layout.vertical .sheet-handle.dragging{ cursor:grabbing; }
  .layout.vertical .sheet-handle span{
    width:34px; height:3px; border-radius:3px;
    background:var(--ink-soft); opacity:.5;
  }
  .layout.vertical .sheet-handle:hover span,
  .layout.vertical .sheet-handle.dragging span{ opacity:.9; }


  /* padding:0/margin:0 מבטלים את המרווח הא-סימטרי המובנה של leaflet.css סביב
     leaflet-popup-content (13px/24px/13px/20px) -- זו הייתה סיבת המסגרת שנראתה
     רק בצד אחד: התמונה פיצתה עליו עם margin שלילי אחיד, שלא התאים למרווח הלא-אחיד. */
  .leaflet-popup-content-wrapper{ background:var(--surface); color:var(--ink); border-radius:0; overflow:hidden; padding:0; }
  /* Leaflet קובע width ב-inline style על leaflet-popup-content דרך JS (לפי maxWidth),
     ולא תמיד יוצא בדיוק 210px כמו ה-.popup הפנימי -- הפרש כזה משאיר רווח חשוף בצד ה-
     RTL "הסוגר" (שמאל), כי בלוק ברוחב קבוע בלי margin:auto נצמד לקצה ה"התחלה" (ימין).
     !important דורס את ה-inline style כדי שהם תמיד יתאימו בדיוק. */
  .leaflet-popup-content{ margin:0; width:210px !important; }
  .leaflet-popup-tip{ background:var(--surface); }
  /* leaflet.css קובע text-align:left על ה-wrapper -- דורס את זה כאן פעם אחת
     במקום על כל תת-אלמנט בנפרד (latin/meta כבר הצריכו לעקוף את זה ידנית עד עכשיו). */
  .popup{ width:210px; font-family:"Assistant",sans-serif; direction:rtl; text-align:right; }
  .popup img{ width:100%; height:130px; object-fit:cover; display:block; }
  .popup-body{ padding:10px 12px; }
  .popup h3{ font-size:16px; margin:0 0 3px; }
  .popup .latin{ font-style:italic; font-family:"IBM Plex Serif",Georgia,serif; font-size:11.5px; color:var(--accent); direction:ltr; text-align:right; margin:0 0 6px; }
  .popup .meta{ font-size:11px; color:var(--ink-soft); margin:0 0 8px; font-family:"IBM Plex Mono",monospace; direction:ltr; text-align:right; unicode-bidi:isolate; }
  .popup .popup-footer{ display:flex; align-items:center; justify-content:space-between; gap:8px; border-top:1px solid var(--line-strong); padding-top:6px; }
  .popup .obsnum{ font-size:13px; color:var(--pin); margin:0; font-weight:700; font-family:"IBM Plex Mono",monospace; }
  .popup .credit{ font-size:10px; color:var(--ink-soft); margin:0; }

  /* position:relative -- כדי ש-.species-modal-overlay (absolute) יתמקם ביחס לפאנל
     עצמו, לא לכל המסך (ר' למטה) */
  .panel{ position:relative; display:flex; flex-direction:column; min-height:0; min-width:0; background:var(--bg); direction:rtl; }

  .species-list{
    flex:1 1 auto;
    min-height:0;
    min-width:0;
    overflow-y:auto;
    padding:14px;
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(190px,1fr));
    gap:10px;
    align-content:start;
    align-items:start;
  }

  /* הכרטיס בגריד תמיד קומפקטי בלבד -- אין יותר מצב "מפורש" (.expanded) בתוך הגריד עצמו.
     לחיצה על מין פותחת מודאל נפרד (ר' .species-modal-overlay למטה, ו-openSpeciesModal
     ב-app.js) -- הגריד עצמו אף פעם לא משתנה, ולכן שאר הכרטיסים אף פעם לא זזים. */
  .species-card{
    background:var(--surface);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow);
    min-width:0;
    transition:box-shadow .2s ease, border-color .2s ease;
  }
  .species-card.active{ border-color:var(--accent); box-shadow:var(--shadow-lg); }

  .card-toggle{
    display:block;
    width:100%;
    border:none;
    background:none;
    padding:0;
    margin:0;
    cursor:pointer;
    text-align:inherit;
    font:inherit;
    color:inherit;
  }
  .card-toggle:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }

  .species-media{ position:relative; aspect-ratio:1/1; overflow:hidden; background:var(--surface-2); border-radius:var(--radius) var(--radius) 0 0; }
  .species-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* מספר התצפיות כתג בפינת התמונה (לא כקרדיט צילום -- זה מוצג רק במודאל, ליד כל תצפית) */
  .compact-count-badge{
    position:absolute; top:7px; inset-inline-end:7px;
    font-family:"IBM Plex Mono",monospace; font-size:12px; font-weight:700;
    min-width:20px; text-align:center; line-height:1.4;
    padding:2px 7px; border-radius:100px;
    background:rgba(27,36,30,.72); color:#F7F4E8;
  }

  .compact-overlay{ padding:8px 9px 9px; text-align:right; }
  .compact-overlay h3{ font-size:14px; color:var(--ink); line-height:1.25; }
  .compact-overlay .compact-latin{
    font-size:11.5px; margin:1px 0 0;
    font-style:italic; font-family:"IBM Plex Serif",Georgia,serif; color:var(--accent);
    direction:ltr; text-align:right; unicode-bidi:isolate;
  }
  .compact-overlay .compact-meta{
    font-size:10.5px;
    color:var(--ink-soft);
    font-family:"IBM Plex Mono",monospace;
    line-height:1.4;
    margin:2px 0 0;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
  }

  /* --- מודאל פרטי מין: שכבה מעל עם גלילה פנימית משלה (ר' index.html + openSpeciesModal
     ב-app.js) -- לא הרחבה בתוך הגריד, כדי שהרשימה מתחת לעולם לא תזוז. position:absolute
     ביחס ל-.panel (לא fixed ביחס לכל המסך) -- מוגבל לאזור הרשימה בלבד, כדי שהמפה תישאר
     גלויה וניתנת לאינטראקציה לצידו במקום שהמודאל יכסה את כל המסך. */
  /* ממלא את כל שטח האזור (לא כרטיס-פופאפ ממורכז עם padding סביבו) -- מרגיש כמו החלפת
     הרשימה בתצוגת פרטים, לא כמו חלונית צפה. אין רקע/padding על ה-overlay כי אין יותר
     "מחוץ לכרטיס" גלוי בתוך הפאנל -- קליק לסגירה על הרקע עדיין עובד דרך הכפתור/Escape/
     קליק על המפה (מחוץ לפאנל). */
  .species-modal-overlay{
    position:absolute; inset:0; z-index:1150;
    display:flex;
  }
  /* display:flex למעלה יכול לנצח בטעות [hidden]{display:none} של הדפדפן (אותה
     specificity tie שכבר תוקנה כמה פעמים באתר) -- כאן במפורש כדי שלא נחזור על זה. */
  .species-modal-overlay[hidden]{ display:none; }
  /* במובייל, inset:0 מכסה גם את ידית הגרירה של המגירה (.sheet-handle, מעל .sheet-body) --
     דוחפים את תחילת השכבה מתחתיה: 9+5px padding + 3+4+3px תוכן ≈ 24px. */
  .layout.vertical .species-modal-overlay{ top:24px; }
  .species-modal{
    background:var(--surface);
    width:100%; max-height:100%;
    overflow-y:auto; -webkit-overflow-scrolling:touch;
  }
  .species-detail-media{ position:relative; aspect-ratio:16/9; overflow:hidden; background:var(--surface-2); }
  .species-detail-media img{ width:100%; height:100%; object-fit:cover; display:block; }
  /* קרדיט צילום על תמונת הכיסוי הגדולה (לא על תמונות השורות הקטנות בטבלה -- שם זה
     חוזר להיות טקסט ב-obs-reporter, ר' obsRowHtml) -- סקרים כהה לקריאות מעל כל תמונה. */
  .species-detail-credit{
    position:absolute; inset-inline:0; bottom:0;
    background:linear-gradient(to top, rgba(10,12,8,.75), transparent);
    color:#fff; font-size:12px; padding:20px 12px 8px; text-align:end;
  }
  .species-detail-body{ display:flex; padding:14px 16px 16px; flex-direction:column; gap:10px; }
  .species-heading{ display:flex; align-items:flex-start; gap:10px; }
  .species-heading h3{ font-size:19px; display:inline; }
  .species-heading .latin{ margin:2px 0 0; font-style:italic; font-family:"IBM Plex Serif",Georgia,serif; font-size:12px; color:var(--accent); direction:ltr; text-align:right; unicode-bidi:isolate; }
  /* כפתור הסגירה יושב עכשיו על תמונת הכיסוי עצמה (פינה פיזית שמאלית-עליונה, לא
     לוגית-RTL -- זו מוסכמה ויזואלית של "כפתור סגירה בפינת התמונה", לא כיוון קריאה),
     גדול ובולט יותר מקודם (היה קטן וישב שקט ליד הכותרת). */
  .card-close{
    position:absolute; top:10px; left:10px; z-index:1;
    width:34px; height:34px;
    border-radius:50%;
    border:none;
    background:rgba(20,25,17,.65);
    color:#fff;
    cursor:pointer;
    font-size:16px;
    line-height:1;
    display:flex; align-items:center; justify-content:center;
  }
  .card-close:hover{ background:rgba(20,25,17,.85); }
  /* כפתור שיתוף/העתקת קישור -- אותו סגנון בדיוק כמו card-close, צמוד לו משמאל */
  .card-share{
    position:absolute; top:10px; left:52px; z-index:1;
    width:34px; height:34px;
    border-radius:50%;
    border:none;
    background:rgba(20,25,17,.65);
    color:#fff;
    cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .card-share:hover{ background:rgba(20,25,17,.85); }
  .card-share.copied{ background:var(--accent-strong); }
  .tag{
    align-self:flex-start;
    background:var(--accent-soft);
    color:var(--accent-strong);
    font-size:11px;
    padding:3px 10px;
    border-radius:100px;
    font-weight:700;
  }
  .desc{ margin:0; font-size:13.5px; color:var(--ink); opacity:.92; text-align:right; }

  .obs-block{ border-top:1px solid var(--line-strong); padding-top:10px; }
  /* obs-heading חוזר לגלוי -- עכשיו יושב באותה שורה עם toggle הרשימה/קרוסלה (ר' למטה),
     בלעדיו הכפתורים "צפים" לבד בלי שום קונטקסט למה הם. */
  .obs-block-header{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; }
  .obs-heading{ display:block; font-size:12.5px; font-weight:700; color:var(--ink-soft); margin:0; }
  .obs-heading-count{ color:var(--accent-strong); }

  /* --- toggle תצוגת תצפיות: רשימה / קרוסלה --- */
  .obs-view-toggle{ display:flex; gap:2px; border:1px solid var(--line-strong); border-radius:var(--radius); overflow:hidden; flex-shrink:0; }
  .obs-view-btn{
    background:var(--surface); border:none; color:var(--ink-soft);
    font-family:"Assistant",sans-serif; font-size:11px; font-weight:700;
    padding:5px 10px; cursor:pointer;
    display:flex; align-items:center; gap:5px;
  }
  .obs-view-btn.active{ background:var(--accent-strong); color:var(--surface); }
  .obs-view-btn:not(.active):hover{ background:var(--surface-2); }
  /* ברירת המחדל: רשימה גלויה, קרוסלה מוסתרת -- .view-carousel על .obs-block הופך את זה */
  .obs-block.view-carousel .obs-list{ display:none; }
  .obs-block.view-carousel .obs-carousel{ display:block; }

  /* --- קרוסלה: תמונה מלאה לא חתוכה (object-fit:contain) + כל פרטי הדיווח מתחתיה --- */
  .obs-carousel{ display:none; position:relative; }
  .obs-carousel-track{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory;
    scrollbar-width:none; -webkit-overflow-scrolling:touch;
    border:1px solid var(--line-strong);
  }
  .obs-carousel-track::-webkit-scrollbar{ display:none; }
  .obs-carousel-slide{ flex:0 0 100%; scroll-snap-align:start; min-width:0; }
  .obs-carousel-slide img{
    width:100%; max-height:min(50vh,360px); object-fit:contain;
    background:var(--surface-2); display:block;
  }
  .obs-carousel-info{ padding:10px 12px 12px; display:flex; flex-direction:column; gap:3px; }
  /* direction:ltr + unicode-bidi:isolate -- בלעדיהם "1 / 2" מוצג הפוך ("2 / 1") כי הוא
     יושב בתוך פסקה RTL (אותו דפוס כמו .obs-datetime/.popup .meta בשאר האתר). */
  .obs-carousel-counter{
    font-family:"IBM Plex Mono",monospace; font-size:11px; color:var(--accent-strong); font-weight:700;
    direction:ltr; text-align:right; unicode-bidi:isolate;
  }
  .obs-carousel-reporter-line{ font-family:"Assistant",sans-serif; font-size:13px; color:var(--ink); font-weight:700; }
  .obs-carousel-detail-line{ font-family:"Assistant",sans-serif; font-size:12.5px; color:var(--ink-soft); }
  .obs-carousel-nav{
    position:absolute; top:calc(min(50vh,360px) / 2); transform:translateY(-50%);
    width:32px; height:32px; border-radius:50%; border:1px solid var(--line-strong);
    background:rgba(247,244,232,.9); color:var(--ink); font-size:18px; line-height:1;
    cursor:pointer; display:flex; align-items:center; justify-content:center;
  }
  .obs-carousel-nav:hover{ background:var(--surface); }
  .obs-carousel-prev{ inset-inline-end:8px; }
  .obs-carousel-next{ inset-inline-start:8px; }

  .obs-list{ display:flex; flex-direction:column; gap:6px; }

  /* כרטיס פתוח: רשימת התצפיות כ"שורות טבלה" רחבות עם קו מפריד — מוגבל ל-.species-detail-body
     כדי לא לפגוע בשימושים האחרים של .obs-row (ניהול, הדיווחים שלי, מדווחים). */
  .species-detail-body .obs-list{ gap:0; }
  .species-detail-body .obs-row{
    gap:12px; padding:14px 4px; border-radius:0;
    border-bottom:1px solid var(--line-strong); cursor:pointer;
  }
  .species-detail-body .obs-row:last-child{ border-bottom:none; }
  .species-detail-body .obs-thumb{ width:64px; height:64px; border-radius:0; }
  /* שתי שורות, פונט האתר הרגיל (Assistant) -- לא IBM Plex Mono כמו קודם. שורה ראשונה
     "דווח ע"י X", שורה שנייה "בתאריך... בשעה... באזור..." כמשפט אחד רציף. */
  .species-detail-body .obs-meta{
    flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;
    font-family:"Assistant",sans-serif; font-size:13px;
  }
  .species-detail-body .obs-reporter-line{ color:var(--ink); font-weight:700; }
  .species-detail-body .obs-detail-line{ color:var(--ink-soft); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .species-detail-body .obs-reporter{
    flex-shrink:0; display:flex; align-items:center; gap:6px;
    font-size:13px; color:var(--ink);
  }
  .species-detail-body .obs-index{ color:var(--pin); font-weight:700; }
  .id-status-badge{ color:var(--accent-strong); font-weight:700; font-size:11px; }
  /* "וי" שני דהוי -- מסמן "אישור אחד מתוך שניים הושלם" (מאושר ע"י משתמש, מחכה למנהל) */
  .check-pending{ opacity:.35; }
  .obs-row{
    display:flex;
    align-items:center;
    gap:10px;
    padding:6px 8px;
    border-radius:10px;
    cursor:pointer;
    transition:background .15s ease;
  }
  .obs-row:hover, .obs-row:focus-visible, .obs-row.active{ background:var(--surface-2); outline:none; }
  .obs-row.active{ box-shadow:inset 0 0 0 1.5px var(--accent); }
  .obs-thumb{ width:40px; height:40px; border-radius:8px; overflow:hidden; flex-shrink:0; background:var(--surface-2); }
  .obs-thumb img{ width:100%; height:100%; object-fit:cover; display:block; }
  .obs-info{ display:flex; flex-direction:column; gap:1px; min-width:0; flex:1; }
  .obs-datetime{ display:flex; gap:8px; font-family:"IBM Plex Mono",monospace; font-size:12px; direction:ltr; unicode-bidi:isolate; }
  .obs-date{ color:var(--ink); font-weight:600; }
  .obs-time{ color:var(--ink-soft); }
  .obs-place{ font-size:12px; color:var(--ink-soft); }
  .obs-detail-line{ font-size:12px; color:var(--ink-soft); }
  .obs-species{ font-weight:700; color:var(--ink); }
  .obs-rank{ flex-shrink:0; width:28px; text-align:center; font-family:"IBM Plex Mono",monospace; font-size:12px; color:var(--ink-soft); }
  .obs-thumb.reporter-avatar{ border-radius:50%; }
  /* ---- reporters.html ---- */
  .reporter-row{ align-items:center; }
  .reporter-body{ display:flex; flex-direction:column; gap:5px; min-width:0; flex:1; }
  .reporter-name{ font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .reporter-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  /* שורת ניהול דיווחים: מבנה דו-שכבתי (תמונה+פרטים למעלה, פעולות למטה) כדי שעמודת הטקסט
     לא תיסחט לרוחב זעיר כשיש הרבה כפתורי פעולה — היא מקבלת שורה שלמה לעצמה. */
  #adminList .obs-row{ display:block; cursor:default; }
  #adminList .obs-row-main{ display:flex; align-items:center; gap:10px; }
  #adminList .obs-row-actions{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:8px; }
  #adminList .obs-thumb{ width:96px; height:96px; border-radius:10px; }
  #adminList .obs-thumb img{ cursor:zoom-in; }
  #reportsList .obs-thumb img{ cursor:zoom-in; }
  /* "הדיווחים שלי": תמונה גדולה יותר מברירת המחדל של .obs-thumb (40px), עם גביע (מין נדיר)
     בפינה הימנית-עליונה שלה במקום צמוד לשם המין, וקו הפרדה עדין מאוד בין שורות. */
  #reportsList .my-report-thumb{ width:72px; height:72px; border-radius:12px; position:relative; }
  #reportsList .thumb-trophy{
    position:absolute; bottom:-10px; right:-10px; font-size:39px; line-height:1;
    display:flex; align-items:center; justify-content:center;
    filter:drop-shadow(0 1px 3px rgba(0,0,0,.5));
  }
  #reportsList .obs-species{ font-weight:700; color:var(--ink); font-size:14px; }
  #reportsList .obs-species i{ font-weight:400; }
  #reportsList .obs-detail-line{ font-size:12.5px; color:var(--ink-soft); }
  #reportsList .my-report-row{ border-bottom:1px solid var(--line); }
  #reportsList .my-report-row:last-child{ border-bottom:none; }
  .admin-edit-form{ flex:1 1 100%; display:flex; flex-direction:column; gap:8px; padding:6px 0; }
  .admin-edit-map{ height:220px; margin-bottom:8px; border:1px solid var(--line-strong); }
  /* עריכת דיווח מחליפה את כל ה-innerHTML של השורה (ר' switchToEdit ב-admin-reports.js) --
     בלי זה התמונה שהייתה גלויה בתצוגה נעלמת ברגע שלוחצים עריכה. */
  .admin-edit-thumb{ display:block; max-width:220px; max-height:220px; border-radius:8px; margin-bottom:12px; cursor:zoom-in; }

  .bloom-section{
    border:1px solid var(--line-strong); border-radius:10px; padding:16px;
    margin-bottom:20px; background:var(--surface-2);
  }
  .bloom-config-grid{
    display:grid; grid-template-columns:repeat(auto-fill, minmax(200px,1fr)); gap:10px 14px; margin-top:10px;
  }
  .admin-search-row{ margin-bottom:14px; }
  .admin-search-row .search-input{ width:100%; box-sizing:border-box; }
  .admin-filter-tabs{ display:flex; flex-wrap:wrap; gap:8px; margin-bottom:12px; }
  .admin-filter-tab{
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:100px;
    padding:6px 16px; font-family:"Assistant",sans-serif; font-size:13px; font-weight:700;
    color:var(--ink-soft); cursor:pointer; white-space:nowrap; flex-shrink:0;
  }
  .admin-filter-tab.active{ background:var(--accent-strong); color:var(--surface); border-color:var(--accent-strong); }
  .admin-bulk-bar[hidden]{ display:none; }
  .admin-bulk-bar{ display:flex; align-items:center; gap:14px; margin-bottom:10px; font-size:13px; }
  .obs-index{
    font-family:"IBM Plex Mono",monospace;
    font-size:10.5px;
    color:var(--accent-strong);
    font-weight:700;
    flex-shrink:0;
  }

  .custom-pin{
    width:22px; height:22px;
    border-radius:50% 50% 50% 0;
    background:var(--pin);
    border:2px solid var(--surface);
    box-shadow:0 2px 6px rgba(0,0,0,.35), 0 0 0 1px rgba(0,0,0,.25);
    transform:rotate(-45deg);
    transition:transform .15s ease;
  }
  .custom-pin.active{ transform:rotate(-45deg) scale(1.3); }

  /* ---- filter bar ---- */
  .filter-bar{
    padding:8px 14px;
    display:flex;
    flex-direction:column;
    gap:10px;
    flex-shrink:0;
    border-bottom:1px solid var(--line-strong);
    background:var(--surface);
  }
  .search-input{
    width:100%;
    height:38px;
    padding:0 12px;
    border-radius:0;
    border:1px solid var(--line-strong);
    background:var(--bg);
    color:var(--ink);
    font-family:"Assistant",sans-serif;
    font-size:16px; /* iOS Safari auto-zooms into any input under 16px on focus -- this avoids it */
  }
  .search-input:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .search-input::placeholder{ color:var(--ink-soft); }

  .month-strip{ display:flex; gap:6px; overflow-x:auto; padding-bottom:2px; }
  .chip{
    flex-shrink:0;
    border:1px solid var(--line-strong);
    background:var(--bg);
    color:var(--ink);
    font-family:"IBM Plex Mono",monospace;
    font-size:11.5px;
    padding:4px 9px;
    border-radius:100px;
    cursor:pointer;
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  .chip:hover:not(:disabled){ border-color:var(--accent); }
  .chip.selected{ background:var(--accent); border-color:var(--accent); color:var(--surface); font-weight:700; }
  .chip:disabled{ opacity:.32; cursor:not-allowed; }
  .chip-month{ min-width:44px; text-align:center; }
  .chip-color{ display:inline-flex; align-items:center; gap:6px; }
  .chip-swatch{ width:10px; height:10px; border-radius:50%; display:inline-block; border:1px solid rgba(0,0,0,.2); flex-shrink:0; }

  .filter-top-row{ display:flex; align-items:center; gap:8px; }
  .filter-top-row .search-input{ flex:1; min-width:0; }
  .filter-top-row .filter-icon-btn{ height:38px; padding:0 11px; font-size:16px; gap:3px; }
  .filter-icon-btn.open{ background:var(--accent-soft); color:var(--accent-strong); border-color:var(--accent); }
  /* חץ קטן שמאותת שיש עוד תוכן מתחת לכפתור -- מסתובב כשהפאנל פתוח, כמו auth-toggle */
  .filter-chevron{ opacity:.6; transition:transform .15s ease; }
  .filter-icon-btn.open .filter-chevron{ transform:rotate(180deg); opacity:1; }

  /* מאוחד בין דסקטופ למובייל: שדה החיפוש וכפתור הפתיחה גלויים תמיד, ישירות אחד
     מתחת לשני; כל שאר שורת המסננים חי בתוך #filterExtra ומוצג/מוסתר כיחידה אחת */
  .filter-extra{ display:flex; flex-direction:column; gap:11px; }
  /* בלי זה, ברגע שלפילטר-אקסטרה יש max-height+overflow-y (מובייל), כל ילד עם overflow
     משלו (כמו month-strip, overflow-x:auto) מקבל min-height אוטומטי של 0 לפי ספק
     flexbox ומתכווץ עד כדי היעלמות במקום סתם לגלול עם השאר. */
  .filter-extra > *{ flex-shrink:0; }
  .filter-extra[hidden]{ display:none; }
  .filter-group{ display:flex; flex-direction:column; gap:5px; }
  .filter-group-label{
    font-family:"IBM Plex Mono",monospace;
    font-size:10.5px;
    text-transform:uppercase;
    letter-spacing:.05em;
    color:var(--ink-soft);
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .status-note{ text-transform:none; font-family:"Assistant",sans-serif; font-size:10.5px; opacity:.75; letter-spacing:0; }
  .filter-group-chips{ display:flex; flex-wrap:wrap; gap:6px; }

  .viewport-toggle{
    display:flex;
    align-items:center;
    gap:7px;
    font-size:12.5px;
    cursor:pointer;
    user-select:none;
    color:var(--ink);
  }
  .viewport-toggle[hidden]{ display:none; }
  /* תיבת סימון מעוצבת משלנו במקום עיצוב ברירת המחדל של הדפדפן -- ריבוע עם פינות
     מעוגלות בטון האתר, וסימן וי בעזרת border-trick (בלי תמונה/SVG נוסף). */
  .viewport-toggle input[type=checkbox]{
    appearance:none; -webkit-appearance:none;
    width:16px; height:16px; flex-shrink:0; margin:0; position:relative;
    border:1.5px solid var(--line-strong); border-radius:4px;
    background:var(--bg); cursor:pointer;
    transition:background .15s ease, border-color .15s ease;
  }
  .viewport-toggle input[type=checkbox]:hover{ border-color:var(--accent); }
  .viewport-toggle input[type=checkbox]:checked{ background:var(--accent); border-color:var(--accent); }
  .viewport-toggle input[type=checkbox]:checked::after{
    content:""; position:absolute; right:5px; top:2px; width:4px; height:8px;
    border:solid var(--surface); border-width:0 2px 2px 0; transform:rotate(35deg);
  }
  .viewport-toggle input[type=checkbox]:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

  .filter-footer{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:10px;
    font-size:12px;
    color:var(--ink-soft);
  }
  /* בתוך .filter-extra -- מוצג רק כשהפילטרים פתוחים, לא בשורת החיפוש הקבועה. */
  .results-count{ display:block; margin-bottom:10px; font-size:12.5px; color:var(--ink-soft); }
  .results-count b{ color:var(--accent-strong); font-family:"IBM Plex Mono",monospace; font-size:13px; }
  .clear-filters{
    background:none;
    border:none;
    color:var(--accent-strong);
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    text-decoration:underline;
    padding:0;
  }
  .clear-filters:disabled{ opacity:.4; cursor:not-allowed; text-decoration:none; }
  .filter-footer-actions{ display:flex; align-items:center; gap:14px; flex-shrink:0; }
  .close-filters{
    background:none;
    border:none;
    color:var(--ink-soft);
    font-weight:700;
    font-size:12px;
    cursor:pointer;
    text-decoration:underline;
    padding:0;
  }
  .close-filters:hover{ color:var(--ink); }

  .empty-state{
    display:none;
    grid-column:1 / -1;
    text-align:center;
    padding:44px 20px;
    color:var(--ink-soft);
    font-size:13.5px;
  }
  .empty-state.show{ display:block; }
  .species-card.hidden{ display:none; }
  .obs-row.hidden{ display:none; }

  .list-loading{
    grid-column:1 / -1;
    display:flex; align-items:center; justify-content:center; gap:10px;
    padding:60px 20px; color:var(--ink-soft); font-size:13.5px;
  }
  .list-loading .spinner{ width:22px; height:22px; border-width:2.5px; margin:0; }
  .list-sentinel{ grid-column:1 / -1; height:1px; }

  .family{ margin:1px 0 0; font-size:11.5px; color:var(--ink-soft); text-align:right; }
  .family-lat{ font-family:"IBM Plex Mono",monospace; direction:ltr; unicode-bidi:isolate; }
  .chip-row{ display:flex; flex-wrap:wrap; gap:6px; }
  .status-chip{ font-size:11px; padding:3px 10px; border-radius:100px; font-weight:700; background:var(--accent-soft); color:var(--accent-strong); }
  .color-swatch{
    position:absolute; top:8px; inset-inline-start:8px;
    width:13px; height:13px; border-radius:50%;
    border:2px solid rgba(255,255,255,.85);
    box-shadow:0 1px 4px rgba(0,0,0,.35);
  }
  .confidence-chip{ font-size:11px; padding:3px 10px; border-radius:100px; font-weight:700; }
  .confidence-chip.medium{ background:var(--warn-soft); color:var(--warn-strong); }
  .confidence-chip.low{ background:var(--warn2-soft); color:var(--warn2-strong); }

  @media (prefers-reduced-motion:reduce){ *{ transition:none !important; } }

  /* מובייל: יעד מגע מינימלי 44px לכל דבר שלוחצים עליו */
  @media (max-width:768px){
    button, .chip, .obs-row, .card-toggle{ min-height:var(--ctl-touch); }
    /* min-height:44px מהכלל הגלובלי למעלה הופך אותו למלבן עומד (26px רוחב, 44px גובה) --
       ריבוע 44x44 אמיתי שומר גם על יעד המגע וגם על הצורה. */
    .card-close, .card-share{ min-width:var(--ctl-touch); min-height:var(--ctl-touch); }
    /* עם יעד המגע המורחב (44px) card-share צריך לזוז ימינה קצת כדי לא לחפוף ל-card-close */
    .card-share{ left:58px; }
    /* אותה תקלה: min-height:44px הגלובלי דוחס את כפתור הפילטר לגובה שונה מתיבת החיפוש
       (38px) -- כאן הוא חוזר להיות זהה לה. */
    .filter-top-row .filter-icon-btn{ min-height:38px; }
    /* אותה תקלה שוב: 44px על כפתור-צ'יפ עגול (border-radius:100px) עם padding קטן יוצר
       "כדור" מנופח -- 30px נשאר יעד מגע סביר בלי להיראות מוגזם. */
    .chip{ min-height:30px; }
    /* ושוב: 44px על כפתור עגול 32x32 (obs-carousel-nav) הופך אותו לאובאל במקום עיגול. */
    .obs-carousel-nav{ min-width:32px; min-height:32px; }

    /* header: ברוחב מובייל stats מצטמצם (גם בגופן קטן יותר, ר' .stats למעלה עם
       min-width:0/overflow:hidden) במקום להיעלם -- ובלי שם המשתמש המלא תמיד גלוי
       (רק תמונה+חץ, נפתח ללחיצה) */
    .stats{ font-size:10px; gap:8px; }
    .auth-toggle{ display:block; }
    .auth-details{
      display:none; position:absolute; top:calc(100% + 6px); inset-inline-end:0;
      background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius);
      box-shadow:var(--shadow-lg); padding:10px 12px; z-index:1200; white-space:nowrap;
    }
    .auth-details:not([hidden]){ display:flex; }
  }

  /* ---- terms.html / privacy.html ---- */
  .legal-page h3.section-heading{ margin-top:22px; }
  .legal-page p, .legal-page li{ font-size:13.5px; line-height:1.7; }
  .legal-list{ margin:0 0 12px; padding-inline-start:20px; list-style:disc; }
  .legal-draft-notice{
    background:var(--warn2-soft); color:var(--warn2-strong); border-radius:10px;
    padding:12px 14px; font-size:12.5px; line-height:1.6; margin-bottom:20px;
  }

  /* ---- submit.html ---- */
  /* כפתור העלאת תמונה מעוצב -- input[type=file] עצמו מוסתר חזותית (visually-hidden-file,
     נשאר נגיש/פוקוסבילי) ומופעל ע"י ה-label דרך for=imageInput, כדי לא להיות תלויים
     בעיצוב ברירת המחדל השונה של הדפדפן/מערכת ההפעלה לכפתור "Choose File". */
  .upload-btn{
    display:flex; align-items:center; justify-content:center; gap:12px;
    width:fit-content; max-width:100%; margin:0 auto; box-sizing:border-box; cursor:pointer;
    background:var(--surface-2); border:1.5px dashed var(--line-strong); border-radius:var(--radius);
    padding:19px 30px; font-family:"Assistant",sans-serif; font-weight:700; font-size:17px; color:var(--ink);
    transition:background .15s ease, border-color .15s ease, color .15s ease;
  }
  /* אותה תקלת specificity חוזרת (ר' .field label[hidden] למטה): .field label{display:block}
     (0,1,1) מנצח את .upload-btn{display:flex} (0,1,0) בגלל ש-#uploadBtnLabel הוא <label>
     בתוך .field -- זה "עבד" בטעות עד עכשיו כי svg+span בזרימה inline רגילה יושבים זה
     לצד זה בכל מקרה, אבל ברגע שה-svg קיבל display:block (למטה) הם התחילו להיערם אנכית.
     .field label.upload-btn (0,2,1) מנצח ומחזיר בפועל display:flex. */
  .field label.upload-btn{ display:flex; }
  .upload-btn:hover{ background:var(--surface); border-color:var(--accent); color:var(--accent-strong); }
  /* svg יורש line-height/baseline של הטקסט הסובב כברירת מחדל (vertical-align:baseline),
     מה שנראה לא ממורכז מול הטקסט למרות align-items:center על ה-flex row -- display:block
     על ה-svg עצמו מוציא אותו מהשפעת baseline לגמרי. */
  .upload-btn svg{ display:block; flex-shrink:0; opacity:.75; }
  .upload-btn span{ line-height:1; }
  .visually-hidden-file{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px;
    overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }
  /* focus-visible על ה-input הנסתר (לניווט מקלדת) חייב לצייר על ה-label הנראה, לא על
     עצמו -- אחרת אין שום אינדיקציה חזותית לאיפה הפוקוס נמצא. ה-input קודם ל-label ב-HTML
     כדי ש-selector "+" (אח הבא) יוכל להגיע אליו. */
  #imageInput.visually-hidden-file:focus-visible + .upload-btn{ outline:2px solid var(--accent); outline-offset:2px; }
  .image-preview{
    display:block; margin-top:10px; max-width:100%; max-height:280px;
    border-radius:10px; border:1px solid var(--line-strong); cursor:zoom-in;
  }
  /* בלי זה, display:block דורס את ה-hidden attribute -- preview.hidden=true (ר'
     resetToNewReport ב-js/submit.js) הפסיק לעבוד ותמונה מדיווח קודם נשארה גלויה. */
  .image-preview[hidden]{ display:none; }
  /* קליק-להגדלה -- משותף לכל תמונה שמסמנים עם onImageLightboxClick, לא רק submit.html */
  .img-lightbox{
    position:fixed; inset:0; z-index:3000; background:rgba(10,12,8,.88);
    display:flex; align-items:center; justify-content:center; padding:24px; cursor:zoom-out;
  }
  .img-lightbox img{ max-width:100%; max-height:100%; border-radius:8px; display:block; }

  .page-subheader{ padding:10px clamp(14px,3vw,24px) 0; }
  .back-link{ font-size:12px; color:var(--accent-strong); text-decoration:none; font-weight:700; }
  .back-link:hover{ text-decoration:underline; }
  /* width:100% + min-width:0 דורסים את ברירת המחדל של פריט flex (.app הוא column flex): בלי
     width מפורש, stretch לא כופה בפועל את רוחב ה-container אם יש בפנים תוכן רחב ממנו (רשת
     500px ב-timeline.html) -- הפריט "מתמתח" לרוחב התוכן במקום לרוחב ה-flex container, ואז
     .timeline-wrap כבר לא מקבל הזדמנות לגלול כי ה-wrap כולו כבר רחב מהמסך. */
  .submit-wrap{ max-width:640px; width:100%; min-width:0; margin:0 auto; padding:24px 16px 60px; }
  .submit-wrap h2{ font-size:18px; margin:0 0 4px; }
  .submit-wrap .lede{ display:block; color:var(--ink-soft); font-size:14px; margin:0 0 20px; }
  .signin-gate{ text-align:center; padding:60px 20px; color:var(--ink-soft); }
  /* text-align:center על ההורה ממרכז רק inline/inline-block -- .auth-signin-btn הוא
     display:flex (קופסה ברמת בלוק, לא מושפעת מ-text-align), ולכן על מסך רחוב (דסקטופ,
     ל-.signin-gate יש מקום פנוי משני הצדדים) הכפתור נשאר צמוד לקצה במקום ממורכז. */
  .signin-gate .auth-signin-btn{ width:fit-content; margin:14px auto 0; }
  .field{ margin-bottom:16px; }
  /* #identifyResult (רצועת כרטיסי PlantNet בלבד -- לא כולל פס הודאות/"מידע נוסף", ר'
     #confidenceBarSlot ליד שדה המין) יושב בין הכותרת לשדה המין, לא כמו .field רגיל --
     אותו margin-bottom כדי לשמור על אותו קצב אנכי בין השדות. */
  #identifyResult:not(:empty){ margin-bottom:16px; }
  /* מין מקבל ריווח גדול יותר מתחתיו -- הכרטיס + קישור "עריכה" מרגישים צפופים מדי מול
     השדה הבא (משפחה) עם ה-16px הרגיל. */
  #sectionSpecies > .field:first-child{ margin-bottom:28px; }
  .field label{ display:block; font-family:"IBM Plex Mono",monospace; font-size:13px; text-transform:uppercase; letter-spacing:.05em; color:var(--ink-soft); margin-bottom:6px; }
  /* אותה תקלה שכבר תוקנה כמה פעמים באתר (ר' .icon-edit-btn/.menu-dropdown a/.species-modal-overlay):
     .field label{display:block} (0,1,1) מנצח את [hidden]{display:none} של הדפדפן (0,1,0)
     גם כשהוא נטען קודם -- כך ש-#changePhotoLabel/#uploadBtnLabel עם hidden עדיין נראים. */
  .field label[hidden]{ display:none; }
  .field input[type=text], .field input[type=number], .field input[type=datetime-local], .field select, .field textarea{
    width:100%; padding:11px 12px; border-radius:10px; border:1px solid var(--line-strong);
    background:var(--bg); color:var(--ink); font-family:"Assistant",sans-serif; font-size:16px;
    min-height:44px; box-sizing:border-box;
  }
  .field textarea{ resize:vertical; min-height:70px; }
  .field input:focus, .field select:focus, .field textarea:focus{ outline:2px solid var(--accent); outline-offset:1px; }
  .field-hint{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
  .field-hint.warn{ color:var(--warn2-strong); }

  /* ערך + כפתור עריכה באותה שורה, כפתור העריכה משמאל לערך (ולא כטקסט בשורה נפרדת מתחת) --
     ר' שדות מיקום/תאריך ב-submit.html. .field-hint בשורה הזו לא מקבל margin-top משלו, אחרת
     ה-flex item נדחף למטה ולא ממורכז מול כפתור העריכה. */
  .field-value-row{ display:flex; align-items:center; gap:8px; }
  /* הערך בכל שורה מקבל קו תחתון שנמתח על כל רוחב האזור הפנוי (flex:1), לא רק מתחת לטקסט
     עצמו -- כדי שיידמה לשדה טופס ולא לתיוג טקסט רגיל. מבטל את עיצוב הקופסה של .identify-card
     (רקע/מסגרת/padding) כשהוא בתוך שורת ערך, אבל שומר את מחלקות הפנים (idname/idlatin/idnotes). */
  .field-value-row .field-hint,
  .field-value-row .identify-card{
    flex:1; min-width:0; margin:0; padding:0 0 6px;
    border:none; border-bottom:1px solid var(--line-strong);
  }
  .field-value-row .identify-card{ background:none; border-radius:0; }
  /* ערך תאריך/מיקום בבולד -- הלייבל (field-row-label) נשאר רגיל, רק הערך עצמו מודגש */
  .field-value-row .field-hint{ font-weight:700; }
  /* שם המשפחה בבולד (כמו idname), לא מושתק כמו idnotes הרגיל */
  #familyLockedText{ font-weight:700; color:var(--ink); }
  /* לייבל "הערות" יתאים לפונט/גודל של שאר הלייבלים בטופס (Assistant, לא מונוספייס) --
     אותה עדיפות CSS כמו .field label (מחלקה+תג), סדר הטעינה מכריע. */
  .field label[for="notesInput"]{
    font-family:"Assistant",sans-serif; font-size:13px;
    text-transform:none; letter-spacing:normal;
  }
  /* תווית השדה (משפחה/תאריך ושעה/מיקום) יושבת באותה שורה כמו הערך, לא מעליו כשורה נפרדת --
     ולכן לא צריכה את הגופן המונוספייס/אותיות רישיות של .field label הרגיל, אלא בדיוק אותו
     גופן כמו הערך עצמו, כדי שלא יבלוט כסגנון שונה בתוך אותה שורה. */
  .field-row-label{
    flex-shrink:0; font-family:"Assistant",sans-serif; font-size:13px;
    color:var(--ink-soft); white-space:nowrap;
  }
  .icon-edit-btn{
    flex-shrink:0; width:32px; height:32px; padding:0; border-radius:8px;
    border:1px solid var(--line-strong); background:var(--surface-2);
    color:var(--accent-strong); font-size:14px; line-height:1; cursor:pointer;
    display:flex; align-items:center; justify-content:center;
  }
  .icon-edit-btn:hover{ background:var(--surface); }
  /* "חושבים שהזיהוי לא נכון" מתחת לפס הודאות (#confidenceBarSlot) שמעליו -- לא צמוד מדי
     אליו כמו שהיה כשהערך עצמו (תיבת המין) ישב ממש מעליו. */
  #speciesEditToggle{ margin-top:8px; }
  /* display:flex למעלה מנצח בטעות את [hidden]{display:none} של הדפדפן (אותה specificity,
     סדר טעינה מכריע) -- אותה תקלה שכבר נפתרה פעם אחת ב-.image-preview[hidden]. */
  .icon-edit-btn[hidden]{ display:none; }

  /* "מידע נוסף": הסברי קלוד/Gemini מוסתרים כברירת מחדל (ר' showResults ב-js/submit.js),
     הכותרת עצמה מיושרת לשמאל -- list-style:none + summary::after מחליפים את המשולש
     הדפדפני שממוקם תמיד בקצה ההתחלה (ימין ב-RTL), כדי שהחץ יישב ליד הטקסט בצד שמאל. */
  .ai-more-info{ margin-top:4px; }
  /* רווח מתחת רק כשפתוח -- כדי שהתוכן הפתוח לא יידבק לכפתור "חושבים שהזיהוי לא נכון?" שמגיע מיד אחריו */
  .ai-more-info[open]{ margin-bottom:14px; }
  .ai-more-info summary{
    cursor:pointer; list-style:none; text-align:left; font-size:13px; font-weight:700;
    color:var(--accent-strong); user-select:none;
  }
  .ai-more-info summary::-webkit-details-marker{ display:none; }
  .ai-more-info summary::after{ content:" ▾"; }
  .ai-more-info[open] summary::after{ content:" ▴"; }
  .ai-more-info .identify-card{ margin-top:8px; }

  .upload-stages{ list-style:none; margin:12px 0 0; padding:0; display:flex; flex-direction:column; gap:6px; }
  .upload-stages[hidden]{ display:none; }
  .upload-stages .stage{
    display:flex; align-items:center; gap:8px; font-size:14px; color:var(--ink-soft);
  }
  .upload-stages .stage-icon{
    display:inline-flex; align-items:center; justify-content:center;
    width:16px; height:16px; border-radius:50%; border:1.5px solid var(--line-strong);
    font-size:10px; flex-shrink:0;
  }
  .upload-stages .stage.active{ color:var(--ink); font-weight:700; }
  .upload-stages .stage.active .stage-icon{ border-color:var(--accent-strong); animation:stage-pulse 1s ease-in-out infinite; }
  .upload-stages .stage.done{ color:var(--ink-soft); }
  .upload-stages .stage.done .stage-icon{ border-color:var(--accent-strong); background:var(--accent-strong); color:var(--surface); }
  .upload-stages .stage.done .stage-icon::after{ content:"✓"; }
  .upload-stages .stage.error .stage-icon{ border-color:var(--warn2-strong); background:var(--warn2-soft); color:var(--warn2-strong); }
  .upload-stages .stage.error .stage-icon::after{ content:"✕"; }
  .stage-detail{ color:var(--warn2-strong); font-weight:700; }
  /* טיימר שניות רץ בזמן שהשלב "identify" פעיל -- נייטרלי, לא אדום כמו stage-detail
     (שמיועד להתראות, לא למונה זמן רגיל). ר' runStageIdentify ב-js/submit.js. */
  .stage-timer{ color:var(--ink-soft); font-family:"IBM Plex Mono",monospace; }
  .upload-stages .stage.error{ color:var(--warn2-strong); font-weight:700; }
  @keyframes stage-pulse{ 0%,100%{ opacity:1; } 50%{ opacity:.35; } }
  .stage-error{
    margin-top:8px; padding:9px 12px; border-radius:8px; background:var(--warn2-soft); color:var(--warn2-strong);
    font-size:13.5px; display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  }
  .stage-error[hidden]{ display:none; }

  .species-search-results{ max-height:220px; overflow-y:auto; margin-top:6px; }
  .species-search-item{
    display:block; width:100%; text-align:right; background:var(--surface-2); border:1px solid var(--line-strong);
    border-radius:8px; padding:8px 10px; margin-bottom:6px; cursor:pointer; font-family:"Assistant",sans-serif;
    font-size:13px; color:var(--ink);
  }
  .species-search-item:hover{ background:var(--surface); }
  .species-search-item.species-search-unlisted{ color:var(--ink-soft); }

  #pickMap{ height:224px; border-radius:10px; border:1px solid var(--line-strong); }
  .submit-btn{
    width:100%; padding:12px; min-height:46px; border-radius:10px; border:none;
    background:var(--accent-strong); color:var(--surface);
    font-family:"Assistant",sans-serif; font-weight:700; font-size:15px; cursor:pointer;
  }
  .submit-btn:hover{ opacity:.9; }
  .submit-btn:disabled{ opacity:.5; cursor:not-allowed; }
  .form-msg{ margin:12px 0; font-size:13px; padding:10px 12px; border-radius:8px; display:none; }
  .form-msg.show{ display:block; }
  .form-msg.error{ background:var(--warn2-soft); color:var(--warn2-strong); }
  .form-msg.success{ background:var(--warn-soft); color:var(--warn-strong); }
  .spinner{
    display:inline-block; width:13px; height:13px; margin-inline-start:4px;
    border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
    vertical-align:middle; animation:spin .7s linear infinite;
  }
  @media (prefers-reduced-motion:reduce){ .spinner{ animation:none; } }
  @keyframes spin{ to{ transform:rotate(360deg); } }

  .secondary-btn{
    background:var(--surface-2); border:1px solid var(--line-strong); border-radius:8px;
    padding:10px 14px; min-height:44px; font-family:"Assistant",sans-serif; font-size:13.5px; font-weight:700;
    color:var(--ink); cursor:pointer;
  }
  .secondary-btn:hover{ background:var(--surface); }
  .secondary-btn:disabled{ opacity:.5; cursor:not-allowed; }
  #backToMapLink:not([hidden]){ display:inline-block; }

  #imagePreview:not([hidden]){ display:block; }
  .idactions[hidden]{ display:none; }
  .idactions{ display:flex; gap:8px; margin-top:10px; flex-wrap:wrap; }
  .idactions button{
    flex:1; min-width:90px; min-height:40px; padding:8px 10px; border-radius:8px;
    font-family:"Assistant",sans-serif; font-size:13px; font-weight:700; cursor:pointer;
  }
  .idactions .accept-btn{ background:var(--ok-soft); color:var(--ok-strong); border:1px solid var(--ok-strong); font-weight:700; }
  .idactions .reject-btn{ background:var(--warn2-soft); color:var(--warn2-strong); border:1px solid var(--warn2-strong); }

  .text-btn{
    background:none; border:none; padding:4px 0; margin-top:4px;
    font-family:"Assistant",sans-serif; font-size:13px; font-weight:700;
    color:var(--accent-strong); cursor:pointer; text-decoration:underline;
  }
  .text-btn:hover{ opacity:.75; }
  .admin-delete-btn{ color:var(--warn-strong); }

  .inline-link{
    background:none; border:none; padding:0; margin:0; display:inline;
    font-family:"Assistant",sans-serif; font-size:inherit; font-weight:700;
    color:var(--accent-strong); cursor:pointer; text-decoration:underline;
  }
  .inline-link:hover{ opacity:.75; }

  .section-divider{ border:none; border-top:1px solid var(--line-strong); margin:20px 0; }
  .section-heading{ font-size:17px; margin:0 0 12px; color:var(--ink); }
  .build-version{
    display:inline-block; font-family:"IBM Plex Mono",monospace; font-size:11px; font-weight:700;
    color:var(--warn-strong); background:var(--warn-soft); border-radius:6px; padding:2px 7px; margin-right:8px; vertical-align:middle;
  }
  .identify-card{
    margin-top:10px; padding:12px 14px; border-radius:10px;
    background:var(--surface-2); border:1px solid var(--line-strong); font-size:15px;
  }
  .identify-card .idname{ font-weight:700; }
  .identify-card .idlatin{ font-style:italic; font-family:"IBM Plex Serif",Georgia,serif; font-size:13.5px; color:var(--accent); }
  .identify-card .idnotes{ font-size:13px; color:var(--ink-soft); margin-top:4px; }
  /* פס ודאות (קלוד) מעל רצועת מועמדי PlantNet -- ר' plantnetOnlyHtml ב-js/submit.js.
     הlabel קודם ב-DOM כדי שיישב בצד ימין ב-RTL, ה-track אחריו וממלא את השאר בצד שמאל. */
  /* יושב ב-#confidenceBarSlot, צמוד לתיבת המין (זיהוי) שמעליו -- לא ה-margin-top הגדול (20px)
     שהיה מתאים כשהוא ישב מתחת לרצועת כרטיסי PlantNet שלמה. */
  .confidence-bar-row{ display:flex; align-items:center; gap:10px; margin-top:8px; }
  .confidence-bar-label{ font-size:13px; font-weight:700; white-space:nowrap; flex-shrink:0; }
  .confidence-bar-label .src{ color:var(--ink-soft); font-weight:400; font-family:"IBM Plex Mono",monospace; }
  .confidence-bar-track{ flex:1; height:8px; border-radius:100px; background:var(--surface-2); overflow:hidden; }
  .confidence-bar-fill{ display:block; height:100%; background:var(--accent-strong); border-radius:100px; }

  /* רצועת קלפי מועמדי PlantNet, גוללת אופקית -- min-width:0 כאן מונע את אותה תקלת
     flex-item שתיקנו ב-.submit-wrap (ר' timeline.html): בלי זה הרצועה מסרבת להצטמצם
     מתחת לרוחב התוכן שלה ונגלשת מהמסך במקום לגלול בתוך עצמה. */
  .plantnet-carousel{ display:flex; gap:10px; overflow-x:auto; padding:10px 2px 4px; margin-top:6px; min-width:0; }
  .plantnet-card{ flex:0 0 auto; width:120px; }
  .plantnet-card-img-wrap{
    position:relative; width:120px; height:120px; border-radius:10px; overflow:hidden;
    border:1px solid var(--line-strong); background:var(--surface-2);
  }
  .plantnet-card-img-wrap img{ width:100%; height:100%; object-fit:cover; display:block; }
  .plantnet-card-pct{
    position:absolute; inset-inline-start:0; inset-inline-end:0; bottom:0;
    background:linear-gradient(to top, rgba(10,12,8,.75), transparent);
    color:#fff; font-weight:700; font-size:14px; text-align:center; padding:16px 4px 6px;
  }
  .plantnet-card-name-he{
    margin-top:6px; font-size:12.5px; font-weight:700; text-align:center; color:var(--ink);
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .plantnet-card-name{
    margin-top:6px; font-size:11.5px; text-align:center; color:var(--ink-soft);
    font-style:italic; font-family:"IBM Plex Serif",Georgia,serif;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  }
  .plantnet-card-name-he + .plantnet-card-name{ margin-top:0; }
  .plantnet-card.is-yours .plantnet-card-name{
    font-style:normal; font-family:"Assistant",sans-serif; color:var(--ink); font-weight:700;
  }

  /* ---- timeline.html ---- */
  .timeline-controls{ display:flex; flex-wrap:wrap; gap:8px; margin:16px 0 20px; }
  .timeline-year-chip.selected{ background:var(--accent); border-color:var(--accent); color:var(--surface); font-weight:700; }
  .timeline-wrap{ overflow-x:auto; padding-bottom:6px; }
  /* אותה תבנית עמודות בדיוק לכותרת ולכל שורה, כדי שהחודשים ייושרו -- 140px לשם המין +
     12 עמודות חודש שוות. RTL הופך את סדר ההצבה, אז עמודת השם (הראשונה בתבנית) נשארת
     בקצה הימני כמו שאר האתר, והחודשים נקראים ינואר(ימין)->דצמבר(שמאל) בסדר טבעי. */
  .timeline-months, .timeline-row{
    display:grid; grid-template-columns:140px repeat(12, minmax(26px,1fr));
    gap:3px; align-items:center; min-width:500px;
  }
  .timeline-months{ margin-bottom:6px; }
  .timeline-month-label{
    font-family:"IBM Plex Mono",monospace; font-size:10.5px; color:var(--ink-soft);
    text-align:center;
  }
  .timeline-row{ padding:3px 0; }
  .timeline-row:hover{ background:var(--surface-2); }
  /* עמודת שם המין קפואה בגלילה אופקית -- ה"פינה" (תא ריק בכותרת) קפואה יחד איתה כדי
     שהכותרת לא תפרק מהשורות כשגוללים. רקע מלא כדי שתאי החודשים שגוללים מתחתיה לא ייראו. */
  .timeline-species, .timeline-corner{
    position:sticky; inset-inline-start:0; z-index:2; background:var(--bg);
  }
  .timeline-species{
    font-size:12.5px; font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    padding-inline-end:8px;
  }
  .timeline-row:hover .timeline-species{ background:var(--surface-2); }
  .timeline-cell{
    height:18px; border-radius:4px; background:var(--surface-2); border:1px solid var(--line);
  }
  .timeline-cell.filled{ background:var(--accent); border-color:var(--accent-strong); }