/* PelegSoft -ניהול/עריכה: כפתור מפתח, מסך כניסה שקוף ופאנל, מותאם לפלטת האתר */

/* ---- פאנל הניהול אינו "האתר" ----
   מד "גודל הטקסט באתר" (‎--body-scale‎, טאב טיפוגרפיה) יושב כ-‎font-size‎ על
   ה-‎body‎, ולכן הוא גרר איתו גם את כלי הניהול: **נמדד** ‎panelFontSize: 19.2px‎
   במקום 16 אחרי הגדרה של 120%, והתוצאה הייתה פאנל מנופח שהתוכן גולש ממנו -
   "שברת את הניהול". הפאנל הוא UI ולא תוכן, ולכן הוא מאפס את המשתנה וקובע
   בסיס משלו.

   הרשימה כוללת גם את החלונות שיושבים על ה-‎body‎ (חלון עריכת פרויקט/עמוד,
   דיאלוגים, סרגל התמונה, תפריט הקליק-ימני, ההצעות והטוסט) -הם יצאו מהפאנל
   כדי לברוח מה-stacking context שלו, ולכן אינם יורשים ממנו את האיפוס.
   ‎:where()‎ כדי שה-specificity יישאר 0 ולא ידרוס כללים קיימים. */
:where(#adminPanel, #adminKey, .admin-overlay, .admin-dialog-overlay, .admin-toast,
       .pf-zoom-overlay, .pg-win-overlay, .wysi-ctxmenu, #wysiImgTools, .pf-tagsug,
       .admin-dock-hint) {
    --body-scale: 1;
    font-size: 1rem;
}

/* ---- כפתור המפתח (תחתית) ---- */
.admin-key {
    position: fixed;
    /* מיקום ברירת מחדל -נדרס לפי מחלקת הגוף akey-bl/br/tl/tr (נבחר בפאנל הניהול) */
    bottom: max(1rem, env(safe-area-inset-bottom));
    left: max(1rem, env(safe-area-inset-left)); /* צד שמאל פיזי (גם ב-RTL), מכבד safe-area */
    z-index: 120;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    border: 2px solid rgba(255, 231, 163, 0.6);
    background: linear-gradient(180deg, #9a6a3c, var(--c-wood) 55%, var(--c-wood-deep));
    color: #fff;
    font-size: 0.95rem;
    cursor: pointer;
    box-shadow: 0 4px 0 var(--c-wood-deep), 0 8px 18px rgba(13, 62, 120, 0.4), inset 0 1px 0 rgba(255, 231, 163, 0.5);
    opacity: var(--akey-opacity, 0.1); /* שקיפות במנוחה -נקבעת בפאנל; מופיע מלא ב-hover */
    transition: opacity 0.15s ease, transform 0.15s ease;
}
/* מיקום הכפתור לפי בחירת המנהל (כל פינה מאפסת את הצד הנגדי) */
body.akey-bl .admin-key { bottom: max(1rem, env(safe-area-inset-bottom)); top: auto; left: max(1rem, env(safe-area-inset-left)); right: auto; }
body.akey-br .admin-key { bottom: max(1rem, env(safe-area-inset-bottom)); top: auto; right: max(1rem, env(safe-area-inset-right)); left: auto; }
body.akey-tl .admin-key { top: max(1rem, env(safe-area-inset-top)); bottom: auto; left: max(1rem, env(safe-area-inset-left)); right: auto; }
body.akey-tr .admin-key { top: max(1rem, env(safe-area-inset-top)); bottom: auto; right: max(1rem, env(safe-area-inset-right)); left: auto; }
/* מוסתר לגמרי (ניתן להחזיר עם ?admin=1) */
body.akey-off .admin-key { display: none; }
.admin-key:hover,
.admin-key.is-authed:hover { opacity: 1; transform: translateY(-2px) rotate(-8deg); }
.admin-key:active { transform: translateY(1px); box-shadow: 0 2px 0 var(--c-wood-deep), 0 4px 10px rgba(13, 62, 120, 0.4); }
/* מחובר -טבעת ירוקה נקייה על היקף העיגול (box-shadow עוקב את border-radius) */
.admin-key.is-authed {
    opacity: var(--akey-opacity, 0.1); /* גם במצב מחובר -אותה שקיפות עד hover */
    box-shadow:
        0 0 0 3px #4bd07a,
        0 0 10px 2px rgba(75, 208, 122, 0.55),
        0 4px 0 var(--c-wood-deep),
        0 8px 18px rgba(13, 62, 120, 0.4),
        inset 0 1px 0 rgba(255, 231, 163, 0.5);
}

/* ---- שכבת-על משותפת (כניסה + פאנל) -שקופה מעל האתר ---- */
.admin-overlay {
    position: fixed;
    inset: 0;
    z-index: 130;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: rgba(13, 62, 120, 0.34);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    animation: admin-fade 0.25s ease both;
}
.admin-overlay[hidden] { display: none; }

@keyframes admin-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes admin-rise { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: none; } }

/* ---- כרטיס כניסה ---- */
.admin-login {
    position: relative;
    width: min(24rem, 94vw);
    background: rgba(255, 246, 230, 0.9);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid rgba(211, 154, 26, 0.55);
    border-radius: 20px;
    padding: 2rem 1.6rem 1.6rem;
    box-shadow: 0 20px 50px rgba(13, 62, 120, 0.45), inset 0 1px 0 #fff;
    text-align: center;
    animation: admin-rise 0.3s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.admin-login-crest {
    font-size: 2.2rem;
    width: 3.4rem; height: 3.4rem; line-height: 3.4rem;
    margin: -3.4rem auto 0.6rem;
    background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold-deep));
    border: 3px solid var(--c-paper);
    border-radius: 50%;
    box-shadow: 0 6px 16px rgba(13, 62, 120, 0.4);
}
.admin-login-title {
    color: var(--c-night);
    font-size: 1.5rem;
    margin-bottom: 1.2rem;
}
.admin-field {
    display: block;
    text-align: start;
    margin-bottom: 0.9rem;
}
.admin-field span {
    display: block;
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--c-wood-deep);
    margin-bottom: 0.3rem;
}
.admin-field input {
    width: 100%;
    padding: 0.65rem 0.85rem;
    border: 2px solid rgba(211, 154, 26, 0.45);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.85);
    font-family: inherit;
    font-size: 1rem;
    color: var(--c-ink);
    direction: ltr;      /* שם משתמש/סיסמה -יישור לשמאל */
    text-align: left;
}
.admin-field input:focus {
    outline: none;
    border-color: var(--c-gold-deep);
    box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.35);
}
.admin-remember {
    font-size: 0.8rem;
    color: #6b5334;
    margin: 0.2rem 0 0.9rem;
}
.admin-error {
    background: rgba(224, 69, 46, 0.14);
    color: #a5301c;
    border: 1px solid rgba(224, 69, 46, 0.4);
    border-radius: 10px;
    padding: 0.5rem 0.7rem;
    font-size: 0.9rem;
    margin-bottom: 0.9rem;
}
.admin-submit {
    width: 100%;
    padding: 0.75rem;
    border: none;
    border-radius: 14px;
    cursor: pointer;
    font-family: inherit;
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--c-wood-deep);
    background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-deep));
    box-shadow: 0 4px 0 var(--c-gold-deep), 0 8px 18px rgba(13, 62, 120, 0.35), inset 0 1px 0 #fff;
    transition: transform 0.15s, filter 0.2s;
}
.admin-submit:hover { filter: brightness(1.06); transform: translateY(-1px); }
.admin-submit:active { transform: translateY(2px); box-shadow: 0 1px 0 var(--c-gold-deep); }

/* ---- כניסה עם Google: מפריד "או" + מיכל הכפתור של GSI ---- */
.admin-login-or {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin: 1.1rem 0 0.9rem;
    color: rgba(90, 56, 30, 0.6);
    font-size: 0.82rem;
    font-weight: 700;
}
.admin-login-or::before,
.admin-login-or::after {
    content: "";
    flex: 1;
    height: 1px;
    background: rgba(211, 154, 26, 0.4);
}
.admin-google-slot {
    display: flex;
    justify-content: center;
    min-height: 40px;   /* שומר מקום לכפתור עד שהוא נטען, שהמסך לא יקפוץ */
}
.admin-google-hint {
    margin-top: 0.6rem;
    font-size: 0.78rem;
    color: rgba(90, 56, 30, 0.7);
    text-align: center;
}
/* ---- סעיף "כניסה עם Google" בפאנל: פריסה אנכית אחידה ----
   admin-uform הוא grid של auto-fit שסידר את השדות זה לצד זה בגדלים שונים
   ודחס את ההערה לתא צר. כאן הכל בעמודה אחת, מלא-רוחב וברור. */
.google-auth-form { display: flex; flex-direction: column; gap: 0.9rem; margin-top: 1rem; }
.google-auth-form .admin-ufield { width: 100%; }
.google-auth-form .admin-ubtn { align-self: stretch; margin: 0; }
.google-auth-form .google-auth-link {
    align-self: stretch;
    text-align: center;
    text-decoration: none;
    margin: 0;
}
.google-auth-form .admin-note { margin: 0; }

/* ---- כפתור סגירה (✕) בפינה ---- */
.admin-x {
    position: absolute;
    top: 0.6rem;
    inset-inline-end: 0.7rem;
    width: 1.9rem; height: 1.9rem;
    border: none;
    border-radius: 50%;
    background: rgba(13, 62, 120, 0.12);
    color: var(--c-night);
    font-size: 0.9rem;
    cursor: pointer;
    transition: background 0.15s;
}
.admin-x:hover { background: rgba(224, 69, 46, 0.25); }

/* ---- פאנל הניהול -חלון צף, נגרר, ניתן להקטנה/הגדלה, ללא BLUR מתחת ---- */
.admin-panel {
    position: fixed;
    top: 4.5rem;
    left: 3rem;
    z-index: 125;
    width: min(62rem, 95vw);
    height: min(42rem, 88vh);
    min-width: 20rem;
    min-height: 8rem;
    max-width: 98vw;
    /* ---- ‎dvh‎ ולא ‎vh‎ (חוק המובייל) ----
       באייפון ‎vh‎ נמדד מול ה-viewport ה**גדול** -כלומר בלי סרגלי ספארי -
       ולכן דיאלוג ב-‎94vh‎ גבוה מהאזור הנראה בפועל כשהסרגלים מוצגים, והקצוות
       שלו (הכותרת עם ה-‎✕‎ למעלה, הפעולות למטה) יוצאים מהמסך. זה בדיוק
       הדיווח "לא ניתן לסגור או לעדכן בחלון הזה במובייל".
       ‎dvh‎ עוקב אחרי הסרגלים, ושורת ה-‎vh‎ שלפניו נשארת כנפילה לאחור
       לדפדפן שאינו מכיר אותו. */
    max-height: 94vh;
    max-height: 94dvh;
    display: flex;
    flex-direction: column;
    /* שקוף-למחצה אך בלי blur -צריך לראות את השינויים החיים באתר.
       ‎--admin-see‎ (0..1) הוא מד השקיפות שבסרגל העליון: 1 = אטום כרגיל.

       **בכוונה זו שקיפות של הרקעים ולא ‎opacity‎ על הפאנל.** שני טעמים:
       (א) הטקסט והפקדים נשארים חדים וקריאים בכל רמה -אחרת בשקיפות נמוכה הפאנל
           הופך לבלתי-שמיש בדיוק כשרוצים לעבוד מולו;
       (ב) **כל חלונות האישור יושבים בתוך ‎#adminPanel‎**, ו-‎opacity‎ על ההורה היה
           מעמעם גם אותם -וילד לא יכול להיות אטום יותר מהורהו. */
    background: rgba(13, 62, 120, calc(0.86 * var(--admin-see, 1)));
    border: 2px solid rgba(255, 231, 163, 0.45);
    border-radius: 18px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.5), inset 0 1px 0 rgba(255, 255, 255, 0.15);
    color: #fff;
    /* clip (ולא hidden!) -אלמנט overflow:hidden עדיין ניתן לגלילה תכנותית, וכשלוחצים
       על checkbox/שדה בחלק התחתון הדפדפן היה גולל את הפאנל עצמו (scrollIntoView/focus)
       במקום את גוף הפאנל, ודוחף את התוכן מעלה -"התחתית נחתכת לרקע כחול". clip מונע
       גלילה כלשהי של הפאנל; רק .admin-panel-body נגלל, כמתוכנן. */
    overflow: clip;
    animation: admin-rise 0.28s cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.admin-panel[hidden] { display: none; }

/* ---- ידיות שינוי-גודל מכל כיוון (8 ידיות: צדדים + פינות) ---- */
.admin-resize { position: absolute; z-index: 5; }
.admin-resize-n  { top: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
.admin-resize-s  { bottom: 0; left: 12px; right: 12px; height: 6px; cursor: ns-resize; }
.admin-resize-e  { right: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.admin-resize-w  { left: 0; top: 12px; bottom: 12px; width: 6px; cursor: ew-resize; }
.admin-resize-ne { top: 0; right: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.admin-resize-sw { bottom: 0; left: 0; width: 14px; height: 14px; cursor: nesw-resize; }
.admin-resize-nw { top: 0; left: 0; width: 14px; height: 14px; cursor: nwse-resize; }
.admin-resize-se { bottom: 0; right: 0; width: 14px; height: 14px; cursor: nwse-resize; }
/* אין שינוי-גודל במצב מוגדל */
.admin-panel.maximized .admin-resize { display: none; }

/* ---- הצמדה לצד (dock) ----
   גרירת החלון אל קצה המסך מצמידה אותו לצד לכל הגובה, וגרירה מהסרגל העליון
   משחררת. שני הצדדים **פיזיים** (`right`/`left` ולא `inset-inline`): המשתמש
   ביקש "ימין" ו"שמאל" כפי שהוא רואה אותם, וב-RTL הלוגי היה מתהפך.

   `!important` על המידות בלבד, כי ה-JS כותב `left/top/width/height` כ-inline
   בכל גרירה ושינוי-גודל. הוא כן מנקה אותם בהצמדה, וזו רשת ביטחון למקרה
   שמשהו כותב אחריה (שחזור גודל, `clampToView` של חלון שהוקטן). */
.admin-panel.docked {
    top: 0 !important;
    height: 100vh !important;
    max-height: none;
    width: var(--admin-dock-w, 26rem) !important;
    max-width: 92vw;
    border-radius: 0;
    /* הצל נשאר רק בצד הפנימי -חלון מוצמד אינו מרחף */
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.45);
}
.admin-panel.dock-right { right: 0 !important; left: auto !important; border-right: 0; }
.admin-panel.dock-left  { left: 0 !important;  right: auto !important; border-left: 0; }
/* הידיות שאינן על הצד הפנימי מיותרות: הגובה נעול והצד החיצוני צמוד למסך */
.admin-panel.docked .admin-resize { display: none; }
.admin-panel.dock-right .admin-resize-w,
.admin-panel.dock-left  .admin-resize-e { display: block; width: 8px; top: 0; bottom: 0; }
/* הכותרת נשארת ידית גרירה גם במצב מוצמד -משם משחררים */
.admin-panel.docked .admin-panel-head { cursor: grab; }
/* הכפתור מסמן שהחלון מוצמד. כשהוא פעיל הוא מודגש, אחרת הוא כפתור חלון רגיל -
   כך הוא גם החיווי וגם הדרך לצאת מהמצב. */
/* האייקון הוא SVG (ראה ‎dockIcon‎ ב-JS): תו חץ היה מתהפך ב-RTL */
.admin-dock-btn { display: inline-grid; place-items: center; }
.admin-dock-btn svg { display: block; }
.admin-panel.docked .admin-dock-btn {
    background: rgba(255, 209, 90, 0.28);
    border-color: rgba(255, 231, 163, 0.6);
    color: var(--c-gold-light, #ffe7a3);
}

/* ---- הסרגל העליון במצב מוצמד ----
   החלון צר, והסרגל נושא מסלול מיקום, מד שקיפות, "התנתק" ושלושה כפתורים.
   בלי הכיווץ הזה הם נדחקו זה בזה והכותרת נחתכה באמצע מילה. */
.admin-panel.docked .admin-panel-head { padding-inline: 0.5rem; gap: 0.35rem; }
.admin-panel.docked .admin-opacity { flex: 0 1 auto; min-width: 0; }
/* מד השקיפות מצטמצם ראשון -הוא כוונון ולא ניווט. מתחת ל-52px הוא כבר לא
   ניתן לגרירה מדויקת, ולכן זו הרצפה. */
.admin-panel.docked .admin-opacity input[type="range"] { width: clamp(52px, 9vw, 120px); }
/* הערך באחוזים יורד לפני הפס עצמו: הוא חוזר על מה שהידית כבר מראה */
.admin-panel.docked .admin-opacity-val { display: none; }
/* "התנתק" הוא הפעולה הכי נדירה כאן, והמילה ארוכה ביחס לסרגל צר */
.admin-panel.docked #adminLogout { padding-inline: 0.5rem; font-size: 0.72rem; }
/* מסלול המיקום מצטמצם ונחתך בשלוש נקודות במקום לדחוף את הכפתורים החוצה */
.admin-panel.docked .admin-crumb {
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* **בפאנל צר מד השקיפות יורד לגמרי.** נמדד: ב-340px הוא דחף את ה-‎✕‎ ‎11px‎
   מחוץ לסרגל, וב-300px כבר ‎31px‎ -כלומר הכפתור שסוגר את הפאנל יצא מהמסך.
   הכיווץ ההדרגתי מספיק עד 420px ולא מעבר, ולכן כאן זה או-הוא-או-הם: השקיפות
   היא כוונון שאפשר לעשות במצב צף, כפתור הסגירה אינו ויתור.

   **המחלקה נקבעת ב-JS ולא ב-‎@container‎.** ‎container-type: inline-size‎ גורר
   ‎contain: layout‎, וזה הופך את הפאנל ל-containing block של כל ילד
   ‎position: fixed‎ שבתוכו -וכל חלונות האישור יושבים בתוך ‎#adminPanel‎. אותה
   מלכודת בדיוק שכבר עלתה כאן בכרטיס הפרויקט ובסרגל התמונה. */
.admin-panel.is-narrow .admin-opacity { display: none; }
.admin-panel.is-narrow #adminLogout { padding-inline: 0.4rem; }
@media (max-width: 640px) {
    /* בסרגל צר במיוחד נשארים הכותרת והכפתורים בלבד */
    .admin-panel.docked .admin-opacity { display: none; }
}

/* התצוגה המקדימה של ההצמדה: רצועה שמראה איפה החלון ינחת, בזמן הגרירה בלבד.
   `pointer-events: none` -היא מצוירת מתחת לסמן שגורר, ואסור שתחטוף אירועים. */
.admin-dock-hint {
    position: fixed; top: 0; bottom: 0; z-index: 124;
    width: var(--admin-dock-w, 26rem); max-width: 92vw;
    pointer-events: none;
    background: rgba(255, 209, 90, 0.16);
    border: 2px dashed rgba(255, 231, 163, 0.75);
    box-shadow: inset 0 0 60px rgba(255, 209, 90, 0.2);
    opacity: 0; transition: opacity 0.12s;
}
.admin-dock-hint.is-on { opacity: 1; }
.admin-dock-hint[data-side="right"] { right: 0; left: auto; }
.admin-dock-hint[data-side="left"]  { left: 0; right: auto; }
@media (prefers-reduced-motion: reduce) { .admin-dock-hint { transition: none; } }

/* הגדלה -כמעט מסך מלא */
.admin-panel.maximized {
    inset: 1rem !important;
    width: auto !important;
    height: auto !important;
    max-width: none;
    max-height: none;
    resize: none;
}

.admin-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.7rem 1rem;
    background: linear-gradient(180deg, rgba(13, 62, 120, calc(0.7 * var(--admin-see, 1))), rgba(13, 62, 120, calc(0.45 * var(--admin-see, 1))));
    border-bottom: 1px solid rgba(255, 231, 163, 0.3);
    cursor: move; /* אזור הגרירה */
    user-select: none;
    flex: 0 0 auto;
}
.admin-panel-title {
    font-family: 'Suez One', serif;
    font-size: 1.1rem;
    color: var(--c-gold-light);
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.4);
    pointer-events: none;
}
/* ---- כותרת: שם הפאנל + מסלול המיקום הנוכחי ---- */
.admin-panel-where {
    display: flex;
    align-items: baseline;
    gap: 0.55rem;
    min-width: 0;          /* מאפשר לכיווץ ול-ellipsis לעבוד בתוך ה-flex */
    pointer-events: none;  /* הכותרת היא אזור הגרירה */
}
.admin-crumb {
    display: flex;
    align-items: baseline;
    gap: 0.35rem;
    min-width: 0;
    font-size: 0.82rem;
    white-space: nowrap;
    overflow: hidden;
    /* קו מפריד -בלעדיו שם הפאנל והמסלול נקראים כמשפט אחד */
    padding-inline-start: 0.6rem;
    border-inline-start: 1px solid rgba(255, 231, 163, 0.28);
}
.admin-crumb:empty { border-inline-start: 0; padding-inline-start: 0; }
.admin-crumb-part {
    color: rgba(234, 242, 255, 0.72);
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 12rem;
}
/* הפריט האחרון = איפה אנחנו באמת; מודגש כדי שייקרא במבט */
.admin-crumb-part.is-cur {
    color: var(--c-gold-light, #ffe7a3);
    font-weight: 700;
    background: rgba(255, 231, 163, 0.14);
    border: 1px solid rgba(255, 231, 163, 0.3);
    border-radius: 999px;
    padding: 0.1rem 0.55rem;
}
.admin-crumb-sep { color: rgba(255, 231, 163, 0.5); font-size: 0.9em; }
/* בפאנל צר המסלול יורד לשורה משלו מתחת לכותרת במקום להצטמצם לפריט האחרון -
   המסלול המלא הוא כל הערך שלו, וכפתורי החלון נשארים במקומם מימין. */
@media (max-width: 640px) {
    .admin-panel-where {
        flex: 1 1 auto;
        flex-direction: column;
        align-items: flex-start;
        gap: 0.1rem;
    }
    /* **שם הפאנל יורד בטלפון, והמסלול נשאר.** משנוסף כפתור המגירה נשארו לכותרת
       95px, היא נשברה לשתי שורות ו**הסרגל גדל מ-77px ל-105px** (נמדד) -כלומר
       שורת כותרת שלמה נגרעה מאזור העריכה בשביל טקסט קבוע.
       "🛠️ ניהול האתר" הוא גם הדבר הפחות אינפורמטיבי בסרגל: הפאנל מזוהה
       בבירור, ואילו המסלול (📊 מבט כללי) הוא מה שמשתנה ומה שצריך לדעת.
       אין כאן הפסד נגישות -ל-‎#adminPanel‎ יש ‎role="dialog"‎ עם
       ‎aria-label="פאנל ניהול"‎, שהוא מה שקורא המסך מכריז עליו. */
    .admin-panel-title { display: none; }
    /* **וגם המסלול יורד** (בקשת המשתמש). אחרי שכפתור המגירה, מד השקיפות
       וארבעת כפתורי החלון לקחו את שלהם, נשארו למסלול ‎~95px‎ -ובהם "טאב ›
       תצוגה › פריט" נחתך לשתיים-שלוש אותיות לכל חלק ("📄 ‹ ע... ‹ 1..."),
       כלומר טקסט שאי אפשר לקרוא ממנו את המיקום ובכל זאת תופס את השורה.
       ‎.admin-panel-where‎ נשאר כמרווח, ולכן כפתורי החלון אינם זזים.
       בטאבלט ובמחשב המסלול נשאר כפי שהוא -שם יש לו רוחב. */
    .admin-crumb { display: none; }
}

.admin-win-controls { display: flex; align-items: center; gap: 0.4rem; }

/* ---- מד השקיפות + קו ההפרדה שלפניו ---- */
.admin-head-sep {
    width: 1px; align-self: stretch;
    margin: 0.25rem 0.45rem;                  /* הרווח משני הצדדים */
    background: rgba(255, 231, 163, 0.3);
}
.admin-opacity {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 231, 163, 0.25);
    cursor: pointer;
}
.admin-opacity-icon { font-size: 0.9rem; color: var(--c-gold-light, #ffe7a3); line-height: 1; }
.admin-opacity input[type="range"] {
    width: 5.5rem; height: 1rem; cursor: pointer;
    accent-color: var(--c-gold, #ffd15a);
    background: none;
}
.admin-opacity-val {
    min-width: 2.6rem; text-align: center;
    font-size: 0.72rem; font-weight: 700; font-variant-numeric: tabular-nums;
    color: rgba(255, 246, 230, 0.85);
}
@media (max-width: 640px) {
    /* בסרגל צר אין מקום למחוון מלא -נשאר האייקון והערך, והמחוון מתקצר */
    .admin-opacity { padding: 0.1rem 0.35rem; gap: 0.25rem; }
    .admin-opacity input[type="range"] { width: 3.2rem; }
    .admin-opacity-val { display: none; }
    .admin-head-sep { margin: 0.25rem 0.25rem; }
}
.admin-mini {
    font-family: inherit;
    font-size: 0.85rem;
    cursor: pointer;
    color: #fff;
    background: rgba(255, 231, 163, 0.16);
    border: 1px solid rgba(255, 231, 163, 0.4);
    border-radius: 10px;
    padding: 0.35rem 0.7rem;
    transition: background 0.15s;
}
.admin-mini:hover { background: rgba(255, 231, 163, 0.3); }
.admin-win-btn {
    width: 1.7rem; height: 1.7rem;
    display: flex; align-items: center; justify-content: center;
    font-family: inherit; font-size: 0.9rem; line-height: 1;
    cursor: pointer; color: #fff;
    background: rgba(255, 231, 163, 0.14);
    border: 1px solid rgba(255, 231, 163, 0.35);
    border-radius: 8px;
    transition: background 0.15s;
}
.admin-win-btn:hover { background: rgba(255, 231, 163, 0.3); }
.admin-win-close:hover { background: rgba(224, 69, 46, 0.55); border-color: rgba(224, 69, 46, 0.7); }
/* כפתור המזעור: אייקון SVG ולא תו -תווי יוניקוד של "מזעור" (‎-‎ / ‎_‎) נראים
   כמקף באמצע שורת כפתורים, וגודלם משתנה בין גופנים. החיצים פנימה הם ההופכי
   המדויק של אייקון ההגדלה שבחלונות העריכה, כלומר אותה שפה חזותית. */
.admin-win-min svg { width: 0.95rem; height: 0.95rem; display: block; }
.admin-win-min:hover { background: rgba(255, 231, 163, 0.34); }

/* ---- הבועה של הפאנל הממוזער ----
   אותו דפוס של ‎.pf-zoom-bubble‎ (מזעור חלונות העריכה), בשני הבדלים מכוונים:
   (א) היא **אחות של הפאנל** ולא ילד שלו -הפאנל עצמו יורד ב-‎hidden‎;
   (ב) היא מעוגנת ב-‎inset-inline-start‎ (= הצד הפיזי הנגדי ב-RTL), כדי שלא
       תיפול על כפתור המפתח ועל בועת חלון העריכה, ששניהם בצד השני.
   ‎makeBubbleDraggable‎ מנקה את שני ה-‎inset-inline-*‎ לפני שהוא כותב ‎left/top‎. */
.admin-mini-bubble {
    /* ‎touch-action: none‎ -אחרת הדפדפן גולל את העמוד במקום לגרור את הבועה */
    touch-action: none; user-select: none; -webkit-user-select: none;
    position: fixed; inset-inline-start: 1.1rem; inset-block-end: 1.1rem;
    z-index: 130;                       /* מעל הפאנל (125), מתחת לחלונות העריכה (135) */
    width: 3.2rem; height: 3.2rem; border-radius: 50%; cursor: pointer;
    display: grid; place-items: center;
    font-size: 1.35rem; line-height: 1;
    color: #0b2244; background: linear-gradient(180deg, #ffe7a3, var(--c-gold, #ffd15a));
    border: 2px solid var(--c-wood-deep, #4a2f12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    animation: pf-bubble-in 0.18s ease-out;
}
.admin-mini-bubble[hidden] { display: none; }
.admin-mini-bubble:hover { filter: brightness(1.06); }
.admin-mini-bubble:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .admin-mini-bubble { animation: none; } }
/* מובייל: מעל כפתור הנגישות/המפתח המרחפים ולא עליהם */
@media (max-width: 640px) {
    .admin-mini-bubble { inset-block-end: 5rem; width: 3rem; height: 3rem; }
}

/* אזור ראשי: תפריט צד + תוכן */
/* ---- חיפוש בכל ההגדרות ----
   שורה משלו מתחת לכותרת: הפאנל צר, ודחיסת השדה לתוך ה-head היה מכווץ אותו
   לכלום ברגע שמזערו את החלון. */
.admin-search-bar {
    flex: 0 0 auto;
    padding: 0.6rem 0.9rem;
    background: rgba(13, 62, 120, calc(0.45 * var(--admin-see, 1)));
    border-bottom: 1px solid rgba(255, 231, 163, 0.2);
}
.admin-search { position: relative; display: flex; align-items: center; }
.admin-search-icon {
    position: absolute;
    inset-inline-start: 0.7rem;
    font-size: 0.9rem;
    opacity: 0.75;
    pointer-events: none;
    line-height: 1;
}
.admin-search-input {
    font-family: inherit;
    font-size: 0.92rem;
    width: 100%;
    color: #fff;
    background: rgba(6, 32, 66, 0.55);
    border: 1px solid rgba(255, 231, 163, 0.32);
    border-radius: 999px;
    padding: 0.5rem 2.3rem 0.5rem 2.3rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.admin-search-input::placeholder { color: rgba(234, 242, 255, 0.55); }
.admin-search-input:focus {
    outline: none;
    background: rgba(6, 32, 66, 0.75);
    border-color: rgba(255, 231, 163, 0.7);
    box-shadow: 0 0 0 3px rgba(255, 231, 163, 0.16);
}
/* ה-X המובנה של type=search מיותר -יש כפתור ניקוי משלנו */
.admin-search-input::-webkit-search-cancel-button { display: none; }
.admin-search-clear {
    position: absolute;
    inset-inline-end: 0.45rem;
    width: 1.6rem;
    height: 1.6rem;
    display: grid;
    place-items: center;
    font-size: 0.8rem;
    cursor: pointer;
    color: #eaf2ff;
    background: rgba(255, 255, 255, 0.1);
    border: 0;
    border-radius: 50%;
    transition: background 0.15s;
}
.admin-search-clear:hover { background: rgba(255, 231, 163, 0.28); }

.admin-search-results {
    position: absolute;
    top: calc(100% + 0.45rem);
    inset-inline: 0;
    z-index: 20;
    max-height: min(24rem, 55vh);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: rgba(9, 44, 88, 0.98);
    border: 1px solid rgba(255, 231, 163, 0.4);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.5);
    padding: 0.35rem;
    /* חוק: כל סרגל גלילה באתר ובניהול מעוצב */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 231, 163, 0.4) transparent;
}
.admin-search-results::-webkit-scrollbar { width: 9px; }
.admin-search-results::-webkit-scrollbar-track { background: transparent; }
.admin-search-results::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.35);
    border-radius: 999px;
    border: 2px solid transparent;
    background-clip: content-box;
}
.admin-search-results::-webkit-scrollbar-thumb:hover { background: rgba(255, 231, 163, 0.6); background-clip: content-box; }

.admin-sr-item {
    display: block;
    width: 100%;
    text-align: start;
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    color: #eaf2ff;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.45rem 0.6rem;
    transition: background 0.12s, border-color 0.12s;
}
.admin-sr-item:hover,
.admin-sr-item.is-cur {
    background: rgba(255, 231, 163, 0.16);
    border-color: rgba(255, 231, 163, 0.4);
}
.admin-sr-label { display: block; line-height: 1.35; }
/* תוצאה שהיא **דבר** ולא הגדרה: עמוד או פרויקט. התג אומר מראש שהלחיצה
   *פותחת* אותו, ולא גוללת אל פקד בפאנל -שתי פעולות שונות באותה רשימה. */
.admin-sr-kind {
    display: inline-block; vertical-align: 0.05em;
    margin-inline-end: 0.4rem; padding: 0.05rem 0.42rem;
    font-size: 0.68rem; font-weight: 800; line-height: 1.5;
    border-radius: 999px;
    color: #0d3e78; background: var(--c-gold-light, #ffe7a3);
}
.admin-sr-item.is-entity { border-inline-start: 2px solid rgba(255, 231, 163, 0.45); }
.admin-sr-label mark {
    color: #0d3e78;
    background: var(--c-gold-light, #ffe7a3);
    border-radius: 3px;
    padding: 0 0.15em;
}
.admin-sr-path {
    display: block;
    font-size: 0.76rem;
    opacity: 0.68;
    margin-top: 0.12rem;
}
.admin-sr-empty {
    padding: 0.7rem 0.6rem;
    font-size: 0.88rem;
    opacity: 0.75;
    text-align: center;
}

/* הדגשת ההגדרה שקפצנו אליה -פועם פעמיים ונרגע, כדי שהעין תמצא אותה מיד */
@keyframes admin-sr-flash {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 231, 163, 0); }
    25%, 75% { box-shadow: 0 0 0 4px rgba(255, 231, 163, 0.55); }
}
.admin-sr-hit {
    border-radius: 10px;
    animation: admin-sr-flash 1.5s ease 2;
}
@media (prefers-reduced-motion: reduce) {
    .admin-sr-hit { animation: none; box-shadow: 0 0 0 3px rgba(255, 231, 163, 0.55); }
}

/* מובייל/פאנל צר: השדה נשאר שמיש ורשימת התוצאות לא בורחת מהמסך */
@media (max-width: 640px) {
    .admin-search-bar { padding: 0.5rem 0.6rem; }
    .admin-search-input { font-size: 16px; }  /* מתחת ל-16px ספארי מזמזם זום בפוקוס */
    .admin-search-results { max-height: 50vh; }
}

.admin-panel-main {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
}

/* ---- מפריד גרירה בין התפריט לגוף הפאנל ----
   רצועה דקה עם אזור-תפיסה רחב יותר (‎::before‎ שגולש החוצה): קו של 1px קשה לתפוס
   בעכבר ובלתי-אפשרי באצבע. ‎touch-action: none‎ נדרש כאן -בלעדיו הדפדפן גולל
   במקום לגרור. */
.admin-nav-resize {
    flex: 0 0 auto;
    position: relative;
    width: 2px;
    cursor: col-resize;
    touch-action: none;
    background: rgba(255, 231, 163, 0.18);
    transition: background 0.15s;
}
/* אזור התפיסה נשאר רחב גם כשהפס דק -אחרת אי אפשר לתפוס אותו בעכבר, ובאצבע
   בכלל לא. הרוחב הזה בלתי-נראה ואינו תופס מקום בפריסה. */
.admin-nav-resize::before {
    content: ''; position: absolute; inset-block: 0; inset-inline: -7px;
}
.admin-nav-resize:hover,
.admin-nav-resize.is-active { background: var(--c-gold, #ffd15a); }
.admin-nav-resize:focus-visible { outline: 2px solid var(--c-gold-light, #ffe7a3); outline-offset: -2px; }
@media (max-width: 640px) {
    /* בעמודה צרה ממילא אין מה לחלק -המפריד יורד ומפנה מקום לתוכן */
    .admin-nav-resize { display: none; }
}
.admin-nav {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.8rem 0.6rem;
    background: rgba(13, 62, 120, calc(0.5 * var(--admin-see, 1)));
    border-inline-end: 1px solid rgba(255, 231, 163, 0.2);
    /* הרוחב נשלט במפריד הגרירה (‎--admin-nav-w‎). ‎flex: 0 0 auto‎ + ‎width‎ מפורש
       כדי שהתפריט לא יימתח או יתכווץ מעצמו כשגוף הפאנל משתנה. */
    /* **‎11rem‎ ולא ‎8.5rem‎** (בקשת המשתמש: "אם אין מקום תרחיב את התפריט").
       ב-‎136px‎ העלה הוא ‎108px‎, ומתוכו התמונה הממוזערת ‎34px‎ -לשם נשארו
       ‎66px‎ והוא נחתך ב**כל** עלה שנמדד. משנשמרה עמודה של ‎1.95rem‎
       לכפתורים, ברוחב הישן היו נשארים לשם ‎~37px‎. */
    width: var(--admin-nav-w, 11rem);
    min-width: 6rem;
    max-width: 60%;
    /* כשעץ העמודים פתוח התפריט גבוה מגובה הפאנל -> גלילה משלו (במקום להיחתך).
       min-height:0 מאפשר לו להתכווץ בתוך שורת ה-flex ולגלול. סקרול מעוצב (חוק). */
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    /* חוק: כל סרגל גלילה מעוצב. כאן היו רק מאפייני ה-standard, ובלי כללי
       ‎::-webkit-scrollbar‎ הדפדפן צייר פס מערכת עבה עם חצים -רחב יותר מהמפריד
       שלידו, ושניהם יחד יצרו רצועה עבה. */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 231, 163, 0.35) transparent;
}
.admin-nav::-webkit-scrollbar { width: 6px; }
.admin-nav::-webkit-scrollbar-track { background: transparent; }
.admin-nav::-webkit-scrollbar-button { display: none; height: 0; }   /* בלי חצים */
.admin-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.3);
    border-radius: 999px;
}
.admin-nav:hover::-webkit-scrollbar-thumb { background: rgba(255, 231, 163, 0.5); }
.admin-nav::-webkit-scrollbar { width: 8px; }
.admin-nav::-webkit-scrollbar-track { background: transparent; }
.admin-nav::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.35);
    border: 2px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
    transition: background 0.2s;
}
.admin-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 231, 163, 0.6); background-clip: padding-box; }
.admin-nav-item {
    font-family: inherit;
    font-size: 0.92rem;
    text-align: start;
    cursor: pointer;
    color: #eaf2ff;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 10px;
    padding: 0.55rem 0.8rem;
    transition: background 0.15s, border-color 0.15s;
    white-space: nowrap;
}
/* ---- ענף נפתח בתפריט הצד (עמודים כעץ) ----
   כפתור אחד לשתי הפעולות: מעבר לטאב וגם פתיחה/סגירה של העץ. התפריט צר
   מכדי להחזיק כפתור נפרד לחץ. */
.admin-nav-branch { display: flex; flex-direction: column; }
.admin-nav-item-branch {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.4rem;
}
.admin-nav-item-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
/* החץ מעוצב ככפתור של ממש (ריבוע מסגרת + רקע) ולא כתו קטן ודהוי בשולי השורה:
   הוא הרמז היחיד לכך שהשורה נפתחת, ובגרסה הקודמת (0.75rem, opacity 0.75)
   הוא נקרא כקישוט. */
.admin-nav-chev {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 1.2rem;
    height: 1.2rem;
    font-size: 0.55rem;
    line-height: 1;
    color: var(--c-gold-light, #ffe7a3);
    background: rgba(255, 231, 163, 0.14);
    border: 1px solid rgba(255, 231, 163, 0.32);
    border-radius: 7px;
    transition: transform 0.22s ease, background 0.15s, border-color 0.15s;
}
.admin-nav-item-branch:hover .admin-nav-chev,
.admin-nav-item-branch:focus-visible .admin-nav-chev {
    background: rgba(255, 231, 163, 0.28);
    border-color: rgba(255, 231, 163, 0.55);
}
.admin-nav-branch.is-open .admin-nav-chev {
    transform: rotate(180deg);
    background: rgba(255, 231, 163, 0.3);
    border-color: rgba(255, 231, 163, 0.6);
}

/* ---- פתיחת ענף: הגובה קופץ, והתנועה בקומפוזיטור ----
   **הדיווח: "לוקח שלוש שניות לפתוח את התפריט, וזה גם מקומית."** שני
   גורמים, ושניהם פריסה:

   1. ‎height‎ מחייב לקרוא ‎scrollHeight‎ מ-JS, וזו **פריסה מאולצת של כל
      המסמך** -הדפדפן חייב לחשב **עכשיו** את הפאנל (23,651 אלמנטים) ואת
      הסצנה שמאחוריו. נמדד ‎657ms‎ לקריאה בודדת (x6), ויש כזאת **בכל
      פתיחה, בכל סגירה ובכל בנייה מחדש**. שנייה שלמה שבה המסך קפוא, עוד
      לפני שהאנימציה התחילה.
   2. וגם ‎grid-template-rows‎ **אינה** פתרון כשמנפישים אותה: היא תכונת
      פריסה, כלומר חישוב מחדש **בכל פריים**. נמדד כרגרסיה של ממש -
      "הגדרות מערכת", שקודם נפתח מיידית, הורע מ-‎1179ms‎ ל-‎2274ms‎.

   לכן ‎0fr/1fr‎ משמש כאן כ**מצב** ולא כאנימציה: הגובה קופץ (חישוב פריסה
   אחד, בלי מדידה מ-JS), והתנועה שהעין רואה רצה על ‎opacity‎ ו-‎translate‎
   בלבד. אותו כלל שכבר תועד כאן על המגילות ועל הפאן.

   ‎contain‎ נוסה תחילה ונפסל **במדידה** -‎contain: layout‎ על התפריט, על
   העץ ועל גוף הפאנל נתן ‎610-739ms‎ מול ‎657‎ בבסיס, כלומר אפס: הפריסה
   המאולצת אינה נובעת מהיקף החישוב אלא מעצם הכפייה. וכך גם
   ‎content-visibility‎ על גופי הסעיפים, שאמנם הוזיל את ‎showTab‎ פי ארבעה
   אבל **שינה גבהים** (שורת פרויקט ‎360 → 443px‎) -ואופטימיזציה שמשנה
   מראה יוצאת.

   נמדד מקצה לקצה (x6, כל הסעיפים פתוחים, מטאב כבד): עמודים
   ‎1886 → 194ms‎, תיק עבודות ‎2704 → 419ms‎, יועץ ‎1067 → 178ms‎, הגדרות
   מערכת ‎1179 → 886ms‎; ובלי האטה ‎324 → 23‎ ו-‎336 → 32‎. */
.admin-nav-tree {
    display: grid;
    grid-template-rows: 1fr;
    overflow: hidden;
    margin-top: 0.25rem;
    /* קו שדרה של העץ -בצד ההתחלה (RTL: ימין) */
    border-inline-start: 0 none;
    /* ---- גאומטריית הענפים ממקור אחד ----
       שלושה ערכים היו מפוזרים בשלושה כללים (ריפוד העץ, מיקום השדרה, אורך
       הקו), וכל שינוי באחד הרחיק את הקו מהעלה. היום הכול נגזר משני משתנים:
       ‎--tree-spine‎ = איפה עומד קו השדרה, ‎--tree-gap‎ = המרחק ממנו אל העלה,
       שהוא גם **בדיוק** אורך הקו המחבר. */
    --tree-spine: 0.14rem;
    --tree-gap: 0.22rem;
    padding-inline-start: calc(var(--tree-spine) + var(--tree-gap) + 2px);
    position: relative;
}
/* **‎display: grid‎ גובר על ‎hidden‎** -בפעם השישית בפרויקט הזה. המרקאפ
   נשלח מהשרת עם ‎hidden‎ (מצב סגור למי שה-JS עדיין לא רץ אצלו), וכלל
   ‎display‎ הוא (0,1,0) שמנצח את ‎display: none‎ של גיליון ברירת המחדל -
   כלומר **כל ארבעת העצים היו נפרסים** מהפריים הראשון ועד ש-‎navTreePane‎
   ממיר אותם. הבזק אמיתי, ובדיוק הסוג שכבר תועד כאן על הטירה ב-F5. */
.admin-nav-tree[hidden] { display: none; }

/* העוטף הפנימי: ‎0fr‎ מכווץ **שורה**, ולכן כל הילדים חייבים אב משותף.
   ‎min-height: 0‎ הוא התנאי לכיווץ -בלעדיו השורה לא יורדת מתחת לגובה
   התוכן ו-‎0fr‎ אינו עושה דבר.

   התנועה הנראית יושבת כאן, וכולה בקומפוזיטור. ‎translate‎ כנכס עצמאי
   ולא ‎transform‎ -כך הוא אינו מתנגש בשום ‎transform‎ עתידי על העלים,
   אותו תרגיל של ההליכה מול הקפיצה בדמויות. */
.admin-nav-tree-in {
    min-height: 0;
    overflow: hidden;
    transition: opacity 0.2s ease, translate 0.2s ease, visibility 0.2s;
}

/* מצב סגור. ‎visibility‎ ולא ‎hidden‎/‎display‎: הוא מוציא את הכפתורים
   מסדר ה-Tab ומקוראי מסך **וגם** מונפש (כל ערך ביניים ממופה ל-‎visible‎,
   ולכן התוכן נשאר גלוי לכל אורך הסגירה ונעלם רק בסופה). ‎display: none‎
   היה מחייב להסירו ואז לכפות ‎reflow‎ -בדיוק הפריסה המאולצת שכל התיקון
   הזה בא לבטל. */
.admin-nav-tree.is-shut { grid-template-rows: 0fr; margin-top: 0; }
.admin-nav-tree.is-shut > .admin-nav-tree-in {
    opacity: 0;
    translate: 0 -0.4rem;
    visibility: hidden;
}
/* קו השדרה נעלם יחד עם העץ -אחרת נשאר קו זהב תלוי מתחת לכפתור סגור */
.admin-nav-tree::before { transition: opacity 0.2s ease; }
.admin-nav-tree.is-shut::before { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
    .admin-nav-tree-in, .admin-nav-tree::before { transition: none; }
    .admin-nav-tree.is-shut > .admin-nav-tree-in { translate: none; }
}

.admin-nav-tree::before {
    content: '';
    position: absolute;
    inset-block: 0.15rem;
    inset-inline-start: var(--tree-spine, 0.2rem);
    width: 2px;
    border-radius: 2px;
    background: linear-gradient(180deg, rgba(255, 231, 163, 0.5), rgba(255, 231, 163, 0.08));
}
.admin-nav-tree-cap {
    font-size: 0.72rem;
    letter-spacing: 0.02em;
    color: rgba(255, 231, 163, 0.75);
    padding: 0.35rem 0.4rem 0.2rem;
}
.admin-nav-tree-msg {
    font-size: 0.78rem;
    opacity: 0.65;
    padding: 0.3rem 0.4rem 0.45rem;
}
/* ---- שלד טעינה של העץ ----
   מחליף את "טוען…": טקסט לבדו נקרא כתקלה בזמן שהרשימה בדרך, ושלוש-ארבע
   שורות פועמות ברוחב הפריטים אומרות "רשימה נטענת". הגובה תואם לגובה עלה
   אמיתי, כדי שההחלפה לא תקפיץ את התפריט.
   הבהוב ‎opacity‎ בלבד -רץ בקומפוזיטור, ולכן אינו עולה דבר גם כשהתפריט
   נפתח באנימציה. */
/* ---- חיווי טעינה על החץ עצמו ----
   **בקשת המשתמש: אנימציית טעינה קטנה בזמן הפתיחה.** היא יושבת על החץ ולא
   בתוך העץ, משתי סיבות: העין כבר על הכפתור שנלחץ, והחיווי אינו מזיז דבר
   בפריסה -שלד שנכנס לעץ מוסיף גובה, וגובה שמשתנה באמצע האנימציה מקפיץ
   את התפריט (אותה מלכודת שכבר תועדה כאן על שתי אנימציות רצופות).

   הטבעת מצוירת ב-‎::after‎ ולא מחליפה את תו החץ: החץ ממשיך להסתובב ל-180°
   כרגיל, ושתי התנועות אינן מתחרות (‎rotate‎ על ההורה, ‎transform‎ על
   הפסאודו -שני נכסים נפרדים, בדיוק כמו בהליכה ובקפיצה של הדמויות).
   ‎transform‎ בלבד, כלומר קומפוזיטור: החיווי אינו יכול להוסיף עומס לחוט
   הראשי דווקא ברגע שבו הוא הצוואר. */
.admin-nav-chev { position: relative; }
.admin-nav-chev.is-busy { color: transparent; }
.admin-nav-chev.is-busy::after {
    content: '';
    position: absolute;
    inset: 15%;
    border-radius: 50%;
    border: 2px solid rgba(255, 231, 163, 0.28);
    border-top-color: var(--c-gold-light, #ffe7a3);
    animation: nav-chev-spin 0.62s linear infinite;
}
@keyframes nav-chev-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
    .admin-nav-chev.is-busy::after { animation-duration: 1.6s; }
}

.admin-nav-skel { display: flex; flex-direction: column; gap: 0.34rem; padding: 0.3rem 0.18rem 0.45rem; }
.admin-nav-skel i {
    display: block;
    height: 1.35rem;
    border-radius: 8px;
    background: linear-gradient(90deg,
        rgba(255, 231, 163, 0.10) 0%, rgba(255, 231, 163, 0.20) 50%, rgba(255, 231, 163, 0.10) 100%);
    animation: nav-skel 1.05s ease-in-out infinite;
}
.admin-nav-skel i:nth-child(2) { animation-delay: 0.12s; width: 86%; }
.admin-nav-skel i:nth-child(3) { animation-delay: 0.24s; width: 94%; }
.admin-nav-skel i:nth-child(4) { animation-delay: 0.36s; width: 78%; }
@keyframes nav-skel { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
    .admin-nav-skel i { animation: none; opacity: 0.7; }
}
.admin-nav-leaf {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    width: 100%;
    text-align: start;
    font-family: inherit;
    font-size: 0.84rem;
    cursor: pointer;
    color: #eaf2ff;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 9px;
    padding: 0.26rem 0.4rem;
    margin-bottom: 0.1rem;
    position: relative;
    transition: background 0.14s, border-color 0.14s, transform 0.14s;
}
/* ענף קטן שמחבר את העלה לקו השדרה */
/* הקו המחבר: מתחיל בשדרה ונגמר בדיוק בקצה העלה -אורכו הוא ‎--tree-gap‎
   ותו לא, ולכן הוא תמיד נוגע בשניהם ולא "מרחף" באמצע.
   **הריפוד של העלה מקוצץ בצד ההתחלה**: הקו נוגע בגבול העלה, אבל התמונה
   התחילה עוד ~7px פנימה (ריפוד + גבול שקוף) -ולכן הפריט נראה מרוחק מהענף
   גם כשהקו עצמו נגע בו. */
/* **עמודה שמורה לידית ולחץ, במקום שירחפו על התוכן.**
   הם ‎position: absolute‎ עם ‎z-index: 2‎ ויושבים על תחילת העלה, ולכן הם
   כיסו את האייקון ובלעו את הלחיצה עליו. נמדד: חפיפה של ‎15px‎ בעלה עמוד
   ו-‎20px‎ בעלה פרויקט -שם התמונה הממוזערת היא ‎34px‎ בסך הכול, כלומר
   **59% ממנה מכוסים**- ו-‎elementFromPoint‎ במרכז האייקון החזיר
   ‎admin-nav-grip‎ בכל עלה שניתן לסידור. **וגם בלי ריחוף**: הם ‎opacity: 0‎
   שם, ושקיפות אינה מסירה מהיפ-טסט (חוק מתועד כאן, שכבר נקנה באייקוני
   הרשתות שבפוטר וב-‎.admin-nav-top‎ עצמו).

   **ריפוד ולא הפיכתם לפריטי flex.** אלמנט ‎absolute‎ ממוקם מול ה-**padding
   box** של ההורה, וזו אינה זזה כשמוסיפים ריפוד -כלומר הכפתורים נשארים
   בדיוק במקומם, התוכן זז, ומכניקת הגרירה (‎setPointerCapture‎ על הידית)
   אינה משתנה כלל. כפריטי flex היה צריך גם מציין-מקום לעלים שאינם ניתנים
   לסידור (עמודי מערכת -אין להם ידית) וגם לעלה הראשון (יש ידית, אין חץ,
   כי הוא נפלט רק ל-‎i > 0‎), ואחרת הקצה השמאלי יוצא משונן.

   נמדד: הקצה הרחוק של הכפתורים הוא ‎29px‎ מתחילת העלה, ו-‎54px‎ במגע. */
/* **רק לעלים שנושאים את הכפתורים -כלומר עץ תיק העבודות בלבד.** בעץ
   העמודים אין יותר ידית ואין חץ (ראה ‎row‎ ב-js/admin.js), ולכן עמודה
   שמורה שם הייתה ‎64px‎ של ריק בטלפון -וזה מה שגרם לרשימה להיראות שבורה.
   "פרויקט חדש" אינו נושא ‎data-i‎ ולכן גם הוא יוצא מזה; הוא השורה האחרונה
   ובגוש משלו, כך שהקצה נשאר ישר בתוך הקבוצה. */
.admin-nav-tree .admin-nav-leaf[data-i] { padding-inline-start: 1.95rem; }
.admin-nav-leaf::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(-1 * var(--tree-gap, 0.3rem) - 1px);
    top: 50%;
    width: calc(var(--tree-gap, 0.3rem) + 1px);
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 231, 163, 0.35);
}
/* העלה שמעליו הסמן -גם הענף שלו נדלק, כך שברור לאיזה פריט הקו שייך */
.admin-nav-leaf:hover::before, .admin-nav-leaf.is-cur::before { background: rgba(255, 231, 163, 0.75); }
.admin-nav-leaf:hover {
    background: rgba(255, 231, 163, 0.14);
    border-color: rgba(255, 231, 163, 0.32);
}

/* ---- ענף שהפריטים בו הם טאבים מלאים ("הגדרות מערכת") ----
   הם ‎.admin-nav-item‎ ולא ‎.admin-nav-leaf‎, כי כל אחד מהם טאב אמיתי וכל
   מנגנון הטאבים עובד עליהם כמו שהוא (‎showTab‎, ‎is-active‎, מסלול המיקום).
   מה שנשאר הוא **השפה הוויזואלית של העץ**: אותו קו מחבר ואותה הזחה, כדי
   שייקראו כפריטי משנה ולא כטאבים שנדחפו פנימה. */
/* **טור ולא שורה.** ‎.admin-nav-item‎ אינו מגדיר ‎display‎ -הוא נשען על
   ה-flex של ‎.admin-nav‎ עצמה. בתוך העץ (‎block‎ רגיל) הכפתורים חזרו להיות
   ‎inline-block‎ ונערמו **לרוחב**, שתיים בשורה. העלים לא סבלו מזה כי
   ‎.admin-nav-leaf‎ הוא ‎flex; width: 100%‎ בעצמו. אותו ‎flex-direction‎ של
   התפריט, כדי שהעץ לא יהיה תלוי ב-‎display‎ של הפריטים שבתוכו. */
/* **ה-‎flex‎ יושב על העוטף ולא על העץ.** העץ עצמו הוא ‎grid‎ מאז שהפתיחה
   עברה ל-‎grid-template-rows‎, וכלל ‎display: flex‎ עליו היה דורס אותו
   בקסקייד (שניהם (0,1,0), וזה מאוחר יותר בקובץ) -כלומר הענף הזה לבדו היה
   נפתח בקפיצה בזמן שהשלושה האחרים מונפשים. */
.admin-nav-tabs > .admin-nav-tree-in {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.admin-nav-tabs .admin-nav-item {
    position: relative;
    font-size: 0.86rem;
    padding-inline-start: 0.34rem;
}
.admin-nav-tabs .admin-nav-item::before {
    content: '';
    position: absolute;
    inset-inline-start: calc(-1 * var(--tree-gap, 0.3rem) - 1px);
    top: 50%;
    width: calc(var(--tree-gap, 0.3rem) + 1px);
    height: 2px;
    border-radius: 2px;
    background: rgba(255, 231, 163, 0.35);
}
/* הפריט הפעיל -הקו שלו נדלק, בדיוק כמו בעלים */
.admin-nav-tabs .admin-nav-item:hover::before,
.admin-nav-tabs .admin-nav-item.is-active::before { background: rgba(255, 231, 163, 0.75); }

/* ---- ידית גרירה לשינוי סדר הפרויקטים (עכבר + מגע) ----
   ‎touch-action: none‎ **רק על הידית**: בלעדיו הדפדפן גולל במקום לגרור, אבל
   תפריט הצד עצמו נגלל (overflow-y: auto), ולכן אסור לכבות את הגלילה על העלה
   כולו -אחרת אי אפשר לגלול את התפריט באצבע. */
/* הידית מופיעה ב-hover בלבד, אבל היא **תפסה מקום תמיד** -כ-24px בין קו הענף
   לתמונה, שנראו כרווח ריק שמרחיק את הפריט מהקו. היום היא מרחפת מעל תחילת
   העלה ואינה משתתפת בפריסה, ולכן התמונה נצמדת לענף. */
/* הידית היא כפתור אמיתי וניתן למיקוד: ↑/↓ מזיזים את הפרויקט (ראה admin.js),
   ולכן חובה שיהיה לה סימון מיקוד. */
.pf-row-grip:focus-visible, .admin-nav-grip:focus-visible {
    outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 1px; opacity: 1;
}
/* "לראש הרשימה" -נחשף עם הידית, לא כפתור קבוע שמתחרה בשם.
   **הציור הוא SVG** (ראה ההערה במרקאפ), ולכן הגודל נקבע כאן ולא ב-‎font-size‎.
   ‎1.05rem‎ ולא ‎1.15rem‎: הציור רחב מהתו שהיה כאן, והוא חייב להישאר בתוך
   העמודה השמורה (‎1.95rem‎) ומעל קצה הידית (‎15px‎) -נמדד ‎16.8..30.6‎. */
.admin-nav-top {
    position: absolute; inset-inline-start: 1.05rem; top: 50%; transform: translateY(-50%);
    z-index: 2; cursor: pointer; opacity: 0;
    padding: 0 0.1rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    color: rgba(255, 231, 163, 0.55);
    transition: opacity 0.14s, color 0.14s;
}
.admin-nav-top svg { display: block; width: 0.66rem; height: 0.66rem; fill: currentColor; }
.admin-nav-leaf:hover .admin-nav-top, .admin-nav-leaf:focus-within .admin-nav-top { opacity: 1; }
.admin-nav-top:hover { color: #ffe7a3; }
.admin-nav-grip {
    position: absolute; inset-inline-start: 0; top: 50%; transform: translateY(-50%);
    z-index: 2;
    cursor: grab;
    touch-action: none;
    padding: 0 0.15rem;
    font-size: 0.8rem; line-height: 1;
    color: rgba(255, 231, 163, 0.45);
    opacity: 0;
    transition: opacity 0.14s, color 0.14s;
}
/* כשהיא גלויה היא מכסה את תחילת העלה -רקע קטן כדי שלא תשב על התמונה */
.admin-nav-leaf:hover .admin-nav-grip {
    background: rgba(13, 62, 120, 0.85); border-radius: 5px;
}
.admin-nav-leaf:hover .admin-nav-grip,
.admin-nav-leaf:focus-within .admin-nav-grip { opacity: 1; }
.admin-nav-grip:hover { color: var(--c-gold, #ffd15a); }
.admin-nav-grip:active { cursor: grabbing; }
/* במסכי מגע אין ריחוף -הידית גלויה תמיד, אחרת אי אפשר לדעת שאפשר לגרור */
/* **‎.admin-nav-top‎ היה מלכודת נגיעה, לא רק אלמנט חבוי.** הוא ‎opacity: 0‎
   ונחשף ב-‎:hover‎ -ובמסך מגע אין ריחוף, כלומר הוא **בלתי נראה לצמיתות**
   ובכל זאת נשאר יעד ללחיצה (שקיפות אינה מסירה מהיפ-טסט -חוק מתועד כאן,
   שכבר נקנה באייקוני הרשתות שבפוטר). נמדד ‎9x13‎, ‎z-index: 2‎, מרחף מעל
   תחילת **כל** עלה -19 מהם בתפריט- וזה מה שנקרא "לוחץ ויוצא כפתור אחר".
   במגע הוא נחשף כמו הידית ומקבל יעד נגיעה אמיתי. */
@media (pointer: coarse) {
    /* העמודה רחבה יותר כאן, כי שני הכפתורים מקבלים יעד נגיעה אמיתי */
    .admin-nav-tree .admin-nav-leaf[data-i] { padding-inline-start: 4rem; }
    /* **גם הידית ולא רק החץ.** נמדד ‎14x13‎ במגע -ידית גרירה בגודל הזה אינה
       ניתנת לתפיסה באצבע, וזו בדיוק התלונה על "בעיות לחיצה". אותו ריפוד
       של החץ שלידה, כדי ששתיהן ייראו כזוג ולא כשני גדלים. */
    .admin-nav-grip {
        opacity: 0.75;
        padding: 0.55rem 0.6rem;
        font-size: 0.95rem;
        /* **‎auto‎ ולא ‎none‎ במגע.** ‎touch-action: none‎ הופך את הידית לרצועה
           שאי אפשר לגלול בה, ובתפריט צר שנגלל באצבע זו תקלה ולא הגנה. הגרירה
           כאן מתחילה בלחיצה ארוכה (‎makeReorderable‎, ‎holdMs‎) והיא חוסמת את
           הגלילה בעצמה מרגע שהיא תפסה. */
        touch-action: auto;
    }
    .admin-nav-top {
        opacity: 0.75;
        /* **‎2rem‎ ולא ‎1.6rem‎.** הידית מתחילה ב-0 ורוחבה ‎31px‎ אחרי שקיבלה
           ריפוד נגיעה, והחץ ישב ב-‎25.6px‎ -כלומר חפיפה של ‎5.4px‎, והחץ
           (מאוחר יותר ב-DOM ובאותו ‎z-index‎) לקח אותה. נמדד: ‎6‎ מתוך ‎31‎
           פיקסלי הידית פתחו "העברה לראש" במקום להתחיל גרירה. */
        inset-inline-start: 2rem;
        padding: 0.55rem 0.5rem;     /* יעד נגיעה, בלי לחרוג מהעמודה של ‎4rem‎ */
    }
    /* גדול יותר במגע -שם אין ריחוף, והציור הוא כל מה שמסמן שיש כאן פעולה */
    .admin-nav-top svg { width: 0.85rem; height: 0.85rem; }
    /* הידית והחץ שכנים, ושניהם מרחפים מעל תחילת העלה -רקע מפריד כדי
       שיהיה ברור שאלו שני יעדים ולא כתם אחד. */
    .admin-nav-leaf .admin-nav-grip,
    .admin-nav-leaf .admin-nav-top {
        background: rgba(13, 62, 120, 0.85); border-radius: 5px;
    }
}

/* בזמן גרירה: הנגרר מורם ועוקב אחרי הסמן, והשכנים מחליקים משבצת.
   ל-‎.admin-nav-leaf‎ כבר יש ‎transition‎ על ‎transform‎, ולכן ההחלקה של השכנים
   מתקבלת בחינם; הנגרר חייב **לבטל** אותה, אחרת הוא נגרר אחרי האצבע באיחור. */
.admin-nav-tree.is-reordering .admin-nav-leaf { opacity: 0.55; }
.admin-nav-tree.is-reordering .admin-nav-leaf.is-dragging {
    opacity: 1;
    transition: none;
    position: relative; z-index: 2;          /* מעל השכנים בזמן התנועה */
    background: rgba(255, 231, 163, 0.2);
    border-color: var(--c-gold, #ffd15a);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35);
}
.admin-nav-tree.is-reordering .admin-nav-grip { opacity: 1; }
.admin-nav-leaf.is-cur {
    background: rgba(255, 231, 163, 0.22);
    border-color: rgba(255, 231, 163, 0.5);
}
.admin-nav-leaf-icon { flex: 0 0 auto; font-size: 0.85rem; line-height: 1; }
/* ---- עלה של פרויקט: תמונה אמיתית + חיווי מצב ----
   בתיק שכולו אותו אמוג'י אי אפשר לזהות פרויקט במבט, ולכן העלה נושא את
   התמונה עצמה. היחס 3:2 כמו הכרטיס באתר, כדי שהזיהוי יהיה מיידי. */
.admin-nav-thumb {
    flex: 0 0 auto; width: 2.1rem; height: 1.4rem; border-radius: 5px;
    background-size: cover; background-position: center; background-color: #10233d;
    border: 1px solid rgba(255, 231, 163, 0.25);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
}
.admin-nav-leaf:hover .admin-nav-thumb { border-color: rgba(255, 231, 163, 0.55); }
/* "מוסתר" -תווית קטנה ולא רק קו חוצה: קו לבדו נקרא כתקלה בעיבוד */
.admin-nav-leaf-off {
    flex: 0 0 auto; font-size: 0.6rem; font-weight: 700;
    padding: 0.05rem 0.32rem; border-radius: 999px;
    color: rgba(255, 246, 230, 0.75);
    background: rgba(255, 255, 255, 0.09);
    border: 1px solid rgba(255, 255, 255, 0.16);
}
.admin-nav-leaf.is-off .admin-nav-thumb { opacity: 0.4; filter: grayscale(0.7); }
/* התפריט נשלט במפריד גרירה, ולכן הרוחב אינו ידוע מראש: בתפריט צר התווית
   "מוסתר" והתמונה גוזלות את כל המקום מהשם. ‎@container‎ ולא media query -
   מה שקובע הוא רוחב **התפריט**, לא רוחב המסך. */
.admin-nav-tree { container-type: inline-size; }
@container (max-width: 11rem) {
    .admin-nav-leaf-off { display: none; }          /* הגלוון והקו החוצה נשארים */
}
@container (max-width: 8rem) {
    .admin-nav-thumb { width: 1.5rem; height: 1rem; }
}
.admin-nav-leaf-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* עמוד מכובה -מסומן בעמעום, לא בהסתרה */
.admin-nav-leaf.is-off .admin-nav-leaf-title { opacity: 0.55; text-decoration: line-through; }
/* עמוד מערכת ללא עורך תוכן -לחיצה רק מובילה לטאב */
.admin-nav-leaf.is-plain .admin-nav-leaf-title { opacity: 0.8; }
.admin-nav-leaf-add {
    color: var(--c-gold-light, #ffe7a3);
    border-style: dashed;
    border-color: rgba(255, 231, 163, 0.35);
    margin-top: 0.2rem;
}
.admin-nav-leaf-add:hover { border-style: solid; }

@media (prefers-reduced-motion: reduce) {
    .admin-nav-tree, .admin-nav-chev, .admin-nav-leaf { transition: none; }
}

.admin-nav-item:hover { background: rgba(255, 231, 163, 0.12); }
.admin-nav-item.is-active {
    background: rgba(255, 231, 163, 0.2);
    border-color: rgba(255, 231, 163, 0.45);
    color: #fff;
    font-weight: 700;
}

/* ================= התפריט כמגירה (מובייל) =================
   **נמדד ב-iPhone 14 (390px):** הפאנל 371px, מהם 136px לתפריט הצדי -כלומר
   **37% מהרוחב** -ולתוכן נשארו 231px. בעמודה כזאת תווית מתג נשברה לשלוש
   שורות, ושמות בתפריט עצמו נחתכו ("תיק ע…", "מוניטור וח…"): **שתי** העמודות
   היו צרות בבת אחת, וזה מה שהופך את זה לבעיה מבנית ולא לכוונון.

   במובייל התפריט יוצא מזרימת ה-flex והופך למגירה שמרחפת מעל התוכן, ולכן
   ‎.admin-panel-body‎ מקבל את **כל** רוחב הפאנל.

   שני דברים שנקנו כאן:
   - **‎position: relative‎ על ‎.admin-panel-main‎ ולא ‎transform‎/‎contain‎.**
     ‎relative‎ אינו יוצר containing block ל-‎position: fixed‎ (רק ‎transform‎,
     ‎filter‎ ו-‎contain‎ עושים זאת), ולכן כל חלונות האישור והדיאלוגים שיושבים
     בתוך הפאנל ממשיכים להימדד מול המסך -אותה מלכודת שכבר הפילה כאן את כרטיס
     הפרויקט ואת סרגל התמונה.
   - **הכללים יושבים אחרי כללי הבסיס של ‎.admin-nav‎.** ה-specificity זהה
     (‎.admin-nav‎), ולכן מי שמאוחר בקובץ מנצח. הבלוק שב-‎@media‎ המוקדם ניסה
     לתת ‎min-width: 6.8rem‎ ו**נדרס** ע"י ‎min-width: 6rem‎ של הבסיס שאחריו. */
.admin-nav-toggle { display: none; }        /* דסקטופ: התפריט קבוע, אין מה לפתוח */
.admin-nav-scrim  { display: none; }

@media (max-width: 640px) {
    .admin-panel-main { position: relative; }

    .admin-nav {
        position: absolute;
        /* **‎60‎ ולא ‎9‎.** בגוף הפאנל יש שכבות ממוקמות עם ‎z-index‎ גבוה מ-9
           (‎admin-dd-menu‎ 40, ‎pf-dd-menu‎ ו-‎page-bg-menu‎ 30), וכולן נפתחות
           **מעל** המגירה: נגיעה במקום שבו נראה פריט תפריט הייתה נוחתת על
           הרשימה הנפתחת שמתחתיו. הערך גבוה מכולן ונמוך מהדיאלוגים (220+),
           שממילא יוצאים ל-‎body‎. */
        z-index: 60;
        inset-block: 0;
        /* ‎inset-inline-start‎ ולא ‎right‎: התפריט הוא הפריט הראשון בשורת ה-flex,
           כלומר בצד ה**התחלה**, ובמסמך RTL זה הימין. הערך הלוגי עוקב אחרי
           הכיוון במקום לקבע צד פיזי. */
        inset-inline-start: 0;
        width: min(15rem, 76%);
        min-width: 0;
        max-width: none;
        /* **המגירה אטומה, בשונה מהתפריט הקבוע.** היא מרחפת מעל התוכן, ורקע
           שקוף-למחצה מערבב את שתי רשימות הטקסט זו בזו.

           **וזה בדיוק מה שקרה, כי הכלל הזה כפל ב-‎--admin-see‎ בעצמו.** ההערה
           כאן אמרה "המגירה אטומה" בזמן שהקוד שתחתיה עשה את ההפך, ובמד שקיפות
           של 50% נמדד ‎rgba(11, 46, 90, 0.49)‎: התפריט ותוכן הפאנל שמתחתיו
           נצבעו זה על זה, והענפים פשוט לא נראו. דווח כ"הענפים של התפריט
           נעלמו" -וההערה שמנמקת התנהגות היא טענה שצריך לאמת, לא תיעוד.

           מד השקיפות ממשיך לעבוד על **הפאנל** ולכן האתר עדיין נראה מסביב;
           רצועת המגירה עצמה, שהיא ניווט חולף, נשארת קריאה. */
        background: rgba(11, 46, 90, 0.98);
        border-inline-start: 0;
        border-inline-end: 1px solid rgba(255, 231, 163, 0.35);
        box-shadow: -12px 0 30px rgba(0, 0, 0, 0.45);
        /* ‎translateX‎ הוא **פיזי**: המגירה יושבת בימין (RTL), ולכן הסתרה היא
           הזזה ימינה. ‎+100%‎ מוציא אותה במלואה מגבול הפאנל. */
        transform: translateX(100%);
        transition: transform 0.24s cubic-bezier(0.2, 0.8, 0.3, 1);
        /* מגירה סגורה אינה יעד לנגיעה ואינה נגישה למקלדת -בלי זה אפשר היה
           לטאב אל תוך תפריט בלתי-נראה שמרחף מעל התוכן. */
        visibility: hidden;
        /* **מקום נשימה בתחתית -בלעדיו הפריט האחרון בלתי-נגיש.** דווח ונראה
           באייפון אמיתי: הרשימה **כן** נגללת, אבל הסרגל התחתון של ספארי מכסה
           את תחתית ה-viewport, ו-DEBUG נשאר מתחתיו גם בגלילה עד הסוף.

           `100vh` באייפון הוא ה-viewport ה**גדול** (נמשך מתחת לסרגל), ולכן
           ‎bottom‎ של הפאנל נוחת מחוץ למסך -וזה **לא משוחזר באמולציה**, ששם
           ה-viewport כבר 390×664 בלי כרום הדפדפן.

           ריפוד בתוך אזור נגלל הוא מקום שאפשר **לגלול אליו**, ולכן הוא מרים את
           הפריט האחרון אל מעל הסרגל בלי לגעת בגאומטריית הפאנל (‎svh‎/‎dvh‎ היו
           משנים את גובה הפאנל עצמו, ו-‎dvh‎ גם היה מקפיץ אותו תוך כדי גלילה).
           ‎env(safe-area-inset-bottom)‎ מוסיף את מחוון הבית; הוא **אינו** כולל
           את הסרגל, ומכאן התוספת הקבועה. */
        padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px));
    }
    .admin-panel.nav-open .admin-nav {
        transform: translateX(0);
        visibility: visible;
    }
    /* **הפאנל עולה מעל חלונות העריכה כל עוד המגירה פתוחה.**
       ‎.pf-zoom-overlay‎ ו-‎.pg-win-overlay‎ הם ‎position: fixed‎ ב-‎z 135‎ על
       ה-‎body‎, כלומר **מעל** הפאנל (125) -ובטלפון הם מכסים את המסך כולו.
       נמדד עם חלון פרויקט פתוח: **כל 1680 נקודות הדגימה** על שטח המגירה
       החזירו תוכן של החלון ולא של התפריט, וגם כפתור ה-‎☰‎ עצמו היה מכוסה
       (‎pf-zoom-head‎) -כלומר התפריט נעלם לגמרי ומה שנלחץ הוא השכבה שמעליו.
       ילד אינו יכול לצאת מה-stacking context של הפאנל, ולכן ההעלאה היא של
       הפאנל עצמו; היא חלה **רק** כשהמגירה פתוחה, וברגע שנבחר פריט (הבחירה
       סוגרת אותה) החלון חוזר להיות למעלה. נשאר מתחת לדיאלוגים (220+). */
    .admin-panel.nav-open { z-index: 136; }

    /* הריפוד המקביל של ‎.admin-panel-body‎ **אינו כאן** אלא אחרי כלל הבסיס שלו:
       הבסיס מגדיר ‎padding‎ בקיצור, והוא יושב מאוחר יותר בקובץ -כלומר כלל כאן
       היה נדרס בשקט. אותה מלכודת של ‎min-width: 6.8rem‎ שתועדה למעלה. */

    /* שכבת הרקע: מכהה את התוכן ולוכדת את הלחיצה שסוגרת */
    .admin-nav-scrim {
        display: block;
        position: absolute;
        inset: 0;
        z-index: 59;                 /* צמוד מתחת למגירה -ראה ההערה שם */
        background: rgba(4, 18, 38, 0.5);
        opacity: 0;
        visibility: hidden;
        transition: opacity 0.24s;
    }
    .admin-panel.nav-open .admin-nav-scrim { opacity: 1; visibility: visible; }

    /* כפתור המגירה -שלושה קווים מצוירים, לא תו יוניקוד (‎☰‎ נגזר מהגופן ומשתנה
       בין מכשירים). 44px בנגיעה, כמו שאר הפקדים. */
    .admin-nav-toggle {
        display: grid;
        place-items: center;
        flex: 0 0 auto;
        width: 2.4rem; height: 2.4rem;
        padding: 0;
        border-radius: 10px;
        border: 1px solid rgba(255, 231, 163, 0.4);
        background: rgba(255, 255, 255, 0.08);
        color: var(--c-gold-light, #ffe7a3);
        cursor: pointer;
        transition: background 0.15s, border-color 0.15s;
    }
    .admin-nav-toggle:hover { background: rgba(255, 231, 163, 0.18); }
    .admin-nav-toggle:focus-visible {
        outline: 2px solid var(--c-gold-light, #ffe7a3);
        outline-offset: 2px;
    }
    /* הקו האמצעי הוא האלמנט עצמו, והחיצוניים ‎::before‎/‎::after‎ */
    .admin-nav-toggle-bars,
    .admin-nav-toggle-bars::before,
    .admin-nav-toggle-bars::after {
        content: '';
        display: block;
        width: 1.05rem; height: 2px;
        border-radius: 2px;
        background: currentColor;
    }
    .admin-nav-toggle-bars { position: relative; }
    .admin-nav-toggle-bars::before { position: absolute; top: -6px; }
    .admin-nav-toggle-bars::after  { position: absolute; top: 6px; }
    /* כשהמגירה פתוחה הכפתור מסומן -הוא גם החיווי וגם הדרך לסגור */
    .admin-panel.nav-open .admin-nav-toggle {
        background: rgba(255, 209, 90, 0.28);
        border-color: rgba(255, 231, 163, 0.65);
    }
}

@media (prefers-reduced-motion: reduce) {
    .admin-nav, .admin-nav-scrim, .admin-nav-toggle { transition: none; }
}

.admin-panel-body {
    flex: 1 1 auto;
    /* ‎--scroll-pad‎ = ה-padding העליון של אזור הגלילה. ‎position: sticky‎ נמדד
       מול ה-padding box, ולכן ‎top: 0‎ נעצר **מתחת** לרווח הזה; מי שרוצה להיצמד
       ממש לקצה מקזז אותו (ראה ‎.pf-row-head‎). מוגדר כמשתנה ולא כמספר קשיח כדי
       שהשניים לא ייפרדו כששולי הפאנל ישתנו. */
    --scroll-pad: 1.1rem;
    padding: var(--scroll-pad) 1.2rem;
    overflow-y: auto;
    min-width: 0;
    /* מונע "בריחת" גלילה לאתר שמאחור כשמגיעים לקצה הפאנל */
    overscroll-behavior: contain;
    /* סקרול רגוע -מותאם לפאנל (חוק: כל סקרול מעוצב) */
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 231, 163, 0.4) transparent;
}
.admin-panel-body::-webkit-scrollbar { width: 10px; }
.admin-panel-body::-webkit-scrollbar-track { background: transparent; }
.admin-panel-body::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.35);
    border: 3px solid transparent;
    background-clip: padding-box;
    border-radius: 10px;
    transition: background 0.2s;
}
.admin-panel-body::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 231, 163, 0.6);
    background-clip: padding-box;
}
/* **מקום נשימה בתחתית אזור התוכן (מובייל).** אותה סיבה של המגירה: הסרגל התחתון
   של ספארי מכסה את תחתית ה-viewport, ולכן ההגדרה האחרונה בטאב ארוך נשארת מתחתיו
   גם בגלילה עד הסוף. **הכלל חייב לשבת כאן ולא בבלוק המובייל שלמעלה** -כלל
   הבסיס מגדיר ‎padding‎ ב**קיצור**, ולכן הוא מאפס ‎padding-bottom‎ של כל מי
   שקדם לו באותה specificity. */
@media (max-width: 640px) {
    .admin-panel-body { padding-bottom: calc(4.5rem + env(safe-area-inset-bottom, 0px)); }
}
.admin-tab[hidden] { display: none; }
.admin-hint { font-size: 0.85rem; opacity: 0.8; margin-bottom: 1rem; }

/* ---- סעיף מתקפל (חוק: כל סעיף בניהול נפתח/נסגר) ---- */
.admin-collapsible {
    border: 1px solid rgba(255, 231, 163, 0.22);
    border-radius: 12px;
    background: rgba(13, 62, 120, 0.28);
    margin-bottom: 0.9rem;
    /* ‎clip‎ ולא ‎hidden‎: שניהם גוזרים אל הפינות המעוגלות, אבל ‎hidden‎ הופך את
       הסעיף ל-scroll container -ואז ‎position: sticky‎ של ילד נמדד מולו (סעיף
       שאינו נגלל = האלמנט לעולם לא נדבק), במקום מול ‎.admin-panel-body‎ שהוא
       אזור הגלילה האמיתי. זו בדיוק הסיבה שהפאנל עצמו כבר משתמש ב-‎clip‎. */
    overflow: clip;
}
.admin-collapsible-head {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem;
    cursor: pointer;
    background: rgba(255, 231, 163, 0.08);
    border: none;
    color: inherit;
    /* גופן גוגל עברי (Heebo) -קריא יותר בכותרות הסעיפים מהסריף הדקורטיבי */
    font-family: 'Heebo', sans-serif;
    text-align: start;
    transition: background 0.15s;
}
.admin-collapsible-head:hover { background: rgba(255, 231, 163, 0.16); }
.admin-collapsible-title {
    font-family: 'Heebo', sans-serif;
    font-size: 1.02rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--c-gold-light);
}
.admin-chevron {
    font-size: 0.85rem;
    color: var(--c-gold-light);
    transition: transform 0.2s ease;
}
/* סגור = החץ פונה שמאלה (כיוון הקריאה ב-RTL); פתוח = מצביע מטה אל התוכן.
   סיבוב של 90deg הופך את ▾ לשמאלה; ‎-90deg היה מפנה אותו ימינה, נגד כיוון העברית. */
.admin-collapsible.collapsed .admin-chevron { transform: rotate(90deg); }
.admin-collapsible-body {
    padding: 0.9rem;
}
.admin-collapsible.collapsed .admin-collapsible-body { display: none; }
/* סעיף מתקפל משני (מקונן בתוך טופס) -קטן ומעודן יותר */
.admin-collapsible-sub { margin-bottom: 0.6rem; background: rgba(255, 255, 255, 0.04); }
.admin-collapsible-sub > .admin-collapsible-head { padding: 0.5rem 0.7rem; }
.admin-collapsible-sub .admin-collapsible-title { font-size: 0.9rem; }
.admin-collapsible-sub > .admin-collapsible-body { padding: 0.7rem; }

/* כרטיסי מבט-כללי */
.admin-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr));
    gap: 0.8rem;
    margin-bottom: 1rem;
}
.admin-info-card {
    background: rgba(13, 62, 120, 0.4);
    border: 1px solid rgba(255, 231, 163, 0.25);
    border-radius: 12px;
    padding: 0.8rem 0.9rem;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.admin-info-label { font-size: 0.72rem; opacity: 0.7; letter-spacing: 0.03em; }
.admin-info-value { font-size: 1.05rem; font-weight: 700; color: var(--c-gold-light); }
/* כרטיס שתופס את כל רוחב הרשת -לגרסה, שהיא הנתון הראשי בסעיף */
.admin-info-card-wide { grid-column: 1 / -1; }
/* מספר ה-build משני לגרסה עצמה: אותו שורה, פחות משקל */
.admin-ver-build {
    font-size: 0.78rem; font-weight: 600;
    color: rgba(255, 246, 230, 0.7);
    padding-inline-start: 0.4rem;
}

/* ---- מתג (switch) ---- */
.admin-switch { display: flex; align-items: center; gap: 0.7rem; cursor: pointer; }
.admin-switch input { position: absolute; opacity: 0; width: 0; height: 0; }
/* המידות נגזרות ממשתנים -הגלגל תמיד ממורכז ובדיוק בתוך המסילה בכל גודל.
   מהלך הגלגל = רוחב המסילה פחות גובהה, ולכן אין צורך בכיול ידני. */
.admin-switch-track {
    --sw-w: 2.7rem;
    --sw-h: 1.45rem;
    --sw-pad: 0.13rem;
    position: relative;
    box-sizing: border-box;
    flex: 0 0 auto;
    width: var(--sw-w);
    height: var(--sw-h);
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 231, 163, 0.28);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45);
    transition: background 0.2s, border-color 0.2s, box-shadow 0.2s;
}
.admin-switch-thumb {
    position: absolute;
    top: 50%;
    left: var(--sw-pad);
    width: calc(var(--sw-h) - (var(--sw-pad) * 2) - 2px);
    height: calc(var(--sw-h) - (var(--sw-pad) * 2) - 2px);
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, #d8d8d8);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.45);
    transform: translateY(-50%);
    transition: transform 0.22s cubic-bezier(0.3, 1.4, 0.5, 1), background 0.2s;
}
/* דלוק = ירוק (כמו שאר חיווי ה"פעיל" בפאנל), כבוי = אפור כהה */
.admin-switch input:checked + .admin-switch-track {
    background: linear-gradient(180deg, #5fdc90, #2f9d5b);
    border-color: rgba(75, 208, 122, 0.75);
    box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.25), 0 0 8px rgba(75, 208, 122, 0.3);
}
.admin-switch input:checked + .admin-switch-track .admin-switch-thumb {
    transform: translate(calc(var(--sw-w) - var(--sw-h)), -50%);
    background: linear-gradient(180deg, #fff, #e6fff0);
}
.admin-switch:hover .admin-switch-track { border-color: rgba(255, 231, 163, 0.5); }
.admin-switch input:focus-visible + .admin-switch-track {
    box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.4);
}
.admin-switch-label { font-size: 0.9rem; }

/* ---- תיבת סימון מעוצבת (‎.admin-cb‎) ----
   הריבוע הנייטיבי מצויר ע"י מערכת ההפעלה ואי אפשר לעצב אותו מעבר לצבע
   ההדגשה -בפאנל זהוב־כהה הוא נקרא כרכיב זר, בדיוק כמו רשימת ה-‎option‎
   שבגללה נולד ‎ui-pick‎. כאן הקלט **נשאר** (הוא מקור-האמת ונגיש למקלדת),
   ורק המראה שלו מוחלף ב-‎appearance: none‎.
   ‎flex: 0 0 auto‎ הכרחי: בשורת flex הוא היה מתכווץ לאליפסה. */
.admin-cb {
    appearance: none; -webkit-appearance: none;
    flex: 0 0 auto; position: relative;
    width: 1.15rem; height: 1.15rem; margin: 0; cursor: pointer;
    border: 1.5px solid rgba(255, 231, 163, 0.45); border-radius: 6px;
    background: rgba(255, 255, 255, 0.08);
    transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.admin-cb:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.15); }
.admin-cb:checked {
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
    border-color: var(--c-gold-deep, #d39a1a);
}
/* הסימן מצויר ב-‎clip-path‎ ולא כתו: ‎✓‎ נגזר מהגופן ומשתנה בין מערכות */
.admin-cb:checked::after {
    content: ''; position: absolute; inset: 0;
    background: #3a2a15;
    clip-path: polygon(19% 47%, 12% 57%, 40% 80%, 88% 26%, 79% 18%, 39% 62%);
}
.admin-cb:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.4); }
.admin-cb:disabled { opacity: 0.45; cursor: not-allowed; }

/* רשימת מתגים -רווח נעים ביניהם */
.admin-switch-list { display: flex; flex-direction: column; gap: 1rem; margin-bottom: 0; }

/* חוק: שמירת רווח בין שורות של כפתורים/מתגים כשהם מוערמים (למשל תבניות הדמויות) */
.admin-switch + .admin-switch,
.admin-charset + .admin-charset { margin-top: 0.75rem; }

/* כרטיס סט דמויות -מתג + פקדי כמות/שעה */
.admin-charset-card {
    padding: 0.85rem 0.95rem;
    border: 1px solid rgba(91, 163, 230, 0.35);
    border-radius: 14px;
    background: linear-gradient(180deg, rgba(20, 74, 138, 0.28), rgba(9, 34, 68, 0.30));
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.08);
}
.admin-charset-card + .admin-charset-card { margin-top: 0.8rem; }
.admin-charset-controls {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0.7rem 1rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px dashed rgba(255, 231, 163, 0.22);
}
.admin-charset-controls .admin-ufield span { display: flex; align-items: center; gap: 0.35rem; }

/* מחוון הכמות */
.charset-count {
    width: 100%; height: 1.5rem; cursor: pointer;
    -webkit-appearance: none; appearance: none; background: transparent;
}
.charset-count::-webkit-slider-runnable-track {
    height: 7px; border-radius: 999px;
    background: linear-gradient(90deg, var(--c-gold) 0%, var(--c-gold-deep) 100%);
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.35);
}
.charset-count::-webkit-slider-thumb {
    -webkit-appearance: none; appearance: none; margin-top: -6px;
    width: 19px; height: 19px; border-radius: 50%;
    background: radial-gradient(circle at 40% 35%, #fff, var(--c-gold-light));
    border: 2px solid var(--c-gold-deep); box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4); cursor: pointer;
}
.charset-count::-moz-range-track { height: 7px; border-radius: 999px; background: var(--c-gold); }
.charset-count::-moz-range-thumb {
    width: 17px; height: 17px; border-radius: 50%; background: var(--c-gold-light);
    border: 2px solid var(--c-gold-deep); cursor: pointer;
}
.cc-val {
    display: inline-block; min-width: 1.5rem; padding: 0.05rem 0.5rem; text-align: center;
    color: #06263f; font-weight: 800; font-size: 0.74rem;
    background: var(--c-gold); border-radius: 999px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

/* בורר "מתי מוצג" -מעוצב בהתאמה לכרטיס הכהה */
.charset-time {
    width: 100%;
    padding: 0.5rem 2rem 0.5rem 0.8rem;
    border: 1.5px solid rgba(255, 231, 163, 0.45);
    border-radius: 10px;
    background-color: rgba(6, 26, 52, 0.55);
    color: #eaf4ff; font-family: inherit; font-size: 0.9rem; font-weight: 600;
    cursor: pointer;
    -webkit-appearance: none; appearance: none;
    /* חץ זהב מותאם */
    background-image: linear-gradient(45deg, transparent 50%, var(--c-gold) 50%),
                      linear-gradient(135deg, var(--c-gold) 50%, transparent 50%);
    background-position: left 0.95rem center, left 0.6rem center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    transition: border-color 0.15s, box-shadow 0.15s;
}
.charset-time:hover { border-color: var(--c-gold); }
.charset-time:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.25); }
.charset-time option { background: #eaf4ff; color: #14203a; }

/* הערת מידע מעוצבת (נבדלת מהמתגים -כרטיס זהב עדין עם פס-הדגשה) */
.admin-note {
    display: block; text-align: start; /* פסקה זורמת -יישור לימין ב-RTL, בלי שבירת <b> */
    font-size: 0.82rem; line-height: 1.55;
    color: var(--c-gold-light);
    background: rgba(255, 209, 90, 0.10);
    border: 1px solid rgba(255, 209, 90, 0.26);
    border-right: 3px solid var(--c-gold);
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    margin: 0.9rem 0 0; /* רווח מהמתג/רשימה שמעל */
}
/* **הערה שאינה האחרון בסעיף מקבלת רווח תחתון.** ל-‎.admin-note‎ יש ‎margin‎
   עליון בלבד, ולכן כל מה שבא אחריה נדבק אליה - וזה נראה כאילו ההסבר והפקד
   הם רכיב אחד. עד כה זה טופל ברשימת יורשים ידועה (למטה), וכל פקד שלא היה
   ברשימה חזר להידבק: נמדד בבורר גופן הכותרות, שהוא ‎select‎ עירום.
   ‎:not(:last-child)‎ כדי שהערה שסוגרת סעיף לא תוסיף רווח מיותר בתחתיתו. */
.admin-note:not(:last-child) { margin-bottom: 0.75rem; }
/* הרשימה הזאת נשארת: היא מבקשת רווח **גדול יותר** מברירת המחדל */
.admin-note + .page-form-fields,
.admin-note + .page-field,
.admin-note + .admin-switch-list,
.admin-note + .admin-uform,
.admin-note + .folk-form,
.admin-note + .sitemap-list,
.admin-note + .logo-grid,
.admin-note + .admin-collapsible,
.admin-note + .heading-styles { margin-top: 1.1rem; }
/* סעיף מתקפל שבא מיד אחרי טופס (למשל "רקע הסצנה" מתחת לטופס עמוד הבית):
   ה-note האחרון בטופס סוגר אותו בלי margin תחתון, ולכן השניים נדבקים. */
form + .admin-collapsible { margin-top: 1.1rem; }

/* קישור בתוך הערה/אזהרה (למשל "מעבר לעמוד הבית") */
.admin-inline-link {
    color: inherit;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 2px;
    white-space: nowrap;
}
.admin-inline-link:hover { opacity: 0.8; }

/* הודעת אזהרה (כתום-אדמדם) -למשל "צמצום תנועה פעיל" שמבטל את מעברי העמודים */
.admin-warn {
    display: block; text-align: start;
    font-size: 0.82rem; line-height: 1.55;
    color: #ffd9c7;
    background: rgba(224, 122, 46, 0.16);
    border: 1px solid rgba(224, 122, 46, 0.42);
    border-right: 3px solid #e8873a;
    border-radius: 10px;
    padding: 0.6rem 0.75rem;
    margin: 0.7rem 0 0;
}
.admin-warn b { color: #ffe7a3; }
.admin-warn[hidden] { display: none; }
.admin-note b { color: #fff; font-weight: 700; }

/* כפתור איפוס קטן */
.admin-reset {
    flex: 0 0 auto;
    font-family: inherit; font-size: 0.8rem; font-weight: 700; cursor: pointer;
    color: var(--c-gold-light);
    background: rgba(255, 231, 163, 0.10);
    border: 1px solid rgba(255, 231, 163, 0.35);
    border-radius: 9px;
    padding: 0.35rem 0.7rem;
    transition: background 0.15s, transform 0.1s;
}
.admin-reset:hover { background: rgba(255, 231, 163, 0.22); }
.admin-reset:active { transform: translateY(1px); }

/* ---- מחוון (גודל וכד') ---- */
/* **השורה נשברת, והמחוון מצטמצם.** נמדד בטלפון (עמודת תוכן 231px): המחוון
   שומר על רוחבו הפנימי (‎input[type=range]‎ הוא אלמנט מוחלף, והמינימום האוטומטי
   שלו נגזר מהתוכן), הערך תופס ‎3.2rem‎ וכפתור האיפוס ‎flex: 0 0 auto‎ -וכיוון
   שכפתור האיפוס הוא **האחרון** במרקאפ, ב-RTL הוא הפריט השמאלי והוא זה שנדחק
   החוצה: נמדד ב-‎left: -70‎, כלומר **מחוץ למסך לגמרי ובלתי נגיש**.

   ‎flex-wrap: wrap‎ + ‎min-width: 0‎ על המחוון: כשיש מקום השורה נשארת שורה אחת
   (זהה לחלוטין לקודם), וכשאין -האיפוס יורד לשורה משלו במקום להיעלם. */
.admin-range-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.admin-range {
    flex: 1 1 auto;
    /* בלעדיו פריט flex אינו מצטמצם מתחת לגודלו הפנימי, והשורה גולשת במקום
       לשבור -אותה מלכודת שכבר תועדה כאן בשורת הפרויקט ובשעות התאורה. */
    min-width: 0;
    -webkit-appearance: none;
    appearance: none;
    height: 8px;
    border-radius: 6px;
    background: linear-gradient(90deg, var(--c-gold-deep), var(--c-gold-light));
    outline: none;
    cursor: pointer;
}
.admin-range::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, var(--c-gold));
    border: 2px solid var(--c-gold-deep);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.admin-range::-moz-range-thumb {
    width: 20px; height: 20px;
    border-radius: 50%;
    background: linear-gradient(180deg, #fff, var(--c-gold));
    border: 2px solid var(--c-gold-deep);
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4);
    cursor: pointer;
}
.admin-range-val {
    min-width: 3.2rem;
    text-align: center;
    font-weight: 700;
    color: var(--c-gold-light);
    background: rgba(13, 62, 120, 0.4);
    border: 1px solid rgba(255, 231, 163, 0.3);
    border-radius: 8px;
    padding: 0.25rem 0.4rem;
}

/* ---- צ'יפים (בחירת מצב) ---- */
.admin-chip-row { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.admin-chip {
    font-family: inherit;
    font-size: 0.9rem;
    cursor: pointer;
    color: #eaf2ff;
    background: rgba(255, 231, 163, 0.1);
    border: 1px solid rgba(255, 231, 163, 0.35);
    border-radius: 999px;
    padding: 0.4rem 0.9rem;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.admin-chip:hover { background: rgba(255, 231, 163, 0.22); }
.admin-chip:active { transform: translateY(1px); }
.admin-chip.is-active {
    background: linear-gradient(180deg, var(--c-gold), var(--c-gold-deep));
    color: var(--c-wood-deep);
    border-color: var(--c-gold-light);
    font-weight: 700;
}

/* ---- מתגי דיבאג ---- */
.admin-toggle {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.5rem 0.2rem;
    cursor: pointer;
    font-size: 0.95rem;
    border-bottom: 1px solid rgba(255, 231, 163, 0.12);
}
.admin-toggle:last-child { border-bottom: none; }
.admin-toggle input {
    width: 1.1rem;
    height: 1.1rem;
    accent-color: var(--c-gold);
    cursor: pointer;
}

/* בזמן גרירה -לבטל בחירת טקסט וריחוף */
body.admin-dragging { user-select: none; cursor: move; }

/* ---- רשת הגופנים בפאנל ---- */
.admin-font-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(190px, 100%), 1fr));
    gap: 0.9rem;
}
.admin-font-card {
    cursor: pointer;
    background: rgba(13, 62, 120, 0.3);
    border: 1px solid rgba(255, 231, 163, 0.25);
    border-radius: 12px;
    padding: 1rem 0.6rem 0.7rem;
    text-align: center;
    transition: transform 0.15s, border-color 0.15s, background 0.15s;
    position: relative;
}
.admin-font-card:hover { transform: translateY(-3px); border-color: rgba(255, 231, 163, 0.7); background: rgba(13, 62, 120, 0.45); }
.admin-font-card.chosen { border-color: #7CFC9A; box-shadow: 0 0 0 2px rgba(124, 252, 154, 0.5); }
.admin-font-card.chosen::after {
    content: '✓';
    position: absolute; top: 0.35rem; inset-inline-start: 0.45rem;
    width: 1.2rem; height: 1.2rem; line-height: 1.2rem;
    font-size: 0.75rem; font-weight: 700;
    color: #0d3e78; background: #7CFC9A; border-radius: 50%;
}
.admin-font-sample {
    direction: ltr;
    font-size: 1.7rem;
    line-height: 1.1;
    color: var(--c-gold);
    background: linear-gradient(180deg, #fffdf6 4%, var(--c-gold-light) 30%, var(--c-gold) 55%, var(--c-gold-deep) 100%);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 1px 0 rgba(60, 34, 14, 0.7)) drop-shadow(0 3px 8px rgba(0, 0, 0, 0.35));
}
.admin-font-name {
    font-size: 0.75rem;
    opacity: 0.75;
    margin-top: 0.55rem;
    letter-spacing: 0.03em;
}

/* ---- טוסט אישור ---- */
.admin-toast {
    position: fixed;
    bottom: 1.2rem;
    inset-inline: 0;
    margin: 0 auto;
    width: max-content;
    max-width: 90vw;
    z-index: 140;
    background: var(--c-night);
    color: #fff;
    padding: 0.65rem 1.2rem;
    border-radius: 12px;
    border: 1px solid rgba(255, 231, 163, 0.5);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4);
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: none;
}
.admin-toast.show { opacity: 1; transform: translateY(0); }

@media (max-width: 640px) {
    .admin-font-grid { grid-template-columns: repeat(auto-fill, minmax(min(140px, 100%), 1fr)); }
    /* במובייל: חלון כמעט מלא, בלי גרירה/שינוי-גודל (לא נוח באצבע).
       היה כאן ‎:not(.minimized)‎ כדי שהבועה הנגררת תוכל לצאת מה-‎inset‎ הזה
       (‎!important‎ גובר גם על ‎style.top/left‎ שנכתב מ-JS -נמדד ב-WebKit
       ש-‎style.top‎ הפך ל-160px בעוד ה-‎getBoundingClientRect‎ נשאר 0). הבועה
       ירדה, ואיתה גם החריג. */
    /* **ההצמדה מנוטרלת בטלפון, וזו אינה החמרה אלא תיקון.** ‎.admin-panel.docked‎
       הוא (0,2,0) עם ‎!important‎ והכלל שמתחתיו כאן הוא (0,1,0) עם ‎!important‎ -
       כלומר **ההצמדה מנצחת**, ומצב שנשמר במחשב (‎peleg_admin_dock‎) גובר על
       פריסת הטלפון. נמדד ב-390: הפאנל יצא ‎31,0,359,844‎ במקום ‎10,10,371,825‎ -
       צמוד לקצה, בלי הריפוד ובלי הפינות, ו-‎359‎ הוא בדיוק ה-‎max-width: 92vw‎
       של ההצמדה. ה-‎.docked‎ בסלקטור מעלה אותנו ל-(0,2,0) ומכריע בחזרה. */
    .admin-panel,
    .admin-panel.docked {
        inset: 0.6rem !important;
        width: auto !important;
        height: auto !important;
        max-width: none;
        max-height: none;
        border-radius: 18px;            /* כמו ‎.admin-panel‎ הבסיסי; ההצמדה מאפסת אותו */
        resize: none;
    }
    /* **וכפתור ההצמדה יורד -הוא אינו יכול לקיים את מה שהוא מבטיח.** כל מטרתה
       היא לראות את האתר **לצד** הפאנל, ונמדד שבטלפון נשארת רצועה של ‎31px‎
       מתוך ‎390‎ (8%). זו אותה החלטה שכבר תועדה כאן על מד השקיפות, שיורד מתחת
       ל-420px: כוונון שאפשר לעשות במצב צף יורד, וכפתור הסגירה אינו ויתור.
       מה שהוא מפנה הולך למסלול המיקום -נמדד ‎197px‎ לשורת הכפתורים מול ‎94px‎
       למסלול, שהוצג כ-"ע…", תו אחד. */
    #adminDockBtn, .admin-panel.docked .admin-resize { display: none; }
    .admin-panel-head { cursor: default; }
    /* היה כאן ‎.admin-nav { min-width: 6.8rem }‎ -**כלל מת**: ה-specificity זהה
       לכלל הבסיס שיושב **אחריו** בקובץ (‎min-width: 6rem‎), ולכן הוא נדרס ולא
       עשה דבר. מרגע שהתפריט הוא מגירה (ראה "התפריט כמגירה") הרוחב שלה נקבע שם,
       והכלל היה מיותר גם אילו עבד. */
    /* בתפריט הקבוע הפריטים כווצו כדי להיכנס ל-136px. במגירה יש 15rem, ולכן הם
       חוזרים לגודל מלא ומקבלים יעד נגיעה של 44px (ראה הבלוק של ‎pointer: coarse‎). */
    .admin-nav-item { padding: 0.6rem 0.7rem; }
}

@media (prefers-reduced-motion: reduce) {
    .admin-overlay, .admin-login, .admin-panel { animation: none; }
    .admin-key { transition: opacity 0.2s; }
}

/* ---- ניהול משתמשים ---- */
.admin-users { display: flex; flex-direction: column; gap: 0.45rem; }
.admin-user-row {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    padding: 0.5rem 0.7rem;
    background: linear-gradient(180deg, rgba(255, 231, 163, 0.08), rgba(13, 62, 120, 0.32));
    border: 1px solid rgba(255, 231, 163, 0.28);
    border-radius: 12px;
    transition: border-color 0.15s, transform 0.1s;
}
.admin-user-row:hover { border-color: rgba(255, 231, 163, 0.55); }
.admin-user-avatar {
    flex: 0 0 auto;
    width: 1.9rem; height: 1.9rem;
    display: flex; align-items: center; justify-content: center;
    border-radius: 50%;
    background: linear-gradient(180deg, #9a6a3c, var(--c-wood-deep));
    border: 1px solid rgba(255, 231, 163, 0.5);
    font-size: 0.9rem;
}
/* שם המשתמש כעמודה: שורת השם למעלה, האימייל מתחתיה -שניהם מיושרים לתחילת
   השורה (ימין ב-RTL), כך שהאימייל יושב בדיוק מתחת לשם ולא "מרחף" באמצע. */
.admin-user-name { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.08rem; }
.admin-user-name-top { font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-user-name small { font-weight: 400; opacity: 0.6; }
/* אימייל המשתמש (החיבור לכניסת Google): תוכן LTR אך מיושר לימין (start ב-RTL),
   מתחת לשם. אליפסיס אם ארוך מדי. */
.admin-user-email {
    font-size: 0.72rem;
    font-weight: 400;
    opacity: 0.75;
    color: #cfe8ff;
    direction: ltr;
    text-align: right;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-role-badge {
    flex: 0 0 auto;
    font-size: 0.72rem;
    font-weight: 700;
    padding: 0.18rem 0.6rem;
    border-radius: 999px;
    border: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.admin-role-admin  { background: linear-gradient(180deg, #e0452e, #a5301c); color: #fff; }
.admin-role-editor { background: linear-gradient(180deg, var(--c-gold), var(--c-gold-deep)); color: var(--c-wood-deep); }
.admin-role-viewer { background: linear-gradient(180deg, #5ba3e6, #2f7fce); color: #fff; }
.admin-user-actions { display: flex; gap: 0.35rem; flex: 0 0 auto; }
.admin-uedit, .admin-udel {
    width: 1.9rem; height: 1.9rem;
    display: flex; align-items: center; justify-content: center;
    border: 1px solid rgba(255, 231, 163, 0.3);
    border-radius: 8px; cursor: pointer;
    background: rgba(255, 231, 163, 0.14); color: #fff; font-size: 0.85rem;
    transition: background 0.15s, transform 0.1s;
}
.admin-uedit:hover { background: rgba(255, 231, 163, 0.32); transform: translateY(-1px); }
.admin-udel:hover  { background: rgba(224, 69, 46, 0.6); border-color: rgba(224,69,46,0.8); transform: translateY(-1px); }
.admin-uself { opacity: 0.4; pointer-events: none; }

/* טופס משתמש -קומפקטי, שדות בשורה */
.admin-uform {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(10.5rem, 100%), 1fr));
    gap: 0.6rem 0.8rem;
    align-items: end;
}
.admin-uform > .admin-ubtn,
.admin-uform > .admin-uerror,
.admin-uform > .admin-dialog-actions { grid-column: 1 / -1; }
.admin-uform > .admin-ubtn { margin-top: 0.7rem; } /* רווח נוסף בין השדות לכפתור */
.admin-uform > input[type="hidden"] { display: none; }
.admin-ufield { display: flex; flex-direction: column; gap: 0.28rem; }
.admin-ufield span { font-size: 0.78rem; font-weight: 700; color: #cfe8ff; }
.admin-ufield span small { font-weight: 400; opacity: 0.7; }
.admin-ufield input, .admin-ufield select {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: inherit;
    font-weight: 700;
    font-size: 0.92rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.admin-ufield input::placeholder { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
.admin-ufield select option { color: #14203a; background: #fff; } /* רשימת הבחירה קריאה */
.admin-ufield input:hover, .admin-ufield select:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.admin-ufield input:focus, .admin-ufield select:focus {
    outline: none;
    border-color: var(--c-gold);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3);
}
.admin-ufield input[name="username"],
.admin-ufield input[name="pass"],
.admin-ufield input[name="pass2"],
.admin-ufield input[name="email"],
.admin-ufield input[type="email"] { direction: ltr; text-align: left; }
/* שדה מלא-רוחב בתוך ה-grid של admin-uform (למשל אימייל, שהוא ארוך) */
.admin-uform > .admin-ufield-wide { grid-column: 1 / -1; }
/* ---- טופסי משתמשים -פריסה קומפקטית ומיושרת ----
   שדות צמודים יותר, מיושרים לראש (לא לתחתית -כך שדה גבוה לא "מותח" את השורה),
   כותרות קטנות, וכפתור בגודל טבעי מיושר להתחלה במקום פס ענק על כל הרוחב. */
.admin-uform.uform-users { gap: 0.55rem 0.7rem; align-items: start; }
.admin-uform.uform-users > .admin-ufield > span { font-size: 0.74rem; }
.admin-uform.uform-users > .admin-ufield input,
.admin-uform.uform-users > .admin-ufield select { padding: 0.5rem 0.65rem; }
.admin-uform.uform-users > .admin-ubtn {
    grid-column: 1 / -1;
    justify-self: start;
    margin-top: 0.5rem;
    padding: 0.55rem 1.5rem;
}

/* ---- בקרות עיצוב טקסט בתיק העבודות (גופן/גודל/צבע) ---- */
.pf-typo { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem 0.7rem; align-items: end; margin-top: 0.7rem; }
.pf-typo .admin-ufield span { font-size: 0.74rem; }
.pf-typo-scale { width: 100%; }
.pf-typo-coloron-row { grid-column: 1 / -1; margin: 0 !important; }
.pf-typo-color {
    grid-column: 1 / -1; width: 100%; height: 2.4rem; padding: 0.2rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 8px;
    background: rgba(255, 255, 255, 0.08); cursor: pointer;
}
.pf-typo-color:disabled { opacity: 0.4; cursor: not-allowed; }
.admin-ubtn {
    font-family: inherit; font-size: 0.95rem; font-weight: 700; cursor: pointer;
    color: var(--c-wood-deep);
    background: linear-gradient(180deg, var(--c-gold-light), var(--c-gold) 55%, var(--c-gold-deep));
    border: 1px solid var(--c-gold-deep);
    border-radius: 12px;
    padding: 0.5rem 1rem;
    box-shadow: 0 3px 0 #8a5f22, inset 0 1px 0 #fff;
    transition: transform 0.12s, filter 0.2s;
}
.admin-ubtn:hover { filter: brightness(1.05); }
.admin-ubtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #8a5f22; }
.admin-ubtn-ghost {
    color: #fff; background: rgba(255,231,163,0.12);
    border-color: rgba(255,231,163,0.4); box-shadow: none;
}
/* בתוך הדיאלוג הבהיר -"ביטול" בצבע עץ קריא (לא לבן שנעלם על הנייר) */
.admin-dialog .admin-ubtn-ghost {
    color: var(--c-wood-deep);
    background: rgba(122, 82, 40, 0.10);
    border-color: rgba(122, 82, 40, 0.45);
}
.admin-dialog .admin-ubtn-ghost:hover {
    background: rgba(122, 82, 40, 0.18);
    filter: none;
}
/* "יציאה בלי לשמור" -‎ghost‎ **אדמדם**. היא ההרסנית מבין השלוש, ובלי הבחנה
   היא נראתה זהה ל"המשך עריכה". הסלקטור (0,3,0) גובר על כלל ה-ghost שמעליו. */
.admin-dialog .admin-ubtn-ghost.is-danger {
    color: #9c2b30;
    background: rgba(180, 50, 55, 0.10);
    border-color: rgba(180, 50, 55, 0.45);
}
.admin-dialog .admin-ubtn-ghost.is-danger:hover { background: rgba(180, 50, 55, 0.18); }
.admin-ubtn-danger {
    color: #fff; background: linear-gradient(180deg, #E0452E, #a5301c);
    border-color: #a5301c; box-shadow: 0 3px 0 #7a2416, inset 0 1px 0 rgba(255,255,255,0.3);
}
.admin-uerror {
    background: rgba(224, 69, 46, 0.16); color: #ffd0c7;
    border: 1px solid rgba(224, 69, 46, 0.45); border-radius: 8px;
    padding: 0.4rem 0.6rem; font-size: 0.85rem;
}
/* בתוך דיאלוג (רקע בהיר) -טקסט שגיאה כהה כדי שייראה */
.admin-dialog .admin-uerror { background: rgba(224, 69, 46, 0.14); color: #a5301c; border-color: rgba(224, 69, 46, 0.5); }

/* דיאלוג (עריכה/מחיקה) */
/* **‎fixed‎ ו-z גבוה, לא ‎absolute‎ בתוך הפאנל.**
   הדיאלוגים ישבו ב-‎absolute‎ עם ‎z-index: 10‎ בתוך ‎#adminPanel‎ (z 125), ולכן כל
   מה שמעל הפאנל הסתיר אותם: חלון עריכת הפרויקט המוגדל (‎.pf-zoom-overlay‎, z 135)
   בלע את "מסגרת ועיגול" ואת בורר המדיה לגמרי -התפריט נפתח, נבחר פריט, ושום
   חלון לא נראה. 220 הוא מעל תפריט הקליק-ימני (200) וידיות התמונה (210).

   מותר להם להיות ‎fixed‎ למרות שהם ילדי הפאנל, כי ‎admin-rise‎ מסתיימת ב-
   ‎transform: none‎ -אב עם transform היה הופך ל-containing block והם היו נמדדים
   ביחס לפאנל במקום למסך (אותה מלכודת שכבר עלתה בכרטיס הפרויקט). */
.admin-dialog-overlay {
    position: fixed; inset: 0; z-index: 220;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    background: rgba(0, 0, 0, 0.45);
    animation: admin-fade 0.2s ease both;
}
.admin-dialog-overlay[hidden] { display: none; }
/* אישור המחיקה נפתח **מעל** בורר התמונות, שהוא עצמו דיאלוג באותו z. הוא מוקדם
   ממנו במסמך, ולכן בלי זה הבורר היה מצויר מעליו ו"אישור המחיקה לא נפתח". */
#mediaDelOverlay { z-index: 230; }
.admin-dialog {
    width: min(22rem, 94%);
    background: linear-gradient(180deg, rgba(255,246,230,0.99), rgba(255,240,214,0.99));
    color: var(--c-wood-deep);
    border: 2px solid var(--c-gold-deep);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 18px 44px rgba(0,0,0,0.5);
    animation: admin-rise 0.22s cubic-bezier(0.2,1.3,0.4,1) both;
}
.admin-dialog-sm { width: min(20rem, 94%); }
/* **תקרת גובה לכל דיאלוג.** היא הייתה על ‎.admin-dialog-wide‎ בלבד, ולכן
   דיאלוג צר וארוך -טבלת הסימנים, שהיא שש קבוצות ומעל מאה תווים- גדל בלי
   גבול: ה-overlay הוא ‎align-items: center‎, ולכן הוא חרג **משני** הקצוות
   ושורת הכותרת עם ה-‎✕‎ יצאה מעל ראש המסך. כלומר דיאלוג שאי אפשר לסגור.
   ‎dvh‎ ולא ‎vh‎ (חוק מתועד): באייפון ‎vh‎ נמדד מול ה-viewport הגדול, בלי
   סרגלי ספארי -וזו בדיוק הרצועה שנחתכת. */
.admin-dialog { max-height: 94vh; }
.admin-dialog { max-height: 94dvh; }
/* ‎max-height‎ לבדו רק **גוזר** את התחתית (‎.admin-dialog‎ הוא ‎overflow: hidden‎
   בשביל הפינות המעוגלות). כדי שהגוף יגלול בפנים הוא חייב לקבל את מה שנשאר
   אחרי הכותרת, ולכן הדיאלוג הנגלל הוא טור flex. **רק ‎-scroll‎**, שלא לשנות
   דיאלוגים אחרים שאינם מבקשים גלילה. */
.admin-dialog-scroll { display: flex; flex-direction: column; }
.admin-dialog-scroll .admin-dialog-head { flex: 0 0 auto; }
.admin-dialog-scroll .admin-dialog-body { flex: 1 1 auto; min-height: 0; }
/* חלון רחב: גדל **לרוחב** ולא לאורך. הגובה מוגבל, והגלילה יורדת אל תוך העמודה
   שבאמת צריכה אותה (רשת התמונות) במקום להאריך את החלון עד מחוץ למסך. */
/* ---- ידיות המתיחה בדיאלוג ----
   אותן ידיות של חלונות העריכה, אבל **נמשכות פנימה**: ‎.admin-dialog‎ הוא
   ‎overflow: hidden‎ (הפינות המעוגלות), וידית שיושבת ב-‎-3px‎ מחוצה לו נגזרת
   ואי אפשר לתפוס אותה. כאן הן על הגבול עצמו, בתוך אזור הגזירה. */
.admin-dialog > .pf-win-rs-n  { top: 0; }
.admin-dialog > .pf-win-rs-s  { bottom: 0; }
.admin-dialog > .pf-win-rs-e  { right: 0; }
.admin-dialog > .pf-win-rs-w  { left: 0; }
.admin-dialog > .pf-win-rs-ne { top: 0; right: 0; }
.admin-dialog > .pf-win-rs-nw { top: 0; left: 0; }
.admin-dialog > .pf-win-rs-se { bottom: 0; right: 0; }
.admin-dialog > .pf-win-rs-sw { bottom: 0; left: 0; }
/* בזמן מתיחה -בלי בחירת טקסט, והתוכן אינו חוטף אירועים */
.admin-dialog.is-resizing { user-select: none; }
.admin-dialog.is-resizing .admin-dialog-body { pointer-events: none; }
/* גובה מפורש דורש שהגוף יתפוס את מה שנשאר ויגלול בעצמו */
.admin-dialog-wide { min-height: 0; }

/* ‎position: relative‎ נדרש לגרירה: ‎makeWindowDraggable‎ כותב ‎left/top‎ כ**היסט
   מהמיקום הממורכז**, ועל פריט flex בלי מיקום הם פשוט לא עושים דבר. */
/* ‎dvh‎ מאותה סיבה של ‎.admin-dialog‎ למעלה -באייפון ‎vh‎ מתעלם מסרגלי ספארי */
.admin-dialog-wide { width: min(64rem, 96%); max-height: min(88vh, 46rem); display: flex; flex-direction: column; position: relative; }
.admin-dialog-wide { max-height: min(88dvh, 46rem); }
.admin-dialog-wide > .admin-dialog-head { cursor: move; user-select: none; touch-action: none; }
.admin-dialog-wide > .admin-dialog-head.is-dragging { cursor: grabbing; }
.admin-dialog-wide .admin-dialog-body { flex: 1; min-height: 0; }
/* **גוף שנגלל בעצמו.** בבורר התמונות הגלילה יורדת אל תוך העמודה שצריכה אותה,
   ולכן הגוף עצמו מעולם לא נגלל -אבל דיאלוג שהוא טור ארוך אחד (הגלריה: 14
   בוררים, תצוגה מקדימה ורשימת התמונות) פשוט נחתך ב-‎max-height‎ בלי שום דרך
   להגיע לתחתית. המחלקה ניתנת במפורש כדי לא לשנות את הבורר. */
.admin-dialog-scroll .admin-dialog-body { overflow-y: auto; overflow-x: hidden; }
.admin-dialog-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 0.6rem 0.9rem;
    background: linear-gradient(180deg, #9a6a3c, var(--c-wood));
    /* **הגופן יורש מהפאנל ואינו נקבע כאן.** ‎'Suez One'‎ הוא גופן תצוגה
       כבד שנועד לכותרות באתר; בשורת כותרת של דיאלוג ניהול הוא יוצא זר
       ליתר הפאנל ופחות קריא בגודל הזה. המשקל נשאר -זו עדיין כותרת. */
    color: var(--c-paper); font-family: inherit; font-size: 1rem; font-weight: 800;
    letter-spacing: 0.01em;
}
.admin-dialog-head-danger { background: linear-gradient(180deg, #E0452E, #a5301c); }
.admin-dialog-x {
    width: 1.6rem; height: 1.6rem; border: none; border-radius: 50%;
    background: rgba(0,0,0,0.18); color: #fff; cursor: pointer; font-size: 0.8rem;
}
.admin-dialog-x:hover { background: rgba(0,0,0,0.35); }
/* ‎--scroll-pad‎ כמו ב-‎.admin-panel-body‎: ‎position: sticky‎ נמדד מול ה-padding
   box, ולכן סרגל נדבק בתוך דיאלוג חייב לקזז את הריפוד הזה כדי להיצמד באמת
   לקצה. נמדד ב-‎.wg-bar‎: בלי קיזוז מלא נשארה רצועה של 5px שדרכה הציץ התוכן
   שגלל מתחת. משתנה ולא מספר, כדי שהשניים לא ייפרדו. */
.admin-dialog-body, .admin-dialog form { --scroll-pad: 0.9rem; padding: var(--scroll-pad); }
.admin-dialog-body p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 0.9rem; }
.admin-dialog-actions { display: flex; gap: 0.6rem; justify-content: flex-start; margin-top: 0.3rem; align-items: center; flex-wrap: wrap; }
/* "הוספת תמונות" בקצה השני של הסרגל. ‎margin-right: auto‎ **פיזי**: המרווח
   האוטומטי בולע את המקום הפנוי מימין לכפתור ודוחף אותו שמאלה -וזה הצד שבו
   המשתמש ביקש אותו, בלי תלות בכיוון הכתיבה. */
.wg-add-end { margin-right: auto; margin-left: 0.5rem; }
/* בצר הוא יורד לשורה משלו ברוחב מלא: מרווח אוטומטי בשורה שנשברה מפזר את
   הכפתורים באקראי, ו"בין ביטול לעדכון" אינו מקום שמישהו יחפש בו הוספה. */
@media (max-width: 560px) { .wg-add-end { flex: 1 1 100%; margin: 0.35rem 0 0; } }

/* בתוך הדיאלוג הבהיר -תוויות ושדות בצבעי עץ כהים (לא התכלת של הפאנל הכהה) */
.admin-dialog .admin-ufield span { color: var(--c-wood-deep); }
.admin-dialog .admin-ufield input, .admin-dialog .admin-ufield select { background: #fff; color: var(--c-night); border-color: rgba(211, 154, 26, 0.45); font-weight: 400; }
.admin-dialog .admin-ufield input::placeholder { color: rgba(74, 54, 32, 0.45); }
.admin-dialog .admin-hint { color: #6b5334; opacity: 0.95; }
/* הערה בתוך דיאלוג בהיר -טקסט עץ כהה קריא (במקום הזהב של הפאנל הכהה) */
.admin-dialog .admin-note {
    background: rgba(122, 82, 40, 0.12);
    border-color: rgba(122, 82, 40, 0.4);
    color: var(--c-wood-deep);
}
.admin-dialog .admin-note b { color: var(--c-wood-deep); }

/* מצבי ולידציה של שדה */
.admin-ufield input.is-valid   { border-color: #3aa657; box-shadow: 0 0 0 3px rgba(58, 166, 87, 0.20); }
.admin-ufield input.is-invalid { border-color: #d9483b; box-shadow: 0 0 0 3px rgba(217, 72, 59, 0.20); }

/* שורת רמז/ולידציה מעוצבת */
.admin-uhint {
    grid-column: 1 / -1;
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.8rem; font-weight: 700;
    margin-top: -0.1rem; min-height: 1.15rem;
    transition: color 0.15s;
}
.admin-uhint::before {
    content: ''; flex: none;
    width: 0.72rem; height: 0.72rem; border-radius: 50%;
    background: currentColor; box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.6);
}
.admin-uhint[data-state="idle"] { color: rgba(74, 54, 32, 0.55); }
.admin-uhint[data-state="idle"]::before { display: none; }
.admin-uhint[data-state="ok"]  { color: #2f8a4d; }
.admin-uhint[data-state="bad"] { color: #c23b2e; }
.admin-ubtn:disabled { filter: grayscale(0.5) brightness(0.92); opacity: 0.6; cursor: not-allowed; box-shadow: 0 2px 0 #8a5f22; }

/* ==== SEO ==== */
/* שדה טקסט רב-שורתי -כמו input */
.admin-ufield textarea {
    width: 100%;
    padding: 0.55rem 0.7rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    color: #fff;
    font-family: inherit;
    font-size: 0.92rem;
    resize: vertical;
    min-height: 3rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.admin-ufield textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.admin-ufield textarea:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.admin-ufield textarea:focus {
    outline: none;
    border-color: var(--c-gold);
    background: rgba(255, 255, 255, 0.15);
    box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3);
}
.admin-dialog .admin-ufield textarea { background: #fff; color: var(--c-night); border-color: rgba(211, 154, 26, 0.45); }
.seo-form .seo-full { grid-column: 1 / -1; }
.seo-actions { display: flex; flex-direction: column; gap: 0.85rem; margin-top: 1.4rem; }
.seo-actions .admin-ubtn { align-self: flex-start; }

/* תצוגות מקדימות */
.seo-previews { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: 1rem; }
.seo-pv { display: flex; flex-direction: column; gap: 0.45rem; min-width: 0; }
.seo-pv-tag { font-size: 0.75rem; font-weight: 700; color: var(--c-gold-light); }

/* Google */
.seo-pv-google { }
.seo-pv-google .seo-g-url,
.seo-pv-google .seo-g-title,
.seo-pv-google .seo-g-desc { background: #fff; padding-inline: 0.85rem; }
.seo-pv-google .seo-g-url { padding-top: 0.7rem; border-radius: 10px 10px 0 0; }
.seo-g-url { font-size: 0.76rem; color: #202124; direction: ltr; text-align: left; }
.seo-g-url span { color: #5f6368; }
.seo-g-title { color: #1a0dab; font-size: 1.05rem; line-height: 1.3; margin: 0.15rem 0; }
.seo-g-desc {
    color: #4d5156; font-size: 0.82rem; line-height: 1.45; padding-bottom: 0.7rem; border-radius: 0 0 10px 10px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* כרטיס שיתוף חברתי */
.seo-s-card { border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 12px; overflow: hidden; }
.seo-s-img {
    height: 8.5rem;
    background-color: #1a2736; background-size: cover; background-position: center; background-repeat: no-repeat;
    display: flex; align-items: center; justify-content: center;
}
.seo-s-img[data-empty="0"] > span { display: none; }
.seo-s-img > span { color: rgba(255, 255, 255, 0.45); font-size: 0.8rem; }
.seo-s-body { padding: 0.6rem 0.8rem; background: #f0f2f5; }
.seo-s-host { font-size: 0.66rem; color: #606770; letter-spacing: 0.02em; direction: ltr; text-align: left; }
.seo-s-title {
    color: #1c1e21; font-weight: 700; font-size: 0.94rem; line-height: 1.3; margin: 0.15rem 0;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.seo-s-desc {
    color: #606770; font-size: 0.78rem; line-height: 1.4;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.admin-ufield input[type="color"] { height: 2.4rem; padding: 0.2rem; cursor: pointer; }

/* ---- העלאת תמונת שיתוף ---- */
.seo-upload { gap: 0.4rem; }
.seo-upload-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; }
.admin-ubtn-file { position: relative; cursor: pointer; align-self: flex-start; }
.admin-ubtn-file input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
#seoOgStatus { margin: 0; }

/* ---- דיבור הדמויות ---- */
/* שתי קבוצות זו מתחת לזו: תזמון (2 מחוונים) וצבעים (3 שדות) -כל אחת בגריד משלה כדי שהשדות יהיו מיושרים */
.folk-form { display: grid; gap: 0.9rem; }
.folk-group {
    display: grid; gap: 0.6rem;
    padding: 0.85rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 231, 163, 0.18);
    border-radius: 12px;
}
.folk-group-title {
    font-size: 0.76rem; font-weight: 700; letter-spacing: 0.02em;
    color: var(--c-gold-light);
}
.folk-group-grid { display: grid; gap: 0.7rem 1.1rem; align-items: start; }
.folk-group-timing { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.folk-group-colors { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* תווית אחידה: כותרת מימין, הערך בתג זהב משמאל */
.folk-form .admin-ufield > span {
    display: flex; align-items: center; gap: 0.4rem;
    min-height: 1.5rem;
}
.folk-range > span b {
    margin-inline-start: auto;
    padding: 0.1rem 0.5rem; border-radius: 999px;
    background: rgba(255, 209, 90, 0.18); border: 1px solid rgba(255, 209, 90, 0.35);
    color: var(--c-gold-light); font-size: 0.78rem;
}
.folk-range > span i { font-style: normal; font-weight: 400; opacity: 0.7; font-size: 0.72rem; }
.folk-form input[type="range"] { width: 100%; accent-color: var(--c-gold); cursor: pointer; }
/* הרמזים בשתי העמודות מתחילים באותו גובה גם כשאחד נשבר לשתי שורות */
.folk-range .admin-hint { min-height: 2.2rem; margin: 0; line-height: 1.35; }
.folk-color input[type="color"] { width: 100%; height: 2.6rem; }
@media (max-width: 700px) {
    .folk-group-timing, .folk-group-colors { grid-template-columns: 1fr; }
    .folk-range .admin-hint { min-height: 0; }
}
/* סעיף שבא מיד אחרי טופס (למשל "מפת האתר" אחרי טופס ה-SEO) -רווח מההודעה שמעליו */
.admin-tab > form + .admin-collapsible { margin-top: 1.4rem; }

/* ---- אפקט מעבר לעמודי המערכת ---- */
.sys-trans {
    display: grid; gap: 0.5rem;
    margin-top: 0.9rem; padding: 0.8rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 231, 163, 0.18); border-radius: 12px;
}
.sys-trans-title { font-size: 0.8rem; font-weight: 800; color: var(--c-gold-light); }
.sys-trans-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap;
}
.sys-trans-name { display: flex; align-items: baseline; gap: 0.4rem; font-size: 0.86rem; font-weight: 700; color: #eaf2ff; }
.sys-trans-name small { font-size: 0.72rem; color: var(--c-gold-light); opacity: 0.8; }
.sys-trans-select {
    width: 100%;
    padding: 0.4rem 0.6rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: inherit; font-size: 0.86rem; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.sys-trans-select:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.sys-trans-select:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3); }
.sys-trans-select option { color: #14203a; background: #fff; }
/* בתוך שורת עמוד המערכת -רוחב קבוע ליד השם (ב-.admin-ufield הוא ממלא את השדה) */
.sys-trans-row .sys-trans-select { flex: 0 1 13rem; min-width: 9rem; width: auto; }
@media (max-width: 560px) { .sys-trans-row .sys-trans-select { flex: 1 1 100%; } }

/* ---- שעות מצבי התאורה (זריחה/יום/שקיעה/לילה) ---- */
.dl-hours {
    display: grid; gap: 0.5rem;
    margin-top: 0.9rem; padding: 0.8rem 0.9rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 231, 163, 0.18); border-radius: 12px;
}
.dl-hours-title { font-size: 0.8rem; font-weight: 800; color: var(--c-gold-light); }
/* שתי עמודות במסך רחב, אחת בצר -ארבע שורות מלאות דחקו את השדות לרוחב 5 תווים.
   ‎min(15rem, 100%)‎ ולא ‎15rem‎: מסילה במינימום קשיח אינה יורדת מתחתיו, ולכן
   בעמודת תוכן של 142px (נמדד ב-390px) היא נשארה 240px והתוכן **נחתך** בקצה -
   אותה מלכודת ‎minmax‎ שכבר תועדה בגלריית העבודות. */
.dl-hours-grid { display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); }
.dl-hours-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
}
/* ‎min-width: 0‎ ו-‎flex‎ עם בסיס גמיש: בלעדיהם התווית לא מתכווצת ולא נשברת,
   ובעמודה צרה (נמדד ב-390px) היא נחתכה באמצע מילה -"זריחה - מתחיל בשעו". */
.dl-hours-name { flex: 1 1 8rem; min-width: 0; font-size: 0.86rem; font-weight: 700; color: #eaf2ff; }
.dl-hours-pick { display: inline-flex; align-items: center; gap: 0.25rem; flex: 0 0 auto; }
.dl-hours-sep { color: var(--c-gold-light); font-weight: 800; }

/* ============================================================
   בורר מעוצב (‎ui-pick‎) -רכיב אחד לכל הפאנל
   ============================================================
   עוטף ‎<select>‎ אמיתי (ראה js/admin.js): את רשימת ה-‎option‎ מצייר מנוע מערכת
   ההפעלה ואי אפשר לעצב אותה מעבר לצבע רקע -היא נראתה כחלון לבן זר גם בפאנל
   הכהה וגם בקלף הבהיר של הדיאלוגים.

   ‎.ui-pick-native‎ = ה-‎select‎ עצמו. הוא **נשאר בעץ** (מקור-האמת של הערך)
   אבל יוצא מהתצוגה. לא ‎display: none‎ -אלמנט כזה אינו נמדד, ובורר שהיה
   חלק מפריסת ‎flex‎ היה מקפיץ את השורה. */
.ui-pick-native {
    position: absolute; width: 1px; height: 1px;
    opacity: 0; pointer-events: none; clip-path: inset(50%);
}
.ui-pick {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 0.4rem;
    /* אותו ריפוד אנכי של ‎.admin-ufield input‎ (0.55rem), ובנוסף ‎min-height‎
       נמדד (39.6px) -הריפוד לבדו קרוב אך לא זהה (הפרש שם/גופן פנימי מול
       ‎input‎ פשוט). בלי זה בורר שיושב לצד שדה טקסט/מספר באותה שורה נמוך
       ממנו, ונקרא כשורה לא-מיושרת -אותו כלל שכבר קיים כאן ל-‎.ui-pick-light‎. */
    padding: 0.55rem 0.5rem;
    min-height: 2.475rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: inherit; font-size: 0.9rem; font-variant-numeric: tabular-nums;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.ui-pick:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.ui-pick:focus-visible { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3); }
.ui-pick[aria-expanded="true"] { border-color: var(--c-gold); background: rgba(255, 209, 90, 0.18); }
.ui-pick:disabled { opacity: 0.45; cursor: not-allowed; }
/* **שורה אחת, ועודף נחתך בשלוש נקודות.** שם גופן ארוך ("ורלה עגול - Varela
   Round") נשבר לשתי שורות והכפתור גדל בגובה -שורת בוררים שאחד מהם גבוה
   מהאחרים נקראת כתקלת פריסה. ‎min-width: 0‎ הוא התנאי: בלעדיו פריט flex אינו
   מצטמצם מתחת לרוחב התוכן, וה-‎ellipsis‎ לא היה נכנס לפעולה. */
.ui-pick-val {
    min-width: 0; flex: 1 1 auto;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* גובה אחיד לכל הבוררים בשורה, גם כשהתווית קצרה */
.ui-pick-light { min-height: 2.35rem; }
/* החץ מצויר ב-CSS ולא כתו: ‎▾‎ הוא טקסט וה-bidi מזיז אותו בשורה עברית */
.ui-pick-chev {
    flex: 0 0 auto;
    width: 0; height: 0;
    border-inline: 4px solid transparent;
    border-top: 5px solid var(--c-gold-light, #ffe7a3);
    transition: transform 0.15s;
}
.ui-pick[aria-expanded="true"] .ui-pick-chev { transform: rotate(180deg); }

/* ---- הווריאנט הבהיר: דיאלוגים ----
   **זהב על קלף בהיר אינו קריא** -כלל שכבר נקנה כאן בדיאלוגים של ניהול
   התגיות ובבורר התמונות. הדיאלוג בהיר, ולכן גם הבורר והרשימה שלו. */
.ui-pick-light {
    border-color: rgba(74, 47, 18, 0.32);
    background: rgba(255, 255, 255, 0.75); color: #3a2a15;
    justify-content: space-between; width: 100%;
    padding: 0.45rem 0.7rem;
}
.ui-pick-light:hover { border-color: rgba(74, 47, 18, 0.6); background: #fff; }
.ui-pick-light:focus-visible { border-color: #a9760f; box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.45); }
.ui-pick-light[aria-expanded="true"] { border-color: #a9760f; background: #fff; }
.ui-pick-light .ui-pick-chev { border-top-color: #7b5a1c; }

/* הרשימה יושבת על ה-‎body‎ ולא ליד הכפתור: ‎.admin-collapsible‎ הוא
   ‎overflow: clip‎ (בשביל הפינות המעוגלות ובשביל הכותרת הנדבקת), וכל דבר
   שנפתח בתוכו היה נגזר בגבול הסעיף. ‎z-index‎ מעל דיאלוגי הפאנל (220-230). */
.ui-pick-list {
    position: fixed; z-index: 250;
    max-height: 15rem; overflow-y: auto;
    min-width: 4.2rem; padding: 0.25rem;
    border: 1.5px solid rgba(255, 231, 163, 0.45); border-radius: 12px;
    background: linear-gradient(180deg, #14417a, #0d2b53);
    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.55);
    font-variant-numeric: tabular-nums;
    animation: admin-fade 0.12s ease both;
}
.ui-pick-opt {
    display: block; width: 100%;
    padding: 0.3rem 0.7rem;
    border: 0; border-radius: 8px;
    background: none; color: #eaf2ff;
    font: inherit; text-align: center; cursor: pointer;
}
.ui-pick-opt:hover, .ui-pick-opt.is-cursor { background: rgba(255, 231, 163, 0.18); }
.ui-pick-opt.is-on { background: var(--c-gold, #ffd15a); color: #14203a; font-weight: 800; }
/* רשימה בהירה -לדיאלוגים */
.ui-pick-list-light {
    border-color: rgba(74, 47, 18, 0.3);
    background: linear-gradient(180deg, #fffaf0, #f6ecd8);
    box-shadow: 0 16px 40px rgba(60, 40, 10, 0.32);
}
.ui-pick-list-light .ui-pick-opt { color: #3a2a15; text-align: right; }
.ui-pick-list-light .ui-pick-opt:hover,
.ui-pick-list-light .ui-pick-opt.is-cursor { background: rgba(169, 118, 15, 0.14); }
.ui-pick-list-light .ui-pick-opt.is-on { background: var(--c-gold, #ffd15a); color: #3a2a15; }
@media (prefers-reduced-motion: reduce) { .ui-pick-list { animation: none; } }

.dl-hours-reset { justify-self: start; }
/* המתג הראשי כבוי -הפקדים נשארים (הבחירה נשמרת) אך מסומנים כלא-פעילים */
.dl-hours.is-off { opacity: 0.5; }

/* ---- מפת האתר (sitemap) ---- */
.sitemap-stats { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.8rem 0; }
.sitemap-stat {
    padding: 0.3rem 0.7rem; border-radius: 999px;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 231, 163, 0.28);
    font-size: 0.8rem; color: #eaf2ff;
}
.sitemap-stat b { color: var(--c-gold-light); font-size: 0.95rem; }
.sitemap-stat-on  { background: rgba(75, 208, 122, 0.18); border-color: rgba(75, 208, 122, 0.45); }
.sitemap-stat-off { background: rgba(224, 69, 46, 0.2); border-color: rgba(224, 69, 46, 0.5); }
.sitemap-links { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0.8rem; }
.sitemap-list { list-style: none; display: flex; flex-direction: column; gap: 0.4rem; max-height: 20rem; overflow-y: auto; }
.sitemap-item {
    display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap;
    padding: 0.5rem 0.7rem; border-radius: 9px;
    background: rgba(13, 62, 120, 0.3); border-inline-start: 3px solid var(--c-gold);
    transition: opacity 0.15s, border-color 0.15s, background 0.15s;
}
.sitemap-item.is-off { opacity: 0.5; border-inline-start-color: rgba(255, 255, 255, 0.25); }
.sitemap-loc { font-size: 0.76rem; color: #cfe8ff; word-break: break-all; }
.sitemap-meta { font-size: 0.72rem; color: var(--c-gold-light); opacity: 0.85; white-space: nowrap; }

/* תיבת סימון מעוצבת -מה נכלל במפה */
.sitemap-check { display: flex; align-items: center; gap: 0.6rem; cursor: pointer; min-width: 0; flex: 1 1 14rem; }
.sitemap-check input { position: absolute; opacity: 0; width: 0; height: 0; }
.sitemap-box {
    flex: 0 0 auto; width: 1.35rem; height: 1.35rem; border-radius: 7px;
    border: 2px solid rgba(255, 231, 163, 0.45);
    background: rgba(255, 255, 255, 0.08);
    display: flex; align-items: center; justify-content: center;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.sitemap-box::after { /* סימן וי -מצויר, ללא גופן */
    content: ''; width: 0.34rem; height: 0.66rem;
    border: solid #06263f; border-width: 0 3px 3px 0;
    transform: rotate(45deg) scale(0.4); opacity: 0;
    transition: transform 0.15s cubic-bezier(0.2, 1.4, 0.4, 1), opacity 0.12s;
    margin-bottom: 0.12rem;
}
.sitemap-check:hover .sitemap-box { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.15); }
.sitemap-check input:checked + .sitemap-box { background: var(--c-gold); border-color: var(--c-gold-deep); }
.sitemap-check input:checked + .sitemap-box::after { transform: rotate(45deg) scale(1); opacity: 1; }
.sitemap-check input:focus-visible + .sitemap-box { box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.35); }
.sitemap-texts { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; }
.sitemap-title { display: flex; align-items: center; gap: 0.4rem; font-size: 0.86rem; font-weight: 700; color: #fff; }
.sitemap-tag {
    padding: 0.05rem 0.4rem; border-radius: 999px; font-size: 0.62rem; font-weight: 800;
    color: #06263f; background: var(--c-gold);
}

/* ---- robots.txt ----
   ‎is-idle‎: המתג הראשי כבוי, ולכן שאר הסעיף מעומעם ואינו לחיץ. **לא**
   ‎display: none‎ -הבחירות נשמרות ורואים אותן, וזה מה שהופך את הכיבוי
   להחלטה הפיכה ולא למחיקה. הצורה זהה בשני הסעיפים ולכן היא כלל אחד. */
.sitemap-body.is-idle,
.robots-body.is-idle { opacity: 0.42; pointer-events: none; user-select: none; }
.sitemap-body, .robots-body { transition: opacity 0.18s; }
/* קו מפריד אחרי המתג הראשי. בלעדיו כל המתגים באותו משקל, ולא נקרא שהראשון
   שולט על השאר -נראה בצילום שהרווח בינו לבין הבא היה קטן מהרווח שביניהם. */
.robots-body {
    margin-top: 0.9rem; padding-top: 0.9rem;
    border-top: 1px solid rgba(255, 231, 163, 0.16);
}

/* ‎small‎ ו-‎code‎ בתווית מתג: ההסבר יורד לשורה משלו, ושם ה-User-agent הוא
   מחרוזת שנכתבת **כמות שהיא** לקובץ -ולכן הוא מוצג ב-‎ltr‎ ובגופן קבוע.

   **‎.admin-switch-rich‎ ולא כלל גלובלי על ‎.admin-switch-label small‎.** הדפוס
   הזה כבר קיים במקום אחר בפאנל (כרטיסי הדמויות: "(6 דמויות בסט)"), ושם ה-‎small‎
   הוא ‎inline‎ בהמשך השורה -כלל גלובלי היה מוריד אותו לשורה נפרדת ומשנה טאב
   שלא נגעתי בו. */
.admin-switch-rich .admin-switch-label small {
    display: block; margin-top: 0.15rem;
    font-size: 0.75rem; line-height: 1.5; font-weight: 400;
    color: #cfe8ff; opacity: 0.9;
}
.admin-switch-rich .admin-switch-label small b { color: var(--c-gold-light); }
.admin-switch-rich .admin-switch-label code {
    display: inline-block; margin-top: 0.2rem;
    padding: 0.05rem 0.4rem; border-radius: 5px;
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace; font-size: 0.7rem;
    color: var(--c-gold-light); background: rgba(0, 0, 0, 0.28);
    border: 1px solid rgba(255, 231, 163, 0.18);
}
/* רשימת הבוטים מתפרסת לעמודות כשיש רוחב. ‎min(...)‎ ולא מינימום קשיח -
   מסילה עם מינימום קשיח אינה יורדת מתחתיו, וזו המלכודת שכבר נמדדה כאן
   בגלריית העבודות, בשעות התאורה ובטאב הזה עצמו. */
.robots-bots {
    display: grid; gap: 0.5rem;
    grid-template-columns: repeat(auto-fit, minmax(min(19rem, 100%), 1fr));
}
.robots-bots .admin-switch {
    align-items: flex-start;
    padding: 0.5rem 0.6rem; border-radius: 10px;
    background: rgba(13, 62, 120, 0.3);
    border-inline-start: 3px solid rgba(255, 255, 255, 0.22);
    transition: border-color 0.15s, background 0.15s;
}
.robots-bots .admin-switch:hover { background: rgba(13, 62, 120, 0.45); }
.robots-bots .admin-switch:has(input:checked) { border-inline-start-color: #e0452e; }

/* תג המצב -שם הבוט אינו אומר מה המתג עושה, וזה מה שמשלים אותו.
   **הסלקטור הוא ‎~‎ (אח) ולא ‎:has()‎** בכוונה: זה מידע ולא קישוט, והוא חייב
   לעבוד גם היכן ש-‎:has()‎ אינו נתמך. ה-‎input‎ הוא אח קודם של התווית, ולכן
   הצירוף עובד בכל דפדפן. (‎:has()‎ שלמעלה נשאר -גבול צבעוני שאפשר לוותר עליו.) */
.robots-bots .rb-state {
    display: inline-block; margin-inline-start: 0.4rem; vertical-align: 1px;
    padding: 0.05rem 0.45rem; border-radius: 999px;
    font-size: 0.68rem; font-weight: 800; white-space: nowrap;
    color: #bfe6c8; background: rgba(75, 208, 122, 0.16);
    border: 1px solid rgba(75, 208, 122, 0.42);
    transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.robots-bots .rb-state::after { content: '✔ מורשה'; }
.robots-bots input:checked ~ .admin-switch-label .rb-state {
    color: #ffd7cf; background: rgba(224, 69, 46, 0.22); border-color: rgba(224, 69, 46, 0.55);
}
.robots-bots input:checked ~ .admin-switch-label .rb-state::after { content: '🚫 חסום'; }

.robots-prev-head {
    display: flex; align-items: center; justify-content: space-between;
    flex-wrap: wrap; gap: 0.5rem; margin: 0.9rem 0 0.4rem;
}
.robots-prev-head .admin-hint { margin: 0; }
/* התוצאה בפועל. סרגל הגלילה מעוצב -חוק הפרויקט; ‎overflow-x‎ כי שורת
   ה-Sitemap היא כתובת מלאה ואסור שהיא תגליש את הפאנל כולו. */
.robots-prev {
    max-height: 18rem; overflow: auto;
    padding: 0.7rem 0.8rem; border-radius: 10px;
    background: rgba(0, 0, 0, 0.34);
    border: 1px solid rgba(255, 231, 163, 0.22);
    font-family: ui-monospace, "SFMono-Regular", Consolas, monospace;
    font-size: 0.76rem; line-height: 1.65; color: #dff0ff;
    white-space: pre; tab-size: 4;
    scrollbar-width: thin; scrollbar-color: var(--c-gold-deep) rgba(0, 0, 0, 0.2);
}
.robots-prev:focus-visible { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3); }
.robots-prev.is-off { color: #ffb9ad; border-color: rgba(224, 69, 46, 0.5); }
.robots-prev::-webkit-scrollbar { width: 10px; height: 10px; }
.robots-prev::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.2); border-radius: 999px; }
.robots-prev::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, var(--c-gold), var(--c-gold-deep));
    border-radius: 999px; border: 2px solid transparent; background-clip: padding-box;
}
.robots-prev::-webkit-scrollbar-corner { background: transparent; }

/* הערת אזהרה -אותה צורה של ‎.admin-note‎ בגוון אדום */
.admin-note-warn {
    color: #ffd7cf;
    background: rgba(224, 69, 46, 0.16);
    border-color: rgba(224, 69, 46, 0.45);
    border-right-color: #e0452e;
}
.admin-note-warn b { color: #fff; }

/* חוק המובייל: בעמודת תוכן צרה הבוטים יורדים לעמודה אחת מעצמם (‎min()‎
   שלמעלה), והתצוגה מתקצרת כדי שלא תבלע את הסעיף. */
@media (max-width: 640px) {
    .robots-prev { max-height: 12rem; font-size: 0.72rem; }
    .robots-prev-head { margin-top: 0.7rem; }
}

/* ---- כפתור הנגישות במובייל: בורר מיקום + תצוגה מקדימה ---- */
.a11y-pos-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(7rem, 100%), 1fr)); gap: 0.5rem; }
.a11y-pos-opt {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 0.6rem 0.4rem; cursor: pointer;
    border: 1.5px solid rgba(255, 231, 163, 0.3); border-radius: 12px;
    background: rgba(255, 255, 255, 0.06);
    transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.a11y-pos-opt:hover { background: rgba(255, 255, 255, 0.12); transform: translateY(-1px); }
.a11y-pos-opt input { position: absolute; opacity: 0; pointer-events: none; }
.a11y-pos-icon { font-size: 1.2rem; color: var(--c-gold-light); line-height: 1; }
.a11y-pos-label { font-size: 0.76rem; font-weight: 700; color: #cfe8ff; text-align: center; }
/* ---- בורר צורת הנגן (לייטבוקס ← סרטונים) ----
   הצורה עצמה היא החיווי, ולכן היא מלבן מצויר ולא תו יוניקוד: ‎▭‎ ו-‎◻‎ נראים
   כמעט זהים בגופן, וזו בדיוק ההבחנה שהבורר בא לעשות. המידות מגיעות ב-‎style‎
   מ-PHP - ראה שם למה שתי יחידות ולא ‎aspect-ratio‎.
   ‎flex: 0 0 auto‎ + מיכל בגובה קבוע: בלעדיהם התיבות מתכווצות בעמודה צפופה
   וכל האריחים מקבלים גובה שונה. */
.lbfit-shape {
    flex: 0 0 auto; align-self: center;
    border: 2px solid var(--c-gold-light, #ffe7a3); border-radius: 3px;
    background: rgba(255, 231, 163, 0.14);
}
/* "מילוי" = בלי צורה משלו, ולכן קו מקווקו */
.lbfit-shape.is-fill { border-style: dashed; background: none; }
/* גובה אחיד לכל האריחים, בלי קשר לצורה שבתוכם */
#pfLbFitGrid .a11y-pos-opt { justify-content: center; min-height: 4.4rem; }
.a11y-pos-opt.is-on {
    border-color: var(--c-gold);
    background: rgba(255, 209, 90, 0.18);
    box-shadow: 0 0 0 2px rgba(255, 209, 90, 0.25);
}
/* 2x2: שני מחוונים בשורה, שני הצבעים מתחתיהם */
.a11y-btn-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 700px) { .a11y-btn-grid { grid-template-columns: 1fr; } }
.a11y-btn-pv {
    display: flex; align-items: center; justify-content: center;
    margin-top: 0.8rem; padding: 1.1rem;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 20px), rgba(13, 62, 120, 0.35);
    border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 12px;
}
.a11y-btn-demo {
    display: flex; align-items: center; justify-content: center;
    width: 3rem; height: 3rem; border-radius: 50%;
    border: 2px solid rgba(255, 231, 163, 0.6);
    background: var(--c-wood); color: #FFF3D0;
    box-shadow: 0 4px 0 rgba(0,0,0,0.35), 0 8px 18px rgba(13, 62, 120, 0.45), inset 0 1px 0 rgba(255, 231, 163, 0.5);
}
.a11y-btn-demo svg { width: 60%; height: 60%; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.35)); }

/* חיפוש מיידי במשפטים */
.folk-search-row { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-bottom: 0.8rem; }
.folk-search {
    flex: 1 1 12rem;
    padding: 0.55rem 0.8rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: inherit; font-size: 0.92rem; font-weight: 700;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.folk-search::placeholder { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
.folk-search:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.folk-search:focus { outline: none; border-color: var(--c-gold); background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3); }

/* אזור טקסט כללי בפאנל (משפטי דמויות, כתובית הבית) -אותו עיצוב זהב */
.folk-textarea {
    width: 100%;
    padding: 0.6rem 0.75rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: inherit; font-size: 0.92rem; line-height: 1.6;
    resize: vertical;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
    scrollbar-width: thin; scrollbar-color: var(--c-gold-deep) rgba(0,0,0,0.2);
}
.folk-textarea::placeholder { color: rgba(255, 255, 255, 0.5); }
.folk-textarea:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.folk-textarea:focus { outline: none; border-color: var(--c-gold); background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3); }
.folk-textarea::-webkit-scrollbar { width: 10px; }
.folk-textarea::-webkit-scrollbar-track { background: rgba(0,0,0,0.15); border-radius: 999px; }
.folk-textarea::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--c-gold), var(--c-gold-deep)); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
#folkSearchCount { margin: 0; }

/* עורך המשפטים -קבוצות, שורות, הוספה ומחיקה.
   עמודה אחת ברוחב מלא -כדי שיהיה מקום לקרוא ולערוך את המשפטים בנוחות. */
.folk-phrase-groups {
    display: flex;
    flex-direction: column;
    gap: 0.9rem;
}
/* קבוצת משפטים = סעיף מתקפל משלה. המסגרת/הריפוד/ההסתרה מגיעים מ-
   ‎.admin-collapsible-sub‎; כאן רק הגוון הכחלחל והפריסה בתוך הכותרת. */
.folk-group { background: rgba(13, 62, 120, 0.16); border-color: rgba(91, 163, 230, 0.28); }
.folk-group-head { padding: 0.55rem 0.75rem; }
.folk-group-title { font-size: 0.85rem; font-weight: 700; color: var(--c-gold-light); }
/* המונה צמוד לכותרת, והחץ נדחף לקצה (ה-head הוא space-between עם שלושה ילדים) */
.folk-group-head .folk-group-count { margin-inline-end: auto; }
.admin-collapsible-body > .folk-rows { margin-bottom: 0.5rem; }
.folk-group-count {
    min-width: 1.4rem; padding: 0.05rem 0.45rem; text-align: center;
    font-size: 0.72rem; font-weight: 700; color: #06263f;
    background: var(--c-gold); border-radius: 999px;
}
/* הערה לקבוצת משפטים שההצגה שלה מותנית (למשל "לילה במצב שמירה") */
.folk-group-note {
    margin: -0.15rem 0 0;
    font-size: 0.72rem; line-height: 1.4;
    color: rgba(233, 224, 207, 0.75);
}
.folk-rows { display: flex; flex-direction: column; gap: 0.4rem; }
.folk-row { display: flex; align-items: center; gap: 0.4rem; }
.folk-row-input {
    flex: 1 1 auto; min-width: 0;
    padding: 0.45rem 0.6rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 9px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: inherit; font-size: 0.88rem; font-weight: 700;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.folk-row-input::placeholder { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
.folk-row-input:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.folk-row-input:focus { outline: none; border-color: var(--c-gold); background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3); }
.folk-row-del {
    flex: 0 0 auto; width: 2rem; height: 2rem;
    display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(224, 69, 46, 0.45); border-radius: 9px;
    background: rgba(224, 69, 46, 0.16); font-size: 0.95rem; line-height: 1;
    transition: background 0.15s, transform 0.1s;
}
.folk-row-del:hover { background: rgba(224, 69, 46, 0.55); transform: translateY(-1px); }
.folk-row-del:active { transform: translateY(0); }
.folk-add { align-self: flex-start; padding: 0.35rem 0.8rem; font-size: 0.82rem; }
/* ציטוט המשפט הנמחק -יושב בתוך דיאלוג **בהיר**, ולכן בצבעי עץ כהים.
   הערכים הישנים (רקע לבן שקוף + טקסט ‎#e9f3ff‎) נלקחו מהפאנל הכהה, וכאן הם
   נתנו טקסט כמעט-לבן על קרם: המשפט שעומד להימחק לא נקרא כלל. */
.folk-del-quote {
    margin: 0.4rem 0 0.2rem; padding: 0.5rem 0.7rem;
    background: rgba(122, 79, 40, 0.08); border-inline-start: 3px solid var(--c-gold);
    border-radius: 8px; color: var(--c-wood-deep, #4a3620);
    font-style: italic; font-weight: 600; word-break: break-word;
}

/* תצוגה מקדימה חיה של בועת הדיבור */
.folk-bubble-pv {
    display: flex; justify-content: center;
    margin-top: 0.9rem; padding: 1.1rem;
    background: repeating-linear-gradient(45deg, rgba(255,255,255,0.04) 0 10px, transparent 10px 20px), rgba(13, 62, 120, 0.35);
    border: 1px dashed rgba(255, 255, 255, 0.18); border-radius: 12px;
}
.folk-bubble-demo {
    position: relative;
    background: #fffdf6; color: #2a1c0e;
    border: 2px solid var(--c-gold-deep); border-radius: 12px;
    padding: 0.3rem 0.7rem; font-size: 0.95rem; font-weight: 500;
    box-shadow: 0 3px 9px rgba(13, 62, 120, 0.35);
}
.folk-bubble-demo::after {
    content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
    border: 7px solid transparent; border-top-color: var(--demo-bg, #fffdf6);
}

/* ---- מנהל המדיה ---- */
.media-upload-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin-bottom: 1rem; }
#mediaStatus { margin: 0; }
.media-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(8rem, 100%), 1fr));
    gap: 0.8rem;
}
.media-item {
    position: relative; margin: 0;
    border: 1px solid rgba(91, 163, 230, 0.3);
    border-radius: 12px; overflow: hidden;
    background: rgba(13, 62, 120, 0.22);
}
.media-thumb {
    width: 100%; aspect-ratio: 1 / 1;
    background-size: cover; background-position: center; background-repeat: no-repeat;
    background-color: #10233d;
}
.media-cap {
    display: flex; align-items: center; justify-content: space-between; gap: 0.3rem;
    padding: 0.3rem 0.5rem; font-size: 0.7rem; color: #cfe8ff;
    background: rgba(6, 26, 52, 0.6);
}
.media-cap span { opacity: 0.85; }
.media-open {
    color: var(--c-gold-light); text-decoration: none; font-weight: 700;
    padding: 0 0.25rem; border-radius: 5px;
}
.media-open:hover { background: rgba(255, 231, 163, 0.2); }
.media-del {
    position: absolute; top: 0.4rem; inset-inline-end: 0.4rem; z-index: 2;
    width: 1.85rem; height: 1.85rem; display: grid; place-items: center; cursor: pointer;
    border: 1px solid rgba(224, 69, 46, 0.55); border-radius: 8px;
    background: rgba(140, 30, 20, 0.72); font-size: 0.9rem; line-height: 1;
    transition: background 0.15s, transform 0.1s;
}
.media-del:hover { background: rgba(224, 69, 46, 0.9); }
/* יעד נגיעה סביר בטלפון (חוק המובייל) -שם גם אין hover שיסגיר את הכפתור */
@media (pointer: coarse) { .media-del { width: 2.3rem; height: 2.3rem; font-size: 1.05rem; } }
.media-del-preview {
    height: 8rem; margin: 0.5rem 0; border-radius: 10px;
    background-size: contain; background-position: center; background-repeat: no-repeat;
    background-color: rgba(6, 26, 52, 0.5);
}

/* ---- בורר לוגו האתר ---- */
.logo-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(6.5rem, 100%), 1fr));
    gap: 0.7rem;
}
.logo-opt {
    display: grid; place-items: center;
    height: 5rem; padding: 0.5rem; cursor: pointer;
    background: rgba(6, 26, 52, 0.4);
    border: 2px solid rgba(91, 163, 230, 0.35);
    border-radius: 12px;
    overflow: hidden;               /* הלוגו לא יוצא מהמסגרת */
    transition: border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.logo-opt img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; }
.logo-opt:hover { transform: translateY(-2px); border-color: rgba(255, 231, 163, 0.6); }
.logo-opt.is-selected {
    border-color: var(--c-gold);
    box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.35), 0 6px 16px rgba(6, 20, 40, 0.4);
    background: rgba(255, 209, 90, 0.1);
}
/* ---- תצוגת גודל הלוגו ----
   רצועה שמחקה את הסרגל העליון של האתר, ו-‎.brand-logo‎ בתוכה הוא **אותה
   מחלקה** של האתר עם אותו ‎--brand-logo-scale‎ - אין כאן עיצוב שני שיכול
   להתפצל מהתוצאה, בדיוק כמו בתצוגה של התמונה הראשית בתיק העבודות.
   ‎min-height‎ קבוע: בלעדיו הרצועה גדלה ומתכווצת עם הלוגו והמחוון שמתחתיה
   רודף אחריה - יעד שזז בכל גרירה. */
.logo-size-pv {
    display: flex; align-items: center; gap: 0.5rem;
    min-height: 5.2rem; padding: 0.5rem 0.9rem;
    margin: 0.5rem 0 0.7rem;
    overflow: hidden;
    border: 1.5px solid rgba(255, 231, 163, 0.25); border-radius: 12px;
    background: linear-gradient(180deg, rgba(13, 62, 120, 0.75), rgba(13, 62, 120, 0.45));
}
/* ‎.brand-logo‎ הוא ‎order: 2‎ באתר (הלוגו אחרי השם), וכאן אין סיבה שיהיה אחרת */
.logo-size-pv .brand-logo { order: 2; }
.logo-size-pv-name {
    order: 1;
    font-family: var(--logo-font, 'Titan One'), 'Suez One', serif;
    font-size: 1.35rem; color: #fff; white-space: nowrap;
    text-shadow: 0 2px 8px rgba(13, 62, 120, 0.8);
}

/* ================= עמודים (CMS) ================= */
.pages-toolbar { margin-bottom: 1rem; }
.pages-list { display: flex; flex-direction: column; gap: 0.6rem; }
.page-row {
    display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
    padding: 0.7rem 0.9rem; border-radius: 12px;
    background: linear-gradient(155deg, rgba(21, 78, 140, 0.32), rgba(10, 46, 84, 0.32));
    border: 1px solid rgba(91, 163, 230, 0.3);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.page-row:hover { border-color: rgba(145, 200, 245, 0.55); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28); }

/* ---- "מוצג ב־": שורת הפלטפורמות של העמוד ----
   שורה **משלה** מתחת לשורת העמוד: ‎.page-row‎ היא ‎space-between‎, ובלי
   ‎flex: 1 1 100%‎ הצ'יפים היו נדחסים בין השם לכפתורים ומכווצים את שניהם.
   הקו העליון והמרווח הם מה שמסמן שזו הגדרה של העמוד ולא עוד כפתורים. */
.page-row { flex-wrap: wrap; }
.page-plat {
    flex: 1 1 100%;
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem;
    margin-top: 0.75rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(91, 163, 230, 0.28);
}
.page-plat-lbl { font-size: 0.76rem; font-weight: 700; color: rgba(255, 231, 163, 0.9); margin-inline-end: 0.15rem; }
.page-plat-opt {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.32rem 0.66rem;
    border-radius: 999px;
    border: 1px solid rgba(91, 163, 230, 0.35);
    background: rgba(6, 26, 52, 0.4);
    font-size: 0.76rem; color: #cfe8ff;
    cursor: pointer;
    transition: border-color 0.15s, background 0.15s, color 0.15s, opacity 0.15s;
}
.page-plat-opt:hover { border-color: rgba(145, 200, 245, 0.7); }
.page-plat-opt.is-on { border-color: var(--c-gold, #d39a1a); background: rgba(211, 154, 26, 0.16); color: #ffe7a3; }
/* "בכולם" מסומן -השאר **עמומים אך לחיצים**. קודם הם היו ‎disabled‎, ולחיצה
   עליהם נבלעה: דווח כ"הכפתורים לא עובדים, לא לחיצים". הכוונה בלחיצה על
   "מובייל" ברורה -רק מובייל- ולכן היא מבטלת את "בכולם" ובוחרת אותו.
   עמעום קל בלבד (‎0.62‎ ולא ‎0.45‎): הוא אומר "לא פעיל כרגע", לא "כבוי". */
.page-plat-opt.is-dim { opacity: 0.62; }
.page-plat-opt.is-dim:hover { opacity: 1; }
/* התיבה עצמה מוסתרת -הצ'יפ הוא מה שנראה ונלחץ. ‎clip-path‎ ולא
   ‎display: none‎, אחרת היא יוצאת מסדר ה-Tab ומקורא המסך. */
.page-plat-opt input {
    position: absolute; width: 1px; height: 1px; margin: 0;
    clip-path: inset(50%); overflow: hidden;
}
.page-plat-opt:focus-within { outline: 2px solid var(--c-gold-light, #ffe7a3); outline-offset: 2px; }
@media (pointer: coarse) { .page-plat-opt { min-height: 2.75rem; } }
.page-row-info { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.page-row-info b { display: flex; align-items: center; justify-content: flex-end; gap: 0.4rem; color: #fff; font-size: 1rem; }
.page-row-icon { font-size: 1.05em; line-height: 1; }
.page-row-slug {
    /* ‎flex-start‎ ולא ‎flex-end‎: ‎.page-row-info‎ הוא עמודת flex בתוך מסמך
       RTL, ושם ‎flex-end‎ הוא **שמאל** -הפילים נצמדו לשמאל, וכיוון שאורך
       הכתובת שונה בכל עמוד הקצה הימני שלהם יצא משונן ולא על קו אחד עם
       הכותרת שמעליהם. אותה מלכודת שכבר תועדה בפרויקט על הצמדת החלונות
       ("‎justify-content: right/left‎ ולא ‎flex-end/flex-start‎"). */
    align-self: flex-start;
    font-size: 0.74rem; font-variant-numeric: tabular-nums; letter-spacing: 0.02em;
    color: var(--c-gold-light);
    background: rgba(255, 209, 90, 0.12);
    border: 1px solid rgba(255, 209, 90, 0.22);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    text-align: right;
}
/* שורת התגיות שמתחת לכותרת: כתובת, השם שבתפריט, ו"מכובה".
   ‎flex-wrap‎ כי במובייל שלושתן אינן נכנסות בשורה אחת, ו-‎align-self‎ עבר
   לכאן מהפיל עצמו -הוא כבר אינו ילד ישיר של עמודת ה-flex. */
.page-row-tags {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.3rem 0.35rem;
    align-self: flex-start;
    max-width: 100%;
    min-width: 0;
}
/* השם שבתפריט -פיל שקט יותר מהכתובת: הכתובת היא הזיהות,
   וזה הסבר לידה. ‎::before‎ ולא טקסט: החיפוש בפאנל מאנדקס
   ‎textContent‎, ותווית קבועה בתוכו היתה מוצאת "בתפריט" בכל עמוד -
   אותה החלטה שכבר נעשתה בעלה שבעץ העמודים. */
.page-row-nav {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.72);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    padding: 0.05rem 0.55rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.page-row-nav::before { content: "בתפריט: "; opacity: 0.7; }
/* ה"מכובה" עבר פנימה לשורת התגיות, ושם ה-‎margin‎ שלו מיותר (יש ‎gap‎) */
.page-row-tags .page-off-badge { margin-inline-start: 0; }

.page-row-actions { display: flex; gap: 0.4rem; flex: 0 0 auto; }
.admin-back-link {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: none; border: none; color: var(--c-gold-light); cursor: pointer;
    font-family: inherit; font-size: 0.95rem; font-weight: 700;
    padding: 0.2rem 0; margin-bottom: 0.8rem;
    transition: color 0.15s, transform 0.12s;
}
.admin-back-link:hover { color: #fff; transform: translateX(-3px); } /* הבלטה בלי קו תחתון */
.admin-back-link .ba-arr { font-size: 1.15em; line-height: 1; }

.page-field { margin: 0.9rem 0; }
.page-field-label { display: block; font-size: 0.82rem; font-weight: 700; color: #cfe8ff; margin-bottom: 0.4rem; }

/* בורר רקע -כל אפשרות עם תצוגה מקדימה של הצבע */
/* ---- בורר רקע העמוד: תפריט נפתח מעוצב עם דוגמאות ---- */
.page-bg-dropdown { position: relative; max-width: 20rem; }
.page-bg-trigger {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.5rem 0.7rem; cursor: pointer;
    background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 231, 163, 0.4);
    border-radius: 10px; color: #fff; font-family: inherit; font-weight: 700; font-size: 0.9rem;
    transition: border-color 0.15s, background 0.15s;
}
.page-bg-trigger:hover { background: rgba(255, 255, 255, 0.14); border-color: var(--c-gold); }
.page-bg-trigger-label { flex: 1; text-align: start; }
.page-bg-caret { transition: transform 0.2s; opacity: 0.8; }
.page-bg-dropdown.is-open .page-bg-caret { transform: rotate(180deg); }
.page-bg-swatch {
    flex: 0 0 auto; width: 2.4rem; height: 1.5rem; border-radius: 6px;
    border: 1px solid rgba(0, 0, 0, 0.25); box-shadow: inset 0 1px 0 rgba(255,255,255,0.25);
}
.page-bg-swatch.page-bg-parchment { background: url('/images/parchment.webp') center / cover no-repeat, linear-gradient(180deg, #e9dcc0, #cbb488); }
.page-bg-swatch.page-bg-document01 { background: url('/images/scene/document01.webp') center / cover no-repeat, linear-gradient(180deg, #e9dcc0, #cbb488); }
.page-bg-swatch.page-bg-document02 { background: url('/images/scene/document02.webp') center / cover no-repeat, linear-gradient(180deg, #e9dcc0, #cbb488); }
.page-bg-swatch.page-bg-document03 { background: url('/images/scene/document03.webp') center / cover no-repeat, linear-gradient(180deg, #e9dcc0, #cbb488); }
.page-bg-swatch.page-bg-blue { background: linear-gradient(180deg, #2f7fce, #123a68); }
.page-bg-swatch.page-bg-wood { background: linear-gradient(180deg, #6a4622, #3f2810); }
.page-bg-swatch.page-bg-night { background: linear-gradient(180deg, #1a2a56, #070d1c); }
.page-bg-swatch.page-bg-plain { background: #fff6e6; }
/* "ללא" -משבצות שקיפות, המוסכמה המוכרת ל"אין רקע". גרדיאנטים ולא תמונה,
   כדי שלא ייווסף נכס בשביל דגימה של ‎2.4rem‎. */
.page-bg-swatch.page-bg-none {
    background:
        linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.18) 75%) 0 0 / 8px 8px,
        linear-gradient(45deg, rgba(0,0,0,0.18) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.18) 75%) 4px 4px / 8px 8px,
        #f2f4f8;
}
.page-bg-menu {
    position: absolute; z-index: 30; top: calc(100% + 0.35rem); inset-inline-start: 0; width: 100%;
    display: flex; flex-direction: column; gap: 0.2rem; padding: 0.35rem;
    background: #12325f; border: 1px solid rgba(255, 231, 163, 0.4);
    border-radius: 12px; box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
}
.page-bg-menu[hidden] { display: none; }
.page-bg-opt {
    display: flex; align-items: center; gap: 0.6rem; width: 100%;
    padding: 0.4rem 0.5rem; cursor: pointer; font-family: inherit; font-weight: 700; font-size: 0.86rem;
    background: none; border: 2px solid transparent; border-radius: 9px; color: #eef5ff;
    transition: background 0.12s, border-color 0.15s;
}
.page-bg-opt:hover { background: rgba(255, 231, 163, 0.14); }
.page-bg-opt.is-selected { border-color: var(--c-gold); background: rgba(255, 209, 90, 0.16); }
.page-bg-optlabel { flex: 1; text-align: start; }
.page-logo-none {
    font-family: inherit; font-weight: 700; font-size: 0.72rem; color: #cfe8ff; text-align: center;
    background: rgba(6, 26, 52, 0.5) !important;
}

/* עורך WYSIWYG */
.wysiwyg { border: 1.5px solid rgba(91, 163, 230, 0.5); border-radius: 12px; overflow: hidden; background: #f7fbff; }
.wysiwyg-toolbar {
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.2rem;
    padding: 0.4rem 0.5rem; background: linear-gradient(180deg, #eaf2fb, #d8e6f5);
    border-bottom: 1px solid rgba(91, 163, 230, 0.4);
}
/* קבוצת כלים שאינה נשברת בין שורות -כפתורים מאותה משפחה חייבים להישאר יחד.
   בלי זה התבליט נשאר בסוף השורה הראשונה והמספור ירד לשנייה. */
.wysi-grp { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.2rem; }
.wysiwyg-toolbar button {
    min-width: 2rem; height: 2rem; padding: 0 0.45rem; cursor: pointer;
    background: #fff; border: 1px solid rgba(91, 163, 230, 0.45); border-radius: 7px;
    color: #14203a; font-family: inherit; font-size: 0.92rem; line-height: 1;
    transition: background 0.12s, transform 0.08s;
}
.wysiwyg-toolbar button:hover { background: var(--c-gold-light); }
.wysiwyg-toolbar button:active { transform: translateY(1px); }
.wysi-sep { width: 1px; height: 1.4rem; background: rgba(91, 163, 230, 0.5); margin: 0 0.15rem; }
/* בטל / בצע שוב -תווית בעברית ולא אייקון עירום שצריך לנחש.
   **כיוון החץ הוא העיקר:** בעברית "אחורה" הוא ימינה, ולכן אייקון הביטול (שראשו
   שמאלה, כמקובל בלועזית) מוצג מהופך, ו"בצע שוב" נשאר מצביע שמאלה. */
.wysiwyg-toolbar button.wysi-wide { display: inline-flex; align-items: center; gap: 0.28rem; font-size: 0.78rem; font-weight: 700; }
.wysi-ico { display: inline-flex; width: 0.95rem; height: 0.95rem; }
.wysi-ico svg { width: 100%; height: 100%; }
.wysi-mirror svg { transform: scaleX(-1); }
.wysi-color { display: inline-flex; align-items: center; gap: 0.15rem; height: 2rem; padding: 0 0.35rem;
    background: #fff; border: 1px solid rgba(91, 163, 230, 0.45); border-radius: 7px; cursor: pointer; font-size: 0.92rem; }

/* ---- כותרת מקטע בתוך כרטיס (‎.admin-sub‎) ----
   **הייתה בשימוש בשבעה מקומות בכרטיס הבית ומעולם לא הוגדר לה כלל CSS** -
   כלומר ‎div‎ עירום בגודל טקסט רגיל, בלי צבע ובלי מרווח, שנדבק לפקד שמעליו.
   כרטיס הבית הוא ארוך (מתגים, כותרת, מכשירים, קלף, טקסט, דלת, אנימציה, גודל
   ומיקום), ובלי הפרדה נראית כל זה נקרא כרשימה אחת ארוכה.

   **גדולה מכותרת הסעיף (‎1.02rem‎) ולא קטנה ממנה**, וזה מכוון: כותרת הסעיף
   יושבת על סרגל משלה עם ממוזערת ועם צ'יפ מצב, ואילו הכותרות האלה חייבות
   לבלוט מתוך זרם של מתגים, שדות והערות. */
.admin-sub {
    font-family: 'Heebo', sans-serif;
    font-size: 1.08rem;
    font-weight: 800;
    letter-spacing: -0.01em;
    color: var(--c-gold-light);
    /* המרווח למעלה גדול מזה שלמטה: הכותרת שייכת למה שמתחתיה, ולכן היא חייבת
       להתרחק ממה שמעליה יותר מאשר ממה שהיא מכותרת. */
    margin: 1.5rem 0 0.6rem;
    padding-top: 0.9rem;
    padding-inline-start: 0.55rem;
    border-top: 1px solid rgba(255, 231, 163, 0.22);
    position: relative;
}
/* פס זהב קצר בראש השורה -מה שהופך אותה לכותרת ולא לעוד שורת טקסט מודגשת */
.admin-sub::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: calc(0.9rem + 0.14em);
    width: 3px; height: 1.05em;
    border-radius: 2px;
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold-deep, #d39a1a));
}
/* הראשונה בכרטיס אינה מפרידה בין שני מקטעים -אין מעליה מה להפריד */
.admin-collapsible-body > .admin-sub:first-child {
    margin-top: 0.2rem; padding-top: 0; border-top: 0;
}

/* ---- אותה כותרת, אבל כסעיף שנפתח ונסגר (‎.admin-collapsible-sub‎) ----
   שורת בית מחזיקה שבעה מקטעים ארוכים, ופרושים כולם היא מסך שאי אפשר לסרוק
   בעין. המראה זהה ל-‎.admin-sub‎ בכוונה -זו אותה כותרת, רק שאפשר לקפל אותה-
   ולכן אין כאן ערכה שנייה אלא אותם גדלים, אותו פס זהב ואותם מרווחים. */
.admin-collapsible-sub { margin: 1.5rem 0 0; border: 0; background: none; border-radius: 0; }
.admin-collapsible-sub > .admin-collapsible-head {
    padding: 0.9rem 0.55rem 0.35rem;
    border-top: 1px solid rgba(255, 231, 163, 0.22);
    border-radius: 0;
    background: none;
}
.admin-collapsible-sub > .admin-collapsible-head:hover { background: rgba(255, 231, 163, 0.06); }
.admin-collapsible-sub > .admin-collapsible-head .admin-collapsible-title {
    font-family: 'Heebo', sans-serif;
    font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--c-gold-light);
    position: relative; padding-inline-start: 0.55rem;
}
.admin-collapsible-sub > .admin-collapsible-head .admin-collapsible-title::before {
    content: '';
    position: absolute; inset-inline-start: 0; top: 0.14em;
    width: 3px; height: 1.05em; border-radius: 2px;
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold-deep, #d39a1a));
}
.admin-collapsible-sub > .admin-collapsible-body { padding: 0.55rem 0 0.2rem; }
/* הראשון בכרטיס אינו מפריד בין שני מקטעים */
.admin-collapsible-body > .admin-collapsible-sub:first-child { margin-top: 0.2rem; }
.admin-collapsible-body > .admin-collapsible-sub:first-child > .admin-collapsible-head {
    padding-top: 0; border-top: 0;
}
.admin-collapsible-body > .admin-sub:first-child::before { top: 0.14em; }
/* המקטע עצמו מתרחק מהכותרת הבאה: ‎margin‎ בין אחים מתמוטט, ולכן הערך הגדול
   מבין השניים הוא שקובע -וזה בדיוק מה שרוצים כאן. */
.admin-sub + .admin-note { margin-top: 0; }

/* ---- הבהוב הקובץ שהגיעו אליו מהעורך (קליק-ימני ← "פתיחה במנהל המדיה") ----
   בלי סימן, הקפיצה לטאב מדיה נוחתת ברשת של עשרות תמונות ולא ברור לאיזו. */
.media-item.is-hit {
    outline: 3px solid var(--c-gold, #ffd15a);
    outline-offset: 2px;
    border-radius: 10px;
    animation: media-hit 2.2s ease-out;
}
@keyframes media-hit {
    0%, 100% { box-shadow: 0 0 0 0 rgba(255, 209, 90, 0); }
    18%      { box-shadow: 0 0 0 8px rgba(255, 209, 90, 0.45); }
}
@media (prefers-reduced-motion: reduce) { .media-item.is-hit { animation: none; } }

/* ---- שדה היעד בכרטיס הכפתור: בורר מוכן + הקלדה חופשית ----
   שניהם באותו שדה ולא בשני שדות: היעד הוא ערך **אחד**, והבורר הוא רק דרך
   מהירה למלא אותו. הרמז יורד לשורה משלו כדי שההקלדה לא תידחס. */
.bp-fld-href { display: flex; flex-direction: column; gap: 0.3rem; }
.bp-href-hint { font-size: 0.68rem; opacity: 0.75; }
.bp-href-hint bdi { unicode-bidi: isolate; }

/* ---- גודל הטקסט: ‎-‎ / רשימה / ‎+‎ ----
   שלושתם קבוצה אחת שאינה נשברת: ‎+‎ ו-‎-‎ שנופלים לשורה אחרת מהרשימה נקראים
   כשני כלים שאין ביניהם קשר. ה-‎A‎ בשני גדלים הוא מה שאומר **מה** גדל -אייקון
   ‎+‎ עירום היה יכול להיות "הוספה" של כל דבר. */
.wysi-fsgrp { gap: 0.15rem; }
/* **‎center‎ ולא ‎baseline‎.** ‎+‎ ו-‎−‎ מצוירים סביב ציר החשבון, שיושב הרבה מעל
   קו הבסיס, ולכן יישור לקו הבסיס הציג אותם כמעריך קטן בפינה העליונה במקום
   לצד ה-‎A‎. מירכוז אנכי מיישר את שני הגליפים לאמצע הכפתור. */
.wysiwyg-toolbar button.wysi-fsbtn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.08rem;
    min-width: 2.1rem; padding: 0 0.35rem; font-weight: 800;
}
.wysi-fs-a { line-height: 1; display: block; }
.wysi-fs-a.is-sm { font-size: 0.72rem; }
.wysi-fs-a.is-lg { font-size: 1.02rem; }
.wysi-fs-op { font-size: 0.8rem; line-height: 1; display: block; color: var(--c-wood, #7a5228); }

/* ---- יישור: אייקון שנראה כמו התוצאה ---- */
.wysi-aligngrp svg { width: 1.05rem; height: 1.05rem; display: block; }
.wysiwyg-toolbar button[data-align] { display: inline-flex; align-items: center; justify-content: center; }
/* המצב הפעיל -בלעדיו אי אפשר לדעת איך הפסקה מיושרת בלי לנסות */
.wysiwyg-toolbar button[data-align].is-on {
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
    border-color: var(--c-gold-deep, #d39a1a);
    color: #14203a;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
}
.wysi-color input[type="color"] { width: 1.1rem; height: 1.1rem; border: none; padding: 0; background: none; cursor: pointer; }
/* ---- סרגל עיצוב התמונה ----
   **נעגן מתחת לסרגל הכלים של העורך הפעיל** (ה-JS מעביר אותו לשם), ולא מרחף מעל
   התמונה: כך הוא נקרא כהמשך ישיר של סרגל העריכה. הגוון החם מבדיל אותו מסרגל
   הטקסט הכחול -"עכשיו אתה מעצב תמונה, לא טקסט". יש **אחד** כזה בכל הפאנל (יש לו
   id-ים), ולכן הוא עובר בין העורכים במקום להשתכפל.
   מצב מרחף נשאר כרשת ביטחון לתמונה שאינה בתוך ‎.wysiwyg‎. */
.wysi-imgtools {
    position: fixed; z-index: 211; max-width: min(94vw, 51rem);
    display: flex; flex-wrap: wrap; align-items: center; gap: 0.3rem;
    padding: 0.4rem 0.55rem;
    background: linear-gradient(180deg, #fff6e0, #ffe9bd);
    border: 1px solid rgba(211, 154, 26, 0.6); border-radius: 9px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28);
    font-size: 0.8rem; color: #5a3a12; font-weight: 700;
}
.wysi-imgtools.is-docked {
    position: static; max-width: none; z-index: auto;
    border-radius: 0; border-inline: 0; border-top: 0;
    border-bottom: 2px solid var(--c-gold-deep);
    box-shadow: inset 0 2px 6px rgba(211, 154, 26, 0.18);
    padding: 0.45rem 0.6rem;
    animation: wysi-imgtools-in 0.16s ease-out;
}
@keyframes wysi-imgtools-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .wysi-imgtools.is-docked { animation: none; } }
.wysi-imgtools[hidden] { display: none; }
/* שבירת שורה יזומה: המסגרת מתחילה שורה חדשה ולא נדחסת אחרי המידות */
.wysi-imgbreak { flex-basis: 100%; height: 0; }
.wysi-imgtools button {
    padding: 0.2rem 0.5rem; cursor: pointer; background: #fff; border: 1px solid var(--c-gold-deep);
    border-radius: 6px; font-family: inherit; font-size: 0.78rem; color: #4a2f12;
}
.wysi-imgtools button:hover { background: var(--c-gold-light); }
.wysi-imglbl { white-space: nowrap; }
/* בורר צבע וצ'קבוקס בסרגל -באותו גובה ובאותה שפה של שאר הפקדים */
.wysi-imgcolor { display: inline-flex; align-items: center; gap: 0.3rem; white-space: nowrap; }
.wysi-imgcolor input[type="color"] {
    width: 2.1rem; height: 1.7rem; padding: 0; cursor: pointer;
    background: #fff; border: 1px solid var(--c-gold-deep); border-radius: 6px;
}
.wysi-imgchk { display: inline-flex; align-items: center; gap: 0.3rem; cursor: pointer; white-space: nowrap; }
.wysi-imgchk input { width: 1rem; height: 1rem; accent-color: var(--c-gold-deep); cursor: pointer; }
.wysi-imgclear {
    padding: 0.2rem 0.5rem; cursor: pointer; background: #fff;
    border: 1px solid var(--c-gold-deep); border-radius: 6px;
    font-family: inherit; font-size: 0.78rem; color: #4a2f12;
}
.wysi-imggrp { display: inline-flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; }
/* בורר מקטעים: הקבוצה היא יחידה אחת ואינה נשברת לשורה שנייה */
.wysi-imgseg { display: inline-flex; flex-wrap: nowrap; }
.wysi-imgseg button { border-radius: 0; margin-inline-start: -1px; }
.wysi-imgseg button:first-child { border-start-end-radius: 6px; border-end-end-radius: 6px; margin-inline-start: 0; }
.wysi-imgseg button:last-child { border-start-start-radius: 6px; border-end-start-radius: 6px; }
.wysi-imgseg button.is-on { background: var(--c-gold); border-color: var(--c-wood-deep); font-weight: 800; }
.wysi-imgseg button.is-on:hover { background: var(--c-gold); }
/* כפתורי היישור: אייקון + תווית באותה שורה */
.wysi-imgseg button:has(svg) { display: inline-flex; align-items: center; gap: 0.25rem; }
.wysi-imgseg svg { width: 15px; height: 15px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; }
.wysi-imgseg svg path { fill: none; }
.wysi-imgseg svg rect { fill: currentColor; stroke: none; opacity: 0.85; }
.wysi-imgsep { width: 1px; height: 1.3rem; background: rgba(211, 154, 26, 0.5); margin: 0 0.25rem; }
.wysi-imgnum { display: inline-flex; align-items: center; gap: 0.25rem; font-size: 0.78rem; color: #5a3a12; }
.wysi-imgnum input { width: 3.6rem; padding: 0.16rem 0.3rem; border: 1px solid var(--c-gold-deep); border-radius: 6px; font-family: inherit; font-size: 0.78rem; color: #4a2f12; }
.wysi-imghint { font-size: 0.72rem; color: #7a5a2a; opacity: 0.8; }

/* בוררי סגנון/גודל/גופן בסרגל */
.wysi-select {
    height: 2rem; padding: 0 0.4rem; cursor: pointer;
    background: #fff; border: 1px solid rgba(91, 163, 230, 0.45); border-radius: 7px;
    color: #14203a; font-family: inherit; font-size: 0.86rem;
}
.wysi-select:hover { background: #f0f6ff; }

/* --- רקע חי בעורך: משקף את תבנית הרקע של העמוד (render as-is) --- */
.wysiwyg.cms-bg-parchment .wysiwyg-editor {
    background:
        radial-gradient(120% 100% at 50% 0%, rgba(255,250,235,0.65), transparent 60%),
        linear-gradient(180deg, #e9dcc0, #d8c69f 60%, #cbb488);
    color: #3a2a15;
}
.wysiwyg.cms-bg-blue .wysiwyg-editor { background: linear-gradient(180deg, #14508a, #0a2244); color: #eef5ff; }
.wysiwyg.cms-bg-wood .wysiwyg-editor { background: linear-gradient(180deg, #6a4622, #3f2810); color: #f7ecd8; }
.wysiwyg.cms-bg-night .wysiwyg-editor { background: linear-gradient(180deg, #0d1838, #070d1c); color: #dfe8ff; }
.wysiwyg.cms-bg-plain .wysiwyg-editor { background: #fff6e6; color: #2a1c0e; }
/* בעורך **כן** יש רקע, וזו אינה סתירה: העורך אינו האתר אלא מקום העבודה,
   וכתיבה של טקסט בהיר על שקוף בתוך פאנל כהה אינה קריאה כלל. הגוון נלקח
   משמי הסצנה, כדי שמה שנראה כאן יהיה קרוב למה שייצא. */
.wysiwyg.cms-bg-none .wysiwyg-editor {
    background: linear-gradient(180deg, #4d84c4, #2f5f96);
    color: #f3f7ff;
}
.wysiwyg.cms-bg-none .wysiwyg-editor :is(h1, h2, h3, h4) { color: #f2d489; }
/* בעורך: הכפתורים/תגים/כותרות כבר מקבלים עיצוב מ-.cms-content -כאן רק מוודאים סמן וקישוריות */
.wysiwyg-editor.cms-content .cms-btn { cursor: text; }
.wysiwyg-editor.cms-content a { cursor: text; }
.wysiwyg-editor {
    min-height: 14rem; max-height: 26rem; overflow-y: auto;
    padding: 0.9rem 1rem; background: #fff; color: #1c2434;
    font-family: inherit; font-size: 1rem; line-height: 1.7;
    outline: none;
}
/* עורך תוכן ה-CMS: אותו בסיס כמו העמוד באתר, אחרת כותרות ב-em נמדדות מול בסיס אחר
   והתצוגה בעורך לא תואמת ל"עיצוב כותרות התוכן". */
.wysiwyg-editor.cms-content { font-size: clamp(1rem, 1.9vw, 1.12rem); line-height: 1.75; }
.wysiwyg-editor:focus { box-shadow: inset 0 0 0 2px rgba(77, 168, 232, 0.35); }
.wysiwyg-editor img { max-width: 100%; height: auto; border-radius: 6px; cursor: pointer; outline: 2px solid transparent; }
.wysiwyg-editor img:hover { outline-color: var(--c-gold); }
.wysiwyg-editor img.cms-w25 { width: 25%; } .wysiwyg-editor img.cms-w50 { width: 50%; }
.wysiwyg-editor img.cms-w75 { width: 75%; } .wysiwyg-editor img.cms-w100 { width: 100%; }
.wysiwyg-editor img.cms-center { display: block; margin-inline: auto; }
/* יישור ימין/שמאל = float, בדיוק כמו באתר. היה מוגדר **רק** ל-‎.cms-content‎, ולכן
   בעורך האודות ובעורך תיאור הפרויקט כפתורי הכיוון החליפו מחלקה ולא קרה כלום. */
.wysiwyg-editor img.cms-imgr, .pf-rte-ed img.cms-imgr { float: right; margin: 0.2rem 0 0.6rem 0.9rem; }
.wysiwyg-editor img.cms-imgl, .pf-rte-ed img.cms-imgl { float: left;  margin: 0.2rem 0.9rem 0.6rem 0; }
.wysiwyg-editor::after, .pf-rte-ed::after { content: ''; display: block; clear: both; }
/* :not(.cms-content) -בעורך ה-CMS הכותרות חייבות לרשת את .cms-content ואת ההגדרות
   מ"עיצוב כותרות התוכן"; הכלל הזה נשאר רק לעורך האודות. */
.wysiwyg-editor:not(.cms-content) h2 { font-size: 1.4em; margin: 0.6rem 0 0.3rem; }
.wysiwyg-editor:not(.cms-content) h3 { font-size: 1.2em; margin: 0.5rem 0 0.3rem; }
.wysiwyg-editor a { color: #1a6fd0; text-decoration: underline; }

/* ---- בורר התמונות: רשת + תצוגה מקדימה של הנבחרת ----
   שתי עמודות. הרשת נגללת בפני עצמה, כך שהחלון עצמו נשאר בגובה קבוע ושורת
   הפעולות של התצוגה המקדימה תמיד גלויה -בלי לרדוף אחריה בגלילה. */
.media-pick-body { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 0.9rem; align-items: stretch; }
.media-pick-main { min-width: 0; display: flex; flex-direction: column; }
.media-pick-side {
    display: flex; flex-direction: column; gap: 0.6rem;
    padding: 0.6rem; border-radius: 12px;
    background: rgba(154, 106, 60, 0.10);
    border: 1px solid rgba(154, 106, 60, 0.3);
    align-self: stretch;
}
/* שורת ההעלאה: הכפתור והטקסט על אותו קו בסיס, והטקסט זורם ולא יושב בתיבה
   משלו -שתי תיבות זו לצד זו נקראו כשני פקדים ולא כפקד + הסבר. */
.media-pick-main .media-upload-row { align-items: center; gap: 0.7rem; margin-bottom: 0.7rem; }
.media-pick-main .media-upload-row .admin-note {
    flex: 1 1 12rem; margin: 0; padding: 0;
    background: none; border: 0; font-size: 0.76rem; line-height: 1.4;
}
/* מסגרת בפרופורציה קבועה: תמונות בגדלים שונים היו מקפיצות את גובה העמודה
   ואיתה את מקומם של הכפתורים -יעד שזז בכל בחירה. */
.media-pv-frame {
    position: relative; aspect-ratio: 4 / 3; border-radius: 10px; overflow: hidden;
    display: grid; place-items: center;
    background:
        linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.06) 75%) 0 0/16px 16px,
        linear-gradient(45deg, rgba(0,0,0,0.06) 25%, transparent 25%, transparent 75%, rgba(0,0,0,0.06) 75%) 8px 8px/16px 16px,
        #10233d;
    border: 1px solid rgba(91, 163, 230, 0.3);
}
.media-pv-frame img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
/* הדיאלוג עצמו בהיר (קלף), בשונית משאר הפאנל שכהה -ולכן הצבעים כאן כהים.
   הגרסה הראשונה הועתקה מהפאנל ויצאה טקסט כמעט-לבן על רקע כמעט-לבן.

   **המסגרת כהה, ולכן הטקסט כאן דווקא בהיר** -נמדד שהוא היה כמעט בלתי
   נראה על ‎#10233d‎. */
.media-pv-empty {
    display: grid; place-items: center; gap: 0.5rem;
    font-size: 0.78rem; color: rgba(214, 231, 250, 0.75); text-align: center;
    padding: 0.6rem;
}
/* ---- איור זמני כשאין תמונה ----
   ריבוע כהה עם משפט באמצע נקרא כאזור שבור. איור בשפת האתר -מסגרת מקווקוות,
   שמש והר- אומר "כאן תיכנס תמונה". **אותו איור בדיוק** של ‎img.is-missing‎
   (קובץ שנמחק), כי זו אותה אמירה: אין כאן תמונה להראות. */
.media-pv-empty::before {
    content: '';
    width: min(58%, 7rem); aspect-ratio: 4 / 3;
    background: no-repeat center / contain
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 64 48'%3E%3Crect x='4' y='4' width='56' height='40' rx='5' fill='none' stroke='%23b98f3d' stroke-width='2.2' stroke-dasharray='6 4.5' opacity='.75'/%3E%3Ccircle cx='21' cy='17.5' r='4.4' fill='%23dda94b' opacity='.9'/%3E%3Cpath d='M10 37.5 21.5 25.5l7.4 7.6 6.4-5.4 18.7 9.8z' fill='%238d6c3c' opacity='.6'/%3E%3C/svg%3E");
    opacity: 0.9;
}
/* **התמונה מוסתרת גם כשהקובץ חסר.** ‎img.is-missing‎ מצייר את אותו איור,
   אבל כאן יש כבר מסגרת ומקום ייעודי -ושתי גרסאות של אותו איור זו על זו
   נקראות כתקלה. במקומן: התמונה יורדת והאיור נשאר עם הודעה מדויקת. */
.media-pv-frame img:not([hidden]):not(.is-missing) ~ .media-pv-empty { display: none; }
.media-pv-frame img.is-missing { display: none; }
.media-pv-zoom {
    position: absolute; bottom: 0.4rem; inset-inline-end: 0.4rem;
    width: 2rem; height: 2rem; display: grid; place-items: center; cursor: pointer;
    border-radius: 8px; font-size: 0.95rem; line-height: 1;
    background: rgba(7, 24, 47, 0.78); border: 1px solid rgba(255, 231, 163, 0.5);
    transition: background 0.15s, transform 0.12s;
}
.media-pv-zoom:hover { background: rgba(255, 231, 163, 0.28); transform: scale(1.06); }
.media-pv-zoom[hidden] { display: none; }
/* תג "התמונה הנוכחית" -בלעדיו אי אפשר לדעת אם מה שרואים הוא מה שכבר מוגדר */
.media-pv-cur {
    position: absolute; top: 0.4rem; inset-inline-start: 0.4rem;
    padding: 0.12rem 0.5rem; border-radius: 999px;
    font-size: 0.66rem; font-weight: 800; color: #16233e;
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
    border: 1px solid var(--c-gold-deep, #d39a1a);
}
.media-pv-cur[hidden] { display: none; }
/* מצב "כוונון מיקום": התמונה ממלאת את המסגרת (יש מה לגרור) במקום להיות מוכלת */
.media-pv-frame.is-pos img { width: 100%; height: 100%; max-width: none; max-height: none; object-fit: cover; cursor: grab; touch-action: none; user-select: none; -webkit-user-drag: none; }
.media-pv-frame.is-pos.is-panning img { cursor: grabbing; }
.media-pv-pos { display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; font-size: 0.72rem; color: rgba(74, 47, 20, 0.75); }
.media-pv-pos[hidden] { display: none; }
.media-pv-pos b { direction: ltr; font-weight: 700; color: var(--c-wood-deep, #4a2f14); }
.media-pv-pos button {
    cursor: pointer; font-family: inherit; font-size: 0.7rem; font-weight: 700;
    padding: 0.2rem 0.55rem; border-radius: 7px;
    color: var(--c-wood-deep, #4a2f14);
    background: rgba(154, 106, 60, 0.14); border: 1px solid rgba(154, 106, 60, 0.4);
}
.media-pv-pos button:hover { background: rgba(154, 106, 60, 0.24); }
@media (pointer: coarse) { .media-pv-zoom { width: 2.5rem; height: 2.5rem; } }
/* הנתונים: תווית וערך באותה שורה. ‎ltr‎ על הערכים -שם קובץ ו-"1200 × 800" הם
   טקסט לועזי, ובזרימת RTL הם היו מתהפכים. */
.media-pv-meta { display: flex; flex-direction: column; gap: 0.25rem; margin: 0; font-size: 0.76rem; }
.media-pv-meta[hidden] { display: none; }
.media-pv-meta > div { display: flex; align-items: baseline; gap: 0.4rem; }
.media-pv-meta dt { flex: 0 0 3.2rem; color: rgba(74, 47, 20, 0.6); font-weight: 700; }
.media-pv-meta dd { margin: 0; min-width: 0; color: var(--c-wood-deep, #4a2f14); font-weight: 700; overflow-wrap: anywhere; }
.media-pv-actions { display: flex; flex-direction: column; gap: 0.4rem; margin-top: auto; }
.media-pv-actions .admin-ubtn { justify-content: center; }
.media-pv-actions .admin-ubtn[hidden] { display: none; }
/* ---- הגדלה לתצוגה מלאה ---- */
.media-zoom-overlay {
    position: fixed; inset: 0; z-index: 240;
    display: grid; place-items: center; gap: 0.6rem;
    /* ‎minmax(0, 1fr)‎ ולא ‎1fr‎: ‎1fr‎ הוא ‎minmax(auto, 1fr)‎, כלומר השורה אינה
       יורדת מתחת לגובה התוכן -ותמונה גבוהה מהמסך פשוט גלשה החוצה (נמדד:
       1115px בחלון של 950). */
    grid-template-rows: minmax(0, 1fr) auto;
    padding: clamp(1rem, 4vw, 3rem);
    background: rgba(3, 9, 20, 0.9);
    backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
    animation: admin-fade 0.18s ease both;
}
.media-zoom-overlay[hidden] { display: none; }
/* ‎align-self/justify-self: stretch‎ דורסים את ה-‎place-items: center‎ של השכבה:
   בלי זה גובה הבמה הוא ‎auto‎, ולכן ‎max-height: 100%‎ של התמונה נמדד מול ‎auto‎
   ולא מגביל כלום -תמונה בת 1125px גלשה מחלון של 950 (נמדד). */
.media-zoom-stage { position: relative; align-self: stretch; justify-self: stretch; min-width: 0; min-height: 0; }
/* **התמונה ממוקמת מוחלטת בתוך הבמה.** ‎max-height: 100%‎ על פריט grid רגיל נמדד
   מול גובה שנחשב "לא מוגדר" בזמן חישוב הגודל הפנימי, ולכן פשוט לא הגביל -נמדד:
   במה 1404×811 ותמונה 900×**1125** שגלשה מהמסך. מיקום מוחלט בתוך הורה
   ‎position: relative‎ נותן תיבה מוגדרת, והאחוזים נפתרים מולה. */
.media-zoom-overlay img {
    position: absolute; inset: 0; margin: auto;
    width: auto; height: auto; max-width: 100%; max-height: 100%;
    object-fit: contain; border-radius: 10px; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
/* שורת המידע: שם ומידות משמאל, מונה מימין -רצועה אחת ולא שני אלמנטים מרחפים */
.media-zoom-bar {
    display: flex; align-items: center; gap: 0.8rem;
    max-width: 100%; padding: 0.35rem 0.9rem; border-radius: 999px;
    background: rgba(8, 20, 38, 0.7); border: 1px solid rgba(255, 231, 163, 0.28);
}
.media-zoom-cap { font-size: 0.8rem; color: rgba(255, 246, 230, 0.85); direction: ltr; overflow-wrap: anywhere; }
.media-zoom-count { font-size: 0.78rem; font-weight: 800; color: var(--c-gold, #ffd15a); direction: ltr; white-space: nowrap; }
.media-zoom-count:empty { display: none; }
/* חיצי הדפדוף. מוצגים רק כשיש יותר מתמונה אחת -שני כפתורים מתים נקראים כתקלה. */
.media-zoom-nav {
    position: absolute; top: 50%; transform: translateY(-50%); z-index: 2;
    width: 2.8rem; height: 2.8rem; display: none; place-items: center; cursor: pointer;
    border-radius: 50%; color: #fff6e6;
    background: rgba(7, 24, 47, 0.72); border: 1.5px solid rgba(255, 231, 163, 0.45);
    transition: background 0.15s;
}
.media-zoom-overlay.has-nav .media-zoom-nav { display: grid; }
.media-zoom-nav:hover { background: rgba(255, 231, 163, 0.28); }
.media-zoom-nav svg { width: 1.1rem; height: 1.1rem; }
.media-zoom-prev { inset-inline-start: clamp(0.5rem, 2vw, 1.4rem); }
.media-zoom-next { inset-inline-end: clamp(0.5rem, 2vw, 1.4rem); }
@media (pointer: coarse) { .media-zoom-nav { width: 3.2rem; height: 3.2rem; } }
.media-zoom-x {
    position: absolute; top: 0.8rem; inset-inline-end: 0.9rem; z-index: 2;
    width: 2.2rem; height: 2.2rem; display: grid; place-items: center; cursor: pointer;
    border-radius: 50%; color: #fff6e6; font-size: 0.9rem;
    background: rgba(7, 24, 47, 0.8); border: 1.5px solid rgba(255, 231, 163, 0.5);
}
.media-zoom-x:hover { background: rgba(255, 231, 163, 0.25); }
/* מובייל: עמודה אחת. התצוגה המקדימה **מעל** הרשת -היא המשוב על מה שנבחר,
   ומתחת לרשת נגללת היא פשוט לא נראית. */
@media (max-width: 720px) {
    .media-pick-body { grid-template-columns: 1fr; }
    .media-pick-side { order: -1; position: static; }
    .media-pv-frame { aspect-ratio: 16 / 9; }
    .media-pv-actions { flex-direction: row; }
    .media-pv-actions .admin-ubtn { flex: 1; }
    /* ---- גלילה אחת במובייל, ולא שתיים מקוננות ----
       **הבאג:** בשתי עמודות כל אחת נמתחת לגובה הדיאלוג והרשת נגללת בתוך
       עצמה, ולכן ‎.admin-dialog-body‎ מעולם לא היה ‎overflow: auto‎. אבל כאן
       הכול נערם לעמודה **אחת**: התצוגה המקדימה (‎order: -1‎) ומתחתיה הרשת -
       ונמדד גוף של 777px בתיבה של 638, כלומר **139px שנחתכים** ע"י
       ‎overflow: hidden‎ של ‎.admin-dialog‎ (שקיים בשביל הפינות המעוגלות)
       בלי שום דרך לגלול אליהם. זה הדיווח "אין מגע, אי אפשר להוריד למטה".
       הגלילה עוברת לגוף, והרשת משחררת את ‎max-height‎ שלה וזורמת בתוכו -
       שתי גלילות מקוננות באצבע אחת הן בעצמן באג. */
    .admin-dialog-wide .media-pick-body {
        overflow-y: auto;
        /* בלי זה פריט ה-flex אינו מתכווץ מתחת לגובה התוכן ולא נוצרת גלילה */
        min-height: 0;
        flex: 1;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior: contain;
    }
    /* **‎.admin-dialog-wide‎ בסלקטור, וזה לא קישוט.** כלל הבסיס של
       ‎.media-pick-grid‎ יושב **אחרי** ה-media query הזה בקובץ ובאותה
       specificity, ולכן הוא מנצח בסדר -נמדד שהרשת נשארה ‎max-height: 26rem‎
       (416px) עם גלילה משלה גם אחרי התיקון. אותה מלכודת שכבר תועדה כאן על
       מגירת התפריט ועל ‎min-width‎ המת. */
    .admin-dialog-wide .media-pick-grid { max-height: none; overflow-y: visible; }
}
/* ‎align-content: start‎ הוא העיקר כאן: הרשת ‎flex: 1‎ בתוך עמודה שנמתחת לגובה
   הפאנל שלצידה, וברירת המחדל ‎stretch‎ מתחה את **השורות** -האריחים נשארו 131px
   אבל המרווח ביניהם קפץ מ-13 ל-67, וזה נקרא כשורות לא מיושרות. */
.media-pick-grid { margin-top: 0; flex: 1; align-content: start; min-height: 8rem; max-height: 26rem; overflow-y: auto;
    /* חוק הסקרול המעוצב */
    scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.45) transparent; }
.media-pick-grid::-webkit-scrollbar { width: 6px; }
.media-pick-grid::-webkit-scrollbar-track { background: transparent; margin: 0.6rem 0; border-radius: 999px; }
.media-pick-grid::-webkit-scrollbar-thumb { background: rgba(255, 231, 163, 0.4); border-radius: 999px; border: 1px solid transparent; background-clip: content-box; }
/* התמונה הנבחרת מסומנת -בלעדיה התצוגה המקדימה מראה משהו שאין לו מקור על המסך */
.media-pick.is-sel { border-color: var(--c-gold, #ffd15a); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.35); }
/* העטיפה נושאת את המיקום היחסי של כפתור המחיקה. הכפתור אינו יכול לשבת בתוך
   ‎.media-pick‎ עצמו -כפתור בתוך כפתור הוא מרקאפ לא-תקין שהדפדפן מפרק. */
.media-pick-wrap { position: relative; display: block; }
.media-pick { padding: 0; cursor: pointer; border: 2px solid rgba(91, 163, 230, 0.35); border-radius: 10px; overflow: hidden; background: none; display: block; width: 100%; }
/* **בלי ‎transform‎ ב-hover.** האריח זז 1px כלפי מעלה, ובקצה התחתון הסמן יצא
   ממנו -‎hover‎ כבה, האריח חזר, ‎hover‎ נדלק: ריצוד. הסימון הוא טבעת בלבד. */
.media-pick:hover { border-color: var(--c-gold); box-shadow: 0 0 0 2px rgba(255, 209, 90, 0.25); }
/* התמונה בבורר בהירה, ולכן לאייקון המחיקה יש כאן גם צל -בלעדיו הוא נבלע
   בתמונות בהירות בדיוק כמו בשלט העץ. */
.media-pick-wrap .media-del { box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45); }

/* ---- הפרדה ברורה בין עמודי המערכת לעמודים שהמשתמש יצר ---- */
.pages-group-title {
    display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap;
    margin: 0.5rem 0 -0.1rem;
    font-size: 0.86rem; font-weight: 800; color: var(--c-gold-light);
}
.pages-group-title:first-child { margin-top: 0; }
.pages-group-title small { font-size: 0.72rem; font-weight: 400; color: #cfe8ff; opacity: 0.7; }
.pages-group-title::after { content: ''; flex: 1 1 3rem; height: 1px; background: rgba(255, 231, 163, 0.22); }
.pages-group-cms { color: #8ce6b0; }
.pages-group-cms::after { background: rgba(140, 230, 176, 0.25); }

/* עמוד מערכת ברשימת העמודים (בית/אודות -עיצוב מיוחד, לצפייה) */
.page-row-system {
    background: linear-gradient(155deg, rgba(255, 231, 163, 0.14), rgba(255, 209, 90, 0.06));
    border-color: rgba(255, 231, 163, 0.35);
    border-inline-start: 4px solid rgba(255, 209, 90, 0.65);
}
.page-row-system:hover { border-color: var(--c-gold); }
/* עמוד שנוצר על ידי המשתמש -בולט: פס ירוק, רקע חזק יותר והרמה בריחוף */
.page-row-cms {
    background: rgba(45, 130, 95, 0.18);
    border-color: rgba(120, 220, 165, 0.35);
    border-inline-start: 4px solid #4bd07a;
    transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.page-row-cms:hover {
    background: rgba(45, 130, 95, 0.28);
    border-color: rgba(120, 220, 165, 0.6);
    border-inline-start-color: #6fe89a;
    transform: translateY(-1px);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
}
.page-row-cms .page-row-info b { color: #ffffff; font-size: 1.02rem; }
.page-row-cms .page-row-slug {
    color: #9dedbf; opacity: 1;
    background: rgba(120, 220, 165, 0.12); border-color: rgba(120, 220, 165, 0.28);
}
/* מובייל: הפעולות יורדות לשורה נפרדת כדי שהשם והכתובת לא יידחסו */
@media (max-width: 560px) {
    .page-row { flex-direction: column; align-items: stretch; gap: 0.5rem; }
    .page-row-actions { justify-content: flex-start; }
}
.page-sys-badge {
    align-self: center; padding: 0.1rem 0.5rem; font-size: 0.66rem; font-weight: 800;
    color: #06263f; background: var(--c-gold); border-radius: 999px;
}

/* שדות טופס העמוד -מסודרים, רוחב מלא ברוב, נשברים במסך צר */
.page-form-fields {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.9rem 1rem;
    align-items: start;
    margin-bottom: 0.4rem;
}
.page-form-fields .admin-ufield { min-width: 0; }
/* שדה עם מחוון גודל משלו (כרטיס האודות). העוטף הוא פריט ה-grid, והמחוון
   **אח** של התווית ולא ילד -‎<label>‎ מפנה כל לחיצה שבתוכו אל שדה הטקסט. */
.page-form-fields .ab-fld { min-width: 0; display: flex; flex-direction: column; gap: 0.3rem; }
.ab-size { display: flex; flex-direction: column; gap: 0.1rem; cursor: default; }
.ab-size > span { font-size: 0.74rem; font-weight: 400; color: rgba(207, 232, 255, 0.72); }
.ab-size b { font-variant-numeric: tabular-nums; color: var(--c-gold-light); }
.ab-size .admin-range { width: 100%; min-width: 0; }
@media (pointer: coarse) { .ab-size { min-height: 2.75rem; justify-content: center; } }
.page-form-fields .page-grid-full { grid-column: 1 / -1; } /* שדה על כל הרוחב (שקיפות) */
.page-form-fields .page-bg-dropdown { max-width: none; width: 100%; } /* בורר הרקע ממלא את התא */
@media (max-width: 560px) { .page-form-fields { grid-template-columns: 1fr; } }

/* עורך תוכן האודות */
.about-img-row { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; }
.about-img-preview {
    width: 5rem; height: 5rem; border-radius: 12px; flex: 0 0 auto;
    background-size: contain; background-position: center; background-repeat: no-repeat;
    background-color: rgba(6, 26, 52, 0.5); border: 2px solid rgba(91, 163, 230, 0.4);
}
.about-skills-editor { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.about-skill-row { display: flex; align-items: center; gap: 0.4rem; }
.about-skill-row .ab-skill-icon {
    flex: 0 0 3.2rem; width: 3.2rem; text-align: center;
    padding: 0.42rem 0.3rem; border: 1.5px solid rgba(91, 163, 230, 0.5); border-radius: 9px;
    background: #f2f8ff; color: var(--c-night); font-size: 1rem;
}
.about-skill-row .ab-skill-text {
    flex: 1 1 auto; min-width: 0;
    padding: 0.42rem 0.6rem; border: 1.5px solid rgba(91, 163, 230, 0.5); border-radius: 9px;
    background: #f2f8ff; color: var(--c-night); font-family: inherit; font-size: 0.9rem;
}
/* הפוקוס ממוקד לשני שדות הטקסט ולא ל-‎input‎ כללי: ‎.about-skill-row input:focus‎
   הוא ‎(0,2,1)‎ וגובר על ‎.admin-switch input‎ ‎(0,1,1)‎, כלומר התיבה המוסתרת של
   המתג הייתה מקבלת מסגרת וצל -הווריאנט המקומי של חוק "כלל גורף על input בפאנל". */
.about-skill-row .ab-skill-icon:focus,
.about-skill-row .ab-skill-text:focus { outline: none; border-color: #2f7fce; box-shadow: 0 0 0 3px rgba(77, 168, 232, 0.35); }
/* מתג ההצגה של התחום -מוקטן, כי הוא רביעי בשורה צרה (מתג + אייקון + טקסט + מחיקה).
   יעד הנגיעה מגיע מהכלל הגלובלי על ‎label:has(> input[type=checkbox])‎. */
.about-skill-row .ab-skill-sw { flex: 0 0 auto; }
.about-skill-row .ab-skill-sw .admin-switch-track { --sw-w: 2.1rem; --sw-h: 1.15rem; --sw-pad: 0.11rem; }
/* שורה כבויה: מעומעמים השדות בלבד -המתג הוא הדרך לחזור וחייב להישאר בהיר */
.about-skill-row.is-off .ab-skill-icon,
.about-skill-row.is-off .ab-skill-text { opacity: 0.5; }

/* ---- מסך "כפתורים": מאגר אחד לכל האתר ----
   כרטיס לכל כפתור ולא שורה אחת: שבעה שדות בשורה נדחסים לבלתי-שמישים כבר
   בדסקטופ, קל וחומר בעמודת הפאנל. השדות משתמשים ב-‎.pf-cover-fld‎/
   ‎.pf-cover-lbl‎ הקיימים -אותו דפוס של פקדי התמונה, ולא עיצוב שני; והתוויות
   הן גם מה שמכניס את השדות לחיפוש שבפאנל. */
.btn-help { margin: 0.2rem 0 0.8rem; padding-inline-start: 1.2rem; display: flex; flex-direction: column; gap: 0.5rem; font-size: 0.85rem; line-height: 1.5; }
.btn-help b { color: var(--c-gold-light); }
.btn-tag-sample,
.btn-help code,
.admin-tab[data-tab="buttons"] .admin-note code {
    display: inline-block; unicode-bidi: isolate;
    padding: 0.05rem 0.35rem; border-radius: 6px;
    background: rgba(6, 26, 52, 0.55); border: 1px solid rgba(91, 163, 230, 0.3);
    font-family: Consolas, "Courier New", monospace; font-size: 0.85em; color: #ffe7a3;
}
.btn-pool { display: flex; flex-direction: column; gap: 0.7rem; margin-bottom: 0.8rem; }
.btn-card {
    display: flex; flex-direction: column; gap: 0.7rem;
    padding: 0.7rem; border-radius: 12px;
    border: 1px solid rgba(91, 163, 230, 0.28);
    background: rgba(255, 255, 255, 0.05);
}
.btn-card.is-dragging { background: rgba(255, 231, 163, 0.14); border-color: var(--c-gold); }
/* כותרת: ידית | מתג | תצוגה מקדימה | תג | מחיקה */
.btn-card-head {
    display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap;
    padding-bottom: 0.6rem; border-bottom: 1px solid rgba(91, 163, 230, 0.22);
}
/* ‎touch-action: none‎ **רק על הידית**: גוף הפאנל נגלל, וכיבוי הגלילה על
   הכרטיס כולו היה מונע גלילה באצבע (כלל מתועד). */
.btn-card-grip {
    flex: 0 0 auto; cursor: grab; touch-action: none;
    padding: 0.2rem 0.15rem; font-size: 0.95rem; line-height: 1; letter-spacing: -3px;
    color: rgba(255, 231, 163, 0.5); transition: color 0.14s;
}
.btn-card-grip:hover { color: var(--c-gold, #ffd15a); }
.btn-card-grip:active { cursor: grabbing; }
.btn-card-ord { flex: 0 0 auto; }
/* במגע היעד נמדד 9x22 -קטן מכדי לתפוס אותו באצבע, ולכן הוא מוגדל לתיבה
   של ממש. הכלל הגלובלי על יעדי נגיעה נוגע ב-‎label‎ בלבד.
   הידית עצמה יורדת שם: הכרטיס גבוה 705px בטלפון, וגרירה כזאת ארוכה מאזור
   הגלילה כולו -החיצים הם הדרך, בדיוק כמו בסדר התפריט. */
@media (pointer: coarse) {
    .btn-card-grip { display: none; }
    .btn-card-ord button { min-width: 2.4rem; min-height: 2.4rem; }
}
.btn-card-sw { flex: 0 0 auto; }
.btn-card-sw .admin-switch-track { --sw-w: 2.1rem; --sw-h: 1.15rem; --sw-pad: 0.11rem; }
/* התצוגה המקדימה: כפתור אמיתי (אותן מחלקות ‎cms-btn‎ של האתר) שאינו לחיץ.
   הכללים של ‎.cms-btn‎ באתר מוגבלים להקשרי התוכן, ולכן הצבעים נכתבים כאן
   בגודל מוקטן -אותה ערכה, בגודל שמתאים לשורה בפאנל. */
.btn-card-pv { flex: 1 1 8rem; min-width: 0; display: flex; justify-content: center; overflow: hidden; }
.btn-card-pv .cms-btn,
.ab-pick-btn .cms-btn {
    pointer-events: none; max-width: 100%;
    display: inline-flex; align-items: center; gap: 0.35rem;
    border-radius: 10px; font-weight: 800; text-decoration: none;
    color: #3a2a15; background: linear-gradient(180deg, #ffe7a3, var(--c-gold) 55%, #e0a92e);
    border: 1px solid var(--c-gold-deep);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.btn-card-pv .cms-btn { padding: 0.4rem 0.85rem; font-size: 0.82rem; box-shadow: 0 3px 0 var(--c-gold-deep); }
.ab-pick-btn .cms-btn { padding: 0.3rem 0.7rem; font-size: 0.78rem; }
:is(.btn-card-pv, .ab-pick-btn) .cms-btn.cms-btn-2 { color: #eef5ff; background: linear-gradient(180deg, #2a6bb0, #144a8a 60%, #0d2f5e); border-color: #0d2f5e; box-shadow: none; }
:is(.btn-card-pv, .ab-pick-btn) .cms-btn.cms-btn-green { color: #eafff0; background: linear-gradient(180deg, #3fae62, #2b8a49 60%, #1c5f32); border-color: #1c5f32; box-shadow: none; }
:is(.btn-card-pv, .ab-pick-btn) .cms-btn.cms-btn-red { color: #fff0ec; background: linear-gradient(180deg, #d9573f, #b23a26 60%, #7f2415); border-color: #7f2415; box-shadow: none; }
:is(.btn-card-pv, .ab-pick-btn) .cms-btn.cms-btn-wood { color: #f7ecd8; background: linear-gradient(180deg, #8a5a2c, #5f3c1a 60%, #3f2810); border-color: #3f2810; box-shadow: none; }
:is(.btn-card-pv, .ab-pick-btn) .cms-btn.cms-btn-ghost { color: var(--c-gold-light); background: rgba(255, 246, 230, 0.12); border: 2px dashed var(--c-gold-light); box-shadow: none; }
/* כפתור העתקת התג -הוא גם החיווי של המזהה, ולכן הוא מציג את התג עצמו */
.btn-card-tag {
    flex: 0 0 auto; cursor: pointer;
    display: inline-flex; align-items: center; gap: 0.3rem;
    padding: 0.3rem 0.55rem; border-radius: 8px;
    border: 1px solid rgba(91, 163, 230, 0.4); background: rgba(6, 26, 52, 0.5);
    color: #ffe7a3; font-family: Consolas, "Courier New", monospace; font-size: 0.76rem;
    transition: background 0.15s, border-color 0.15s;
}
.btn-card-tag:hover { background: rgba(255, 231, 163, 0.16); border-color: var(--c-gold); }
.btn-card-tag span { unicode-bidi: isolate; }

/* רשת השדות. ‎min()‎ במינימום -מסילה עם מינימום קשיח אינה יורדת מתחתיו
   בעמודה צרה (מלכודת מתועדת). */
/* שלוש מסילות: אייקון צר, ואחריו שתיים שוות. כל שדה מקבל את מקומו במפורש -
   בהצבה אוטומטית ה"מזהה" נחת במסילה הצרה (נמדד: ‎contact‎ נדחס ל-5rem)
   ו"לשונית חדשה" נשברה לשתי שורות. */
.btn-card-grid { display: grid; grid-template-columns: 5rem minmax(0, 1fr) minmax(0, 1fr); gap: 0.7rem 0.6rem; align-items: start; }
.btn-card-grid .bp-fld-icon  { grid-column: 1; }
.btn-card-grid .bp-fld-text  { grid-column: 2 / -1; }
.btn-card-grid .bp-fld-id    { grid-column: 1 / 3; }
.btn-card-grid .bp-fld-style { grid-column: 3; }
.btn-card-grid .bp-fld-href,
.btn-card-grid .bp-fld-title,
.btn-card-grid .bp-fld-blank { grid-column: 1 / -1; }
.btn-card-grid .bp-fld-style { align-self: end; }
/* השדות בסגנון הפאנל (‎.admin-ufield‎) ולא קלף לבן: שדה בהיר על פאנל כהה
   נקרא כרכיב זר, וזה בדיוק מה שנראה כאן. */
.btn-card input[type="text"] {
    width: 100%; min-width: 0;
    padding: 0.5rem 0.7rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: inherit; font-weight: 700; font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.btn-card input[type="text"]::placeholder { color: rgba(255, 255, 255, 0.45); font-weight: 400; }
.btn-card input[type="text"]:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.btn-card input[type="text"]:focus {
    outline: none; border-color: var(--c-gold);
    background: rgba(255, 255, 255, 0.15); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3);
}
.btn-card .bp-icon { text-align: center; padding-inline: 0.3rem; font-size: 1.05rem; }
.btn-card .bp-href, .btn-card .bp-id { font-size: 0.84rem; font-family: Consolas, "Courier New", monospace; }
.btn-card .ui-pick { width: 100%; }
/* בורר הסגנון מציג את הכפתור עצמו בכל צבע -גם בכפתור הסגור וגם ברשימה.
   הרשימה מוצמדת ל-‎body‎ (היא בורחת מ-‎overflow: clip‎ של הסעיף), ולכן
   הכללים שלה אינם יכולים להיתלות ב-‎.btn-card‎. */
.ui-pick-val .cms-btn,
.ui-pick-opt .cms-btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 0.24rem 0.85rem; border-radius: 9px;
    font-weight: 800; font-size: 0.78rem; white-space: nowrap;
    color: #3a2a15; background: linear-gradient(180deg, #ffe7a3, var(--c-gold) 55%, #e0a92e);
    border: 1px solid var(--c-gold-deep);
}
:is(.ui-pick-val, .ui-pick-opt) .cms-btn.cms-btn-2 { color: #eef5ff; background: linear-gradient(180deg, #2a6bb0, #144a8a 60%, #0d2f5e); border-color: #0d2f5e; }
:is(.ui-pick-val, .ui-pick-opt) .cms-btn.cms-btn-green { color: #eafff0; background: linear-gradient(180deg, #3fae62, #2b8a49 60%, #1c5f32); border-color: #1c5f32; }
:is(.ui-pick-val, .ui-pick-opt) .cms-btn.cms-btn-red { color: #fff0ec; background: linear-gradient(180deg, #d9573f, #b23a26 60%, #7f2415); border-color: #7f2415; }
:is(.ui-pick-val, .ui-pick-opt) .cms-btn.cms-btn-wood { color: #f7ecd8; background: linear-gradient(180deg, #8a5a2c, #5f3c1a 60%, #3f2810); border-color: #3f2810; }
:is(.ui-pick-val, .ui-pick-opt) .cms-btn.cms-btn-ghost { color: var(--c-gold-light); background: rgba(255, 246, 230, 0.12); border: 2px dashed var(--c-gold-light); }
/* הפריטים כאן הם דוגמאות ולא שורות טקסט. **הרקע של הנבחר יורד**: הפס הזהוב
   של ‎.is-on‎ מכסה בדיוק את הדוגמה שבאנו להראות -הסימון הוא טבעת סביבה.
   הריפוד הודק כדי ששש הדוגמאות ייכנסו ב-‎max-height‎ של הרשימה בלי גלילה. */
.ui-pick-opt:has(.cms-btn) { padding: 0.16rem 0.5rem; }
.ui-pick-opt.is-on:has(.cms-btn) { background: none; }
.ui-pick-opt.is-on .cms-btn { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.9); }
.ui-pick-opt:hover:has(.cms-btn) .cms-btn { filter: brightness(1.08); }
.btn-card .bp-blank { display: flex; align-items: center; gap: 0.5rem; font-size: 0.85rem; font-weight: 700; color: #cfe8ff; cursor: pointer; min-height: 2.4rem; }
/* כפתור כבוי: מעומעמים התצוגה והשדות -המתג הוא הדרך לחזור וחייב להישאר בהיר */
.btn-card.is-off .btn-card-pv,
.btn-card.is-off .btn-card-grid { opacity: 0.5; }
.btn-pool-bar { display: flex; align-items: center; gap: 0.6rem; flex-wrap: wrap; }
.bp-del-preview { display: flex; justify-content: center; margin-bottom: 0.6rem; }
.bp-del-preview .cms-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.4rem 0.85rem; border-radius: 10px; font-weight: 800; font-size: 0.85rem;
    color: #3a2a15; background: linear-gradient(180deg, #ffe7a3, var(--c-gold) 55%, #e0a92e);
    border: 1px solid var(--c-gold-deep);
}

/* ---- בורר הכפתורים בעורך העמוד (בחירה מהמאגר) ----
   שלוש מסילות ולא flex: בשתי מסילות צדדיות **שוות** הכפתור ממורכז ביחס
   לשורה. ב-flex הוא ממורכז במה שנשאר, ולכן מזהה ארוך מסיט אותו -ושתי
   שורות עוקבות יוצאות לא מיושרות זו מול זו. */
.ab-btnpick { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.4rem; }
.ab-pick-row {
    display: grid; grid-template-columns: minmax(2.5rem, 1fr) auto minmax(2.5rem, 1fr);
    align-items: center; gap: 0.6rem; cursor: pointer;
    padding: 0.45rem 0.6rem; border-radius: 10px;
    border: 1px solid rgba(91, 163, 230, 0.25); background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s, background 0.15s;
}
.ab-pick-row:hover { border-color: rgba(255, 231, 163, 0.45); background: rgba(255, 255, 255, 0.07); }
.ab-pick-row.is-on { border-color: var(--c-gold); background: rgba(255, 231, 163, 0.12); }
.ab-pick-row.is-dim .ab-pick-btn { opacity: 0.45; }
.ab-pick-cb { justify-self: start; }
.ab-pick-btn { min-width: 0; display: flex; justify-content: center; overflow: hidden; }
.ab-pick-meta { justify-self: end; display: flex; align-items: center; gap: 0.4rem; min-width: 0; }
.ab-pick-id { unicode-bidi: isolate; font-family: Consolas, "Courier New", monospace; font-size: 0.74rem; color: rgba(255, 246, 230, 0.6); overflow: hidden; text-overflow: ellipsis; }
.ab-pick-off { flex: 0 0 auto; font-size: 0.7rem; padding: 0.1rem 0.4rem; border-radius: 999px; background: rgba(224, 69, 46, 0.25); border: 1px solid rgba(224, 69, 46, 0.5); }
/* כפתור שנראה כקישור -"מסך הכפתורים ←" בתוך משפט הסבר */
.admin-linkbtn {
    background: none; border: none; padding: 0; cursor: pointer;
    color: var(--c-gold-light); font: inherit; font-weight: 800; text-decoration: underline;
}
.admin-linkbtn:hover { color: #fff; }

@media (max-width: 520px) {
    /* בעמודה צרה הכול זה מעל זה -‎5rem‎ ועוד שני שדות אינם נכנסים */
    .btn-card-grid { grid-template-columns: minmax(0, 1fr); }
    .btn-card-grid > * { grid-column: 1 !important; }
    .btn-card-grid .bp-fld-icon { max-width: 6rem; }
    .btn-card-tag { order: 5; width: 100%; justify-content: center; }
    .ab-pick-id { display: none; }
}

.page-open-last { margin-inline-start: 0.5rem; }

/* ---- סדר התפריט (גרירה/חיצים) ---- */
.nav-order-list { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.6rem; }
.nav-order-row {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.5rem 0.7rem;
    background: rgba(255, 246, 230, 0.1);
    border: 1px solid rgba(255, 231, 163, 0.28);
    border-radius: 10px;
    cursor: grab;
}
.nav-order-row.is-dragging { opacity: 0.5; cursor: grabbing; }
.nav-order-grip { color: rgba(255, 231, 163, 0.6); font-size: 1.05rem; line-height: 1; }
.nav-order-title { flex: 1; font-weight: 700; color: #fff; }
.nav-order-btns { display: inline-flex; gap: 0.25rem; }
.nav-order-btns button {
    width: 1.7rem; height: 1.7rem;
    border: 1px solid rgba(255, 231, 163, 0.4);
    border-radius: 7px;
    background: rgba(13, 62, 120, 0.5);
    color: #ffe7a3;
    cursor: pointer; font-size: 0.7rem;
    transition: background 0.15s;
}
.nav-order-btns button:hover { background: rgba(211, 154, 26, 0.4); }

/* ---- דיאלוג כפתור CTA: שורת שדות, תצוגה מקדימה, כפתורים מוכנים ---- */
.admin-ufield-row { display: flex; gap: 0.6rem; }
.cta-preview {
    display: flex; align-items: center; justify-content: center;
    min-height: 3.2rem; padding: 0.5rem;
    background: linear-gradient(180deg, #e9dcc0, #cbb488);
    border: 1px solid rgba(211, 154, 26, 0.5); border-radius: 10px;
}
.cta-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.cta-preset {
    padding: 0.35rem 0.7rem; cursor: pointer;
    background: #fff; border: 1px solid rgba(211, 154, 26, 0.5); border-radius: 999px;
    font-family: inherit; font-size: 0.82rem; color: #4a2f12;
    transition: background 0.12s;
}
.cta-preset:hover { background: var(--c-gold-light); }

/* ---- מתג פרסום עמוד ברשימה ---- */
.admin-utoggle {
    width: 2rem; height: 2rem; cursor: pointer;
    background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 231, 163, 0.35);
    border-radius: 8px; font-size: 0.95rem; line-height: 1;
    transition: background 0.12s, transform 0.08s;
}
.admin-utoggle:hover { background: rgba(255, 231, 163, 0.25); }
.admin-utoggle:active { transform: translateY(1px); }
.admin-utoggle.is-on { background: rgba(75, 208, 122, 0.22); border-color: rgba(75, 208, 122, 0.5); }
.page-row-off { opacity: 0.6; }
.page-off-badge {
    display: inline-block; margin-inline-start: 0.5rem;
    padding: 0.05rem 0.5rem; font-size: 0.7rem; font-weight: 700;
    color: #ffd0c7; background: rgba(224, 69, 46, 0.25);
    border: 1px solid rgba(224, 69, 46, 0.5); border-radius: 999px;
}

/* מתג מוקטן לשורת עמוד (משתמש בעיצוב המתג הרגיל) */
/* רק המידות משתנות -המרכוז והמהלך נגזרים מהן אוטומטית */
.admin-switch-mini { gap: 0; }
.admin-switch-mini .admin-switch-track { --sw-w: 2.4rem; --sw-h: 1.3rem; }

/* ---- תפריט קליק-ימני בעורך (עריכת קישור/כפתור) ---- */
.wysi-ctxmenu {
    position: fixed; z-index: 200; min-width: 11rem;
    background: #12325f; border: 1px solid rgba(255, 231, 163, 0.4);
    border-radius: 10px; padding: 0.3rem; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
    display: flex; flex-direction: column; gap: 0.15rem;
}
.wysi-ctxmenu[hidden] { display: none; }
.wysi-ctxmenu button {
    text-align: start; padding: 0.45rem 0.6rem; cursor: pointer;
    background: none; border: none; border-radius: 7px;
    color: #eef5ff; font-family: inherit; font-size: 0.9rem;
}
.wysi-ctxmenu button:hover { background: rgba(255, 231, 163, 0.18); }
.wysi-ctxmenu .ctx-color-item {
    display: flex; align-items: center; gap: 0.4rem;
    padding: 0.45rem 0.6rem; cursor: pointer; border-radius: 7px;
    color: #eef5ff; font-family: inherit; font-size: 0.9rem;
}
.wysi-ctxmenu .ctx-color-item:hover { background: rgba(255, 231, 163, 0.18); }
.wysi-ctxmenu .ctx-color-item span { flex: 1; }
.wysi-ctxmenu .ctx-color-input { width: 1.5rem; height: 1.5rem; padding: 0; border: none; background: none; cursor: pointer; }

/* ---- בורר המסכות ----
   כל אפשרות מציגה את **הצורה עצמה** ולא רק את שמה: "משושה" או "מגן" אינם
   אומרים דבר עד שרואים אותם, וזו החלטה שנעשית בעין. התצוגה המקדימה נושאת את
   אותן מחלקות ‎imgm-*‎ של האתר, כך שהיא לא יכולה להתפצל מהתוצאה. */
.imgmask-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(4.4rem, 100%), 1fr)); gap: 0.5rem; margin-top: 0.35rem; }
.imgmask-opt {
    display: flex; flex-direction: column; align-items: center; gap: 0.3rem;
    padding: 0.45rem 0.3rem; cursor: pointer;
    border-radius: 10px;
    border: 1.5px solid rgba(255, 231, 163, 0.25);
    background: rgba(13, 27, 48, 0.45);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.imgmask-opt:hover { border-color: rgba(255, 231, 163, 0.6); transform: translateY(-1px); }
.imgmask-opt.is-on { border-color: var(--c-gold, #ffd15a); background: rgba(255, 231, 163, 0.16); }
/* ---- אריחי "מעבר עכבר" ----
   האייקון עצמו מדגים את האפקט בריחוף על האריח, ולכן אין צורך להסביר
   במילים מה זו "הטיה קלה". אותן מחלקות ‎imgh-*‎ של האתר לא יעבדו כאן -הן
   מוגדרות על ‎img‎ בתוך הקשרי התוכן- ולכן ההדגמה מוגדרת בנפרד ובמפורש. */
.imghover-demo { display: block; font-size: 1.5rem; line-height: 1; transition: transform 0.28s ease, filter 0.28s ease; }
.imgmask-opt:hover .imghover-demo.imgh-zoom   { transform: scale(1.22); }
.imgmask-opt:hover .imghover-demo.imgh-lift   { transform: translateY(-6px); }
.imgmask-opt:hover .imghover-demo.imgh-tilt   { transform: perspective(400px) rotateX(16deg) rotateY(-16deg); }
.imghover-demo.imgh-bright                    { filter: brightness(0.7); }
.imgmask-opt:hover .imghover-demo.imgh-bright { filter: brightness(1.25); }
.imgmask-opt:hover .imghover-demo.imgh-glow   { filter: drop-shadow(0 0 8px rgba(255, 209, 90, 0.95)); }
.imghover-demo.imgh-color                     { filter: grayscale(1); }
.imgmask-opt:hover .imghover-demo.imgh-color  { filter: grayscale(0); }
.imgmask-opt:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
.imgmask-name { font-size: 0.72rem; font-weight: 700; color: #ffe7a3; }
/* גוון זהב במקום תמונה: הצורה היא המידע, ותמונה אמיתית רק הייתה מסיחה */
.imgmask-pv {
    width: 2.5rem; height: 2.5rem; display: block;
    background: linear-gradient(140deg, var(--c-gold-light, #ffe7a3), var(--c-gold-deep, #d39a1a));
}
.imgmask-pv.imgm-circle  { clip-path: circle(50%); }
.imgmask-pv.imgm-hex     { clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); }
.imgmask-pv.imgm-shield  { clip-path: polygon(0% 0%, 100% 0%, 100% 60%, 50% 100%, 0% 60%); }
.imgmask-pv.imgm-diamond { clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%); }
.imgmask-pv.imgm-star    { clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%); }
.imgmask-pv.imgm-wave    { clip-path: polygon(0% 0%, 100% 0%, 100% 86%, 75% 100%, 50% 86%, 25% 100%, 0% 86%); }
.imgmask-pv.imgm-notch   { clip-path: polygon(14% 0%, 86% 0%, 100% 14%, 100% 86%, 86% 100%, 14% 100%, 0% 86%, 0% 14%); }
.imgmask-pv.imgm-arch    { border-radius: 50% 50% 4px 4px / 38% 38% 4px 4px; }
.imgmask-pv.imgm-leaf    { border-radius: 56% 4px 56% 4px; }
.imgmask-pv.imgm-heart {
    --pf-heart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' preserveAspectRatio='none'%3E%3Cpath d='M50 92C22 70 4 50 4 31 4 15 16 6 28 6c9 0 17 5 22 13 5-8 13-13 22-13 12 0 28 9 28 25 0 19-18 39-50 61z' fill='%23000'/%3E%3C/svg%3E");
    -webkit-mask-image: var(--pf-heart); mask-image: var(--pf-heart);
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
}
.imgmask-pv.imgm-fade {
    --pf-fade: radial-gradient(ellipse 78% 78% at 50% 50%, #000 52%, rgba(0,0,0,0.55) 76%, transparent 100%);
    -webkit-mask-image: var(--pf-fade); mask-image: var(--pf-fade);
}

/* ---- ידית גרירה לשינוי גודל תמונה בעורך ---- */
.wysi-imghandle {
    /* ‎touch-action: none‎ -בלעדיו הדפדפן גולל במקום לשנות גודל, וזה בדיוק מה
       שקרה באצבע. יושב על הידית בלבד, כך שהעורך עצמו נשאר נגלל. */
    touch-action: none;
    position: fixed; z-index: 210; width: 15px; height: 15px;
    background: radial-gradient(circle at 40% 35%, #fff5d8, var(--c-gold) 70%);
    border: 2px solid var(--c-wood-deep); border-radius: 50%;
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
}
/* פינה שמאלית-תחתונה ↙ = nesw ; שמאלית-עליונה ↖ = nwse */
.wysi-imghandle-bl { cursor: nesw-resize; }
.wysi-imghandle-tl { cursor: nwse-resize; }
.wysi-imghandle[hidden] { display: none; }
/* באצבע 15px הוא יעד בלתי-אפשרי; במגע הידית גדלה ומקבלת שטח נגיעה מסביבה,
   ובזמן הגרירה מכבים בחירת טקסט כדי שלא תיפתח זכוכית המגדלת של iOS. */
@media (pointer: coarse) {
    .wysi-imghandle { width: 26px; height: 26px; border-width: 3px; }
    .wysi-imgtools button { min-height: 2.1rem; padding-inline: 0.55rem; }
    .wysi-imgnum input { min-height: 2.1rem; }
}
body.is-imgdrag, body.is-imgdrag * { user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }

/* ---- שורת שמירה/תצוגה: כפתורי השמירה בקצה אחד, התצוגה החיה בשני ---- */
.page-save-row { display: flex; align-items: center; justify-content: space-between; gap: 0.8rem; margin-top: 0.4rem; flex-wrap: wrap; }

/* ---- מקטע רכיבי סצנה מותאמים לעמוד ---- */
.page-scene-custom {
    margin-top: 0.6rem; padding: 0.7rem 0.8rem;
    background: rgba(13, 62, 120, 0.16); border: 1px solid rgba(255, 231, 163, 0.25);
    border-radius: 12px;
}
.page-scene-custom[hidden] { display: none; }
.page-scene-custom .admin-note { margin-bottom: 0.7rem; }
.page-scene-custom .admin-switch-list { display: flex; flex-direction: column; gap: 0.7rem; }

/* ---- קבוצת כפתורי שמירה/החל ---- */
/* רווח נדיב בין "שמור" ל"שמור וסגור": שני כפתורי שמירה צמודים נקראים
   כפקד אחד, ולחיצה מוחמצת כאן סוגרת את החלון במקום להמשיך לערוך. */
.page-save-btns { display: flex; align-items: center; gap: 0.9rem; flex-wrap: wrap; }
/* **הכפתור הוא מחוון המצב** -אותו דפוס של שורת הפרויקט. ה-toast חולף וקל
   לפספס אותו, ולכן "נשמר" מול "שמור" יושב על הכפתור עצמו. */
#pageSaveBtn:disabled { opacity: 0.62; cursor: default; filter: saturate(0.5); }
#pageSaveBtn:disabled:hover { filter: saturate(0.5); }
#pageSaveBtn.is-dirty {
    background: linear-gradient(180deg, #6ee7a0, #35a163 60%, #1f7345) !important;
    box-shadow: 0 3px 0 #1f7345, 0 0 0 3px rgba(110, 231, 160, 0.25) !important;
    color: #06210f !important;
    animation: pf-save-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { #pageSaveBtn.is-dirty { animation: none; } }
.admin-ubtn-apply {
    background: linear-gradient(180deg, #4bd07a, #2b8a49 60%, #1c5f32) !important;
    box-shadow: 0 3px 0 #1c5f32, 0 6px 14px rgba(13, 62, 120, 0.3), inset 0 1px 0 rgba(255,255,255,0.3) !important;
    color: #eafff0 !important;
}
.admin-ubtn-apply:hover { filter: brightness(1.07); }
.admin-ubtn-apply:active { transform: translateY(2px); box-shadow: 0 1px 0 #1c5f32 !important; }

.slug-echo { unicode-bidi: isolate; direction: ltr; }

/* ---- כפתורי תצוגה (מקדימה + חיה באתר) ---- */
.page-view-btns { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
#pageLiveSiteBtn.is-active {
    background: linear-gradient(180deg, #4bd07a, #2b8a49 60%, #1c5f32) !important;
    color: #eafff0 !important; border-color: rgba(75, 208, 122, 0.6) !important;
    box-shadow: 0 0 0 2px rgba(75, 208, 122, 0.4), 0 3px 0 #1c5f32 !important;
}

/* תצוגה מקדימה של הטבלה בדיאלוג */
#tablePreview { background: #fff6e6; border: 1px solid rgba(211, 154, 26, 0.4); border-radius: 8px; padding: 0.5rem; max-height: 12rem; overflow: auto; color: #3a2a15; }

/* מתגי בסיס בראש עורך העמוד (פעיל/ניווט) */
.page-base-switches {
    display: flex; flex-direction: column; gap: 0.6rem;
    margin-bottom: 1rem; padding: 0.7rem 0.85rem;
    background: rgba(13, 62, 120, 0.22); border: 1px solid rgba(255, 231, 163, 0.25); border-radius: 12px;
}

/* ---- בורר דמויות עם תמונות ---- */
.char-picker { margin-top: 0.7rem; }
.char-picker-lbl { display: block; font-size: 0.8rem; font-weight: 700; color: #cfe8ff; margin-bottom: 0.5rem; }
.char-thumbs { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.char-thumb-item { position: relative; cursor: pointer; display: block; }
.char-thumb-item input { position: absolute; opacity: 0; width: 0; height: 0; }
.char-thumb {
    display: block; width: 3.4rem; height: auto; min-height: 3.4rem;
    background-repeat: no-repeat;
    border: 2px solid rgba(255, 231, 163, 0.35); border-radius: 10px;
    background-color: rgba(13, 62, 120, 0.4);
    transition: border-color 0.15s, transform 0.1s, opacity 0.15s;
}
.char-thumb-item:hover .char-thumb { border-color: var(--c-gold); transform: translateY(-2px); }
.char-thumb-item .char-thumb-check {
    position: absolute; top: -6px; inset-inline-end: -6px;
    width: 1.2rem; height: 1.2rem; line-height: 1.2rem; text-align: center;
    background: linear-gradient(180deg, #4bd07a, #2b8a49); color: #fff;
    border-radius: 50%; font-size: 0.72rem; font-weight: 700;
    box-shadow: 0 1px 3px rgba(0,0,0,0.4); transition: opacity 0.15s;
}
.char-thumb-item.is-off .char-thumb { opacity: 0.32; filter: grayscale(0.8); border-color: rgba(224,69,46,0.4); }
.char-thumb-item.is-off .char-thumb-check { opacity: 0; }

/* ---- עיצוב כותרות התוכן (H1-H6) ---- */
.heading-styles { display: flex; flex-direction: column; gap: 0.6rem; }
/* כרטיס לכל רמה: תגית הרמה, גופן, גודל (pt עם +/-), צבע, ותצוגה מקדימה */
.heading-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: end; gap: 0.5rem 0.7rem;
    padding: 0.7rem 0.8rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 231, 163, 0.18);
    border-radius: 12px;
}
.heading-row-lbl {
    align-self: center;
    min-width: 2.4rem; text-align: center; font-weight: 800; font-size: 0.9rem;
    color: var(--c-gold-light); background: rgba(255, 209, 90, 0.14);
    border: 1px solid rgba(255, 231, 163, 0.3); border-radius: 9px; padding: 0.35rem 0.45rem;
}
.heading-ctl { display: flex; flex-direction: column; gap: 0.25rem; min-width: 0; }
.heading-ctl-cap { font-size: 0.7rem; font-weight: 700; color: #cfe8ff; opacity: 0.85; }
.heading-row .heading-font {
    width: 100%;
    padding: 0.45rem 0.6rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-size: 0.95rem; cursor: pointer;
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
.heading-row .heading-font:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.heading-row .heading-font:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3); }
.heading-row .heading-font option { color: #14203a; background: #fff; font-size: 1.05rem; }

/* מד הגודל: [−][מספר][pt][+] כיחידה אחת */
.heading-stepper {
    display: flex; align-items: stretch; overflow: hidden;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 10px;
    background: rgba(255, 255, 255, 0.08);
    transition: border-color 0.15s, box-shadow 0.15s;
}
.heading-stepper:focus-within { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.3); }
.heading-step {
    flex: 0 0 auto; width: 1.9rem;
    border: none; background: rgba(255, 231, 163, 0.14);
    color: var(--c-gold-light); font-size: 1.05rem; font-weight: 800; line-height: 1;
    cursor: pointer; transition: background 0.15s;
}
.heading-step:hover { background: rgba(255, 209, 90, 0.38); color: #fff; }
.heading-step:active { background: rgba(255, 209, 90, 0.55); }
.heading-row .heading-size {
    flex: 0 0 3rem; width: 3rem; padding: 0.45rem 0.15rem;
    border: none; background: none; color: #fff;
    font-family: inherit; font-weight: 700; font-size: 0.95rem; text-align: center;
    -moz-appearance: textfield; appearance: textfield;
}
.heading-row .heading-size::-webkit-outer-spin-button,
.heading-row .heading-size::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } /* החצים של הדפדפן -יש לנו +/- משלנו */
.heading-row .heading-size:focus { outline: none; }
.heading-row .heading-size::placeholder { color: rgba(255, 255, 255, 0.45); font-weight: 400; }
.heading-unit {
    display: flex; align-items: center; padding-inline-end: 0.4rem;
    font-size: 0.72rem; font-weight: 700; color: rgba(255, 255, 255, 0.6);
}

.heading-color-lbl {
    display: inline-flex; align-items: center; gap: 0.35rem;
    background: rgba(255, 255, 255, 0.08); border: 1.5px solid rgba(255, 231, 163, 0.4);
    border-radius: 10px; padding: 0.3rem 0.45rem; cursor: pointer;
    transition: border-color 0.15s, background 0.15s;
}
.heading-color-lbl:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.heading-color-lbl input[type="color"] { width: 1.7rem; height: 1.7rem; border: none; padding: 0; background: none; cursor: pointer; }
.heading-color-lbl input[type="checkbox"] { cursor: pointer; accent-color: var(--c-gold); }
/* צבע מכובה -הבורר דהוי כדי שיהיה ברור שהוא לא בשימוש */
.heading-color-lbl:not(:has(.heading-color-on:checked)) input[type="color"] { opacity: 0.35; }

/* תצוגה מקדימה של הכותרת -שורה מלאה מתחת לפקדים */
.heading-preview {
    grid-column: 1 / -1;
    margin-top: 0.1rem; padding: 0.4rem 0.6rem;
    background: rgba(13, 62, 120, 0.35); border-radius: 9px;
    color: #fff; line-height: 1.25;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
    .heading-row { grid-template-columns: auto minmax(0, 1fr); }
    .heading-ctl-size, .heading-ctl-color { grid-column: 2; }
}

/* ==== ניהול רשתות חברתיות ==== */
.social-preview-bar {
    display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; justify-content: center;
    padding: 0.7rem; margin-bottom: 0.8rem;
    background: rgba(0, 0, 0, 0.18); border: 1px dashed rgba(255, 231, 163, 0.28); border-radius: 12px;
    --social-size: 2.5rem;
}
.social-preview-bar .social-link { pointer-events: none; }
.social-preview-empty { font-size: 0.85rem; opacity: 0.6; }

.social-admin-list { display: flex; flex-direction: column; gap: 0.5rem; }
.social-empty { font-size: 0.85rem; opacity: 0.65; padding: 0.5rem; text-align: center; }
.social-row {
    display: flex; align-items: center; gap: 0.5rem;
    background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 231, 163, 0.16);
    border-radius: 10px; padding: 0.45rem 0.55rem;
}
.social-row-icon {
    flex: 0 0 auto; width: 1.9rem; height: 1.9rem; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    background: var(--sc, #666); color: #fff; padding: 0.42rem;
}
.social-row-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.2rem; }
.social-row-name { font-size: 0.78rem; font-weight: 700; color: var(--c-gold-light, #ffe7a3); }
/* קלט/בחירה שנושאים את המחלקה admin-ufield ישירות (ולא כמיכל) -אותו עיצוב שדה של האתר */
input.admin-ufield, select.admin-ufield, textarea.admin-ufield {
    width: 100%; padding: 0.5rem 0.7rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: inherit; font-weight: 700; font-size: 0.9rem;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
input.admin-ufield::placeholder, textarea.admin-ufield::placeholder { color: rgba(255, 255, 255, 0.5); font-weight: 400; }
input.admin-ufield:hover, select.admin-ufield:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
input.admin-ufield:focus, select.admin-ufield:focus { outline: none; border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(211, 154, 26, 0.25); }
select.admin-ufield option { color: #14203a; background: #fff; }
.social-row-url { font-size: 0.85rem; }
.social-row-err {
    display: none; font-size: 0.74rem; color: #ffb4b4; background: rgba(180, 30, 30, 0.22);
    border-radius: 6px; padding: 0.1rem 0.4rem; align-self: flex-start;
}
.social-row.has-error .social-row-err { display: inline-block; }
.social-row.has-error .social-row-url { border-color: #e06666 !important; box-shadow: 0 0 0 2px rgba(224, 102, 102, 0.28) !important; }
.social-row-on { flex: 0 0 auto; display: inline-flex; cursor: pointer; }
.social-row-btn {
    flex: 0 0 auto; width: 1.7rem; height: 1.7rem; border-radius: 7px; cursor: pointer;
    background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 231, 163, 0.2);
    color: var(--c-gold-light, #ffe7a3); font-size: 0.8rem; line-height: 1;
    display: inline-flex; align-items: center; justify-content: center; transition: background 0.15s, transform 0.15s;
}
.social-row-btn:hover { background: rgba(255, 231, 163, 0.22); transform: translateY(-1px); }
.social-del:hover { background: rgba(200, 50, 50, 0.35); color: #fff; }
.social-add-row { display: flex; gap: 0.5rem; align-items: stretch; margin-top: 0.6rem; }
.social-add-row .admin-ufield { flex: 1 1 auto; }
/* הכפתור באותו גובה של שדה הבחירה */
.social-add-row .admin-ubtn { align-self: stretch; white-space: nowrap; display: inline-flex; align-items: center; }

/* בורר רשת מעוצב (dropdown מותאם -לא ה-select של מערכת ההפעלה) */
.admin-dd { position: relative; flex: 1 1 auto; min-width: 0; }
.admin-dd-native { display: none; }
.admin-dd-trigger {
    width: 100%; min-height: 100%;
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.55rem 0.7rem;
    border: 1.5px solid rgba(255, 231, 163, 0.4); border-radius: 10px;
    background: rgba(255, 255, 255, 0.08); color: #fff;
    font-family: inherit; font-size: 0.9rem; font-weight: 700; cursor: pointer;
    transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}
.admin-dd-trigger:hover { border-color: var(--c-gold); background: rgba(255, 255, 255, 0.13); }
.admin-dd.is-open .admin-dd-trigger { border-color: var(--c-gold); box-shadow: 0 0 0 3px rgba(211, 154, 26, 0.25); }
.admin-dd-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.admin-dd-caret { margin-inline-start: auto; transition: transform 0.18s; opacity: 0.85; flex: 0 0 auto; }
.admin-dd.is-open .admin-dd-caret { transform: rotate(180deg); }
.admin-dd-ico { width: 1.35rem; height: 1.35rem; flex: 0 0 auto; display: inline-flex; color: var(--sc, #ffd15a); }
.admin-dd-ico svg { width: 100%; height: 100%; fill: currentColor; }
.admin-dd-menu {
    position: absolute; z-index: 40; top: calc(100% + 6px); inset-inline: 0;
    max-height: 15rem; overflow-y: auto;
    background: linear-gradient(180deg, #1b2f52, #132540);
    border: 1.5px solid rgba(255, 231, 163, 0.45); border-radius: 12px;
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.5); padding: 0.35rem;
    scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.5) transparent;
}
/* הרשימה במצב צף -היא מוצמדת ל-‎body‎ כדי לברוח מ-‎overflow: clip‎ של הסעיף,
   ולכן היא ‎fixed‎ ומעל דיאלוגי הפאנל (‎ui-pick‎ יושב ב-250 מאותה סיבה). */
.admin-dd-menu.admin-dd-menu-float { position: fixed; z-index: 250; }

.admin-dd-menu[hidden] { display: none; }
.admin-dd-menu::-webkit-scrollbar { width: 8px; }
.admin-dd-menu::-webkit-scrollbar-thumb { background: rgba(255, 231, 163, 0.45); border-radius: 8px; }
.admin-dd-menu::-webkit-scrollbar-track { background: transparent; }
.admin-dd-opt {
    width: 100%; display: flex; align-items: center; gap: 0.6rem;
    padding: 0.5rem 0.6rem; border: 0; border-radius: 8px;
    background: transparent; color: #eaf3ff; cursor: pointer;
    font-family: inherit; font-size: 0.9rem; font-weight: 600; text-align: start;
}
.admin-dd-opt:hover, .admin-dd-opt.is-active { background: rgba(255, 231, 163, 0.16); color: #fff; }

@media (max-width: 640px) {
    .social-row { flex-wrap: wrap; }
    .social-row-main { flex-basis: 100%; order: 3; }
}

/* ==== ניהול תיק העבודות ==== */
/* בוחר תבנית -רשת כרטיסים */
.pf-tpl-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr)); gap: 0.6rem; }
.pf-tpl-opt {
    position: relative; display: flex; align-items: center; gap: 0.7rem;
    padding: 0.7rem 0.8rem; cursor: pointer;
    border: 1.5px solid rgba(255, 231, 163, 0.32); border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.pf-tpl-opt:hover { border-color: var(--c-gold, #ffd15a); background: rgba(255, 255, 255, 0.09); }
.pf-tpl-opt.is-on { border-color: var(--c-gold, #ffd15a); background: rgba(255, 209, 90, 0.14); box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.18); }
.pf-tpl-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pf-tpl-icon { font-size: 1.7rem; flex: 0 0 auto; filter: drop-shadow(0 2px 3px rgba(0, 0, 0, 0.4)); }
.pf-tpl-body { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.pf-tpl-name { font-weight: 800; font-size: 0.9rem; color: #fff; }
.pf-tpl-badge { font-style: normal; font-size: 0.68rem; font-weight: 700; color: #16233e; background: var(--c-gold, #ffd15a); border-radius: 6px; padding: 0.05rem 0.4rem; margin-inline-start: 0.35rem; vertical-align: middle; }
.pf-tpl-desc { font-size: 0.76rem; color: #cfe0f2; line-height: 1.35; }
.pf-tpl-check { position: absolute; top: 0.5rem; inset-inline-end: 0.6rem; opacity: 0; color: var(--c-gold, #ffd15a); font-weight: 900; transition: opacity 0.15s; }
.pf-tpl-opt.is-on .pf-tpl-check { opacity: 1; }
.pf-tpl-soon { opacity: 0.82; }
/* התא: הכרטיס ומתחתיו שדה התגיות שמפעילות את התבנית */
/* ================= "הפרויקטים" הוא רשימה =================
   כל שורה מציגה שם, תאריך, מתג הצגה ופעולות; העריכה עצמה נפתחת בחלון (⤢).
   הכללים ממוקדים ל-‎#pfList‎ בלבד, כי ההגדלה **מעבירה את השורה עצמה** אל
   ‎.pf-zoom-overlay‎ -ושם היא חייבת להיפרש במלואה. */
#pfList .pf-row-main,
#pfList .pf-row-cover,
#pfList .pf-row-video { display: none; }
#pfList .pf-row-head { cursor: pointer; }
#pfList .pf-row { margin-bottom: 0.4rem; }
/* בכפתורי השורה נשארים ברשימה רק אלה שהם פעולות על הפרויקט; "תמונה ראשית"
   ו"וידאו" הם עריכה -מקומם בחלון. */
#pfList .pf-cover, #pfList .pf-vid { display: none; }
/* ידית הגרירה. ‎touch-action: none‎ **רק עליה** -הפאנל עצמו חייב להישאר נגלל
   באצבע (אותו כלל שכבר נקנה בעץ הפרויקטים). */
.pf-row-grip {
    flex: 0 0 auto; cursor: grab; touch-action: none;
    width: 1.5rem; height: 1.9rem; padding: 0;
    display: grid; place-items: center;
    font-size: 0.95rem; line-height: 1;
    color: rgba(255, 246, 230, 0.5);
    background: none; border: 0; border-radius: 6px;
    transition: color 0.15s, background 0.15s;
}
.pf-row-grip:hover { color: #ffe7a3; background: rgba(255, 231, 163, 0.14); }
.pf-row-grip:active { cursor: grabbing; }
@media (pointer: coarse) { .pf-row-grip { width: 2rem; height: 2.4rem; font-size: 1.1rem; } }
/* בחלון המוגדל אין מה לסדר -שם יש פרויקט אחד */
.pf-zoom-overlay .pf-row-grip { display: none; }
/* ---- סרגל הרשימה ---- */
.pf-listbar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; margin-bottom: 0.6rem; }
.pf-sort-lbl { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: #cfe0f2; height: var(--pf-bar-h); }
/* הבורר והצ'יפים **באותו גובה** -שורת פקדים שגבהיה שונים נקראת כשתי שורות
   שנדחסו לאחת. ‎--pf-bar-h‎ הוא המקור היחיד לגובה, כדי שלא ייפרדו בשינוי הבא. */
.pf-listbar { --pf-bar-h: 1.85rem; }
/* ---- "פרויקט חדש" בראש הרשימה ----
   הפעולה היחידה בסרגל שיוצרת משהו, ולכן היא היחידה שנצבעת בזהב מלא: המיון
   והסינון מסננים תצוגה, וזה משנה נתונים. אותו גובה (‎--pf-bar-h‎) של שאר
   הפקדים בשורה, אחרת השורה נקראת כשתי שורות שנדחסו לאחת. */
.pf-add-top {
    display: inline-flex; align-items: center; gap: 0.4rem;
    height: var(--pf-bar-h); padding: 0 0.75rem 0 0.6rem; border-radius: 999px;
    font-family: inherit; font-size: 0.78rem; font-weight: 800; cursor: pointer;
    color: #2a1b06;
    background: linear-gradient(180deg, #ffe08a, var(--c-gold, #ffd15a));
    border: 1px solid var(--c-wood-deep, #4a2f12);
    box-shadow: 0 2px 0 rgba(74, 47, 18, 0.45), 0 4px 12px -4px rgba(0, 0, 0, 0.55);
    transition: transform 0.12s ease, box-shadow 0.12s ease, filter 0.12s ease;
}
.pf-add-top:hover { filter: brightness(1.06); box-shadow: 0 3px 0 rgba(74, 47, 18, 0.45), 0 7px 16px -5px rgba(0, 0, 0, 0.6); }
/* הלחיצה מורידה גם את הצל, אחרת הכפתור "שוקע" לתוך צל שנשאר במקומו */
.pf-add-top:active { transform: translateY(2px); box-shadow: 0 0 0 rgba(74, 47, 18, 0.45); }
.pf-add-top:focus-visible { outline: 2px solid #fff6d8; outline-offset: 2px; }
.pf-add-top-ico {
    display: inline-flex; align-items: center; justify-content: center;
    width: 1.15rem; height: 1.15rem; border-radius: 50%;
    background: rgba(74, 47, 18, 0.85); color: var(--c-gold, #ffd15a);
    font-size: 0.95rem; font-weight: 700; line-height: 1;
    /* ה-‎+‎ יושב גבוה בתיבת השורה של הגופן; ‎padding-bottom‎ מרכז אותו בעיגול */
    padding-bottom: 0.08em;
}
/* במסך צר יורדת התווית ונשאר העיגול -כפתור מלא היה דוחק את בורר המיון
   ואת הצ'יפים לשורה משלהם, וזה שלוש שורות פקדים מעל רשימה קצרה ממילא. */
@media (max-width: 480px) {
    .pf-add-top { padding: 0; width: var(--pf-bar-h); justify-content: center; }
    .pf-add-top-lbl { display: none; }
}

/* ---- בורר המיון (מעוצב, לא ‎select‎) ----
   ‎select‎ נייטיבי נחתך בגובה קבוע (תיבת השורה של הגופן גדולה מהגובה שנקבע)
   והרשימה שלו מצוירת ע"י הדפדפן -לבנה באמצע פאנל כהה. כאן הכול שלנו. */
.pf-dd { position: relative; }
.pf-dd-btn {
    display: inline-flex; align-items: center; gap: 0.35rem;
    height: var(--pf-bar-h); padding: 0 0.6rem; border-radius: 999px;
    font-family: inherit; font-size: 0.76rem; font-weight: 600; cursor: pointer;
    color: #eaf4ff; background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 231, 163, 0.35);
    white-space: nowrap;
    transition: border-color 0.15s, background 0.15s;
}
.pf-dd-btn:hover, .pf-dd.is-open .pf-dd-btn { border-color: var(--c-gold, #ffd15a); background: rgba(255, 231, 163, 0.14); }
.pf-dd-arrow { width: 0.75rem; height: 0.75rem; opacity: 0.8; transition: transform 0.18s; }
.pf-dd.is-open .pf-dd-arrow { transform: rotate(180deg); }
.pf-dd-menu {
    position: absolute; z-index: 30; top: calc(100% + 0.25rem); inset-inline-start: 0;
    min-width: 100%; display: flex; flex-direction: column; padding: 0.25rem;
    border-radius: 10px;
    background: linear-gradient(180deg, #123a63, #0b2444);
    border: 1.5px solid rgba(255, 231, 163, 0.45);
    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.5);
}
.pf-dd-menu[hidden] { display: none; }
.pf-dd-opt {
    text-align: start; white-space: nowrap; cursor: pointer;
    padding: 0.38rem 0.6rem; border: 0; border-radius: 7px;
    font-family: inherit; font-size: 0.76rem; color: #eaf4ff; background: none;
}
.pf-dd-opt:hover { background: rgba(255, 231, 163, 0.18); }
.pf-dd-opt.is-on { color: #16233e; background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a)); font-weight: 800; }
.pf-listfilter { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.pf-listfilter[hidden] { display: none; }
.pf-lf {
    cursor: pointer; font-family: inherit; font-size: 0.7rem; font-weight: 700;
    height: var(--pf-bar-h); padding: 0 0.7rem; border-radius: 999px;
    display: inline-flex; align-items: center;
    color: #cfe0f2; background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 231, 163, 0.3);
}
.pf-lf:hover { border-color: var(--c-gold, #ffd15a); color: #fff6e6; }
.pf-lf.is-on { color: #16233e; background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a)); border-color: var(--c-gold-deep, #d39a1a); }
/* ---- סרגל הבתים (חיפוש / סינון / מיון) ----
   יורש את ‎.pf-listbar‎ ומוסיף רק את שדה החיפוש והמונה. */
.hc-search {
    display: inline-flex; align-items: center; gap: 0.35rem;
    height: var(--pf-bar-h); padding: 0 0.6rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 231, 163, 0.3);
    /* ‎min-width: min(...)‎ ולא רוחב קשיח: מסילה עם מינימום קשיח אינה יורדת
       מתחתיו, וזו בדיוק המלכודת שכבר תועדה כאן שלוש פעמים במובייל. */
    flex: 1 1 min(16rem, 100%); min-width: min(9rem, 100%); max-width: 22rem;
}
.hc-search:focus-within { border-color: var(--c-gold, #ffd15a); }
.hc-search-ico { font-size: 0.78rem; opacity: 0.8; flex: 0 0 auto; }
.hc-search input {
    flex: 1 1 auto; min-width: 0;
    background: none; border: 0; outline: none;
    font-family: inherit; font-size: 0.76rem; color: #eaf4ff;
}
.hc-search input::placeholder { color: rgba(207, 224, 242, 0.65); }
/* ה-‎✕‎ הנייטיבי של ‎type=search‎ מצויר כריבוע כהה בתוך שדה כהה -בלתי נראה */
.hc-search input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.hc-count { font-size: 0.7rem; color: rgba(255, 217, 160, 0.85); white-space: nowrap; }
.hc-empty { flex: 1 1 100%; margin: 0.2rem 0 0; }
.hc-empty[hidden] { display: none; }
.hc-row[hidden] { display: none; }

.pf-sort-note { flex: 1 1 100%; font-size: 0.7rem; color: rgba(255, 217, 160, 0.9); }
.pf-sort-note[hidden] { display: none; }
/* בסדר שאינו ידני אין מה לגרור -הגרירה הייתה שומרת סדר שלא התכוונו לו */
#pfList.is-sorted .pf-row-grip { opacity: 0.25; pointer-events: none; }

/* ---- שורה דקה ---- */
/* הריפוד האופקי חייב להיות **גדול מרדיוס הפינה של השורה** (12px): הכותרת
   נמשכת במרווח שלילי עד גבול השורה, ולכן פריט שיושב קרוב יותר מהרדיוס נכנס
   אל תוך העיקול -נמדד מרווח של 9px מול רדיוס 12, וזה בדיוק "המתג חתוך".
   כאן זה נגזר מהרדיוס עצמו כדי שהשניים לא ייפרדו. */
#pfList .pf-row { --pf-row-r: 12px; }
#pfList .pf-row-head { padding: 0.35rem calc(var(--pf-row-r) + 2px); gap: 0.5rem; }
#pfList .pf-row-thumb { width: 3.4rem; height: 2.3rem; flex: 0 0 auto; }
#pfList .pf-row-name { font-size: 0.86rem; flex: 0 0 auto; max-width: 100%; }
/* עוד קיצוץ בגובה: השורה היא כותרת + פעולות, בלי ריפוד מיותר */
#pfList .pf-row { padding: 0.35rem; }
#pfList .pf-row-head { margin: -0.35rem -0.35rem 0; min-width: 0; }
#pfList .pf-row-btn { padding: 0.24rem 0.5rem; font-size: 0.72rem; }
#pfList .pf-row-btn svg { width: 0.82rem; height: 0.82rem; }
#pfList .pf-row-actions { gap: 0.3rem; }
#pfList .pf-act-grp { gap: 0.25rem; }

/* השורה העליונה: ידית, תמונה, שם, מתג -**בשורה אחת ולא נשברת**.
   ‎min-width: 0‎ על המיכל ועל עמודת השם: בלי זה פריט flex אינו מצטמצם מתחת
   לרוחב התוכן, והשם הארוך דחף את המתג אל השורה הבאה. */
/* ‎overflow: hidden‎ ולא רק ‎min-width: 0‎: הגודל המזערי האוטומטי של פריט flex
   מקונן נגזר מהתוכן, ו-‎min-width‎ על המיכל לבדו לא הספיק -נמדד שהשורה נשארה
   623px בעוד שהרשימה ירדה ל-608, וגלשה שמאלה עד שהמתג יצא מהתצוגה ונחתך.
   ‎overflow‎ מאפס את המינימום הזה, וכך השורה **תמיד** נכנסת ברוחב שיש. */
/* **grid ולא flex.** ‎overflow: hidden‎ ו-‎min-width: 0‎ מאפסים את הגודל המזערי
   של פריט ה-flex עצמו, אבל **תרומת ה-min-content שלו להורה** נשארת -ולכן
   הכותרת נשארה 639px בשורה של 488, והשורה העליונה גלשה שמאלה עד שהמתג יצא
   מהתצוגה ונחתך. מסלול ‎minmax(0, 1fr)‎ ב-grid מצטמצם באמת, ולכן המינימום של
   השורה הוא ידית + תמונה + מתג בלבד. */
.pf-row-top {
    flex: 1 1 100%; min-width: 0;
    /* הסדר: תמונה, שם+תאריך, מתג, ידית -הידית בקצה השני של השורה (בקשת
       המשתמש). ‎minmax(0, 1fr)‎ הוא המסלול של **השם**, והוא היחיד שמצטמצם. */
    display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto;
    align-items: center; gap: 0.5rem;
}
/* **כל פריט מקבל את העמודה שלו במפורש, ולא לפי סדר המילוי האוטומטי.**
   מילוי אוטומטי נגזר מ-‎order‎, ול-‎.pf-row-thumb‎ יש ‎order: 1‎ מהפריסה
   הישנה -גם בשורה רגילה (שם הוא מאופס למטה) וגם, מאוחר יותר בקובץ, בחלון
   המוגדל (‎.pf-row.is-zoomed .pf-row-thumb‎, שגובר על האיפוס). שם התמונה
   נדדה לסוף, והמסלול הגמיש נחת דווקא על ה**מתג**: נמדד שתיבת המתג הייתה
   672px רחבה והצטמצמה ל-490px תוך כדי הקלדת הכותרת -כלומר המתג **זז
   מהמקום שלו** בכל תו. עם ‎grid-column‎ מפורש ה-‎order‎ אינו משנה דבר. */
/* ‎grid-row: 1‎ חובה לצד העמודה: ‎order‎ עדיין קובע את **סדר המילוי**, ולכן
   פריט שממוקם בעמודה שכבר "עברנו" נדחף לשורה הבאה -נמדד שהתמונה ירדה לשורה
   שנייה והכותרת גדלה ב-90px. עם שורה מפורשת כולם באותה שורה תמיד. */
/* ומאפסים ‎order‎ בתוך המיכל: ל-‎.pf-row-name‎ יש ‎order: 2‎ מהפריסה הישנה,
   ובתוך ‎.pf-row-id‎ (עמודת flex) זה דחף את **התאריך מעל הכותרת**. לפריטי
   ה-grid עצמם זה כבר לא משנה -המיקום שלהם מפורש. */
.pf-row .pf-row-head .pf-row-top * { order: 0; }
/* ‎flex: 1 1 6rem‎ של השם נכתב לשורה **אופקית**; בתוך ‎.pf-row-id‎ (עמודה) הוא
   גדל לגובה -נמדד 96px לשורת טקסט אחת, והתאריך נדחף 98px מתחתיה במקום להיצמד
   לכותרת. בעמודה הוא בגובה התוכן שלו בלבד. */
.pf-row-id > .pf-row-name { flex: 0 0 auto; }
.pf-row-top > .pf-row-thumb { grid-column: 1; grid-row: 1; }
.pf-row-top > .pf-row-id    { grid-column: 2; grid-row: 1; }
.pf-row-top > .pf-row-on    { grid-column: 3; grid-row: 1; }
.pf-row-top > .pf-row-grip  { grid-column: 4; grid-row: 1; }
/* השם והמידע **באותה שורה** ולא זה מעל זה: עמודה מוסיפה שורה שלמה לגובה
   השורה, וזו רשימה. השם מצטמצם ראשון (‎min-width: 0‎), התאריך והתגיות
   נשארים בגודלם. */
/* השם למעלה והתאריך **מתחתיו**, מיושרים לאותו קצה התחלה (בקשת המשתמש).
   ‎align-items: start‎ ולא ‎stretch‎: בלעדיו תווית התאריך נמתחת לכל רוחב
   העמודה במקום להיצמד לתחילת השורה מתחת לכותרת. */
.pf-row-id { min-width: 0; overflow: hidden; display: flex; flex-direction: column; align-items: start; justify-content: center; gap: 0.15rem; }
/* המידע **מצטמצם לפני** שהוא דוחף החוצה. הוא היה ‎flex: 0 0 auto‎, ולכן
   בשם ארוך או בכמה תגיות הוא דחף את המתג אל מעבר לקצה השורה -וה-‎overflow‎
   של השורה חתך אותו. היום התגיות נחתכות ראשונות, והמתג תמיד בפנים. */
/* מרגע שהתגיות ירדו לשורת הפעולות, נשאר כאן רק התאריך -פריט קטן וקבוע.
   הוא **אינו** מצטמצם (אחרת "25/07/2026" נחתך ל-"/07/2026"), והשם הוא זה
   שמתקצר עם שלוש נקודות. */
.pf-row-meta { display: flex; flex-wrap: nowrap; align-items: center; gap: 0.3rem; flex: 0 0 auto; max-width: 100%; }

/* התאריך כתווית עם שעון -לא מספר מרחף. ‎dir="ltr"‎ על הערך בלבד, אחרת
   "26/07/2026 23:28" מתהפך בתוך שורה עברית. */
.pf-row-when {
    display: inline-flex; align-items: center; gap: 0.28rem;
    padding: 0.1rem 0.45rem; border-radius: 999px;
    font-size: 0.68rem; white-space: nowrap;
    color: rgba(207, 224, 242, 0.85);
    background: rgba(13, 62, 120, 0.4);
    border: 1px solid rgba(91, 163, 230, 0.3);
}
.pf-row-when svg { width: 0.72rem; height: 0.72rem; opacity: 0.75; flex: 0 0 auto; }
.pf-row-when b { direction: ltr; font-weight: 700; letter-spacing: 0.01em; }
/* תגיות לקריאה בלבד -אותה שפה של הצ'יפים באתר, בזעיר.
   מקומן בשורת הפעולות, אחרי "מחיקה", עם מעט אוויר שמפריד בין פעולה למידע. */
/* תגיות רבות יורדות לשורה משלהן במקום לדחוס את הכפתורים: ‎flex-basis‎ גדול
   דיו כדי שהן "לא ייכנסו" ליד הכפתורים ברגע שיש יותר מכמה. */
.pf-row-tagsview { display: flex; flex-wrap: wrap; align-items: center; gap: 0.22rem; min-width: 0; margin-inline-start: 0.55rem; }
#pfList .pf-row-actions { flex-wrap: wrap; row-gap: 0.35rem; }
.pf-row-tagsview[hidden] { display: none; }
.pf-row-tag {
    padding: 0.08rem 0.42rem; border-radius: 999px;
    font-size: 0.66rem; font-weight: 700; white-space: nowrap;
    color: #ffe7a3; background: rgba(255, 231, 163, 0.12);
    border: 1px solid rgba(255, 231, 163, 0.32);
}
/* המתג לעולם אינו מצטמצם ואינו נדחף החוצה -הוא המצב של הפרויקט */
.pf-row-on { gap: 0; }
/* פרויקט מוסתר: קריא, אבל ברור שהוא לא באתר */
.pf-row.is-off .pf-row-thumb, .pf-row.is-off .pf-row-name { opacity: 0.45; }
.pf-row.is-off .pf-row-name::after {
    content: ' (מוסתר)'; font-weight: 500; font-size: 0.72rem; color: rgba(255, 246, 230, 0.55);
}
/* במובייל נשאר השם והתגיות; התאריך יורד -הוא הפחות שימושי מביניהם */
@media (max-width: 640px) { .pf-row-when { display: none; } }
.pf-tpl-cell { display: flex; flex-direction: column; gap: 0.35rem; }
.pf-tpl-cell .pf-tpl-opt { flex: 1; }
/* ---- צ'יפים: התגיות שיפעילו את התבנית ----
   בחירה מתוך הקיים ולא הקלדה חופשית, ולכן זו רשימת מתגים ולא שדה טקסט.
   הן נשברות לשורות ואינן נגללות: מספר התגיות קטן, ורשימה נגללת בתוך כרטיס
   קטן מסתירה בדיוק את מה שצריך לראות בסקירה אחת. */
/* כפתור "איפוס": לא ירוק כמו השמירה ולא אדום כמו המחיקה -הוא לא מוסיף
   ולא מוחק לצמיתות, הוא מחזיר. מושבת כשאין מה להחזיר. */
.pf-row-btn.pf-btn-reset { border-color: rgba(214, 138, 40, 0.55); color: #ffd9a0; }
/* "לראש" -פעולת סדר, ולכן באותו גוון ניטרלי של שאר פקדי השורה */
.pf-row-btn.pf-top:disabled { opacity: 0.35; cursor: default; }
.pf-row-btn.pf-btn-reset:not(:disabled):hover { background: rgba(214, 138, 40, 0.22); border-color: #d68a28; }
.pf-tpl-tags { display: flex; flex-wrap: wrap; gap: 0.3rem; padding: 0 0.15rem; }
.pf-tpl-tag {
    cursor: pointer; font-family: inherit; font-size: 0.72rem; font-weight: 700;
    padding: 0.22rem 0.6rem; border-radius: 999px;
    color: #cfe0f2; background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 231, 163, 0.3);
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.pf-tpl-tag:hover { border-color: var(--c-gold, #ffd15a); color: #fff6e6; }
.pf-tpl-tag.is-on {
    color: #16233e; background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
    border-color: var(--c-gold-deep, #d39a1a);
}
.pf-tpl-tag:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
/* נעולה: התבנית כבר משויכת לתגית אחרת. מעומעמת ולא מוסתרת -כך ברור מה עוד
   קיים, ומה צריך לשחרר כדי להחליף. */
.pf-tpl-tag:disabled { opacity: 0.35; cursor: not-allowed; }
.pf-tpl-tag:disabled:hover { border-color: rgba(255, 231, 163, 0.3); color: #cfe0f2; }
/* "הכול" אינו תגית של פרויקט אלא **המצב הלא-מסונן**, ולכן הוא נראה אחרת:
   מסגרת מקווקוות ומפריד קטן אחריו, כדי שלא ייקרא כעוד תגית ברשימה. */
/* המפריד היה ‎::after‎ בתוך הצ'יפ, וזה נראה כקו תקוע **בתוך** הכפתור ולא
   כהפרדה בינו לרשימה. המסגרת המקווקוות לבדה כבר אומרת "זה לא עוד תגית",
   וההפרדה היא פשוט רווח. */
.pf-tpl-tag-all {
    border-style: dashed;
    margin-inline-end: 0.5rem;
}
.pf-tpl-tag-all.is-on { border-style: solid; }
.pf-tpl-tags-none { font-size: 0.72rem; color: rgba(255, 246, 230, 0.5); }

/* ---- ניהול תגיות ----
   שורה לכל תגית: שם ניתן לעריכה, מונה שימוש, התבנית המשויכת ומחיקה.
   השם הוא **שדה** ולא טקסט: שינוי שם הוא הפעולה השכיחה כאן (תיקון כתיב,
   איחוד שתי גרסאות), וכפתור "עריכה" נפרד היה מוסיף קליק לכל אחת. */
.pf-tagmgr-add { display: flex; gap: 0.4rem; margin-bottom: 0.7rem; }
.pf-tagmgr-add > #pfTagNew { flex: 1 1 10rem; min-width: 0; }
.pf-tagmgr-add > .admin-ubtn { flex: 0 0 auto; white-space: nowrap; }
.pf-tagmgr { display: flex; flex-direction: column; gap: 0.35rem; }
.pf-tagmgr-row {
    display: flex; align-items: center; gap: 0.45rem;
    padding: 0.3rem 0.4rem; border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.09);
}
.pf-tagmgr-name { flex: 1 1 6rem; min-width: 0; font-size: 0.82rem; }
/* המונה בעיגול: הוא מספר ולא תווית, וריבוע היה נקרא כעוד שדה */
.pf-tagmgr-count {
    flex: 0 0 auto; min-width: 1.75rem; text-align: center;
    padding: 0.1rem 0.35rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 800;
    color: #16233e; background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
}
/* ---- התבנית המשויכת ----
   **מידע, לא פקד** (השיוך נערך בכרטיס התבנית), ולכן הוא לא נראה כלחיץ: אין
   רקע מלא ואין מסגרת מלאה. מה שכן -גוון זהב עדין, מסגרת דקה ופינות מעוגלות,
   כדי שייקרא כתווית משויכת ולא כטקסט שנשפך לתוך השורה.
   הטקסט מצטמצם ראשון (‎flex: 0 1 auto‎ + חיתוך), כי הוא הפחות קריטי בשורה. */
.pf-tagmgr-tpl {
    flex: 0 1 auto; min-width: 0;
    display: inline-flex; align-items: center; gap: 0.28em;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    padding: 0.18rem 0.5rem;
    font-size: 0.68rem; font-weight: 800; letter-spacing: 0.01em;
    color: var(--c-gold-light, #ffe7a3);
    background: linear-gradient(180deg, rgba(255, 209, 90, 0.16), rgba(255, 209, 90, 0.07));
    border: 1px solid rgba(255, 231, 163, 0.32);
    border-radius: 999px;
}
/* האייקון לא מצטמצם עם הטקסט -בלעדיו נשאר טקסט בלי הקשר */
.pf-tagmgr-tpl::before {
    content: '🎨'; flex: 0 0 auto; font-size: 0.78em; line-height: 1;
    filter: saturate(1.15);
}
.pf-tagmgr-del {
    flex: 0 0 auto; cursor: pointer; font-size: 0.85rem; line-height: 1;
    padding: 0.3rem 0.4rem; border-radius: 7px;
    color: #ffd7d7; background: rgba(255, 120, 120, 0.12);
    border: 1px solid rgba(255, 140, 140, 0.3);
}
.pf-tagmgr-del:hover { background: rgba(255, 120, 120, 0.24); border-color: rgba(255, 140, 140, 0.6); }
.pf-tagmgr-empty { font-size: 0.78rem; color: rgba(255, 246, 230, 0.55); margin: 0; }
/* חוק המובייל: בשורה צרה השם מקבל שורה משלו והשאר נשאר בשורה אחת */
@media (max-width: 640px) {
    .pf-tagmgr-add { flex-wrap: wrap; }
    .pf-tagmgr-add > #pfTagNew { flex: 1 1 100%; }
    .pf-tagmgr-row { flex-wrap: wrap; }
    .pf-tagmgr-name { flex: 1 1 100%; }
}

/* ---- בחירת פרויקטים להוספת תגית ----
   הרשימה נגללת בתוך הדיאלוג ולא מותחת אותו: תיק עבודות יכול להחזיק עשרות
   פרויקטים, ודיאלוג שגובהו נגזר מהם יוצא מהמסך. */
.pf-tagpick-bar { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.5rem; }
/* גם כאן הדיאלוג בהיר: הצבעים כהים, לא זהב-על-כהה כמו בפאנל */
.pf-tagpick-count { margin-inline-start: auto; font-size: 0.75rem; font-weight: 800; color: var(--c-wood-deep); }
.pf-tagpick-list {
    display: flex; flex-direction: column; gap: 0.25rem;
    max-height: min(22rem, 48vh); overflow-y: auto;
    padding: 0.35rem; border-radius: 8px;
    background: rgba(122, 79, 40, 0.07);
    border: 1px solid rgba(122, 79, 40, 0.18);
    color: var(--c-wood-deep);
}
.pf-tagpick-item {
    display: flex; align-items: center; gap: 0.5rem;
    padding: 0.3rem 0.4rem; border-radius: 7px; cursor: pointer;
    font-size: 0.8rem;
}
.pf-tagpick-item:hover { background: rgba(122, 79, 40, 0.1); }
/* מסומן/מלא = אי אפשר לבחור. מעומעם ולא מוסתר, כדי שיהיה ברור למה הוא נשמט */
.pf-tagpick-item.is-has, .pf-tagpick-item.is-full { opacity: 0.5; cursor: not-allowed; }
.pf-tagpick-thumb {
    flex: 0 0 auto; width: 2.1rem; height: 1.5rem; border-radius: 4px;
    background: rgba(122, 79, 40, 0.14) center/cover no-repeat;
    border: 1px solid rgba(122, 79, 40, 0.3);
}
.pf-tagpick-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pf-tagpick-note { flex: 0 0 auto; font-size: 0.68rem; color: rgba(90, 58, 30, 0.75); }

/* ---- מחיקת תגית: ההשלכות ואז ההחלטה ----
   הרשימה קודמת לבורר בכוונה -היא מה שמאפשר להחליט, וללא סדר כזה הבורר נראה
   כשאלה טכנית לפני שברור מה בכלל עומד לקרות.

   **הצבעים כאן כהים.** ‎.admin-dialog‎ הוא **בהיר** (קלף: ‎rgba(255,246,230)‎)
   בשונה משאר הפאנל שכהה, והגרסה הראשונה של הסעיף הזה הועתקה מהפאנל -טקסט
   ‎#ffdede‎ וזהב על רקע כמעט-לבן, כלומר בלתי קריא לחלוטין. זו בדיוק המלכודת
   שכבר תועדה בבורר התמונות, וחזרה כאן. */
.pf-tagdel-lead { margin: 0 0 0.6rem; font-size: 0.95rem; color: var(--c-wood-deep); }
.pf-tagdel-facts {
    margin: 0 0 0.9rem; padding: 0.6rem 1.4rem 0.6rem 0.7rem;
    list-style: disc;
    border-radius: 10px;
    background: rgba(224, 69, 46, 0.09);
    border: 1px solid rgba(165, 48, 28, 0.3);
    border-right: 3px solid #a5301c;
    font-size: 0.8rem; line-height: 1.6;
    color: #7a2313;                       /* אדום-חום כהה על קלף בהיר */
}
.pf-tagdel-facts li + li { margin-top: 0.25rem; }
.pf-tagdel-facts b { color: #58170c; }    /* מודגש = כהה יותר, לא בהיר יותר */
.pf-tagdel-move {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.6rem 0.7rem; border-radius: 10px;
    background: rgba(122, 79, 40, 0.07);
    border: 1px solid rgba(122, 79, 40, 0.22);
}
.pf-tagdel-move-t { font-size: 0.78rem; font-weight: 800; color: var(--c-wood-deep); }
.pf-tagdel-opt {
    display: flex; align-items: center; gap: 0.45rem;
    font-size: 0.82rem; cursor: pointer;
    padding: 0.25rem 0.3rem; border-radius: 7px;
    color: var(--c-wood-deep);
}
.pf-tagdel-opt:hover { background: rgba(122, 79, 40, 0.1); }
.pf-tagdel-opt > span { flex: 0 1 auto; min-width: 0; }
.pf-tagdel-opt-to > select { flex: 1 1 6rem; min-width: 0; }
.pf-tagdel-opt-to[hidden] { display: none; }


/* ---- ברירת המחדל של התבנית ----
   "שמירה לברירת מחדל" ו"איפוס" הם שני צדדים של אותה החלטה, ולכן הם בשורה
   אחת מתחת לתגיות -אותו שיקול של השמירה והאיפוס בשורת הפרויקט.
   **בלי גוני הזהב של התגיות:** אלה פעולות על ההגדרות ולא בחירה בהן, וזהב
   כאן היה נקרא כעוד צ'יפ שאפשר לסמן. */
.pf-tpl-def {
    display: flex; gap: 0.3rem; padding: 0.35rem 0.15rem 0;
    border-top: 1px dashed rgba(255, 231, 163, 0.18); margin-top: 0.35rem;
}
.pf-tpl-def button {
    flex: 1 1 auto; min-width: 0;
    cursor: pointer; font-family: inherit; font-size: 0.7rem; font-weight: 700;
    padding: 0.3rem 0.45rem; border-radius: 7px;
    color: #cfe0f2; background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.16);
    /* השם נחתך בשלוש נקודות ולא נשבר לשתי שורות: הכרטיסים יושבים ברשת,
       וכפתור שגובהו משתנה מותח את כל השורה. */
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pf-tpl-def button:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.13); border-color: rgba(255, 231, 163, 0.5); color: #fff6e6;
}
.pf-tpl-def button:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
/* מושבת = אין עדיין ברירת מחדל לחזור אליה. מעומעם ולא מוסתר, כדי שיהיה
   ברור שהאפשרות קיימת ומה חסר כדי להפעיל אותה. */
.pf-tpl-def button:disabled { opacity: 0.35; cursor: not-allowed; }
/* לתבנית **יש** ברירת מחדל שמורה -רמז שקט, בלי עוד טקסט על כרטיס צפוף */
.pf-tpl-def.has-def .pf-tpl-defsave { border-color: rgba(255, 231, 163, 0.4); }
/* התבנית אינה המסומנת: הכפתורים קפואים. המפריד המקווקו יורד גם הוא -
   בכרטיס לא-פעיל הוא רק עוד קו על רשת עמוסה. */
.pf-tpl-def.is-idle { border-top-color: rgba(255, 231, 163, 0.07); }
.pf-tpl-def.is-idle .pf-tpl-defsave { border-color: rgba(255, 255, 255, 0.16); }
@media (pointer: coarse) { .pf-tpl-def button { padding: 0.45rem 0.5rem; font-size: 0.76rem; } }
/* חוק המובייל: בכרטיס צר שני כפתורים בשורה נחתכים לשתי מילים -יורדים לטור */
@media (max-width: 640px) { .pf-tpl-def { flex-direction: column; } }
/* אזהרת "עורכים מכשיר אחר מהמסך" -בתוך טקסט העזרה, לא כתיבה נפרדת */
.pf-dev-warn { display: block; margin-top: 0.3rem; color: #ffd9a0; font-weight: 700; }
@media (pointer: coarse) { .pf-tpl-tag { padding: 0.4rem 0.75rem; font-size: 0.78rem; } }

/* ---- בורר שלט הכיתוב ----
   כל אפשרות מציגה את **התמונה עצמה** ולא שם בלבד: ההבדל בין השלטים הוא ויזואלי
   בלבד, ורשימת שמות ("לוח עץ רחב") אינה אומרת דבר. היחס נפלט פר-אפשרות מ-PHP,
   כך שהתצוגה המקדימה מדויקת לכל תבנית. */
.pf-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(9rem, 100%), 1fr)); gap: 0.7rem; }
.pf-board-opt {
    position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.5rem; border-radius: 12px;
    border: 1.5px solid rgba(255, 231, 163, 0.25);
    background: rgba(13, 27, 48, 0.45);
    transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.pf-board-opt:hover { border-color: rgba(255, 231, 163, 0.6); transform: translateY(-1px); }
.pf-board-opt.is-on { border-color: var(--c-gold, #ffd15a); background: rgba(255, 231, 163, 0.16); }
.pf-board-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pf-board-pv {
    display: block; width: 100%; border-radius: 8px;
    background: center / contain no-repeat;
}
/* "בלי שלט": משבצת ריקה מקווקוות -היעדר שלט הוא בחירה, לא תקלה בטעינה */
.pf-board-none .pf-board-pv {
    aspect-ratio: 1.63; border: 1.5px dashed rgba(255, 231, 163, 0.35);
    display: grid; place-items: center;
}
.pf-board-none .pf-board-pv::after { content: 'ללא'; font-size: 0.78rem; color: rgba(255, 246, 230, 0.55); }
.pf-board-name { font-size: 0.8rem; font-weight: 700; color: #ffe7a3; text-align: center; }

/* בורר אנימציית המעבר. שם + הסבר, כי "נדנוד" לעומת "היפוך" אינו מובן משם בלבד */
.pf-banim-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); gap: 0.5rem; margin-top: 0.4rem; }
.pf-banim-opt {
    position: relative; cursor: pointer; display: flex; flex-direction: column; gap: 0.15rem;
    padding: 0.5rem 0.65rem; border-radius: 10px;
    border: 1.5px solid rgba(255, 231, 163, 0.25);
    background: rgba(13, 27, 48, 0.45);
    transition: border-color 0.15s, background 0.15s;
}
.pf-banim-opt:hover { border-color: rgba(255, 231, 163, 0.6); }
.pf-banim-opt.is-on { border-color: var(--c-gold, #ffd15a); background: rgba(255, 231, 163, 0.16); }
.pf-banim-opt input { position: absolute; opacity: 0; pointer-events: none; }
.pf-banim-opt b { font-size: 0.85rem; color: #ffe7a3; }
.pf-banim-opt span { font-size: 0.74rem; color: rgba(255, 246, 230, 0.7); line-height: 1.3; }
/* בלי שלט אין מה לעצב -הפקדים יורדים במקום להיראות שבורים */
.pf-board-off #pfBoardOpWrap, .pf-board-off #pfBoardAnimWrap { display: none; }

/* רשימת פרויקטים */
.pf-admin-list { display: flex; flex-direction: column; gap: 0.7rem; }
.pf-admin-empty { text-align: center; font-size: 0.9rem; color: rgba(255, 246, 230, 0.7); padding: 1.2rem 0.6rem; border: 1.5px dashed rgba(255, 231, 163, 0.3); border-radius: 12px; }
.pf-row {
    display: flex; gap: 0.7rem; align-items: flex-start;
    padding: 0.6rem; border-radius: 12px;
    border: 1.5px solid rgba(255, 231, 163, 0.22);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.15s, background 0.15s, box-shadow 0.15s;
}
/* **הבלטה קלה במעבר עכבר -בלי ‎transform‎.** שורה שזזה פיקסל כלפי מעלה
   יוצאת מתחת לסמן בקצה התחתון: hover כבה, השורה חוזרת, hover נדלק -ריצוד.
   זו בדיוק המלכודת שכבר תועדה כאן באריחי בורר התמונות. ההבלטה היא גבול,
   רקע וצל בלבד.
   ‎:has()‎ מחריג שורה שמצביע נמצא בתוך שדה שלה: בזמן הקלדה ההדגשה מיותרת.
   ובשורה המוגדלת (בחלון) אין "רשימה" להבליט בתוכה. */
@media (hover: hover) {
    #pfList .pf-row:not(.is-zoomed):hover {
        border-color: var(--c-gold, #ffd15a);
        background: rgba(255, 231, 163, 0.13);
        /* שלוש שכבות: פס זהב בקצה ההתחלה (הסימן ל"כאן אני"), הילה זהובה
           דקה סביב הגבול, וצל שמרים את השורה מהרקע -בלי להזיז אותה.
           ההיסט **שלילי** = הצד הימני: היסטי ‎box-shadow‎ פיזיים ואינם
           מתהפכים ב-RTL, וזה הצד שבו מתחילה השורה בעברית. */
        box-shadow:
            inset -4px 0 0 var(--c-gold, #ffd15a),
            0 0 0 1px rgba(255, 209, 90, 0.35),
            0 6px 22px rgba(3, 12, 28, 0.5);
    }
}
.pf-row-thumb {
    position: relative; flex: 0 0 auto;
    width: 6.2rem; height: 3.9rem;
    border-radius: 9px; overflow: hidden; cursor: pointer; padding: 0;
    border: 1.5px solid rgba(255, 231, 163, 0.35);
    background: rgba(13, 27, 48, 0.6);
    display: grid; place-items: center;
    transition: border-color 0.15s, transform 0.12s;
}
.pf-row-thumb:hover { border-color: var(--c-gold, #ffd15a); }
.pf-row-thumb img { width: 100%; height: 100%; object-fit: cover; }
.pf-row-thumb.is-empty { border-style: dashed; }
.pf-row-thumb-plus { font-size: 1.6rem; color: rgba(255, 231, 163, 0.7); }
.pf-row-thumb-edit {
    position: absolute; bottom: 0; inset-inline-start: 0; right: 0;
    background: rgba(13, 27, 48, 0.78); color: var(--c-gold-light, #ffe7a3);
    font-size: 0.72rem; text-align: center; padding: 0.05rem 0; opacity: 0; transition: opacity 0.15s;
}
.pf-row-thumb:hover .pf-row-thumb-edit { opacity: 1; }
/* התמונה והסרגל בשורה העליונה; שדות העריכה יורדים לשורה משלהם ברוחב מלא -
   כך הסרגל אינו מצטמצם לעמודה, ולשדות יש את כל רוחב הפאנל. */
.pf-row-thumb   { order: 1; flex: 0 0 auto; }
.pf-row-name    { order: 2; }
.pf-row-actions { order: 3; flex: 1 1 100%; }
/* ‎gap: 0.75rem‎ ולא ‎0.4‎: השורה מחזיקה היום שורת כותרת, שלושה סעיפים מתקפלים,
   תגיות, קישור ווידאו -וברווח הצפוף הם נקראו כגוש אחד רצוף (בקשת המשתמש). */
.pf-row-main { order: 4; flex: 1 1 100%; display: flex; flex-direction: column; gap: 0.9rem; min-width: 0; }

/* ---- כותרת השורה נדבקת בגלילה (‎sticky‎) ----
   שורת פרויקט היא גבוהה: עורך תיאור, פאנל תמונה ראשית ופאנל וידאו. בלי הדבקה,
   כפתור "שמירה" (וכל שאר הפעולות) גולל מהמסך בדיוק כשעורכים -וצריך לגלול חזרה
   כדי לשמור. עכשיו הכותרת של הפרויקט שנמצאים בו נשארת גלויה עד שהשורה שלו
   נגמרת, ואז הכותרת של הפרויקט הבא תופסת את מקומה -בלי JS, זו התנהגות ‎sticky‎
   מול ה-containing block שהוא ‎.pf-row‎ עצמו.

   הרקע חייב להיות אטום יחסית (התוכן גולל מתחתיו) והוא נגזר מ-‎--admin-see‎ כמו
   שאר רקעי הפאנל, כדי שמד השקיפות ימשיך לעבוד. ה-margin השלילי מושך אותו עד
   גבולות השורה -אחרת נשארת רצועת ‎padding‎ שדרכה מציץ מה שגולל מתחת. */
/* **הפריסה קבועה בשתי שורות** ולא "שורה אחת אם נכנס": תמונה + שם למעלה,
   הכפתורים ברוחב מלא מתחת. בשורה אחת (נמדד ב-1440px) נשארו לשם 96px בין
   התמונה לכפתורים - הוא נחתך לשלושה תווים, כלומר בדיוק לא ענה על "גדול
   וברור"; ובאמת הדפדפן שבר את זה לשתי שורות בעצמו, רק בלי שליטה על מה יורד. */
.pf-row-head {
    order: 1; flex: 1 1 100%;
    display: flex; align-items: center; gap: 0.4rem 0.7rem; flex-wrap: wrap;
    /* ‎top‎ שלילי בגובה ה-padding של אזור הגלילה = **צמוד לקצה העליון**.
       ‎top: 0‎ נמדד מול ה-padding box ולכן השאיר רצועה של 18px שדרכה הציץ מה
       שגלל מתחת -נמדד, וזה בדיוק מה שנראה כ"לא צמוד". */
    position: sticky; top: calc(-1 * var(--scroll-pad, 0px)); z-index: 4;
    margin: -0.6rem -0.6rem 0; padding: 0.6rem;
    border-radius: 10px 10px 0 0;
    background: rgba(13, 62, 120, calc(0.96 * var(--admin-see, 1)));
}
/* שם הפרויקט -גדול וברור, כי זה מה שעונה על "איזה פרויקט אני עורך" כשרק
   הסרגל נשאר על המסך. ‎min-width: 0‎ חובה: בלעדיו פריט flex אינו מצטמצם מתחת
   לרוחב התוכן, והשם הארוך היה דוחף את הכפתורים אל מחוץ לשורה במקום להיחתך. */
.pf-row-name {
    flex: 1 1 6rem; min-width: 0;
    font-family: 'Heebo', sans-serif;
    font-size: 1.12rem; font-weight: 800; line-height: 1.25;
    color: var(--c-gold-light, #ffe7a3);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.pf-row-name.is-empty { color: rgba(255, 246, 230, 0.5); font-weight: 600; font-style: italic; }
.pf-row.is-zoomed .pf-row-name { font-size: 1.15rem; }

/* קו הפרדה בין הכותרת לשדות. הוא קבוע ולא מותנה במצב ההדבקה בכוונה: מצב
   ‎sticky‎ אינו ניתן לזיהוי ב-CSS, ולתלות משוב ויזואלי כזה ב-IntersectionObserver
   פר-שורה זה הרבה קוד לרווח קטן -כאן הקו גם ככה משרת כהפרדה. */
.pf-row-head::after {
    content: ''; position: absolute; inset-inline: 0; bottom: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 231, 163, 0.35), transparent);
}
/* "ההגדרות כאן שייכות לתבנית X" -בשורה משלו ובגוון הזהב: זו לא עוד הערה
   טכנית אלא **תחום התחולה** של כל מה שמעליו, והוא היה חסר לגמרי על המסך. */
.pf-tplnote {
    display: block; margin-top: 0.3rem;
    color: var(--c-gold-light, #ffe7a3); font-weight: 800;
}
.pf-row-title, .pf-row-link, .pf-row-tags { font-size: 0.85rem; }
/* **לכל שדה בשורה יש תווית משלו** (בקשת המשתמש), באותו דפוס של פקדי התמונה:
   ‎.pf-cover-fld‎ עוטף ו-‎.pf-cover-lbl‎ היא התווית -כלומר אין כאן עיצוב חדש,
   רק אותו אחד. שדה הכותרת עבר לתוך סעיף התיאור, ושני המתגים שישבו בשורות
   ירדו ל"אפשרויות נוספות"; איתם ירדו הכללים שנבנו כדי לשכן אותם כאן -
   ה-‎order‎ שהקדים אותם לשדה, המרווחים ביניהם וה-‎flex-wrap‎ של המובייל. */
.pf-rte-sect .pf-cover-fld > .admin-ufield { width: 100%; min-width: 0; }
/* שורת התווית של שדה התיאור: התווית מימין, מתג "הצגה באתר" בקצה השני -
   הוא שולט בשדה הזה בלבד, ולכן הוא צמוד לו ולא לראש הסעיף. */
.pf-fld-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.6rem; }
.pf-fld-head > .pf-cover-lbl { flex: 1 1 auto; min-width: 0; }
.pf-fld-head > .pf-desc-show { flex: 0 0 auto; align-self: center; margin: 0; }
/* ---- שני המתגים בתוך "אפשרויות נוספות" ---- */
/* ‎display: flex‎ של המתג גובר על תכונת ‎hidden‎ (מלכודת מתועדת), ומתג
   "הוספת כתובת האתר לפרויקט באתר" מוסתר כשאין קישור. */
.pf-row-more .pf-link-show[hidden] { display: none; }
/* הכתובת שתופיע באתר מוצגת בתווית עצמה -כך רואים מה בדיוק ייצא לשלט בלי
   לפתוח את האתר. ‎min-width: 0‎ הוא מה שמאפשר לה להצטמצם בכלל: פריט flex
   אינו יורד מתחת לרוחב התוכן שלו בלי זה, ואז המתג דוחף החוצה במקום לחתוך. */
.pf-row-more .pf-link-show { max-width: 100%; }
.pf-row-more .pf-link-show .admin-switch-label {
    flex: 0 1 auto; min-width: 0;
    max-width: 26rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 640px) {
    /* **חוק המובייל.** נמדד ב-390px: התווית התארכה ל"הוספת כתובת האתר
       לפרויקט באתר: ..." והמתג יצא 377px בתוך גוף סעיף של 362 -חריגה של
       15px. שתי שורות עדיפות כאן על חיתוך, כי הכתובת היא כל מה שהתווית
       באה להראות. */
    .pf-row-more .pf-link-show { align-items: flex-start; }
    .pf-row-more .pf-link-show .admin-switch-label {
        white-space: normal; max-width: none; overflow: visible;
    }
}
/* כבוי = הלוח לא יצויר. עמעום התווית הופך את זה לקריא במבט אחד. */
.pf-board-show.is-off .admin-switch-label { opacity: 0.6; }
/* התגיות הן מה שמניע את הסינון בעמוד -רמז ויזואלי שזה שדה מסוג אחר */
.pf-row-tags { border-color: rgba(255, 231, 163, 0.45); }
/* ---- הצעות תגיות ----
   יושבות על ה-‎body‎ ב-‎fixed‎ ולא בתוך השורה: גוף הפאנל הוא ‎overflow: clip‎,
   ורשימה שנפתחת מתוכו נחתכת בגבול השורה. ה-z מעל הפאנל (125) ומתחת לדיאלוגים. */
.pf-tagsug {
    position: fixed; z-index: 200;
    max-height: 13rem; overflow-y: auto;
    display: flex; flex-direction: column;
    padding: 0.25rem; border-radius: 10px;
    background: linear-gradient(180deg, #123a63, #0b2444);
    border: 1.5px solid rgba(255, 231, 163, 0.45);
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5);
    /* חוק הסקרול המעוצב */
    scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.45) transparent;
}
.pf-tagsug[hidden] { display: none; }
.pf-tagsug::-webkit-scrollbar { width: 5px; }
.pf-tagsug::-webkit-scrollbar-track { background: transparent; margin: 0.4rem 0; border-radius: 999px; }
.pf-tagsug::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.4); border-radius: 999px;
    border: 1px solid transparent; background-clip: content-box;
}
.pf-tagsug-i {
    text-align: start; cursor: pointer;
    padding: 0.42rem 0.6rem; border: 0; border-radius: 7px;
    font-family: inherit; font-size: 0.85rem; color: #eaf4ff;
    background: none;
}
.pf-tagsug-i:hover, .pf-tagsug-i.is-on { background: rgba(255, 231, 163, 0.22); color: #fff6e6; }
@media (pointer: coarse) { .pf-tagsug-i { padding: 0.62rem 0.7rem; } }

/* ---- כלי עזר: סרגל גלילה מעוצב (חוק הפרויקט -אין סרגל גלילה "עירום") ---- */
.admin-scroll { scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.4) transparent; }
.admin-scroll::-webkit-scrollbar { width: 9px; height: 9px; }
.admin-scroll::-webkit-scrollbar-track { background: transparent; }
.admin-scroll::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.35); border-radius: 999px;
    border: 2px solid transparent; background-clip: content-box;
}
.admin-scroll::-webkit-scrollbar-thumb:hover { background: rgba(255, 231, 163, 0.6); background-clip: content-box; }

/* ================= עורך "תיאור הפרויקט" =================
   הרכיב עצמו הוא ‎.wysiwyg‎ המשותף (אותו סרגל ואותו עורך כמו במסך "עמודים"),
   ולכן כאן יושבות **רק** ההתאמות של שורת הפרויקט: כותרת קטנה, גובה מתאים לפאנל
   הצר, וטקסט-עזר. אין כאן שכפול של עיצוב הסרגל -שינוי בעורך העמודים מגיע לכאן. */
.pf-rte { border-radius: 11px; }

/* ================= שלושת הסעיפים של עורך הפרויקט =================
   "תיאור הפרויקט", "התמונה הראשית" ו"התמונות שבתוך התיאור" יושבים באותו חלון
   ולכן צריכים להיראות כשלושה פריטים של רשימה אחת. עד כה כל אחד ירש משהו אחר:
   שניים את הסעיף הגנרי הכהה, אחד שורת כותרת בהירה, **ולחץ של השניים הראשונים
   לא היה שום כלל** -‎.admin-collapsible-arrow‎ אינו ‎.admin-chevron‎, ולכן הוא
   לא הסתובב בסגירה ולא נצבע כלל. הבלוק הזה מאחד את שלושתם. */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible,
.pf-rte-sect,
.pf-row-more {
    /* ‎.pf-rte-sect‎ יושב בתוך ‎.pf-row-main‎ שהוא flex עם ‎gap‎ -שם המרווח כבר
       ניתן, ושני המקורות היו מצטברים. ‎.pf-row-cover‎ הוא block ולכן צריך אותו. */
    margin: 0;
    border: 1px solid rgba(255, 231, 163, 0.26);
    border-radius: 14px;
    overflow: clip;
    background: linear-gradient(180deg, rgba(13, 62, 120, 0.36), rgba(9, 40, 80, 0.24));
    box-shadow: 0 3px 12px rgba(3, 12, 28, 0.28);
    transition: border-color 0.2s, box-shadow 0.2s;
}
/* פתוח = "כאן אני עובד עכשיו". סגור נסוג, ולא צריך יותר מזה כדי להבחין. */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible:not(.collapsed),
.pf-rte-sect:not(.collapsed),
.pf-row-more:not(.collapsed) {
    border-color: rgba(255, 231, 163, 0.5);
    box-shadow: 0 5px 20px rgba(3, 12, 28, 0.42);
}
/* ---- שורת הכותרת ----
   ‎.pf-rte-head‎ הוא ‎div‎ שמכיל כפתור + מתג, והאחרים הם הכפתור עצמו. שניהם
   מקבלים כאן את אותה שורה, ולכן ההבדל במבנה אינו נראה על המסך. */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible > .admin-collapsible-head,
.pf-row-more > .admin-collapsible-head,
.pf-rte-sect > .pf-rte-head {
    display: flex; align-items: center; gap: 0.55rem;
    width: 100%; padding: 0.6rem 0.85rem; margin: 0;
    background: linear-gradient(180deg, rgba(255, 231, 163, 0.13), rgba(255, 231, 163, 0.05));
    border: 0; border-bottom: 1px solid rgba(255, 231, 163, 0.16);
    border-radius: 0; cursor: pointer;
    transition: background 0.18s;
}
/* סגור: אין למה להיצמד מלמטה, והכותרת נסגרת לצורה שלמה */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible.collapsed > .admin-collapsible-head,
.pf-row-more.collapsed > .admin-collapsible-head,
.pf-rte-sect.collapsed > .pf-rte-head { border-bottom-color: transparent; }
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible > .admin-collapsible-head:hover,
.pf-row-more > .admin-collapsible-head:hover,
.pf-rte-sect > .pf-rte-head:hover {
    background: linear-gradient(180deg, rgba(255, 231, 163, 0.22), rgba(255, 231, 163, 0.1));
}
/* **בלי קו תחתון ב-hover** (בקשת המשתמש): הרקע כבר אומר "אפשר ללחוץ כאן",
   וקו תחת כותרת נקרא כקישור ולא ככפתור. */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible .admin-collapsible-title,
.pf-row-more .admin-collapsible-title,
.pf-rte-toggle .admin-collapsible-title {
    font-size: 0.86rem; font-weight: 800; letter-spacing: -0.01em;
    color: var(--c-gold-light, #ffe7a3);
    text-decoration: none;
}
.pf-rte-toggle:hover .admin-collapsible-title { text-decoration: none; }
/* ---- החץ: עיגול זהב שמסתובב ----
   קודם היה כאן תו ‎▾‎ עירום בלי שום כלל. עיגול נותן לו שטח נגיעה, מסמן אותו
   כפקד, וההסתובבות היא כל החיווי של פתוח/סגור. */
/* ---- החץ הוא **מטבע זהב חרוט** ----
   עיגול שטוח עם קו דק נקרא כאייקון של טופס. כאן, בעולם של טירה וזהב, הוא
   מטבע: גרדיאנט רדיאלי שנותן כיפה, טבעת כהה סביבו, ברק פנימי למעלה וצל
   פנימי למטה - וה-chevron **חרוט** בו (קו כהה עם הדגשה בהירה מתחתיו, כמו
   חריטה אמיתית). ההסתובבות היא כל החיווי של פתוח/סגור. */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible .admin-collapsible-arrow,
.pf-row-more .admin-collapsible-arrow,
.pf-rte-arrowbtn .admin-collapsible-arrow {
    position: relative;
    flex: 0 0 auto;
    width: 1.72rem; height: 1.72rem; border-radius: 50%;
    display: grid; place-items: center;
    /* **התו ‎▾‎ עצמו מוסתר.** הוא נמדד זעיר בתוך העיגול, וגודלו בכלל תלוי
       בגופן. במקומו chevron מצויר בשני גבולות -חד באותה מידה בכל גודל. */
    font-size: 0; line-height: 1;
    background:
        radial-gradient(circle at 34% 26%,
            #fffaea 0%, #ffe9ac 26%, #ffd15a 56%, #e0a723 80%, #a9760f 100%);
    border: 1.5px solid rgba(74, 48, 6, 0.62);
    box-shadow:
        0 2px 5px rgba(3, 12, 28, 0.5),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.85),
        inset 0 -2px 3px rgba(132, 88, 12, 0.55);
    transition: transform 0.3s cubic-bezier(0.34, 1.4, 0.5, 1), box-shadow 0.2s;
}
/* טבעת פנימית דקה -מה שהופך עיגול למטבע ולא לכפתור */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible .admin-collapsible-arrow::after,
.pf-row-more .admin-collapsible-arrow::after,
.pf-rte-arrowbtn .admin-collapsible-arrow::after {
    content: ''; position: absolute; inset: 2.5px;
    border-radius: 50%; pointer-events: none;
    border: 1px solid rgba(120, 80, 10, 0.28);
}
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible .admin-collapsible-arrow::before,
.pf-row-more .admin-collapsible-arrow::before,
.pf-rte-arrowbtn .admin-collapsible-arrow::before {
    content: '';
    width: 0.44rem; height: 0.44rem;
    /* **גבולות פיזיים ולא לוגיים.** ‎border-inline-end‎ הוא **שמאל** ב-RTL,
       ולכן הצורה יצאה מצביעה שמאלה בפתוח ולמטה בסגור -הפוך מהקונבנציה
       (פתוח = למטה, סגור = הצידה). הכיוון כאן הוא של הצורה עצמה ואינו קשור
       לכיוון הכתיבה, בדיוק כמו הגרדיאנטים שכבר תועדו כאן. */
    border-right: 2.2px solid #4a3006;
    border-bottom: 2.2px solid #4a3006;
    /* **המרכוז ב-‎translate‎ שבתוך ה-‎transform‎, ולא ב-‎margin‎.** ההיסט מסתובב
       יחד עם ההורה כשהסעיף נסגר, ולכן תיקון שיושב **באותה** מערכת צירים
       מתקן את שני המצבים; ‎margin-top‎ היה נכון בפתוח והופך לאופקי בסגור.
       הערך נמדד ולא נגזר מחישוב: מרכז המסה של הפיקסלים הכהים בתוך המטבע,
       מול מרכזו. ‎-0.11rem‎ (הניחוש הראשון, "הצורה יושבת נמוך") **הרחיק**
       אותה -נמדד ‎y=-5.15px‎ בפתוח ו-‎x=-4.57px‎ בסגור, אותו וקטור מסובב. */
    transform: rotate(45deg) translate(0.118rem, 0.118rem);
    /* ההדגשה הבהירה **מתחת** לקו היא מה שקורא כחריטה ולא כציור עליו */
    filter: drop-shadow(1px 1px 0 rgba(255, 250, 225, 0.7));
}
/* ב-hover המטבע נדלק ומתרומם -הוא הפקד, והוא אמור להגיב */
:is(:is(.pf-row-cover, .pf-row-video) > .admin-collapsible > .admin-collapsible-head,
    .pf-row-more > .admin-collapsible-head,
    .pf-rte-sect > .pf-rte-head):hover .admin-collapsible-arrow {
    transform: scale(1.09);
    box-shadow:
        0 3px 9px rgba(3, 12, 28, 0.55),
        0 0 14px rgba(255, 209, 90, 0.5),
        inset 0 1.5px 1px rgba(255, 255, 255, 0.95),
        inset 0 -2px 3px rgba(132, 88, 12, 0.5);
}
/* בסגור הסיבוב מצטרף לשינוי הגודל -שניהם על אותו ‎transform‎, ולכן צריך
   לכתוב אותם יחד; אחרת ה-hover היה מבטל את הסיבוב.

   **‎90deg‎ ולא ‎-90deg‎: החץ פונה שמאלה בסגור, כיוון הקריאה בעברית.** זהו
   בדיוק הכיוון של ‎.admin-chevron‎ הגנרי, והמטבע היה היחיד שהצביע ימינה. */
:is(:is(.pf-row-cover, .pf-row-video) > .admin-collapsible.collapsed > .admin-collapsible-head,
    .pf-row-more.collapsed > .admin-collapsible-head,
    .pf-rte-sect.collapsed > .pf-rte-head):hover .admin-collapsible-arrow {
    transform: rotate(90deg) scale(1.09);
}
@media (prefers-reduced-motion: reduce) {
    :is(.pf-row-cover, .pf-row-video) > .admin-collapsible .admin-collapsible-arrow,
    .pf-rte-arrowbtn .admin-collapsible-arrow { transition: none; }
}
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible.collapsed .admin-collapsible-arrow,
.pf-row-more.collapsed .admin-collapsible-arrow,
.pf-rte-sect.collapsed .pf-rte-arrowbtn .admin-collapsible-arrow { transform: rotate(90deg); }
/* **המרווח שייך לסעיף, לא לחץ.** שני הכללים האלה התמזגו בהחלפת-מחרוזות
   קודמת, והחץ ירש ‎margin-bottom‎ שאין לו שום עסק איתו. מה שדוחף את המטבע
   לקצה הוא ה-‎justify-content: space-between‎ שיורש מ-‎.admin-collapsible-head‎. */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible { margin-bottom: 1.05rem; }
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible:last-child { margin-bottom: 0; }
/* ---- גוף הסעיף ---- */
/* **גוף הסעיף הוא flex עם ‎gap‎** (בקשת המשתמש: "תעשה קצת רווח"). בלעדיו
   השדות נשענו על ‎.pf-cover-fld + .pf-cover-fld‎ בלבד -‎0.15rem‎, כלומר 2px -
   ותווית של שדה אחד נצמדה לשדה שמעליה. הכלל משותף לשלושת סוגי הסעיפים כדי
   שלא יתפצלו זה מזה. */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible > .admin-collapsible-body,
.pf-rte-sect > .admin-collapsible-body {
    padding: 0.85rem; border: 0; background: none;
    display: flex; flex-direction: column; gap: 1.1rem;
}
/* **הסגירה חייבת לבוא אחרי, ובאותה עוצמה לפחות.** הכלל שמעל הוא (0,3,0) -
   בדיוק כמו ‎.admin-collapsible.collapsed .admin-collapsible-body‎ הגנרי, אבל
   מאוחר ממנו בקובץ, ולכן ה-‎display: flex‎ שהוסף בשביל ה-‎gap‎ **דרס את
   ‎display: none‎** ושני סעיפי התמונה והווידאו הפסיקו להיסגר. */
:is(.pf-row-cover, .pf-row-video) > .admin-collapsible.collapsed > .admin-collapsible-body,
.pf-rte-sect.collapsed > .admin-collapsible-body,
.pf-row-more.collapsed > .admin-collapsible-body { display: none; }
/* שני הכפתורים שבשורה שקופים -שורת הכותרת שמעליהם נושאת את הרקע ואת ה-hover.
   הכותרת נמתחת (‎flex: 1‎) כדי שכל השטח הריק יהיה לחיץ; המטבע בגודלו. */
.pf-rte-toggle, .pf-rte-arrowbtn {
    display: flex; align-items: center; gap: 0.55rem;
    padding: 0; cursor: pointer;
    background: none; border: 0; font: inherit; text-align: start;
    color: var(--c-gold-light, #ffe7a3);
    /* **‎width: auto‎ חובה.** שניהם נושאים ‎.admin-collapsible-head‎, שמגדיר
       ‎width: 100%‎ -ועם ‎flex-basis: auto‎ זה הופך לרוחב המבוקש. כפתור המטבע
       הוא ‎flex: 0 0 auto‎ ולכן גם לא מתכווץ ממנו: הוא ביקש את כל השורה
       ודחק את הכותרת לשתי שורות דחוסות. */
    width: auto;
}
.pf-rte-toggle { flex: 1 1 auto; min-width: 0; }
.pf-rte-arrowbtn { flex: 0 0 auto; }
.pf-rte-toggle:hover, .pf-rte-arrowbtn:hover { background: none; }
.pf-rte-toggle:focus-visible { outline: 2px solid rgba(255, 231, 163, 0.6); outline-offset: 3px; border-radius: 8px; }
.pf-rte-label { font-size: 0.86rem; font-weight: 800; color: var(--c-gold-light, #ffe7a3); }
/* ---- "אפשרויות נוספות" ----
   סעיף רביעי בתחתית השורה, אחרי הווידאו (‎order: 9‎). כאן יושבות הגדרות
   התצוגה של השקופית שאינן תוכן. */
.pf-row-more { flex-basis: 100%; width: 100%; order: 10; margin-top: 0.85rem; }
/* **חוצץ מעל "אפשרויות נוספות"** (בקשת המשתמש). שלוש הקבוצות האחרות מקבלות
   אותו מ-‎.pf-cover-title‎ שמעליהן, ולסעיף הזה אין כותרת-על -ולכן הוא נצמד
   לווידאו. הקו מצויר כ-‎::after‎ של קבוצת הווידאו ולא כ-‎border-top‎ עליו:
   ‎.pf-row-more‎ הוא הסעיף עצמו, עם מסגרת ורקע משלו, וגבול נוסף היה נקרא
   כקו כפול. */
.pf-row-video::after {
    content: ''; display: block;
    margin-top: 0.9rem;
    border-top: 1px dashed rgba(255, 231, 163, 0.28);
}
.pf-row-more > .admin-collapsible-body { display: flex; flex-direction: column; gap: 0.5rem; }
/* ‎flex-start‎ כדי שהמתג לא יימתח לרוחב הסעיף -שטח לחיץ ברוחב מלא על מתג
   נקרא כתקלה. ההערה שמתחתיו נצמדת אליו, והמרווח מפריד בין הזוגות. */
.pf-row-more :is(.pf-board-show, .pf-link-show) { align-self: flex-start; }
.pf-row-more .admin-note { margin: -0.15rem 0 0.5rem; }
.pf-row-more .admin-note:last-child { margin-bottom: 0; }
.pf-row-more .admin-note[hidden] { display: none; }
/* ---- מתג "הצגה באתר" של התיאור ----
   **בלי דריסות של גודל וצבע** (בקשת המשתמש: "כמו הירוק"). היו כאן
   ‎--sw-w: 2.2rem‎ ו-‎--sw-h: 1.2rem‎ מהתקופה שבה שורת הכותרת הייתה בהירה,
   והם הקטינו אותו מתחת לכל שאר המתגים בפאנל -‎.pf-link-show‎ שלידו הוא
   ‎admin-switch-mini‎ נקי (2.4/1.3). מרגע שהשורה כהה כשאר הסעיפים, אין סיבה
   שהמתג הזה ייראה אחרת משאר המתגים. */
/* המתג יושב היום **בתוך** גוף הסעיף וראשון בו (בקשת המשתמש), ולכן הוא צריך
   את המרווח שהפריד אותו קודם משורת הכותרת. ‎flex-start‎ כדי שלא יימתח לרוחב
   הסעיף -שטח לחיץ ברוחב מלא על מתג נקרא כתקלה. */
.pf-desc-show {
    flex: 0 0 auto; gap: 0.35rem;
    align-self: flex-start; margin-bottom: 0.7rem;
}
/* התיאור כבוי: השדה **נשאר ניתן לעריכה** (אפשר להכין ניסוח מראש) ורק מסומן
   שהוא לא ייצא לאתר -נעילה כאן הייתה הופכת מתג תצוגה למחיקה. */
.pf-row.is-desc-off .pf-rte-ed { opacity: 0.55; }
.pf-row.is-desc-off .pf-rte-sect > .pf-rte-head {
    background: linear-gradient(180deg, rgba(255, 255, 255, 0.07), rgba(255, 255, 255, 0.03));
}
.pf-row.is-desc-off .pf-rte-toggle .admin-collapsible-title::after {
    content: ' (לא מוצג באתר)'; font-weight: 500; font-size: 0.72rem;
    color: rgba(255, 246, 230, 0.62);
}
/* הגובה נשלט בידית ‎.pf-rte-resize‎ שמתחת (ולא ב-‎resize‎ המובנה, שאינו עובד במגע
   ואי אפשר לעצב אותו). ‎max-height‎ מבוטל כאן -אחרת הוא היה חוסם את ההגדלה. */
.pf-rte-ed { height: 9rem; min-height: 4rem; max-height: none; font-size: 0.92rem; }
/* תמונות שהוטמעו מהמדיה -אותן מחלקות רוחב של עורך העמודים (cms-w25/50/75/100) */
.pf-rte-ed img { max-width: 100%; height: auto; border-radius: 6px; }
.pf-rte-ed img.cms-w25 { width: 25%; } .pf-rte-ed img.cms-w50 { width: 50%; }
.pf-rte-ed img.cms-w75 { width: 75%; } .pf-rte-ed img.cms-w100 { width: 100%; }
.pf-rte-ed img.cms-center { display: block; margin-inline: auto; }
.pf-rte-resize {
    height: 0.85rem; cursor: ns-resize;
    touch-action: none;                       /* אחרת הדפדפן גולל במקום לשנות גובה */
    display: grid; place-items: center;
    background: linear-gradient(180deg, #eaf2fb, #d8e6f5);
    border-top: 1px solid rgba(91, 163, 230, 0.4);
}
.pf-rte-resize::before {
    content: ''; width: 2.2rem; height: 3px; border-radius: 3px;
    background: rgba(20, 32, 58, 0.3);
}
.pf-rte-resize:hover::before { background: rgba(20, 32, 58, 0.55); }
/* טקסט עזר: contenteditable ריק אינו :empty (יש בו <br>), ולכן המחלקה נקבעת ב-JS */
.pf-rte-ed.is-empty::before {
    content: attr(data-ph);
    color: rgba(28, 36, 52, 0.42);
    pointer-events: none;
}

/* ================= הגדלת פרויקט לעריכה נוחה ================= */
.pf-row-slot { display: none; }                     /* סימנייה למקום שאליו השורה חוזרת */
.pf-zoom-overlay {
    position: fixed; inset: 0; z-index: 135;
    display: flex; align-items: center; justify-content: center;
    padding: 1rem;
    /* **בלי ‎backdrop-filter‎** (בקשת המשתמש): כל מטרת השקיפות כאן היא לראות את
       האתר שמאחור בזמן העריכה, וטשטוש הופך אותו לכתם צבע -כלומר הוא מבטל את מה
       שהמחוון בא לאפשר. זו גם אותה שיקול שבגללו לפאנל עצמו מעולם לא היה blur.
       ‎--pf-see‎ (0.3..1) הוא מד השקיפות שבכותרת החלון: 1 = אטום כרגיל.

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

       ‎--pf-see‎ ממשיך להיות משמעותי: הוא נקרא גם ברקע החלון עצמו. */
    background: transparent;
    pointer-events: none;
    animation: admin-fade 0.22s ease both;
}
/* רק החלון (והבועה הממוזערת) לוכדים אירועים -לא השטח שסביבם */
.pf-zoom-overlay > * { pointer-events: auto; }
.pf-zoom-overlay[hidden] { display: none; }
/* ---- ידיות שינוי הגודל ----
   שקופות ויושבות **על** גבול החלון: הן צריכות להיות תפוסות ולא נראות.
   ‎touch-action: none‎ רק עליהן -גוף החלון חייב להישאר נגלל באצבע. */
.pf-win-rs { position: absolute; z-index: 6; touch-action: none; }
.pf-win-rs-n, .pf-win-rs-s { inset-inline: 14px; height: 8px; cursor: ns-resize; }
.pf-win-rs-e, .pf-win-rs-w { inset-block: 14px; width: 8px; cursor: ew-resize; }
.pf-win-rs-n { top: -3px; }
.pf-win-rs-s { bottom: -3px; }
/* **צלעות פיזיות ולא לוגיות.** ‎n/s/e/w‎ הם כיווני מצפן, והחשבון ב-JS פיזי:
   ‎e‎ מרחיב כשגוררים ימינה. עם ‎inset-inline-end‎ הידית שסומנה ‎e‎ נחתה ב-RTL על
   הצלע ה**שמאלית**, ולכן גרירה שמאלה (הרחבה) חישבה ‎dx‎ שלילי וכיווצה - שינוי
   הגודל יצא הפוך בדיוק. הפינות תמיד השתמשו ב-‎left/right‎ פיזיים ולכן עבדו,
   וזה מה שהסתיר את הבאג. */
.pf-win-rs-e { right: -3px; }
.pf-win-rs-w { left: -3px; }
.pf-win-rs-ne, .pf-win-rs-nw, .pf-win-rs-se, .pf-win-rs-sw { width: 18px; height: 18px; }
.pf-win-rs-ne { top: -4px; right: -4px; cursor: nesw-resize; }
.pf-win-rs-nw { top: -4px; left: -4px; cursor: nwse-resize; }
.pf-win-rs-se { bottom: -4px; right: -4px; cursor: nwse-resize; }
.pf-win-rs-sw { bottom: -4px; left: -4px; cursor: nesw-resize; }
@media (pointer: coarse) {
    .pf-win-rs-n, .pf-win-rs-s { height: 14px; }
    .pf-win-rs-e, .pf-win-rs-w { width: 14px; }
    .pf-win-rs-ne, .pf-win-rs-nw, .pf-win-rs-se, .pf-win-rs-sw { width: 26px; height: 26px; }
}
/* בזמן גרירה -בלי בחירת טקסט ובלי מעבר חלק שירדוף אחרי הסמן */
.pf-zoom-win.is-resizing { user-select: none; transition: none; }
.pf-zoom-win.is-resizing .pf-zoom-body { pointer-events: none; }
/* גובה מפורש דורש שהגוף יתפוס את מה שנשאר ויגלול בעצמו */
.pf-zoom-win { min-height: 0; }
.pf-zoom-win > .pf-zoom-body { flex: 1 1 auto; min-height: 0; }

/* ---- ‎contain: paint‎ -"מסך הניהול נהיה כחול וזהו" ----
   **באג ציור, לא באג DOM.** לחיצה על מתג רכיבי-רקע בעורך העמוד הותירה
   את חלון העריכה כמסגרת כחולה ריקה. נמדד: ה-DOM **זהה בייט-בייט** לפני
   ואחרי -אותם 19,419 אלמנטים, אותם גבהים, אותו ‎scrollTop‎ (1510/3175)-
   ובכל זאת **66% מהפיקסלים** בחלון השתנו. כלומר התוכן שם והדפדפן פשוט
   אינו מצייר אותו.

   הטריגר: המתג מוסיף ‎scene-off-*‎ ל-‎body‎, וזה מוריד שכבת קומפוזיטור
   ענקית (‎.folk-layer‎ וחברותיה). בהסרה כזאת נכשל הציור מחדש של מכל
   הגלילה שמעליה.

   ‎contain: paint‎ מצהיר שהציור של האלמנט כלוא בקופסה שלו -וזה נכון בו
   ממילא, הוא ‎overflow: auto‎- וכך הוא נצבע בנפרד ואינו תלוי במה שקרה
   מתחתיו. נמדד: **66.18% → 0.06%** (מה שנשאר הוא המתג שנלחץ).

   **‎will-change: transform‎ עובד בדיוק כמו זה ולא נבחר**: הוא מקדם שכבה
   קבועה בזיכרון, כאן על אזור בגודל חלון מלא. ועל ‎.pf-zoom-win‎ (החלון,
   ולא גוף הגלילה) הוא לא עזר כלל -66.30%- כלומר מה שנכשל בציור הוא
   **מכל הגלילה** עצמו.

   בטוח כאן: נמדד שאין בתוכו אף צאצא ‎position: fixed‎ (התיבות והדיאלוגים
   מועברים ל-‎body‎ ממילא), ו-‎sticky‎ ממשיך להימדד מול אותו מכל גלילה כי
   ‎contain: paint‎ אינו יוצר מכל חדש. */
.pf-zoom-body { contain: paint; }
/* בממוזער אין מה לשנות -החלון עצמו מוסתר */
.pf-zoom-overlay.is-min .pf-win-rs { display: none; }

/* ---- הצמדה לצד (dock) ----
   אותו מודל של הפאנל: שלושה מצבים שווי-ערך וצדדים **פיזיים** (‎right/left‎
   ולא ‎inset-inline‎) -המשתמש ביקש "ימין" כפי שהוא רואה אותו, וב-RTL הלוגי
   מתהפך.

   **המחלקות על ה-overlay ולא על החלון.** הוא זה שממרכז ומכהה, ובמצב מוצמד
   שניהם חייבים להשתנות: שכבה שממשיכה לכסות את כל המסך הייתה חוסמת את האתר
   שלצידו -וזו כל מטרת ההצמדה. */
.pf-zoom-overlay.is-docked {
    padding: 0;
    align-items: stretch;
    background: transparent;
    /* הרקע חוזר להיות לחיץ; רק החלון עצמו לוכד אירועים */
    pointer-events: none;
}
.pf-zoom-overlay.is-docked .pf-zoom-win { pointer-events: auto; }
/* **‎right/left‎ ולא ‎flex-end/flex-start‎.** ה-overlay יורש ‎direction: rtl‎,
   ושם ‎flex-end‎ הוא **שמאל** -נמדד שהצמדה ל"ימין" נחתה בצד שמאל של המסך,
   בדיוק הפוך ממה שהכפתור מבטיח. המילות האלה פיזיות ואינן מתהפכות. */
.pf-zoom-overlay.is-docked.dock-right { justify-content: right; }
.pf-zoom-overlay.is-docked.dock-left  { justify-content: left; }
/* ‎!important‎ על המידות: ה-JS כותב ‎left/top/width/height‎ כ-inline בכל גרירה
   ושינוי-גודל. הוא כן מנקה אותם בהצמדה, וזו רשת ביטחון -אותו שיקול שכבר
   תועד בהצמדת הפאנל. */
.pf-zoom-overlay.is-docked .pf-zoom-win {
    left: 0 !important; top: 0 !important;
    width: var(--pf-dock-w, 30rem) !important;
    max-width: 94vw;
    height: 100dvh !important; max-height: none !important;
    border-radius: 0;
    box-shadow: 0 0 40px rgba(0, 0, 0, 0.5);
}
.pf-zoom-overlay.is-docked.dock-right .pf-zoom-win { border-right: 0; }
.pf-zoom-overlay.is-docked.dock-left  .pf-zoom-win { border-left: 0; }
/* הידיות שאינן על הצד הפנימי מיותרות: הגובה נעול והצד החיצוני צמוד למסך */
.pf-zoom-overlay.is-docked .pf-win-rs-n,
.pf-zoom-overlay.is-docked .pf-win-rs-s,
.pf-zoom-overlay.is-docked .pf-win-rs-ne, .pf-zoom-overlay.is-docked .pf-win-rs-nw,
.pf-zoom-overlay.is-docked .pf-win-rs-se, .pf-zoom-overlay.is-docked .pf-win-rs-sw { display: none; }
.pf-zoom-overlay.is-docked.dock-right .pf-win-rs-e { display: none; }
.pf-zoom-overlay.is-docked.dock-left  .pf-win-rs-w { display: none; }
/* בממוזער אין חלון, ולכן הכפתור מיותר */
.pf-zoom-overlay.is-min .pf-zoom-dock { display: none; }
/* כפתור ההצמדה -אותה גאומטריה של המזעור והסגירה שלצידו */
.pf-zoom-dock {
    cursor: pointer; display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
    color: #fff6e6; background: rgba(255, 231, 163, 0.16);
    border: 1px solid rgba(255, 231, 163, 0.45);
    transition: background 0.14s, transform 0.12s;
}
.pf-zoom-dock:hover { background: rgba(255, 231, 163, 0.32); transform: scale(1.06); }
.pf-zoom-dock:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
.pf-zoom-dock[aria-pressed="true"] { background: rgba(255, 209, 90, 0.42); color: #2a1c05; }
@media (pointer: coarse) { .pf-zoom-dock { width: 2.3rem; height: 2.3rem; } }

.pf-zoom-win {
    /* **צבע הבסיס של הפאנל.** החלון יושב על ה-‎body‎ ולא בתוך ‎.admin-panel‎
       (שם ‎color: #fff‎), ולכן כל מה שאינו מגדיר צבע במפורש ירש את צבע האתר -
       ובעורך העמוד, שרוב הטקסט בו יורש, הכול יצא שחור על כחול כהה. */
    color: #fff;
    /* ‎position: relative‎ + ‎left/top‎ (ולא transform) כדי שהחלון יהיה נגרר בלי
       להפוך ל-containing block של ילדים ‎position: fixed‎ -ראה ההערה ב-admin.js */
    position: relative;
    display: flex; flex-direction: column;
    /* ‎dvh‎ -ראה ‎.admin-dialog‎; באייפון ‎vh‎ מוציא את קצות החלון מהמסך */
    width: min(62rem, 100%); max-height: 92vh; max-height: 92dvh;
    border-radius: 16px; overflow: hidden;
    border: 1.5px solid rgba(255, 231, 163, 0.4);
    /* **שקיפות של הרקע ולא ‎opacity‎ על החלון** -בדיוק כמו בפאנל: הטקסט, העורך
       והכפתורים נשארים חדים בכל רמה, ודיאלוגי האישור שנפתחים מעל אינם מתעמעמים
       יחד איתו (ילד אינו יכול להיות אטום יותר מהורהו). */
    background: linear-gradient(180deg,
        rgba(18, 58, 107, var(--pf-see, 1)), rgba(11, 34, 68, var(--pf-see, 1)));
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.55);
}
.pf-zoom-head {
    /* הכותרת היא ידית הגרירה של החלון */
    cursor: move; touch-action: none; user-select: none; -webkit-user-select: none;
    display: flex; align-items: center; justify-content: space-between; gap: 0.7rem;
    padding: 0.6rem 0.85rem;
    background: rgba(255, 231, 163, 0.1);
    border-bottom: 1px solid rgba(255, 231, 163, 0.25);
}
/* מד השקיפות בכותרת החלון -קטן יותר מזה שבסרגל הפאנל, שם יש רוחב מלא */
.pf-win-see { cursor: default; }
.pf-win-see input[type="range"] { width: 4.5rem; }
.pf-win-see .admin-opacity-val { min-width: 2.4rem; }
/* בחלון צר יורדים קודם הערך ואז המחוון כולו: כפתורי החלון אינם ויתור */
@media (max-width: 700px) { .pf-win-see .admin-opacity-val { display: none; } }
@media (max-width: 520px) { .pf-win-see { display: none; } }
.pf-zoom-title { font-size: 0.95rem; font-weight: 800; color: var(--c-gold-light, #ffe7a3); }
.pf-zoom-title::before { content: '⠿ '; opacity: 0.65; font-weight: 400; }
.pf-zoom-head.is-dragging { background: rgba(255, 231, 163, 0.2); }
/* הכפתורים בכותרת אינם גוררים -הם נלחצים */
.pf-zoom-head button { cursor: pointer; touch-action: auto; }
/* ✕ עגול, באותו דפוס של ‎.admin-dialog-x‎ -וביעד נגיעה סביר במגע */
.pf-zoom-close {
    cursor: pointer; display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
    color: #fff6e6; background: rgba(255, 231, 163, 0.16);
    border: 1px solid rgba(255, 231, 163, 0.45);
    transition: background 0.14s, transform 0.12s;
}
.pf-zoom-close svg { width: 0.85rem; height: 0.85rem; }
/* המזעור בזוג עם הסגירה: אותה גאומטריה, סימן אחד בלבד */
.pf-zoom-min {
    cursor: pointer; display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
    font: inherit; font-size: 1.1rem; line-height: 1; font-weight: 700;
    color: #fff6e6; background: rgba(255, 231, 163, 0.16);
    border: 1px solid rgba(255, 231, 163, 0.45);
    transition: background 0.14s, transform 0.12s;
}
.pf-zoom-min:hover { background: rgba(255, 231, 163, 0.32); transform: scale(1.06); }
.pf-zoom-min:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
@media (pointer: coarse) { .pf-zoom-min { width: 2.3rem; height: 2.3rem; } }
/* המזעור בזוג עם הסגירה: אותה גאומטריה, סימן אחד בלבד */
.pf-zoom-min {
    cursor: pointer; display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
    font: inherit; font-size: 1.1rem; line-height: 1; font-weight: 700;
    color: #fff6e6; background: rgba(255, 231, 163, 0.16);
    border: 1px solid rgba(255, 231, 163, 0.45);
    transition: background 0.14s, transform 0.12s;
}
.pf-zoom-min:hover { background: rgba(255, 231, 163, 0.32); transform: scale(1.06); }
.pf-zoom-min:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
@media (pointer: coarse) { .pf-zoom-min { width: 2.3rem; height: 2.3rem; } }
.pf-zoom-close:hover { background: rgba(224, 69, 46, 0.75); border-color: rgba(224, 69, 46, 0.9); transform: scale(1.06); }
.pf-zoom-close:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
@media (pointer: coarse) { .pf-zoom-close { width: 2.3rem; height: 2.3rem; } .pf-zoom-close svg { width: 1rem; height: 1rem; } }
.pf-zoom-actions { display: flex; align-items: center; gap: 0.4rem; }

/* ---- מעבר בין פרויקטים מתוך חלון העריכה ----
   הכיוון עברי: "הקודם" מצביע **ימינה** ו"הבא" שמאלה, כמו ניווט המקלדת וההחלקה
   באתר. הכפתורים נלחצים ואינם גוררים -‎.pf-zoom-head button‎ כבר מטפל בזה. */
.pf-zoom-nav { display: flex; align-items: center; gap: 0.3rem; margin-inline-start: auto; }
.pf-zoom-nav button {
    display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
    color: #fff6e6; background: rgba(255, 231, 163, 0.12);
    border: 1px solid rgba(255, 231, 163, 0.38);
    transition: background 0.14s, transform 0.12s, opacity 0.14s;
}
.pf-zoom-nav button svg { width: 0.95rem; height: 0.95rem; }
.pf-zoom-nav button:hover:not(:disabled) { background: rgba(255, 231, 163, 0.3); transform: scale(1.06); }
.pf-zoom-nav button:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
/* בקצה הרשימה: מעומעם ולא מוסתר -כך רואים שאין עוד, במקום שכפתור ייעלם */
.pf-zoom-nav button:disabled { opacity: 0.32; cursor: default; }
.pf-zoom-count {
    min-width: 3.2rem; text-align: center;
    font-size: 0.76rem; font-weight: 700; color: rgba(255, 246, 230, 0.72);
    font-variant-numeric: tabular-nums;      /* המונה לא "רוקד" במעבר בין מספרים */
    /* **‎direction‎ לבדו אינו מספיק** -בלי ‎unicode-bidi‎ המחרוזת "2 / 4" מוצגת
       בהקשר העברי כ-"4 / 2" (נמדד). אותה מלכודת של מיקום התמונה בבורר. */
    direction: ltr; unicode-bidi: isolate;
}
@media (pointer: coarse) { .pf-zoom-nav button { width: 2.3rem; height: 2.3rem; } }
/* במסך צר הכותרת צפופה -המונה יורד, החצים נשארים */
@media (max-width: 480px) { .pf-zoom-count { display: none; } }
.pf-zoom-min {
    cursor: pointer; font: inherit; font-size: 0.82rem; font-weight: 700;
    padding: 0.35rem 0.75rem; border-radius: 9px;
    color: #fff6e6; background: rgba(255, 231, 163, 0.1);
    border: 1px solid rgba(255, 231, 163, 0.35);
    transition: background 0.14s;
}
.pf-zoom-min:hover { background: rgba(255, 231, 163, 0.26); }

/* ---- מזעור העריכה לעיגול ----
   המטרה היא **לראות את האתר מאחור**, ולכן במצב ממוזער יורדים גם הכהות וגם
   ה-blur של הרקע ו-‎pointer-events‎ מתבטל: העמוד מאחור נגלל ונלחץ כרגיל, ורק
   העיגול עצמו לוכד קליקים. השורה הנערכת נשארת ב-DOM (‎display: none‎ על החלון)
   כדי לא לאבד את מצב העריכה ואת מחסנית ה-UNDO. */
.pf-zoom-overlay.is-min {
    background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none;
    pointer-events: none; padding: 0;
}
.pf-zoom-overlay.is-min .pf-zoom-win { display: none; }
.pf-zoom-bubble {
    /* ‎touch-action: none‎ -אחרת הדפדפן גולל את העמוד במקום לגרור את הבועה */
    touch-action: none; user-select: none; -webkit-user-select: none;
    display: none; position: fixed; inset-inline-end: 1.1rem; inset-block-end: 1.1rem;
    width: 3.2rem; height: 3.2rem; border-radius: 50%; cursor: pointer;
    font-size: 1.35rem; line-height: 1;
    color: #0b2244; background: linear-gradient(180deg, #ffe7a3, var(--c-gold, #ffd15a));
    border: 2px solid var(--c-wood-deep, #4a2f12);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
    pointer-events: auto;
    animation: pf-bubble-in 0.18s ease-out;
}
.pf-zoom-overlay.is-min .pf-zoom-bubble { display: grid; place-items: center; }
.pf-zoom-bubble:hover { filter: brightness(1.06); }
.pf-zoom-bubble:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
@keyframes pf-bubble-in { from { transform: scale(0.6); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pf-zoom-bubble { animation: none; } }
/* מובייל: העיגול מעל כפתור הנגישות המרחף ולא עליו */
@media (max-width: 640px) { .pf-zoom-bubble { inset-block-end: 5rem; width: 3rem; height: 3rem; } }
.pf-zoom-body { --scroll-pad: 0.85rem; padding: var(--scroll-pad); overflow-y: auto; }
/* בחלון יש מקום -השורה נפרסת לרוחב והעורך גבוה פי כמה.
   הסדר משתנה: תמונה + כפתורי הפעולה בשורה עליונה אחת, והעמודה הראשית (כותרת,
   תיאור, קישור) תופסת את כל הרוחב שמתחתיה -אחרת העורך נשאר צר והכפתורים
   נדחקים לפינה בזמן שחצי החלון ריק. */
.pf-row.is-zoomed { border: 0; background: none; padding: 0; align-items: center; }
.pf-row.is-zoomed .pf-row-thumb { order: 1; width: 9rem; height: 5.6rem; }
/* **הכול מיושר לראש השורה** (בקשת המשתמש). בחלון התמונה גבוהה (5.6rem),
   ומרכוז אנכי השאיר את השם, התאריך והמתג תלויים באמצע גובה התמונה -כל אחד
   בגובה אחר, כאילו הם מרחפים. ‎start‎ מיישר את כולם לאותו קו עליון. */
.pf-row.is-zoomed .pf-row-top { align-items: start; }
.pf-row.is-zoomed .pf-row-top > .pf-row-on { margin-top: 0.15rem; }   /* מרכוז אופטי מול שורת הטקסט */
/* בחלון אין ‎padding‎ על השורה (הוא על ‎.pf-zoom-body‎), ולכן ה-margin השלילי
   של הכותרת נמדד מולו -אחרת הרקע היה בולט אל מחוץ לחלון. ההדבקה עצמה נשארת:
   כאן אזור הגלילה הוא ‎.pf-zoom-body‎, והכותרת נדבקת לראשו. */
.pf-row.is-zoomed .pf-row-head {
    margin: -0.85rem -0.85rem 0; padding: 0.85rem; border-radius: 0;
}
/* בחלון יש יותר מקום -אותה פריסה בדיוק, כפתורים מעט גדולים יותר */
.pf-row.is-zoomed .pf-row-actions { gap: 0.6rem; }
.pf-row.is-zoomed .pf-row-btn { min-height: 2.2rem; padding: 0 0.7rem; font-size: 0.82rem; }
.pf-row.is-zoomed .pf-rte-ed { height: 44vh; min-height: 12vh; max-height: none; font-size: 0.95rem; }
.pf-row.is-zoomed .pf-row-title { font-size: 1rem; }
/* ---- פקדי שורת הפרויקט ----
   קבוצות לפי משמעות (תצוגה / סדר / מחיקה) עם מפריד עדין ביניהן, אייקון SVG אחיד
   ותווית. התווית יורדת רק כשאין לה מקום -ה-title תמיד נשאר.

   **סרגל אופקי, לא טור.** חמישה כפתורים עם תוויות בטור אחד יצרו עמודה גבוהה
   שנמתחה על כל גובה השורה לצד התמונה. הפריסה זהה בכל הרוחבים ובחלון המוגדל:
   תמונה + סרגל בשורה העליונה, ושדות העריכה ברוחב מלא מתחתיהם. */
.pf-row-actions {
    flex: 1 1 auto; display: flex; flex-direction: row;
    align-items: center; flex-wrap: wrap; gap: 0.5rem;
}
.pf-act-grp { display: flex; flex-direction: row; gap: 0.3rem; }
.pf-act-grp + .pf-act-grp {
    padding-inline-start: 0.5rem;
    border-inline-start: 1px solid rgba(255, 231, 163, 0.18);
}
.pf-row-btn {
    display: flex; align-items: center; gap: 0.35rem;
    min-height: 1.95rem; padding: 0 0.5rem; cursor: pointer;
    font-family: inherit; font-size: 0.76rem; font-weight: 600; white-space: nowrap;
    border-radius: 8px; border: 1px solid rgba(255, 231, 163, 0.3);
    background: rgba(255, 231, 163, 0.1); color: #ffe7a3;
    transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.pf-row-btn svg { flex: 0 0 auto; width: 0.95rem; height: 0.95rem; }
.pf-row-btn:hover { background: rgba(255, 231, 163, 0.24); border-color: rgba(255, 231, 163, 0.55); transform: translateY(-1px); }
.pf-row-btn:active { transform: translateY(0); }
.pf-row-btn:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
/* מחיקה היא פעולה הרסנית -ונראית ככזו כבר במנוחה, לא רק ב-hover */
.pf-btn-danger {
    color: #ffc9c9;
    background: rgba(200, 60, 60, 0.16);
    border-color: rgba(220, 90, 90, 0.45);
}
.pf-btn-danger:hover { background: rgba(200, 50, 50, 0.4); border-color: rgba(255, 140, 140, 0.7); color: #fff; }

/* ---- שמירה ידנית: הכפתור **הוא** מצב הפרויקט ----
   במנוחה ("נשמר") הוא מושבת ושקט, כדי שלא ייקרא כפעולה שצריך לעשות. ברגע שיש
   שינוי הוא נדלק בירוק ומקבל טבעת -בלי סימון כזה אי אפשר לדעת שהתוכן טרם נשמר,
   וזה בדיוק הסיכון בשמירה ידנית. */
.pf-btn-save { color: #bdf3cf; background: rgba(40, 160, 90, 0.14); border-color: rgba(90, 200, 140, 0.4); }
.pf-btn-save:disabled { opacity: 0.5; cursor: default; transform: none; }
.pf-btn-save:disabled:hover { background: rgba(40, 160, 90, 0.14); border-color: rgba(90, 200, 140, 0.4); transform: none; }
.pf-row.is-dirty .pf-btn-save {
    color: #06210f; background: #6ee7a0; border-color: #a8f5c6; font-weight: 800;
    box-shadow: 0 0 0 3px rgba(110, 231, 160, 0.25);
    animation: pf-save-pulse 2.4s ease-in-out infinite;
}
.pf-row.is-dirty .pf-btn-save:hover { background: #8bf0b6; color: #06210f; }
@keyframes pf-save-pulse {
    0%, 100% { box-shadow: 0 0 0 3px rgba(110, 231, 160, 0.22); }
    50%      { box-shadow: 0 0 0 6px rgba(110, 231, 160, 0.08); }
}
@media (prefers-reduced-motion: reduce) { .pf-row.is-dirty .pf-btn-save { animation: none; } }
/* השורה עצמה מסומנת -בפאנל ארוך הכפתור לבדו נעלם מהעין */
.pf-row.is-dirty { border-color: rgba(110, 231, 160, 0.55); box-shadow: 0 0 0 1px rgba(110, 231, 160, 0.25); }
.pf-row.is-dirty .pf-row-title { border-color: rgba(110, 231, 160, 0.5); }

/* תצוגה מקדימה בדיאלוג המחיקה -שברור איזה פרויקט עומד להימחק */
.pf-del-preview { display: flex; align-items: center; gap: 0.7rem; }
.pf-del-thumb {
    flex: 0 0 auto; width: 4.6rem; height: 3rem;
    border-radius: 9px; background: rgba(13, 27, 48, 0.6) center / cover no-repeat;
    border: 1.5px solid rgba(255, 231, 163, 0.35);
}
.pf-del-thumb.is-empty { border-style: dashed; }
.pf-add-row { display: flex; gap: 0.6rem; align-items: center; margin-top: 0.8rem; flex-wrap: wrap; }
/* ‎.admin-hint‎ נושא רק ‎margin-bottom‎, ולכן ההערה נצמדה לכפתורים שמעליה */
.pf-add-row + .admin-hint { margin-top: 0.9rem; }

/* ---- עורך הווידאו לפריט (מתקפל תחת שורת הפרויקט) ---- */
.pf-row { flex-wrap: wrap; }                          /* מאפשר לעורך לרדת לשורה חדשה מלאה */
.pf-row-btn.pf-vid.has-vid { background: rgba(120, 220, 150, 0.28); border-color: rgba(120, 220, 150, 0.6); color: #dfffe9; }
/* כפתור שהפאנל שלו פתוח -מובלט, עם טבעת שמחברת אותו ויזואלית למה שנפתח מתחתיו.
   הסלקטור כולל את ‎.pf-row-actions‎ כדי לגבור על ‎.pf-vid.has-vid‎ (הירוק של
   "יש וידאו"): כשהפאנל פתוח, המצב הנוכחי הוא המידע החשוב יותר. */
.pf-row-actions .pf-row-btn.is-on, .pf-row-btn.is-on {
    background: var(--c-gold, #ffd15a); border-color: var(--c-wood-deep, #4a2f12);
    color: #2a1b06; font-weight: 800;
    box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.22);
}
.pf-row-actions .pf-row-btn.is-on:hover, .pf-row-btn.is-on:hover { background: var(--c-gold-light, #ffe7a3); color: #2a1b06; }
/* ---- פאנל עיצוב התמונה הראשית ----
   שתי עמודות: תצוגה מקדימה חיה משמאל והפקדים מימין. הגרסה הראשונה הייתה שורות
   ארוכות שנשברו בעמודה צרה -תווית בשורה אחת, כפתורים בשורה אחרת, וסליידר ענק -
   ולכן כאן הכול בתוך ‎grid‎ עם רוחב מינימלי, והפקדים עצמם קומפקטיים. */
.pf-row-cover {
    /* ‎.pf-row‎ הוא **flex** ולא grid, ולכן ‎grid-column: 1 / -1‎ לא עשה כלום:
       הפאנל נשאר פריט צר לצד התמונה הממוזערת ולא התיישר איתה. אותה שיטה של
       עורך הווידאו -שורה מלאה משלו, עם ‎order‎ שקובע שהוא לפניו. */
    flex-basis: 100%; width: 100%; order: 8;
    /* **מקבץ שקוף ולא קופסה** (בקשת המשתמש: המטבעות על קו אחד). היו כאן
       ריפוד ‎0.85rem‎ ומסגרת, והם הזיחו את שני הסעיפים שבתוכו ב-14.5px פנימה -
       כלומר המטבעות שלהם לא התיישרו עם זה של "תיאור הפרויקט", שאינו בתוך
       המיכל הזה. שלושת הסעיפים נושאים ממילא מסגרת ורקע משלהם, וקופסה
       שעוטפת שתיים מהם היא רק גבול נוסף סביב גבול. */
    margin-top: 0.85rem; padding: 0;
    background: none; border: 0; border-radius: 0;
}
.pf-row-cover[hidden] { display: none; }   /* display מפורש גובר על תכונת hidden */
.pf-cover-head { font-size: 0.85rem; font-weight: 800; color: #ffe7a3; margin-bottom: 0.7rem; }
.pf-cover-head i { display: block; font-style: normal; font-weight: 500; font-size: 0.76rem; color: rgba(255, 246, 230, 0.72); margin-top: 0.15rem; }
.pf-cover-grid { display: grid; grid-template-columns: minmax(min(9rem, 100%), 15rem) minmax(min(12rem, 100%), 1fr); gap: 0.9rem; align-items: start; }
@media (max-width: 620px) { .pf-cover-grid { grid-template-columns: 1fr; } }

/* התצוגה המקדימה נושאת את **אותן מחלקות** של הכרטיס באתר (‎pf-cover-*‎,
   ‎pf-fit-contain‎, ‎imgf-*‎), רק עם גבהים מוקטנים ביחס זהה -כך היא לא יכולה
   "להתפצל" מהתוצאה האמיתית. */
/* **העוטף הוא הכרטיס, והתצוגה שבתוכו היא התמונה** -בדיוק כמו באתר, ולכן
   ‎data-pfopen‎ (המעבר מהקרוסלה) יושב כאן ו-‎pf-canim-*‎ (כניסת התמונה) עליה.
   הכללים עצמם מגיעים מ-‎components.css‎ ואינם משוכפלים; מה שנקבע כאן הוא רק
   קנה-המידה: הכרטיס באתר בגובה ~500px והתצוגה ~150, ולכן ההרמה של "עלייה"
   מוקטנת באותו יחס -אחרת היא קופצת על הפקדים שמתחתיה. */
.pf-cover-pvwrap { background: rgba(6, 20, 42, 0.55); border-radius: 12px; padding: 0.55rem; --pf-open-rise: 18px; }
.pf-cover-pv { overflow: hidden; border: 1px solid rgba(255, 231, 163, 0.25); }
/* אותו דפוס בדיוק של הכרטיס באתר: "מילוי" = גובה קבוע (יש חיתוך, ולכן יש מה
   לגרור), "הכלה" = ‎height: auto‎ עם תקרה. עם ‎max-height‎ לבדו תמונה רחבה לא
   נחתכה כלל -והגרירה כאן הייתה מזיזה מה שבאתר ממילא לא זז. */
.pf-cover-pv img { display: block; width: 100%; height: var(--pf-h, 8.5rem); object-fit: cover; }
.pf-cover-pv.pf-cover-s    { --pf-h: 4rem; }
.pf-cover-pv.pf-cover-m    { --pf-h: 6rem; }
.pf-cover-pv.pf-cover-l    { --pf-h: 8.5rem; }
.pf-cover-pv.pf-cover-full { --pf-h: 13rem; }
/* "מסך מלא" אינו עוד גובה אלא **מצב אחר של הכרטיס**, ולכן התצוגה המקדימה
   מראה את מה שבאמת יקרה: התמונה על כל המסגרת, וכפתור "מידע נוסף" מדומה
   מעליה. בלי הכפתור המדומה נראה כאן בדיוק כמו "מלא", והבחירה בין השניים
   נעשית בעיוורון. */
.pf-cover-pv.pf-cover-screen { --pf-h: 13rem; position: relative; }
.pf-cover-pv.pf-cover-screen:not(.is-empty)::after {
    content: 'מידע נוסף ⌃';
    position: absolute; inset-inline: 0; bottom: 0.6rem;
    margin-inline: auto; width: max-content;
    padding: 0.28rem 0.8rem; border-radius: 999px;
    font-size: 0.72rem; font-weight: 800; color: #08203d;
    background: linear-gradient(180deg, var(--c-gold-light, #ffe7a3), var(--c-gold, #ffd15a));
    border: 1px solid var(--c-gold-deep, #d39a1a);
    box-shadow: 0 2px 0 var(--c-gold-deep, #d39a1a), 0 6px 14px rgba(0, 0, 0, 0.45);
    pointer-events: none;                 /* התצוגה המקדימה נגררת -זה קישוט */
}
.pf-cover-pv.pf-fit-contain img {
    object-fit: contain; background: rgba(6, 20, 42, 0.6);
    height: auto; max-height: var(--pf-h, 8.5rem);
}
/* **ארבעה מצבי התאמה קיימים, ורק שניים היו כאן.** ‎fill‎ ו-‎none‎ קיבלו את
   המחלקה מ-‎syncPreview‎ אבל לא היה להם שום כלל, ולכן התצוגה נשארה על
   ‎cover‎ בשתי הבחירות -נמדד ‎object-fit: cover‎ בעוד שהאתר נותן ‎fill‎/‎none‎.
   מבחינת מי שבוחר: שתי אפשרויות שאין להן תצוגה מקדימה, וזו כל מטרתה.
   הגובה נשאר ה-‎--pf-h‎ שמהכלל הבסיסי -בדיוק כמו באתר, ומאותה סיבה: עם
   ‎height: auto‎ המסגרת מקבלת את גובה התמונה ואז אין מה למתוח ואין מה לחתוך. */
.pf-cover-pv.pf-fit-fill img { object-fit: fill; }
.pf-cover-pv.pf-fit-none img { object-fit: none; background: rgba(6, 20, 42, 0.6); }
.pf-cover-pv.imgf-gold   { border: 3px solid var(--c-gold-deep); }
.pf-cover-pv.imgf-wood   { border: 4px solid #5f3c1a; }
.pf-cover-pv.imgf-white  { border: 4px solid #fff; }
.pf-cover-pv.imgf-dark   { border: 3px solid #1a2540; }
.pf-cover-pv.imgf-shadow { box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5); }
.pf-cover-pv.is-empty { min-height: 4.5rem; display: grid; place-items: center; }
.pf-cover-pv.is-empty::after { content: 'אין תמונה'; font-size: 0.78rem; color: rgba(255, 246, 230, 0.6); }
.pf-cover-pvbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-top: 0.4rem; }
.pf-cover-pvcap { font-size: 0.72rem; color: rgba(255, 246, 230, 0.65); line-height: 1.3; }
.pf-cover-center {
    flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 700;
    padding: 0.22rem 0.55rem; border-radius: 7px; color: #ffe7a3;
    background: rgba(255, 231, 163, 0.12); border: 1px solid rgba(255, 231, 163, 0.35);
}
.pf-cover-center:hover { background: rgba(255, 231, 163, 0.26); }
/* "הרצה" -אותו מראה של "מרכוז", כי שניהם פעולה על התצוגה המקדימה ולא הגדרה
   של הפרויקט. מושבת כשלא נבחרה אנימציה. */
.pf-cover-replay {
    flex: 0 0 auto; cursor: pointer; font: inherit; font-size: 0.72rem; font-weight: 700;
    padding: 0.22rem 0.55rem; border-radius: 7px; color: #ffe7a3;
    background: rgba(255, 231, 163, 0.14); border: 1px solid rgba(255, 231, 163, 0.3);
}
.pf-cover-replay:hover:not(:disabled) { background: rgba(255, 231, 163, 0.26); }
.pf-cover-replay:disabled { opacity: 0.4; cursor: default; }
/* גרירת התמונה בתוך המסגרת: ‎touch-action: none‎ **רק** על התצוגה, אחרת הפאנל
   עצמו לא נגלל באצבע. הסמן מרמז שאפשר לגרור -ורק כשבאמת יש מה לגרור. */
.pf-cover-pv.is-pannable { cursor: grab; touch-action: none; }
.pf-cover-pv.is-pannable.is-panning { cursor: grabbing; }
.pf-cover-pv.is-pannable img { user-select: none; -webkit-user-select: none; -webkit-user-drag: none; }

/* ---- הטקסט על התמונה, בתצוגה המקדימה ----
   **הפריסה עצמה מגיעה מ-‎components.css‎ ולא משוכפלת כאן.** התצוגה נושאת את
   אותה מחלקה ‎pf-ov-*‎ שהאתר שם על ‎.pf-detail-hero‎, ולכן המיקום, הגרדיאנטים
   וצורת הכרטיס הצף הם **אותו קוד** -היא אינה יכולה להתפצל מהתוצאה. מה
   שמוגדר כאן הוא גודל הטיפוגרפיה בלבד: התצוגה רחבה כ-15rem לעומת כרטיס של
   46rem, ובגדלים המקוריים מילה אחת הייתה ממלאת אותה.
   **‎[hidden]‎ מפורש -חובה:** לחלק מהסגנונות יש ‎display: flex‎, והוא גובר על
   תכונת ‎hidden‎ (אותה מלכודת שכבר תועדה כאן על ‎.pf-row-video‎). */
.pf-cover-ovpv[hidden] { display: none; }
.pf-cover-pv { --pf-detail-pad: 0.45rem; }
.pf-cover-ovpv { --pf-ov-pad: 0.5rem; }
.pf-cover-ovpv .pf-detail-title {
    font-size: 0.8rem; margin-bottom: 0.2rem; padding-inline: 0;
    /* כותרת ארוכה בתצוגה צרה בולעת את כל השטח ומסתירה את הסגנון עצמו */
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-cover-ovpv .pf-detail-text {
    font-size: 0.63rem; line-height: 1.35;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pf-cover-ovpv .pf-detail-text[hidden] { display: none; }
.pf-cover-ovpv .pf-detail-actions { margin-top: 0.35rem; gap: 0.25rem; }
.pf-cover-ovpv .pf-detail-link { font-size: 0.6rem; padding: 0.18rem 0.5rem; pointer-events: none; }
/* בלי סרגל גלילה בתצוגה כה קטנה: החיתוך כאן מייצג את הגלילה שבאתר */
.pf-cover-ovpv { overflow: hidden; }

.pf-cover-ctl { display: flex; flex-direction: column; gap: 0.95rem; }
/* התמונה מוסתרת בתיאור: שאר הפקדים מעצבים משהו שלא ייראה. הם נשארים (הבחירה
   נשמרת לכשידליקו חזרה) אבל מעומעמים, כדי שהמצב ייקרא כהחלטה ולא כתקלה. */
/* **‎:not(.pf-gal-fld)‎ -קבוצת "התמונות שבתוך התיאור" אינה תלויה במתג הזה.**
   המתג מכבה את התמונה **הראשית**, ובכל זאת הוא עימעם גם את ההגדרות של
   התמונות שהוטמעו בגוף התיאור - שתי תמונות שונות לגמרי. פרויקט יכול להציג
   את אלה בזמן שהראשית כבויה, וזה בדיוק המקרה הנפוץ; בפועל זה הפך את ההגדרות
   האלה לבלתי-נגישות בדיוק למי שצריך אותן. */
.pf-row-cover.is-cover-off .pf-cover-fld:not(.pf-gal-fld),
.pf-row-cover.is-cover-off .pf-cover-shadow,
.pf-row-cover.is-cover-off .pf-cover-side { opacity: 0.4; pointer-events: none; }
/* ב"מסך מלא" הגבול הוא קצה התצוגה, ולכן מסגרת/עובי/עיגול/צל אינם מצוירים.
   מאותה סיבה מעומעם שם גם "הטקסט על התמונה": במצב הזה כבר יש יריעה וכפתור
   "מידע נוסף", ושני המנגנונים מזיזים את אותו ‎.pf-detail-body‎. */
.pf-row-cover.is-cover-screen .pf-cover-framed,
.pf-row-cover.is-cover-screen .pf-cover-ovfld,
.pf-row-cover.is-cover-screen .pf-cover-shadow { opacity: 0.4; pointer-events: none; }
/* שני הפקדים המשניים מכווננים overlay שאינו קיים -מעומעמים עד שנבחר סגנון.
   מעומעמים ולא מוסתרים, כדי שיישאר ברור מה עוד יש כאן וכיצד להגיע אליו. */
.pf-row-cover.is-ov-off .pf-cover-ovsub { opacity: 0.4; pointer-events: none; }
.pf-cover-show { align-self: flex-start; }
.pf-cover-fld { display: flex; flex-direction: column; gap: 0.3rem; }
.pf-cover-lbl { font-size: 0.8rem; font-weight: 700; color: #ffe7a3; }
.pf-cover-lbl i { display: block; font-style: normal; font-weight: 500; font-size: 0.72rem; color: rgba(255, 246, 230, 0.6); margin-top: 0.1rem; }
/* הכפתורים קומפקטיים, עם רווח ביניהם (הם אפשרויות נפרדות, לא רצף אחד),
   ונשברים כקבוצה ולא כל אחד לשורה משלו */
.pf-row-cover .pf-vseg { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.pf-row-cover .pf-vseg-b {
    flex: 0 1 auto; padding: 0.32rem 0.7rem; font-size: 0.78rem; border-radius: 8px;
}
/* ה-‎gap‎ של גוף הסעיף כבר מפריד ביניהם; ה-‎margin‎ הזה נשאר רק לשדות
   שיושבים בהקשר שאינו flex. */
.pf-cover-fld + .pf-cover-fld { margin-top: 0.15rem; }
.pf-cover-radrow { display: flex; align-items: center; gap: 0.6rem; }
.pf-cover-radrow .admin-range { flex: 1 1 auto; min-width: 6rem; }
.pf-cover-radv, .pf-cover-bwv { font-size: 0.78rem; color: #ffe7a3; min-width: 3.4rem; text-align: center; white-space: nowrap; }
.pf-cover-shadow { margin-top: 0.1rem; }

.pf-row-video {
    flex-basis: 100%; width: 100%; order: 9;
    /* **מקבץ שקוף ולא קופסה**, בדיוק כמו ‎.pf-row-cover‎: הריפוד והמסגרת
       המקווקוות הזיחו את הסעיף שבתוכו פנימה, והמטבע שלו לא התיישר עם
       ארבעת האחרים. הסעיף עצמו נושא מסגרת ורקע משלו. */
    margin-top: 0.85rem; padding: 0;
    border: 0; border-radius: 0; background: none;
    display: flex; flex-direction: column; gap: 0.6rem;
}
/* ‎display: flex‎ שלמעלה גובר על תכונת ‎hidden‎ (אותה מלכודת שכבר תועדה כאן
   ל-‎.pf-vopts‎), ולכן עורך הווידאו הוצג תמיד במקום להיפתח בלחיצה על 🎬. */
.pf-row-video[hidden] { display: none; }
.pf-vhead { font-size: 0.8rem; font-weight: 700; color: var(--c-gold-light, #ffe7a3); }
.pf-vtype { display: flex; gap: 0.4rem; flex-wrap: wrap; }
/* ה-‎gap‎ של גוף הסעיף מפריד בין הבלוקים; **בתוך** ‎.pf-vsrc‎ הוא לא מגיע,
   ושם יושבים כפתור ההעלאה, שדה הנתיב והשורה "✓ הקובץ הנוכחי" -שלושתם היו
   דבוקים זה לזה. ‎:empty‎ חיוני: כשלא נבחר סוג וידאו הבלוק ריק, ובלעדיו
   ה-‎gap‎ של ההורה עדיין סופר אותו ומשאיר רווח כפול על לא כלום. */
.pf-vsrc { display: flex; flex-direction: column; gap: 0.6rem; }
.pf-vsrc:empty { display: none; }
.pf-vtype-b, .pf-vseg-b {
    cursor: pointer; font: inherit; font-size: 0.82rem;
    padding: 0.35rem 0.7rem; border-radius: 8px;
    border: 1px solid rgba(255, 231, 163, 0.3);
    background: rgba(255, 255, 255, 0.05); color: #eaf2ff;
    transition: background 0.15s, border-color 0.15s;
}
.pf-vtype-b:hover, .pf-vseg-b:hover { background: rgba(255, 231, 163, 0.14); }
.pf-vtype-b.is-on, .pf-vseg-b.is-on { background: rgba(255, 231, 163, 0.22); border-color: var(--c-gold, #ffd15a); color: #fff; font-weight: 700; }
.pf-vsrc { display: flex; flex-direction: column; gap: 0.45rem; }
.pf-vrow { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap; }
.pf-vcur { font-size: 0.76rem; color: #cfe0d3; display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.pf-vcur span { word-break: break-all; }
.pf-vclear { cursor: pointer; font: inherit; font-size: 0.72rem; padding: 0.1rem 0.55rem; border-radius: 6px; border: 1px solid rgba(220, 90, 90, 0.5); background: rgba(220, 90, 90, 0.18); color: #ffd7d7; }
.pf-vclear:hover { background: rgba(220, 90, 90, 0.35); }
.pf-vopts-title { font-size: 0.76rem; color: rgba(255, 246, 230, 0.7); }
.pf-vopts { display: flex; gap: 0.7rem; flex-wrap: wrap; }
.pf-vopt { display: flex; flex-direction: column; gap: 0.28rem; font-size: 0.74rem; color: #eaf2ff; flex: 1 1 9rem; }
.pf-vseg { display: flex; gap: 0.25rem; }
.pf-vseg-b { padding: 0.28rem 0.4rem; font-size: 0.72rem; flex: 1 1 0; text-align: center; }

@media (max-width: 640px) {
    .pf-row { flex-wrap: wrap; }
    /* בעמודה הצרה אין מקום לתוויות -נשארים אייקונים, וה-title מסביר */
    .pf-row-actions { gap: 0.35rem; }
    .pf-act-grp { gap: 0.25rem; }
    .pf-act-grp + .pf-act-grp { padding-inline-start: 0.35rem; }
    .pf-btn-label { display: none; }
    .pf-row-btn { min-height: 2.1rem; padding: 0 0.45rem; }
    /* חוק המובייל: כותרת נדבקת גוזלת גובה **קבוע** מאזור העריכה. נמדד באייפון:
       הפאנל 371px, מהם 136px לתפריט הצד -נשארים 231px רוחב, שבהם הכפתורים
       נשברו לארבע שורות: 166px מתוך 449px, כלומר **37% מהמסך תפוסים בסרגל**.
       לכן במובייל הכותרת היא **שתי שורות בלבד**: תמונה + שם הפרויקט למעלה,
       והכפתורים מתחת ב**שורה אחת נגללת אופקית** במקום להישבר לארבע. */
    .pf-row-head { gap: 0.35rem 0.5rem; padding: 0.4rem 0.6rem; margin: -0.6rem -0.6rem 0; }
    .pf-row-head .pf-row-thumb { order: 1; flex: 0 0 auto; width: 3.1rem; height: 2.1rem; }
    .pf-row-head .pf-row-thumb-edit { display: none; }   /* אין מקום, והלחיצה עדיין עובדת */
    .pf-row-name { order: 2; flex: 1 1 4rem; font-size: 0.95rem; }
    .pf-row-actions {
        order: 3; flex: 1 1 100%; flex-wrap: nowrap;
        overflow-x: auto; overflow-y: hidden;
        /* חוק הפרויקט: אין סרגל גלילה "עירום" */
        scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.4) transparent;
    }
    .pf-row-actions::-webkit-scrollbar { height: 5px; }
    .pf-row-actions::-webkit-scrollbar-track { background: transparent; }
    .pf-row-actions::-webkit-scrollbar-thumb { background: rgba(255, 231, 163, 0.35); border-radius: 999px; }
    .pf-act-grp { flex-wrap: nowrap; }
    .pf-row-btn { flex: 0 0 auto; }
    .pf-row-btn svg { width: 0.88rem; height: 0.88rem; }
    /* בחלון המוגדל יש את כל רוחב המסך -שם הסרגל חוזר להישבר לשורות כרגיל */
    .pf-row.is-zoomed .pf-row-actions { flex: 1 1 auto; flex-wrap: wrap; overflow: visible; }
    .pf-row.is-zoomed .pf-btn-label { display: inline; }   /* בחלון המוגדל יש מקום */
    /* חוק המובייל: הסרגל נשבר לשורות ולא נחתך. המפרידים יורדים -בעמודה צרה הם
       גוזלים מקום מכפתור שלם- וכפתורי בטל/בצע-שוב מצטמצמים לאייקון (ה-title נשאר). */
    .pf-rte .wysiwyg-toolbar { gap: 0.15rem; padding: 0.3rem; }
    .pf-rte .wysi-sep { display: none; }
    .pf-rte .wysi-wide span:last-child { display: none; }
    .pf-rte-ed { height: 8rem; }
    .pf-zoom-overlay { padding: 0; }
    .pf-zoom-win { width: 100%; max-height: 100vh; height: 100%; border-radius: 0; border: 0; }
    .pf-row.is-zoomed .pf-rte-ed { height: 38vh; }
    .pf-row.is-zoomed .pf-row-thumb { width: 6.2rem; height: 3.9rem; }
}
@media (min-width: 641px) and (max-width: 1024px) {
    .pf-zoom-win { width: min(46rem, 100%); }
}

/* הנחיית תצוגה מקדימה חיה (על הדף עצמו) */
.pf-preview-note {
    display: flex; align-items: center; justify-content: space-between; gap: 0.7rem; flex-wrap: wrap;
    margin-bottom: 0.9rem; padding: 0.7rem 0.9rem;
    border-radius: 12px; border: 1.5px solid rgba(255, 231, 163, 0.3);
    background: rgba(255, 231, 163, 0.08);
    font-size: 0.85rem; font-weight: 600; color: #eaf3ff;
}

/* מתג הפעלה ראשי */
.pf-master-switch { margin-bottom: 0.9rem; }
/* מצב הדגמה יושב מתחת למתג הראשי, עם רווח שמפריד ביניהם -שני מתגים צמודים
   נקראים כרשימה אחת, וכאן מדובר בשתי החלטות נפרדות. */
.pf-demo-switch { margin-top: 0.2rem; }
.pf-demo-hint { margin: 0.35rem 0 1.1rem; }
/* בורר מכשיר לגאומטריה (מחשב/מובייל) */
/* ‎display‎ מפורש גובר על ‎hidden‎ -בורר המכשיר הוסר, ובלי זה הוא היה נשאר */
.pf-geo-dev[hidden] { display: none; }
.pf-geo-dev { display: inline-flex; flex-wrap: wrap; max-width: 100%; margin-bottom: 0.8rem; border-radius: 10px; overflow: hidden; border: 1.5px solid rgba(255, 231, 163, 0.3); }
/* התווית לא נחתכת לעולם, בשום רוחב פאנל:
   - ‎min-width: fit-content‎ -רצפה ברוחב הטקסט עצמו. בלעדיה הכפתור התכווץ מתחת
     לתווית, והמיכל (‎overflow: hidden‎) גזם אותה באמצע המילה ("מובייל").
   - ‎flex-wrap‎ על המיכל -כשבאמת אין מקום לשניהם בשורה הם יורדים זה מתחת לזה,
     במקום שאחד מהם ייחתך.
   - ‎display: flex‎ + ‎justify-content: center‎ -האייקון והטקסט ממורכזים בכפתור. */
.pf-geo-dev-btn, .pf-at-dev-btn, .pf-opt-dev-btn {
    flex: 1 1 auto; min-width: fit-content;
    display: flex; align-items: center; justify-content: center; gap: 0.3rem;
    white-space: nowrap; padding: 0.4rem 1rem; cursor: pointer;
    background: transparent; color: #cfe8ff; border: 0;
    font-family: inherit; font-weight: 700; font-size: 0.85rem;
    transition: background 0.15s, color 0.15s;
}
.pf-geo-dev-btn:hover, .pf-at-dev-btn:hover, .pf-opt-dev-btn:hover { background: rgba(255, 231, 163, 0.12); }
.pf-geo-dev-btn.is-on, .pf-at-dev-btn.is-on, .pf-opt-dev-btn.is-on { background: rgba(255, 209, 90, 0.25); color: #fff; }

/* בפאנל צר הבורר נפרס על מלוא הרוחב וחולק שווה בשווה -כך התוויות נשארות
   שלמות במקום להידחס עד לחיתוך. */
@media (max-width: 640px) {
    .pf-geo-dev { display: flex; width: 100%; }
    .pf-geo-dev[hidden] { display: none; }
    /* ‎min-width‎ נשאר ‎fit-content‎ (מהכלל הראשי) -כאן רק מצמצמים ריפוד וגופן כדי
       שהשניים ייכנסו בשורה אחת; אם עדיין לא, ה-‎flex-wrap‎ מוריד אותם לשתי שורות. */
    .pf-geo-dev-btn, .pf-at-dev-btn, .pf-opt-dev-btn { padding: 0.45rem 0.5rem; font-size: 0.8rem; }
}

/* גריד מיקום וגודל */
.pf-geo-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); gap: 0.7rem 1rem; }
.pf-geo-lock { margin-top: 0.7rem; }
.pf-geo { display: flex; flex-direction: column; gap: 0.3rem; }
.pf-geo > span { font-size: 0.8rem; font-weight: 700; color: #cfe8ff; }
.pf-geo > span b { color: var(--c-gold-light, #ffe7a3); }

/* כותרת המשנה של "התמונות שבתוך התיאור" בפאנל הפרויקט. היא מפרידה בין שתי
   קבוצות פקדים שנראות זהות ושייכות לשתי תמונות שונות -בלעדיה אי אפשר לדעת
   איזה "התאמה" שייך לאיזו תמונה. */
.pf-cover-head.pf-gal-head {
    margin-top: 1.1rem; padding-top: 0.9rem;
    border-top: 1px dashed rgba(255, 231, 163, 0.28);
}

/* ---- מסך מלא לחלון עריכה ----
   ‎!important‎ בכוונה: ‎left/top/width/height‎ נכתבים כ-inline בכל גרירה ושינוי
   גודל, ו-inline מנצח מחלקה רגילה. ה-JS אמנם מנקה אותם בכניסה, וזו רשת ביטחון
   שמכסה גם כתיבה שקרתה תוך כדי -אותה מלכודת שכבר תועדה כאן על הצמדת הפאנל. */
.pf-zoom-win.is-max {
    /* **‎position: fixed‎ ולא ‎relative‎.** החלון הוא פריט flex בתוך שכבת-על
       מרופדת, ולכן ‎100vw‎ לבדו נחסם ע"י תיבת התוכן של ההורה - נמדד 1468px
       במסך של 1500, כלומר מסגרת של 16px בכל צד שנקראת כתקלה ולא כמסך מלא. */
    position: fixed !important;
    left: 0 !important; top: 0 !important;
    width: 100vw !important; height: 100dvh !important;
    max-width: none !important; max-height: none !important;
    border-radius: 0;
    transform: none !important;
}
/* בפינות ישרות אין מה לגרור, והידיות רק חוטפות לחיצות בקצה המסך */
.pf-zoom-win.is-max .pf-win-rs { display: none; }
/* **אותה גאומטריה בדיוק של הסגירה והמזעור שלצידו.** הוא נולד עם עיצוב
   משלו (ריבוע כהה) ונקרא כאייקון זר שנדחף בין שני כפתורי חלון -
   שלושה כפתורים בשורה אחת חייבים להיראות כמשפחה. */
.pf-zoom-max {
    cursor: pointer; display: grid; place-items: center;
    width: 1.9rem; height: 1.9rem; padding: 0; border-radius: 50%;
    color: #fff6e6; background: rgba(255, 231, 163, 0.16);
    border: 1px solid rgba(255, 231, 163, 0.45);
    transition: background 0.14s, transform 0.12s;
}
.pf-zoom-max svg { width: 0.85rem; height: 0.85rem; }
.pf-zoom-max:hover { background: rgba(255, 231, 163, 0.32); transform: scale(1.06); }
.pf-zoom-max:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }
/* במצב מסך מלא הכפתור מסומן -הוא גם החיווי וגם הדרך לצאת */
.pf-zoom-max.is-on { background: rgba(255, 231, 163, 0.42); border-color: var(--c-gold, #ffd15a); }
@media (pointer: coarse) { .pf-zoom-max { width: 2.3rem; height: 2.3rem; } }

/* אריח בספריית המדיה הוא כפתור הגדלה, ולכן הוא צריך להיראות לחיץ ולא לרשת
   את מראה הכפתור של הדפדפן. */
.media-item > .media-thumb {
    display: block; width: 100%;
    border: 0; padding: 0; cursor: zoom-in;
    background-color: transparent; font: inherit; color: inherit;
}
.media-item > .media-thumb:focus-visible { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 2px; }

/* מתג "הצגת התמונות שבתיאור" כבוי -הפקדים שמתחתיו נשארים ומעומעמים,
   בדיוק כמו בתמונה הראשית. הם **לא** מושפעים ממתג התמונה הראשית (ראה
   ‎:not(.pf-gal-fld)‎ למעלה) -אלה שתי תמונות שונות. */
.pf-row-cover.is-gal-off .pf-gal-fld { opacity: 0.4; pointer-events: none; }

/* כותרת קבוצת הגדרות התמונה בחלון עריכת הפרויקט. היא החליפה את הכפתור
   שפתח את הפאנל: ההגדרות מוצגות תמיד, ולכן צריך שם שמסביר מה הקבוצה הזאת
   ומפריד אותה מהתיאור שמעליה ומעורך הווידאו שמתחתיה. */
.pf-cover-title {
    font-weight: 800; font-size: 0.95rem;
    color: var(--c-gold-light, #ffe7a3);
    /* הפערים הורחבו (בקשת המשתמש: "צמוד מדי"). נמדד לפני: 10px בין
       כותרת-העל לסעיף הראשון ו-14px בין שני סעיפי התמונה, מול ~20 בשאר. */
    margin: 0 0 1.05rem; padding-top: 1.35rem;
    border-top: 1px dashed rgba(255, 231, 163, 0.28);
}
/* הכותרת הראשונה בשורה -אין מה להפריד ממנו מלמעלה, ‎.pf-row-main‎ מתחיל כאן */
.pf-content-title { padding-top: 0; border-top: 0; }

/* ---- המחיקה בקצה השני של סרגל השורה ----
   ‎auto‎ דוחף אותה לקצה הרחוק (שמאל ב-RTL), הרחק מ"שמירה" ומ"איפוס". המרחק
   הוא ההגנה: זו הפעולה היחידה בשורה שאי אפשר לבטל.
   ‎border-inline-start‎ מבוטל כאן -הרווח כבר מפריד, וקו נוסף בקצה נקרא כגבול
   של משהו ולא כהפרדה בין קבוצות. */
.pf-act-grp.pf-act-danger {
    margin-inline-start: auto;
    padding-inline-start: 0;
    border-inline-start: 0;
}
/* שורה שנשברת לשתיים: בלי זה המחיקה נדחפת לקצה של השורה השנייה ומרחפת לבדה */
@media (max-width: 640px) {
    .pf-act-grp.pf-act-danger { margin-inline-start: 0; }
}

/* ============================================================
   קרדיטים ורישיונות (DEBUG ← קרדיטים ורישיונות)
   ============================================================ */

/* טבלה ולא רשימת כרטיסים: ההשוואה כאן היא **בין** רכיבים ("מה מותר במה"),
   וטור אחיד הוא מה שמאפשר לסרוק אותה בעין. */
.admin-lic-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.8rem;
    font-size: 0.86rem;
}
.admin-lic-table th,
.admin-lic-table td {
    text-align: start;
    padding: 0.6rem 0.7rem;
    border-bottom: 1px solid rgba(255, 231, 163, 0.16);
    vertical-align: top;
}
.admin-lic-table th {
    font-size: 0.74rem;
    letter-spacing: 0.03em;
    opacity: 0.72;
    font-weight: 600;
    border-bottom-color: rgba(255, 231, 163, 0.3);
}
.admin-lic-table tbody tr:last-child td { border-bottom: 0; }

/* שורה שדורשת תשומת לב מסומנת בפס בהתחלה ולא ברקע אדום: זו הערה, לא שגיאה. */
.admin-lic-table tr.is-warn td:first-child { box-shadow: inset 3px 0 0 0 #f0b03a; }
.admin-lic-table tr.is-warn { background: rgba(240, 176, 58, 0.07); }

.admin-lic-group {
    display: block;
    font-size: 0.68rem;
    opacity: 0.62;
    letter-spacing: 0.03em;
}
.admin-lic-name { display: block; font-weight: 700; color: var(--c-gold-light); }
.admin-lic-ok { text-align: center; font-size: 1rem; }

/* חוק המובייל: ארבעה טורים ב-390px נותנים טור הערות של כמה תווים, ולכן
   מתחת ל-720px כל שורה נערמת לכרטיס. גלילה אופקית נשקלה ונדחתה -טקסט
   הסבר שצריך לגרור אותו הצידה כדי לקרוא אינו נקרא. */
@media (max-width: 720px) {
    .admin-lic-table,
    .admin-lic-table tbody,
    .admin-lic-table tr,
    .admin-lic-table td { display: block; width: 100%; }
    .admin-lic-table thead { display: none; }
    .admin-lic-table tr {
        border: 1px solid rgba(255, 231, 163, 0.22);
        border-radius: 12px;
        padding: 0.7rem 0.8rem;
        margin-bottom: 0.7rem;
        background: rgba(13, 62, 120, 0.4);
        position: relative;
    }
    .admin-lic-table td { border-bottom: 0; padding: 0.15rem 0; }
    /* הסימון עובר לפינה: ‎box-shadow‎ על התא נחתך בפינות המעוגלות של הכרטיס. */
    .admin-lic-table tr.is-warn td:first-child { box-shadow: none; }
    .admin-lic-table tr.is-warn { border-color: rgba(240, 176, 58, 0.55); }
    /* סימן ה-✅/⚠️ עולה לפינה כדי לא לתפוס שורה משלו */
    .admin-lic-table .admin-lic-ok {
        position: absolute;
        inset-block-start: 0.6rem;
        inset-inline-end: 0.7rem;
        width: auto;
    }
    .admin-lic-table td:nth-child(2) { font-size: 0.76rem; opacity: 0.75; }
    /* מקום לסימן שבפינה, כדי שהשם לא יזחל מתחתיו */
    .admin-lic-table td:first-child { padding-inline-end: 1.8rem; }
}

/* ---- דיאלוג גלריית העבודות ----
   הדיאלוג יורש ‎.admin-dialog‎ הבהיר (קלף), ולכן הצבעים כאן כהים על בהיר -
   העתקה מהפאנל הכהה נותנת טקסט כמעט-לבן על רקע כמעט-לבן. */
/* **הסרגל נדבק לראש הדיאלוג.** הוא מחזיק את פעולות האישור, והדיאלוג נגלל -
   בלי זה הן גוללות מהמסך בדיוק כשעוברים על רשימה ארוכה, וזו כל הסיבה
   שהוכפלו לכאן מלכתחילה. אותו דפוס של כותרת שורת הפרויקט.
   ‎top: -0.6rem‎ מקזז את ריפוד גוף הדיאלוג, אחרת נשארת רצועה שדרכה מציץ
   מה שגולל מתחת -אותה מלכודת שכבר תועדה שם. */
.wg-bar {
    display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap;
    margin-bottom: 0.7rem;
    /* הקיזוז המלא של ריפוד אזור הגלילה -ראה ‎--scroll-pad‎ למעלה.
       ה-‎margin‎ השלילי + ה-‎padding‎ מותחים את הרקע עד דפנות הדיאלוג, אחרת
       התוכן שגולל מציץ בצדדים. */
    position: sticky; top: calc(-1 * var(--scroll-pad, 0px)); z-index: 3;
    margin-inline: calc(-1 * var(--scroll-pad, 0px));
    padding: var(--scroll-pad, 0.6rem);
    background: var(--c-parch, #f6ead0);
}
.wg-count { font-size: 0.82rem; color: #6b5a3c; }
/* דוחף את פעולות האישור לקצה השני: "מה שמוסיפים" מכאן, "מה שמסיימים" משם */
.wg-bar-sep { flex: 1 1 auto; }
/* במסך צר אין מקום לשתי קבוצות בשורה אחת -המפריד יורד והכול נערם יפה */
@media (max-width: 620px) {
    .wg-bar-sep { flex-basis: 100%; height: 0; }
}
/* קבוצת הגדרות ("התמונות" / "הכיתוב"). שתי קבוצות ולא רשימה אחת ארוכה:
   12 בוררים ברצף אחד נקראים כטופס ולא כשתי החלטות נפרדות. */
.wg-grp {
    margin-bottom: 0.6rem; padding: 0.6rem 0.7rem;
    border: 1px solid rgba(74, 47, 18, 0.22); border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
}
.wg-grp-title { display: block; margin-bottom: 0.45rem; font-size: 0.8rem; font-weight: 800; color: #4a3a1c; }
/* ‎min(11rem, 100%)‎ ולא ‎11rem‎: מסילה עם מינימום קשיח אינה יורדת מתחתיו
   ובדיאלוג צר היא גולשת -אותה מלכודת ‎minmax‎ שכבר תועדה כאן. */
.wg-opts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 0.6rem; margin-bottom: 0; }
.wg-opt { display: flex; flex-direction: column; gap: 0.22rem; }
.wg-opt-lbl { font-size: 0.78rem; font-weight: 700; color: #4a3a1c; }
/* ---- תצוגה מקדימה חיה בדיאלוג ----
   הבמה נושאת את מחלקות ההקשר של היעד (‎pf-detail-text‎ / ‎cms-content‎), ולכן
   הגלריה כאן מצוירת ב**אותם כללים** שיחולו עליה באתר -אין כאן עיצוב שלישי.
   הרקע הוא רק הבמה: כהה כשהיעד הוא כרטיס הפרויקט, קלף כשהוא עמוד. */
.wg-prev-wrap {
    margin-bottom: 0.6rem; padding: 0.6rem 0.7rem;
    border: 1px solid rgba(74, 47, 18, 0.22); border-radius: 12px;
    background: rgba(255, 255, 255, 0.4);
}
.wg-prev {
    max-height: 17rem; overflow-y: auto; overflow-x: hidden;
    padding: 0.5rem; border-radius: 10px;
}
.wg-prev.is-dark  { background: linear-gradient(180deg, #123a6b, #0b2244); }
.wg-prev.is-light { background: #fdf6e6; border: 1px solid rgba(74, 47, 18, 0.18); }
/* בבמה הצרה הגלריה היא **התוכן** ולא בלוק בתוך מאמר */
.wg-prev .works-gal { margin: 0; max-width: none; }
.wg-prev-empty { margin: 0; padding: 1rem; text-align: center; font-size: 0.85rem; opacity: 0.75; }
.wg-prev.is-dark .wg-prev-empty { color: #cfe0f2; }

/* ---- אישור הסרת תמונה מהגלריה ----
   מעל דיאלוג הגלריה: הוא מוקדם ממנו במסמך, ושניהם ‎.admin-dialog-overlay‎
   ב-220 -בלי זה הגלריה מצוירת מעל האישור (אותה מלכודת של ‎#mediaDelOverlay‎). */
.wg-del-overlay { z-index: 240; }

/* ---- שכבת ההעלאה ----
   **מעל כל דיאלוגי הפאנל (220-240) ומעל ‎ui-pick-list‎ (250)**: היא נפתחת
   מתוכם -מבורר התמונות, מדיאלוג הגלריה, ממנהל המדיה -וחייבת לכסות את מי
   שפתח אותה. היא גם נעילת הכפתורים: שכבה על כל המסך מונעת כל לחיצה, ולכן
   אין כאן רשימה של פקדים לנטרל ולהחזיר. */
.admin-up-overlay { z-index: 260; }
.up-stage { display: grid; place-items: center; padding: 0.5rem 0 0.9rem; }
.up-art { width: 5.5rem; height: 5.5rem; overflow: visible; }
.up-art-box { fill: rgba(168, 130, 63, 0.14); stroke: #b98f3d; stroke-width: 2.2; }
.up-art-sun { fill: #dda94b; }
.up-art-hill { fill: #8d6c3c; opacity: 0.65; }
.up-art-arrow {
    fill: none; stroke: var(--c-gold-deep, #a9760f);
    stroke-width: 3; stroke-linecap: round; stroke-linejoin: round;
    animation: up-fly 1.5s ease-in-out infinite;
}
/* החץ עולה ודוהה ומתחיל מחדש -תנועה אחת שאומרת "נשלח", בלי סחרור גנרי */
@keyframes up-fly {
    0%   { transform: translateY(5px);  opacity: 0; }
    35%  { transform: translateY(0);    opacity: 1; }
    75%  { transform: translateY(-5px); opacity: 1; }
    100% { transform: translateY(-9px); opacity: 0; }
}
.up-name {
    margin: 0 0 0.5rem; text-align: center;
    font-size: 0.86rem; color: #6b5a3c;
    /* שם ארוך חייב להיחתך ולא לשבור את רוחב הדיאלוג */
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    direction: ltr;
}
.up-bar {
    height: 0.55rem; border-radius: 999px; overflow: hidden;
    background: rgba(74, 47, 18, 0.16);
    border: 1px solid rgba(74, 47, 18, 0.22);
}
.up-bar-fill {
    display: block; height: 100%; width: 0;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--c-gold, #ffd15a), var(--c-gold-deep, #a9760f));
    transition: width 0.3s ease;
}
.up-count { margin: 0.5rem 0 0; text-align: center; font-size: 0.85rem; color: #4a3a1c; }
/* ---- שגיאות ----
   שם הקובץ **וגם** הסיבה: "ההעלאה נכשלה" לבדו אינו אומר אם הקובץ גדול
   מדי, פגום או שהרשת נפלה, ואז אין מה לתקן. */
.up-errs {
    margin-top: 0.9rem; padding: 0.7rem 0.8rem;
    border-radius: 10px;
    background: rgba(190, 60, 60, 0.09);
    border: 1px solid rgba(170, 50, 50, 0.35);
}
.up-errs-title { margin: 0 0 0.5rem; font-size: 0.88rem; font-weight: 700; color: #8d2b2b; }
/* **בלי גלילה משלה, וזה נמדד.** היה כאן ‎max-height‎ + ‎overflow-y: auto‎,
   ונמדד שהסרגל מוצג ו**תופס 11px** גם כשאין מה לגלול (‎scrollHeight‎ 35
   מול ‎clientHeight‎ 35, אבל ‎offsetWidth‎ 261 מול ‎clientWidth‎ 250) -מה
   שנראה כתו זר לפני שם הקובץ היה בעצם הסרגל הזה.
   מי שמטפל בגלילה הוא ה**דיאלוג** (‎admin-dialog-scroll‎), בדיוק כמו בכל
   דיאלוג אחר בפאנל -שם הסרגל כבר מעוצב, ואין כאן מנגנון גלילה שני. */
.up-errs-list {
    margin: 0; padding: 0; list-style: none;
    display: flex; flex-direction: column; gap: 0.4rem;
}
.up-errs-list li { display: flex; flex-direction: column; font-size: 0.8rem; line-height: 1.35; }
/* **‎unicode-bidi: isolate‎ ולא ‎direction‎ לבדו.** שם קובץ לועזי בתוך פסקה
   עברית מתפרק בלי בידוד: נמדד שהוא הוצג עם תו זר בתחילת השורה. אותה מלכודת
   שכבר תועדה כאן על "100% 85%" בבורר התמונות. */
.up-errs-list b {
    color: #33240f;
    direction: ltr; unicode-bidi: isolate;
    text-align: start; word-break: break-all;
}
.up-errs-list span { color: #8d2b2b; }
/* בזמן ההעלאה אין כפתורים כלל; הם מופיעים רק כשיש מה לקרוא.
   **‎[hidden]‎ מפורש, כי ‎.admin-dialog-actions‎ הוא ‎display: flex‎** -וזה
   גובר על ‎hidden‎ שהוא רק ‎display: block‎ מגיליון ברירת המחדל. נמדד: המאפיין
   היה ‎true‎ בעוד שכפתור "סגירה" נראה על המסך באמצע ההעלאה. אותה מלכודת
   שכבר תועדה כאן על ‎.pf-row-video‎ ועל שורת הפעולות בכרטיס הפרויקט. */
.up-foot { margin-top: 0.9rem; }
.up-foot[hidden] { display: none; }
/* משסיימנו, האנימציה נעצרת -חץ שממשיך לעוף מעל הודעת שגיאה קורא כאילו
   ההעלאה עדיין רצה */
.admin-up-overlay.is-done .up-art-arrow { animation: none; opacity: 0.35; }
.admin-up-overlay.is-done .up-bar { display: none; }
.admin-up-overlay.is-done .up-count,
.admin-up-overlay.is-done .up-name { display: none; }
@media (prefers-reduced-motion: reduce) {
    .up-art-arrow { animation: none; }
    .up-bar-fill { transition: none; }
}
.wg-del-what { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 0.9rem; }
.wg-del-what img {
    width: 5rem; height: 3.4rem; object-fit: cover; flex: 0 0 auto;
    border-radius: 10px; border: 1px solid rgba(74, 47, 18, 0.3);
}
.wg-del-what b { display: block; color: #3a2a15; }
.wg-del-what small { display: block; margin-top: 0.15rem; font-size: 0.78rem; color: #6b5a3c; }

/* ---- כוונון פר-תמונה (התאמה / זום / מיקום) ----
   הממוזערת היא גם התצוגה המקדימה של הכוונון וגם שטח הגרירה: "מיקום בתוך
   המסגרת" הוא דבר שמבינים רק כשגוררים את מה שרואים. */
.wg-tune { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-top: 0.35rem; }
.wg-tune-fld { display: flex; align-items: center; gap: 0.35rem; font-size: 0.75rem; color: #4a3a1c; }
.wg-tune-fld > span { white-space: nowrap; font-weight: 700; }
.wg-tune-fld .ui-pick-light { min-height: 1.9rem; padding: 0.2rem 0.5rem; font-size: 0.8rem; width: auto; min-width: 8rem; }
.wg-tune-zoom input[type="range"] { width: 6.5rem; accent-color: var(--c-gold-deep, #a9760f); cursor: pointer; }
.wg-tune-zoom b { font-variant-numeric: tabular-nums; min-width: 2.6rem; display: inline-block; }
.wg-tune-pos {
    font-size: 0.72rem; font-variant-numeric: tabular-nums;
    color: #6b5a3c; background: rgba(74, 47, 18, 0.08);
    padding: 0.12rem 0.45rem; border-radius: 999px;
}
.wg-tune .admin-ubtn { padding: 0.22rem 0.6rem; font-size: 0.75rem; }
.wg-list { display: flex; flex-direction: column; gap: 0.5rem; margin: 0.6rem 0 0.9rem; }
.wg-empty { padding: 1.2rem; text-align: center; color: #6b5a3c; border: 1px dashed rgba(74, 47, 18, 0.35); border-radius: 12px; }
.wg-row {
    display: flex; align-items: center; gap: 0.6rem;
    padding: 0.45rem; border-radius: 12px;
    background: rgba(255, 255, 255, 0.55);
    border: 1px solid rgba(74, 47, 18, 0.22);
}
.wg-row.is-dragging { opacity: 0.85; box-shadow: 0 10px 24px -10px rgba(0, 0, 0, 0.5); }
/* ידית הגרירה + "לראש" בטור אחד: שניהם קובעים סדר, ולכן הם קבוצה אחת */
.wg-ord { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; flex: 0 0 auto; }
/* ‎touch-action‎ על הידית **בלבד** -הדיאלוג עצמו נגלל באצבע */
.wg-grip { touch-action: none; cursor: grab; background: none; border: 0; font-size: 1.05rem; color: #7a6642; padding: 0 0.15rem; }
.wg-grip:active { cursor: grabbing; }
.wg-top {
    background: none; border: 0; cursor: pointer;
    font-size: 0.95rem; line-height: 1; color: #7a6642;
    padding: 0.1rem 0.15rem; border-radius: 6px;
}
.wg-top:hover:not(:disabled) { color: var(--c-wood-deep, #4a2f12); background: rgba(74, 47, 18, 0.1); }
/* מושבת ולא מוסתר: כך נשאר ברור שהפעולה קיימת, ומיקום הידיות אינו קופץ
   בין השורה הראשונה לשאר */
.wg-top:disabled { opacity: 0.25; cursor: default; }
/* גדולה יותר מבעבר: היא שטח הגרירה של המיקום, ובריבוע של 67px אי אפשר
   לכוון כלום. הסמן הוא ‎grab‎ -כאן גוררים, ולחיצה מחליפה תמונה. */
.wg-thumb { width: 5.6rem; height: 3.8rem; padding: 0; border-radius: 8px; overflow: hidden; border: 1px solid rgba(74, 47, 18, 0.3); background: #e9dcc0; cursor: grab; flex: 0 0 auto; }
/* ‎touch-action: none‎ **רק על התמונה**: הדיאלוג עצמו חייב להישאר נגלל באצבע */
.wg-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; touch-action: none; }
.wg-row.is-panning .wg-thumb { cursor: grabbing; outline: 2px solid var(--c-gold-deep, #a9760f); outline-offset: 1px; }
/* הכוונון מוסיף שורה שנייה -היישור עובר לראש, אחרת התמונה "צפה" באמצע */
.wg-row { align-items: flex-start; }
.wg-fields { min-width: 0; }
.wg-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; flex: 1 1 auto; min-width: 0; }
/* הקישור תופס שורה שלמה: כתובת ארוכה בשדה צר אינה קריאה ואי אפשר לוודא אותה */
/* הקישור **ושדה מקור הווידאו** תופסים שורה שלמה: שניהם כתובת, וכתובת
   ארוכה בחצי שורה אינה קריאה ואי אפשר לוודא אותה. בלי זה שדה המקור נשאר
   תא בודד ברשת ה-‎1fr 1fr‎ ונמתח לגובה שתי שורות (נמדד). */
.wg-fields .js-wg-link,
.wg-fields .js-wg-vsrc { grid-column: 1 / -1; }
/* ‎hidden‎ על פריט grid אינו מספיק -‎display‎ של הרשת גובר עליו */
.wg-fields [hidden] { display: none; }
.wg-in {
    width: 100%; min-width: 0; padding: 0.32rem 0.5rem; border-radius: 8px;
    font-family: inherit; font-size: 0.82rem; color: #33240f;
    background: #fffdf6; border: 1px solid rgba(74, 47, 18, 0.32);
}
.wg-in:focus { outline: 2px solid var(--c-gold, #ffd15a); outline-offset: 1px; }
/* ---- כפתור הסרת התמונה ----
   קודם זה היה התו ‎✕‎ עירום בלי רקע ובלי גבול: הוא לא נקרא ככפתור אלא כסימן
   שגיאה שנשפך על הקלף, ויעד הנגיעה שלו היה הטקסט בלבד. היום הוא כפתור עגול
   בגוון אדום עדין - **מהוסס במנוחה ומלא ב-hover**, כי זו הפעולה היחידה בשורה
   שאין ממנה דרך חזרה, והיא לא צריכה למשוך את העין יותר מהמתג שלצידה. */
.wg-del {
    width: 1.85rem; height: 1.85rem; flex: 0 0 auto;
    display: grid; place-items: center; cursor: pointer; padding: 0;
    border-radius: 50%; color: #a3352c;
    background: rgba(163, 53, 44, 0.08);
    border: 1px solid rgba(163, 53, 44, 0.32);
    transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.wg-del svg { width: 58%; height: 58%; }
.wg-del:hover { background: #c0392b; border-color: #c0392b; color: #fff; transform: scale(1.06); }
.wg-del:active { transform: scale(0.94); }
.wg-del:focus-visible { outline: 2px solid var(--c-gold-deep, #a9760f); outline-offset: 2px; }
/* חוק המובייל: במגע אין hover שיסגיר את הכפתור, והיעד חייב להיות אמיתי -
   ‎2.75rem‎ הוא אותו מינימום שכבר נקבע כאן לתוויות הפקדים בפאנל */
@media (pointer: coarse) { .wg-del { width: 2.75rem; height: 2.75rem; } }
/* ---- מתג ההצגה + ✕, בטור אחד ----
   שניהם פעולה על **הפריט כולו** ולא על שדה שבתוכו, ולכן הם קבוצה אחת:
   "להסתיר זמנית" ו"להסיר לתמיד" הם שני צדדים של אותה החלטה. */
.wg-acts { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; flex: 0 0 auto; }
/* המתג עוצב לפאנל הכהה: המסילה הכהה קריאה גם על הקלף, אבל גבול הזהב
   נבלע בו. אותו כלל שכבר נקנה כאן יותר מפעם אחת -דיאלוג הוא קלף בהיר. */
.wg-on .admin-switch-track { border-color: rgba(74, 47, 18, 0.32); }
.wg-on:hover .admin-switch-track { border-color: rgba(74, 47, 18, 0.55); }
/* ---- שורה מכובה ----
   **בלי ‎opacity‎ על השורה**: ילד אינו יכול להיות אטום יותר מהורהו, והמתג
   עצמו הוא בדיוק מה שצריך להישאר בהיר -הוא הדרך היחידה להדליק בחזרה.
   אותו שיקול שבגללו מד השקיפות של הפאנל אינו ‎opacity‎ על הפאנל.
   השדות נשארים פתוחים לעריכה: זה מתג תצוגה ולא מחיקה. */
.wg-row.is-off { background: rgba(74, 47, 18, 0.07); border-style: dashed; }
.wg-row.is-off .wg-thumb { filter: grayscale(1); opacity: 0.5; }
.wg-row.is-off .wg-fields { opacity: 0.55; }
@media (max-width: 640px) {
    .wg-fields { grid-template-columns: 1fr; }
    /* ---- שתי שורות בטלפון, ולא ארבע עמודות ----
       **נמדד ב-390px:** השורה 312px, ומתוכה הידית 17, הממוזערת 54 והפקדים
       38 -לשדות נשארו **157px, חצי מהשורה**. הכותרת נדחסה, גלשה מגבול
       העמודה שלה, והמתג נחת עליה (חפיפה של 6x31px שנמדדה). זו אותה מלכודת
       בדיוק שכבר תועדה על תפריט הצד של הפאנל: שתי עמודות צרות בבת אחת,
       ואף כיווץ של אחת מהן אינו פותר את השנייה.
       הפתרון מבני: הפקדים (ידית, ממוזערת, מתג, ✕) בשורה אחת, והשדות
       ברוחב **מלא** מתחתיהם -כך הם מקבלים 312px במקום 157.
       ‎order‎ מפורש ולא הסתמכות על סדר המרקאפ: בלעדיו ‎.wg-acts‎ היה נדחף
       לשורה שלישית משלו, אחרי השדות. */
    .wg-row { flex-wrap: wrap; }
    .wg-ord { flex-direction: row; gap: 0.45rem; order: 0; }
    .wg-thumb { width: 4.8rem; height: 3.3rem; order: 0; }
    .wg-acts { flex-direction: row; gap: 0.6rem; order: 0; margin-inline-start: auto; }
    .wg-fields { flex-basis: 100%; order: 1; }
    /* שורת הכוונון נושמת: בורר, כפתור ומחוון בשורה אחת של 312px נשברו רע */
    .wg-tune { gap: 0.4rem 0.6rem; }
    .wg-tune-zoom { flex: 1 1 100%; }
}

/* ---- סעיף גלריית התמונות בשורת הפרויקט ---- */
.pf-works-admin { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin: 0.5rem 0 0.6rem; }
/* אין כאן תקרה נמוכה יותר: ‎12rem‎ נמדדו 192px מול כרטיס של 220px, כלומר
   שורת כרטיסים אחת -המקרה הנפוץ- נחתכה תמיד והכיתוב נשאר מתחת לקיפול. */
.pf-works-n { font-size: 0.82rem; color: #cfe0f2; }
.pf-works-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.pf-works-open input:disabled ~ .admin-switch-track { opacity: 0.4; }
.pf-works-open:has(input:disabled) { opacity: 0.55; }
/* תצוגה מקדימה של הגלריה בתוך הפאנל -מוקטנת, אחרת שורת הפרויקט מתארכת
   לאורך מסך שלם בכל פרויקט שיש לו גלריה.

   **‎overflow-y: auto‎ ולא ‎hidden‎.** התקרה חתכה את הכרטיס באמצע והכיתוב נשאר
   מחוץ לתיבה -נמדד שהכותרת נחתכה לרוחבה בדיוק בגבול התצוגה, וזה נקרא כ"הטקסט
   לא מוצג". תצוגה מקדימה שמסתירה חצי מהכרטיס אינה מראה את מה שהיא באה להראות. */
.pf-works-prev {
    max-height: 15rem; overflow-y: auto; overflow-x: hidden;
    border-radius: 10px; margin-top: 0.4rem;
}
.pf-works-prev:empty { display: none; }
.pf-works-prev .works-gal { --wg-min: 6rem; --wg-gap: 0.45rem; margin: 0; }
.pf-works-prev .works-cap { font-size: 0.7rem; padding: 0.3rem 0.4rem; }
/* הסעיף יושב היום בתוך ‎.pf-row-cover‎, שכבר מוסתר ברשימה ומוצג בחלון -
   ולכן אין לו כלל הסתרה משלו. */

/* ---- הבוררים בדיאלוג הגלריה ----
   **‎admin-ufield‎ אינו מתאים כאן**: הוא מעוצב לפאנל הכהה (טקסט לבן על רקע
   שקוף-בהיר), והדיאלוג הזה הוא הקלף הבהיר -כלומר לבן על כמעט-לבן. זו אותה
   מלכודת שכבר תועדה כאן בדיאלוגים של ניהול התגיות ובבורר התמונות.
   ‎appearance: none‎ + חץ משלנו: החץ הנייטיבי מצויר ע"י המערכת, יוצא אפור
   קטן בפינה ובמסמך RTL הוא נוחת בצד הלא-נכון. */
.wg-select {
    width: 100%;
    padding: 0.45rem 0.7rem;
    padding-inline-start: 2rem;                 /* מקום לחץ */
    border-radius: 10px;
    border: 1.5px solid rgba(74, 47, 18, 0.38);
    background-color: #fffdf6;
    color: #33240f;
    font-family: inherit;
    font-size: 0.86rem;
    font-weight: 700;
    line-height: 1.4;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='m6 9 6 6 6-6' fill='none' stroke='%234a2f12' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: left 0.6rem center;
    background-size: 0.85rem;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.wg-select:hover { border-color: rgba(74, 47, 18, 0.6); }
.wg-select:focus {
    outline: none;
    border-color: var(--c-gold, #ffd15a);
    box-shadow: 0 0 0 3px rgba(255, 209, 90, 0.35);
}
/* **הרשימה עצמה מצוירת ע"י הדפדפן**, ולכן היא יורשת את צבעי המערכת ולא את
   שלנו. ‎color-scheme: light‎ הוא מה שמבטיח שהיא תיפתח בהירה ולא כהה אצל מי
   שהמערכת שלו במצב כהה -שם הטקסט יצא לבן על לבן. */
/* **‎background-color‎ ולא ‎background‎.** הקיצור מאפס את ‎background-image‎,
   כלומר הוא מחק את חץ ה-SVG שהוגדר למעלה -נמדד ‎backgroundImage: none‎. */
.wg-select, .wg-select option { color-scheme: light; background-color: #fffdf6; color: #33240f; }

/* ================= יעדי נגיעה במסך מגע (44px) =================
   נמדד בטלפון (iPhone 14): ‎.media-open‎ ‎16×18‎, צ'קבוקס ‎18×18‎, ושלושת פקדי
   סרגל הרשימה ‎30px‎ גובה. ההמלצה של אפל היא 44px, ומתחת לזה נגיעה מחטיאה את
   הכפתור ופוגעת בשכן.

   **הכול תחת ‎pointer: coarse‎ בלבד**, ולכן בעכבר שום דבר כאן אינו משתנה
   ופריסת הדסקטופ נשארת זהה בדיוק. אין כאן כלל גורף על ‎button‎ -כלל כזה היה
   מנפח שורות שלמות בפאנל; רק הפקדים שנמדדו קטנים.

   הבלוק בסוף הקובץ בכוונה: ‎height‎ ו-‎width‎ הקיימים מוגדרים באותה
   specificity, ומי שמאוחר בקובץ מנצח. */
@media (pointer: coarse) {
    /* שלושת פקדי סרגל הרשימה (הוספה, מיון, סינון) חולקים משתנה גובה אחד,
       ולכן הם מתוקנים במקום אחד ולא נפרדים בשינוי הבא. */
    .pf-listbar { --pf-bar-h: 2.75rem; }

    /* "פתיחה" בכיתוב של אריח המדיה -קישור טקסט בגובה שורה. מקבל תיבה של ממש
       במקום ריפוד אופקי בלבד. */
    .media-open {
        display: inline-grid; place-items: center;
        min-width: 2.75rem; min-height: 2.75rem;
        padding-inline: 0.5rem;
    }

    /* **הצ'קבוקסים עצמם אינם גדלים כאן, וזה נמדד.** הגרסה הראשונה הגדילה את
       התיבה ל-‎1.35rem‎, ושתי מדידות הראו שזו טעות:

       (א) **יעד הנגיעה כבר תקין.** כל צ'קבוקס בפאנל יושב בתוך ‎<label>‎, ולחיצה
           בכל שטח התווית מחליפה אותו. נמדד: ‎char-row-toggle‎ בתוך תווית
           ‎54×54‎, והצ'קבוקס של DEBUG בתוך תווית ‎298×44‎ -כלומר "‎18×18‎"
           שהמדידה דיווחה עליו הוא גודל ה**ציור**, לא גודל היעד.
       (ב) **וההגדלה שברה פקדים מוסתרים.** שבעה מקומות בפאנל מסתירים את הקלט
           (‎width: 0; height: 0‎) ומציירים במקומו מתג/אריח -‎.admin-switch‎,
           ‎.char-thumb-item‎, ‎.sitemap-check‎, ‎.a11y-pos-opt‎, ‎.pf-tpl-opt‎,
           ‎.pf-board-opt‎, ‎.pf-banim-opt‎. ל-‎.admin-panel input[type=...]‎ יש
           specificity (0,2,1) מול (0,1,1) שלהם, כלומר הוא **גובר על כולם**
           ומחזיר תיבה נסתרת לגודל אמיתי. ‎:not(.admin-switch input)‎ כיסה אחד
           מהשבעה, ו-‎.char-thumb-item‎ נמדד ‎22×22‎ במקום 0.

       **הכלל שנשאר:** להגדיל את התווית, לא את התיבה. */
    /* נגיעה ליד הריבוע חייבת להחליף אותו בדיוק כמו נגיעה בו -ולכן התווית היא
       שנושאת את יעד ה-44px. חל גם על המתגים (‎.admin-switch‎ הוא ‎<label>‎ עם
       קלט ישיר): נמדד שהמסילה עצמה ‎43×23‎, כלומר חצי מהגובה המומלץ. */
    .admin-panel label:has(> input[type="checkbox"]),
    .admin-panel label:has(> input[type="radio"]) { min-height: 2.75rem; }
}

/* ---- אורות חלונות הטירה ----
   ‎minmax(min(...), 1fr)‎ ולא ‎minmax(12rem, 1fr)‎: מסילה עם מינימום קשיח אינה
   יורדת מתחתיו, ובעמודת תוכן צרה היא גולשת מהקופסה. אותה מלכודת שכבר תועדה
   כאן בגלריית העבודות, בשעות התאורה ובטאב SEO. */
.wl-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(12rem, 100%), 1fr));
    gap: 0.7rem;
    align-items: end;
}
/* שני מחווני "מ- / עד" באותה שורה, עם התווית צמודה למחוון ולא מעליו */
.wl-pair { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: 0.5rem 0.9rem; }
.wl-pair label { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.wl-pair label span {
    flex: 0 0 auto; font-size: 0.82rem; font-weight: 700;
    color: var(--c-gold-light, #ffe7a3); opacity: 0.85;
}
/* ‎min-width: 0‎ הכרחי: פריט grid אינו יורד מתחת לרוחב התוכן שלו, והמחוון
   היה מותח את המסילה ומגליש את השורה במסך צר. */
.wl-pair input[type="range"] { flex: 1 1 auto; min-width: 0; width: 100%; }
/* **‎accent-color‎ אינו יורש מהפאנל.** הזהב של שאר המחוונים מגיע מכלל על
   ‎.folk-form‎, והסעיף הזה בנוי מ-‎.folk-group‎ בלי העוטף - ולכן המחוונים
   נצבעו בכחול ברירת המחדל של הדפדפן בתוך פאנל זהוב. */
#wlBody input[type="range"] { accent-color: var(--c-gold); cursor: pointer; }
#wlBody .folk-group { margin-inline: 0; }

/* ================= אשף כיול הטיפוס ================= */
/* **האשף יושב על האתר ולא בפאנל.** מה שמכוונים כאן הוא מיקום דמות מול
   אביזר, ותצוגה מוקטנת בתוך הפאנל הייתה עיצוב שני שמתפצל מהתוצאה.
   הקופסה קטנה ונצמדת לתחתית, כדי שהסצנה תישאר גלויה. */
.climb-steps { margin: 0.4rem 0 0; padding-inline-start: 1.2rem; color: #cfe8ff; font-size: 0.86rem; line-height: 1.9; }
.climb-steps b { color: var(--c-gold-light, #ffe7a3); }
.climb-wiz {
    position: fixed; inset: auto 0 0 0; z-index: 260;
    display: flex; justify-content: center;
    padding: 0 1rem max(1rem, env(safe-area-inset-bottom));
    pointer-events: none;                  /* הסצנה מאחור נשארת גרירה */
}
.climb-wiz .cw-box {
    pointer-events: auto;
    width: min(34rem, 100%);
    padding: 0.9rem 1.1rem 1rem;
    border: 2px solid var(--c-gold, #ffd15a);
    border-radius: 16px 16px 0 0;
    background: rgba(8, 30, 60, 0.96);
    box-shadow: 0 -12px 40px rgba(0, 0, 0, 0.5);
    color: #eaf4ff;
}
.climb-wiz .cw-dots { display: flex; gap: 0.4rem; justify-content: center; margin-bottom: 0.6rem; }
.climb-wiz .cw-dot {
    width: 2.2rem; height: 4px; border-radius: 2px;
    background: rgba(255, 255, 255, 0.18);
}
.climb-wiz .cw-dot.is-on   { background: var(--c-gold, #ffd15a); }
.climb-wiz .cw-dot.is-done { background: rgba(255, 209, 90, 0.5); }
.climb-wiz .cw-title { margin: 0 0 0.3rem; font-size: 1rem; color: var(--c-gold-light, #ffe7a3); }
.climb-wiz .cw-desc  { margin: 0 0 0.5rem; font-size: 0.88rem; line-height: 1.6; }
.climb-wiz .cw-hint  { margin: 0 0 0.5rem; font-size: 0.76rem; color: rgba(207, 232, 255, 0.75); }
.climb-wiz .cw-vals  {
    margin: 0 0 0.7rem; font-size: 0.82rem;
    padding: 0.35rem 0.6rem; border-radius: 8px;
    background: rgba(255, 255, 255, 0.07);
}
.climb-wiz .cw-vals b { color: var(--c-gold-light, #ffe7a3); }
.climb-wiz .cw-acts { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.climb-wiz .cw-acts .cw-cancel { margin-inline-start: auto; }
/* הדמות היא מה שגוררים -הסמן אומר את זה, וטקסט לא נבחר בטעות */
html.climb-wiz-on .folk { cursor: grab; }
html.climb-wiz-on .climb-wiz.is-dragging ~ * .folk { cursor: grabbing; }
html.climb-wiz-on { user-select: none; -webkit-user-select: none; }
@media (max-width: 640px) {
    .climb-wiz .cw-box { padding: 0.8rem 0.8rem 0.9rem; }
    .climb-wiz .cw-title { font-size: 0.94rem; }
    .climb-wiz .cw-acts .cw-cancel { margin-inline-start: 0; }
}
/* הקופסה נגררת -הסמן אומר את זה, וכפתורים נשארים לחיצים */
.climb-wiz .cw-box { cursor: move; }
.climb-wiz .cw-box.is-moving { cursor: grabbing; box-shadow: 0 12px 44px rgba(0, 0, 0, 0.6); }
.climb-wiz .cw-box button { cursor: pointer; }
/* כשהיא נגררת היא כבר לא מוצמדת לתחתית, ולכן הפינות מעוגלות מכל הצדדים */
.climb-wiz .cw-box[style*="position: fixed"] { border-radius: 16px; }
/* בורר האביזרים שאפשר לטפס עליהם -אריח עם התמונה, כי שם ספרייט אינו אומר
   דבר עד שרואים אותו (אותו עיקרון של בורר צורת הנגן). */
.climb-sprites {
    display: grid; gap: 0.45rem;
    grid-template-columns: repeat(auto-fill, minmax(min(4.6rem, 100%), 1fr));
    margin-top: 0.5rem;
}
.climb-sprite {
    display: flex; flex-direction: column; align-items: center; gap: 0.2rem;
    padding: 0.4rem 0.2rem; cursor: pointer; min-height: 4.4rem;
    border: 1.5px solid rgba(255, 231, 163, 0.25); border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 0.15s, background 0.15s;
}
.climb-sprite input { position: absolute; opacity: 0; pointer-events: none; }
.climb-sprite img { width: 2rem; height: 2rem; object-fit: contain; }
.climb-sprite span { font-size: 0.66rem; color: #cfe8ff; direction: ltr; }
.climb-sprite:hover { background: rgba(255, 255, 255, 0.1); }
.climb-sprite.is-on {
    border-color: var(--c-gold); background: rgba(255, 209, 90, 0.18);
    box-shadow: 0 0 0 2px rgba(255, 209, 90, 0.22);
}
/* בורר בתי הרקע -אותו עיקרון בדיוק של climb-sprites (אריח עם תמונה), אבל
   בתמונה גדולה יותר: ציור בית עשיר-פרטים אינו מזוהה ב-2rem כמו אביזר. */
.house-pick {
    /* רווח נדיב בין האריחים (בקשת המשתמש): לאריח הנבחר יש טבעת ‎box-shadow‎
       שנגעה בשכניו, ושלוש קופסאות צמודות נקראות כרשת אחת ולא כפריטים. */
    display: grid; gap: 0.95rem;
    grid-template-columns: repeat(auto-fill, minmax(min(6.4rem, 100%), 1fr));
    margin-top: 0.5rem;
}
.house-tile {
    display: flex; flex-direction: column; align-items: center; gap: 0.25rem;
    padding: 0.45rem 0.3rem; cursor: pointer; min-height: 6.6rem;
    border: 1.5px solid rgba(255, 231, 163, 0.25); border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    transition: border-color 0.15s, background 0.15s, opacity 0.15s;
}
.house-tile input { position: absolute; opacity: 0; pointer-events: none; }
.house-tile img { width: 100%; height: 4.4rem; object-fit: contain; }
.house-tile span { font-size: 0.66rem; color: #cfe8ff; text-align: center; line-height: 1.3; }
.house-tile:hover { background: rgba(255, 255, 255, 0.1); }
.house-tile.is-on {
    border-color: var(--c-gold); background: rgba(255, 209, 90, 0.18);
    box-shadow: 0 0 0 2px rgba(255, 209, 90, 0.22);
}
/* מגיע לתקרה (HOUSE_MAX_PER_PAGE): שאר האריחים הבלתי-מסומנים מתעמעמים -
   עדיין ברור שהם קיימים, אבל לא ניתנים ללחיצה נוספת (חוק הפרויקט: אין
   כלל גורף על input בפאנל -ה-checkbox כבר מוסתר לגמרי כאן, אז disabled
   על ההורה הלחיץ הוא מה שבאמת קובע). */
.house-tile:has(input:disabled):not(.is-on) { opacity: 0.4; cursor: not-allowed; }
.house-tile:has(input:disabled):not(.is-on):hover { background: rgba(255, 255, 255, 0.05); }
/* יעד נגיעה: התווית כבר גבוהה (6.6rem) ומכסה את כל האריח -לא צריך הגדלה נוספת */
@media (pointer: coarse) { .house-tile { min-height: 7rem; } }

/* שורות עריכה למיקום/גודל/שכבה -פר-בית שנבחר, פר-עמוד (בקשת המשתמש: לא ברירת
   מחדל גלובלית). כרטיס לכל בית: תמונה+שם למעלה, שלושה שדות מספר מתחתיהם -
   נשברים לפי הצורך ברוחב צר (חוק המובייל), לא שורה קשיחה. */
/* היעד שנפתר בפועל לפניות מהטופס -הכתובת עצמה ב-LTR, כי היא לועזית
   ובתוך משפט עברי ה-bidi הופך אותה (חוק מתועד בפרויקט). */
.cf-to-eff b { unicode-bidi: isolate; }
.cf-to-eff span { color: #ffb4b4; font-weight: 700; }

/* אזהרת שכבה מכובה -אדומה ולא זהובה: זו אינה הערת הסבר אלא הסיבה שהבחירה
   שנשמרה אינה נראית על המסך. ‎[hidden]‎ מפורש, כי ‎.admin-note‎ קובע
   ‎display: block‎ וגובר עליו (מלכודת מתועדת). */
.house-layer-warn {
    color: #ffd9d3;
    background: rgba(224, 69, 46, 0.16);
    border-color: rgba(255, 130, 110, 0.45);
    border-right-color: #e0452e;
}
.house-layer-warn[hidden] { display: none; }
.house-layer-warn .admin-linkbtn { color: #ffd9d3; text-decoration: underline; }

/* כפתור "הזזה בגרירה" יושב בין רשת האריחים לבין שורות ההגדרה, ובלי רווח
   הוא נדבק לאריח האחרון ונקרא כחלק מהרשת. ‎display: block‎ כי ‎.admin-ubtn‎
   הוא ‎inline-block‎ ושוליים אנכיים עליו נבלעים בשורת האריחים. */
.house-move-go {
    display: block;
    width: fit-content;
    margin-block: 0.9rem 0.2rem;
}
.house-cfg { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 0.7rem; }
.house-cfg-row {
    display: flex; flex-direction: column; gap: 0.5rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(255, 231, 163, 0.2); border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
}
.house-cfg-head { display: flex; align-items: center; gap: 0.5rem; }
.house-cfg-thumb { width: 2.2rem; height: 2.2rem; object-fit: contain; flex: 0 0 auto; }
.house-cfg-label { font-size: 0.8rem; font-weight: 700; color: #fff; flex: 1 1 auto; min-width: 0; }
.house-cfg-del {
    flex: 0 0 auto; width: 1.6rem; height: 1.6rem; border-radius: 999px;
    border: 1px solid rgba(255, 130, 130, 0.4); background: rgba(180, 40, 40, 0.18);
    color: #ffd0d0; font-size: 0.78rem; line-height: 1; cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}
.house-cfg-del:hover { background: rgba(200, 50, 50, 0.32); border-color: rgba(255, 130, 130, 0.7); }
.house-cfg-fields { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.house-cfg-fields .admin-ufield { flex: 1 1 6.5rem; min-width: 6rem; }
.house-cfg-fields input[type="number"] { direction: ltr; text-align: center; }
/* ‎.admin-note‎ קובע ‎display: block‎ בעצמו, וזה גובר על ‎[hidden]‎ בקסקייד
   (מלכודת מתועדת בפרויקט) -בלי הכלל הזה ההערה מוצגת גם מתחת לתקרה. */
.house-pick-cap[hidden] { display: none; }

/* הדמות הנבחרת באשף -חייבת להיות מזוהה במבט, אחרת גוררים את הלא-נכונה */
.folk.cw-pick { filter: drop-shadow(0 0 10px rgba(255, 209, 90, 0.95)) drop-shadow(0 0 22px rgba(255, 209, 90, 0.6)); }
/* האביזר שמולו מכיילים -בלי סימון לא ברור מול מה נמדדים המספרים */
.obj.cw-prop { filter: drop-shadow(0 0 8px rgba(120, 230, 255, 0.95)) drop-shadow(0 0 18px rgba(120, 230, 255, 0.55)); }

/* ---- ׳ž׳¡׳š "׳ž׳¢׳¨׳›׳× ׳ž׳™׳™׳œ" ----
   ג€Žmin()ג€Ž ׳‘׳ž׳™׳ ׳™׳ž׳•׳ ׳”׳ž׳¡׳™׳œ׳” -׳ž׳¡׳™׳œ׳” ׳¢׳ ׳ž׳™׳ ׳™׳ž׳•׳ ׳§׳©׳™׳— ׳׳™׳ ׳” ׳™׳•׳¨׳“׳× ׳ž׳×׳—׳×׳™׳• ׳‘׳¢׳ž׳•׳“׳”
   ׳¦׳¨׳”, ׳•׳–׳• ׳ž׳œ׳›׳•׳“׳× ׳©׳›׳‘׳¨ ׳×׳•׳¢׳“׳” ׳›׳׳Ÿ ׳©׳œ׳•׳© ׳₪׳¢׳ž׳™׳. */
.mail-grid {
    display: grid; gap: 0.7rem 0.6rem; align-items: end;
    grid-template-columns: minmax(min(12rem, 100%), 2fr) minmax(min(5rem, 100%), 1fr);
    margin-bottom: 0.2rem;
}
.mail-grid .mail-fld-enc { grid-column: 1 / -1; }
.mail-grid-2 { grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); }
.mail-grid .ui-pick { width: 100%; }
/* ׳©׳“׳•׳× ׳”׳–׳“׳”׳•׳× ׳›׳©׳׳™׳Ÿ ׳׳™׳ž׳•׳×: ׳ž׳¢׳•׳ž׳¢׳ž׳™׳ ׳•׳ž׳ ׳•׳˜׳¨׳œ׳™׳, ׳׳š **׳’׳œ׳•׳™׳™׳** -׳›׳“׳™ ׳©׳™׳™׳©׳׳¨
   ׳‘׳¨׳•׳¨ ׳ž׳” ׳ž׳•׳’׳“׳¨ ׳©׳ ׳•׳ž׳” ׳™׳§׳¨׳” ׳׳ ׳™׳“׳œ׳™׳§׳• ׳׳•׳×׳•. */
#mailAuthFields.is-off { opacity: 0.45; }

.mail-test-row { display: flex; align-items: end; gap: 0.6rem; flex-wrap: wrap; }
.mail-test-row .admin-ufield { flex: 1 1 min(16rem, 100%); min-width: 0; }
.mail-test-row .admin-ubtn { flex: 0 0 auto; }
/* שורת בדיקה שנייה: ה-‎gap‎ הוא **בתוך** ה-flex ואינו חל בין שתי השורות,
   ולכן הכפתור התחתון נדבק לשדה שמעליו. */
.mail-test-row + .mail-test-row { margin-top: 0.85rem; }
/* **‎0.9rem‎ ולא ‎gap‎ של השורה.** להערה יש מסגרת ורקע משלה, ולכן היא נקראת
   כקופסה -ורווח שמספיק בין שדה לכפתור נראה כהדבקה בין שתי קופסאות. */
.mail-test-row .admin-note {
    flex: 1 1 min(14rem, 100%);
    min-width: 0;
    margin: 0;
    margin-inline-start: 0.9rem;
}
.mail-test-row { align-items: center; }
.mail-test-out {
    margin-top: 0.7rem; padding: 0.7rem; border-radius: 12px;
    border: 1px solid rgba(91, 163, 230, 0.3); background: rgba(6, 26, 52, 0.4);
}
.mail-test-out[hidden] { display: none; }
.mail-test-out.is-ok { border-color: rgba(75, 208, 122, 0.5); }
.mail-test-out.is-bad { border-color: rgba(224, 69, 46, 0.5); }
.mail-test-msg { margin: 0 0 0.5rem; font-size: 0.86rem; font-weight: 800; }
.mail-test-out.is-ok .mail-test-msg { color: #7ee7a5; }
.mail-test-out.is-bad .mail-test-msg { color: #ff9d88; }
/* ׳”׳×׳ž׳œ׳™׳œ ׳”׳•׳ ׳₪׳œ׳˜ ׳ž׳›׳•׳ ׳”: LTR, ׳¨׳•׳—׳‘ ׳§׳‘׳•׳¢, ׳•׳’׳œ׳™׳œ׳” **׳‘׳×׳•׳›׳•** ׳•׳œ׳ ׳‘׳₪׳׳ ׳œ */
.mail-test-log {
    margin: 0; max-height: 16rem; overflow: auto;
    padding: 0.6rem; border-radius: 9px;
    background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(91, 163, 230, 0.22);
    color: #cfe8ff; font-family: Consolas, "Courier New", monospace;
    font-size: 0.76rem; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word;
    scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.45) transparent;
}
.mail-test-log::-webkit-scrollbar { width: 9px; height: 9px; }
.mail-test-log::-webkit-scrollbar-track { background: transparent; }
.mail-test-log::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.4); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
}
.mail-test-log::-webkit-scrollbar-thumb:hover { background: rgba(255, 231, 163, 0.65); background-clip: padding-box; }

/* הערת אזהרה בפאנל -כשמצב ההגדרות מסתיר משהו מהאתר, החיווי חייב להיראות
   כאזהרה ולא כהערה נוספת. */
.admin-note-warn {
    border-color: rgba(255, 176, 80, 0.55) !important;
    background: rgba(255, 176, 80, 0.12) !important;
    color: #ffd9a8;
}

/* ---- יומן הפניות ----
   הצבע הוא המידע: "נשלח" ירוק, דחייה שקטה כתומה, כשל אדום. ברשימה ארוכה
   של שורות דומות המילים לבדן אינן נסרקות בעין. */
.cf-log-bar { display: flex; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.cf-log-bar .admin-ubtn { flex: 0 0 auto; }

/* הסיכום קודם לרשימה: "3 נדחו כמלכודת דבש" הוא האבחנה עצמה, ושורה בודדת
   בתוך רשימה ארוכה אינה נקראת ככזאת. */
.cf-log-sum { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.cf-log-pill {
    padding: 0.2rem 0.6rem; border-radius: 999px;
    font-size: 0.76rem; font-weight: 800;
    border: 1px solid rgba(91, 163, 230, 0.35); background: rgba(6, 26, 52, 0.5); color: #cfe8ff;
}
.cf-log-pill.cf-st-sent { border-color: rgba(75, 208, 122, 0.55); color: #7ee7a5; }
.cf-log-pill.cf-st-honeypot { border-color: rgba(255, 176, 80, 0.6); color: #ffd9a8; }
.cf-log-pill.cf-st-smtp,
.cf-log-pill.cf-st-no-to { border-color: rgba(224, 69, 46, 0.6); color: #ff9d88; }

/* גלילה בתוך היומן ולא בפאנל: הוא עשוי להחזיק 40 רשומות, וסעיף שמאריך את
   הפאנל דוחף את שאר ההגדרות הרחק מהעין. סרגל מעוצב -חוק הפרויקט. */
.cf-log {
    max-height: 26rem; overflow: auto;
    scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.45) transparent;
}
.cf-log::-webkit-scrollbar { width: 9px; }
.cf-log::-webkit-scrollbar-track { background: transparent; }
.cf-log::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.4); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
}
.cf-log::-webkit-scrollbar-thumb:hover { background: rgba(255, 231, 163, 0.65); background-clip: padding-box; }

.cf-log-row {
    margin-bottom: 0.5rem; padding: 0.6rem 0.7rem; border-radius: 12px;
    border: 1px solid rgba(91, 163, 230, 0.28); background: rgba(6, 26, 52, 0.4);
    /* פס הצבע בקצה **הפיזי** ההתחלתי: הפאנל RTL, ו-border-left היה נוחת בצד השני */
    border-inline-start: 3px solid rgba(91, 163, 230, 0.5);
}
.cf-log-row.cf-st-sent { border-inline-start-color: #4bd07a; }
.cf-log-row.cf-st-honeypot,
.cf-log-row.cf-st-rate,
.cf-log-row.cf-st-copyfail { border-inline-start-color: #ffb050; }
.cf-log-row.cf-st-smtp,
.cf-log-row.cf-st-no-to,
.cf-log-row.cf-st-off { border-inline-start-color: #e0452e; }

.cf-log-head {
    display: flex; justify-content: space-between; align-items: baseline;
    gap: 0.5rem; flex-wrap: wrap; font-size: 0.85rem;
}
.cf-log-head b { color: #ffe7a3; }
.cf-log-row.cf-st-sent .cf-log-head b { color: #7ee7a5; }
.cf-log-when { font-size: 0.76rem; color: #9fc3e6; }

.cf-log-meta {
    display: flex; flex-wrap: wrap; gap: 0.3rem 0.9rem;
    margin-top: 0.35rem; font-size: 0.78rem; color: #bcd8f2;
}
/* ‎dir‎ לבדו אינו מספיק ל-inline: בלי ‎unicode-bidi‎ כתובת לועזית מתהפכת
   בתוך משפט עברי (אותה מלכודת שכבר תועדה כאן על "100% 85%") */
.cf-log-meta [dir="ltr"], .cf-log-row b[dir="ltr"] { unicode-bidi: isolate; }

.cf-log-msg {
    margin-top: 0.45rem; padding: 0.45rem 0.6rem; border-radius: 9px;
    background: rgba(0, 0, 0, 0.28); color: #dceaf8;
    font-size: 0.8rem; line-height: 1.6; white-space: pre-wrap; word-break: break-word;
}
.cf-log-err {
    margin-top: 0.4rem; font-size: 0.78rem; color: #ff9d88; word-break: break-word;
}
.cf-log-row.cf-st-honeypot .cf-log-err,
.cf-log-row.cf-st-rate .cf-log-err,
.cf-log-row.cf-st-copyfail .cf-log-err { color: #ffd9a8; }

.cf-log-smtp { margin-top: 0.45rem; }
.cf-log-smtp summary { cursor: pointer; font-size: 0.78rem; color: #9fc3e6; }
.cf-log-smtp summary:hover { color: #ffe7a3; }
.cf-log-smtp pre {
    margin: 0.4rem 0 0; max-height: 14rem; overflow: auto;
    padding: 0.5rem; border-radius: 9px;
    background: rgba(0, 0, 0, 0.35); border: 1px solid rgba(91, 163, 230, 0.22);
    color: #cfe8ff; font-family: Consolas, "Courier New", monospace;
    font-size: 0.74rem; line-height: 1.55;
    white-space: pre-wrap; word-break: break-word;
    scrollbar-width: thin; scrollbar-color: rgba(255, 231, 163, 0.45) transparent;
}
.cf-log-smtp pre::-webkit-scrollbar { width: 9px; }
.cf-log-smtp pre::-webkit-scrollbar-track { background: transparent; }
.cf-log-smtp pre::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.4); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
}

/* ---- בורר רקע הצ'אט ----
   אריחים ולא רשימה נפתחת: "קלף עם מכשף" אינו אומר דבר עד שרואים אותו.
   ‎minmax(min(...), 1fr)‎ ולא מינימום קשיח -מלכודת שכבר תועדה כאן שלוש פעמים:
   מסילה עם מינימום קשיח אינה יורדת מתחתיו ובעמודה צרה התוכן גולש. */
.ai-bg-pick {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 0.7rem;
    margin: 0.4rem 0 0.9rem;
}
.ai-bg-opt {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem;
    border-radius: 12px;
    border: 2px solid rgba(91, 163, 230, 0.3);
    background: rgba(6, 26, 52, 0.4);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease;
    min-width: 0;
}
.ai-bg-opt:hover { border-color: rgba(255, 231, 163, 0.6); }
.ai-bg-opt.is-on { border-color: var(--c-gold-light, #ffe7a3); background: rgba(255, 231, 163, 0.12); }
/* הקלט מוסתר ב-clip-path ולא ב-display:none -אלמנט כזה אינו נמדד ואינו
   ממוקד, ובורר מקלדת מפסיק לעבוד. אותו דפוס של שאר האריחים בפאנל. */
.ai-bg-opt input { position: absolute; width: 0; height: 0; opacity: 0; clip-path: inset(50%); }
.ai-bg-opt img {
    width: 100%;
    max-width: 7.5rem;
    height: auto;
    border-radius: 8px;
    display: block;
}
.ai-bg-opt span { font-size: 0.78rem; color: #cfe8ff; text-align: center; }
.ai-bg-opt.is-on span { color: #ffe7a3; font-weight: 700; }
.ai-bg-opt:focus-within { outline: 2px solid var(--c-gold-light, #ffe7a3); outline-offset: 2px; }

/* ---- שדות שגדלים עם התוכן ----
   **פס גלילה בשדה שרק הודבק לתוכו הוא רעש.** אזור הידע מחזיק טקסט חופשי
   ארוך, וגובה קבוע פירושו שכל עריכה נעשית דרך חלון של שמונה שורות. הגובה
   נקבע ב-JS לפי התוכן (‎autoGrow‎), וה-‎max-height‎ כאן הוא הרצפה שמתחתיה
   הגלילה כן מוצדקת -בלעדיו טקסט ארוך היה דוחף את כפתור השמירה הרחק מהעין.

   ‎overflow-y‎ נקבע ב-JS ל-‎hidden‎ כשהתוכן נכנס, כי ‎auto‎ לבדו עדיין מותיר
   בכרום רצועת מקום ופס מהבהב בזמן הקלדה. */
#aiKnowledge, #aiStarters, #aiGreeting {
    resize: vertical;
    line-height: 1.6;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 231, 163, 0.45) transparent;
}
#aiKnowledge { min-height: 16rem; max-height: 65vh; }
#aiStarters, #aiGreeting { max-height: 24vh; }
#aiKnowledge::-webkit-scrollbar,
#aiStarters::-webkit-scrollbar,
#aiGreeting::-webkit-scrollbar { width: 9px; }
#aiKnowledge::-webkit-scrollbar-track,
#aiStarters::-webkit-scrollbar-track,
#aiGreeting::-webkit-scrollbar-track { background: transparent; }
#aiKnowledge::-webkit-scrollbar-thumb,
#aiStarters::-webkit-scrollbar-thumb,
#aiGreeting::-webkit-scrollbar-thumb {
    background: rgba(255, 231, 163, 0.4); border-radius: 999px;
    border: 2px solid transparent; background-clip: padding-box;
}

/* אריח "מתחלף": אין לו תמונה, ולכן הוא מקבל גובה שווה לאחרים כדי שהשורה
   לא תיראה שבורה (‎align-items: stretch‎ של הרשת עושה את השאר). */
.ai-bg-rand { justify-content: center; }
.ai-bg-rand-ico {
    font-size: 2.4rem;
    line-height: 1;
    filter: drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
}

/* ---- כיוון מיקום הטקסט בקלף ---- */
.ai-pos-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr));
    gap: 0.8rem;
}
.ai-pos-card {
    display: flex; flex-direction: column; gap: 0.35rem;
    padding: 0.7rem; border-radius: 12px; min-width: 0;
    border: 1px solid rgba(91, 163, 230, 0.3); background: rgba(6, 26, 52, 0.4);
}
.ai-pos-name { font-size: 0.82rem; font-weight: 700; color: #ffe7a3; }
/* ‎minmax(4rem, auto)‎ ולא ‎4rem‎ קשיח: תווית ארוכה מהעמודה **בולעת את ה-gap**
   ונדבקת למחוון (נמדד "הגדלה/הקטנה" 72px בעמודה של 64). ‎auto‎ הוא
   ה-‎max-content‎ שלה, והמינימום שומר על יישור בין השורות הקצרות. */
.ai-pos-row { display: grid; grid-template-columns: minmax(4rem, auto) 1fr 2.4rem; align-items: center; gap: 0.5rem; }
.ai-pos-row > span { font-size: 0.78rem; color: #cfe8ff; }
.ai-pos-row input[type="range"] { width: 100%; min-width: 0; accent-color: var(--c-gold, #d39a1a); }
.ai-pos-val { font-size: 0.76rem; color: #ffe7a3; text-align: center; }
.ai-pos-reset { align-self: flex-start; margin-top: 0.2rem; }
/* שורת הפעולות של הסעיף -רווח מעל הכרטיסים וביניהם, ועטיפה במסך צר */
.ai-pos-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.7rem; }
@media (pointer: coarse) { .ai-pos-row { min-height: 2.75rem; } }
/* Auto fit hides the manual card controls; manual hides the auto-only ones.
   display:none on the grid/card - hidden inputs are still read by cfg(), so
   switching back restores the saved values untouched. */
.hc-row.is-fit-auto .hc-manual { display: none; }
.hc-row:not(.is-fit-auto) .hc-auto-only { display: none; }

/* ---- מסכי היועץ ----
   ‎display: none‎ מפורש: ל-‎.admin-collapsible‎ יש ‎display‎ משלו, והוא גובר
   על ‎hidden‎ -מלכודת שכבר תועדה כאן ארבע פעמים. */
[data-aiview][hidden] { display: none !important; }

/* **רווח בין השורות.** ‎.admin-note‎ נושאת שוליים עליונים בלבד, ומתג או שדה
   שבא אחריה נדבק אליה -ובמסך שכולו מתגים והערות זה נקרא כגוש אחד. ריווח
   אחיד בין **כל** הילדים הישירים, ואיפוס השוליים העצמיים שלהם כדי שלא
   יצטברו. מוגבל לטאב היועץ, שלא לשנות מסכים שלא התבקשו. */
.admin-tab[data-tab="ai"] .admin-collapsible-body > *,
.admin-tab[data-tab="aiconn"] .admin-collapsible-body > * { margin-block: 0; }
.admin-tab[data-tab="ai"] .admin-collapsible-body > * + *,
.admin-tab[data-tab="aiconn"] .admin-collapsible-body > * + * { margin-top: 0.9rem; }
.admin-tab[data-tab="ai"] .admin-collapsible + .admin-collapsible,
.admin-tab[data-tab="aiconn"] .admin-collapsible + .admin-collapsible { margin-top: 1rem; }
.admin-tab[data-tab="ai"] .admin-switch,
.admin-tab[data-tab="aiconn"] .admin-switch { margin-block: 0.15rem; }
.ai-save-row { margin-top: 1.4rem; }

/* עלה פעיל בענף */
.ai-nav-leaf.is-active {
    background: rgba(255, 231, 163, 0.16);
    border-inline-start: 3px solid var(--c-gold-light, #ffe7a3);
}
.ai-nav-leaf.is-active .admin-nav-leaf-title { color: #ffe7a3; font-weight: 700; }

/* ---------- טאב הבתים ---------- */
/* חיווי המצב בכותרת השורה -כדי שאפשר יהיה לסרוק את הרשימה בלי לפתוח כל אחת */
.hc-state {
    margin-inline-start: auto;
    margin-inline-end: 0.5rem;
    padding: 0.1rem 0.5rem;
    border-radius: 999px;
    font-size: 0.7rem;
    font-weight: 700;
    color: #cfe8ff;
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(91, 163, 230, 0.35);
}
.hc-state.is-on { color: #0d2340; background: #7ddc8a; border-color: #7ddc8a; }
.hc-row .admin-collapsible-title small { font-weight: 400; opacity: 0.7; }

/* הממוזערת בכותרת השורה. ‎flex: 0 0 auto‎ -בשורה צפופה פריט flex מצטמצם
   מתחת לגודלו והיא הייתה נמעכת לפס; אותה מלכודת שכבר תועדה כאן על שטח
   הכתיבה בשלט הכיתוב. */
.hc-thumb {
    flex: 0 0 auto;
    /* ‎2.9rem‎ ולא ‎2.2‎: נמדד ש-35px אינם מספיקים כדי להבחין בין הבתים -
       הם נבדלים בצבע הגג ובצורת המגדל, וזה בדיוק מה שנעלם בגודל הזה. */
    width: 2.9rem;
    height: 2.9rem;
    margin-inline-end: 0.55rem;
    background: center / contain no-repeat;
    /* רקע עדין: ספרייטי הבתים בהירים, ובלעדיו הם נבלעים בכותרת הכהה */
    border-radius: 6px;
    background-color: rgba(255, 255, 255, 0.06);
}
@media (max-width: 640px) { .hc-thumb { width: 2.3rem; height: 2.3rem; } }

/* בורר הקלף -אריחים עם התמונה, כי שם קלף אינו אומר דבר עד שרואים אותו.
   ‎minmax(min(...), 1fr)‎ ולא מינימום קשיח: מסילה עם מינימום קשיח אינה יורדת
   מתחתיו ונחתכת בעמודת תוכן צרה -מלכודת שכבר תועדה כאן שלוש פעמים. */
.hc-bgpick {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(7rem, 100%), 1fr));
    gap: 0.5rem;
    margin-bottom: 0.4rem;
}
.hc-bg-opt {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    padding: 0.35rem;
    border-radius: 10px;
    border: 2px solid rgba(91, 163, 230, 0.3);
    background: rgba(6, 26, 52, 0.4);
    cursor: pointer;
    text-align: center;
}
.hc-bg-opt.is-selected { border-color: var(--c-gold, #d39a1a); background: rgba(211, 154, 26, 0.12); }
.hc-bg-opt img { width: 100%; aspect-ratio: 1; object-fit: contain; border-radius: 6px; }
.hc-bg-opt span { font-size: 0.68rem; color: #cfe8ff; line-height: 1.2; }
/* הקלט מוסתר ב-‎clip-path‎ ולא ב-‎display:none‎: אלמנט כזה אינו נמדד ואינו
   ממוקד, וזה שובר ניווט מקלדת -אותו דפוס של ‎ui-pick‎. */
.hc-bg-opt input { position: absolute; width: 1px; height: 1px; clip-path: inset(50%); }
.hc-bg-opt:focus-within { outline: 2px solid var(--c-gold-light, #ffe7a3); outline-offset: 2px; }

/* מיקום הדלת -תצוגה חיה של הבית עם מלבן נגרר */
/* **‎auto-fit‎ ולא שתי מסילות מפורשות.** שתי מסילות בנות ‎13rem‎ הן ‎416px‎
   מינימום, ובעמודת התוכן של הפאנל בטלפון (‎231px‎) הן פשוט גולשות -נמדד
   ‎94px‎ מחוץ לפאנל. זו אותה מלכודת ‎minmax‎ שכבר תועדה כאן בגלריית העבודות,
   בשעות התאורה וב-SEO, והפעם היא נולדה מרשת בעלת מספר עמודות **קבוע**. */
.hc-doorwrap {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    gap: 0.7rem;
    align-items: start;
    margin-bottom: 0.5rem;
}
.hc-doorstage {
    position: relative;
    aspect-ratio: 1;
    /* מינימום גובה: התצוגה היא כל מה שמאפשר למקם את הדלת, ובעמודה צרה היא
       התכווצה לפס שאי אפשר לכוון עליו דבר. */
    min-height: 13rem;
    background: rgba(6, 26, 52, 0.55) center / contain no-repeat;
    border: 1px solid rgba(91, 163, 230, 0.3);
    border-radius: 10px;
    /* גוזר את ההחשכה של ‎.hc-doorbox‎ (‎box-shadow‎ ברדיוס ענק) אל התצוגה -
       בלעדיו היא נשפכת על כל הפאנל. */
    overflow: hidden;
    touch-action: none;      /* גרירה באצבע, בלי שהפאנל יגלול תחתיה */
}
/* **המלבן חייב להיראות גם על גג כתום וגם על אבן אפורה.** גבול בצבע אחד
   נבלע באחד מהם, ולכן קו מקווקו לבן מתחת לזהב -שני צבעים מנוגדים באותו
   קו, אותו תרגיל של סמן החיתוך בעורכי תמונה. */
.hc-doorbox {
    position: absolute;
    translate: -50% -50%;    /* המלבן נמדד ממרכזו -כמו ‎.hdoor‎ באתר */
    border: 2px dashed var(--c-gold-light, #ffe7a3);
    outline: 2px solid rgba(20, 30, 60, 0.75);
    border-radius: 4px;
    background: rgba(211, 154, 26, 0.2);
    box-shadow: 0 0 0 9999px rgba(6, 20, 44, 0.35);   /* מחשיך את מה שמסביב */
    cursor: grab;
}
/* צלב במרכז -בלעדיו קשה לדעת על מה בדיוק מכוונים */
.hc-doorbox::before, .hc-doorbox::after {
    content: '';
    position: absolute;
    background: var(--c-gold-light, #ffe7a3);
    opacity: 0.85;
}
.hc-doorbox::before { left: 50%; top: 35%; bottom: 35%; width: 1px; translate: -50% 0; }
.hc-doorbox::after  { top: 50%; left: 35%; right: 35%; height: 1px; translate: 0 -50%; }
.hc-doorbox.is-drag { cursor: grabbing; background: rgba(211, 154, 26, 0.38); }
.hc-doorctl { display: flex; flex-direction: column; gap: 0.35rem; }

/* בוררי הפלטפורמה של קלף הבית */
.hc-plat { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.3rem; }
.hc-plat-opt {
    display: inline-flex; align-items: center; gap: 0.35rem;
    padding: 0.3rem 0.6rem;
    border-radius: 999px;
    border: 1px solid rgba(91, 163, 230, 0.35);
    background: rgba(6, 26, 52, 0.4);
    font-size: 0.78rem; color: #cfe8ff;
    cursor: pointer;
}
.hc-plat-opt:has(input:checked) { border-color: var(--c-gold, #d39a1a); background: rgba(211, 154, 26, 0.14); color: #ffe7a3; }
/* מנוטרל = "בכולם" מסומן. מעומעם ולא מוסתר, כדי שיישאר ברור מה קיים */
.hc-plat-opt:has(input:disabled) { opacity: 0.5; cursor: default; }
@media (pointer: coarse) { .hc-plat-opt { min-height: 2.75rem; } }

/* ---- בורר אובייקטי הקרקע ("התאמה אישית") ----
   האריח כאן הוא ‎<button>‎ ולא ‎<label>‎ עם ‎checkbox‎: אותו ספרייט יכול
   להיבחר כמה פעמים (עשרה פרחים = עשר שורות), ולכן אין מצב "מסומן". */
.obj-pick .obj-tile {
    appearance: none;
    font: inherit;
    color: inherit;
}
.obj-pick .obj-tile img { height: 3.4rem; }
.obj-pick-cap[hidden] { display: none; }
/* מתג ההיפוך יושב בשורת השדות, ולכן הוא צריך לתפוס מסילה כמותם */
.house-cfg-fields .admin-switch.obj-flip { flex: 1 1 6.5rem; min-width: 6rem; align-self: end; }

/* ================= תפריט האתר =================
   שורה לכל פריט: ידית גרירה, שם העמוד (כדי שברור על מה מדובר), וארבעה
   שדות. **ידית משלה ולא ‎.admin-nav-grip‎** -היא ‎position: absolute‎ עם
   ‎opacity: 0‎ שנבנתה לעלה בתפריט הצד, ובכרטיס היא נמדדה חורגת ובלתי נראית. */
.menu-rows { display: flex; flex-direction: column; gap: 0.55rem; margin-top: 0.6rem; }
.menu-row {
    display: flex; align-items: stretch; gap: 0.6rem;
    padding: 0.6rem 0.7rem;
    border: 1px solid rgba(255, 231, 163, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, calc(0.05 * var(--admin-see, 1)));
    transition: transform 0.18s ease, border-color 0.15s, background 0.15s;
}
.menu-row:hover { border-color: rgba(255, 231, 163, 0.4); }
/* בן: מוזח ונושא קו שיוך -כך העומק נקרא בעין ולא רק מהבורר */
.menu-row[data-depth="1"] {
    margin-inline-start: 1.6rem;
    border-inline-start: 3px solid rgba(255, 209, 90, 0.55);
    background: rgba(255, 255, 255, calc(0.03 * var(--admin-see, 1)));
}
.menu-row.is-dragging { border-color: var(--c-gold); box-shadow: 0 8px 22px rgba(6, 20, 40, 0.5); }
.menu-grip {
    flex: 0 0 auto; align-self: center;
    padding: 0.35rem 0.2rem;
    color: var(--c-gold-light); font-size: 1.05rem; line-height: 1;
    cursor: grab; user-select: none;
    /* רק על הידית: אזור הפאנל עצמו חייב להישאר נגלל באצבע */
    touch-action: none;
}
.menu-grip:active { cursor: grabbing; }
.menu-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 0.45rem; }
.menu-head { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
.menu-page { font-weight: 700; color: #eaf2ff; }
.menu-badge {
    font-size: 0.68rem; font-weight: 700;
    padding: 0.1rem 0.45rem; border-radius: 999px;
    color: var(--c-gold-light); border: 1px solid rgba(255, 231, 163, 0.35);
}
.menu-href { font-size: 0.72rem; opacity: 0.7; color: #cfe8ff; }
/* ‎min(...)‎ ולא מינימום קשיח: בעמודת תוכן של 142px מסילה של 12rem נשארת
   192px והתוכן גולש -אותה מלכודת שכבר תועדה כאן שלוש פעמים. */
.menu-fields {
    display: grid; gap: 0.5rem;
    /* ‎auto-fit‎ ולא ארבע מסילות קבועות: עמודת התוכן של הפאנל צרה בהרבה
       מהחלון (תפריט צד + ריפוד), ומסילות עם מינימום קשיח אינן יורדות מתחתיו -
       נמדדו 10 שדות שחרגו מגבול הפאנל ב-820. */
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
}
/* אייקון + שם: תיבה צרה קבועה לאייקון, והשם לוקח את השאר */
.menu-pair { display: flex; gap: 0.35rem; min-width: 0; }
.menu-pair .menu-icon { flex: 0 0 3.1rem; }
.menu-pair .menu-label { flex: 1 1 auto; min-width: 0; }
.menu-f { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; }
.menu-f > span { font-size: 0.72rem; color: var(--c-gold-light); font-weight: 700; }
/* **גובה אחד לכל הפקדים בשורה.** הבורר המעוצב (‎ui-pick‎) הוא כפתור עם
   ריפוד משלו, ושדה טקסט הוא ‎input‎ -שניהם נראו נכון לחוד ובשורה אחת ההפרש
   בגובה בולט. משתנה אחד, ולא שני מספרים שיתפצלו. */
.menu-rows { --menu-h: 2.3rem; }
.menu-f input, .menu-f select {
    width: 100%; min-width: 0;
    height: var(--menu-h);
    padding: 0 0.55rem;
    border-radius: 8px;
    border: 1px solid rgba(255, 231, 163, 0.28);
    background: rgba(9, 34, 68, 0.55);
    color: #eaf2ff; font-family: inherit; font-size: 0.9rem;
}
.menu-f .ui-pick {
    height: var(--menu-h);
    min-height: var(--menu-h);
    padding-block: 0;
    display: flex; align-items: center;
}
.menu-f .ui-pick-val { line-height: 1; }
.menu-slug { direction: ltr; text-align: left; font-size: 0.85rem; }
.menu-slug:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-f input:focus, .menu-f select:focus { outline: 2px solid var(--c-gold); outline-offset: 1px; }
.menu-icon { text-align: center; font-size: 1.05rem; }
.menu-f select:disabled { opacity: 0.5; cursor: not-allowed; }
.menu-actions { display: flex; align-items: center; gap: 0.7rem; flex-wrap: wrap; margin-top: 0.9rem; }
.menu-state { font-size: 0.82rem; font-weight: 700; color: #6ee7a0; }
#menuSave:disabled { opacity: 0.62; cursor: default; filter: saturate(0.5); }
#menuSave.is-dirty {
    background: linear-gradient(180deg, #6ee7a0, #35a163 60%, #1f7345) !important;
    box-shadow: 0 3px 0 #1f7345, 0 0 0 3px rgba(110, 231, 160, 0.25) !important;
    color: #06210f !important;
    animation: pf-save-pulse 2.4s ease-in-out infinite;
}
@media (prefers-reduced-motion: reduce) { #menuSave.is-dirty { animation: none; } }
@media (max-width: 700px) {
    .menu-fields { grid-template-columns: minmax(0, 1fr); }
    .menu-row[data-depth="1"] { margin-inline-start: 0.8rem; }
}
@media (pointer: coarse) {
    /* יעד נגיעה אמיתי לידית -חוק הפרויקט: להגדיל את מה שנוגעים בו */
    .menu-grip { padding: 0.7rem 0.5rem; font-size: 1.25rem; }
}

/* ---- כמה זמן השלט שליד הדלת מוצג ----
   מעומעם ולא מוסתר כשהכותרת אינה מוצגת ליד הדלת: פקד שנעלם נקרא כתקלה,
   ופקד מעומעם אומר "יש כאן משהו, פשוט לא עכשיו". */
.hc-signdur { margin: 0.5rem 0 0.2rem; display: flex; flex-direction: column; gap: 0.45rem; }
.hc-dur-cap { font-size: 0.78rem; font-weight: 700; color: var(--c-gold-light); }
.hc-dur-modes { display: flex; gap: 0.5rem; flex-wrap: wrap; }
/* ‎display: flex‎ של ‎.ai-pos-row‎ גובר על ‎hidden‎ -מלכודת שכבר תועדה כאן
   ארבע פעמים, ולכן הכלל המפורש */
.hc-dur-row[hidden] { display: none; }
.hc-signdur.is-idle { opacity: 0.45; pointer-events: none; }

/* ---- התאמה אישית של תת-התפריט ----
   רשת של שדות קצרים: לכל אחד תווית, פקד, וערך מספרי לצידו. אותה שפה של
   ‎.ai-pos-row‎ שכבר בשימוש בכרטיסי הבתים, ולא ערכה שלישית. */
.menu-cust {
    margin: 0.6rem 0 0.9rem;
    padding: 0.8rem;
    border: 1px solid rgba(255, 231, 163, 0.25);
    border-radius: 12px;
    background: rgba(255, 255, 255, calc(0.04 * var(--admin-see, 1)));
}
.menu-cust[hidden] { display: none; }
.menu-cust-grid {
    display: grid; gap: 0.7rem 0.9rem;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
}
.menu-cf { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.menu-cf > span { font-size: 0.75rem; font-weight: 700; color: var(--c-gold-light); }
.menu-cf-pair { display: flex; align-items: center; gap: 0.5rem; min-width: 0; }
.menu-cf-pair input[type="range"] { flex: 1 1 auto; min-width: 0; }
.menu-cf-val { flex: 0 0 auto; min-width: 2.8rem; text-align: center; font-size: 0.78rem; color: #cfe8ff; }
/* בורר צבע: ריבוע נקי בגודל הפקדים שלצידו */
.menu-cust input[type="color"] {
    flex: 0 0 auto;
    width: 2.6rem; height: 2rem;
    padding: 0; border: 1px solid rgba(255, 231, 163, 0.35);
    border-radius: 8px; background: none; cursor: pointer;
}
.menu-cust input[type="color"]::-webkit-color-swatch-wrapper { padding: 2px; }
.menu-cust input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 6px; }
.menu-cf-switch { margin-top: 0.7rem; }
/* כותרת משנה בתוך קופסת ההתאמה האישית -מפרידה בין "הלוח" ל"הכפתור" */
.menu-cust-sub {
    margin: 1rem 0 0.5rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 231, 163, 0.2);
    font-weight: 800; font-size: 0.95rem; color: var(--c-gold-light);
}
.menu-cf-same { display: inline-flex; align-items: center; gap: 0.3rem; font-size: 0.72rem; color: #cfe8ff; white-space: nowrap; }
.menu-cf-same input { width: 0.95rem; height: 0.95rem; }
/* שורת המיקום: בורר + שני מחוונים, באותה רשת של ההתאמה האישית */
.menu-pos {
    display: grid; gap: 0.7rem 0.9rem; margin: 0.6rem 0 0.2rem;
    grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr));
    align-items: end;
}

/* ==================== טאב ביצועים ==================== */
/* כרטיסי הפרופילים. רדיו מוסתר + אריח -אותו דפוס של אריחי התבניות, עם
   ‎minmax(min(...))‎ ולא מינימום קשיח (מלכודת ה-240px המתועדת, בפעם הרביעית). */
.perf-profs {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(13.5rem, 100%), 1fr));
    gap: 0.7rem;
    margin-top: 0.6rem;
}
.perf-prof {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
    padding: 0.75rem 0.85rem;
    border: 2px solid rgba(255, 209, 90, 0.22);
    border-radius: 12px;
    background: rgba(255, 255, 255, 0.05);
    cursor: pointer;
    transition: border-color 0.18s ease, background 0.18s ease, transform 0.18s ease;
}
.perf-prof:hover { border-color: rgba(255, 209, 90, 0.5); background: rgba(255, 255, 255, 0.09); }
/* הקלט מוסתר אך נשאר נגיש למקלדת -אותו דפוס של המתגים */
.perf-prof input {
    position: absolute;
    width: 0; height: 0;
    opacity: 0;
}
.perf-prof.is-on {
    border-color: var(--c-gold, #ffd15a);
    background: rgba(255, 209, 90, 0.13);
    box-shadow: 0 0 14px rgba(255, 209, 90, 0.22);
}
.perf-prof:has(input:focus-visible) { outline: 3px solid var(--c-gold-light, #ffe7a3); outline-offset: 2px; }
.perf-prof-name { font-weight: 700; color: var(--c-gold-light, #ffe7a3); font-size: 1.02rem; }
.perf-prof-def {
    font-style: normal; font-weight: 600; font-size: 0.72rem;
    color: #0d2f52;
    background: var(--c-gold, #ffd15a);
    border-radius: 99px;
    padding: 0.1rem 0.5rem;
    margin-inline-start: 0.4rem;
    vertical-align: 2px;
}
.perf-prof-desc { font-size: 0.85rem; opacity: 0.85; line-height: 1.45; }
.perf-prof-nums { font-size: 0.8rem; opacity: 0.7; letter-spacing: 0.02em; }

/* דוח בדיקת העומס */
.perf-report {
    margin-top: 0.9rem;
    border: 1px solid rgba(255, 209, 90, 0.3);
    border-radius: 12px;
    padding: 0.9rem 1rem;
    background: rgba(6, 20, 44, 0.45);
}
.perf-report h4 { margin: 0 0 0.5rem; color: var(--c-gold-light, #ffe7a3); }
.perf-rep-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
    gap: 0.55rem;
    margin: 0.6rem 0;
}
.perf-rep-cell {
    background: rgba(255, 255, 255, 0.06);
    border-radius: 9px;
    padding: 0.5rem 0.6rem;
    text-align: center;
}
.perf-rep-cell b { display: block; font-size: 1.25rem; color: var(--c-gold-light, #ffe7a3); }
.perf-rep-cell span { font-size: 0.76rem; opacity: 0.8; }
.perf-rep-now { font-size: 0.85rem; opacity: 0.85; margin: 0.3rem 0 0; line-height: 1.6; }
/* השורה התחתונה -הפסק-דין */
.perf-verdict {
    margin-top: 0.7rem;
    padding: 0.6rem 0.8rem;
    border-radius: 9px;
    font-weight: 700;
    line-height: 1.5;
}
.perf-verdict.v-good { background: rgba(46, 160, 67, 0.18);  border: 1px solid rgba(46, 160, 67, 0.55); }
.perf-verdict.v-mid  { background: rgba(212, 167, 44, 0.16); border: 1px solid rgba(212, 167, 44, 0.55); }
.perf-verdict.v-bad  { background: rgba(207, 34, 46, 0.16);  border: 1px solid rgba(207, 34, 46, 0.55); }
/* התג הצף שמוצג בזמן שהפאנל מוסתר לצורך המדידה */
.perf-badge {
    position: fixed;
    inset-inline-start: 50%;
    bottom: 1.2rem;
    translate: 50% 0;             /* RTL: מרכוז פיזי */
    z-index: 300;
    background: rgba(6, 20, 44, 0.92);
    color: var(--c-gold-light, #ffe7a3);
    border: 1px solid rgba(255, 209, 90, 0.5);
    border-radius: 99px;
    padding: 0.55rem 1.1rem;
    font-weight: 700;
    pointer-events: none;
}

/* ================= בועת הוולידציה (‎.admin-vbubble‎) =================
   מחליפה את הבועה הנייטיבית של הדפדפן, שהיא באנגלית ואי אפשר לעצב אותה.

   **צבע שגיאה עצמאי ולא ערכת הפאנל ולא ערכת הדיאלוג.** הבועה יוצאת ל-‎body‎
   ומרחפת מעל שניהם -מעל הפאנל הכהה, מעל הדיאלוג הבהיר ומעל מסך הכניסה- ולכן
   ערכה שנגזרת מאחד מהם הייתה בלתי קריאה מעל השני. זו בדיוק המלכודת שכבר
   נקנתה כאן פעמיים (זהב על קלף בהיר בדיאלוגי התגיות ובבורר התמונות). אדום
   עמוק עם טקסט קרם קריא מעל כולם, והוא גם השפה המוסכמת לשגיאה. */
.admin-vbubble {
    position: fixed;
    z-index: 320;                 /* מעל הכול: פאנל 125, דיאלוגים 220-260, תג הביצועים 300 */
    max-width: min(22rem, calc(100vw - 1rem));
    display: flex;
    align-items: flex-start;
    gap: 0.45rem;
    padding: 0.55rem 0.8rem;
    border-radius: 0.7rem;
    background: linear-gradient(180deg, #9a2b32, #6f1a20);
    border: 1px solid rgba(255, 168, 168, 0.55);
    color: #ffeede;
    font-size: 0.9rem;
    font-weight: 600;
    line-height: 1.45;
    text-align: start;
    box-shadow: 0 10px 26px rgba(0, 0, 0, 0.45), inset 0 1px 0 rgba(255, 255, 255, 0.18);
    /* **חובה:** הבועה מרחפת מעל השדה, ובלי זה היא בולעת את הלחיצה עליו */
    pointer-events: none;
    opacity: 0;
    translate: 0 -4px;
    transition: opacity 0.16s ease, translate 0.16s ease;
}
.admin-vbubble.is-in { opacity: 1; translate: 0 0; }
.admin-vbubble.is-below { translate: 0 4px; }
.admin-vbubble.is-below.is-in { translate: 0 0; }
.admin-vbubble-i { flex: 0 0 auto; font-size: 0.95rem; line-height: 1.45; }

/* החץ. ‎--vb-arrow‎ נכתב מ-JS ומצביע על **השדה**, לא על מרכז הבועה */
.admin-vbubble::before {
    content: "";
    position: absolute;
    left: var(--vb-arrow, 1.2rem);
    width: 0.6rem;
    height: 0.6rem;
    rotate: 45deg;
    background: #6f1a20;
    border: 1px solid rgba(255, 168, 168, 0.55);
}
.admin-vbubble.is-below::before {
    top: -0.32rem;
    border-left: 0; border-top-color: rgba(255, 168, 168, 0.55);
    background: #9a2b32;          /* קצה הגרדיאנט העליון */
    border-inline-end: 0;
}
.admin-vbubble:not(.is-below)::before {
    bottom: -0.32rem;
    border-top: 0; border-inline-start: 0;
}

/* השדה עצמו. ‎!important‎ כי כל בורר בפאנל מגדיר גבול משלו, ומצב שגיאה חייב
   לגבור עליו -אחרת הבועה מצביעה על שדה שנראה תקין לגמרי. */
.admin-panel [aria-invalid="true"],
.admin-dialog [aria-invalid="true"],
.pf-zoom-win [aria-invalid="true"],
.admin-login [aria-invalid="true"] {
    border-color: #e2565f !important;
    box-shadow: 0 0 0 2px rgba(226, 86, 95, 0.28) !important;
}

@media (prefers-reduced-motion: reduce) {
    .admin-vbubble { transition: none; translate: 0 0; }
}

/* ================= מצב קוד בעורך (‎.wysi-code‎) =================
   ה-‎textarea‎ הוא **אח** של העורך ולא מחליף אותו: העורך נושא את מחסנית
   ה-UNDO, את המאזינים ואת מצב הטיוטה, וכל מודול בקובץ מחפש אותו לפי
   ‎.wysiwyg-editor‎. */
.wysi-code {
    display: block;
    width: 100%;
    box-sizing: border-box;
    min-height: 12rem;
    padding: 0.7rem 0.8rem;
    border: 0;
    border-radius: 0 0 0.6rem 0.6rem;
    background: #0d1b30;
    color: #cfe3ff;
    /* ‎LTR‎ ומונוספייס: HTML הוא טקסט לועזי, וב-RTL התגיות מתהפכות */
    direction: ltr;
    text-align: left;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 0.85rem;
    line-height: 1.6;
    tab-size: 2;
    resize: vertical;
    white-space: pre-wrap;
    word-break: break-word;
}
.wysi-code:focus { outline: 2px solid rgba(255, 209, 90, 0.55); outline-offset: -2px; }
.wysi-code[hidden] { display: none; }

/* המתג עצמו -נבדל משאר הכלים, כי הוא מחליף **מצב** ולא מבצע פקודה */
.wysi-code-btn { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.wysi-code-btn.is-on {
    background: var(--c-gold, #ffd15a);
    border-color: var(--c-gold-deep, #b8860b);
    color: #2a1c05;
    font-weight: 700;
}
/* **בקוד אין עיצוב.** כלי עיצוב שלוחצים עליו ולא קורה כלום נקרא כתקלה,
   ולכן במצב קוד הם מעומעמים ומנוטרלים -חוץ מהמתג עצמו. */
/* בלי ‎:has()‎ -הוא מתועד כאן כיקר, ושני כללים פשוטים עושים את אותו דבר. */
.wysiwyg.is-code .wysiwyg-toolbar > * { opacity: 0.35; pointer-events: none; }
.wysiwyg.is-code .wysiwyg-toolbar > .js-wysi-code,
.wysiwyg.is-code .wysiwyg-toolbar > .wysi-sep { opacity: 1; pointer-events: auto; }

/* ---- שם העמוד במרכז כותרת חלון העריכה ----
   ‎absolute‎ ולא פריט ב-flex: הכותרת היא ידית הגרירה עם שני קצוות (כותרת
   קבועה מימין, כפתורים משמאל), ופריט שלישי היה דוחף אותם ומזיז את הכפתורים
   בכל שם באורך אחר. במרכז **המוחלט** הוא יציב בלי קשר לאורך. */
/* **פריט flex ולא מרכז מוחלט.** ‎left: 50%‎ ממרכז מול הכותרת **כולה**,
   ולכן ברגע שהכפתורים משמאל רחבים (מד השקיפות + ארבעה כפתורים) המרכז
   הזה נופל עליהם -נמדד שהשם עלה על המחוון ועל ה-‎✕‎. כפריט עם ‎flex: 1‎
   ו-‎min-width: 0‎ הוא **ממלא את מה שנשאר** ומצטמצם בעצמו, ולכן אינו יכול
   לחפוף: הוא אינו דוחף אותם (‎min-width: 0‎ מתיר לו לרדת מתחת לרוחב
   התוכן) והם אינם דורכים עליו. ‎text-align: center‎ שומר על המראה. */
.pg-win-overlay .pf-zoom-head { position: relative; }
.pg-win-name {
    flex: 1 1 0;
    min-width: 0;
    text-align: center;
    margin-inline: 0.5rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 0.18rem 0.9rem;
    border-radius: 999px;
    background: linear-gradient(180deg, rgba(255, 209, 90, 0.18), rgba(255, 209, 90, 0.07));
    border: 1px solid rgba(255, 209, 90, 0.4);
    color: var(--c-gold-light, #ffe7a3);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.01em;
    text-shadow: 0 1px 2px rgba(6, 20, 44, 0.7);
    /* הכותרת היא ידית הגרירה -השם אינו אמור לבלוע את הגרירה */
    pointer-events: none;
}
.pg-win-name:empty { display: none; }
/* הכפתורים והמחוון לעולם אינם מצטמצמים -השם הוא היחיד שמוותר על מקום */
.pg-win-overlay .pf-zoom-head > :not(.pg-win-name) { flex-shrink: 0; }
/* בצר אין מקום לשלושה: הכפתורים והכותרת קודמים לשם */
@media (max-width: 700px) {
    .pg-win-name { font-size: 0.85rem; padding-inline: 0.55rem; }
}
@media (max-width: 520px) {
    .pg-win-name { display: none; }
}

/* עיצוב הקישורים (טיפוגרפיה) */
.link-style-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(9rem, 100%), 1fr));
    gap: 0.6rem;
    margin-bottom: 0.8rem;
}
.link-style-grid input[type="color"] { width: 100%; height: 2.2rem; padding: 2px; cursor: pointer; }
/* התצוגה נושאת ‎cms-content‎ ולכן היא מקבלת את כללי האתר עצמם -אבל הרקע כאן
   כהה, ולכן הטקסט שסביב הקישור חייב להיות בהיר. */
.link-style-pv {
    padding: 0.7rem 0.9rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #eaf2ff;
    font-size: 0.95rem;
}
.link-style-pv p { margin: 0; }

/* ================= טבלת הסימנים =================
   בתוך ‎.admin-dialog‎ הבהיר, ולכן הצבעים כאן כהים -כלל שכבר נקנה כאן
   פעמיים (דיאלוגי התגיות, בורר התמונות). */
.sym-search { margin-bottom: 0.7rem; }
.sym-search input { width: 100%; }
.sym-group { margin-bottom: 0.9rem; }
.sym-group[hidden] { display: none; }
.sym-group-title {
    display: block;
    margin-bottom: 0.35rem;
    color: var(--c-wood-deep);
    font-size: 0.82rem;
    font-weight: 800;
    opacity: 0.85;
}
.sym-grid {
    display: grid;
    /* ‎minmax(min(...), 1fr)‎ ולא מינימום קשיח -מלכודת מתועדת: מסילה עם
       מינימום קשיח אינה יורדת מתחתיו וגולשת בעמודה צרה. */
    grid-template-columns: repeat(auto-fill, minmax(min(2.6rem, 100%), 1fr));
    gap: 0.3rem;
}
.sym-cell {
    aspect-ratio: 1;
    min-height: 2.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 1px solid rgba(122, 82, 40, 0.28);
    border-radius: 0.45rem;
    background: rgba(255, 255, 255, 0.55);
    color: var(--c-wood-deep);
    font-size: 1.15rem;
    line-height: 1;
    cursor: pointer;
    touch-action: manipulation;   /* בלי "הקש-פעמיים-להגדלה" בטלפון */
    transition: background 0.12s ease, transform 0.12s ease;
}
.sym-cell[hidden] { display: none; }   /* ‎display: flex‎ גובר על ‎hidden‎ */
/* **ואותו דבר להודעת "לא נמצא".** ‎.admin-note‎ הוא ‎display: block‎, שגובר
   על ‎hidden‎ -נמדד שההודעה הוצגה בזמן שכל 128 הסימנים על המסך. זו המלכודת
   שכבר תועדה כאן חמש פעמים. וגם הצבעים: היא יורשת את ערכת הפאנל הכהה
   (זהב על זהב שקוף), והדיאלוג כאן **בהיר**. */
#symNone[hidden] { display: none; }
#symNone {
    color: #6b4a1e;
    background: rgba(122, 82, 40, 0.10);
    border-color: rgba(122, 82, 40, 0.30);
    border-right-color: rgba(122, 82, 40, 0.6);
}
.sym-cell:hover,
.sym-cell:focus-visible {
    background: var(--c-gold-light, #ffe7a3);
    border-color: var(--c-gold-deep, #b8860b);
    outline: none;
}
.sym-cell:active { transform: scale(0.92); }
/* יעד נגיעה במגע -חוק המובייל */
@media (pointer: coarse) {
    .sym-grid { grid-template-columns: repeat(auto-fill, minmax(min(2.9rem, 100%), 1fr)); }
    .sym-cell { min-height: 2.75rem; font-size: 1.25rem; }
}

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

   ‎top‎ מקזז את הריפוד של אזור הגלילה: ‎sticky‎ נמדד מול ה-padding box, ולכן
   ‎top: 0‎ נעצר את הריפוד מתחת לקצה ומשאיר רצועה שדרכה מציץ מה שגלל. */
.page-save-row.is-sticky {
    position: sticky;
    top: calc(-1 * var(--scroll-pad, 0px));
    z-index: 3;
    margin: -0.2rem -0.2rem 0.9rem;
    padding: 0.55rem 0.2rem;
    background: linear-gradient(180deg, rgba(13, 40, 78, calc(0.97 * var(--admin-see, 1))),
                                        rgba(13, 40, 78, calc(0.93 * var(--admin-see, 1))));
    backdrop-filter: none;             /* רואים את האתר מאחור -חוק הפרויקט */
    border-bottom: 1px solid rgba(255, 209, 90, 0.22);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}
.page-save-row.is-sticky .page-save-btns,
.page-save-row.is-sticky .page-view-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.page-save-row.is-sticky .page-view-btns { margin-inline-start: auto; }
.page-save-row.is-sticky .page-view-btns[hidden] { display: none; }
/* "ביטול" הוא ההרסני מבין השלושה -ולכן נבדל, כמו בדיאלוג היציאה */
#pageCancelEdit { color: #ffb3b8; border-color: rgba(226, 86, 95, 0.45); }
#pageCancelEdit:hover { background: rgba(226, 86, 95, 0.18); }
/* בטלפון עמודת התוכן צרה, והכפתורים נשברים לשלוש שורות שגוזלות גובה קבוע
   מאזור העריכה -חוק המובייל. שורה אחת נגללת, כמו בשורת הפרויקט. */
@media (max-width: 640px) {
    .page-save-row.is-sticky {
        flex-wrap: nowrap;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
    }
    .page-save-row.is-sticky .page-save-btns,
    .page-save-row.is-sticky .page-view-btns { flex-wrap: nowrap; }
    .page-save-row.is-sticky .admin-ubtn { white-space: nowrap; }
}

/* עורך מוקטן לשדות קצרים (כתובית ושורת הערה בעמוד הבית).
   אותו ‎.wysiwyg‎ ואותו סרגל -רק הגובה שונה, כי אלה שורה או שתיים ולא מסמך. */
.wysi-mini .wysiwyg-editor { min-height: 4.2rem; font-size: 0.95rem; }
.wysi-mini .wysiwyg-toolbar { padding: 0.3rem; }

/* ================= מצב סייבר (פאנל) ================= */
.cyber-box { margin-top: 0.7rem; padding-top: 0.7rem; border-top: 1px solid rgba(91, 163, 230, 0.28); }
.cyber-box .admin-switch-label small { display: block; font-size: 0.72rem; opacity: 0.75; font-weight: 500; }
.cyber-opts { margin-top: 0.7rem; }
.cyber-opts[hidden] { display: none; }
.cyber-styles {
    display: grid;
    /* ‎minmax(min(...), 1fr)‎ -מסילה עם מינימום קשיח אינה יורדת מתחתיו
       בעמודה צרה, מלכודת מתועדת */
    grid-template-columns: repeat(auto-fit, minmax(min(8.5rem, 100%), 1fr));
    gap: 0.5rem;
    margin-bottom: 0.7rem;
}
.cyber-style { cursor: pointer; }
/* התיבה מוסתרת ב-‎clip-path‎ ולא ב-‎display: none‎ -אחרת היא יוצאת מסדר
   ה-Tab ומקורא המסך (חוק מתועד) */
.cyber-style input {
    position: absolute; width: 1px; height: 1px; margin: 0;
    clip-path: inset(50%); overflow: hidden;
}
.cyber-style-in {
    display: block;
    border: 1px solid rgba(91, 163, 230, 0.35);
    border-radius: 0.6rem;
    background: rgba(6, 26, 52, 0.45);
    overflow: hidden;
    transition: border-color 0.15s, background 0.15s;
}
.cyber-style:hover .cyber-style-in { border-color: rgba(145, 200, 245, 0.7); }
.cyber-style input:checked + .cyber-style-in {
    border-color: var(--c-gold, #d39a1a);
    background: rgba(211, 154, 26, 0.14);
}
.cyber-style input:focus-visible + .cyber-style-in { outline: 2px solid var(--c-gold-light, #ffe7a3); outline-offset: 2px; }
.cyber-style-name { display: block; padding: 0.32rem 0.5rem; font-size: 0.76rem; color: #cfe8ff; }
.cyber-style input:checked + .cyber-style-in .cyber-style-name { color: #ffe7a3; font-weight: 700; }

/* תצוגה מקדימה זעירה -**סטטית ולא מונפשת**: ארבע תצוגות רצות בפאנל הן
   ארבע שכבות קומפוזיטור על מסך שכבר מחזיק סצנה מונפשת. הצורה מספיקה כדי
   לבחור. */
.cyber-prev { position: relative; display: block; height: 3.1rem; background: #061a34; overflow: hidden; }
.cyber-prev i { position: absolute; display: block; }
.cyber-prev[data-cy="matrix"] i { top: -10%; width: 2px; height: 120%;
    background: linear-gradient(180deg, transparent, rgba(90,255,160,0.8)); }
.cyber-prev[data-cy="matrix"] i:nth-child(1) { left: 22%; height: 85%; }
.cyber-prev[data-cy="matrix"] i:nth-child(2) { left: 52%; }
.cyber-prev[data-cy="matrix"] i:nth-child(3) { left: 78%; height: 60%; }
.cyber-prev[data-cy="neural"] i { width: 6px; height: 6px; border-radius: 50%;
    background: rgba(150,220,255,0.95); box-shadow: 0 0 8px rgba(90,190,255,0.8); }
.cyber-prev[data-cy="neural"] i:nth-child(1) { left: 20%; top: 30%; }
.cyber-prev[data-cy="neural"] i:nth-child(2) { left: 55%; top: 62%; }
.cyber-prev[data-cy="neural"] i:nth-child(3) { left: 80%; top: 25%; }
/* פיקסלים משובשים: שלושה אריחים בשלושה גוונים, מוסטים -ההפרדה לערוצים
   היא מה שקורא כשיבוש. סטטית, כמו שאר התצוגות (חוק מתועד: תצוגות רצות הן
   שכבות קומפוזיטור על מסך שכבר מחזיק סצנה מונפשת). */
.cyber-prev[data-cy="pixel"] i { width: 11px; height: 8px; }
.cyber-prev[data-cy="pixel"] i:nth-child(1) { left: 20%; top: 26%; background: rgba(120,255,214,0.9); }
.cyber-prev[data-cy="pixel"] i:nth-child(2) { left: 46%; top: 55%; background: rgba(80,220,255,0.8); }
.cyber-prev[data-cy="pixel"] i:nth-child(3) { left: 68%; top: 30%; background: rgba(255,90,200,0.75); }
/* אקראי: שלוש צורות משלושת הסגנונות זו לצד זו -האריח אומר "מתחלף". */
.cyber-prev[data-cy="random"] i:nth-child(1) { left: 18%; top: 22%; width: 3px; height: 56%; background: rgba(120,255,150,0.9); }
.cyber-prev[data-cy="random"] i:nth-child(2) { left: 44%; top: 42%; width: 7px; height: 7px; border-radius: 50%; background: rgba(120,220,255,0.9); }
.cyber-prev[data-cy="random"] i:nth-child(3) { left: 66%; top: 34%; width: 15px; height: 9px; background: rgba(255,90,200,0.8); }
/* פלג: הרשת ברקע ומעליה עמודה ורצועה -שלושת הרכיבים בבת אחת */
.cyber-prev[data-cy="peleg"] {
    background-image:
        repeating-linear-gradient(90deg, rgba(90,200,255,0.3) 0 1px, transparent 1px 13px),
        repeating-linear-gradient(0deg,  rgba(90,200,255,0.3) 0 1px, transparent 1px 13px),
        linear-gradient(#061a34, #061a34);
}
.cyber-prev[data-cy="peleg"] i:nth-child(1) { left: 26%; top: 8%; width: 2px; height: 62%; background: linear-gradient(180deg, transparent, rgba(120,255,214,0.95)); }
.cyber-prev[data-cy="peleg"] i:nth-child(2) { left: 46%; top: 56%; width: 34px; height: 7px; background: rgba(120,255,214,0.9); }
.cyber-prev[data-cy="peleg"] i:nth-child(3) { left: 52%; top: 26%; width: 22px; height: 5px; background: rgba(255,90,200,0.7); }
/* סרט ישן: גרעיניות ושתי שריטות. סטטית, כמו כל התצוגות. */
.cyber-prev[data-cy="film"], .cyber-prev[data-cy="mix"] {
    background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='90' height='90'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='90' height='90' filter='url(%23n)' opacity='0.3'/%3E%3C/svg%3E"),
        radial-gradient(ellipse at center, transparent 40%, rgba(0,0,0,0.5) 100%),
        linear-gradient(#12100c, #12100c);
}
.cyber-prev[data-cy="film"] i:nth-child(1) { left: 28%; top: 4%; width: 1px; height: 90%; background: rgba(255,250,230,0.7); }
.cyber-prev[data-cy="film"] i:nth-child(2) { left: 63%; top: 18%; width: 1px; height: 62%; background: rgba(255,250,230,0.45); }
.cyber-prev[data-cy="film"] i:nth-child(3) { left: 79%; top: 8%; width: 1px; height: 40%; background: rgba(255,250,230,0.3); }
/* מיקס: שריטה ופס גליץ' -שני הרכיבים בבת אחת */
.cyber-prev[data-cy="mix"] i:nth-child(1) { left: 30%; top: 4%; width: 1px; height: 90%; background: rgba(255,250,230,0.65); }
.cyber-prev[data-cy="mix"] i:nth-child(2) { left: 6%; top: 32%; width: 88%; height: 5px; background: linear-gradient(90deg, transparent, rgba(255,60,160,0.75) 30%, rgba(60,240,255,0.75) 65%, transparent); }
.cyber-prev[data-cy="mix"] i:nth-child(3) { left: 6%; top: 62%; width: 88%; height: 3px; background: linear-gradient(90deg, transparent, rgba(60,240,255,0.6), transparent); }
/* ---- אופק ניאון: התצוגה היחידה שרצה, ובלי 3D ----
   **הגרסה הקודמת חזרה בדיוק על התקלה שכבר תועדה באפקט עצמו:**
   ‎perspective(90px)‎ עם ‎rotateX(72deg)‎ על אריח בגובה ‎3.1rem‎ דוחס את
   הרשת לקו -נמדד בצילום כפס אופקי עם קוץ אנכי אחד, כלומר "סטטי ולא
   אומר כלום". משטח מוטה נדחס, וככל שהתיבה קטנה כך יותר.

   כאן הפרספקטיבה **מצוירת ולא מוקרנת**: מניפה של קרניים מנקודת המגוז
   (‎repeating-conic-gradient‎ מ-‎50% 0%‎) נותנת את ההתכנסות בכל גודל, ואינה
   יכולה להתמוטט לקו. הקווים האופקיים אחידים, וזה מספיק -המניפה היא מה
   שקורא כעומק.

   **וזו התצוגה היחידה שמונפשת.** שאר התשע סטטיות בכוונה (תצוגה רצה היא
   שכבת קומפוזיטור על מסך שכבר מחזיק סצנה מונפשת), אבל אופק ריק אינו
   מוסר את מה שהאפקט הזה **הוא** -זרימה אל הצופה. המחיר הוא שכבה אחת,
   ‎transform‎ בלבד, והסעיף מקופל ברוב הזמן. */
.cyber-prev[data-cy="neon"] {
    background-image:
        radial-gradient(120% 72% at 50% 62%, rgba(255,70,190,0.4), transparent 62%),
        linear-gradient(180deg, #120a2e 0%, #2b0f47 52%, #431253 100%);
}
/* קו האופק והזוהר שלו -על הפסבדו, כדי שיצויר מעל הרשת ומעל השמש */
.cyber-prev[data-cy="neon"]::after {
    content: '';
    position: absolute;
    left: 0; right: 0; top: 56%;
    height: 2px;
    background: rgba(255,196,236,0.95);
    box-shadow: 0 0 9px 2px rgba(255,70,190,0.75);
}
/* המניפה: קרניים שמתכנסות אל נקודת המגוז שבאמצע קו האופק */
.cyber-prev[data-cy="neon"] i:nth-child(1) {
    left: -18%; right: -18%; width: auto; top: 56%; bottom: 0;
    background-image: repeating-conic-gradient(from 152deg at 50% 0%,
        rgba(120,255,232,0.75) 0deg 0.9deg, transparent 0.9deg 6deg);
}
/* הקווים האופקיים -זורמים אל הצופה. מרחק התנועה הוא **בדיוק תקופת
   הדפוס** (‎7px‎), אחרת המחזור נקטע באמצעו וקופץ -אותו כלל שנקנה במפל. */
.cyber-prev[data-cy="neon"] i:nth-child(2) {
    left: 0; right: 0; width: auto; top: 56%; bottom: -7px;
    background-image: repeating-linear-gradient(180deg,
        rgba(255,70,190,0.8) 0 1px, transparent 1px 7px);
    animation: cyprev-neon 1.7s linear infinite;
}
@keyframes cyprev-neon { to { transform: translateY(7px); } }
/* השמש: הדיסק המשוסע שהוא חתימת הסגנון. יושב **מאחורי** קו האופק, ולכן
   חציו התחתון נגזר בו ונראה כשוקע. */
.cyber-prev[data-cy="neon"] i:nth-child(3) {
    left: 50%; top: 56%; width: 26px; height: 26px;
    margin-left: -13px; margin-top: -19px;
    border-radius: 50%;
    background-image:
        repeating-linear-gradient(180deg, transparent 0 3px, rgba(18,10,46,0.9) 3px 4.3px),
        linear-gradient(180deg, #ffe98a 0%, #ff62aa 58%, #a92bff 100%);
    box-shadow: 0 0 14px rgba(255,90,185,0.8);
}
@media (prefers-reduced-motion: reduce) {
    .cyber-prev[data-cy="neon"] i:nth-child(2) { animation: none; }
}
.cyber-prev[data-cy="glitch"] i { left: 0; width: 100%; height: 5px;
    background: linear-gradient(90deg, transparent, rgba(255,60,160,0.7), rgba(60,240,255,0.7), transparent); }
.cyber-prev[data-cy="glitch"] i:nth-child(1) { top: 26%; }
.cyber-prev[data-cy="glitch"] i:nth-child(2) { top: 50%; transform: translateX(-8%); }
.cyber-prev[data-cy="glitch"] i:nth-child(3) { top: 70%; transform: translateX(6%); }
.cyber-prev[data-cy="circuit"] i { height: 2px; background: rgba(120,245,255,0.6); box-shadow: 0 0 6px rgba(120,245,255,0.6); }
.cyber-prev[data-cy="circuit"] i:nth-child(1) { left: 8%; top: 32%; width: 45%; }
.cyber-prev[data-cy="circuit"] i:nth-child(2) { left: 40%; top: 58%; width: 52%; rotate: -12deg; }
.cyber-prev[data-cy="circuit"] i:nth-child(3) { left: 15%; top: 76%; width: 30%; rotate: 8deg; }
.cyber-level output { min-width: 4.5rem; text-align: center; }


/* ---- צבע הרקע כשההרים מוסתרים ---- */
.sky-solid-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.6rem;
    margin-top: 0.7rem;
    padding-top: 0.7rem;
    border-top: 1px solid rgba(255, 209, 90, 0.16);
}
.sky-solid-row[hidden] { display: none; }
/* ‎min-width: 0‎ כדי שהשדות ירדו מתחת לרוחב התוכן במקום לגלוש -אותה
   מלכודת שכבר תועדה כאן על ‎minmax‎ ועל שורת המחוון. */
.sky-solid-row .admin-ufield { flex: 1 1 8rem; min-width: 0; }
.sky-solid-row input[type="color"] { width: 100%; height: 2.1rem; }


/* ---- דיאלוג "יציאה מהעריכה": שלושת הכפתורים בשורה אחת ----
   הדיאלוג הוא ‎.admin-dialog-sm‎ (‎min(20rem, 94%)‎) ושורת הפעולות היא
   ‎flex-wrap: wrap‎, ולכן שלושה כפתורים בטקסט מלא נשברו לשתי שורות
   ו"שמירה ויציאה" -הפעולה הבטוחה, זו שמקבלת את הפוקוס- נדחקה לשורה
   משלה. הדיאלוג מתרחב למה שהם צריכים, והם מתחלקים ברוחב שווה. */
#winExitOverlay .admin-dialog { width: min(30rem, 96%); }
#winExitOverlay .admin-dialog-actions {
    flex-wrap: nowrap;
    gap: 0.4rem;
}
#winExitOverlay .admin-dialog-actions > button {
    flex: 1 1 0;
    min-width: 0;                 /* בלעדיו פריט flex אינו יורד מתחת לרוחב התוכן */
    white-space: nowrap;
    padding-inline: 0.55rem;
    text-align: center;
}
/* בטלפון צר אין 30rem, ואז עדיף לשבור מאשר לחתוך טקסט */
@media (max-width: 420px) {
    #winExitOverlay .admin-dialog-actions { flex-wrap: wrap; }
    #winExitOverlay .admin-dialog-actions > button { flex: 1 1 8rem; }
}


/* אריח סגנון שלא ניתן לבחור -הגעת לתקרת הסגנונות שרצים יחד.
   **מעומעם ולא מוסתר**: מה שנעלם נקרא כתקלה, ומה שמעומעם אומר
   "שחרר אחד קודם". אותה החלטה שכבר תועדה כאן על צ׳יפי התגיות. */
.cyber-style.is-locked { cursor: not-allowed; }
.cyber-style.is-locked .cyber-style-in { opacity: 0.38; filter: grayscale(0.5); }

/* כפתור התצוגה המקדימה שבשורה הדביקה של הבתים: השם משתנה עם הבית שנערך,
   ולכן הוא חייב להתכווץ במקום לדחוף את כפתור השמירה מהשורה. */
.hc-preview-top { min-width: 0; }
.hc-preview-top #hcPreviewTopName {
    display: inline-block; max-width: 16rem;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom;
}
.hc-preview-top[disabled] { opacity: 0.5; cursor: not-allowed; }
@media (max-width: 640px) {
    .hc-preview-top #hcPreviewTopName { max-width: 8.5rem; }
}

/* שורות הפקדים של המצב הסטטי (טאב ⚡ ביצועים): ההודעה למבקר (‎lt‎) והספים
   (‎lm‎) הם אותו רכיב בדיוק, ולכן כלל אחד -שני כללים זהים היו נפרדים
   בשינוי הראשון. ‎minmax(min(...), 1fr)‎ ולא מינימום קשיח -אותה מלכודת
   שכבר תועדה כאן בגלריית העבודות ובשעות התאורה. */
.lt-grid,
.lm-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr));
    gap: 0.7rem;
    align-items: end;
    margin-top: 0.6rem;
}
.lt-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.8rem; }

/* שורת הקצב הנמדד בסעיף המצב הסטטי. **בלעדיה הסף הוא מספר מופשט** -
   המנהל אינו יודע מה הקצב אצלו, ולכן אינו יודע לאן לכוון. */
.lm-rate {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-wrap: wrap;
    margin: 0.6rem 0 0.2rem;
    padding: 0.5rem 0.7rem;
    border-radius: 0.6rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 231, 163, 0.2);
}
.lm-rate-num {
    font: 800 1.35rem/1 ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;
    color: var(--c-gold-light, #ffe7a3);
    direction: ltr;
    unicode-bidi: isolate;   /* מספר לועזי בתוך שורה עברית */
}
.lm-rate-txt { font-size: 0.82rem; opacity: 0.8; }
.lm-rate .admin-ubtn { margin-inline-start: auto; }
.admin-ubtn-sm { padding: 0.25rem 0.6rem; font-size: 0.8rem; }
/* אזהרה: אותו ‎admin-hint‎, בגוון שאומר "שים לב" */
.admin-hint.is-warn { color: var(--c-gold-light, #ffe7a3); font-weight: 600; }

/* שם התפריט מתחת לשם העמוד בעץ הצד (נשלח רק כשהוא קיים ושונה מהכותרת).
   **שתי שורות רק כשיש מה להראות** -‎has-nav‎ במקום ‎:has()‎, שהפרויקט כבר
   מדד כיקר כשנושאו רחב. כל שורה נחתכת בנפרד, אחרת שם ארוך גולש מהמגירה. */
.admin-nav-leaf-title.has-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.05rem;
    white-space: normal;
    line-height: 1.25;
}
.admin-nav-leaf-name,
.admin-nav-leaf-nav {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.admin-nav-leaf-nav {
    font-size: 0.76em;
    font-weight: 400;
    opacity: 0.68;
}
/* ‎::before‎ ולא טקסט: החיפוש בפאנל מאנדקס ‎textContent‎, ותווית קבועה
   בתוכו הייתה מוצאת "בתפריט" בכל עמוד. */
.admin-nav-leaf-nav::before { content: "בתפריט: "; opacity: 0.75; }

/* ---------- גיבוי ושחזור ----------
   שורת מתג רגילה (‎.admin-switch‎) עם הסבר בשורה שנייה: כל קבוצה נושאת גם
   שם, גם מונה קבצים וגם גודל, וכל אלה בשורה אחת נחתכים בעמודת התוכן הצרה
   של המובייל -אותה מלכודת שכבר תועדה כאן על שורת פריט הגלריה. */
.bk-group { align-items: flex-start; margin-block: 0.55rem; }
.bk-group .admin-switch-label { display: block; line-height: 1.5; }
.bk-group .admin-switch-label small {
    display: block;
    margin-top: 0.15rem;
    font-size: 0.82rem;
    font-weight: 400;
    opacity: 0.78;
}
/* אזהרת פרטי הגישה נקראת כאזהרה ולא כעוד הסבר */
.bk-group .bk-warn-txt { color: #ffc9a1; opacity: 0.95; }
/* מתג ‎db‎ מושבת בכוונה -מעומעם, אבל הטקסט שלידו חייב להישאר קריא */
.bk-group input:disabled + .admin-switch-track { opacity: 0.55; }

.bk-row {
    display: flex;
    flex-wrap: wrap;             /* בעמודת מובייל צרה הכפתור והסיכום יורדים לשתי שורות */
    align-items: center;
    gap: 0.6rem;
    margin-top: 0.8rem;
}
.bk-file-btn { display: inline-block; }        /* ‎<label>‎ הוא inline, וריפוד עליו לא היה נספר */
.bk-total { font-size: 0.86rem; opacity: 0.8; }
.bk-warn { border-inline-start: 3px solid #d9714a; padding-inline-start: 0.6rem; }

.bk-preview {
    margin-top: 0.9rem;
    padding: 0.7rem 0.8rem;
    border: 1px solid rgba(255, 231, 163, 0.28);
    border-radius: 12px;
    background: rgba(255, 231, 163, 0.06);
}
/* ‎display: flex‎ גובר על ‎hidden‎ (חוק מתועד), ולכן הוא נדרש במפורש */
.bk-preview[hidden] { display: none; }

.bk-snap {
    display: grid;
    /* ‎min(...)‎ ולא מינימום קשיח: מסילה עם מינימום קבוע אינה יורדת מתחתיו,
       וב-390px היא גולשת מהקופסה -אותה מלכודת שכבר תועדה כאן שלוש פעמים. */
    grid-template-columns: minmax(min(14rem, 100%), 1fr) auto auto;
    gap: 0.3rem 0.8rem;
    padding: 0.35rem 0;
    font-size: 0.86rem;
    border-bottom: 1px solid rgba(255, 231, 163, 0.14);
}
.bk-snap:last-child { border-bottom: 0; }
.bk-snap > span:first-child { overflow-wrap: anywhere; }

/* ---- עוצמה פר-סגנון בבורר הסייבר ----
   התא הוא **עוטף** ולא תווית: ‎<label>‎ שעוטף תיבת סימון תופס כל לחיצה
   שבתוכו, ולכן מחוון שיושב בפנים היה מכבה את הסגנון בכל גרירה. */
.cyber-style-cell { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cyber-style-cell > .cyber-style { flex: 1 1 auto; }
.cyber-style-lvl {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    padding: 0.25rem 0.4rem 0.35rem;
    border: 1px solid rgba(91, 163, 230, 0.28);
    border-radius: 0.5rem;
    background: rgba(6, 26, 52, 0.35);
    cursor: default;
}
/* ‎display: flex‎ גובר על ‎hidden‎ (חוק מתועד), ולכן הוא נדרש במפורש */
.cyber-style-lvl[hidden] { display: none; }
.cyber-style-lvl-txt { font-size: 0.72rem; opacity: 0.85; }
.cyber-style-lvl-txt b { font-variant-numeric: tabular-nums; }
.cyber-style-lvl .admin-range { width: 100%; min-width: 0; }

/* ---- כוונון פר-סגנון בבורר הסייבר ----
   כרטיס לכל סגנון שנבחר, ובו מחוון עוצמה ומחוון לכל אובייקט. **מתחת לרשת
   ולא בתוך האריח**: באריח של ‎8.5rem‎ אין מקום לארבעה מחוונים, ו-‎<label>‎
   שעוטף תיבת סימון תופס כל לחיצה שבתוכו -גרירת מחוון שם הייתה מכבה את
   הסגנון שזה עתה כוונן. */
.cyber-tune { display: grid; gap: 0.5rem; margin: 0.6rem 0 0.7rem; }
.cyber-tune:empty { display: none; }
.cy-card {
    padding: 0.5rem 0.65rem 0.6rem;
    border: 1px solid rgba(91, 163, 230, 0.28);
    border-radius: 0.6rem;
    background: rgba(6, 26, 52, 0.35);
}
.cy-card-head {
    font-weight: 700;
    font-size: 0.9rem;
    margin-bottom: 0.35rem;
    color: var(--c-gold-light);
}
/* כותרת קבוצה בתוך כרטיס הסגנון. **שכבות התאורה אינן ספירת אובייקטים**,
   ומחוון בשם "ריצוד" באותה רשימה עם "נקודות אבק" נקרא כעוד ספירה. */
.cy-sub {
    margin: 0.55rem 0 0.15rem;
    padding-top: 0.45rem;
    border-top: 1px solid rgba(255, 214, 122, 0.18);
    font-size: 0.76rem;
    color: rgba(255, 226, 168, 0.72);
}
/* שתי שורות ולא אחת: התווית נושאת שם, מספר ולעיתים גם "(מוצגים N)", וכל
   אלה בשורה אחת עם המחוון נחתכים בעמודת המובייל -אותה מלכודת שכבר תועדה
   כאן על שורת פריט הגלריה. */
.cy-row {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    margin-block: 0.3rem;
    cursor: default;
}
/* **יעד הנגיעה הוא התווית ולא מסילת המחוון** (חוק מתועד
   בפרויקט): המסילה עצמה נמדדה ‎8px‎, והשורה היא ‎<label>‎ שכל לחיצה
   בשטחה מגיעה אל המחוון. */
@media (pointer: coarse) {
    .cy-row { min-height: 2.75rem; justify-content: center; }
}
/* שורת משנה של האובייקט שמעליה (מהירות): **הזחה וקו ולא
   תו חץ**, שנגזר מהגופן ונקרא בעברית כאות זרה. */
.cy-row-sub { margin-block-start: 0; }
/* **ההזחה על התווית ולא על השורה.** על השורה היא מקצרת גם את המחוון,
   ואז מסילות המשנה נגמרות ‎13px‎ לפני האחרות -נמדד, וזה נקרא כשורות לא
   מיושרות. כל המחוונים באותו רוחב, וההיררכיה נשארת בטקסט. */
.cy-row-sub .cy-row-txt {
    opacity: 0.72;
    padding-inline-start: 0.7rem;
    border-inline-start: 2px solid rgba(255, 214, 122, 0.22);
}
.cy-row-txt { font-size: 0.76rem; opacity: 0.88; }
.cy-row-txt b { font-variant-numeric: tabular-nums; }
.cy-row .admin-range { width: 100%; min-width: 0; }