diff --git a/FEATURE_SUGGESTIONS/theme_matrix.md b/FEATURE_SUGGESTIONS/theme_matrix.md
index e0817c2f0..09d58ce61 100644
--- a/FEATURE_SUGGESTIONS/theme_matrix.md
+++ b/FEATURE_SUGGESTIONS/theme_matrix.md
@@ -16,6 +16,7 @@
 | ``--btn-primary-*`` | `color-mix` על סמך ``--bg-tertiary`` | טקסט כהה על לבן | טקסט כחול כהה על לבן | טקסט ירוק כהה על לבן | `color-mix` עם ורוד | שחור/לבן/צהוב בלבד |
 | ``--md-surface`` / ``--md-text`` | כהה אחיד | כהה מותאם (`#15141f`) | כהה כחול (`#1a365d`) | כהה ירוק (`#1a4731`) | נשאר כהה כדי להגן על Highlight | שחור/לבן בהתאם לחוקים |
 | ``--split-preview-*`` | מוגדר בערכי ברירת מחדל ב-`split-view.css` | ✔️ | ✔️ (rgba בגוון כחול) | ✔️ (rgba ירוק) | ✔️ (rgba סגלגל) | ✔️ (שחור/לבן/צהוב) |
+| ``--ck-toast-*`` | Override כהה ב-`toast.css` | ברירת המחדל הבהירה | ברירת המחדל הבהירה | ברירת המחדל הבהירה | ברירת המחדל הבהירה | שחור/לבן ייעודי |
 | ``--search-*`` | משתמש בערכי ברירת מחדל כהים | צל ייחודי `rgba(7,7,31,0.35)` | צל כחול + הדגשת info | צל ירוק | מדגיש צבעי עץ | שחור/לבן עם צהוב (WCAG) |
 
 ## בדיקות רגרסיה
diff --git a/docs/webapp/theming_and_css.rst b/docs/webapp/theming_and_css.rst
index 13e813e86..5f65a726b 100644
--- a/docs/webapp/theming_and_css.rst
+++ b/docs/webapp/theming_and_css.rst
@@ -321,6 +321,8 @@ Component Tokens ו‑Theme Builder
 - Collections (`webapp/static/css/collections.css`) עדיין מכיל צבעים קשיחים ישנים – כל שינוי חייב להמיר ל‑`var()` לפי טבלת הטוקנים.  
 - Split View ו‑Markdown Enhanced משתמשים ב‑``--split-*`` ו‑``--md-*`` בהתאמה – הוסיפו טוקן לפני שמוסיפים Class חדש.  
 - Sticky Notes, Reader Modes (`md_preview.html`) וה‑``theme_preview.html`` הם חריגים שנשארים Hardcoded כדי לשמור על תצוגת Preset.  
+- **מלכודת ספציפיות ב-**\ ``transition``\ **, שכל רכיב חדש נתקל בה.** ``dark-mode.css`` מגדיר ``transition`` על ``[data-theme="dark"] *`` (וכן ``dim``, ``nebula``, ``custom`` ו-``shared:``). הספציפיות של ``[attr] *`` שווה לזו של מחלקה יחידה, והקובץ נטען אחרי בלוק ``extra_css`` שבתבנית — ולכן כלל ``transition`` שנכתב על מחלקה אחת בקובץ רכיב **נדרס בשקט בכל הערכות הכהות**, וההנפשה פשוט לא רצה. הכשל שקט לחלוטין: אין שגיאה, ובדיקה בערכה בהירה עוברת. הפתרון שבשימוש ב-``toast.css`` הוא חזרה על שם המחלקה (``.ck-toast.ck-toast``), שמעלה את הספציפיות בלי ``!important``. אותו טיפול נדרש גם לכלל ה-``prefers-reduced-motion`` של הרכיב, שאחרת נדרס באותה דרך.
+- ``toast.css`` מגדיר את משפחת ``--ck-toast-*`` (Level 3) ונטען כיום רק מ-``settings.html``. מרחב השמות שלו נפרד מ-``.notification`` בכוונה: ``bookmarks.css`` ו-``multi-select.css`` מגדירים את הסלקטור ההוא בשניהם, עם ערכים סותרים. את ערכי הרקע והטקסט הוא מעתיק מ-``bookmarks.css`` במקום לגזור אותם מ-``--bg-secondary``; הגזירה נבדקה ונפסלה כי ב-Classic היא יורדת מתחת ליחס הניגודיות הנדרש.
 - `global_search.css` הינו דוגמה מצוינת לרכיב Component Tokens – כאשר מוסיפים תכונה חדשה (למשל badge נוסף) המשיכו את התבנית שם.  
 - Collections / Split View / Markdown Enhanced מוזכרים בדף זה כדי שמפתחים ידעו להצליב בין הרכיבים ולזהות אילו טוקנים משותפים.
 
@@ -336,7 +338,7 @@ Component Tokens ו‑Theme Builder
    - ``webapp/templates/base.html`` – בלוק ה‑``<style>``: מקור כל ה‑Primitives ו‑``:root[data-theme]``, קביעת ``data-theme`` מוקדמת, וה‑Theme Wizard.
    - ``webapp/static/css/dark-mode.css`` – שימוש בטוקנים עבור רכיבי Dark/Dim/Nebula.
    - ``webapp/static/css/high-contrast.css`` – טוקני הבסיס של High Contrast, ובנוסף התאמות פוקוס/Outline. שאר הטוקנים שלה מושלמים ברמת הרכיב.
-   - ``webapp/static/css/global_search.css``, ``split-view.css``, ``bookmarks.css``, ``collections.css`` – דוגמאות מעשיות לטוקנים.
+   - ``webapp/static/css/global_search.css``, ``split-view.css``, ``bookmarks.css``, ``collections.css``, ``toast.css`` – דוגמאות מעשיות לטוקנים.
    - Issue #2097 – מפרט Theme Builder (טוקנים במיקוד, UI/Backend/API, נגישות ו‑Reset flow).
 
 לשאלות תיעוד/Testing יש לפנות לערוץ Frontend או לפתוח Issue חדש עם קישור לדף זה. הקפידו לעיין גם ב‑`FEATURE_SUGGESTIONS/css_refactor_plan.md` לפני שינויים רוחביים בקוד.
diff --git a/tests/settings-note-fonts.test.js b/tests/settings-note-fonts.test.js
index f6589dab1..c2e3cb921 100644
--- a/tests/settings-note-fonts.test.js
+++ b/tests/settings-note-fonts.test.js
@@ -57,8 +57,12 @@ function mkSelect(surface, value) {
 /**
  * ``fetchImpl`` מקבל את גוף הבקשה המפורסר ומחזיר ``{ok, body}``.
  * ברירת המחדל: הצלחה.
+ *
+ * ``opts.toast`` — ``undefined``: טוסט שמצליח (המסלול הרגיל);
+ * ``false``: טוסט שאינו מצליח להציג; ``null``: אין ``ckToast`` כלל.
+ * שני האחרונים חייבים ליפול לשורת ההודעה, אחרת הודעת כשל שמירה נעלמת.
  */
-function load(fetchImpl) {
+function load(fetchImpl, opts = {}) {
   const sent = [];
   const msg = { textContent: '', style: { display: 'none', color: '' } };
   const selects = [
@@ -68,8 +72,14 @@ function load(fetchImpl) {
   ];
   const scopeSel = mkSelect('__scope', 'global');
 
+  // שעון אירועים בדיד לשורת הגיבוי, שמסתירה את עצמה בטיימר.
+  let now = 0, seq = 0;
+  const timers = new Map();
+
   const sandbox = {
     console: { error: () => {} },
+    setTimeout: (fn, ms) => { const id = ++seq; timers.set(id, { at: now + ms, fn }); return id; },
+    clearTimeout: (id) => { timers.delete(id); },
     document: {
       getElementById: (id) => (id === 'noteFontsScopeSelect' ? scopeSel
                             : id === 'noteFontsMsg' ? msg : null),
@@ -87,10 +97,38 @@ function load(fetchImpl) {
       };
     },
   };
+  const toasts = [];
+  // ``ckToast`` מותקן על ה-sandbox ולא נלכד במשתנה, כי יש תרחיש שבו הוא
+  // **מופיע באמצע**: ``toast.js`` נטען ב-``defer`` ולכן רץ אחרי הפרסור,
+  // בעוד שהמאזינים נרשמים בסקריפט מוטבע תוך כדי הפרסור.
+  function installToast(ok = true) {
+    sandbox.ckToast = (message, type, o) => {
+      toasts.push({ message, type, key: o && o.key });
+      return ok;
+    };
+  }
+  if (opts.toast !== null) installToast(opts.toast !== false);
+
   vm.createContext(sandbox);
   sandbox.window = sandbox;
   vm.runInContext(fontsScript(), sandbox);
-  return { sent, msg, selects, scopeSel };
+
+  function advance(ms) {
+    const target = now + ms;
+    for (;;) {
+      let nextId = null, next = null;
+      for (const [id, t] of timers) {
+        if (t.at <= target && (next === null || t.at < next.at)) { nextId = id; next = t; }
+      }
+      if (next === null) { now = target; return; }
+      now = next.at;
+      timers.delete(nextId);
+      next.fn();
+    }
+  }
+
+  return { sent, msg, selects, scopeSel, toasts, advance, installToast,
+           pending: () => timers.size };
 }
 
 // ─── גוף הבקשה ──────────────────────────────────────────────────────────
@@ -131,14 +169,16 @@ await acheck('שינוי התחולה שולח גם את הערכים', async ()
 
 // ─── כשל ────────────────────────────────────────────────────────────────
 
-await acheck('כשל מחזיר את הבורר ומציג הודעה', async () => {
+await acheck('כשל מחזיר את הבורר ומציג חיווי שגיאה', async () => {
   const h = load(async () => ({ ok: false, status: 500, body: null }));
   h.selects[1].value = '1';
   await h.selects[1].__fire('change');
 
   eq(h.selects[1].value, '0', 'הבורר הוחזר');
-  eq(h.msg.style.display, 'block', 'ההודעה מוצגת');
-  eq(h.msg.textContent.includes('נכשלה'), true, 'נוסח ההודעה');
+  eq(h.toasts.length, 1, 'מספר החיוויים');
+  eq(h.toasts[0].type, 'error', 'סוג החיווי');
+  eq(h.toasts[0].message.includes('נכשלה'), true, 'נוסח ההודעה');
+  eq(h.msg.style.display, 'none', 'שורת הגיבוי אינה מוצגת');
 });
 
 await acheck('הצלחה מציגה אישור ואינה מחזירה כלום', async () => {
@@ -146,7 +186,12 @@ await acheck('הצלחה מציגה אישור ואינה מחזירה כלום'
   h.selects[0].value = '1';
   await h.selects[0].__fire('change');
   eq(h.selects[0].value, '1', 'הבורר נשאר');
-  eq(h.msg.textContent, 'נשמר', 'ההודעה');
+  eq(h.toasts.length, 1, 'מספר החיוויים');
+  eq(h.toasts[0].message, 'נשמר', 'ההודעה');
+  eq(h.toasts[0].type, 'success', 'סוג החיווי');
+  // שני ערוצים, ורק אחד פעיל. בלי ההטענה הזו, ``notify`` שיאבד את
+  // ה-``return`` המוקדם היה מציג גם טוסט וגם שורה, וכל הבדיקות עוברות.
+  eq(h.msg.style.display, 'none', 'שורת הגיבוי אינה מוצגת');
 });
 
 await acheck('כשל מחזיר למצב האחרון שנשמר, לא לערך הקודם', async () => {
@@ -235,7 +280,7 @@ await acheck('הצלחה ואז כשל באותו תור — ההחזרה תוא
   eq(h.sent.length, 2, 'שתי בקשות');
   eq(h.selects[0].value, '1', 'מה שהשרת קיבל נשאר על המסך');
   eq(h.selects[1].value, '0', 'מה שנכשל הוחזר');
-  eq(h.msg.textContent.includes('נכשלה'), true, 'ההודעה');
+  eq(h.toasts[h.toasts.length - 1].type, 'error', 'החיווי האחרון');
 });
 
 await acheck('הגוף שנשלח תואם ל-snapshot של אותו רגע', async () => {
@@ -262,5 +307,120 @@ await acheck('הגוף שנשלח תואם ל-snapshot של אותו רגע', as
      JSON.stringify({ repo: true, md: false, board: true }), 'השנייה');
 });
 
+// ─── החיווי ─────────────────────────────────────────────────────────────
+
+await acheck('שתי שמירות מוצלחות מפיקות שני חיוויים', async () => {
+  // **זה הבאג שדווח.** בגרסה הקודמת החיווי היה שורת סטטוס קבועה, ושמירה
+  // שנייה כתבה בה את אותה מחרוזת בדיוק — אפס שינוי ב-DOM, ולכן אפס חיווי.
+  // בדיקה על תוכן השורה הייתה עוברת גם על הקוד השבור; רק ספירת אירועים
+  // מבחינה ביניהם.
+  const h = load();
+  h.selects[0].value = '1';
+  await h.selects[0].__fire('change');
+  h.selects[1].value = '1';
+  await h.selects[1].__fire('change');
+
+  eq(h.sent.length, 2, 'שתי בקשות');
+  eq(h.toasts.length, 2, 'שני חיוויים — לא אחד');
+  eq(h.toasts[1].message, 'נשמר', 'גם השני');
+});
+
+await acheck('כל החיוויים נושאים מפתח אחיד', async () => {
+  // המפתח הוא מה שגורם לחיווי חדש להחליף את הקודם במקום להיערם לצידו.
+  const h = load();
+  h.selects[0].value = '1';
+  await h.selects[0].__fire('change');
+  h.scopeSel.value = 'device';
+  await h.scopeSel.__fire('change');
+
+  eq(h.toasts.length, 2, 'שני חיוויים');
+  eq(h.toasts[0].key, 'note-fonts', 'מפתח ראשון');
+  eq(h.toasts[1].key, 'note-fonts', 'מפתח שני');
+});
+
+await acheck('בלי ckToast — ההודעה נופלת לשורת הגיבוי', async () => {
+  // ``toast.js`` נטען ב-``defer``. אם הוא לא הגיע, הודעת כשל שמירה
+  // חייבת עדיין להגיע למשתמש.
+  const h = load(async () => ({ ok: false, status: 500, body: null }), { toast: null });
+  h.selects[1].value = '1';
+  await h.selects[1].__fire('change');
+
+  eq(h.msg.style.display, 'block', 'השורה מוצגת');
+  eq(h.msg.textContent.includes('נכשלה'), true, 'נוסח ההודעה');
+});
+
+await acheck('ckToast שהחזירה false — נופלת לשורת הגיבוי', async () => {
+  // ``ckToast`` מדווחת כשל בערך ההחזרה ולא בזריקה. קורא שמתעלם ממנו
+  // מציג "הכול תקין" על חיווי שלא הוצג — K11 בדפוסי הבאגים.
+  const h = load(async () => ({ ok: false, status: 500, body: null }), { toast: false });
+  h.selects[1].value = '1';
+  await h.selects[1].__fire('change');
+
+  eq(h.toasts.length, 1, 'הטוסט נוסה');
+  eq(h.msg.style.display, 'block', 'ובכל זאת השורה הוצגה');
+  eq(h.msg.textContent.includes('נכשלה'), true, 'נוסח ההודעה');
+});
+
+await acheck('שורת הגיבוי מסתתרת מעצמה', async () => {
+  // שורת מצב שלא מסתירה את עצמה היא בדיוק התסמין שתוקן כאן. הגיבוי
+  // מקבל את אותו טיפול.
+  const h = load(async () => ({ ok: false, status: 500, body: null }), { toast: null });
+  h.selects[1].value = '1';
+  await h.selects[1].__fire('change');
+
+  eq(h.msg.style.display, 'block', 'מוצגת');
+  h.advance(3999);
+  eq(h.msg.style.display, 'block', 'לפני הזמן');
+  h.advance(1);
+  eq(h.msg.style.display, 'none', 'נעלמה');
+  eq(h.pending(), 0, 'לא נשארו טיימרים');
+});
+
+await acheck('שמירה נוספת מאפסת את טיימר הגיבוי ואינה עורמת', async () => {
+  // בלי ``clearTimeout``, טיימר של הודעה קודמת היה מסתיר הודעה חדשה
+  // מוקדם מדי — אותו CORE U1 שכבר טופל בטוסט.
+  const h = load(async () => ({ ok: false, status: 500, body: null }), { toast: null });
+  h.selects[0].value = '1';
+  await h.selects[0].__fire('change');
+  h.advance(3900);
+  h.selects[1].value = '1';
+  await h.selects[1].__fire('change');
+
+  eq(h.pending(), 1, 'טיימר אחד, לא שניים');
+  h.advance(200);                        // הזמן שבו הראשון היה מסתיר
+  eq(h.msg.style.display, 'block', 'עדיין מוצגת');
+  h.advance(3800);
+  eq(h.msg.style.display, 'none', 'נעלמה לפי הטיימר החדש');
+});
+
+await acheck('מעבר מהגיבוי לטוסט מכבה את שורת הגיבוי', async () => {
+  // **התרחיש אמיתי ולא תיאורטי.** ``toast.js`` נטען ב-``defer``
+  // (``settings.html:377``) ולכן רץ רק אחרי סיום הפרסור, בעוד שהמאזינים
+  // ל-``change`` נרשמים בסקריפט מוטבע (``settings.html:1936``) תוך כדי
+  // הפרסור. בחיבור איטי יש חלון שבו העמוד אינטראקטיבי ו-``ckToast``
+  // עדיין אינו קיים.
+  //
+  // שמירה שנכשלת בחלון הזה נופלת לשורת הגיבוי ודורכת טיימר של 4 שניות.
+  // ניסיון חוזר אחרי שהסקריפט נטען עובר לטוסט — ובלי כיבוי מפורש,
+  // השגיאה המיושנת נשארת גלויה לצד טוסט ההצלחה.
+  let fail = true;
+  const h = load(async () => (fail ? { ok: false, status: 500, body: null }
+                                   : { ok: true, body: { ok: true } }), { toast: null });
+
+  h.selects[1].value = '1';
+  await h.selects[1].__fire('change');
+  eq(h.msg.style.display, 'block', 'שורת הכשל מוצגת');
+  eq(h.pending(), 1, 'הטיימר דרוך');
+
+  h.installToast();                       // ``toast.js`` הגיע
+  fail = false;
+  h.selects[0].value = '1';
+  await h.selects[0].__fire('change');
+
+  eq(h.toasts.length, 1, 'ההצלחה עברה בטוסט');
+  eq(h.msg.style.display, 'none', 'ושורת הגיבוי כובתה');
+  eq(h.pending(), 0, 'והטיימר שלה בוטל');
+});
+
 console.log(`${passed} עברו, ${failed} נכשלו`);
 process.exit(failed === 0 ? 0 : 1);
diff --git a/tests/toast.test.js b/tests/toast.test.js
new file mode 100644
index 000000000..4bee6dd41
--- /dev/null
+++ b/tests/toast.test.js
@@ -0,0 +1,378 @@
+'use strict';
+// בדיקות ל-``webapp/static/js/toast.js`` — טוסט החיווי של עמוד ההגדרות.
+//
+// **מה הבדיקות האלה כן מוכיחות:** את הלוגיקה — בריחה מ-HTML, רשימת ההיתר
+// של הסוג, ההחלפה לפי מפתח, ביטול הטיימרים, וערוץ הכשל.
+//
+// **ומה לא:** שהטוסט באמת נראה ומונפש. DOM מזויף לא אוכף פריסה, מעברים או
+// ערכות נושא. את זה מוכיחה רק הרצה בדפדפן אמיתי — ראו כלל 2 ב-
+// ``claude-md-snippets/testing.md``.
+
+import fs from 'fs';
+import path from 'path';
+import vm from 'vm';
+import { fileURLToPath } from 'url';
+
+const __dirname = path.dirname(fileURLToPath(import.meta.url));
+const SRC = fs.readFileSync(
+  path.join(__dirname, '..', 'webapp', 'static', 'js', 'toast.js'), 'utf8');
+
+let passed = 0, failed = 0;
+function check(name, fn) {
+  try { fn(); passed += 1; }
+  catch (e) { failed += 1; console.error(`✗ ${name}\n    ${e && e.message}`); }
+}
+function eq(a, b, what) {
+  if (a !== b) throw new Error(`${what || ''} — ציפיתי ל-${JSON.stringify(b)}, קיבלתי ${JSON.stringify(a)}`);
+}
+function ok(v, what) { if (!v) throw new Error(what || 'ציפיתי לאמת'); }
+
+/** אלמנט מדומה — רק מה ש-``toast.js`` באמת נוגע בו. */
+function mkEl() {
+  const el = {
+    id: '', className: '', textContent: '',
+    attrs: {}, children: [], parentNode: null,
+    // קריאתו היא שמכריחה reflow בקוד האמיתי; כאן רק סופרים.
+    reads: 0,
+    get offsetWidth() { el.reads += 1; return 1; },
+    setAttribute: (k, v) => { el.attrs[k] = v; },
+    appendChild: (c) => { c.parentNode = el; el.children.push(c); return c; },
+    removeChild: (c) => {
+      const i = el.children.indexOf(c);
+      if (i >= 0) el.children.splice(i, 1);
+      c.parentNode = null;
+      return c;
+    },
+    classList: {
+      add: (c) => { if (!el.className.split(' ').includes(c)) el.className += ' ' + c; },
+      remove: (c) => {
+        el.className = el.className.split(' ').filter((x) => x && x !== c).join(' ');
+      },
+      contains: (c) => el.className.split(' ').includes(c),
+    },
+  };
+  return el;
+}
+
+/**
+ * טוען את הסקריפט לסנדבוקס עם DOM וטיימרים נשלטים.
+ * ``withBody: false`` מדמה קריאה לפני שה-``body`` קיים.
+ */
+function load({ withBody = true, computed = undefined } = {}) {
+  const body = withBody ? mkEl() : null;
+  const byId = new Map();
+  let now = 0, seq = 0;
+  const timers = new Map();          // id ← { at, fn }
+
+  const sandbox = {
+    Object, String, Array, JSON, Error,
+    document: {
+      get body() { return body; },
+      getElementById: (id) => byId.get(id) || null,
+      createElement: () => mkEl(),
+    },
+    setTimeout: (fn, ms) => {
+      const id = ++seq;
+      timers.set(id, { at: now + ms, fn });
+      return id;
+    },
+    clearTimeout: (id) => { timers.delete(id); },
+  };
+  // ``computed`` לא נמסר ← אין ``getComputedStyle`` כלל, כמו בסביבת
+  // הבדיקות האמיתית; ``null`` ← קיים וזורק; מחרוזת ← ``transitionDuration``.
+  if (computed !== undefined) {
+    sandbox.getComputedStyle = (el) => {
+      if (computed === null) throw new Error('no view');
+      return { transitionDuration: computed };
+    };
+  }
+  vm.createContext(sandbox);
+  sandbox.window = sandbox;
+  vm.runInContext(SRC, sandbox);
+
+  // הקונטיינר נרשם ב-``byId`` ברגע שנוצר, כמו ``document.getElementById``.
+  const origAppend = body ? body.appendChild : null;
+  if (body) {
+    body.appendChild = (c) => { if (c.id) byId.set(c.id, c); return origAppend(c); };
+  }
+
+  return {
+    toast: (...a) => sandbox.window.ckToast(...a),
+    body,
+    container: () => byId.get('ckToastContainer') || null,
+    pending: () => timers.size,
+    // שעון אירועים בדיד: ``now`` מתקדם **אל** כל טיימר לפי סדר, ולא קופץ
+    // ואז מנקז. ההבדל אינו קוסמטי — טיימר שנקבע מתוך callback נמדד מזמן
+    // הירי שלו, וקפיצה מראש הייתה דוחה אותו מעבר לחלון הנבדק.
+    advance: (ms) => {
+      const target = now + ms;
+      for (;;) {
+        let nextId = null, next = null;
+        for (const [id, t] of timers) {
+          if (t.at <= target && (next === null || t.at < next.at)) { nextId = id; next = t; }
+        }
+        if (next === null) { now = target; return; }
+        now = next.at;
+        timers.delete(nextId);
+        next.fn();
+      }
+    },
+  };
+}
+
+// ─── בריחה וולידציה ─────────────────────────────────────────────────────
+
+check('ההודעה נכתבת כטקסט, לא כ-HTML', () => {
+  // הקורא מעביר גם ``data.error`` מהשרת. ``bulk-actions.js:440`` מזריק
+  // ערך כזה ל-``innerHTML``; כאן זה חייב להישאר טקסט. K4 בדפוסי הבאגים.
+  const h = load();
+  const evil = '<img src=x onerror=alert(1)>';
+  h.toast(evil, 'error');
+  const card = h.container().children[0];
+  const msg = card.children[1];
+  eq(msg.textContent, evil, 'ההודעה');
+  eq(msg.children.length, 0, 'לא נוצרו צאצאים מההודעה');
+});
+
+check('סוג לא מוכר אינו נכנס לשם המחלקה', () => {
+  // ``type`` משורשר לתוך ``className``. בלי רשימת היתר, ערך שרירותי
+  // מזריק מחלקות.
+  const h = load();
+  h.toast('שלום', 'evil ck-toast--success');
+  const card = h.container().children[0];
+  eq(card.className.includes('ck-toast--info'), true, 'נפילה ל-info');
+  eq(card.className.includes('evil'), false, 'הערך לא חלחל');
+});
+
+check('כל סוג מוכר מקבל את המחלקה ואת האייקון שלו', () => {
+  const expect = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };
+  for (const [type, icon] of Object.entries(expect)) {
+    const h = load();
+    h.toast('טקסט', type);
+    const card = h.container().children[0];
+    eq(card.className.includes('ck-toast--' + type), true, `מחלקה ל-${type}`);
+    eq(card.children[0].textContent, icon, `אייקון ל-${type}`);
+  }
+});
+
+check('האייקון מוסתר מקורא מסך', () => {
+  const h = load();
+  h.toast('טקסט', 'success');
+  eq(h.container().children[0].children[0].attrs['aria-hidden'], 'true', 'aria-hidden');
+});
+
+// ─── כניסה ──────────────────────────────────────────────────────────────
+
+check('מאפיין הפריסה נקרא לפני הוספת מחלקת הכניסה', () => {
+  // בלי הקריאה הזו אין reflow, הדפדפן מקבץ את שני הסגנונות, ואין ממה
+  // להנפיש — הטוסט פשוט מופיע. זו הסיבה היחידה שהשורה קיימת.
+  const h = load();
+  h.toast('נשמר', 'success');
+  const card = h.container().children[0];
+  eq(card.reads > 0, true, 'offsetWidth נקרא');
+  eq(card.classList.contains('is-shown'), true, 'מחלקת הכניסה');
+});
+
+check('הקונטיינר נוצר פעם אחת בלבד', () => {
+  const h = load();
+  h.toast('א', 'info');
+  h.toast('ב', 'info');
+  eq(h.body.children.length, 1, 'ילדי body');
+  eq(h.container().children.length, 2, 'שני טוסטים באותו קונטיינר');
+  eq(h.container().attrs['aria-live'], 'polite', 'aria-live');
+});
+
+// ─── מפתח והחלפה ────────────────────────────────────────────────────────
+
+check('אותו מפתח מחליף במקום לערום', () => {
+  // **זה הבאג שדווח.** בלי זה, שלוש שמירות ברצף מייצרות שלושה כרטיסים
+  // זהים זה לצד זה.
+  const h = load();
+  h.toast('נשמר', 'success', { key: 'k' });
+  const first = h.container().children[0];
+  h.toast('נשמר', 'success', { key: 'k' });
+
+  eq(h.container().children.length, 1, 'כרטיס אחד');
+  eq(first.parentNode, null, 'הקודם נותק');
+  eq(h.container().children[0] === first, false, 'זהו כרטיס חדש');
+  eq(h.container().children[0].classList.contains('is-shown'), true, 'נכנס מחדש');
+});
+
+check('מפתחות שונים מצטברים', () => {
+  const h = load();
+  h.toast('א', 'info', { key: 'a' });
+  h.toast('ב', 'info', { key: 'b' });
+  eq(h.container().children.length, 2, 'שני כרטיסים');
+});
+
+check('בלי מפתח — מצטבר', () => {
+  const h = load();
+  h.toast('א', 'info');
+  h.toast('ב', 'info');
+  eq(h.container().children.length, 2, 'שני כרטיסים');
+});
+
+check('ההחלפה מבטלת את הטיימרים של הקודם', () => {
+  // בלי ``clearTimeout``, כל שמירה משאירה טיימר תלוי על כרטיס מנותק.
+  // בהחלפה מהירה חוזרת הם נערמים בלי גבול.
+  const h = load();
+  h.toast('נשמר', 'success', { key: 'k' });
+  eq(h.pending(), 1, 'טיימר אחד אחרי הראשון');
+  h.toast('נשמר', 'success', { key: 'k' });
+  eq(h.pending(), 1, 'עדיין אחד אחרי ההחלפה — לא שניים');
+});
+
+check('טיימר של כרטיס שהוחלף אינו נוגע בחדש', () => {
+  const h = load();
+  h.toast('ראשון', 'success', { key: 'k' });
+  h.advance(3900);                       // כמעט הגיע זמנו של הראשון
+  h.toast('שני', 'success', { key: 'k' });
+  h.advance(200);                        // הזמן שבו הראשון היה נעלם
+  const card = h.container().children[0];
+  eq(h.container().children.length, 1, 'הכרטיס עדיין שם');
+  eq(card.classList.contains('is-shown'), true, 'ועדיין מוצג');
+  eq(card.children[1].textContent, 'שני', 'וזה החדש');
+});
+
+// ─── היעלמות ────────────────────────────────────────────────────────────
+
+check('נעלם מעצמו אחרי ברירת המחדל', () => {
+  const h = load();
+  h.toast('נשמר', 'success', { key: 'k' });
+  h.advance(3999);
+  eq(h.container().children.length, 1, 'לפני הזמן — עדיין שם');
+  h.advance(1);
+  eq(h.container().children[0].classList.contains('is-shown'), false, 'יציאה החלה');
+  eq(h.container().children.length, 1, 'עדיין ב-DOM בזמן היציאה');
+  h.advance(300);
+  eq(h.container().children.length, 0, 'הוסר');
+  eq(h.pending(), 0, 'לא נשארו טיימרים');
+});
+
+check('duration מותאם מכובד', () => {
+  const h = load();
+  h.toast('נשמר', 'success', { duration: 1000 });
+  h.advance(1000);
+  eq(h.container().children[0].classList.contains('is-shown'), false, 'יציאה מוקדמת');
+});
+
+check('אחרי היעלמות, מפתח זהה נפתח מחדש', () => {
+  const h = load();
+  h.toast('א', 'success', { key: 'k' });
+  h.advance(4300);
+  eq(h.container().children.length, 0, 'נוקה');
+  h.toast('ב', 'success', { key: 'k' });
+  eq(h.container().children.length, 1, 'נפתח מחדש');
+  eq(h.container().children[0].classList.contains('is-shown'), true, 'ומוצג');
+});
+
+// ─── ערוץ הכשל ──────────────────────────────────────────────────────────
+
+check('מחזירה true כשהוצגה', () => {
+  const h = load();
+  eq(h.toast('נשמר', 'success'), true, 'ערך ההחזרה');
+});
+
+check('מחזירה false כשאין body — ולא זורקת', () => {
+  // הקורא בעמוד ההגדרות נשען על הערך הזה כדי ליפול לשורת הגיבוי. אם
+  // הפונקציה הייתה מחזירה undefined בשקט, הודעת כשל שמירה הייתה נעלמת.
+  const h = load({ withBody: false });
+  eq(h.toast('השמירה נכשלה', 'error'), false, 'ערך ההחזרה');
+});
+
+check('הודעה ריקה או חסרה אינה מייצרת "undefined"', () => {
+  const h = load();
+  h.toast(undefined, 'info');
+  eq(h.container().children[0].children[1].textContent, '', 'טקסט ריק');
+});
+
+// ─── משך התצוגה ─────────────────────────────────────────────────────────
+
+check('duration: 0 מכובד ואינו הופך לברירת המחדל', () => {
+  // ``opts.duration || DEFAULT`` היה הופך ``0`` ל-4000, כלומר מתעלם
+  // מבקשה מפורשת לסגור מיד.
+  const h = load();
+  h.toast('נשמר', 'success');           // ברירת מחדל, להשוואה
+  const other = load();
+  other.toast('נשמר', 'success', { duration: 0 });
+  other.advance(0);
+  eq(other.container().children[0].classList.contains('is-shown'), false, 'יצא מיד');
+  eq(h.container().children[0].classList.contains('is-shown'), true, 'ברירת המחדל עדיין מוצגת');
+});
+
+check('duration לא-מספרי נופל לברירת המחדל', () => {
+  // ערך כזה היה עובר ל-``setTimeout``, ושם ההתנהגות נקבעת על ידו.
+  for (const bad of ['3000', NaN, Infinity, -1, null, {}]) {
+    const h = load();
+    h.toast('נשמר', 'success', { duration: bad });
+    h.advance(3999);
+    eq(h.container().children[0].classList.contains('is-shown'), true,
+       `עדיין מוצג עבור ${JSON.stringify(bad)}`);
+    h.advance(1);
+    eq(h.container().children[0].classList.contains('is-shown'), false,
+       `יצא ב-4000 עבור ${JSON.stringify(bad)}`);
+  }
+});
+
+// ─── משך היציאה נקרא מה-CSS ─────────────────────────────────────────────
+
+check('משך היציאה נלקח מה-CSS ולא מקבוע', () => {
+  // אם הקוד היה נשען על קבוע, שינוי ה-transition ב-CSS היה חותך את
+  // היציאה או משאיר צומת בלתי נראה על המסך.
+  const h = load({ computed: '0.5s' });
+  h.toast('נשמר', 'success');
+  h.advance(4000);
+  h.advance(300);
+  eq(h.container().children.length, 1, 'ב-300 עדיין שם — ה-CSS אמר 500');
+  h.advance(200);
+  eq(h.container().children.length, 0, 'ב-500 הוסר');
+});
+
+check('transition: none מסיר מיד', () => {
+  // זה מה ש-``prefers-reduced-motion: reduce`` קובע ב-toast.css.
+  const h = load({ computed: '0s' });
+  h.toast('נשמר', 'success');
+  h.advance(4000);
+  eq(h.container().children.length, 0, 'הוסר בלי המתנה');
+});
+
+check('רשימת מעברים — נלקח הארוך', () => {
+  // צומת שיוסר לפי הקצר היה נעלם באמצע מעבר אחר.
+  const h = load({ computed: '0.3s, 450ms' });
+  h.toast('נשמר', 'success');
+  h.advance(4000);
+  h.advance(449);
+  eq(h.container().children.length, 1, 'לפני 450');
+  h.advance(1);
+  eq(h.container().children.length, 0, 'ב-450');
+});
+
+check('ms מפורש אינו מוכפל ב-1000', () => {
+  const h = load({ computed: '250ms' });
+  h.toast('נשמר', 'success');
+  h.advance(4000);
+  h.advance(249);
+  eq(h.container().children.length, 1, 'לפני 250');
+  h.advance(1);
+  eq(h.container().children.length, 0, 'ב-250');
+});
+
+check('בלי getComputedStyle — נפילה לקבוע, בלי לזרוק', () => {
+  const h = load();                       // אין getComputedStyle בסנדבוקס
+  h.toast('נשמר', 'success');
+  h.advance(4000);
+  h.advance(299);
+  eq(h.container().children.length, 1, 'לפני 300');
+  h.advance(1);
+  eq(h.container().children.length, 0, 'ב-300');
+});
+
+check('getComputedStyle שזורקת — נפילה לקבוע', () => {
+  const h = load({ computed: null });
+  h.toast('נשמר', 'success');
+  h.advance(4300);
+  eq(h.container().children.length, 0, 'הוסר לפי הקבוע');
+});
+
+console.log(`${passed} עברו, ${failed} נכשלו`);
+process.exit(failed === 0 ? 0 : 1);
diff --git a/webapp/static/css/toast.css b/webapp/static/css/toast.css
new file mode 100644
index 000000000..a3b1ecaf6
--- /dev/null
+++ b/webapp/static/css/toast.css
@@ -0,0 +1,149 @@
+/* טוסט חיווי — התראה חולפת לפעולות שנשמרות מיד.
+ *
+ * המראה משוכפל מטוסט המועדפים/הנעץ (``bookmarks.css:342-355``), שנטען רק
+ * דרך ``bookmarks_snippet.html``. הקובץ הזה עומד בפני עצמו: אין לו תלות
+ * בשום קובץ אחר, ואפשר לטעון אותו לכל עמוד.
+ *
+ * **מרחב שמות משלו, בכוונה.** ``bookmarks.css`` ו-``multi-select.css``
+ * מגדירים שניהם את ``.notification`` / ``.notification-container`` /
+ * ``#notificationContainer`` עם ערכים סותרים לגמרי (פינה תחתונה מול
+ * עליונה, טוקני נושא מול גרדיאנט כהה קשיח). היום אין עמוד שטוען את
+ * שניהם, אבל דייר שלישי על אותם שמות היה הופך את זה לוודאי.
+ */
+
+:root {
+  /* טוקני רכיב (Level 3 לפי ``docs/webapp/theming_and_css.rst``), עם
+   * הערכים של ``bookmarks.css:2-73`` — הטוסט שהמראה שלו נבחר.
+   *
+   * **הרקע אינו נגזר מ-``--bg-secondary``, ונמדד למה.** גזירה כזו
+   * מתאימה את הטוסט לערכה מאליה, אבל ב-``classic`` היא נותנת סגול
+   * ``#8e63ff`` עם טקסט לבן — **3.9:1**, מתחת ל-4.5 של WCAG AA. נמדד
+   * בכרומיום, לא הוערך. כרטיס בהיר קבוע נותן שם 16:1. */
+  --ck-toast-bg: rgba(255, 255, 255, 0.97);
+  --ck-toast-color: #212529;
+  --ck-toast-accent: var(--info);
+}
+
+/* בדיוק קבוצת הערכות שמקבלת override ב-``bookmarks.css:64``, ולא יותר.
+ * ``ocean`` אינו כאן — שם הוא יורש את ברירת המחדל הבהירה, וזה נשמר. */
+:root[data-theme="dark"],
+:root[data-theme="dim"],
+:root[data-theme="nebula"] {
+  --ck-toast-bg: rgba(18, 20, 28, 0.98);
+  --ck-toast-color: var(--text-primary, #f2f4ff);
+}
+
+:root[data-theme="high-contrast"] {
+  --ck-toast-bg: #111111;
+  --ck-toast-color: #ffffff;
+}
+
+.ck-toast-container {
+  position: fixed;
+  bottom: 20px;
+  left: 20px;
+  right: 20px;
+  z-index: 10000;
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+  align-items: flex-end;
+  /* המכל פרוס על כל רוחב המסך ב-z-index גבוה. בלי זה, כל עוד טוסט מוצג
+   * הרצועה התחתונה בולעת קליקים על מה שמתחתיה. */
+  pointer-events: none;
+}
+
+.ck-toast {
+  background: var(--ck-toast-bg);
+  color: var(--ck-toast-color);
+  border-radius: 8px;
+  padding: 12px 20px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  display: flex;
+  align-items: center;
+  gap: 10px;
+  min-width: 250px;
+  max-width: min(420px, calc(100vw - 40px));
+  /* **ההיסט יחסי לרוחב הכרטיס, לא קבוע.** ``100%`` בטרנספורם נמדד מול
+   * האלמנט עצמו, ולכן הוא יוצא במלואו בכל רוחב. היסט קבוע של 400px היה
+   * קטן מ-``max-width`` של 420px, והשאיר הודעה ארוכה נראית למחצה. */
+  --ck-toast-exit: calc(100% + 20px);
+  transform: translateX(var(--ck-toast-exit));
+  pointer-events: auto;
+  /* ``border-inline-end`` ולא ``border-left``: ב-``<html dir="rtl">``
+   * שתיהן מרנדרות לאותו מקום פיזי, והלוגית שורדת גם LTR. */
+  border-inline-end: 4px solid var(--ck-toast-accent);
+}
+
+/* **הכיוון חייב להתהפך ב-RTL, וזה לא קוסמטי.** המכל הוא
+ * ``align-items: flex-end``, ובעמוד RTL הקצה הזה הוא **השמאלי** — נמדד
+ * בכרומיום: הכרטיס נח ב-x=20 במסך 1280. היסט חיובי היה מזיז אותו ימינה,
+ * אל תוך העמוד (ל-x≈420) ומשם מוחק אותו בבת אחת. כלומר הוא לא החליק
+ * החוצה אלא פנימה. הסימן ההפוך מוציא אותו דרך הקצה שלידו.
+ *
+ * ``html[dir="rtl"]`` ולא ``:dir(rtl)`` — זה התקדים שכבר קיים בארבעה
+ * קבצי CSS בריפו. */
+html[dir="rtl"] .ck-toast {
+  --ck-toast-exit: calc(-100% - 20px);
+}
+
+/* **המחלקה כפולה בכוונה, וזה לא קוסמטיקה.**
+ *
+ * ``dark-mode.css:505-523`` מגדיר על ``[data-theme="dark"] *`` (וכן dim,
+ * nebula, custom, shared) ``transition: background-color, color,
+ * border-color, box-shadow``. ספציפיות ``[attr] *`` היא (0,1,0) — **זהה
+ * למחלקה יחידה** — והקובץ נטען ב-``base.html:1861``, אחרי ``extra_css``
+ * שבשורה 1852. לכן הוא דורס את הכלל של ``.ck-toast``, ``transform`` יוצא
+ * מרשימת המעברים, וההנפשה פשוט לא רצה — בכל הערכות הכהות, שהן רוב
+ * השימוש.
+ *
+ * נמדד בכרומיום: עם ``data-theme="dark"`` הכרטיס נשאר ב-x=20 בכל שמונה
+ * הדגימות; בלי הערכה הוא נע ‎-250 ← 20.
+ *
+ * חזרה על המחלקה מעלה את הספציפיות ל-(0,2,0) בלי ``!important``. אותו
+ * טיפול נדרש לכלל ``prefers-reduced-motion``, שאחרת נדרס באותה צורה.
+ *
+ * ל-``bookmarks.css`` יש בדיוק אותה בעיה על ``.notification``; מדווח
+ * ולא מתוקן כאן. */
+.ck-toast.ck-toast {
+  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.ck-toast.is-shown {
+  transform: translateX(0);
+}
+
+.ck-toast--success { --ck-toast-accent: var(--success); }
+.ck-toast--error   { --ck-toast-accent: var(--danger); }
+.ck-toast--warning { --ck-toast-accent: var(--warning); }
+.ck-toast--info    { --ck-toast-accent: var(--info); }
+
+.ck-toast__icon {
+  font-size: 18px;
+  font-weight: bold;
+  color: var(--ck-toast-accent);
+  flex-shrink: 0;
+}
+
+.ck-toast__msg {
+  flex: 1;
+  font-size: 14px;
+}
+
+@media (max-width: 768px) {
+  .ck-toast-container {
+    left: 10px;
+    right: 10px;
+    bottom: 10px;
+  }
+  .ck-toast {
+    min-width: auto;
+    width: 100%;
+  }
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .ck-toast.ck-toast {
+    transition: none;
+  }
+}
diff --git a/webapp/static/js/toast.js b/webapp/static/js/toast.js
new file mode 100644
index 000000000..60e1ef169
--- /dev/null
+++ b/webapp/static/js/toast.js
@@ -0,0 +1,160 @@
+/**
+ * טוסט חיווי — התראה חולפת לפעולות שנשמרות מיד.
+ *
+ * מבוסס על ``bookmarks.js:944-962`` (טוסט המועדפים/הנעץ), אבל עומד בפני
+ * עצמו: בלי מחלקה, בלי ``BookmarkManager``, ובלי הדרישה ל-``#fileId``
+ * שבלעדיה המנגנון שם כלל אינו נוצר (``bookmarks.js:1645-1656``).
+ *
+ * ה-CSS ב-``webapp/static/css/toast.css``. שניהם נטענים היום רק מעמוד
+ * ההגדרות.
+ *
+ * **השם אינו ``window.showNotification`` בכוונה.** שלושה מקומות בקוד
+ * (``collections.js:124``, ``dashboard.html:2756``, ``base.html:4291``)
+ * בודקים את השם ההוא ונופלים אחורה לטוסט מאולתר. הגדרתו בעמוד אחד בלבד
+ * הייתה משנה את התנהגותם שם ולא בשאר — חוסר עקביות גרוע מהמצב הנוכחי.
+ */
+(function () {
+  'use strict';
+
+  var ICONS = { success: '✓', error: '✕', warning: '⚠', info: 'ℹ' };
+  var DEFAULT_DURATION = 4000;
+  /**
+   * משך היציאה בלבד — לסביבה שאין בה ``getComputedStyle``, כלומר סטאב
+   * בדיקות ולא דפדפן. **אינו כפילות של הערך שב-CSS**: בדפדפן הערך נקרא
+   * משם, ראו ``exitMs``.
+   */
+  var EXIT_MS_FALLBACK = 300;
+
+  /**
+   * כמה זמן לוקח למעבר של ``.ck-toast`` לצאת, לפי ה-CSS עצמו.
+   *
+   * **למה קריאה ולא קבוע.** ``transition: transform 0.3s`` ב-``toast.css``
+   * וקבוע ב-JS הם שני ערכים שנסחפים בשקט: שינוי אחד מהם בלבד או חותך את
+   * היציאה באמצע, או משאיר צומת בלתי נראה על המסך. כאן ה-CSS הוא המקור
+   * היחיד ואין מה לסנכרן.
+   *
+   * זה גם מטפל ב-``prefers-reduced-motion``, שקובע ``transition: none``:
+   * הקריאה מחזירה ``0s``, והצומת מוסר מיד במקום להמתין לשווא.
+   *
+   * הערך עשוי לחזור כרשימה מופרדת בפסיקים אם יתווסף מעבר נוסף; נלקח
+   * הארוך שבהם, כי הצומת חייב לשרוד עד שכולם הסתיימו.
+   */
+  function exitMs(el) {
+    if (typeof window.getComputedStyle !== 'function') return EXIT_MS_FALLBACK;
+    var raw;
+    try {
+      raw = window.getComputedStyle(el).transitionDuration;
+    } catch (e) {
+      return EXIT_MS_FALLBACK;
+    }
+    if (!raw) return EXIT_MS_FALLBACK;
+    var longest = 0;
+    var parts = String(raw).split(',');
+    for (var i = 0; i < parts.length; i += 1) {
+      var t = parts[i].trim();
+      // ``ms`` נבדק לפני ``s`` — כל ערך ב-``ms`` מסתיים גם ב-``s``.
+      var ms = /ms$/.test(t) ? parseFloat(t) : parseFloat(t) * 1000;
+      if (isFinite(ms) && ms > longest) longest = ms;
+    }
+    return longest;
+  }
+
+  /** ``key`` ← ``{ el, hideTimer, removeTimer }`` של הטוסט שמוצג כרגע. */
+  var active = Object.create(null);
+
+  function getContainer() {
+    if (!document.body) return null;
+    var el = document.getElementById('ckToastContainer');
+    if (el) return el;
+    el = document.createElement('div');
+    el.id = 'ckToastContainer';
+    el.className = 'ck-toast-container';
+    el.setAttribute('role', 'status');
+    el.setAttribute('aria-live', 'polite');
+    document.body.appendChild(el);
+    return el;
+  }
+
+  /** מסיר מיד, בלי אנימציה, ומבטל את שני הטיימרים שלו. */
+  function drop(entry) {
+    if (!entry) return;
+    if (entry.hideTimer) clearTimeout(entry.hideTimer);
+    if (entry.removeTimer) clearTimeout(entry.removeTimer);
+    if (entry.el && entry.el.parentNode) entry.el.parentNode.removeChild(entry.el);
+  }
+
+  /**
+   * מציג טוסט.
+   *
+   * ``type``  — ``success`` / ``error`` / ``warning`` / ``info``. כל ערך
+   *             אחר נקרא כ-``info``; הוא נכנס לתוך שם מחלקה, ולכן חייב
+   *             לעבור רשימת היתר ולא רק שרשור.
+   * ``options.key``      — טוסט עם אותו מפתח **מחליף** את קודמו במקום
+   *                        להצטבר לצידו. בלי זה, שלוש שמירות ברצף
+   *                        מייצרות שלושה כרטיסים זהים; ועם זה אנימציית
+   *                        הכניסה רצה מחדש בכל פעם, וזה החיווי.
+   * ``options.duration`` — מילישניות עד ההיעלמות. ``0`` תקף ומכובד;
+   *                        ברירת המחדל חלה רק כשהערך חסר או אינו
+   *                        מספר סופי ואי-שלילי.
+   *
+   * **ערוץ הכשל הוא ערך ההחזרה:** ``true`` אם הטוסט נכנס ל-DOM,
+   * ``false`` אם לא היה ``document.body``. הקורא חייב לבדוק — טוסט הוא
+   * ערוץ הדיווח למשתמש, ואם הוא לא הוצג צריך ליפול למשהו אחר.
+   */
+  window.ckToast = function (message, type, options) {
+    var opts = options || {};
+    var kind = Object.prototype.hasOwnProperty.call(ICONS, type) ? type : 'info';
+
+    var container = getContainer();
+    if (!container) return false;
+
+    if (opts.key) drop(active[opts.key]);
+
+    var el = document.createElement('div');
+    el.className = 'ck-toast ck-toast--' + kind;
+
+    var icon = document.createElement('span');
+    icon.className = 'ck-toast__icon';
+    icon.setAttribute('aria-hidden', 'true');
+    icon.textContent = ICONS[kind];
+
+    var msg = document.createElement('span');
+    msg.className = 'ck-toast__msg';
+    // ``textContent`` ולא ``innerHTML``: ההודעה נושאת גם טקסט שגיאה
+    // שמגיע מהשרת. ``bulk-actions.js:440`` מזריק אותו גולמי.
+    msg.textContent = message == null ? '' : String(message);
+
+    el.appendChild(icon);
+    el.appendChild(msg);
+    container.appendChild(el);
+
+    // קריאת מאפיין פריסה מכריחה את הדפדפן לחשב את הסגנון ההתחלתי
+    // (ההיסט של ``--ck-toast-exit``) לפני שינוי המחלקה, ובלעדיה אין ממה
+    // להנפיש. זה הדטרמיניסטי; ``setTimeout(.., 10)`` היה מרוץ.
+    void el.offsetWidth;
+    el.classList.add('is-shown');
+
+    var entry = { el: el, hideTimer: null, removeTimer: null };
+
+    // **בדיקת נוכחות ולא truthiness.** ``opts.duration || DEFAULT`` היה
+    // הופך ``0`` ל-4000, כלומר מתעלם מבקשה מפורשת לסגור מיד. ובדיקת
+    // הטיפוס נדרשת כי ערך לא-מספרי היה עובר ל-``setTimeout``, ושם
+    // ההתנהגות נקבעת על ידו ולא על ידינו.
+    var duration = (typeof opts.duration === 'number'
+                    && isFinite(opts.duration)
+                    && opts.duration >= 0)
+      ? opts.duration
+      : DEFAULT_DURATION;
+
+    entry.hideTimer = setTimeout(function () {
+      el.classList.remove('is-shown');
+      entry.removeTimer = setTimeout(function () {
+        if (el.parentNode) el.parentNode.removeChild(el);
+        if (opts.key && active[opts.key] === entry) delete active[opts.key];
+      }, exitMs(el));
+    }, duration);
+
+    if (opts.key) active[opts.key] = entry;
+    return true;
+  };
+})();
diff --git a/webapp/templates/settings.html b/webapp/templates/settings.html
index 4959a8fac..21e5b1238 100644
--- a/webapp/templates/settings.html
+++ b/webapp/templates/settings.html
@@ -1,5 +1,12 @@
 {% extends "base.html" %} {% block title %}הגדרות - Code Keeper Bot{% endblock
-%} {% block content %}
+%}
+{% block extra_css %}
+{# טוסט החיווי של כרטיס "גופן הפתקים". עומד בפני עצמו — אין לו תלות
+   ב-bookmarks.css או ב-multi-select.css, ומרחב השמות שלו נפרד מ-
+   .notification שאותם שני קבצים כבר חולקים עם ערכים סותרים. #}
+<link rel="stylesheet" href="{{ url_for('static', filename='css/toast.css') }}?v={{ static_version }}">
+{% endblock %}
+{% block content %}
 <h1 class="page-title">
   <i class="fas fa-cog"></i>
   הגדרות
@@ -365,6 +372,10 @@ <h2 class="section-title">
   <script defer src="{{ url_for('static', filename='js/push-settings.js') }}?v={{ static_version }}"></script>
 {% endif %}
 
+{# מגדיר window.ckToast. defer מספיק: הקריאה מתרחשת רק באינטראקציה של
+   המשתמש, הרבה אחרי ש-defer סיים לרוץ. #}
+<script defer src="{{ url_for('static', filename='js/toast.js') }}?v={{ static_version }}"></script>
+
 {# הוראות לסוכן — הטקסט שנטען לכל סשן של סוכן AI דרך GET /api/agent/primer #}
 <div class="glass-card" id="agent-instructions-section">
   <h2 class="section-title">
@@ -1122,8 +1133,9 @@ <h2 class="section-title">
       <p style="opacity: 0.7; margin-top: 0.75rem; font-size: 0.9rem">
         התחולה חלה על שלוש הבחירות יחד. כשבוחרים כתב יד בלוחות, המתג שבמודאל ההגדרות של הלוח ננעל.
       </p>
-      {# שורת משוב, באותו דפוס של ``setMessage`` בכרטיס "הוראות לסוכן": #}
-      {# לא מודאל ולא ``alert`` — הבורר נשאר על המסך לצד ההודעה.        #}
+      {# רשת ביטחון בלבד. החיווי הרגיל הוא ``window.ckToast``; השורה הזו   #}
+      {# נכנסת לפעולה רק אם ``toast.js`` לא נטען, כדי שהודעת כשל שמירה    #}
+      {# לא תיעלם בשקט. במסלול התקין היא נשארת ריקה ובלתי נראית.          #}
       <div id="noteFontsMsg" style="display: none; margin-top: 0.5rem; font-size: 0.9rem"></div>
     </div>
   </div>
@@ -2186,6 +2198,65 @@ <h2 class="section-title" style="color: var(--warning, #f59e0b);">
           msgEl.style.color = ok ? 'var(--success, #4ade80)' : 'var(--danger, #f87171)';
         }
 
+        // **החיווי הוא אירוע חוזר, לא מצב.** שורת סטטוס קבועה לא מסתירה
+        // את עצמה, ושמירה שנייה שכותבת בה את אותה מחרוזת אינה משנה כלום
+        // ב-DOM — כלומר אין חיווי בכלל. טוסט חולף נכנס מחדש בכל שמירה.
+        //
+        // ``key`` אחיד לשלושת הבוררים: שמירה חדשה מחליפה את הקודמת במקום
+        // לערום עוד כרטיס זהה לצידה.
+        //
+        // ``ckToast`` מחזירה ``false`` כשלא הצליחה להציג. בלי הבדיקה,
+        // כשל שמירה היה נבלע לגמרי כשהסקריפט אינו זמין.
+        // **כיבוי הערוץ השני הוא חלק מההחלטה, לא של הערוץ שנבחר.** ``notify``
+        // הוא נתב בין שני ערוצים מוציאי-זה-את-זה, ולכן הוא זה שאחראי על
+        // האינווריאנטה. בלי ``clearFallback`` בענף הטוסט, הוא עודכן אחד
+        // מהשניים ושכח את השני — CORE U5 בגרסת ממשק.
+        //
+        // התרחיש אינו תיאורטי: ``toast.js`` נטען ב-``defer`` ולכן רץ רק
+        // אחרי סיום הפרסור, בעוד שהמאזינים כאן נרשמים תוך כדי הפרסור.
+        // שמירה שנכשלת בחלון הזה מציגה שגיאה בשורת הגיבוי; ניסיון חוזר
+        // אחרי שהסקריפט נטען עובר לטוסט, והשגיאה הייתה נשארת לצידו.
+        function notify(text, type) {
+          if (typeof window.ckToast === 'function'
+              && window.ckToast(text, type, { key: 'note-fonts' })) {
+            clearFallback();
+            return;
+          }
+          fallbackMessage(text, type);
+        }
+
+        // **שורת הגיבוי חולפת גם היא.** היא נכנסת לפעולה רק כש-``toast.js``
+        // לא נטען, וקיימת כדי שהודעת כשל שמירה לא תיעלם בשקט. אבל שורת
+        // מצב שאינה מסתירה את עצמה היא בדיוק התסמין שתוקן כאן, ולכן היא
+        // מקבלת את אותו טיפול שורשי: מצב ← אירוע חולף.
+        //
+        // הטיימר מתאפס בכל שמירה במקום להיערם — אותה סיבה שבגללה הטוסט
+        // מבטל את הטיימר של קודמו.
+        //
+        // המשך אינו חייב להתאים לזה של הטוסט; אלה שני ערוצים נפרדים,
+        // ורק אחד מהם פעיל בכל רגע נתון — ``notify`` הוא שאוכף את זה,
+        // בשני הכיוונים.
+        //
+        // **ומה זה לא פותר:** שמירה שנייה בזמן שהשורה עדיין מציגה את אותו
+        // טקסט לא תפיק אירוע נראה. השורה אינה יכולה להנפיש — ה-CSS שהיה
+        // מנפיש אותה חי ב-``toast.css``, ובמצב שבו הגיבוי בכלל רץ הוא
+        // כנראה חסר גם הוא.
+        var FALLBACK_MS = 4000;
+        var fallbackTimer = null;
+
+        /** פרישת הגיבוי — מקום אחד, כדי ששני הקוראים לא ייסחפו. */
+        function clearFallback() {
+          if (fallbackTimer) { clearTimeout(fallbackTimer); fallbackTimer = null; }
+          setMessage('', true);
+        }
+
+        function fallbackMessage(text, type) {
+          clearFallback();
+          setMessage(text, type === 'success');
+          if (!msgEl) return;
+          fallbackTimer = setTimeout(clearFallback, FALLBACK_MS);
+        }
+
 
         // צילום של כל הבוררים, כדי שאפשר יהיה להחזיר אותם בכשל.
         function snapshot() {
@@ -2258,11 +2329,11 @@ <h2 class="section-title" style="color: var(--warning, #f59e0b);">
               await send(sent);
               lastSaved = sent;
             } while (pending);
-            setMessage('נשמר', true);
+            notify('נשמר', 'success');
           } catch (err) {
             console.error('Failed to persist note fonts:', err);
             restore(lastSaved);
-            setMessage('השמירה נכשלה — הבחירה הוחזרה', false);
+            notify('השמירה נכשלה — הבחירה הוחזרה', 'error');
           } finally {
             inFlight = false;
           }