/* עיצוב בסיסי, נגיש, RTL. ניגודיות עומדת ב-AA עבור טקסט וכפתורים. */
:root {
  --bg: #f7f7fb;
  --surface: #ffffff;
  --text: #1a1a2e;
  --muted: #52526b;
  --primary: #1d4ed8;
  --primary-contrast: #ffffff;
  --danger: #b3261e;
  --success: #146c2e;
  --warning: #8a5300;
  --border: #d7d7e3;
  --focus: #f59e0b;
}

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --bg: #14141f;
    --surface: #1e1e2e;
    --text: #f2f2f7;
    --muted: #b8b8cc;
    --border: #35354a;
  }
}
html[data-theme="dark"] {
    --bg: #14141f;
    --surface: #1e1e2e;
    --text: #f2f2f7;
    --muted: #b8b8cc;
    --border: #35354a;
  }

* { box-sizing: border-box; }

html { font-size: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Segoe UI", Arial, Helvetica, sans-serif;
  line-height: 1.6;
}

.skip-link {
  position: absolute;
  right: -999px;
  top: 0;
  background: var(--primary);
  color: var(--primary-contrast);
  padding: 0.75rem 1rem;
  z-index: 1000;
  border-radius: 0 0 0 6px;
}
.skip-link:focus {
  right: 0;
}

a { color: var(--primary); }
a:focus, button:focus, input:focus, select:focus, textarea:focus, [tabindex]:focus {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--border);
}
.main-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0.75rem 1rem;
  gap: 1rem;
}
.brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; }
.nav-links {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
.nav-links a { text-decoration: none; padding: 0.35rem 0.25rem; }
.nav-links a:hover { text-decoration: underline; }
.nav-badge {
  display: inline-block;
  min-width: 1.15rem;
  height: 1.15rem;
  padding: 0 0.3rem;
  margin-inline-start: 0.3rem;
  border-radius: 999px;
  background: var(--danger);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.15rem;
  text-align: center;
  vertical-align: middle;
}
.nav-links form { display: inline; margin: 0; }
.nav-links button.link-button {
  background: none;
  border: none;
  color: var(--primary);
  padding: 0.35rem 0.25rem;
  font: inherit;
  cursor: pointer;
}
.nav-links button.link-button:hover { text-decoration: underline; }

.site-main {
  max-width: 1100px;
  margin: 0 auto;
  padding: 1.5rem 1rem 4rem;
}

.flash-region { max-width: 1100px; margin: 0 auto; padding: 0 1rem; }
.messages { list-style: none; margin: 1rem 0; padding: 0; display: grid; gap: 0.5rem; }
.message {
  padding: 0.75rem 1rem;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: var(--surface);
}
.message-error { border-color: var(--danger); color: var(--danger); }
.message-success { border-color: var(--success); color: var(--success); }
.message-warning { border-color: var(--warning); color: var(--warning); }

.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.25rem;
}
.card h2, .card h3 { margin-top: 0; }

.grid { display: grid; gap: 1rem; }
.grid-2 { grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); }
.grid-3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

.stat { font-size: 2rem; font-weight: 700; }
.stat-label { color: var(--muted); }

table { width: 100%; border-collapse: collapse; }
th, td { text-align: right; padding: 0.6rem 0.5rem; border-bottom: 1px solid var(--border); }
caption { text-align: right; color: var(--muted); margin-bottom: 0.5rem; }

form.stack { display: grid; gap: 0.9rem; max-width: 520px; }
label { font-weight: 600; display: block; margin-bottom: 0.25rem; }
.help-text { color: var(--muted); font-size: 0.9rem; margin-top: 0.15rem; }
.field-error { color: var(--danger); font-size: 0.9rem; }

input[type=text], input[type=email], input[type=password], input[type=tel],
input[type=number], input[type=time], select, textarea, input[type=file] {
  width: 100%;
  padding: 0.55rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  color: var(--text);
  font-size: 1rem;
}

button, .btn {
  display: inline-block;
  background: var(--primary);
  color: var(--primary-contrast);
  border: none;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 1rem;
  cursor: pointer;
  text-decoration: none;
}
button:hover, .btn:hover { filter: brightness(0.92); }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--danger); }
button[disabled] { opacity: 0.6; cursor: not-allowed; }

.badge {
  display: inline-block;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  font-size: 0.85rem;
  border: 1px solid var(--border);
}
.badge-ok { color: var(--success); border-color: var(--success); }
.badge-warn { color: var(--warning); border-color: var(--warning); }
.badge-error { color: var(--danger); border-color: var(--danger); }

.ltr { direction: ltr; unicode-bidi: isolate; display: inline-block; }

.site-footer {
  max-width: 1100px;
  margin: 2rem auto 0;
  padding: 1rem;
  color: var(--muted);
  font-size: 0.9rem;
  border-top: 1px solid var(--border);
}

/* רשימת שיחות (בסגנון אפליקציית צ'אט) - ראו chatqueue/conversations.html */
.conversation-card { padding: 0; }
.conversation-list { list-style: none; margin: 0; padding: 0; }
.conversation-list li { border-bottom: 1px solid var(--border); }
.conversation-list li:last-child { border-bottom: none; }
.conversation-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  text-decoration: none;
  color: inherit;
}
.conversation-row:hover { background: var(--bg); }
.conversation-row-main { display: grid; gap: 0.2rem; min-width: 0; }
.conversation-name { font-weight: 700; }
.conversation-preview {
  color: var(--muted);
  font-size: 0.92rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.conversation-row-meta { display: grid; gap: 0.3rem; justify-items: end; text-align: end; flex-shrink: 0; }
.conversation-time { color: var(--muted); font-size: 0.85rem; }
.conversation-unread { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.conversation-empty { padding: 1.25rem; margin: 0; }

/* תצוגת שיחה בודדת - בועות צ'אט. עמוד כולו RTL, ולכן ההודעות "שלנו"
   (יוצאות) מיושרות לצד שמאל וההודעות הנכנסות לצד ימין - בהתאם למוסכמה
   של אפליקציות מסרים מוכרות בעברית (למשל WhatsApp/Telegram). */
/* לבקשת המשתמש: כפתורי-העזר (רענון/תגובות/תיקון) עברו לסרגל נפרד מחוץ
   לריבוע השיחה, לא מוערמים בפנים מתחתיה. במסכים רחבים (desktop) הסרגל
   יושב "בצד" (עמודה צרה, כלומר row רגיל שב-RTL שם את האלמנט-הראשון-ב-HTML
   מימין - בדיוק איפה שהצד "אליו נכנסים" הודעות בתצוגת השיחה, ראו
   chat-bubble-row-in). במסכים צרים (נייד - שם רוב השימוש באפליקציה הזו,
   לפי צילומי המסך שסופקו) אין ממש מקום ל"בצד" בלי לדחוק את בועות השיחה
   לרצועה צרה מדי - אז מתחת ל-720px הסרגל עובר לשורה קומפקטית מעל ריבוע
   השיחה (עדיין *מחוץ* לריבוע, רק לא "בצד" ממש). */
.conversation-layout { display: flex; align-items: flex-start; gap: 1rem; }
.chat-toolbar { flex: 0 0 240px; padding: 1rem; }
.chat-toolbar h2 { font-size: 1rem; margin: 0 0 0.6rem; color: var(--muted); }
.chat-toolbar .conversation-refresh-form { margin: 0 0 0.5rem; text-align: stretch; }
.chat-toolbar .conversation-refresh-form button { width: 100%; font-size: 0.85rem; }
@media (max-width: 720px) {
  .conversation-layout { flex-direction: column; }
  .chat-toolbar { flex-basis: auto; width: 100%; display: flex; flex-wrap: wrap; gap: 0.5rem; padding: 0.85rem; }
  .chat-toolbar h2 { flex-basis: 100%; margin-bottom: 0.2rem; }
  .chat-toolbar .conversation-refresh-form { flex: 1 1 auto; margin: 0; }
  .chat-toolbar .conversation-refresh-form button { width: 100%; }
}
.chat-window { display: flex; flex-direction: column; gap: 1rem; flex: 1; min-width: 0; }
/* קו-מפריד "מכאן סומן כלא נקרא" (ראו action=mark_unread_from_message) -
   מוצג פעם אחת בטעינת העמוד הזו בדיוק מעל ההודעה שסומנה, ונעלם בכניסה
   הבאה (הסימון מתאפס אוטומטית, בדיוק כמו כל "לא נקרא" אחר כאן). */
.chat-unread-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0.3rem 0;
}
.chat-unread-divider span {
  background: var(--primary);
  color: var(--primary-contrast);
  font-size: 0.8rem;
  padding: 0.2rem 0.8rem;
  border-radius: 999px;
}
/* פס אדום לפני ההודעות החדשות - בדיוק כמו בגוגל צ'אט (קו דק לפני תחילת
   ההודעות שלא נקראו). ראו views.conversation_detail/first_unread_message_id.
   list-item ריק לגמרי, רק קו - בכוונה בלי טקסט/תגית, כדי להיראות כמה שיותר
   קרוב לעיצוב המקורי בגוגל צ'אט. */
.chat-new-messages-divider {
  height: 0;
  border-top: 2px solid #d93025;
  margin: 0.6rem 0;
}
.chat-bubbles {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  max-height: 60vh;
  overflow-y: auto;
}
/* שורת-הודעה: הבועה עצמה + סרגל הפעולות (תגובת-אימוג'י/סימניה) לצידה,
   ולא מוערמים אחד מתחת לשני כמו קודם - יותר קרוב לאיך שגוגל צ'אט מציגה
   פעולות-הודעה (לצד הבועה, לא בתוכה). ב-RTL, שיחה "נכנסת" מיושרת לימין
   וה"יוצאת" לשמאל (ראו chat-bubble-in/out למטה) - אז סרגל הפעולות של
   הודעה נכנסת יושב משמאל לבועה (row רגיל), ושל הודעה יוצאת מימין לבועה
   (row-reverse), כלומר תמיד "כלפי מרכז" השיחה ולא נדחק לקצה המסך. */
.chat-bubble-row { display: flex; align-items: flex-end; gap: 0.35rem; max-width: 100%; }
.chat-bubble-row-in { justify-content: flex-start; }
.chat-bubble-row-out { justify-content: flex-end; flex-direction: row-reverse; }
.chat-bubble {
  max-width: min(32rem, 80%);
  padding: 0.55rem 0.85rem;
  border-radius: 14px;
  border: 1px solid var(--border);
}
.chat-bubble-in { background: var(--bg); }
.chat-bubble-out { background: var(--primary); color: var(--primary-contrast); border-color: var(--primary); }
.chat-bubble-unread { border-color: var(--focus); border-width: 2px; }
.chat-bubble-sender { font-weight: 700; font-size: 0.85rem; margin-bottom: 0.15rem; }
.chat-bubble-text { white-space: pre-wrap; word-break: break-word; }
.chat-bubble-time {
  margin-top: 0.3rem;
  font-size: 0.75rem;
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.chat-bubble-out .chat-bubble-time .badge { border-color: var(--primary-contrast); color: var(--primary-contrast); }
.chat-bubble-attachments { display: grid; gap: 0.4rem; margin: 0.3rem 0; }
.chat-attachment-image { max-width: 220px; max-height: 220px; border-radius: 8px; display: block; }
.chat-attachment-video { max-width: 260px; max-height: 260px; border-radius: 8px; display: block; background: #000; }
.chat-attachment-file {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.4rem 0.6rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--card-bg, var(--surface));
  color: inherit;
  text-decoration: none;
  font-size: 0.85rem;
}
.chat-bubble-out .chat-attachment-file { border-color: var(--primary-contrast); }
.chat-bubble-reactions { display: flex; flex-wrap: wrap; gap: 0.3rem; margin: 0.3rem 0; }
.chat-reaction-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--bg);
  border: 1px solid var(--border);
  font-size: 0.85rem;
}
.chat-bubble-out .chat-reaction-pill { background: rgba(255, 255, 255, 0.15); border-color: var(--primary-contrast); }
.chat-bubble-cards { display: grid; gap: 0.4rem; margin: 0.3rem 0; max-width: 320px; }
.chat-card-title { font-weight: 700; }
.chat-card-image { max-width: 100%; border-radius: 8px; display: block; }
.chat-card-text { font-size: 0.92rem; }
.chat-card-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  background: var(--primary);
  color: var(--primary-contrast);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 600;
  width: fit-content;
}
.chat-bubble-out .chat-card-button { background: var(--primary-contrast); color: var(--primary); }
.chat-bubble-bookmarked { border-color: #d4a017; border-width: 2px; }
.chat-bubble-quote {
  display: block;
  border-right: 3px solid var(--border);
  padding: 0.25rem 0.5rem;
  margin-bottom: 0.35rem;
  background: rgba(0, 0, 0, 0.04);
  border-radius: 6px;
  text-decoration: none;
  color: inherit;
  font-size: 0.85rem;
}
.chat-bubble-out .chat-bubble-quote { background: rgba(255, 255, 255, 0.15); border-right-color: var(--primary-contrast); }
.chat-bubble-quote-sender { font-weight: 700; opacity: 0.85; }
.chat-bubble-quote-text { opacity: 0.85; white-space: pre-wrap; word-break: break-word; }
/* תרגום הודעה לעברית (ידני/אוטומטי, ראו services.translate_to_hebrew) -
   קטע נפרד מתחת לטקסט המקורי, בדוגמת עיצוב chat-bubble-quote למעלה אך
   בצבע שונה כדי להבדיל בבירור בין "מה שנכתב" ל"תרגום" */
.chat-bubble-translation {
  display: block;
  border-right: 3px solid var(--primary, #2563eb);
  padding: 0.25rem 0.5rem;
  margin-top: 0.35rem;
  background: rgba(37, 99, 235, 0.08);
  border-radius: 6px;
  font-size: 0.9rem;
  white-space: pre-wrap;
  word-break: break-word;
}
.chat-bubble-out .chat-bubble-translation { background: rgba(255, 255, 255, 0.15); border-right-color: var(--primary-contrast); }
.chat-bubble-translation-label { font-weight: 700; opacity: 0.85; display: block; margin-bottom: 0.15rem; font-size: 0.78rem; }
.chat-attachment-zip-link { font-size: 0.78rem; opacity: 0.85; display: inline-block; }
button.chat-attachment-zip-link { background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; color: inherit; text-decoration: underline; }
.chat-attachment-drive-form { display: inline; }
/* סרגל הפעולות עכשיו יושב *לצד* הבועה (אח שלה בתוך chat-bubble-row), לא
   מוערם בתוכה - ראו chat-bubble-row למעלה. עמודה צרה, כפתורים אחד מתחת
   לשני, כדי שלא "יגנוב" רוחב ממסכים צרים. */
.chat-bubble-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  flex-shrink: 0;
}
.chat-bubble-reaction-form { display: none; }
.chat-emoji-trigger {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: 999px;
  width: 1.9rem;
  height: 1.9rem;
  padding: 0;
  cursor: pointer;
  font-size: 1.05rem;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.chat-bookmark-btn {
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.1rem 0.4rem;
  cursor: pointer;
  font-size: 0.75rem;
  white-space: nowrap;
}

/* פופ-אפ בורר האימוג'ים המשותף (כפתור "😊" - ראו conversation_detail.html) -
   פאנל קבוע (fixed) במרכז-תחתית המסך, במקום מחושב-מיקום ליד כל כפתור בנפרד -
   פשוט ואמין יותר על כל גודל מסך (כולל נייד), במחיר קטן של לא "להיצמד"
   בדיוק לכפתור שנלחץ. */
.emoji-picker-popup {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 40;
  background: var(--card-bg, var(--surface));
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
  padding: 0.6rem;
  max-width: min(22rem, 92vw);
  max-height: 45vh;
  overflow-y: auto;
}
.emoji-picker-grid {
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 0.15rem;
}
.emoji-picker-item {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 1.15rem;
  line-height: 1.6;
  border-radius: 6px;
  padding: 0.1rem;
}
.emoji-picker-item:hover { background: var(--bg); }
.chat-compose-row { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 0.4rem; }
.chat-compose-row textarea { flex: 1; min-width: 0; }
/* כפתור "צירוף קובץ" שנכנס לשורה - תמיד בשורה משלו מתחת, ולא דוחס את תיבת ההודעה */
.chat-compose-row > .text-attach { flex-basis: 100%; order: 3; }
.chat-bookmarks-bar { font-size: 0.85rem; padding: 0.5rem 0.85rem; }
.chat-bookmark-link { margin-left: 0.3rem; }
.conversation-detail-topbar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; flex-wrap: wrap; }
.conversation-load-older-form, .conversation-refresh-form { margin: 0 0 0.6rem 0; text-align: center; }
.conversation-refresh-form { margin: 0.6rem 0; }
.chat-reply-form { max-width: none; }
.conversation-empty { color: var(--muted); }

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; }
}

/* מפת ניווט והוראות לטלפון - קריא על המסך ובהדפסה */
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.table-scroll { overflow-x: auto; }
.navmap-did { font-size: 1.25rem; font-weight: 700; }
.navmap-table th, .navmap-table td {
  border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: right; vertical-align: top;
}
.navmap-table thead th { background: var(--bg); }
.navmap-key {
  font-weight: 700; font-size: 1.2rem; text-align: center !important; white-space: nowrap; width: 5.5rem;
}
.navmap-unavailable td { color: var(--muted); }
.navmap-warnings { border-inline-start: 4px solid var(--warning); }
.navmap-rules li, .navmap-shortcuts li { margin-bottom: 0.4rem; }
.navmap-shortcuts { list-style: none; padding: 0; }
.navmap-key-chip {
  display: inline-block; min-width: 1.8rem; padding: 0 0.4rem; margin-inline-end: 0.2rem;
  border: 2px solid var(--text); border-radius: 50%; text-align: center; font-weight: 700;
}
.navmap-keys { display: inline-block; min-width: 7rem; }

@media print {
  .site-header, .site-footer, .flash-region, .skip-link, .no-print { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .card { border: 1px solid #999; box-shadow: none; break-inside: avoid; page-break-inside: avoid; background: #fff; }
  .navmap-table th, .navmap-table td { border-color: #666; color: #000; }
  .navmap-unavailable td { color: #444; }
  a { color: #000; text-decoration: none; }
  @page { size: A4; margin: 10mm; }
  body { font-size: 9.5pt; line-height: 1.35; }
  .site-main { max-width: none; padding: 0; margin: 0; }
  .navmap { column-count: 2; column-gap: 6mm; }
  .navmap-head { column-span: all; margin-bottom: 3mm; }
  .navmap-head h1 { margin: 0 0 1mm; font-size: 16pt; }
  .navmap-head p { margin: 0.5mm 0; }
  .navmap .card { padding: 2.5mm 3mm; margin: 0 0 4mm; border-radius: 3mm; display: inline-block; width: 100%; }
  .navmap .card h2 { font-size: 11.5pt; margin: 0 0 1.5mm; }
  .navmap .card p, .navmap .card ul, .navmap .card ol { margin: 1mm 0; }
  .navmap-table th, .navmap-table td { padding: 1mm 2mm; }
  .navmap-key { font-size: 11pt; width: 13mm; }
  .help-text { font-size: 8.5pt; color: #333; }
}

/* תוויות "ספאם" / "ממתינה לאישור" לשיחות */
.badge-danger { color: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); }
.space-status { font-size: 0.8rem; font-weight: 700; vertical-align: middle; }
.alert-warn { border: 1px solid var(--warning); border-radius: 0.5rem; padding: 0.75rem 1rem; background: var(--surface, #fff); }

/* חיפוש בשיחות */
.search-form { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.search-form input[type="search"] { flex: 1 1 16rem; min-width: 0; }
.search-results { list-style: none; padding: 0; margin: 0; }
.search-result { padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.search-result-meta { font-size: 0.85rem; color: var(--muted); margin-bottom: 0.2rem; }
.search-result-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.search-result mark { background: #fde68a; color: inherit; padding: 0 0.1rem; border-radius: 0.2rem; }

/* שורת חיפוש רחבה עם תוצאות תוך כדי הקלדה (בסגנון Google Chat) */
.live-search { position: relative; width: 100%; margin: 0 0 1rem; }
.live-search input[type="search"] {
  width: 100%; box-sizing: border-box; font-size: 1.05rem; padding: 0.75rem 1.1rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface, #fff);
}
.live-search input[type="search"]:focus { outline: 2px solid var(--primary, #1d4ed8); outline-offset: 1px; }
.live-search-panel {
  position: absolute; inset-inline: 0; top: calc(100% + 0.35rem); z-index: 50;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 0.75rem;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12); max-height: 70vh; overflow-y: auto; padding: 0.35rem 0;
}
.live-search-heading { font-size: 0.8rem; font-weight: 700; color: var(--muted); padding: 0.4rem 1rem 0.2rem; }
.live-search-item { display: block; padding: 0.5rem 1rem; color: inherit; text-decoration: none; }
.live-search-item:hover, .live-search-item:focus { background: var(--bg, #f3f4f6); }
.live-search-item .search-result-meta { display: block; }
.live-search-item .search-result-text { display: block; overflow-wrap: anywhere; }
.live-search-all { display: block; padding: 0.5rem 1rem; font-weight: 700; }
.live-search-empty { padding: 0.5rem 1rem; margin: 0; }

/* מונה תעבורה + אזהרת קובץ גדול */
.bandwidth-notice summary { cursor: pointer; }
.bandwidth-notice p { margin: 0.5rem 0; }
.bandwidth-high { border-inline-start: 4px solid var(--warning); }
.large-file-warning { border: 1px solid var(--warning); border-radius: 0.5rem; padding: 0.6rem 0.9rem; margin: 0.5rem 0; }

/* מייל */
.mail-list { list-style: none; padding: 0; margin: 0.75rem 0; }
.mail-item { border-bottom: 1px solid var(--border); }
.mail-item a { display: grid; grid-template-columns: auto minmax(8rem, 12rem) 1fr auto; gap: 0.15rem 0.75rem; align-items: center;
  padding: 0.6rem 0.4rem; color: inherit; text-decoration: none; }
.mail-item a:hover, .mail-item a:focus { background: var(--bg, #f3f4f6); }
.mail-item a > .vc-avatar { grid-column: 1; grid-row: 1 / 3; }
.mail-who { grid-column: 2; grid-row: 1; }
.mail-subject { grid-column: 3; grid-row: 1; font-weight: 500; }
.mail-snippet { grid-column: 2 / 4; grid-row: 2; color: var(--muted); font-size: 0.9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-date { grid-row: 1; grid-column: 4; font-size: 0.85rem; color: var(--muted); white-space: nowrap; }
.mail-unread .mail-who, .mail-unread .mail-subject { font-weight: 800; }
.mail-unread .vc-avatar { box-shadow: 0 0 0 2px var(--surface, #fff), 0 0 0 4px var(--gold, #E8B931); }
.mail-headers { display: grid; grid-template-columns: auto 1fr; column-gap: 0.9rem; align-items: center; }
.mail-headers > .vc-avatar { grid-row: 1 / span 6; align-self: start; }
.mail-headers p { margin: 0.25rem 0; grid-column: 2; }
.mail-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0.75rem 0; }
.mail-body { white-space: normal; overflow-wrap: anywhere; line-height: 1.6; }
.mail-attachments { list-style: none; padding: 0; }
.mail-attachments li { padding: 0.4rem 0; border-bottom: 1px solid var(--border); }
.mail-thread-item summary { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }

/* ציטוט של הודעה קודמת - מקופל, כדי שכל מייל יהיה קצר וקריא */
.mail-quote { margin-top: 0.9rem; }
.mail-quote > summary { display: inline-block; cursor: pointer; padding: 0.15rem 0.7rem; border-radius: 999px;
  border: 1px solid var(--border); color: var(--muted); font-size: 0.9rem; list-style: none; }
.mail-quote > summary::-webkit-details-marker { display: none; }
.mail-quote[open] > summary { margin-bottom: 0.5rem; }
.mail-quote > div { border-inline-start: 3px solid var(--border); padding-inline-start: 0.8rem; color: var(--muted); }

/* תמונת שולח: עיגול עם ראשי תיבות, צבע קבוע לכל אדם */
.vc-avatar { display: inline-grid; place-items: center; flex-shrink: 0; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  background: hsl(var(--h, 220) 55% 46%); color: #fff; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.02em;
  line-height: 1; user-select: none; }
.vc-avatar-sm { width: 1.8rem; height: 1.8rem; font-size: 0.75rem; }
.vc-avatar-lg { width: 3.2rem; height: 3.2rem; font-size: 1.2rem; }

/* במסך רחב: הרשימה וחלונית הקריאה זו לצד זו */
.mail-reader { display: none; }
@media (min-width: 1100px) {
  .mail-split.is-reading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 1rem; align-items: start; }
  .mail-split.is-reading .mail-reader { display: block; position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem);
    overflow: auto; margin: 0.75rem 0; }
  .mail-split.is-reading .mail-item a { grid-template-columns: auto 1fr auto; }
  .mail-split.is-reading .mail-subject { grid-column: 2 / 4; grid-row: 2; }
  .mail-split.is-reading .mail-snippet { display: none; }
  .mail-split.is-reading .mail-date { grid-column: 3; }
  .mail-item.is-open { background: var(--gold-soft, #FFF4D1); box-shadow: inset -4px 0 0 var(--gold, #E8B931); }
  .mail-reader-bar { display: flex; gap: 0.5rem; justify-content: flex-end; margin-bottom: 0.5rem; }
  .mail-reader h1 { font-size: 1.35rem; }
}
@media (max-width: 640px) {
  .mail-item a { grid-template-columns: auto 1fr auto; }
  .mail-who { grid-column: 2; }
  .mail-date { grid-column: 3; }
  .mail-subject { grid-column: 2 / 4; grid-row: 2; }
  .mail-snippet { grid-column: 2 / 4; grid-row: 3; }
  .mail-item a > .vc-avatar { grid-row: 1 / 4; align-self: start; }
}

/* =====================================================================
   v74 - עיצוב חדש (לבקשת המשתמש, ברוח האתר של וירטואל מייל - לא העתקה):
   כחול-לילה + זהב, שלושה אזורים כמו שלוחות הטלפון, ודף בית של "מקשים".
   הבלוק הזה בא בסוף הקובץ בכוונה: הוא דורס את הצבעים/הכפתורים/הכותרת
   הישנים, כך שכל העמודים הקיימים מקבלים את המראה החדש בלי לגעת בכל אחד.
   ===================================================================== */
@font-face {
  font-family: "Rubik";
  src: url("fonts/rubik-hebrew-wght-normal.bda074a677ba.woff2") format("woff2");
  font-weight: 300 900; font-display: swap;
  unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
@font-face {
  font-family: "Rubik";
  src: url("fonts/rubik-latin-wght-normal.b65daadded74.woff2") format("woff2");
  font-weight: 300 900; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ink: #16233F;          /* כחול-לילה: כותרת, באנר, טקסט חזק */
  --ink-2: #22335A;
  --gold: #E8B931;         /* פעולה ראשית */
  --gold-soft: #FFF4D1;
  --paper: #F6F7FB;
  --bg: var(--paper);
  --surface: #FFFFFF;
  --text: #1B2438;
  --muted: #5B6478;
  --border: #DDE1EA;
  --primary: #1F4FA8;      /* קישורים */
  --mail: #9B2335;         /* זהות אזור המייל (כמו הסמל של וירטואל מייל) */
  --chat: #1F6FB2;         /* זהות אזור הצ'אט */
  --system: #4E5A70;       /* זהות ניהול מערכת */
  --radius-lg: 18px;
  --radius: 12px;
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --paper: #0F1729; --bg: #0F1729; --surface: #18223A; --text: #EEF1F7; --muted: #AEB7CA;
    --border: #2C3A5C; --primary: #8DB6FF; --gold-soft: #3A3113;
  }
}
html[data-theme="dark"] {
    --paper: #0F1729; --bg: #0F1729; --surface: #18223A; --text: #EEF1F7; --muted: #AEB7CA;
    --border: #2C3A5C; --primary: #8DB6FF; --gold-soft: #3A3113;
  }

body { font-family: "Rubik", "Segoe UI", Arial, sans-serif; font-size: 1.02rem; line-height: 1.65; }
h1 { font-size: clamp(1.6rem, 1.2rem + 1.2vw, 2.2rem); font-weight: 700; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); }
h2 { font-size: 1.3rem; font-weight: 650; line-height: 1.3; }
h3 { font-size: 1.08rem; font-weight: 600; }

/* ---- כותרת עליונה ---- */
.site-header { background: var(--ink); border-bottom: 0; color: #fff; position: relative; }
.main-nav { max-width: 1180px; padding: 0.7rem 1.25rem; gap: 0.75rem 1.5rem; }
.brand { display: inline-flex; align-items: center; gap: 0.6rem; color: #fff; font-size: 1.1rem; font-weight: 700; }
.brand-mark { width: 38px; height: 38px; flex: none; }
.site-header a { color: #fff; }
.section-tabs { list-style: none; display: flex; gap: 0.4rem; margin: 0; padding: 0; flex-wrap: wrap; }
.section-tab {
  display: inline-flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.95rem 0.45rem 1.05rem;
  border-radius: 999px; text-decoration: none; font-weight: 600; color: #DCE3F2 !important;
  border: 1px solid transparent;
}
.section-tab:hover { background: var(--ink-2); color: #fff !important; }
.section-tab.is-active { background: var(--gold); color: var(--ink) !important; }
.section-digit {
  display: inline-grid; place-items: center; width: 1.6rem; height: 1.6rem; border-radius: 7px;
  background: rgba(255,255,255,0.12); font-weight: 800; font-size: 0.95rem;
}
.section-tab.is-active .section-digit { background: var(--ink); color: var(--gold); }
.header-user { display: flex; align-items: center; gap: 1rem; font-size: 0.95rem; }
.header-user form { margin: 0; }
.header-user .link-button, .nav-links button.link-button {
  background: none; border: 0; color: #C9D2E6; padding: 0; font: inherit; cursor: pointer; text-decoration: underline;
}
.header-home { color: #C9D2E6 !important; }
.nav-links a { color: #fff; }

/* שורת העמודים של האזור - פס צבע האזור מלמטה מסמן איפה נמצאים */
.sub-nav { background: var(--surface); border-bottom: 3px solid var(--system); }
.sub-nav-mail { border-bottom-color: var(--mail); }
.sub-nav-chat { border-bottom-color: var(--chat); }
.sub-nav ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.2rem 0.4rem; max-width: 1180px; margin: 0 auto; padding: 0.35rem 1.25rem; }
.sub-nav a { display: inline-block; padding: 0.45rem 0.8rem; border-radius: 8px; text-decoration: none; color: var(--muted) !important; font-weight: 500; }
.sub-nav a:hover { color: var(--text) !important; background: var(--paper); }
.sub-nav a.is-active { color: var(--text) !important; font-weight: 700; background: var(--paper); }

.site-main { max-width: 1180px; padding: 1.75rem 1.25rem 4rem; }
.flash-region { max-width: 1180px; padding: 0 1.25rem; }

/* ---- רכיבים ---- */
.card { border-radius: var(--radius); border-color: var(--border); padding: 1.35rem 1.5rem; }
button, .btn { border-radius: 10px; font-weight: 600; background: var(--ink); padding: 0.6rem 1.15rem; font-family: inherit; }
.btn-gold, button.btn-gold { background: var(--gold); color: var(--ink) !important; }
.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-danger { background: var(--danger); }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=time], input[type=search], select, textarea, input[type=file] { border-radius: 10px; font-family: inherit; }
:focus-visible { outline: 3px solid var(--gold) !important; outline-offset: 2px; }
.message { border-radius: 10px; }

.site-footer {
  max-width: none; margin: 3rem 0 0; padding: 1.75rem 1.25rem; border-top: 0;
  background: var(--ink); color: #BFC8DC; text-align: center; font-size: 0.88rem;
}
.site-footer p { max-width: 70ch; margin: 0.3rem auto; }
.site-footer a { color: var(--gold); }

/* ---- דף הבית: באנר + "מקשים" ---- */
.hub-hero {
  background: var(--ink); color: #fff; border-radius: var(--radius-lg);
  padding: 1.75rem 2rem; margin-bottom: 1.75rem;
}
.hub-hero h1 { color: #fff; margin: 0 0 0.35rem; }
.hub-summary { font-size: 1.15rem; margin: 0; color: #fff; }
.hub-hint { margin: 0.6rem 0 0; color: #AFC0DD; font-size: 0.95rem; }

.keypad { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }
.key {
  --key: var(--system);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg);
  box-shadow: 0 5px 0 0 var(--border);          /* "קצה" של מקש - נראה כמו כפתור שאפשר ללחוץ */
  display: flex; flex-direction: column; overflow: hidden;
}
.key-mail { --key: var(--mail); }
.key-chat { --key: var(--chat); }
.key-face { display: block; padding: 1.4rem 1.5rem 1.1rem; color: inherit !important; text-decoration: none; position: relative; }
.key-face:hover .key-digit { transform: translateY(2px); }
.key-digit {
  display: grid; place-items: center; width: 3.4rem; height: 3.4rem; border-radius: 14px;
  background: var(--key); color: #fff; font-size: 1.9rem; font-weight: 800; margin-bottom: 0.9rem;
  box-shadow: 0 3px 0 0 rgba(0,0,0,0.25); transition: transform 0.12s ease;
}
.key h2 { margin: 0 0 0.25rem; font-size: 1.45rem; }
.key-status { margin: 0; color: var(--muted); }
.key-status strong { color: var(--text); }
.key-actions { list-style: none; margin: auto 0 0; padding: 0.75rem 1.5rem 1.1rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; border-top: 1px solid var(--border); }
.key-actions a { font-weight: 600; color: var(--key) !important; text-decoration: none; }
.key-actions a:hover { text-decoration: underline; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .key-actions a { color: var(--primary) !important; }
}
html[data-theme="dark"] .key-actions a { color: var(--primary) !important; }

@media (max-width: 820px) {
  .keypad { grid-template-columns: 1fr; }
  .section-tab { padding: 0.4rem 0.75rem; }
  .header-user { width: 100%; justify-content: flex-end; }
}
@media (prefers-reduced-motion: reduce) { .key-digit { transition: none; } }

/* תיקונים אחרי בדיקה ויזואלית */
body { min-height: 100vh; display: flex; flex-direction: column; }
.site-main { flex: 1 0 auto; width: 100%; }
.site-footer { flex-shrink: 0; }
.search-form { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.search-form input[type=search], .search-form input[type=text] {
  flex: 1 1 16rem; width: auto; min-height: 2.75rem; padding: 0.55rem 1rem;
  border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 1rem;
}
@media (max-width: 820px) {
  .section-tabs { width: 100%; flex-wrap: nowrap; }
  .section-tabs li { flex: 1 1 0; }
  .section-tab { width: 100%; justify-content: center; padding: 0.45rem 0.4rem; font-size: 0.95rem; }
}

/* עמוד תעבורה ותקרה */
.bw-figure { font-size: clamp(2rem, 1.5rem + 2vw, 2.8rem); font-weight: 800; margin: 0 0 0.5rem; color: var(--text); }
.bw-facts { list-style: none; padding: 0; margin: 0.75rem 0 0; display: flex; flex-wrap: wrap; gap: 0.35rem 1.75rem; }

/* ---------------------------------------------------------------------------
   v77 (לבקשת המשתמש: "עיצוב האתר כהה מדי"): עיצוב בהיר. הכותרת, התחתית,
   הבאנר בדף הבית והכפתורים עוברים מכחול-לילה לרקע בהיר. הזהב נשאר כסימן
   של האזור הפעיל, והכחול - לקישורים ולכפתורים. במצב כהה של המחשב הכל
   מתאים את עצמו (לפי המשתנים --surface/--text).
--------------------------------------------------------------------------- */
:root { --primary: #1D5FD1; --btn: #2563EB; --btn-hover: #1D4ED8; }
.site-header {
  background: var(--surface); color: var(--text);
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 10px rgba(22, 35, 63, 0.05);
}
.site-header a, .brand { color: var(--text); }
.section-tab { color: var(--text) !important; background: var(--paper); border-color: var(--border); }
.section-tab:hover { background: var(--gold-soft); color: var(--text) !important; }
.section-tab.is-active { background: var(--gold); color: #16233F !important; border-color: var(--gold); }
.section-digit { background: rgba(22, 35, 63, 0.08); }
.section-tab.is-active .section-digit { background: #16233F; color: var(--gold); }
.header-user .link-button, .nav-links button.link-button, .header-home { color: var(--primary) !important; }
.nav-links a { color: var(--text); }
.sub-nav { background: var(--paper); }

.site-footer { background: var(--surface); color: var(--muted); border-top: 1px solid var(--border); }
.site-footer a { color: var(--primary); }

.hub-hero {
  background: linear-gradient(135deg, #FFF7DD 0%, #EAF2FF 100%); color: #16233F;
  border: 1px solid var(--border);
}
.hub-hero h1, .hub-summary { color: #16233F; }
.hub-hint { color: #4A5670; }

button, .btn { background: var(--btn); color: #fff; }
.btn-secondary, button.btn-secondary { background: var(--surface); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover, button.btn-secondary:hover { background: var(--paper); }
.btn-danger, button.btn-danger { background: var(--danger); }
.btn-gold, button.btn-gold { background: var(--gold); color: #16233F !important; }
/* כפתורי הנגן - בהירים, לא כחולים מלאים */
.vcp button {
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
}
.vcp .vcp-play { background: var(--gold); color: #16233F; border-color: var(--gold); }
.vcp-stage { background: #EEF2F9; }
.vcp-video { background: #000; }

@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --primary: #8DB6FF; --btn: #3B6FD8; --btn-hover: #2F5DBD; }
  html:not([data-theme="light"]) .hub-hero { background: linear-gradient(135deg, #2A2412 0%, #17233D 100%); color: var(--text); }
  html:not([data-theme="light"]) .hub-hero h1, html:not([data-theme="light"]) .hub-summary { color: var(--text); }
  html:not([data-theme="light"]) .hub-hint { color: var(--muted); }
  html:not([data-theme="light"]) .section-digit { background: rgba(255, 255, 255, 0.1); }
  html:not([data-theme="light"]) .vcp-stage { background: #0B1222; }
}
html[data-theme="dark"] { --primary: #8DB6FF; --btn: #3B6FD8; --btn-hover: #2F5DBD; }
html[data-theme="dark"] .hub-hero { background: linear-gradient(135deg, #2A2412 0%, #17233D 100%); color: var(--text); }
html[data-theme="dark"] .hub-hero h1, html[data-theme="dark"] .hub-summary { color: var(--text); }
html[data-theme="dark"] .hub-hint { color: var(--muted); }
html[data-theme="dark"] .section-digit { background: rgba(255, 255, 255, 0.1); }
html[data-theme="dark"] .vcp-stage { background: #0B1222; }

/* צריכה לפי זמן (עמוד תעבורה) */
.bw-table { width: 100%; border-collapse: collapse; margin: 0.5rem 0 1.25rem; font-size: 0.95rem; }
.bw-table th, .bw-table td { padding: 0.35rem 0.5rem; border-bottom: 1px solid var(--border); text-align: start; }
.bw-bar-cell { width: 40%; }
.bw-bar { display: inline-block; height: 0.8rem; min-width: 2px; background: var(--gold); border-radius: 4px; vertical-align: middle; }
.bw-empty td { color: var(--muted); }
.bw-empty .bw-bar { display: none; }
.bw-kinds { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 0.3rem 1.5rem; }

/* סימון כמה פריטים ופעולה על כולם */
.bulk-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.25rem 0 0.75rem; border-bottom: 1px solid var(--border); margin-bottom: 0.25rem; }
.bulk-bar button { padding: 0.4rem 0.8rem; font-size: 0.92rem; }
.bulk-all { display: inline-flex; gap: 0.35rem; align-items: center; font-weight: 600; margin-inline-end: 0.5rem; }
.conversation-item { display: flex; align-items: center; gap: 0.6rem; }
.conversation-item .conversation-row { flex: 1; min-width: 0; }
.bulk-check, .bulk-all input { width: 1.2rem; height: 1.2rem; flex: none; accent-color: var(--gold); }
.mail-item { display: flex; align-items: center; gap: 0.6rem; }
.mail-item > a { flex: 1; min-width: 0; }
.mail-labels { margin-top: 0.4rem; display: flex; flex-wrap: wrap; gap: 0.35rem; align-items: center; }
.compose-buttons { display: flex; gap: 0.6rem; flex-wrap: wrap; }
.blocked-list { list-style: none; padding: 0; }
.blocked-list li { display: flex; gap: 1rem; align-items: center; padding: 0.4rem 0; border-bottom: 1px solid var(--border); }

/* כל תוויות Gmail תחת כפתור אחד */
.mail-labels-menu { margin-top: 0.4rem; }
.mail-labels-menu > summary { display: inline-block; cursor: pointer; list-style: none; }
.mail-labels-menu > summary::-webkit-details-marker { display: none; }
.mail-labels-menu[open] > .mail-labels { padding: 0.5rem; border: 1px solid var(--border, #d0d7de); border-radius: 8px; }

/* עמוד חיבורי ספקים */
.btn-row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
#gemini details, #assemblyai details, #yemot details, #advanced details { margin: 0.5rem 0; }
#advanced > details { border-top: 1px solid var(--border); padding-top: 0.5rem; }

/* עיצוב תמלול */
.fmt-panel h3 { margin: 1rem 0 0.4rem; font-size: 1.05rem; }
.fmt-options { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 0.6rem; }
.fmt-option { display: flex; flex-direction: column; gap: 0.35rem; padding: 0.75rem; border: 1px solid var(--border); border-radius: 10px; }
.fmt-presets { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.fmt-preset { display: inline-flex; align-items: center; gap: 0.3rem; padding: 0.35rem 0.7rem; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; }
.fmt-keep { border: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 1rem; }
.fmt-result { line-height: 1.8; margin-top: 0.75rem; }
.fmt-result h2, .fmt-result h3 { margin: 1.2rem 0 0.4rem; }
.fmt-result mark { background: #fff3a3; color: inherit; padding: 0 0.15em; border-radius: 3px; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) .fmt-result mark { background: #6b5a00; }
}
html[data-theme="dark"] .fmt-result mark { background: #6b5a00; }

/* ===========================================================================
   v85 (לבקשת המשתמש: "שכל ההגדרות יהיו יותר מסודרות ומעוצבות יפה, וכן כל
   האתר"): ליטוש כללי - כרטיסים, כותרות, טפסים, טבלאות והודעות - ועמוד
   הגדרות מסודר לפי נושאים. מבוסס על המשתנים הקיימים, עובד גם במצב כהה.
=========================================================================== */
:root { --radius: 14px; --shadow: 0 1px 2px rgba(16,24,40,.05), 0 4px 14px rgba(16,24,40,.06); --soft: #f1f4fb; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) { --soft: #25253a; --shadow: 0 1px 2px rgba(0,0,0,.4); }
}
html[data-theme="dark"] { --soft: #25253a; --shadow: 0 1px 2px rgba(0,0,0,.4); }

h1 { font-size: clamp(1.5rem, 1.2rem + 1.2vw, 2rem); letter-spacing: -0.01em; }
.card { border-radius: var(--radius); box-shadow: var(--shadow); border-color: var(--border); padding: 1.25rem 1.4rem; }
.card > h2:first-child, .card > h2 { font-size: 1.2rem; margin-top: 0; }
.card + .card { margin-top: 1rem; }

/* טפסים */
label { font-weight: 600; }
input[type=text], input[type=email], input[type=password], input[type=tel], input[type=number],
input[type=time], input[type=search], input[type=url], select, textarea {
  border: 1px solid var(--border); background: var(--surface); padding: 0.6rem 0.75rem; min-height: 2.6rem;
  transition: border-color .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--btn, var(--primary)); box-shadow: 0 0 0 3px rgba(37,99,235,.15); }
/* שדות בלי type (ברירת מחדל של הדפדפן הוא טקסט) ושדות תאריך: אותו מראה כמו שאר השדות */
input:not([type]), input[type=date], input[type=datetime-local], input[type=month], input[type=week] {
  border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 10px;
  padding: 0.6rem 0.75rem; min-height: 2.6rem; font: inherit; box-sizing: border-box;
  transition: border-color .15s, box-shadow .15s;
}
textarea { line-height: 1.5; }
.stack > div + div { margin-top: 0.15rem; }
.help-text { color: var(--muted); font-size: 0.88rem; }
.field-error { font-weight: 600; }

/* כפתורים */
button, .btn { border-radius: 10px; transition: filter .15s, transform .05s; }
button:active, .btn:active { transform: translateY(1px); }
.btn-secondary, button.btn-secondary { background: var(--surface); color: var(--text) !important; border: 1px solid var(--border); }
.btn-secondary:hover { background: var(--soft); filter: none; }

/* טבלאות */
table { border-collapse: separate; border-spacing: 0; width: 100%; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; }
th { background: var(--soft); text-align: start; font-weight: 700; }
th, td { padding: 0.6rem 0.8rem; border-bottom: 1px solid var(--border); vertical-align: top; }
tr:last-child td { border-bottom: 0; }
tbody tr:hover td { background: color-mix(in srgb, var(--soft) 55%, transparent); }

/* תגיות והודעות */
.badge { font-weight: 600; background: var(--surface); }
.badge-ok { background: color-mix(in srgb, var(--success) 10%, var(--surface)); }
.badge-warn { background: color-mix(in srgb, var(--warning) 10%, var(--surface)); }
.message { box-shadow: var(--shadow); border-inline-start-width: 4px; }
details > summary { cursor: pointer; font-weight: 600; }

/* כותרת עמוד */
.page-head { margin-bottom: 1rem; }
.page-head h1 { margin: 0 0 0.25rem; }

/* ---- עמוד ההגדרות ---- */
.set-jump {
  position: sticky; top: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 0.4rem; padding: 0.6rem 0;
  margin-bottom: 0.5rem; background: var(--bg);
}
.set-jump a {
  padding: 0.35rem 0.85rem; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  text-decoration: none; color: var(--text) !important; font-weight: 600; font-size: 0.92rem;
}
.set-jump a:hover { background: var(--soft); }
.set-card { scroll-margin-top: 4rem; }
.set-highlight { border-inline-start: 5px solid var(--gold, #E8B931); }
.set-intro { margin: -0.35rem 0 0.75rem; }
.set-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0.9rem 1.25rem; }
.set-row { grid-column: 1 / -1; display: grid; gap: 0.3rem; }
.set-half { grid-column: auto; }
.set-label { font-weight: 700; }
.set-toggle {
  grid-template-columns: auto 1fr; align-items: start; gap: 0.2rem 0.75rem; padding: 0.7rem 0.85rem;
  border: 1px solid var(--border); border-radius: 12px; background: var(--soft);
}
.set-toggle label { display: grid; gap: 0.15rem; font-weight: 400; cursor: pointer; }
.set-toggle input[type=checkbox] { width: 1.3rem; height: 1.3rem; margin-top: 0.15rem; accent-color: var(--btn, var(--primary)); }
.set-row ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.35rem; }
.set-row ul li label { display: flex; gap: 0.5rem; align-items: center; font-weight: 400; padding: 0.45rem 0.7rem;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); cursor: pointer; }
.set-row ul li label:hover { background: var(--soft); }
.set-row input[type=radio], .set-row input[type=checkbox] { accent-color: var(--btn, var(--primary)); }
.set-savebar {
  position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem;
  margin: 1rem 0; padding: 0.75rem 1rem; border-radius: var(--radius); background: var(--surface);
  border: 1px solid var(--border); box-shadow: 0 -4px 16px rgba(16,24,40,.08);
}
.set-savebar button { font-size: 1.05rem; padding: 0.7rem 1.5rem; }
@media (max-width: 640px) { .set-fields { grid-template-columns: 1fr; } .set-half { grid-column: 1 / -1; } }
/* מקש "שירים" בדף הבית, ואזור השירים בכותרת */
.key-library { --key: #6d5dfc; }
.sub-nav-library { border-bottom-color: #6d5dfc; }
.keypad { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
/* מקש "תמלול" ואזור התמלול */
.key-transcribe { --key: #0f8a6c; }
.sub-nav-transcribe { border-bottom-color: #0f8a6c; }

/* מקש "המרת קבצים" ועמוד ההמרה */
.key-tools { --key: #b4540a; }
.sub-nav-tools { border-bottom-color: #b4540a; }
.tool-choice { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.4rem 1.2rem; }
.tool-choice legend { margin-bottom: 0.3rem; }
.tool-jobs { list-style: none; margin: 0; padding: 0; }
.tool-job { padding: 0.75rem 0; border-bottom: 1px solid var(--border); }
.tool-job p { margin: 0.3rem 0; }

.btn-small { padding: 0.2rem 0.6rem; font-size: 0.85rem; }

/* לבקשת המשתמש: "התראות ההודעות שלא נקראו בהירות מדי - צריך אדום כמו בהתחלה":
   עיצוב התגיות הכללי (badge-ok בהיר) דרס את הצבע של מונה "לא נקראו". מחזירים אדום בולט. */
.badge.conversation-unread, .conversation-unread, .nav-badge, .unread-count {
  background: #d32f2f !important; color: #fff !important; border-color: #d32f2f !important;
  font-weight: 800; box-shadow: 0 0 0 2px rgba(211, 47, 47, 0.18);
}
.mail-unread { border-inline-start: 4px solid #d32f2f; }
.mail-unread .mail-who, .mail-unread .mail-subject { color: var(--text); }
.chat-bubble-unread { border-color: #d32f2f; border-width: 2px; }

/* פס נגן השירים בתחתית כל עמוד (core/static/core/mini-player.js) */
.vc-mini {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 50;
  display: flex; align-items: center; gap: 0.6rem 0.9rem; flex-wrap: wrap;
  padding: 0.5rem 1rem; background: #1b1f3b; color: #fff;
  box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.25); font-size: 0.95rem;
}
body.has-vc-mini { padding-bottom: 5.5rem; }
.vc-mini-art { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; }
.vc-mini-yt iframe { width: 192px; height: 108px; border: 0; border-radius: 8px; display: block; }
.vc-mini-info { display: flex; flex-direction: column; min-width: 0; flex: 1 1 12rem; }
.vc-mini-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-mini-sub { color: #c9cff5; font-size: 0.85rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-mini-controls { display: flex; gap: 0.3rem; }
.vc-mini button { background: rgba(255, 255, 255, 0.12); color: #fff; border: 0; border-radius: 999px;
  min-width: 2.4rem; height: 2.4rem; padding: 0 0.5rem; font-size: 1rem; cursor: pointer; }
.vc-mini button:hover, .vc-mini button:focus-visible { background: rgba(255, 255, 255, 0.25); }
.vc-mini .vc-mini-play { background: #6d5dfc; min-width: 2.8rem; height: 2.8rem; font-size: 1.15rem; }
.vc-mini-seek { display: flex; align-items: center; gap: 0.4rem; flex: 2 1 14rem; direction: ltr; }
.vc-mini-seek input { flex: 1; accent-color: #8b7dff; }
.vc-mini-time, .vc-mini-total { font-size: 0.8rem; color: #c9cff5; min-width: 2.6rem; text-align: center; }
.vc-mini-open { color: #fff !important; text-decoration: none; font-size: 1.3rem; }
.vc-mini .vc-mini-close { background: transparent; }
@media (max-width: 640px) { body.has-vc-mini { padding-bottom: 9rem; } .vc-mini-seek { flex-basis: 100%; } }

/* נגן קטן רחב יותר - תמונה / וידאו, לחיצה חוזרת לעמוד השירים, כפתור הגדלה */
.vc-mini { padding: 0.6rem 1.2rem; }
.vc-mini-art-link { display: flex; align-items: center; justify-content: center; width: 64px; height: 64px;
  border-radius: 10px; background: rgba(255, 255, 255, 0.1); text-decoration: none; flex: none; }
.vc-mini-art { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; }
.vc-mini-icon { font-size: 1.8rem; }
.vc-mini-video { width: 160px; height: 90px; background: #000; border-radius: 8px; flex: none; }
.vc-mini-info { color: #fff !important; text-decoration: none; cursor: pointer; }
.vc-mini-info:hover .vc-mini-title { text-decoration: underline; }
.vc-mini-title { font-size: 1.05rem; }
.vc-mini.is-big .vc-mini-art-link, .vc-mini.is-big .vc-mini-art { width: 120px; height: 120px; }
.vc-mini.is-big .vc-mini-video { width: 400px; height: 225px; }
.vc-mini.is-big .vc-mini-title { font-size: 1.25rem; white-space: normal; }
body.has-vc-mini { padding-bottom: 7rem; }
@media (max-width: 640px) {
  .vc-mini-art-link, .vc-mini-art { width: 48px; height: 48px; }
  .vc-mini-video { width: 128px; height: 72px; }
  .vc-mini.is-big .vc-mini-video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
  .vc-mini.is-big .vc-mini-art-link, .vc-mini.is-big .vc-mini-art { width: 96px; height: 96px; }
  body.has-vc-mini { padding-bottom: 10rem; }
}

/* ===========================================================================
   v103: כפתור יום / לילה, נגן בצבעים חדשים, ועמודי פתיחה / כניסה / הרשמה
=========================================================================== */
.theme-toggle { background: var(--soft, #f1f4fb); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; min-width: 2.4rem; height: 2.4rem; padding: 0 0.6rem; font-size: 1.1rem; cursor: pointer; line-height: 1; }
.theme-toggle:hover, .theme-toggle:focus-visible { background: var(--gold-soft, #FFF4D1); }
.header-user { align-items: center; }
.nav-links { align-items: center; }

/* נגן קטן - "לילה עמוק" כחול-טורקיז עם זהב (צבעי האתר) */
.vc-mini {
  background: linear-gradient(100deg, #0b1a33 0%, #13305c 55%, #0d4f5c 100%);
  border-top: 1px solid rgba(232, 185, 49, 0.35);
  box-shadow: 0 -8px 28px rgba(5, 12, 30, 0.35);
  backdrop-filter: blur(6px);
}
.vc-mini button { background: rgba(255, 255, 255, 0.10); border: 1px solid rgba(255, 255, 255, 0.14); transition: background .15s, transform .1s; }
.vc-mini button:hover, .vc-mini button:focus-visible { background: rgba(255, 255, 255, 0.22); }
.vc-mini button:active { transform: scale(0.95); }
.vc-mini .vc-mini-play { background: linear-gradient(135deg, #f5cf55, #e0a91c); color: #16233F; border: 0;
  box-shadow: 0 4px 14px rgba(232, 185, 49, 0.45); }
.vc-mini .vc-mini-play:hover { background: linear-gradient(135deg, #ffe07a, #e8b931); }
.vc-mini-seek input { accent-color: #E8B931; }
.vc-mini-sub, .vc-mini-time, .vc-mini-total { color: #b9d3ea; }
.vc-mini-art, .vc-mini-art-link { box-shadow: 0 2px 10px rgba(0, 0, 0, 0.35); }
.vc-mini-art-link { background: linear-gradient(135deg, #1f4fa8, #0d7c8c); }

/* ---- עמוד הפתיחה ---- */
.lp { max-width: 1120px; margin: 0 auto; }
.lp-hero { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 2rem; align-items: center;
  background: radial-gradient(1200px 400px at 90% -10%, rgba(232, 185, 49, 0.25), transparent 60%),
              linear-gradient(135deg, #16233F 0%, #1F4FA8 60%, #0d7c8c 100%);
  color: #fff; border-radius: 24px; padding: clamp(1.5rem, 1rem + 3vw, 3rem); margin: 1rem 0 2rem; overflow: hidden; }
.lp-hero h1 { color: #fff; font-size: clamp(1.9rem, 1.3rem + 2.4vw, 3rem); margin: 0 0 0.75rem; line-height: 1.15; }
.lp-hero p { color: #dbe7ff; font-size: 1.15rem; margin: 0 0 1.25rem; }
.lp-hero .lp-kicker { display: inline-block; background: rgba(255, 255, 255, 0.14); color: #ffe7a0; border-radius: 999px;
  padding: 0.25rem 0.8rem; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.8rem; }
.lp-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.lp-cta .btn { font-size: 1.05rem; padding: 0.7rem 1.4rem; border-radius: 999px; }
.lp-cta .btn-ghost { background: transparent; color: #fff !important; border: 2px solid rgba(255, 255, 255, 0.6); }
.lp-art svg { width: 100%; height: auto; display: block; filter: drop-shadow(0 18px 30px rgba(0, 0, 0, 0.3)); }
.lp-points { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin: 1.25rem 0 0; padding: 0; list-style: none; color: #dbe7ff; }
.lp-points li::before { content: "✓ "; color: #E8B931; font-weight: 700; }
.lp h2.lp-title { text-align: center; font-size: clamp(1.4rem, 1.1rem + 1vw, 2rem); margin: 2.5rem 0 0.4rem; }
.lp .lp-sub { text-align: center; color: var(--muted); margin: 0 auto 1.5rem; max-width: 640px; }
.lp-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; }
.lp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem;
  box-shadow: var(--shadow, 0 4px 14px rgba(16, 24, 40, .06)); transition: transform .15s, box-shadow .15s; }
.lp-card:hover { transform: translateY(-3px); box-shadow: 0 10px 26px rgba(16, 24, 40, .12); }
.lp-card h3 { margin: 0.6rem 0 0.35rem; font-size: 1.15rem; }
.lp-card p { margin: 0; color: var(--muted); }
.lp-icon { width: 56px; height: 56px; border-radius: 16px; display: grid; place-items: center; font-size: 1.7rem;
  background: linear-gradient(135deg, var(--c1, #1F4FA8), var(--c2, #0d7c8c)); color: #fff; }
.lp-steps { counter-reset: step; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1rem; padding: 0; list-style: none; }
.lp-steps li { background: var(--surface); border: 1px solid var(--border); border-radius: 18px; padding: 1.25rem 1.25rem 1.25rem 1rem; position: relative; }
.lp-steps li::before { counter-increment: step; content: counter(step); display: grid; place-items: center; width: 2.2rem; height: 2.2rem;
  border-radius: 50%; background: #E8B931; color: #16233F; font-weight: 800; margin-bottom: 0.5rem; }
.lp-steps strong { display: block; margin-bottom: 0.25rem; }
.lp-steps span { color: var(--muted); }
.lp-phone { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 1.5rem; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 22px; padding: 1.5rem; margin-top: 1rem; }
.lp-keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.5rem; max-width: 260px; margin: 0 auto; }
.lp-keys span { display: grid; place-items: center; aspect-ratio: 1; border-radius: 16px; background: var(--soft, #f1f4fb);
  border: 1px solid var(--border); font-weight: 800; font-size: 1.3rem; }
.lp-keys span.on { background: #E8B931; color: #16233F; border-color: #E8B931; }
.lp-phone dl { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0.4rem 0.8rem; }
.lp-phone dt { font-weight: 800; background: var(--soft, #f1f4fb); border-radius: 8px; padding: 0 0.55rem; text-align: center; }
.lp-phone dd { margin: 0; }
.lp-faq details { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 0.8rem 1rem; margin-bottom: 0.6rem; }
.lp-faq summary { cursor: pointer; font-weight: 700; }
.lp-final { text-align: center; background: linear-gradient(135deg, #FFF4D1, #ffe6a3); color: #16233F; border-radius: 22px; padding: 2rem 1rem; margin: 2.5rem 0 1rem; }
.lp-final h2 { color: #16233F; margin-top: 0; }
@media (max-width: 820px) { .lp-hero, .lp-phone { grid-template-columns: 1fr; } .lp-art { max-width: 420px; margin: 0 auto; } }

/* ---- כניסה / הרשמה ---- */
.auth-wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 0; max-width: 1000px; margin: 1.5rem auto;
  border-radius: 24px; overflow: hidden; box-shadow: 0 18px 50px rgba(16, 24, 40, .16); background: var(--surface); border: 1px solid var(--border); }
.auth-side { background: radial-gradient(600px 300px at 0% 0%, rgba(232, 185, 49, 0.28), transparent 60%),
             linear-gradient(160deg, #16233F 0%, #1F4FA8 70%, #0d7c8c 100%); color: #fff; padding: 2rem; display: flex; flex-direction: column; gap: 1rem; }
.auth-side h2 { color: #fff; margin: 0; font-size: 1.5rem; }
.auth-side p { color: #dbe7ff; margin: 0; }
.auth-side ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; }
.auth-side li { display: flex; gap: 0.6rem; align-items: flex-start; color: #eef3ff; }
.auth-side li b { color: #ffe7a0; }
.auth-side .auth-emoji { flex: none; width: 2rem; height: 2rem; border-radius: 10px; background: rgba(255, 255, 255, 0.14); display: grid; place-items: center; }
.auth-side svg { width: 100%; max-width: 300px; margin: auto auto 0; }
.auth-form { padding: 2rem; }
.auth-form h1 { margin-top: 0; }
.auth-form .stack > div { margin-bottom: 0.25rem; }
.auth-form button[type=submit] { width: 100%; padding: 0.75rem; font-size: 1.05rem; border-radius: 12px; }
.auth-or { display: flex; align-items: center; gap: 0.75rem; color: var(--muted); margin: 1rem 0; }
.auth-or::before, .auth-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
.auth-google { display: flex !important; align-items: center; justify-content: center; gap: 0.5rem; border-radius: 12px !important; }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem; margin-top: 1rem; }
@media (max-width: 760px) { .auth-wrap { grid-template-columns: 1fr; } .auth-side { order: 2; } }

/* ===========================================================================
   v104 (לבקשת המשתמש: "למה לא הוספת סגנון עיצוב כזה גם במחשב על כל הדף, שלא
   יהיה סתם דף לבן"): אותה שפה עיצובית של עמוד הפתיחה - בכל עמודי האתר.
   נשאר בהיר (לבקשה הקודמת "העיצוב כהה מדי"), עם צבעי האתר: כחול, טורקיז וזהב.
=========================================================================== */
:root {
  --glow-1: rgba(31, 79, 168, 0.11);
  --glow-2: rgba(232, 185, 49, 0.16);
  --glow-3: rgba(13, 124, 140, 0.09);
  --header-glass: rgba(255, 255, 255, 0.84);
  --title-bg: linear-gradient(120deg, rgba(31, 79, 168, 0.10) 0%, rgba(13, 124, 140, 0.08) 55%, rgba(232, 185, 49, 0.14) 100%);
  --brand-line: linear-gradient(90deg, #E8B931 0%, #1F4FA8 50%, #0d7c8c 100%);
}
@media (prefers-color-scheme: dark) {
  html:not([data-theme="light"]) {
    --glow-1: rgba(80, 130, 255, 0.14); --glow-2: rgba(232, 185, 49, 0.08); --glow-3: rgba(34, 179, 196, 0.10);
    --header-glass: rgba(20, 30, 52, 0.86);
    --title-bg: linear-gradient(120deg, rgba(80, 130, 255, 0.16) 0%, rgba(34, 179, 196, 0.10) 55%, rgba(232, 185, 49, 0.10) 100%);
  }
}
html[data-theme="dark"] {
  --glow-1: rgba(80, 130, 255, 0.14); --glow-2: rgba(232, 185, 49, 0.08); --glow-3: rgba(34, 179, 196, 0.10);
  --header-glass: rgba(20, 30, 52, 0.86);
  --title-bg: linear-gradient(120deg, rgba(80, 130, 255, 0.16) 0%, rgba(34, 179, 196, 0.10) 55%, rgba(232, 185, 49, 0.10) 100%);
}

/* רקע: הילות צבע עדינות במקום לבן חלק */
body {
  background:
    radial-gradient(900px 520px at 100% -8%, var(--glow-1), transparent 62%),
    radial-gradient(720px 420px at 0% 2%, var(--glow-2), transparent 58%),
    radial-gradient(900px 620px at 45% 108%, var(--glow-3), transparent 62%),
    var(--bg);
  background-attachment: fixed;
}

/* כותרת עליונה: זכוכית + פס צבעי המותג */
.site-header { background: var(--header-glass); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px);
  position: sticky; top: 0; z-index: 40; border-bottom: 1px solid var(--border); }
.site-header::before { content: ""; display: block; height: 4px; background: var(--brand-line); }
.brand-mark { filter: drop-shadow(0 3px 6px rgba(232, 185, 49, 0.45)); }
.sub-nav { background: transparent; }
.sub-nav a.is-active, .sub-nav a:hover { background: var(--surface); box-shadow: 0 1px 4px rgba(16, 24, 40, 0.08); }

/* כותרת העמוד (h1 הראשון) - באנר מעוצב */
.site-main > h1:first-child, .site-main > h1:first-of-type:not(.lp h1) {
  position: relative; background: var(--title-bg); border: 1px solid var(--border);
  border-radius: 18px; padding: 1rem 1.4rem 1rem 1.2rem; margin: 0.75rem 0 1.25rem; overflow: hidden;
}
.site-main > h1:first-of-type::after {
  content: ""; position: absolute; inset-block: 0; inset-inline-start: 0; width: 6px; background: linear-gradient(180deg, #E8B931, #1F4FA8);
}
.site-main > h1:first-of-type + p { margin-top: -0.4rem; }

/* כרטיסים: פס צבע עדין למעלה + ריחוף */
.card { position: relative; background: var(--surface); }
.card::before { content: ""; position: absolute; top: 0; inset-inline: 18px; height: 3px; border-radius: 0 0 4px 4px;
  background: var(--brand-line); opacity: 0.55; }
.card.alert-warn::before { background: linear-gradient(90deg, #E8B931, #e0701c); opacity: 0.9; }
.card > h2:first-child::before, .card > h2:first-of-type::before { content: ""; display: inline-block; width: 0.55rem; height: 0.55rem;
  border-radius: 50%; background: #E8B931; margin-inline-end: 0.5rem; vertical-align: middle; }

/* טבלאות */
table thead th { background: var(--soft, #f1f4fb); }
table { border-radius: 12px; overflow: hidden; }

/* כפתורים ראשיים - גרדיאנט עדין */
button[type=submit]:not(.btn-secondary):not(.btn-danger):not(.link-button):not(.vc-mini button) {
  background-image: linear-gradient(135deg, rgba(255, 255, 255, 0.10), rgba(0, 0, 0, 0.06));
}

/* תחתית */
.site-footer { background: linear-gradient(180deg, transparent, var(--glow-2)), var(--surface); border-top: 0; position: relative; }
.site-footer::before { content: ""; position: absolute; top: 0; inset-inline: 0; height: 3px; background: var(--brand-line); opacity: 0.7; }

@media print { body { background: #fff; } .site-main > h1:first-of-type { background: none; border: 0; } .card::before { display: none; } }

/* פס טעינה דק בזמן מעבר עמוד בלי טעינה מלאה */
.soft-progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 1000; pointer-events: none;
  background: linear-gradient(90deg, #E8B931, #1F4FA8, #0d7c8c); transform: scaleX(0); transform-origin: right;
  transition: transform 0.25s ease, opacity 0.3s ease; opacity: 0; }
.soft-progress.is-on { transform: scaleX(0.85); opacity: 1; transition: transform 8s cubic-bezier(.1,.7,.2,1), opacity .1s; }
html.soft-loading .site-main { opacity: 0.75; transition: opacity 0.2s; }

/* מספר "לא נקראו" ליד תיבות ותוויות במייל (כמו ב-Gmail), ובחירת כל המיילים */
.mail-count { display: inline-block; min-width: 1.5em; padding: 0 0.45em; margin-inline-start: 0.35em; border-radius: 999px;
  background: #d93025; color: #fff; font-size: 0.8em; font-weight: 800; line-height: 1.55; text-align: center; vertical-align: 0.08em; }
.btn:not(.btn-secondary) .mail-count { background: #fff; color: #d93025; }
.bulk-all-banner { margin: 0.4rem 0; padding: 0.55rem 0.9rem; border-radius: 10px; background: var(--gold-soft, #FFF4D1);
  border: 1px solid #e8b931; text-align: center; }
.bulk-all-banner .link-button { font-weight: 700; margin-inline-start: 0.5rem; text-decoration: underline; color: var(--primary); }

/* התקדמות טעינת כל ההיסטוריה בשיחה */
.history-progress { display: flex; gap: 0.75rem; align-items: center; flex-wrap: wrap; margin: 0.5rem 0; padding: 0.6rem 0.9rem;
  border-radius: 10px; background: var(--gold-soft, #FFF4D1); border: 1px solid #e8b931; }

/* ניהול הקו */
.line-crumbs { margin: 0.25rem 0 1rem; font-size: 1.05rem; }
.line-dirs { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0.6rem; margin: 0.5rem 0 1rem; }
.line-dir { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.8rem; border: 1px solid var(--border); border-radius: 12px; text-decoration: none; color: inherit; background: var(--surface, #fff); transition: transform .12s, box-shadow .12s; }
.line-dir:hover, .line-dir:focus-visible { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.08); }
.line-dir-num { flex: 0 0 2.4rem; height: 2.4rem; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 1.15rem; background: var(--primary, #2a5bd7); color: #fff; }
.line-dir-text { display: flex; flex-direction: column; min-width: 0; }
.line-dir-text small { color: var(--muted, #667); }
.line-bulk { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.75rem; }
.line-add { margin-top: 1rem; }
.line-add textarea, .line-editor { width: 100%; box-sizing: border-box; }
.line-editor { font-family: ui-monospace, Menlo, Consolas, monospace; font-size: 0.95rem; }
.line-ini input[type=text] { width: 100%; box-sizing: border-box; }
.line-danger { margin-top: 1rem; }
.line-danger summary { color: var(--danger, #c0392b); cursor: pointer; }
.line-new summary { cursor: pointer; font-weight: 600; }
.line-form select, .line-form input[type=text] { width: 100%; box-sizing: border-box; }
.line-session p { margin: 0; }
.line-dirs + details, .line-new { margin-top: 0.5rem; }
.card audio { max-width: 220px; height: 34px; }
/* בעמוד השמיעה - פס רחב לכל רוחב הכרטיס, כדי שיהיה קל לדלג למקום מדויק */
.card audio.vc-wide-audio { max-width: none; width: 100%; height: 48px; display: block; margin: .5rem 0; }
.vc-seek-row { flex-wrap: wrap; gap: .4rem; align-items: center; }
.vc-speed { display: inline-flex; gap: .3rem; align-items: center; }
/* מתג "תמיד כנקרא" ישר מרשימת השיחות */
.conv-always-toggle { background: transparent !important; border: 1px solid var(--border); border-radius: 50%; width: 2.2rem; height: 2.2rem; padding: 0; font-size: 1rem; cursor: pointer; opacity: .55; flex: 0 0 auto; color: inherit; }
.conv-always-toggle:hover, .conv-always-toggle:focus-visible, .conv-always-toggle.is-on { opacity: 1; }
.conv-always-toggle.is-on { background: var(--soft, #f1f4fb) !important; }
/* כמה קווים */
.line-switch { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: center; margin: 0 0 0.75rem; }
.line-switch select { min-width: 14rem; }
.line-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0.8rem; }
.line-card { border: 1px solid var(--border); border-radius: 14px; padding: 0.8rem 1rem; background: var(--surface, #fff); }
.line-card h3 { margin: 0 0 0.3rem; }
.line-card-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: flex-start; }
.line-card-actions details { flex-basis: 100%; }
.line-card-actions label { display: block; margin: 0.3rem 0; }
/* תכנון נסיעה */
.trip-points { display: grid; grid-template-columns: 1fr auto 1fr; gap: 0.6rem; align-items: end; }
.trip-points input { width: 100%; box-sizing: border-box; }
.trip-swap { height: 2.6rem; }
@media (max-width: 640px) { .trip-points { grid-template-columns: 1fr; } .trip-swap { justify-self: start; } }
.trip-when { display: flex; flex-wrap: wrap; gap: 0.6rem 1rem; align-items: center; margin: 0.8rem 0; }
.trip-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0.5rem 0 0; }
.trip-modes { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; margin: 0.5rem 0; }
.trip-mode { border: 1px solid var(--border); border-radius: 12px; padding: 0.6rem 0.8rem; display: flex; flex-direction: column; background: var(--surface, #fff); }
.trip-mode-icon { font-size: 1.6rem; }
.trip-mode small { color: var(--muted, #667); }
.trip-line { display: inline-block; min-width: 2.2rem; text-align: center; padding: 0.1rem 0.45rem; border-radius: 8px; background: var(--primary, #2a5bd7); color: #fff; font-weight: 700; }
.trip-option { border-top: 1px solid var(--border); padding: 0.6rem 0; }
.trip-option:first-of-type { border-top: 0; }
.trip-legs { margin: 0.3rem 0 0; padding-inline-start: 1.2rem; }
.trip-legs li { margin: 0.25rem 0; }
.trip-times { line-height: 2; }
.trip-time { display: inline-block; padding: 0 0.45rem; margin: 0.1rem; border: 1px solid var(--border); border-radius: 8px; font-variant-numeric: tabular-nums; }
.trip-table td { vertical-align: top; }
/* בינה מלאכותית */
.ai-new { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.6rem; }
.ai-new form { margin: 0; }
.ai-new-btn { width: 100%; padding: 0.9rem; font-size: 1.1rem; display: flex; flex-direction: column; align-items: center; gap: 0.2rem; }
.ai-new-btn small { font-size: 0.75rem; opacity: .85; }
.ai-new-btn.is-off { opacity: .6; }
.ai-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.6rem; }
.ai-list { list-style: none; padding: 0; margin: 0; }
.ai-list li a { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.6rem 0.3rem; border-bottom: 1px solid var(--border); text-decoration: none; color: inherit; }
.ai-list li a:hover { background: var(--soft, #f1f4fb); }
.ai-title { flex: 1; min-width: 12rem; font-weight: 600; }
.ai-badge { display: inline-block; padding: 0.05rem 0.5rem; border-radius: 999px; font-size: 0.8rem; font-weight: 700; color: #fff; background: #6b7280; vertical-align: middle; }
.ai-badge.ai-claude, .ai-new-btn.ai-claude { background: #c96442; }
.ai-badge.ai-gemini, .ai-new-btn.ai-gemini { background: #3b6fe0; }
.ai-badge.ai-grok, .ai-new-btn.ai-grok { background: #111827; }
.ai-badge.ai-openai, .ai-new-btn.ai-openai { background: #10a37f; }
.ai-new-btn { color: #fff; border: 0; border-radius: 14px; }
.ai-thread { display: flex; flex-direction: column; gap: 0.7rem; margin: 1rem 0; }
.ai-msg { border: 1px solid var(--border); border-radius: 14px; padding: 0.7rem 0.9rem; background: var(--surface, #fff); max-width: 100%; }
.ai-msg-user { background: var(--soft, #eef3ff); align-self: flex-start; max-width: 85%; }
.ai-msg-head { font-weight: 700; margin-bottom: 0.3rem; display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: baseline; }
.ai-msg-head small { font-weight: 400; color: var(--muted, #667); }
.ai-msg-body { line-height: 1.65; overflow-wrap: anywhere; }
.ai-code { background: #0f172a; color: #e2e8f0; padding: 0.6rem; border-radius: 8px; overflow-x: auto; white-space: pre; text-align: left; }
.ai-files { margin-top: 0.4rem; display: flex; gap: 0.5rem; flex-wrap: wrap; font-size: 0.9rem; }
.ai-compose textarea { width: 100%; box-sizing: border-box; font-size: 1rem; }
.ai-compose-bar { display: flex; gap: 0.6rem; align-items: center; justify-content: space-between; margin-top: 0.4rem; flex-wrap: wrap; }
.ai-compose { position: sticky; bottom: 0.5rem; }
.ai-options summary { cursor: pointer; font-weight: 600; }
.ai-options label { display: block; margin: 0.35rem 0; }
.ai-manage { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.6rem; }
/* ספקי בינה מלאכותית נוספים */
.ai-badge.ai-groq, .ai-new-btn.ai-groq { background: #f55036; }
.ai-badge.ai-mistral, .ai-new-btn.ai-mistral { background: #fa520f; }
.ai-badge.ai-cerebras, .ai-new-btn.ai-cerebras { background: #b3470f; }
.ai-badge.ai-openrouter, .ai-new-btn.ai-openrouter { background: #6d28d9; }
.ai-badge.ai-cohere, .ai-new-btn.ai-cohere { background: #39594d; }
.ai-badge.ai-huggingface, .ai-new-btn.ai-huggingface { background: #d4a106; color: #111; }
/* מכסות */
.usage-legend { display: flex; flex-wrap: wrap; gap: 0.4rem 1rem; align-items: center; }
.usage-dot { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 50%; vertical-align: middle; }
.usage-dot.ok, .usage-ok .usage-bar span { background: #16a34a; }
.usage-dot.warn, .usage-warn .usage-bar span { background: #e0a100; }
.usage-dot.danger, .usage-danger .usage-bar span { background: #dc2626; }
.usage-row { margin: 0.8rem 0; }
.usage-head { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem; }
.usage-bar { height: 0.8rem; border-radius: 999px; background: var(--soft, #e8ecf4); overflow: hidden; margin-top: 0.3rem; }
.usage-bar span { display: block; height: 100%; border-radius: 999px; }
.usage-tip { margin: 0.3rem 0 0; font-size: 0.95rem; }
.usage-project { border-top: 1px solid var(--border); padding-top: 0.6rem; margin-top: 0.6rem; }
.usage-project.is-current { border-top-color: var(--primary, #2a5bd7); }
.badge-danger { color: var(--danger, #dc2626); border-color: var(--danger, #dc2626); }
/* מקשי בינה מלאכותית וניהול קווים בדף הבית */
.key-ai { --key: #7c3aed; }
.sub-nav-ai { border-bottom-color: #7c3aed; }
.key-lines { --key: #0e7490; }
.sub-nav-lines { border-bottom-color: #0e7490; }
.key-travel { --key: #475569; }
.key-calls { --key: #be123c; }  /* שיחות שלא נענו */
.sub-nav-calls { border-bottom-color: #be123c; }
/* מד התקדמות עם אחוזים ותיאור הפעולה (core/progress.js) */
.soft-progress { display: none !important; }
.vc-progress { position: fixed; inset-inline: 0; top: 0; z-index: 2000; pointer-events: none; opacity: 0; transition: opacity .2s; }
.vc-progress.is-on { opacity: 1; }
.vc-progress-bar { height: 4px; background: rgba(0,0,0,.06); }
.vc-progress-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #E8B931, #1F4FA8, #0d7c8c);
  transition: width .25s ease; border-start-end-radius: 4px; border-end-end-radius: 4px; }
.vc-progress-pill { position: fixed; bottom: 1rem; inset-inline-start: 50%; transform: translateX(50%);
  display: flex; align-items: center; gap: .55rem; max-width: min(92vw, 30rem); padding: .55rem 1rem; border-radius: 999px;
  background: var(--surface, #fff); color: var(--text, #111); box-shadow: 0 6px 24px rgba(0,0,0,.18); border: 1px solid var(--border);
  font-size: .95rem; }
[dir="ltr"] .vc-progress-pill { transform: translateX(-50%); }
.vc-progress-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vc-progress-pct { font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: center; }
.vc-progress-spin { width: 1rem; height: 1rem; border-radius: 50%; border: 2px solid var(--border, #ccd); border-top-color: #1F4FA8;
  animation: vc-spin .8s linear infinite; flex: 0 0 auto; }
.vc-progress.is-done .vc-progress-spin { animation: none; border-color: #16a34a; }
.vc-progress.is-error .vc-progress-spin { animation: none; border-color: #dc2626; }
.vc-progress.is-error .vc-progress-bar span { background: #dc2626; }
@keyframes vc-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .vc-progress-spin { animation: none; } .vc-progress-bar span { transition: none; } }

/* פס "הגיעו הודעות חדשות" (כשהמשתמש באמצע כתיבה) */
.live-banner {
  position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); z-index: 60;
  background: var(--card, #fff); color: var(--text, #111); border: 2px solid var(--accent, #2563eb);
  border-radius: 12px; padding: .6rem 1rem; box-shadow: 0 6px 24px rgba(0,0,0,.2);
  display: flex; gap: .6rem; align-items: center; max-width: calc(100vw - 32px);
}

/* שרשור מיילים */
.mail-thread-item summary { cursor: pointer; list-style-position: inside; }
.mail-thread-item[open] summary { margin-bottom: .5rem; }
.mail-thread-count { font-weight: 400; opacity: .75; }

/* כלים במייל (בהשראת וירטואל מייל) */
.compose-tools { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.mail-extras { display: flex; flex-wrap: wrap; gap: .5rem; align-items: flex-start; }
.mail-extras .translate-out { flex-basis: 100%; }
.verify-code { font-size: 1.15rem; }
.verify-code-digits { font-size: 1.6rem; letter-spacing: .35em; font-weight: 700; }
.inline-details > summary { list-style: none; display: inline-block; }


/* סטטוס ליד הכפתור שלחצו עליו (מד התקדמות והודעות הצלחה / שגיאה) - במקום בועה בתחתית */
.vc-progress.is-inline .vc-progress-pill { display: none; }
.vc-inline-status { margin: .5rem 0; padding: .55rem .8rem; border-radius: 10px; border: 1px solid var(--border, #d6dae3);
  background: var(--surface, #fff); color: var(--text, #111); font-size: .95rem; max-width: 40rem; }
.vc-inline-status .vc-inline-row { display: flex; align-items: center; gap: .55rem; }
.vc-inline-status .vc-inline-label { flex: 1 1 auto; }
.vc-inline-status .vc-inline-pct { font-variant-numeric: tabular-nums; }
.vc-inline-bar { height: 5px; margin-top: .4rem; border-radius: 5px; background: rgba(0,0,0,.08); overflow: hidden; }
.vc-inline-bar span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #E8B931, #1F4FA8, #0d7c8c);
  transition: width .25s ease; }
.vc-inline-status.is-done { border-color: #16a34a; }
.vc-inline-status.is-done .vc-progress-spin { animation: none; border-color: #16a34a; }
.vc-inline-status.is-error { border-color: #dc2626; }
.vc-inline-status.is-error .vc-progress-spin { animation: none; border-color: #dc2626; }
.vc-inline-status.is-error .vc-inline-bar span { background: #dc2626; }
.vc-inline-status.is-msg { padding: .2rem .4rem; border: 0; background: transparent; }
.vc-inline-status.is-msg .messages { margin: 0; }
.vc-inline-status.message-success { border: 1px solid #16a34a; padding: .55rem .8rem; background: var(--surface, #fff); }
.vc-inline-status.message-error { border: 1px solid #dc2626; padding: .55rem .8rem; background: var(--surface, #fff); }
.vc-inline-status.message-info, .vc-inline-status.message-warning { border: 1px solid #d97706; padding: .55rem .8rem;
  background: var(--surface, #fff); }
@media (prefers-reduced-motion: reduce) { .vc-inline-bar span { transition: none; } }

/* הודעות קטנות בפינה - פעולה שהסתיימה אחרי שעברו לעמוד אחר (לא מפריע לקריאה) */
.vc-toasts { position: fixed; bottom: 1rem; inset-inline-end: 1rem; z-index: 2100; display: flex; flex-direction: column;
  gap: .5rem; max-width: min(92vw, 26rem); }
.vc-toast { position: relative; padding: .6rem .8rem; padding-inline-end: 2.2rem; border-radius: 10px; background: var(--surface, #fff);
  color: var(--text, #111); box-shadow: 0 6px 22px rgba(0,0,0,.18); border: 1px solid var(--border, #d6dae3); font-size: .95rem; }
.vc-toast.message-success { border-color: #16a34a; }
.vc-toast.message-error { border-color: #dc2626; }
.vc-toast-x { position: absolute; top: .25rem; inset-inline-end: .35rem; border: 0; background: transparent; font-size: 1.2rem;
  cursor: pointer; color: inherit; padding: 0 .3rem; }

/* רשימת ההמרות שלי */
.conversion-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .75rem; }
.conversion-row { border: 1px solid var(--border, #ddd); border-radius: 12px; padding: .75rem 1rem; }
.conversion-row .btn-row { flex-wrap: wrap; gap: .4rem; margin-top: .4rem; }
.conversion-row form { display: inline; }

/* נגן צף: השיר ממשיך בלי הפסקה במעבר בין עמודים (soft-nav.js). העמוד הקודם נשאר מוסתר במסמך,
   ורק הנגן שבתוכו מוצג בפינה. */
.vc-float-host {
  position: fixed; top: 0; left: 0; width: 0; height: 0; overflow: visible;
  visibility: hidden; z-index: 60; margin: 0; padding: 0;
}
.vc-float-host .vc-floating {
  visibility: visible; position: fixed; bottom: 12px; inset-inline-start: 12px; z-index: 60;
  width: min(340px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  display: block; margin: 0; padding: 0.6rem 0.75rem; box-shadow: 0 8px 28px rgba(0, 0, 0, .35);
}
.vc-floating .yt-screen { min-height: 0; margin-bottom: 0.5rem; }
.vc-floating :is(.yt-mode, .yt-options, .repo-mode) { display: none; }
.vc-floating .yt-controls button, .vc-floating .repo-controls button { padding: 0.3rem 0.55rem; }
.vc-float-bar { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; margin-bottom: 0.4rem; font-size: 0.9rem; }
.vc-float-close { padding: 0.15rem 0.55rem; line-height: 1.2; }
body.has-vc-float { padding-bottom: 1rem; }
@media (max-width: 640px) {
  .vc-float-host .vc-floating { bottom: 8px; inset-inline-start: 8px; width: calc(100vw - 16px); max-height: 45vh; }
  .vc-floating .yt-screen { max-height: 22vh; aspect-ratio: auto; height: 22vh; }
}

/* ניהול הקו: עץ שלוחות בצד, סרגל פעולות, וקבצים עם הסבר */
.lm { display: grid; grid-template-columns: minmax(200px, 260px) minmax(0, 1fr); gap: 1rem; align-items: start; }
.lm-side { position: sticky; top: 0.75rem; max-height: calc(100vh - 1.5rem); overflow: auto; padding: 0.8rem; }
.lm-side-title { font-size: 1rem; margin: 0 0 0.5rem; }
.lm-root, .lm-tree-list a { display: block; padding: 0.3rem 0.5rem; border-radius: 8px; text-decoration: none; color: inherit; }
.lm-root:hover, .lm-tree-list a:hover, .lm-root:focus-visible, .lm-tree-list a:focus-visible { background: var(--surface-2, rgba(0,0,0,.05)); }
.lm-root.is-current, .lm-tree-list a.is-current { background: var(--primary, #2a5bd7); color: #fff; font-weight: 600; }
.lm-tree-list { list-style: none; margin: 0; padding: 0; }
.lm-tree-list .lm-tree-list { padding-inline-start: 1rem; border-inline-start: 1px dashed var(--border); margin-inline-start: 0.6rem; }
.lm-tree-num { display: inline-block; min-width: 1.6rem; text-align: center; font-weight: 700; color: var(--primary, #2a5bd7); }
.lm-tree-list a.is-current .lm-tree-num { color: #fff; }
.lm-toolbar { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; padding: 0.6rem 0.8rem; }
.lm-new { position: relative; }
.lm-new > summary { list-style: none; cursor: pointer; }
.lm-new > summary::-webkit-details-marker { display: none; }
.lm-new-menu { position: absolute; z-index: 20; inset-inline-start: 0; top: calc(100% + 0.3rem); min-width: 240px; display: grid;
  background: var(--surface, #fff); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.15); padding: 0.4rem; }
.lm-new-menu a { padding: 0.45rem 0.6rem; border-radius: 8px; text-decoration: none; color: inherit; display: grid; }
.lm-new-menu a:hover, .lm-new-menu a:focus-visible { background: var(--surface-2, rgba(0,0,0,.05)); }
.lm-new-menu small { color: var(--muted, #667); font-weight: 400; }
.lm-filter { flex: 1 1 220px; display: flex; align-items: center; gap: 0.4rem; margin: 0; }
.lm-filter input { flex: 1; }
.lm-sort { margin: 0 0 0.6rem; }
.lm-sort select { width: auto; }
tr.lm-system td { background: var(--surface-2, rgba(0,0,0,.025)); }
@media (max-width: 860px) {
  .lm { grid-template-columns: 1fr; }
  .lm-side { position: static; max-height: none; }
}
.lm-order { white-space: nowrap; }
.lm-order button { padding: 0.15rem 0.45rem; margin-inline-end: 0.2rem; }
.lm-results { list-style: none; padding: 0; display: grid; gap: 0.4rem; }

/* ניהול הקו: לשוניות, אולפן הודעות, תזמונים וסל מחזור */
.lm-tabs { display: flex; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 0.9rem; padding: 0; }
.lm-tabs a { padding: 0.45rem 0.8rem; border-radius: 999px; text-decoration: none; color: inherit;
  border: 1px solid var(--border, rgba(0,0,0,.15)); background: var(--surface, transparent); min-height: 44px;
  display: inline-flex; align-items: center; }
.lm-tabs a:hover, .lm-tabs a:focus-visible { background: var(--surface-2, rgba(0,0,0,.05)); }
.lm-tabs a[aria-current="page"] { background: var(--primary, #2a5bd7); border-color: var(--primary, #2a5bd7); color: #fff; font-weight: 600; }
.studio textarea { width: 100%; font-size: 1.1rem; line-height: 1.7; }
.studio-chips, .studio-ai { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.studio-ai { border: 1px dashed var(--border, rgba(0,0,0,.2)); border-radius: 12px; padding: 0.6rem 0.8rem; margin: 0.8rem 0; }
.studio-ai legend { padding: 0 0.3rem; font-weight: 600; }
.studio-ai .help-text { flex-basis: 100%; margin: 0.2rem 0 0; }
.studio-when { margin-top: 0.8rem; }
.studio-when summary, .studio-templates summary { cursor: pointer; font-weight: 600; padding: 0.4rem 0; }
.inline-form { display: inline-flex; gap: 0.3rem; flex-wrap: wrap; margin: 0; }
.undo-list li, .trash-list li { padding: 0.35rem 0; border-bottom: 1px solid var(--border, rgba(0,0,0,.08)); }
.trash-list { list-style: none; padding: 0; }
.trash-list small { display: block; margin-inline-start: 1.6rem; }
.alert-ok { background: rgba(34, 160, 90, .12); border-inline-start: 4px solid #22a05a; padding: 0.5rem 0.8rem; border-radius: 8px; }
.help-types dt { margin-top: 0.7rem; }
.help-types dd { margin: 0.15rem 0 0; margin-inline-start: 1rem; }
/* צירוף קובץ לתיבת טקסט */
.text-attach { display: flex; flex-wrap: wrap; gap: 0.4rem 0.6rem; align-items: center; margin: 0.3rem 0 0.6rem; }
.text-attach-btn { min-height: 40px; }
.text-attach .help-text { margin: 0; font-size: 0.85rem; }
.text-attach-status { font-size: 0.9rem; }
textarea.is-drop-target { outline: 3px dashed var(--primary, #2a5bd7); outline-offset: 2px; background: rgba(42, 91, 215, .06); }
.studio input[type=datetime-local], #new-tzintuk input[type=datetime-local] { width: 100%; min-height: 44px; font-size: 1rem; padding: 0.4rem 0.6rem; }
/* בינה מלאכותית: הורדת תשובה / שיחה כקובץ */
.ai-msg-tools { margin-top: 0.5rem; display: flex; gap: 0.3rem 0.8rem; flex-wrap: wrap; align-items: center; font-size: 0.9rem; }
.ai-msg-tools a, .ai-msg-tools .link-button { min-height: 32px; display: inline-flex; align-items: center; }
.ai-download-all { display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; margin: 0 0 0.8rem; }
.import-links { display: grid; gap: 0.6rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin: 0.8rem 0; }
.import-links .btn { justify-content: center; }
.ai-more { margin-top: 0.8rem; }
.ai-more summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
.ai-more .ai-new { margin-top: 0.6rem; }
a.ai-new-btn { text-decoration: none; color: #fff; border-radius: 14px; font-weight: 700; box-sizing: border-box; }
/* ניהול הקו: כל ההגדרות מתוך המדריכים של ימות המשיח */
.ini-catalog { margin-top: 1rem; border: 1px solid var(--border, rgba(0,0,0,.12)); border-radius: 12px; padding: 0.5rem 0.8rem; }
.ini-catalog summary { cursor: pointer; font-weight: 600; padding: 0.3rem 0; }
.ini-catalog-list { list-style: none; padding: 0; margin: 0.5rem 0; max-height: 28rem; overflow: auto; }
.ini-catalog-list li { display: grid; gap: 0.2rem; padding: 0.5rem 0; border-bottom: 1px solid var(--border, rgba(0,0,0,.08)); }
.ini-catalog-list code { font-size: 0.9rem; word-break: break-all; }
.ini-catalog-actions { display: flex; gap: 0.6rem; align-items: center; flex-wrap: wrap; }
.ini-catalog-group { font-size: 1rem; margin: 0.8rem 0 0.2rem; }
.ini-catalog-filter input { width: 100%; }
.ai-proposal { border-inline-start: 5px solid #e0a020; }
.ai-proposal-done { border-inline-start-color: #22a05a; opacity: .85; }
.ai-proposal-rejected, .ai-proposal-failed { border-inline-start-color: #999; opacity: .7; }
.ai-proposal h2 { font-size: 1.1rem; }
.ai-list-select li { display: flex; gap: 0.6rem; align-items: center; }
.ai-list-select li > a { flex: 1; }
.ai-delete-bar { display: flex; flex-wrap: wrap; gap: 0.8rem; align-items: flex-start; margin: 0.8rem 0; }
.report-stats { display: grid; gap: 0.5rem; margin: 0.5rem 0; }
.report-stats div { display: flex; justify-content: space-between; gap: 1rem; border-bottom: 1px solid var(--border, rgba(0,0,0,.08)); padding: 0.3rem 0; }
.report-stats dt { font-weight: 600; } .report-stats dd { margin: 0; }
.health-list { list-style: none; padding: 0; }
.health-list li { padding: 0.5rem 0.6rem; border-inline-start: 4px solid #999; margin-bottom: 0.4rem; background: var(--surface-2, rgba(0,0,0,.03)); border-radius: 6px; }
.health-list .health-error { border-color: #c0392b; } .health-list .health-warn { border-color: #e0a020; } .health-list .health-info { border-color: #2a7bd7; }
.health-badge { font-weight: 700; margin-inline-end: 0.3rem; }
.lm-speed { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0.4rem 0; }

/* צ'אט: תמונה עגולה לכל שיחה, כמו במייל */
.conversation-row > .vc-avatar { margin-inline-end: 0.65rem; }
.vc-avatar-group { font-size: 1.15rem; background: var(--soft, #e8edf8); }
.conversation-row > .conversation-row-main { flex: 1; min-width: 0; }

/* מייל: חלונית אפשרויות חיפוש */
.mail-search-options { display: inline-block; }
.mail-search-options[open] { display: block; flex-basis: 100%; width: 100%; }
.mail-search-options > summary { list-style: none; cursor: pointer; }
.mail-search-options > summary::-webkit-details-marker { display: none; }
.mail-search-panel { margin-top: 0.6rem; display: grid; gap: 0.75rem; }
.mail-search-grid { display: grid; gap: 0.6rem 1rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.mail-search-grid label { margin: 0; }
.mail-search-grid input, .mail-search-grid select { width: 100%; }
.mail-search-checks { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
.mail-search-help ul { columns: 2 16rem; margin: 0.5rem 0; padding-inline-start: 1.2rem; }
.mail-search-help code { background: var(--bg, #f3f4f6); padding: 0 0.3rem; border-radius: 4px; }

/* מייל: תוויות */
.lbl-chip { display: inline-flex; align-items: center; gap: 0.25rem; padding: 0.1rem 0.6rem; border-radius: 999px;
  background: var(--soft, #e8edf8); color: var(--text); font-size: 0.85rem; font-weight: 600; white-space: nowrap; }
.lbl-list { list-style: none; padding: 0; margin: 0; }
.lbl-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem; padding: 0.6rem 0; border-bottom: 1px solid var(--border); }
.lbl-row.is-hidden .lbl-chip { opacity: 0.55; }
.lbl-actions { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-inline-start: auto; align-items: flex-start; }
.lbl-actions form { display: inline-flex; gap: 0.4rem; margin: 0; }
.lbl-new { display: flex; flex-wrap: wrap; gap: 0.75rem; align-items: flex-end; }
.lbl-palette { display: flex; flex-wrap: wrap; gap: 0.35rem; border: 0; padding: 0; margin: 0.3rem 0; }
.lbl-palette legend { font-weight: 600; margin-bottom: 0.25rem; }
.lbl-swatch { margin: 0; cursor: pointer; }
.lbl-swatch input { position: absolute; opacity: 0; }
.lbl-swatch span[aria-hidden] { display: grid; place-items: center; width: 1.8rem; height: 1.8rem; border-radius: 50%; font-weight: 700; font-size: 0.8rem; }
.lbl-swatch input:checked + span { outline: 3px solid var(--text); outline-offset: 2px; }
.lbl-swatch input:focus-visible + span { outline: 3px solid var(--gold, #E8B931); outline-offset: 2px; }
.mail-label-chips { display: inline-flex; gap: 0.25rem; flex-wrap: wrap; }
.mail-label-chips .lbl-chip { font-size: 0.72rem; padding: 0 0.45rem; }
.lbl-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--muted); }

/* דף הבית של המייל והצ'אט - כל החשבונות במבט אחד */
.mh-hero { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; padding: 1.3rem 1.5rem;
  border-radius: 18px; margin-bottom: 1rem; color: #fff; background: linear-gradient(120deg, var(--ink, #16233F), var(--ink-2, #22335A) 60%, #1F4FA8); }
.mh-hero h1 { margin: 0; color: #fff; }
.mh-hero p { margin: 0.3rem 0 0; opacity: 0.9; }
.mh-hero-side { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; }
.mh-hero-side form { margin: 0; }
.mh-total { background: rgba(255, 255, 255, .14); border-radius: 999px; padding: 0.35rem 0.9rem; }
.mh-total strong { color: var(--gold, #E8B931); }
.mh-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 380px), 1fr)); align-items: start; }
.mh-card { display: flex; flex-direction: column; gap: 0.85rem; }
.mh-card-head { display: flex; gap: 0.8rem; align-items: center; }
.mh-card-title { min-width: 0; }
.mh-card-title h2 { margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: right; }
.mh-status { font-size: 0.86rem; }
.mh-ok { color: #12805c; }
.mh-warn { color: var(--danger, #b3261e); }
.mh-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.mh-stat { display: flex; flex-direction: column; gap: 0.1rem; padding: 0.75rem 0.9rem; border-radius: 12px; border: 1px solid var(--border);
  text-decoration: none; color: var(--text) !important; background: var(--bg, #f7f7fb); }
.mh-stat:hover { border-color: var(--gold, #E8B931); }
.mh-stat strong { font-size: 1.8rem; line-height: 1.1; }
.mh-stat small { color: var(--muted); }
.mh-week { margin: 0; }
.mh-week figcaption { color: var(--muted); font-size: 0.9rem; margin-bottom: 0.4rem; }
.mh-bars { display: grid; grid-template-columns: repeat(7, 1fr); gap: 0.4rem; height: 110px; align-items: end; }
.mh-bar { display: grid; grid-template-rows: auto 1fr auto; height: 100%; text-align: center; font-size: 0.78rem; color: var(--muted); }
.mh-bar-fill { align-self: end; width: 100%; min-height: 3px; border-radius: 6px 6px 2px 2px; background: #8fa6d6; }
.mh-bar.is-today .mh-bar-fill { background: var(--gold, #E8B931); }
.mh-bar.is-today .mh-bar-day { color: var(--text); font-weight: 700; }
.mh-sub { font-size: 0.95rem; margin: 0; }
.mh-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; }
.mh-list a { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0.3rem; border-radius: 8px; color: inherit; text-decoration: none; }
.mh-list a:hover { background: var(--bg, #f3f4f6); }
/* האווטאר גם הוא span - בלי :not הוא נמתח לאליפסה והטקסט יצא מהכרטיס */
.mh-list a > span:not(.vc-avatar) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mh-list a > .vc-avatar { flex: 0 0 auto; }
.mh-card { min-width: 0; overflow: hidden; }
.mh-list > li, .mh-list a { min-width: 0; }  /* פריט ב-grid מתרחב לפי הטקסט בלי זה */
.mh-subj { color: var(--muted); }
.mh-when { color: var(--muted); white-space: nowrap; flex-shrink: 0; text-align: end; }
.mh-when .hdate { display: block; }
.mh-empty { color: var(--muted); text-align: center; margin: 0.5rem 0; }
.mh-hero-side .btn-gold { background: var(--gold, #E8B931) !important; color: var(--ink, #16233F) !important; font-weight: 700; }
.mh-card-title h2 { font-family: inherit; }

/* =====================================================================
   תצוגה ונוחות (בהשראת Mailtice) - לפי ההגדרות האישיות: גופן, צפיפות, כרטיסים/קווים
   ===================================================================== */
html[data-font="heebo"] body { font-family: "Heebo", "Segoe UI", Arial, sans-serif !important; }
html[data-font="rubik"] body { font-family: "Rubik", "Segoe UI", Arial, sans-serif !important; }
html[data-font="noto"] body { font-family: "Noto Sans Hebrew", "Segoe UI", Arial, sans-serif !important; }

/* צפיפות: שורות נמוכות יותר - יותר מיילים ושיחות במסך */
html[data-density="compact"] .mail-item a { padding-block: 0.3rem; }
html[data-density="compact"] .mail-item .vc-avatar { width: 1.9rem; height: 1.9rem; font-size: 0.78rem; }
html[data-density="compact"] .mail-snippet { display: none; }
html[data-density="compact"] .mail-item a > .vc-avatar { grid-row: 1; }
html[data-density="compact"] .conversation-row { padding-block: 0.35rem; }
html[data-density="compact"] .conversation-row > .vc-avatar { width: 1.9rem; height: 1.9rem; font-size: 0.78rem; }

/* כרטיסים: כל מייל ושיחה בכרטיס נפרד */
html[data-list="cards"] .mail-list, html[data-list="cards"] .conversation-list { display: grid; gap: 0.5rem; }
html[data-list="cards"] .mail-item, html[data-list="cards"] .conversation-item {
  border: 1px solid var(--border); border-radius: 12px; background: var(--surface); padding-inline: 0.5rem;
  box-shadow: 0 1px 4px rgba(22, 35, 63, .05); }
html[data-list="cards"] .mail-item:hover, html[data-list="cards"] .conversation-item:hover { border-color: var(--gold, #E8B931); }

/* תאריך עברי ליד הלועזי */
.hdate { color: var(--muted); font-size: 0.85em; white-space: nowrap; }
.mail-date .hdate { display: block; text-align: end; }

/* תצוגה מקדימה של קובץ מצורף */
.att-preview-btn { padding: 0.1rem 0.4rem; font-size: inherit; }
.att-dialog { width: min(960px, 94vw); max-height: 90vh; padding: 0; border: 1px solid var(--border, #ccc);
  border-radius: 12px; background: var(--surface); color: inherit; }
.att-dialog::backdrop { background: rgba(0, 0, 0, 0.55); }
.att-dialog-head { display: flex; align-items: center; gap: 0.5rem; padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--border, #ddd); }
.att-dialog-head h2 { flex: 1; margin: 0; font-size: 1.05rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.att-dialog-body { padding: 0.75rem; overflow: auto; max-height: calc(90vh - 4rem); text-align: center; }
.att-dialog-body img, .att-dialog-body video { max-width: 100%; max-height: 75vh; }
.att-dialog-body audio { width: 100%; }
.att-dialog-body iframe { width: 100%; height: 75vh; border: 0; background: #fff; }
.att-dialog-body pre { text-align: start; white-space: pre-wrap; word-break: break-word; margin: 0; }

/* מייל HTML כמו ב-Gmail: דף לבן בתוך הכרטיס, הגובה נקבע לפי התוכן (mail-tools.js) */
.mail-body-html { padding: 0.5rem; }
.mail-html { display: block; width: 100%; min-height: 220px; height: 60vh; border: 0; border-radius: 8px; background: #fff; }
.mail-plain { margin-top: 0.6rem; }
.mail-plain summary { cursor: pointer; color: var(--muted); }
.mail-plain-text { margin-top: 0.5rem; white-space: normal; }

/* דף "כל החשבונות" - באנר נמוך, כדי שהכרטיסים יופיעו מיד */
.mh-hero { padding: 0.7rem 1.1rem !important; margin-bottom: 0.8rem !important; }
.mh-hero h1 { font-size: 1.35rem !important; margin: 0 !important; }
.mh-hero p { margin: 0.15rem 0 0 !important; font-size: 0.92rem; }

/* "כל החשבונות" לאורך המסך (לבקשת המשתמש: "לאורך מצד לצד ולא מלמעלה למטה"): חשבון בשורה,
   ובתוכו ארבע עמודות - פרטים ומונים, גרף השבוע, מיילים אחרונים, הודעות צ'אט. בטלפון - אחד מתחת לשני. */
.mh-grid { grid-template-columns: 1fr !important; }
@media (min-width: 1000px) {
  .mh-card { display: grid !important; grid-template-columns: minmax(250px, 1fr) minmax(230px, .9fr) minmax(280px, 1.3fr) minmax(280px, 1.3fr);
    gap: 0 1.4rem; align-items: start; }
  .mh-col { min-width: 0; display: flex; flex-direction: column; gap: .7rem; }
  .mh-col + .mh-col { border-inline-start: 1px solid var(--border); padding-inline-start: 1.2rem; }
  .mh-col .mh-sub:first-child { margin-top: 0; }
}

/* הנגן הצף במעבר בין עמודים - קטן ובפינה, שלא יסתיר את העמוד (לבקשת המשתמש: "שזה ישאר בצד ולא יפריע
   למסך ולצפייה"). בצד השמאלי (בעברית - סוף השורה), תמונה קטנה, כותרת בשורה אחת, בלי שטח מיותר. */
.vc-float-host .vc-floating {
  inset-inline-start: auto !important; inset-inline-end: 12px; bottom: 12px;
  width: min(260px, calc(100vw - 24px)) !important; padding: .45rem .55rem !important; border-radius: 12px;
}
.vc-floating .yt-screen { margin-bottom: .35rem !important; border-radius: 8px; }
.vc-floating .yt-now { margin: 0 0 .2rem; font-size: .82rem; }
.vc-floating .yt-now-title { display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.vc-floating .yt-now-channel, .vc-floating .yt-status, .vc-floating .yt-np-side, .vc-floating .yt-np-head { display: none !important; }
.vc-floating .yt-seek-row { font-size: .72rem; gap: .3rem; }
.vc-floating :is(.yt-controls, .repo-controls) { gap: .25rem; }
.vc-floating :is(.yt-controls, .repo-controls) button { width: 2rem; height: 2rem; padding: 0 !important; font-size: .85rem; }
.vc-floating :is(.yt-controls, .repo-controls) .yt-play { width: 2.4rem; height: 2.4rem; }
.vc-floating .yt-side { display: block !important; }
.vc-float-bar { font-size: .8rem; margin-bottom: .25rem; }
body.has-vc-float { padding-bottom: 0; }
@media (max-width: 640px) {
  .vc-float-host .vc-floating { width: min(230px, calc(100vw - 16px)) !important; inset-inline-end: 8px; bottom: 8px; }
  .vc-floating .yt-screen { height: auto; max-height: none; aspect-ratio: 16 / 9; }
}

/* נגן צף מוקטן: פס קטן בצד. מסך יוטיוב נשאר במסמך (אחרת השיר נעצר), רק מוסתר מהעין */
.vc-floating.vc-float-mini { width: auto !important; max-width: min(260px, calc(100vw - 16px)); padding: .35rem .5rem !important; }
.vc-floating.vc-float-mini .yt-screen { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; opacity: 0; pointer-events: none; overflow: hidden; margin: 0 !important; }
.vc-floating.vc-float-mini :is(.yt-seek-row, .yt-now, .yt-side, .yt-list) { display: none !important; }
.vc-floating.vc-float-mini .vc-float-bar { margin-bottom: .2rem; }

/* תכנון נסיעה: בחירת עיר ורחוב מרשימה (travel/place-picker.js) */
.pp-row { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; margin: .6rem 0; }
.pp > summary { list-style: none; cursor: pointer; text-align: center; }
.pp > summary::-webkit-details-marker { display: none; }
.pp-body { display: grid; gap: .45rem; margin-top: .5rem; padding: .8rem; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.pp-body label { display: grid; gap: .2rem; }
.pp-num { max-width: 7rem; }
.pp-list { list-style: none; margin: 0; padding: .2rem; max-height: 14rem; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
html[data-skin] .pp-item { display: block; width: 100%; text-align: start; padding: .45rem .6rem !important; border: 0 !important;
  background: transparent !important; color: var(--text) !important; box-shadow: none !important; border-radius: 8px; }
html[data-skin] .pp-item:hover, html[data-skin] .pp-item:focus-visible { background: color-mix(in srgb, var(--sec, #2A97B3) 12%, var(--surface)) !important; }
@media (max-width: 640px) { .pp-row { grid-template-columns: 1fr; } }
/* תמונה שנוצרה בשיחה עם הבינה המלאכותית */
.ai-gen { margin: .3rem 0 0; display: grid; gap: .3rem; max-width: min(100%, 520px); }
.ai-gen img { width: 100%; height: auto; border-radius: 14px; border: 1px solid var(--border);
  background: repeating-linear-gradient(45deg, var(--surface), var(--surface) 10px, var(--border) 10px, var(--border) 20px); }
.gapi-list { list-style: none; padding: 0; margin: .5rem 0 0; display: grid; gap: .4rem; }
.gapi-row { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; justify-content: space-between;
  padding: .5rem .7rem; border: 1px solid var(--border); border-radius: 10px; }

.line-ini .ini-group th { background: rgba(128,128,128,.15); font-size: 1.05rem; padding: .5rem .6rem; }

/* הגדרות פשוטות של שלוחה - צפופות ומסודרות */
.simple-form .sg { border: 1px solid rgba(128,128,128,.3); border-radius: .6rem; margin: 0 0 .6rem; padding: .3rem .7rem .6rem; }
.simple-form .sg legend { font-weight: 700; padding: 0 .4rem; font-size: .95rem; }
.simple-form .sg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: .5rem .9rem; align-items: start; }
.simple-form .sg-wide { grid-column: 1 / -1; }
.simple-form .sg-field { display: block; margin: 0; font-size: .95rem; }
.simple-form .sg-field input[type=text], .simple-form .sg-field select { width: 100%; box-sizing: border-box; margin-top: .15rem; padding: .35rem .5rem; }
.simple-form .sg-check { display: flex; gap: .45rem; align-items: flex-start; margin: 0; font-size: .95rem; }
.simple-form .sg-check input { margin-top: .25rem; flex: none; }
.simple-form small { display: block; font-size: .78rem; line-height: 1.3; margin-top: .1rem; }
.simple-form .sg-radios { display: flex; flex-wrap: wrap; gap: .3rem 1rem; align-items: center; margin-bottom: .1rem; }
.simple-form .sg-radios label { margin: 0; }

/* עמוד שלוחה: ניווט מהיר, רשימת "מה צריך למלא", וחלקים מקופלים */
.quick-nav { display: flex; flex-wrap: wrap; gap: .5rem 1rem; align-items: center; padding: .5rem .9rem; margin: 0 0 .6rem; }
.checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: .3rem; }
.checklist li { padding: .3rem .5rem; border-radius: .4rem; }
.checklist .check-todo { background: rgba(220, 60, 60, .12); }
.checklist .check-ok { background: rgba(60, 160, 90, .1); }
details.adv { margin: .4rem 0; }
details.adv > summary { cursor: pointer; padding: .5rem .2rem; font-size: 1rem; }

/* בטלפון: טבלה רחבה נגללת בתוך עצמה, וקישור, קוד או הודעה ארוכה נשברים לשורות -
   במקום שכל הדף ייגלל הצידה */
.message, .site-main code, .site-main a { overflow-wrap: anywhere; }
@media (max-width: 640px) {
  .site-main table { display: block; overflow-x: auto; }
}

/* מחשב: טופס של כרטיסים (הגדרות) ברוחב מלא ולא בעמודה צרה של טופס פשוט */
form.stack:has(> .card, > section, > fieldset) { max-width: none; }

/* דף הגדרות האתר: תפריט קבוצות בצד, ובכל שורה ההסבר מימין והערך משמאל */
.cfg-page { display: grid; gap: 1rem; }
.cfg-toc { display: flex; flex-wrap: wrap; gap: .3rem .6rem; }
.cfg-toc a { padding: .3rem .6rem; border-radius: 8px; text-decoration: none; }
.cfg-toc a:hover { background: var(--soft, #eef3ff); }
.cfg-groups { display: grid; gap: 1rem; min-width: 0; }
.cfg-sub { padding: .6rem 0; border-top: 1px solid var(--border, #ddd); }
.cfg-sub h4 { margin: 0 0 .4rem; }
.cfg-group h3 { margin: 0 0 .4rem; }
.cfg-group { scroll-margin-top: 9rem; margin: 0; }
.cfg-row { display: grid; gap: .5rem; padding: .8rem 0; border-top: 1px solid var(--border, #ddd); }
.cfg-text .help-text { margin: .2rem 0 0; }
.cfg-control { display: grid; gap: .35rem; align-content: start; }
.cfg-control :is(input[type=number], input[type=text], select) { width: 100%; }
.cfg-switch { display: inline-flex; gap: .4rem; align-items: center; }
.cfg-save { position: sticky; bottom: 0; padding: .75rem 0; background: var(--bg, #f6f7fb); border-top: 1px solid var(--border, #ddd); z-index: 2; }
@media (min-width: 900px) {
  .cfg-page { grid-template-columns: 15rem minmax(0, 1fr); align-items: start; }
  .cfg-toc { position: sticky; top: 9rem; margin: 0; max-height: calc(100vh - 10rem); overflow-y: auto; flex-direction: column; flex-wrap: nowrap; }
  .cfg-page > .cfg-groups { grid-column: 2; }
  .cfg-row { grid-template-columns: minmax(0, 1fr) 18rem; gap: 2rem; align-items: start; }
}

/* מרכז ההגדרות: אותו מבנה כמו הגדרות האתר (תפריט בצד), וכל דף הגדרות בשורה אחת שכולה לחיצה */
.cfg-toc input[type=search] { width: 100%; margin-bottom: .3rem; }
.sh-row { display: grid; grid-template-columns: 1fr auto; gap: .15rem 1rem; align-items: center; padding: .75rem .5rem;
  border-top: 1px solid var(--border, #ddd); color: inherit; text-decoration: none; border-radius: 8px; }
.sh-row b { color: var(--link, #1d4ed8); }
.sh-row span { grid-column: 1; color: var(--muted, #666); font-size: .92rem; }
.sh-row i { grid-row: 1 / span 2; grid-column: 2; font-style: normal; font-size: 1.4rem; color: var(--muted, #888); }
.sh-row:hover { background: var(--soft, #eef3ff); }
@media (min-width: 900px) {
  .sh-row { grid-template-columns: 14rem 1fr auto; }
  .sh-row span { grid-column: 2; }
  .sh-row i { grid-row: 1; grid-column: 3; }
}

/* המדריך המלא */
.gd-studio{padding-inline-start:1.2rem}.gd-studio li{margin:.25rem 0}.gd-tip{color:#8a5a00}.gd-warn{color:#b42318}.gd-step,.gd-p{list-style:none;margin-inline-start:-1.2rem}
.gd-dl dt { font-weight: 700; margin-top: .6rem; }
.gd-dl dd { margin: .1rem 0 .3rem; }
.gd-pages { font-size: .92rem; }
@media print {
  .site-header, .site-footer, .flash-region, .back-btn, #ai-btn, #ai-box, .noprint { display: none !important; }
  .cfg-page { display: block; }
  .gd-ch { box-shadow: none; border: 0; break-inside: auto; }
  .gd-ch h2 { break-after: avoid; }
}

/* מדריכים צעד אחר צעד */
.tut-steps { padding-inline-start: 1.4rem; }
.tut-steps li { margin: .9rem 0; }
.tut-steps li p { margin: 0 0 .4rem; font-weight: 500; }
.tut-steps img { display: block; max-width: 100%; height: auto; border: 1px solid var(--border, #ddd); border-radius: 10px; }
@media print { .tut { break-before: page; } .tut-steps li { break-inside: avoid; } }
.tut-areas { display: flex; flex-wrap: wrap; gap: .4rem; margin: .6rem 0; }
.tut-areas .btn { padding: .35rem .8rem; }

/* מפת השלוחות בקו */
.lm-tree { list-style: none; margin: 0; padding-inline-start: 1.3rem; border-inline-start: 2px solid var(--border, #ddd); }
.lm-tree.lm-top { padding: 0; border: 0; }
.lm-node { margin: .45rem 0; }
.lm-row { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; }
.lm-keys { min-width: 3.4rem; text-align: center; direction: ltr; background: var(--primary, #16233F); color: #fff; border-radius: 6px; padding: 0 .4rem; font-weight: 700; }

/* כל כפתור בכל דף */
.atl-wrap { display: grid; gap: 1rem; }
.atl-img img { display: block; width: 100%; height: auto; max-height: 900px; object-fit: cover; object-position: top;
  border: 1px solid var(--border, #ddd); border-radius: 10px; }
.atl-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.atl-table td, .atl-table th { padding: .3rem .4rem; border-bottom: 1px solid var(--border, #eee); vertical-align: top; text-align: start; }
.atl-n { display: inline-block; min-width: 1.6rem; border-radius: 999px; background: #e11d48; color: #fff; text-align: center; font-weight: 700; }
@media (min-width: 1200px) { .atl-wrap { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: start; }
  .atl-table { max-height: 900px; } }
.health ul { list-style: none; margin: .4rem 0 0; padding: 0; display: grid; gap: .3rem; }
.health-bad { font-weight: 700; }

/* הנגן הקטן (mini-player.js) תמיד בצורת החלון הצף של המעבר בין עמודים: כרטיס בפינה עם הסרטון / התמונה,
   שם השיר, סרגל זמן, כפתורים ו"לעמוד השירים" - ולא פס רחב בתחתית המסך. */
.vc-mini {
  inset-inline: auto; inset-inline-end: 12px; bottom: 12px; z-index: 60;
  width: min(260px, calc(100vw - 24px)); max-height: calc(100vh - 24px); overflow: auto;
  flex-direction: row; flex-wrap: wrap; align-items: center; gap: .35rem;
  padding: .45rem .55rem; border-radius: 12px; border: 1px solid rgba(232, 185, 49, 0.35);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .35); font-size: .85rem;
}
.vc-mini.is-big { width: min(420px, calc(100vw - 24px)); }
body.has-vc-mini { padding-bottom: 1rem; }
.vc-mini .vc-mini-open { order: 0; flex: 1 1 auto; font-size: .9rem; }
.vc-mini .vc-mini-big-btn { order: 1; }
.vc-mini .vc-mini-close { order: 2; }
.vc-mini .vc-mini-big-btn, .vc-mini .vc-mini-close { min-width: 0; height: auto; padding: .15rem .5rem; line-height: 1.2; }
.vc-mini .vc-mini-art-link, .vc-mini .vc-mini-video, .vc-mini .vc-mini-yt { order: 3; flex: 0 0 100%; }
.vc-mini .vc-mini-art-link, .vc-mini.is-big .vc-mini-art-link { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.vc-mini .vc-mini-art, .vc-mini.is-big .vc-mini-art { width: 100%; height: 100%; }
.vc-mini .vc-mini-video, .vc-mini.is-big .vc-mini-video { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.vc-mini .vc-mini-yt iframe { width: 100%; height: auto; aspect-ratio: 16 / 9; }
.vc-mini.has-video .vc-mini-art-link, .vc-mini:has(.vc-mini-yt:not([hidden])) .vc-mini-art-link { display: none; }
.vc-mini .vc-mini-info { order: 4; flex: 0 0 100%; }
.vc-mini .vc-mini-title, .vc-mini.is-big .vc-mini-title { font-size: .9rem; white-space: nowrap; }
.vc-mini .vc-mini-seek { order: 5; flex: 0 0 100%; font-size: .72rem; }
.vc-mini .vc-mini-controls { order: 6; flex: 0 0 100%; justify-content: center; }
.vc-mini .vc-mini-controls { gap: .2rem; }
.vc-mini .vc-mini-controls button { min-width: 0; padding: .25rem .45rem; font-size: .85rem; }
.vc-mini .vc-mini-controls .vc-mini-play { min-width: 2.3rem; height: 2.3rem; }
@media (max-width: 640px) {
  .vc-mini { inset-inline-end: 8px; bottom: 8px; width: calc(100vw - 16px); max-height: 45vh; }
  .vc-mini.is-big { width: calc(100vw - 16px); }
  .vc-mini .vc-mini-art-link, .vc-mini .vc-mini-video, .vc-mini .vc-mini-yt iframe { max-height: 22vh; }
  body.has-vc-mini { padding-bottom: 1rem; }
}