/* תיק ההשקעות — שפת עיצוב v31: Liquid Glass לפי ת־עיצוב 26.
   פלטת צבעי המערכת של iOS 26 (בהיר/כהה), זכוכית עם הדגשת hairline עליונה,
   RTL/LTR לוגי, טיפוגרפיה לפי ת־עיצוב, קצב ריווח 8pt. */
:root {
  --ibkr: #A3182E;                  /* v280: בורדו של IBKR (כרטיס החיבור) */
  --ibkr-press: #86101F;
  --ibkr-ink: #8E1528;
  color-scheme: light;
  --font: -apple-system, "SF Pro Text", system-ui, "Segoe UI", Roboto, "Noto Sans Hebrew", "Helvetica Neue", Arial, sans-serif;

  /* ---- iOS 26: רקע ומשטחים (בהיר) ---- */
  --bg: #F2F2F7;                    /* systemGroupedBackground */
  --search-fill: rgba(118, 118, 128, .12);  /* v239: tertiarySystemFill — שדה החיפוש */
  --search-fill-solid: #E3E3E8;
  --search-ph: rgba(60, 60, 67, .6);        /* secondaryLabel */
  --surface: #FFFFFF;               /* systemBackground */
  --surface-2: rgba(118, 118, 128, .12);   /* 28/10 זכוכית: מילוי שקוף (היה #E9E9EE) */
  --glass: rgba(255, 255, 255, .68);
  --glass-border: rgba(255, 255, 255, .6);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .55);
  --card-border: rgba(60, 60, 67, .09);
  --separator: rgba(60, 60, 67, .12);
  --seg-active: #FFFFFF;
  --on-surface: #1C1C1E;            /* label */
  --on-surface-var: #636366;        /* secondaryLabel */
  --outline: #D8D8DE;
  --veil: rgba(255, 255, 255, .65);

  /* ---- מבטא ראשי (v216, בקשת המשתמש): אותו ירוק כמו במצב כהה — כפתורים ומבטא זהים בשתי הערכות ---- */
  --primary: #30D158;
  --primary-dark: #30D158;
  --on-primary: #06281A;
  --primary-container: rgba(48, 209, 88, .18);
  --on-primary-container: #0B6B2C;  /* טקסט על מיכל ירוק־שקוף — כהה כדי שיהיה קריא על רקע בהיר */
  --secondary-container: rgba(118, 118, 128, .14);   /* 28/10 זכוכית (היה #E4E4E9) */

  /* ---- צבעים סמנטיים של iOS 26 ---- */
  --gain: #30D158;                  /* v216: כמו במצב כהה */
  --loss: #FF453A;                  /* v216: כמו במצב כהה */
  --warn-bg: rgba(255, 149, 0, .14);
  --warn-fg: #9A5B00;
  --warn-border: rgba(255, 149, 0, .35);
  --link: #007AFF;                  /* systemBlue */

  /* ---- פלטת iOS 26 (תרשימים, תגיות) ---- */
  --sys-blue: #007AFF;
  --sys-green: #34C759;
  --sys-teal: #5AC8FA;
  --sys-mint: #00C7BE;
  --sys-cyan: #32ADE6;
  --sys-indigo: #5856D6;
  --sys-purple: #AF52DE;
  --sys-pink: #FF2D55;
  --sys-orange: #FF9500;
  --sys-yellow: #FFCC00;
  --sys-brown: #A2845E;
  --sys-gray: #8E8E93;

  --radius-xl: 28px;
  --radius: 22px;
  --radius-sm: 16px;
  --radius-xs: 12px;
  --pill: 999px;                    /* גלולות: כפתורים, תגיות, טאבים */
  --shadow-sm: 0 1px 2px rgba(20, 40, 30, .05);
  --shadow: 0 1px 3px rgba(20, 40, 30, .06), 0 10px 30px rgba(20, 40, 30, .07);
  --glass-blur: blur(22px) saturate(1.7);
  /* 28/10/2026 — חומר הזכוכית המשותף לכל האפליקציות (לפי ת־עיצוב): שכבה מאחור מטושטשת (היא שורש הטשטוש),
     לוח שקוף 74% בלי backdrop משלו, קו שיער במקום מסגרת, מילויים שקופים בתוכו. גלולה/תפריט צף בלי שכבה — עם טשטוש משלו */
  --gl-base: #FFFFFF;
  --gl-panel: color-mix(in srgb, var(--gl-base) 74%, transparent);
  --gl-bar: color-mix(in srgb, var(--bg) 74%, transparent);
  --gl-veil: var(--gl-ambient), rgba(242, 242, 247, .28);   /* מסך מאחורי חלון — מטושטש ובגוון האפליקציה */
  --gl-veil-fx: blur(24px) saturate(1.5);
  --gl-fx: saturate(180%) blur(28px);
  --gl-ring: 0 0 0 .5px rgba(0, 0, 0, .08);
  --gl-fill: rgba(118, 118, 128, .12);
  --gl-shadow: 0 10px 34px rgba(0, 0, 0, .16);
  --gl-card: color-mix(in srgb, var(--gl-base) 58%, transparent);
  --gl-card-sh: inset 1px 1px 0 rgba(255, 255, 255, .9), inset -1px -1px 0 rgba(255, 255, 255, .35), inset 0 0 24px rgba(255, 255, 255, .28),
    0 0 0 .5px rgba(0, 0, 0, .05), 0 8px 28px rgba(0, 0, 0, .06);
  /* רקע העמוד: שדה צבע רך בגוון האפליקציה ושני גוונים משלימים — מה שהזכוכית מראה */
  --gl-tint: var(--primary); --gl-tint2: var(--sys-teal); --gl-tint3: var(--sys-purple);   /* רקע העמוד: הצבע של האפליקציה + שני גוונים משלימים */
  --gl-ambient: radial-gradient(70% 44% at 96% 2%, color-mix(in srgb, var(--gl-tint) 32%, transparent), transparent 72%),
    radial-gradient(60% 40% at 2% 46%, color-mix(in srgb, var(--gl-tint2) 24%, transparent), transparent 72%),
    radial-gradient(70% 44% at 86% 98%, color-mix(in srgb, var(--gl-tint3) 20%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--gl-tint) 8%, transparent), color-mix(in srgb, var(--gl-tint) 5%, transparent));
  --gl-btn: rgba(255,255,255,.78); --gl-btn-sh: inset 0 1px 0 rgba(255,255,255,.95), 0 0 0 .5px rgba(0,0,0,.1), 0 3px 10px rgba(0,0,0,.08);   /* כפתור זכוכית משני — בולט על כל רקע */
}

[data-theme="dark"] {
  --ibkr: #B82640;
  --ibkr-press: #9A1B31;
  --ibkr-ink: #FF8A9B;
  color-scheme: dark;
  --bg: #000000;                    /* iOS systemBackground */
  --search-fill: rgba(118, 118, 128, .24);
  --search-fill-solid: #1C1C1E;
  --search-ph: rgba(235, 235, 245, .6);
  --surface: rgba(28, 28, 30, .78);
  --surface-2: rgba(255, 255, 255, .08);
  --glass: rgba(16, 16, 18, .62);
  --glass-border: rgba(255, 255, 255, .14);
  --glass-hi: inset 0 1px 0 rgba(255, 255, 255, .10);
  --card-border: rgba(255, 255, 255, .12);
  --separator: rgba(255, 255, 255, .14);
  --seg-active: #3A3A3C;
  --on-surface: #FFFFFF;            /* label */
  --on-surface-var: #98989D;        /* secondaryLabel */
  --outline: #38383A;
  --veil: rgba(0, 0, 0, .6);

  --primary: #30D158;               /* systemGreen (dark) — מבטא זוהר */
  --primary-dark: #30D158;
  --on-primary: #06281A;
  --primary-container: rgba(48, 209, 88, .18);
  --on-primary-container: #7EE2A0;
  --secondary-container: rgba(255, 255, 255, .08);

  --gain: #30D158;
  --loss: #FF453A;                  /* systemRed (dark) */
  --warn-bg: rgba(255, 159, 10, .14);
  --warn-fg: #FFB340;
  --warn-border: rgba(255, 159, 10, .35);
  --link: #0A84FF;                  /* systemBlue (dark) */

  --sys-blue: #0A84FF;
  --sys-green: #30D158;
  --sys-teal: #64D2FF;
  --sys-mint: #66D4CF;
  --sys-cyan: #64D2FF;
  --sys-indigo: #5E5CE6;
  --sys-purple: #BF5AF2;
  --sys-pink: #FF375F;
  --sys-orange: #FF9F0A;
  --sys-yellow: #FFD60A;
  --sys-brown: #AC8E68;
  --sys-gray: #98989D;

  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
  --shadow: 0 1px 3px rgba(0, 0, 0, .4), 0 12px 32px rgba(0, 0, 0, .4);
  --gl-base: #1C1C1E;
  --gl-panel: color-mix(in srgb, var(--gl-base) 74%, transparent);
  --gl-bar: color-mix(in srgb, var(--bg) 74%, transparent);
  --gl-veil: var(--gl-ambient), rgba(0, 0, 0, .32);
  --gl-ring: 0 0 0 .5px rgba(255, 255, 255, .1);
  --gl-fill: rgba(118, 118, 128, .24);
  --gl-shadow: 0 10px 34px rgba(0, 0, 0, .5);
  --gl-card: color-mix(in srgb, var(--gl-base) 55%, transparent);
  --gl-card-sh: inset 1px 1px 0 rgba(255, 255, 255, .16), inset -1px -1px 0 rgba(255, 255, 255, .05), inset 0 0 24px rgba(255, 255, 255, .035),
    0 0 0 .5px rgba(255, 255, 255, .06), 0 8px 28px rgba(0, 0, 0, .4);
  --gl-ambient: radial-gradient(70% 44% at 96% 2%, color-mix(in srgb, var(--gl-tint) 36%, transparent), transparent 72%),
    radial-gradient(60% 40% at 2% 46%, color-mix(in srgb, var(--gl-tint2) 26%, transparent), transparent 72%),
    radial-gradient(70% 44% at 86% 98%, color-mix(in srgb, var(--gl-tint3) 26%, transparent), transparent 72%),
    linear-gradient(180deg, color-mix(in srgb, var(--gl-tint) 12%, transparent), color-mix(in srgb, var(--gl-tint3) 8%, transparent));
  --gl-btn: rgba(255,255,255,.14); --gl-btn-sh: inset 0 1px 0 rgba(255,255,255,.26), inset 0 0 0 .5px rgba(255,255,255,.16), 0 4px 14px rgba(0,0,0,.4);
}

/* ---- צבע המערכת לכל אפליקציה (13/10/2026, בקשת המשתמש — הגוונים המדויקים שבחר) ----
   Studio = אדום, Academy = כחול, במקום הירוק של Invest בכל מקום שהוא מבטא (כפתורים, בוררים, מתגים, מיכלים).
   הירוק הסמנטי (רווח, "תקין", צבעי הדגשה בספר) נשאר. הטקסט על הצבע — כהה, כמו על הירוק ב־Invest. */
html[data-app="studio"] {
  --primary: #FF4656; --primary-dark: #FF4656; --on-primary: #3D0008;
  --primary-container: rgba(255, 70, 86, .16); --on-primary-container: #B3121F;
}
html[data-app="studio"][data-theme="dark"] { --on-primary-container: #FF9AA3; }
:root[data-app="admin"] { --gl-tint: #5E5CE6; --gl-tint2: var(--sys-blue); --gl-tint3: var(--sys-pink); }
:root[data-app="academy"] { --gl-tint2: var(--sys-cyan); --gl-tint3: var(--sys-indigo); }
:root[data-app="studio"] { --gl-tint2: var(--sys-orange); --gl-tint3: var(--sys-purple); }
html[data-app="academy"] {
  --primary: #4699FF; --primary-dark: #4699FF; --on-primary: #00214D;
  --primary-container: rgba(70, 153, 255, .16); --on-primary-container: #0B57B5;
}
html[data-app="academy"][data-theme="dark"] { --on-primary-container: #A5CBFF; }

* { box-sizing: border-box; }
html, body { overflow-x: hidden; overflow-x: clip; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-size: 17px;
  background: var(--bg);
  color: var(--on-surface);
  line-height: 1.5;
  padding-bottom: 32px;
}
a { color: var(--link); }

/* ---- App bar — זכוכית צפה ---- */
.appbar {
  position: sticky; top: 0; z-index: 20;
  --ib: clamp(44px, calc((100vw - 184px) / 4), 56px);   /* 27/10/2026: הלוגו 128 בכל מסך מעל 360 (גודלו המקורי); הכפתורים גדלים ברוחב הפנוי (44 בטלפון צר עד 56), והבועות גבוהות כך ששני הטורים משלימים את גובה הלוגו */
  --pill-h: max(48px, calc(118px - var(--ib) - 10px));
  padding: 10px 16px 8px;
  /* 20/10/2026 (בקשת המשתמש — כמו הממשק של Muse): בלי פס זכוכית — הלוגו "מרחף" באמצע. הרקע = שכבה אחת (::before)
     שנמשכת 110px מתחת להדר: אטומה למעלה, ומתחת לקפסולה נמוגה ומיטשטשת בהדרגה (כ־200px, עקומה רכה) — הכרטיסים
     שנגללים מתחת "נבלעים" בה במקום להיחתך בקו. מופיעה רק כשמתחילים לגלול (scroll-driven, בלי JS) — בראש העמוד
     אין מה להסתיר, והכרטיס הראשון לא מטושטש. */
  background: transparent;
  color: var(--on-surface);
}
.appbar::before {
  /* 29/10/2026 (בקשת המשתמש — ראש הכרטיס הפתוח "נבלע" בטשטוש שמתחת ללוגו): השכבה נמשכת רק 20px מתחת להדר (במקום 110),
     והמעבר הרך מתחיל בתחתית ההדר עצמו — כרטיס שעולה לראש המסך (topCover + 10) נראה נקי וחד מהשורה הראשונה */
  content: ''; position: absolute; inset: 0 0 -20px 0; z-index: -1; pointer-events: none;
  background: var(--bg);
  -webkit-backdrop-filter: blur(10px) saturate(1.2); backdrop-filter: blur(10px) saturate(1.2);
  --scrim: linear-gradient(#000 0, #000 calc(100% - 56px), rgba(0, 0, 0, .78) calc(100% - 40px), rgba(0, 0, 0, .45) calc(100% - 24px),
    rgba(0, 0, 0, .16) calc(100% - 10px), transparent 100%);
  -webkit-mask-image: var(--scrim); mask-image: var(--scrim);
}
@supports (animation-timeline: scroll()) {
  /* 21/10/2026: בלי opacity בסיסית, בעמוד קצר שלא נגלל (ציר לא פעיל — האנימציה לא חלה) השכבה הופיעה במלואה וכיסתה את הכרטיס הראשון */
  .appbar::before { opacity: 0; visibility: hidden; animation: hdrScrim linear both; animation-timeline: scroll(nearest block); animation-range: 0 72px; }
}
/* 29/10/2026: בראש העמוד הזכוכית שקופה — וגם מוסתרת (visibility), כדי שלא תישאר שכבת טשטוש פעילה מעל הדף (כמו menu-veil) */
@keyframes hdrScrim { from { opacity: 0; visibility: hidden; } to { opacity: 1; visibility: visible; } }
.cube-flat .appbar::before { -webkit-backdrop-filter: none; backdrop-filter: none; }
/* v131: לוגו 106px בצד אחד (הלוגו קודם ב־DOM -> קצה ה"התחלה" ב־RTL, כלומר
   ימין), כפתורי הפעולה + שורת "מקור" מקובצים יחד בצד השני (שמאל),
   ממורכזים אנכית מול גובה הלוגו (align-items:center בשורה). */
/* 20/10/2026: רשת סימטרית — הלוגו בעמודה האמצעית, ☰ תמיד בפינה השמאלית העליונה (בעברית ובאנגלית), הגלובוס
   והכפתור השני (₪ / הפעולה של האפליקציה) בפינה הימנית העליונה — בשורה העליונה, כך שגם כשהתפריט פתוח (⚙ ובהיר/כהה)
   התפריט שנפתח מתחתיהם לא מכסה אותם. הקפסולה של המצב (עד ~185px) — מתחת ללוגו באמצע, כמו התווית של Muse.
   ה־DOM לא השתנה: appbar-left / appbar-actions = display: contents, והכפתורים נשארים בתוך .appbar-actions
   (menu-open מחליף להם פנים). העמודות לפי כיוון פיזי: ב־RTL עמודה 1 = ימין, ב־LTR היא מתהפכת (direction: rtl ברשת). */
.appbar-row {
  display: grid; direction: rtl;
  grid-template-columns: var(--ib) 8px var(--ib) 1fr auto 1fr var(--ib) 8px var(--ib);
  grid-template-rows: var(--ib) auto 1fr;
  column-gap: 0; row-gap: 10px; align-items: start;
  /* 20/10/2026: מרווח קבוע רק בין שני כפתורים צמודים (עמודות 2 ו־8) — ליד הלוגו המרווח הוא ה־1fr. עם column-gap של 8px
     בין כל העמודות הרשת דרשה 352px, ובטלפון של 375 היא חרגה שמאלה: ☰ ובועת השער נצמדו לקצה בזמן שהגלובוס נשאר ב־16px */
}
.appbar-row > * { direction: var(--dir, rtl); }
html[dir="ltr"] .appbar-row > * { --dir: ltr; }
.appbar h1.brand { grid-column: 5; grid-row: 1 / 4; position: static; overflow: visible; line-height: 0; font-size: 0; margin: 0; }
.appbar-actions > .lang-wrap { grid-column: 1; grid-row: 1; }
.appbar-actions > .icon-btn { grid-column: 3; grid-row: 1; }
.appbar-actions > .menu-wrap { grid-column: 9; grid-row: 1; }
/* 20/10/2026 (בקשת המשתמש, 2.16.0): הקפסולה של המצב (השוק ב־Invest, הגיבוי ב־Academy, החיבור ב־Studio) — מתחת לגלובוס
   ולכפתור השני, בצד הימני; בועת השער (רק ב־Invest) — מתחת ל־☰ בצד השמאלי. שתיהן באותו גודל בדיוק: ברוחב של שני
   הכפתורים שמעליהן ובגובה של כפתור, וכל אחת מיושרת לקצה החיצוני שלהם */
.appbar-left > .appbar-sub { grid-column: 1 / 5; grid-row: 2; justify-self: start; position: relative; z-index: 1; }
.appbar .appbar-left > .appbar-sub[hidden] { display: none; }
.appbar-left > .fx-pill { grid-column: 6 / 10; grid-row: 2; justify-self: end; }
.appbar .fx-pill, .appbar .appbar-sub > * { box-sizing: border-box; width: calc(var(--ib) * 2 + 8px); min-width: 0; min-height: var(--pill-h); }   /* גובה הבועה = משלים את הלוגו (גם ב־320, שם הכפתורים 40) */
/* שתיהן באותה שורה של הרשת ונמתחות לגובה שלה — באותו גובה תמיד, גם כשהטקסט בטלפון מוגדל (הגדרת נגישות) */
.appbar-left > .appbar-sub, .appbar-left > .fx-pill { align-self: stretch; }
.appbar .appbar-left > .appbar-sub { display: flex; align-items: stretch; }
.appbar .appbar-sub > * { flex: 1 1 auto; }
/* הקפסולה = אותה "קופסה" של בועת השער: פינות, טקסט במרכז, לכל היותר שתי שורות — הסיבה (חג, דיליי) בשורה השנייה.
   באותו גובה בכל מצב (נמדד בכל המצבים, בעברית ובאנגלית, ב־320–412). ליד הנקודה החיה — בלי האייקון (אין מקום לשניהם) */
.appbar .appbar-sub > * { display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-content: center; column-gap: 5px; row-gap: 0;
  margin: 0; padding: 3px 4px; border-radius: var(--radius-xs); text-align: center; white-space: normal; line-height: 1.2;
  font-size: 13px; }
.appbar .appbar-sub > * > small { flex-basis: 100%; font-size: 12px; }
.appbar .appbar-sub .st-pill i + svg { display: none; }
/* 29/10/2026 (בקשת המשתמש — "נקי ומסודר בגודל ובצורה", לפי ת־עיצוב): כל בועות ההדר (השער, השוק, החיבור בסטודיו, הגיבוי באקדמיה)
   באותו מבנה ובאותה טיפוגרפיה — כיתוב קטן ומשני למעלה (נקודה/אייקון + שם) והמצב/הערך מודגש מתחתיו, ממורכזים */
.appbar .appbar-sub > :has(> .sub-cap) { height: auto; flex-direction: column; flex-wrap: nowrap; justify-content: center; align-items: center; gap: 1px; padding: 4px 8px; }
.appbar .sub-cap { display: inline-flex; align-items: center; justify-content: center; gap: 5px; max-width: 100% !important; min-width: 0;
  font-size: 12.5px; font-weight: 600; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-surface-var); }
.appbar .sub-cap i { width: 6px; height: 6px; }
.appbar .sub-cap svg { width: 13px; height: 13px; flex: none; }
.appbar .sub-cap small { font-size: inherit; font-weight: inherit; opacity: 1; }
.appbar .sub-val { display: block; max-width: 100%; font-size: 17px; font-weight: 700; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--on-surface); }
.appbar .st-pill:is(.pre, .post, .night) .sub-cap, .appbar .st-pill:is(.pre, .post, .night) .sub-val { color: inherit; }
.appbar .st-pill.closed .sub-val, .appbar .lib-bkpill.off .sub-val { color: var(--on-surface-var); }
.appbar .lib-bkpill.err .sub-cap, .appbar .lib-bkpill.err .sub-val { color: inherit; }
@media (max-width: 374px) { .appbar .sub-cap { font-size: 11px; } .appbar .sub-val { font-size: 15px; } }
/* תווית ארוכה (Connect Claude) נשברת בתוך עצמה, ליד הנקודה/האייקון — לא יורדת כולה לשורה משלה */
.appbar .appbar-sub > * > span:not(.sr-only):not(:empty) { max-width: calc(100% - 20px); }
@media (max-width: 374px) { .appbar .appbar-sub > * { font-size: 11px; padding: 3px; } .appbar .appbar-sub > * > small { font-size: 10px; } }
html, body { overscroll-behavior-x: none; } /* v279: משיכה אופקית = מעבר עמוד, לא "חזור" של הדפדפן */
.appbar h1.brand { cursor: pointer; -webkit-tap-highlight-color: transparent; } /* v279: לוגו → סקירה */
.brand-logo {
  width: 128px; height: 128px; display: block; /* v198: 128 — גודל מקורי; 27/10/2026: גובה ההדר = גובהו, והכפתורים והבועות (‎--ib‎) גדלו איתו */
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.16)) drop-shadow(0 4px 10px rgba(0,0,0,.10));
  -webkit-user-drag: none; user-select: none;
}
[data-theme="dark"] .brand-logo {
  filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.5)) drop-shadow(0 0 14px rgba(57,255,120,.10));
}
/* 20/10/2026 (בקשת המשתמש — "לוגו חי" כמו הדמות של Muse, ברמה של לוגו מקצועי, נקי לפי ת־עיצוב).
   השכבות: .brand-art (הלוגו + הפנים החיות + הברק) זז כיחידה אחת — אף שכבה לא "מחליקה" מהפנים, גם בתלת־ממד;
   סביבו הילה קרה, אד בבסיס, ושלג בשלוש שכבות עומק מאחור + שכבה קרובה ומטושטשת לפני הלוגו (רק בשוליים).
   התנועה = כמה אנימציות על תכונות נפרדות שמתחברות: translate (ריחוף, 6.5 שנ׳), scale (נשימה, 4.6 שנ׳),
   rotate (נטייה, 9 שנ׳) ו־transform (תנועת הראש — נמשך אחרי המבט, מרים סנטר בהרמת הגבות, צוחק — 20 שנ׳, יחד עם הפנים);
   הפנים = גיליון של 12 פריימים (face-<app>.webp, tools/brand-face.py — liquify של הציור עצמו: מצמוץ אמיתי, מבט, גבות,
   חיוך דושן) שמתחלפים ב־step-end לפי tools/brand-face-timeline.py;
   מחזורים שונים = התנועה לא חוזרת על עצמה באותו סדר, כמו דמות חיה. רק transform/opacity — compositor בלבד.
   השלג: snow-*-light|dark.png (tools/snow-sprites.py, פי 4). */
.appbar .brand { --logo: url(logo-invest.webp); --face: url(face-invest.webp); isolation: isolate; }
html[data-app="academy"] .appbar .brand { --logo: url(logo-academy.webp); --face: url(face-academy.webp); }
html[data-app="studio"] .appbar .brand { --logo: url(logo-studio.webp); --face: url(face-studio.webp); }
.appbar .brand-art { position: relative; z-index: 2; display: block; isolation: isolate; transform-origin: 50% 86%; will-change: transform;
  animation: artFloat 6.5s cubic-bezier(.45, 0, .55, 1) infinite, artBreath 4.6s cubic-bezier(.45, 0, .55, 1) infinite,
             artLean 9s cubic-bezier(.45, 0, .55, 1) infinite, artAct 20s linear infinite; }
.appbar .brand-face { position: absolute; pointer-events: none;   /* המיקום מ־brand-face.py (באחוזים מהלוגו) */
  left: var(--fx); top: var(--fy); width: var(--fw); height: var(--fh);
  background: var(--face) 0 0 / 1200% 100% no-repeat; animation: faceAct 20s step-end infinite; }
.appbar .brand { --fx: 39.714%; --fy: 43.62%; --fw: 26.172%; --fh: 21.875%; }
html[data-app="academy"] .appbar .brand, html[data-app="studio"] .appbar .brand { --fx: 39.844%; --fw: 26.042%; --fh: 21.615%; }
@keyframes artFloat { 0%, 100% { translate: 0 0; } 50% { translate: 0 -4px; } }
@keyframes artBreath { 0%, 100% { scale: 1; } 45% { scale: 1.022; } }
@keyframes artLean { 0%, 100% { rotate: -1.4deg; } 50% { rotate: 1.4deg; } }
/* פריימי הפנים ותנועת הראש — tools/brand-face-timeline.py (20 שנ׳, תזמון אנושי) */
@keyframes faceAct {
  0.000% { background-position-x: 0.0000%; }
  4.500% { background-position-x: 36.3636%; }
  4.700% { background-position-x: 45.4545%; }
  12.000% { background-position-x: 36.3636%; }
  12.200% { background-position-x: 0.0000%; }
  16.500% { background-position-x: 9.0909%; }
  16.650% { background-position-x: 18.1818%; }
  16.800% { background-position-x: 27.2727%; }
  17.300% { background-position-x: 18.1818%; }
  17.600% { background-position-x: 9.0909%; }
  18.000% { background-position-x: 0.0000%; }
  23.000% { background-position-x: 90.9091%; }
  25.500% { background-position-x: 72.7273%; }
  26.750% { background-position-x: 0.0000%; }
  30.500% { background-position-x: 72.7273%; }
  31.750% { background-position-x: 81.8182%; }
  36.000% { background-position-x: 100.0000%; }
  36.650% { background-position-x: 81.8182%; }
  43.000% { background-position-x: 72.7273%; }
  44.750% { background-position-x: 0.0000%; }
  49.000% { background-position-x: 9.0909%; }
  49.150% { background-position-x: 18.1818%; }
  49.300% { background-position-x: 27.2727%; }
  49.800% { background-position-x: 18.1818%; }
  50.100% { background-position-x: 9.0909%; }
  50.500% { background-position-x: 0.0000%; }
  55.000% { background-position-x: 54.5455%; }
  55.200% { background-position-x: 63.6364%; }
  61.500% { background-position-x: 54.5455%; }
  61.700% { background-position-x: 0.0000%; }
  66.000% { background-position-x: 9.0909%; }
  66.150% { background-position-x: 18.1818%; }
  66.300% { background-position-x: 27.2727%; }
  66.800% { background-position-x: 18.1818%; }
  67.100% { background-position-x: 9.0909%; }
  67.500% { background-position-x: 0.0000%; }
  71.500% { background-position-x: 36.3636%; }
  77.000% { background-position-x: 0.0000%; }
  81.000% { background-position-x: 72.7273%; }
  87.500% { background-position-x: 0.0000%; }
  91.000% { background-position-x: 9.0909%; }
  91.150% { background-position-x: 18.1818%; }
  91.300% { background-position-x: 27.2727%; }
  91.800% { background-position-x: 18.1818%; }
  92.100% { background-position-x: 9.0909%; }
  92.500% { background-position-x: 0.0000%; }
  93.250% { background-position-x: 9.0909%; }
  93.400% { background-position-x: 18.1818%; }
  93.550% { background-position-x: 27.2727%; }
  94.050% { background-position-x: 18.1818%; }
  94.350% { background-position-x: 9.0909%; }
  94.750% { background-position-x: 0.0000%; }
  100% { background-position-x: 0%; }
}
@keyframes artAct {
  0.000% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  5.250% { transform: perspective(520px) translateY(0px) scale(1) rotateY(-4.5deg) rotateX(0deg) rotate(-0.6deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  11.500% { transform: perspective(520px) translateY(0px) scale(1) rotateY(-4.5deg) rotateX(0deg) rotate(-0.6deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  13.500% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  22.750% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  23.750% { transform: perspective(520px) translateY(-2.2px) scale(1.02) rotateY(0deg) rotateX(5deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  27.000% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  30.500% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  32.500% { transform: perspective(520px) translateY(-1px) scale(1.03) rotateY(0deg) rotateX(0deg) rotate(-1.5deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  34.000% { transform: perspective(520px) translateY(0px) scale(1.03) rotateY(0deg) rotateX(0deg) rotate(-1.5deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  35.000% { transform: perspective(520px) translateY(-1.7px) scale(1.035) rotateY(0deg) rotateX(0deg) rotate(-1.5deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  36.000% { transform: perspective(520px) translateY(0px) scale(1.035) rotateY(0deg) rotateX(0deg) rotate(-1.2deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  37.000% { transform: perspective(520px) translateY(-1.2px) scale(1.03) rotateY(0deg) rotateX(0deg) rotate(-1.2deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  38.500% { transform: perspective(520px) translateY(-0.4px) scale(1.03) rotateY(0deg) rotateX(0deg) rotate(-1deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  44.750% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  55.750% { transform: perspective(520px) translateY(0px) scale(1) rotateY(4.5deg) rotateX(0deg) rotate(0.6deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  61.500% { transform: perspective(520px) translateY(0px) scale(1) rotateY(4.5deg) rotateX(0deg) rotate(0.6deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  63.500% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  72.000% { transform: perspective(520px) translateY(0px) scale(1) rotateY(-2.4deg) rotateX(0deg) rotate(-0.3deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  77.500% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  81.000% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  83.000% { transform: perspective(520px) translateY(0px) scale(1.015) rotateY(0deg) rotateX(0deg) rotate(-0.8deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  87.500% { transform: perspective(520px) translateY(0px) scale(1.015) rotateY(0deg) rotateX(0deg) rotate(-0.8deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  90.000% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
  100.000% { transform: perspective(520px) translateY(0px) scale(1) rotateY(0deg) rotateX(0deg) rotate(0deg); animation-timing-function: cubic-bezier(.4, 0, .25, 1); }
}
/* ברק שעובר על הקרח פעם במחזור — פס אור רך בצורת הלוגו בלבד (מסכה מהלוגו עצמו) */
.appbar .brand-sheen { position: absolute; inset: 0; overflow: hidden; pointer-events: none;
  -webkit-mask: var(--logo) center / 100% 100% no-repeat; mask: var(--logo) center / 100% 100% no-repeat; }
.appbar .brand-sheen::before { content: ''; position: absolute; top: -20%; bottom: -20%; width: 46%; left: 0;
  background: linear-gradient(100deg, transparent 0, rgba(255, 255, 255, .0) 20%, rgba(255, 255, 255, .55) 50%, rgba(255, 255, 255, 0) 80%, transparent);
  transform: translateX(-130%) skewX(-14deg); animation: iceSheen 16s cubic-bezier(.5, 0, .3, 1) infinite; }
[data-theme="dark"] .appbar .brand-sheen::before { background: linear-gradient(100deg, transparent 0, rgba(220, 240, 255, 0) 20%, rgba(220, 240, 255, .42) 50%, rgba(220, 240, 255, 0) 80%, transparent); }
@keyframes iceSheen { 0%, 56% { transform: translateX(-130%) skewX(-14deg); } 66%, 100% { transform: translateX(330%) skewX(-14deg); } }
.appbar .brand-art::before {   /* הילה קרה — עם הלוגו, מאחוריו */
  content: ''; position: absolute; inset: -10%; z-index: -1; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(175, 215, 255, .6), rgba(175, 215, 255, .2) 60%, transparent);
  animation: brandHalo 6.5s cubic-bezier(.45, 0, .55, 1) infinite; }
[data-theme="dark"] .appbar .brand-art::before { background: radial-gradient(closest-side, rgba(150, 205, 255, .26), rgba(150, 205, 255, .08) 60%, transparent); }
@keyframes brandHalo { 0%, 100% { opacity: .55; transform: scale(.95); } 50% { opacity: 1; transform: scale(1.06); } }
.appbar .brand-art::after {   /* אד קר בבסיס */
  content: ''; position: absolute; left: -22%; right: -22%; bottom: -8%; height: 36%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 60%, rgba(255, 255, 255, .95), rgba(225, 238, 252, .45) 55%, transparent);
  animation: frostMist 9s cubic-bezier(.45, 0, .55, 1) infinite alternate; }
[data-theme="dark"] .appbar .brand-art::after { background: radial-gradient(50% 50% at 50% 60%, rgba(200, 225, 255, .17), rgba(200, 225, 255, .05) 55%, transparent); }
@keyframes frostMist { from { opacity: .55; transform: translateX(-5%) scaleX(.94); } to { opacity: 1; transform: translateX(5%) scaleX(1.06); } }
/* שלג: אריח שקוף (פי 4) שיורד ברציפות באורך האריח בדיוק — בלי קפיצה בלולאה; כל שכבה מתנדנדת ברוח בקצב אחר.
   "עולם חופשי" (בקשת המשתמש): השלג על כל רוחב ההדר (ה־h1 = static, כך שהשכבה נמדדת מ־.appbar) — נכנס מעל המסך,
   יוצא מצדי המסך, ובתחתית נבלע בדעיכה רכה וארוכה (נגמרת לפני הלשוניות). בלי קופסה סביב הלוגו שבה פתיתים נחתכים או "נוצרים";
   הפקדים בהדר אטומים באותו גוון (למעלה), כך שהשלג עובר מאחוריהם. */
.appbar .brand-snow { position: absolute; left: 0; right: 0; top: 0; bottom: -4px; z-index: 1; pointer-events: none; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 calc(100% - 56px), transparent); mask-image: linear-gradient(#000 calc(100% - 56px), transparent); }
.appbar .brand-snow.front { z-index: 4;   /* הקרובה — לפני הלוגו, ומדלגת רק על הפנים (מעבר רך) */
  -webkit-mask-image: radial-gradient(circle at 50% 46%, transparent 0 38px, #000 70px), linear-gradient(#000 calc(100% - 56px), transparent);
  mask-image: radial-gradient(circle at 50% 46%, transparent 0 38px, #000 70px), linear-gradient(#000 calc(100% - 56px), transparent);
  -webkit-mask-composite: source-in; mask-composite: intersect; }
.appbar .brand-snow i { position: absolute; inset: 0; animation: snowSway var(--sw, 6s) cubic-bezier(.45, 0, .55, 1) infinite alternate; }
.appbar .brand-snow i::before { content: ''; position: absolute; inset-inline: 0; top: calc(-1 * var(--h)); height: calc(100% + var(--h));
  background: var(--img) 0 0 / var(--w) var(--h) repeat; animation: snowFall var(--d) linear infinite; }
.appbar .brand-snow i:nth-child(1) { --sw: 13s; }
.appbar .brand-snow i:nth-child(1)::before { --img: url(snow-far-light.png); --w: 120px; --h: 150px; --d: 34s; }
.appbar .brand-snow i:nth-child(2) { --sw: 10.5s; animation-delay: -4s; }
.appbar .brand-snow i:nth-child(2)::before { --img: url(snow-mid-light.png); --w: 170px; --h: 200px; --d: 30s; }
.appbar .brand-snow i:nth-child(3) { --sw: 8.5s; animation-delay: -6s; }
.appbar .brand-snow i:nth-child(3)::before { --img: url(snow-near-light.png); --w: 230px; --h: 280px; --d: 24s; }
.appbar .brand-snow.front i:nth-child(1) { --sw: 9.5s; animation-delay: -3s; }
.appbar .brand-snow.front i:nth-child(1)::before { --img: url(snow-near-light.png); --w: 230px; --h: 280px; --d: 20s; background-position: 110px 60px; scale: 1.25; }
[data-theme="dark"] .appbar .brand-snow i:nth-child(1)::before { --img: url(snow-far-dark.png); }
[data-theme="dark"] .appbar .brand-snow i:nth-child(2)::before { --img: url(snow-mid-dark.png); }
[data-theme="dark"] .appbar .brand-snow i:nth-child(3)::before, [data-theme="dark"] .appbar .brand-snow.front i:nth-child(1)::before { --img: url(snow-near-dark.png); }
@keyframes snowFall { to { transform: translateY(var(--h)); } }
/* 20/10/2026 (בקשת המשתמש — "כמו פתיתי שלג אמיתיים"): ירידה איטית — 4–14 פיקסלים בשנייה, הרחוקים לאט והקרובים מעט מהר יותר
   (עומק), ונדנוד רחב ואיטי ברוח במקום תנודה קצרה */
@keyframes snowSway { from { transform: translateX(-9px); } to { transform: translateX(9px); } }
/* ניצוצות קרח על הקריסטלים — כוכב דק של ארבע קרניים שמנצנץ לרגע, כל אחד בזמן אחר */
.appbar .brand-snow b { position: absolute; width: 13px; height: 13px; margin: -6.5px; opacity: 0; transform: scale(.3);
  background: radial-gradient(circle, #fff 0 1.1px, transparent 1.8px),
    linear-gradient(90deg, transparent 45%, rgba(255,255,255,.95) 50%, transparent 55%),
    linear-gradient(transparent 45%, rgba(255,255,255,.95) 50%, transparent 55%);
  filter: drop-shadow(0 0 2.5px rgba(150, 205, 255, .95));
  animation: iceGlint 6s ease-in-out infinite; }
.appbar .brand-snow b:nth-of-type(1) { left: calc(50% - 36px); top: 30px; }
.appbar .brand-snow b:nth-of-type(2) { left: calc(50% + 44px); top: 52px; animation-delay: -2.2s; animation-duration: 7s; }
.appbar .brand-snow b:nth-of-type(3) { left: calc(50% - 28px); top: 112px; animation-delay: -4.1s; animation-duration: 8s; }
@keyframes iceGlint { 0%, 70%, 100% { opacity: 0; transform: scale(.3) rotate(0); } 80% { opacity: 1; transform: scale(1) rotate(45deg); } 90% { opacity: 0; transform: scale(.5) rotate(90deg); } }
/* 27/10/2026: מנוחה — אחרי BRAND_CALM_MS בלי נגיעה (brandCalmWire ב־core) הכל עוצר באותו מקום, ונגיעה ממשיכה */
html.calm .appbar .brand-logo, html.calm .appbar .brand-art, html.calm .appbar .brand-face, html.calm .appbar .brand-sheen::before,
html.calm .appbar .brand-art::before, html.calm .appbar .brand-art::after, html.calm .appbar .brand-snow i, html.calm .appbar .brand-snow i::before,
html.calm .appbar .brand-snow b { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .appbar .brand-logo, .appbar .brand-art, .appbar .brand-face, .appbar .brand-sheen::before, .appbar .brand-art::before, .appbar .brand-art::after, .appbar .brand-snow i, .appbar .brand-snow i::before, .appbar .brand-snow b { animation: none; }
}

/* v140: flex-end (לא flex-start) — הצד היציב הוא זה שצמוד לקצה המסך (לא
   לצד הלוגו). שורת "מקור" ארוכה (אחרי־מסחר) מרחיבה את התיבה כלפי הלוגו;
   flex-start היה מצמיד את שתי השורות לקצה שזז, וגורר את כפתורי הפעולה
   ימינה (לכיוון הלוגו) בכל פעם שהטקסט התארך. */
.appbar-left, .appbar-actions { display: contents; } /* 20/10/2026: הילדים יושבים ישירות ברשת של .appbar-row */
.appbar-sub {
  margin: 0; font-size: 12.5px; color: var(--on-surface-var);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
/* v301: קפסולת מצב השוק (בלי שם המקור) — נקודה בצבע הקפסולה = חי, אפורה + "· דיליי" = גיבוי/שמור; סגור = מנעול */
.appbar-sub.src-row { display: flex; align-items: center; overflow: visible; }
.st-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 10px; border-radius: var(--pill); font-size: 12.5px; font-weight: 700; line-height: 1.3; white-space: nowrap; }
.st-pill svg { width: 13px; height: 13px; flex: none; }
.st-pill i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: currentColor; box-shadow: 0 0 0 3px color-mix(in srgb, currentColor 22%, transparent); }
.st-pill.delay i { background: var(--on-surface-var); box-shadow: none; opacity: .7; }
.st-pill small { font-size: inherit; font-weight: 600; opacity: .75; }
.st-pill.open { background: var(--surface-2); border: 1px solid var(--card-border); color: var(--on-surface); }
.st-pill.open i { background: var(--gain); box-shadow: 0 0 0 3px color-mix(in srgb, var(--gain) 22%, transparent); }
.st-pill.open.delay i { background: var(--on-surface-var); box-shadow: none; }
.st-pill.pre { background: color-mix(in srgb, #FF9F0A 18%, transparent); color: color-mix(in srgb, #FF9F0A 72%, var(--on-surface)); }
.st-pill.post { background: color-mix(in srgb, #5E5CE6 18%, transparent); color: color-mix(in srgb, #5E5CE6 70%, var(--on-surface)); }
.st-pill.night { background: color-mix(in srgb, #0A84FF 16%, transparent); color: color-mix(in srgb, #0A84FF 65%, var(--on-surface)); }
.st-pill.closed { background: color-mix(in srgb, var(--on-surface-var) 16%, transparent); color: var(--on-surface-var); }
@media (max-width: 374px) { .st-pill { font-size: 11.5px; padding: 3px 9px; gap: 5px; } }
/* 20/10/2026: השלג של הלוגו עובר מאחורי הפקדים בהדר — רקע אטום באותו גוון בדיוק (הגוון השקוף מעל צבע הדף),
   אחרת בכהה הפתיתים נראו דרך הכפתורים כאילו הם מעליהם */
.appbar .icon-btn { width: var(--ib); height: var(--ib); font-size: calc(var(--ib) * .45); }
.appbar .icon-btn, .appbar .fx-pill, .appbar .st-pill.open { background: linear-gradient(var(--surface-2), var(--surface-2)) var(--bg); }
/* בועת השער כמו הכפתורים: ממוקמת (אחרת שכבת השלג — הקשר ערימה של הלוגו — מצוירת מעליה) ועם אותו מסגור */
.appbar .fx-pill { position: relative; z-index: 1; border: 1px solid var(--card-border); }
.appbar .st-pill.pre { background: color-mix(in srgb, #FF9F0A 18%, var(--bg)); }
.appbar .st-pill.post { background: color-mix(in srgb, #5E5CE6 18%, var(--bg)); }
.appbar .st-pill.night { background: color-mix(in srgb, #0A84FF 16%, var(--bg)); }
.appbar .st-pill.closed { background: color-mix(in srgb, var(--on-surface-var) 16%, var(--bg)); }
/* 29/10/2026 (בקשת המשתמש): כל בועות ההדר — מצב השוק, השער, הגיבוי ב־Academy ו־Claude ב־Studio — באותה זכוכית של הכפתורים העגולים
   (טשטוש + קצה אור + צל); הבסיס נשאר אטום בגוון המצב בגלל השלג של הלוגו (ההערה למעלה) */
.appbar .fx-pill, .appbar .appbar-sub > * { -webkit-backdrop-filter: var(--gl-fx); backdrop-filter: var(--gl-fx); box-shadow: var(--gl-btn-sh); border-color: transparent; }
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.icon-btn {
  border: 1px solid var(--card-border); cursor: pointer;
  width: 44px; height: 44px; border-radius: 50%; flex: none;
  background: var(--surface-2); color: var(--on-surface); font-size: 21px;
  display: flex; align-items: center; justify-content: center;
}
/* אייקון בודד בתוך כפתור עגול — בלי ה־margin של אייקון־ליד־טקסט, ממורכז בדיוק */
.icon-btn .ic { margin: 0; vertical-align: baseline; }
/* v92: כפתור מטבע יחיד */
.cur-btn { font-size: 22px; font-weight: 800; }

/* v154: החלפת כפתורים כשההמבורגר פתוח — גלובוס→הגדרות, מטבע→בהיר/כהה, המבורגר→✕.
   שני "פנים" בכל כפתור, זה מעל זה: הפנים הנוכחיות מסתובבות, מתכווצות ונמוגות, והחדשות
   נכנסות מהצד השני. עקומת האטה רכה, והכפתור השני מתחיל מעט אחרי הראשון. */
.icon-btn { position: relative; overflow: hidden; transition: background-color .28s ease, color .28s ease, border-color .28s ease, transform .18s ease; }
.icon-btn:active { transform: scale(.94); }
.icon-btn .face {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  transition: transform .38s cubic-bezier(.2, .9, .25, 1.15), opacity .26s ease;
  will-change: transform, opacity;
}
.icon-btn .face-alt { opacity: 0; transform: rotate(-120deg) scale(.4); pointer-events: none; }
.menu-open .icon-btn .face-main { opacity: 0; transform: rotate(120deg) scale(.4); }
.menu-open .icon-btn .face-alt { opacity: 1; transform: none; }
.appbar-actions > :nth-child(2) .face, .appbar-actions > :nth-child(2).icon-btn .face { transition-delay: .04s; }
.appbar-actions > :nth-child(1) .face, .appbar-actions > .icon-btn:nth-child(1) .face { transition-delay: .08s; }
/* הכפתורים החדשים באותו סגנון בדיוק כמו כפתורי השפה והמטבע — רק האייקון מתחלף */
@media (prefers-reduced-motion: reduce) {
  .icon-btn .face, .icon-btn { transition: opacity .15s linear; }
  .icon-btn .face-alt, .menu-open .icon-btn .face-main, .menu-open .icon-btn .face-alt { transform: none; }
}

/* v109: תפריט שפה מינימלי בהדר — צמוד לכפתור הגלובוס */
.lang-wrap { position: relative; flex: none; }
.lang-menu {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  right: 0; left: auto; /* 20/10/2026: הגלובוס בפינה הימנית — נפתח לתוך המסך גם באנגלית */
  display: flex; flex-direction: column; gap: 4px;
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: 14px; padding: 6px; min-width: 132px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
.lang-menu button {
  border: 0; background: transparent; color: var(--on-surface);
  font-size: 15.5px; font-weight: 600; text-align: start;
  padding: 10px 12px; border-radius: 10px; cursor: pointer;
}
.lang-menu button.active { background: var(--surface-2); font-weight: 800; }
[data-theme="dark"] .lang-menu { background: #1C1C1E; }

/* v106: טור עיגולים (מלמעלה ללמטה) משמאל לבועת המזומן — זה לצד זה, בלי חפיפה */
.menu-wrap { position: relative; flex: none; }
.menu-drop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60;
  left: 0; right: auto; /* 20/10/2026: ☰ תמיד בפינה השמאלית — נפתח לתוך המסך בשתי השפות */
  display: flex; flex-direction: column; gap: 10px; align-items: stretch;
  width: min(280px, calc(100vw - 16px));
}
/* v108: כפתורי התפריט — פילים נקיים מתחת לבועת המזומן */
.menu-settings-btn {
  width: 100%; justify-content: center;
  box-shadow: 0 4px 14px rgba(0,0,0,.20);
}
/* v108: שורות כרטיס התצוגה בהגדרות */
.display-row {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 8px 0;
}
.display-label { font-size: 15.5px; font-weight: 600; }
.main-menu {
  width: 100%;
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: 18px; padding: 16px;
  box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
/* v105: הבועה אטומה — בלי שקיפות הרקע של מצב כהה */
[data-theme="dark"] .main-menu { background: #1C1C1E; }
.menu-title { margin: 0 0 10px; font-size: 16px; font-weight: 800; }
.main-menu .btn { width: 100%; margin-top: 10px; }

@media (max-width: 360px) {
  .brand-logo { width: 100px; height: 100px; }
  .icon-btn { width: 40px; height: 40px; font-size: 19px; }
  .appbar { --ib: 40px; --pill-h: 44px; }
}

/* ---- Status banner ---- */
.banner {
  margin: 16px 16px 0; padding: 12px 16px;
  border-radius: var(--radius-sm); font-size: 15px; font-weight: 600;
  background: var(--warn-bg); color: var(--warn-fg);
  border: 1px solid var(--warn-border);
}
.banner.hidden { display: none; }

/* ---- Tabs — "חוגה" בתחתית המסך (29/10/2026, בקשת המשתמש — לפי סרטון) ----
   הפריטים יושבים על קשת: הפעיל במרכז, גדל לבועה בצבע האפליקציה עם הסמל בלבן (בלי כיתוב), והשאר עיגולי זכוכית עם סמל וכיתוב מתחת. המיקום של כל פריט
   (translate/scale/opacity) נקבע ב־app.js (dialPaint, ובמעבר — dialAnimate באותו קפיץ ובאותו זמן של הקובייה). הסרגל מחוץ ל־main —
   לא חלק מהקובייה, ותמיד גלוי במעבר. שכבת הרקע: זכוכית שנמוגה למעלה (בלי קו חד מעל התוכן), וזוהר עדין מאחורי המרכז */
body.has-dock { --dock-h: 120px; padding-bottom: calc(var(--dock-h) + env(safe-area-inset-bottom, 0px) + 14px); }
.tabs {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 21;
  height: calc(var(--dock-h, 120px) + env(safe-area-inset-bottom, 0px));
  isolation: isolate; overflow-x: clip; touch-action: none;
  --dock-bg: transparent; --dock-bg2: color-mix(in srgb, var(--bg) 2%, transparent); --dial-btn: rgba(255, 255, 255, .55);
}
[data-theme="dark"] .tabs { --dock-bg: transparent; --dock-bg2: color-mix(in srgb, var(--bg) 3%, transparent); --dial-btn: var(--gl-btn); }
.tabs::before {
  content: ''; position: absolute; inset: -26px 0 0; z-index: -2; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--dock-bg) 34px, var(--dock-bg2) 84px);
  -webkit-backdrop-filter: blur(3px) saturate(160%); backdrop-filter: blur(3px) saturate(160%);
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 30px); mask-image: linear-gradient(to bottom, transparent, #000 30px);
}
.tabs::after {   /* "זרקור" מאחורי הבועה — קבוע במרכז, נותן עומק בלי לזוז */
  content: ''; position: absolute; inset: -10px 0 0; z-index: -1; pointer-events: none;
  background: radial-gradient(ellipse 150px 74px at 50% 67px, color-mix(in srgb, var(--primary) 22%, transparent), transparent 72%);
}
body.menu-blur .tabs, body:has(.appbar .lang-menu:not(.hidden)) .tabs { z-index: 15; }

/* לחיצה נקייה ברמת אפל: בלי קוביית ההיילייט של אנדרואיד, עם משוב עדין */
button, a, .tab, .icon-btn, .ss-add {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.tab {
  position: absolute; top: 0; left: calc(50% - 46px); width: 92px; height: var(--dock-h, 120px);
  padding: 0; margin: 0; border: 0; background: none; cursor: pointer; font-family: var(--font); color: var(--on-surface-var);
  transform-origin: 46px 55px; will-change: transform, opacity; outline-offset: -4px;
}
/* העיגול: בגודל הבועה (78) ומוקטן כשאינו פעיל — הבועה הפעילה מצוירת חדה בגודלה האמיתי */
.tab-disc {
  position: absolute; top: 16px; left: 7px; width: 78px; height: 78px; border-radius: 50%;
  display: grid; place-items: center; transform: scale(.72); will-change: transform;
  background: var(--dial-btn, var(--gl-btn));   /* בהיר — זכוכית לבנה חצי־שקופה; כהה — --gl-btn (המשתמש: "בשחור נראה מעולה") */ box-shadow: var(--gl-btn-sh); transition: scale .16s ease;
}
.tab:active .tab-disc { scale: .9; }
.tab-glow {
  --btn-c: var(--primary);
  position: absolute; inset: 0; border-radius: 50%; opacity: 0; will-change: opacity;
  /* זכוכית נוזלית (לפי ת־עיצוב): ברק בחלק העליון, אור שמתרכז בשפה התחתונה (שבירה), גוף צבעוני שמעמיק למטה */
  background: radial-gradient(90% 55% at 50% 0%, rgba(255, 255, 255, .5), rgba(255, 255, 255, 0) 70%),
    radial-gradient(80% 40% at 50% 100%, rgba(255, 255, 255, .32), rgba(255, 255, 255, 0) 75%),
    linear-gradient(180deg, color-mix(in srgb, var(--btn-c) 80%, #fff), var(--btn-c) 55%, color-mix(in srgb, var(--btn-c) 88%, #000));
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .2), inset 0 0 16px rgba(255, 255, 255, .18),
    0 0 0 .5px color-mix(in srgb, var(--btn-c), #000 12%), 0 0 0 6px color-mix(in srgb, var(--btn-c) 14%, transparent),
    0 8px 26px color-mix(in srgb, var(--btn-c) 46%, transparent);
}
[data-theme="dark"] .tab-glow { box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(255, 255, 255, .14), inset 0 0 16px rgba(255, 255, 255, .12),
  0 0 0 6px color-mix(in srgb, var(--btn-c) 16%, transparent), 0 0 30px color-mix(in srgb, var(--btn-c) 42%, transparent), 0 2px 8px rgba(0, 0, 0, .35); }
/* נחיתה על לשונית (dialZap): "נשימה" רכה — הבועה והסמל גדלים מעט וחוזרים בקפיץ מרוסן, בלי גל ובלי ברק (בקשת המשתמש: נקי ונעים, לפי ת־עיצוב) */
.tab.zap .tab-disc, .tab.zap .tab-bub { animation: dialSettle .55s cubic-bezier(.4, 0, .2, 1) both; }
@keyframes dialSettle { 0% { scale: 1; } 40% { scale: 1.04; } 100% { scale: 1; } }
.tab-ico { position: relative; width: 38px; height: 38px; display: block; stroke: var(--primary); will-change: opacity; }
.tab-fill path { fill: var(--primary); }
.tab-bub {
  position: absolute; top: 16px; left: 7px; width: 78px; height: 78px; padding: 4px; box-sizing: border-box;
  display: grid; place-items: center; text-align: center; opacity: 0; will-change: transform, opacity;
  font-size: 16px; font-weight: 800; line-height: 1.1; letter-spacing: -.01em; color: var(--on-primary); overflow-wrap: anywhere;
}
html[lang="en"] .tab-bub { font-size: 14px; }
.tab-lbl {
  position: absolute; top: 90px; left: -6px; right: -6px; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-size: 14.5px; font-weight: 600; line-height: 20px; color: var(--on-surface-var); will-change: opacity;
  text-shadow: 0 0 2px color-mix(in srgb, var(--bg) 80%, transparent), 0 0 8px color-mix(in srgb, var(--bg) 90%, transparent);   /* קריא מעל התוכן — הבר שקוף */
}
@media (prefers-reduced-motion: reduce) { .tab.zap .tab-disc, .tab.zap .tab-bub { animation: none; } }
.icon-btn, .ss-add { transition: transform .16s ease, background .25s ease; }
.icon-btn:active, .ss-add:active { transform: scale(.9); }
.count-chip {
  background: var(--primary); color: var(--on-primary); border-radius: var(--pill);
  font-size: 13px; padding: 2px 9px; font-weight: 700;
}

/* ---- Layout — קצב 8pt ---- */
main { padding: 8px 16px 0; max-width: 720px; margin: 0 auto; }
.tabpage { display: none; }
/* v193: העמוד נכנס בציר משותף (Material/iOS) — מחליק מהצד שאליו עברנו (--tab-dx נקבע ב־switchTab לפי הכיוון ו־RTL) ומתבהר */
.tabpage.active { display: block; animation: tabIn .32s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes tabIn { from { opacity: .55; transform: translate3d(var(--tab-dx, 0px), 0, 0); } to { opacity: 1; transform: none; } }   /* v325: לא מ־0 — הישן כבר display:none והחדש היה שקוף לפריים שלם = מסך ריק (במצב כהה הבהוב שחור, נמדד ב־QA) */
@keyframes fade { from { opacity: .4; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .tabpage.active { animation: fade .15s ease; } }
/* 14/10/2026: מעבר "קובייה" (המנוע ב־app.js, <core>: cubeTransform). העמוד הנכנס בגרירה מוצג בלי להיות פעיל (cube-in),
   היוצא נשאר מוצג עד סוף הסיבוב (cube-out); אחרי קובייה — בלי אנימציית הכניסה (no-in, עד שהעמוד יוצא) */
.tabpage.cube-in, .tabpage.cube-out { display: block; }
.tabpage.no-in { animation: none; }
/* Academy / Studio: הדף היוצא = העתק "מת" של השכבה — בלי אנימציות כניסה שמתחילות מחדש בהעתק; רקע אטום מתחת לשכבה */
/* 27/10/2026 (סרטון המשתמש — הלשוניות במנתח החברות "כפולות" וקופצות בזמן הסיבוב): גם הרצועה הקבועה (cubeHold) היא העתק —
   בלעדי זה היא הריצה מחדש את אנימציית הכניסה של השכבה (דהייה ותזוזה של 28px) מעל הדף שמתחתיה */
.cube-ghost, .cube-ghost *, .cube-hold, .cube-hold * { transition: none !important; }
/* 29/10/2026: הלוגו החי ממשיך לזוז בהעתק (core: animSync — באותו רגע של המקור); כיבוי שלו כאן הקפיץ אותו למנוחה בכל מעבר */
.cube-ghost, .cube-ghost *:not(.brand, .brand *), .cube-hold, .cube-hold *:not(.brand, .brand *) { animation: none !important; }
/* 29/10/2026 (Studio ו־Academy; המדידה הראשונה שאמרה "ב־Academy זה מקפיץ" צילמה את סיבוב הלוגו ולא את הקובייה): פאה בזמן הסיבוב — בלי זכוכית (בטלפון נצבעה כפס אטום שחתך את הכותרת, ו"קפצה" בנחיתה; tools/qa-deep.js --landing) */
:is(.st-root, .lib-root):is(.cube-face, .cube-ghost) *, :is(.st-root, .lib-root):is(.cube-face, .cube-ghost) *::before, :is(.st-root, .lib-root):is(.cube-face, .cube-ghost) *::after { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
.cube-bd { position: fixed; inset: 0; z-index: 899; background: var(--bg); pointer-events: none; }
/* 14/10/2026: פאה בראש הגלילה — בלי טשטוש בהדר בזמן הסיבוב (מאחוריו רק רקע אחיד, אז אין הבדל נראה; עם הטשטוש — 50ms לפריים) */
.cube-flat .appbar { -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }

.card {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow); padding: 20px; margin: 16px 0;
}
/* v193: בלי backdrop-filter על כרטיסים במצב כהה — הרקע שחור אחיד, הטשטוש לא נראה אבל עלה בפריים בכל גלילה */
[data-theme="dark"] .card { background: #1C1C1E; }
.card h2 { margin: 0 0 12px; font-size: 19px; font-weight: 700; letter-spacing: -.2px; }

.cards-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 16px 0; }
.cards-3 .card { margin: 0; padding: 14px 4px 13px; text-align: center; min-width: 0; overflow: hidden; display: flex; flex-direction: column; }
/* v197: אריחי הסקירה נקיים — תווית + מספר בלבד; שורת ההסבר (מזומן/דוח/TWR/עודכן) הוסרה מהתצוגה (בקשת המשתמש).
   האלמנטים נשארים ב־DOM (ה־JS כותב אליהם) אבל מוסתרים. */
.cards-3 .stat-sub { margin-top: auto; padding-top: 6px; display: none; }
.cards-3 .stat-label { margin-bottom: 6px; font-weight: 600; letter-spacing: 0; font-size: 13px; white-space: nowrap; } /* v198: תווית בשורה אחת — אריח נמוך יותר */
/* v198: הערת ההסבר מתחת לגרף הביצועים (TWR יומי… · תקופות רשמיות) מוסתרת — בקשת המשתמש; הקוד נשאר לדיאגנוסטיקה */
#pfNoteEl { display: none; }
/* v235: אריחי הסקירה באותו סגנון כמו נתוני כרטיס המניה (v234, בקשת המשתמש) — כרטיס לבן אחד במקום שלושה,
   קווים אנכיים קצרים בין העמודות, תווית שקטה, מספר בולט (גדול מבכרטיס המניה — אלה המספרים הראשיים) */
.cards-3.ov-stats { gap: 0; padding: 14px 6px; margin: 16px 0; }
.ov-stats .stat { position: relative; min-width: 0; padding: 2px 4px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 3px; }
.ov-stats .stat + .stat::before { content: ''; position: absolute; inset-inline-start: 0; top: 16%; bottom: 16%; width: .5px; background: var(--outline); }
.ov-stats .stat-label { margin: 0; font-size: 12px; font-weight: 400; letter-spacing: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ov-stats .stat-value { margin: 0; font-size: 20px; font-weight: 700; letter-spacing: -.3px; }
.cards-3 .stat-value { margin-top: auto; } /* המספרים בקו אחד גם כשתווית נשברת לשתי שורות */
.stat.wide { text-align: center; }
.stat-label { font-size: 13.5px; color: var(--on-surface-var); margin-bottom: 6px; }
.stat-value { font-size: 25px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }
.stat-value, .lg-pct, .pension-total { white-space: nowrap; }
.stat-value.pos { color: var(--gain); }
.stat-value.neg { color: var(--loss); }
.stat-sub { font-size: 13px; color: var(--on-surface-var); margin-top: 6px; }

/* ---- Pie ---- */
.pie-wrap { display: flex; justify-content: center; margin-inline: -12px; } /* v175: העוגה מנצלת כמעט את כל רוחב הכרטיס */
#pieChart { -webkit-tap-highlight-color: transparent; -webkit-user-select: none; user-select: none; outline: none; } /* v179: בלי הריבוע הכחול בנגיעה */
#pieChart { width: 100%; max-width: 520px; aspect-ratio: 1 / 1; height: auto; display: block; }
.pie-leg-logo {
  position: relative; width: 34px; height: 34px; border-radius: 10px; flex: none; overflow: hidden;
  display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF; box-shadow: 0 1px 3px rgba(0,0,0,.12), inset 0 0 0 1px rgba(0,0,0,.06);
}
.pie-leg-fb { font-weight: 800; font-size: 15px; color: #3A3A3C; }
.pie-leg-logo.cash { background: var(--primary); }
.pie-leg-logo.cash .pie-leg-fb { color: var(--on-primary); font-size: 20px; }
/* v173: לוגו לבן — מתהפך לשחור על האריח הלבן, כמו בטאב המניות */
.pie-leg-logo.inv img { filter: invert(1); background: transparent; }
.pie-leg-logo.inv .pie-leg-fb { display: none; } /* v174: הלוגו כבר נטען — בלי האות מאחוריו */
.pie-leg-logo img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain;
  padding: 5px; box-sizing: border-box; background: inherit;
}
.pie-leg-logo img[src*="tradingview"] { padding: 0; }
.legend { list-style: none; margin: 10px 0 0; padding: 0; }
.legend li {
  display: flex; align-items: center; gap: 10px;
  font-size: 15px; padding: 8px 0; border-bottom: 1px solid var(--separator);
}
.legend li:last-child { border-bottom: 0; }
.dot { width: 13px; height: 13px; border-radius: 5px; flex: none; }
.legend .lg-name { flex: 1; min-width: 0; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* v151: מקרא העוגה — "SYM · שם": הסימבול ראשון והחיתוך רק בסוף השם */
#pieLegend .lg-name { flex: 1 1 auto; margin-inline-end: auto; display: flex; flex-direction: column; gap: 1px; line-height: 1.2; }
#pieLegend .lg-sym { font-weight: 700; font-size: 15.5px; align-self: flex-start; }
#pieLegend .lg-full { align-self: flex-start; max-width: 100%; font-weight: 500; font-size: 13px; color: var(--on-surface-var); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
#pieLegend li { gap: 12px; padding: 10px 0; }
/* v180: שורת המקרא של הפרוסה שנבחרה — רקע עדין, והלוגו קופץ בקפיץ כמו בעוגה */
#pieLegend li { cursor: pointer; border-radius: var(--radius-sm); transition: background-color .25s ease, padding .25s ease; -webkit-tap-highlight-color: transparent; }
#pieLegend li .pie-leg-logo { transition: transform .5s cubic-bezier(.34, 1.56, .64, 1), box-shadow .3s ease; }
#pieLegend li.active { background: color-mix(in srgb, var(--primary) 9%, transparent); padding-inline: 10px; }
#pieLegend li.active .pie-leg-logo { transform: scale(1.18) translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,.18), inset 0 0 0 1px rgba(0,0,0,.06); }
@media (prefers-reduced-motion: reduce) { #pieLegend li, #pieLegend li .pie-leg-logo { transition: none; } }
#pieLegend .dot { width: 10px; height: 10px; border-radius: 50%; }
.legend .lg-val { color: var(--on-surface-var); font-variant-numeric: tabular-nums; }
.legend .lg-pct { font-weight: 700; min-width: 56px; text-align: end; font-variant-numeric: tabular-nums; }

/* ---- Stocks ---- */
.stock {
  background: var(--surface);
  border: 1px solid var(--card-border);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow); margin: 16px 0; overflow: hidden;
}
[data-theme="dark"] .stock { background: #1C1C1E; } /* v193: כנ"ל */
.stock-head {
  width: 100%; border: 0; background: none; cursor: pointer; text-align: start;
  font-family: var(--font); padding: 16px 18px;
  display: grid; grid-template-columns: minmax(0, 1fr); gap: 8px 10px; align-items: center; /* v204: עמודה אחת — הזהות (שתי שורות) ומתחתיה שורות המשנה */
  color: var(--on-surface);
}
.stock-head > * { min-width: 0; }
/* v151: כמו אפליקציית המניות של אפל — סימבול + תגית בשורה 1, שם החברה בשורה 2 (שורה אחת,
   נקטע בסופו). שם ארוך כבר לא דוחף את המחיר מחוץ לכרטיס. */
.stock-id { display: grid; grid-template-columns: auto minmax(0, 1fr); grid-template-rows: auto auto; column-gap: 12px; row-gap: 3px; align-items: center; min-width: 0; } /* v204: לוגו | שתי שורות עצמאיות (.sh-r1 / .sh-r2) */
.stock-id .stock-logo { grid-row: 1 / 3; grid-column: 1; }
.stock-sym { grid-row: 1; grid-column: 2; font-weight: 800; font-size: 18.5px; letter-spacing: .3px; line-height: 1.15; }
.stock-id .src-tag { grid-row: 1; grid-column: 3; justify-self: start; margin-inline-start: 0; font-size: 11px; padding: 1px 6px; } /* v203: תגית המקור בכרטיס מעט קטנה יותר */
.stock-name { grid-row: 2; grid-column: 2 / 4; color: var(--on-surface-var); font-size: 13.5px; line-height: 1.2; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; justify-self: start; max-width: 100%; unicode-bidi: plaintext; }
.stock-id .stock-name { contain: inline-size; justify-self: stretch; } /* v202: שם ארוך נקטע ב־… באותו מקום ולא מרחיב את העמודה */
.stock-price { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -.3px; }
/* v166: עמודת המחיר — המחיר ומתחתיו תג טרום/אחרי־מסחר/לילי (כמו Robinhood) */
.stock-pcol { display: flex; flex-direction: column; align-items: flex-end; gap: 5px; }
.stock-ext:empty { display: none; }
/* שורות המשנה: שתי עמודות — אחוזים בצד ההתחלה, סכומים בצד הסוף, שורה לכל זוג */
/* 20/10/2026 (בקשת המשתמש): הצדדים התחלפו — השווי והרווח בכסף בצד של הלוגו (התחלה), השינוי היומי ו"מהקנייה" בצד של
   המחיר (סוף), מתחת למחיר. אותו סדר ב־DOM (היום, שווי, מהקנייה %, מהקנייה בכסף), רק המקום ברשת; גם בכרטיס המעקב */
.stock-sub { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 3px 12px; font-size: 14px; color: var(--on-surface-var); }
.stock-sub > .day-chg { grid-area: 1 / 2; justify-self: end; text-align: end; }
.stock-sub > .sub-val { grid-area: 1 / 1; }
.stock-sub > .buy-chg { grid-area: 2 / 2; justify-self: end; }
.stock-sub > .buy-amt { grid-area: 2 / 1; }
.stock-sub .sub-val, .stock-sub .buy-amt { justify-self: start; font-variant-numeric: tabular-nums; }
.stock-sub .buy-chg, .stock-sub .buy-amt { font-weight: 600; font-size: 13.5px; font-variant-numeric: tabular-nums; }
.stock-sub .buy-chg:not(.pos):not(.neg), .stock-sub .buy-amt:not(.pos):not(.neg) { color: var(--on-surface-var); }
.day-chg { font-weight: 700; font-variant-numeric: tabular-nums; }
.day-chg .day-amt { font-weight: 600; font-size: 13.5px; margin-inline-start: 4px; white-space: nowrap; } /* v208: השינוי היומי בכסף ליד האחוז */
.day-chg.pos, .pos { color: var(--gain); }
.day-chg.neg, .neg { color: var(--loss); }
.chev { color: var(--on-surface-var); transition: transform .6s var(--ease-spring, ease); font-size: 17px; }
.stock.open .chev { transform: rotate(180deg); }

/* v193: פתיחה/סגירה של הכרטיס באנימציית גובה חלקה (grid 0fr→1fr) במקום קפיצת display; התוכן בעוטף יחיד .stock-body-in */
/* v271: תנועה לפי ת־עיצוב — עקומת "קפיץ" אחת (--ease-ios) לגובה, לכותרת ולחץ; התוכן נכנס בדהייה+החלקה קלה
   ויוצא בדהייה מהירה לפני שהגובה נסגר. אין ציור גרף ואין מדידות בזמן האנימציה (app.js — toggleStock/fitCardToScreen) */
.stock { --ease-ios: cubic-bezier(.32, .72, 0, 1); --ease-spring: linear(0.000, 0.062, 0.192, 0.338, 0.477, 0.596, 0.694, 0.771, 0.831, 0.877, 0.911, 0.937, 0.955, 0.969, 0.979, 0.986, 0.991, 0.994, 0.997, 0.999, 1.000); } /* v272: אותו קפיץ כמו cardEase ב־app.js */
.stock-body { display: none; grid-template-rows: 1fr; }
.stock.open .stock-body, .stock.anim .stock-body { display: grid; }
.stock-body > * { min-height: 0; overflow: hidden; }
/* v272: בזמן האנימציה הגובה נקבע ב־JS בכל פריים (toggleStock) — התוכן בגובהו הטבעי ונחשף/נחתך מלמטה */
.stock.anim .stock-body { overflow: hidden; }
.stock.anim .stock-body > * { overflow: visible; align-self: start; min-width: 0; max-width: 100%; }   /* v325: עם overflow:visible רוחב המינימום של פריט grid = רוחב התוכן — ב־320px הגוף היה 371px בזמן האנימציה והתכווץ ל־286 בסופה (קפיצה אופקית של כל התוכן, CLS 0.06; נמדד ב־QA) */
.stock.measure .stock-body { height: auto !important; }
.stock-body-in { border-top: 1px solid var(--separator); padding: 16px 18px 18px; opacity: 0; transform: translateY(-10px) scale(.985); transform-origin: 50% 0;
  transition: opacity .16s ease, transform .3s var(--ease-ios); }
.stock.open .stock-body-in { opacity: 1; transform: none; transition: opacity .36s ease .08s, transform .6s var(--ease-spring); }
.stock.anim .stock-body-in { will-change: opacity, transform; }
/* v273: ערך שהגיע לאריח ריק / שורת התשואה בפעם הראשונה — דהייה רכה במקום הופעה בבת אחת */
.kv-in { animation: kvIn .42s ease both; }
@keyframes kvIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .kv-in { animation: none; } }
.stock.measure .stock-body, .stock.measure .stock-body-in, .stock.measure .chev, .stock.measure .stock-head { transition: none !important; }
@media (prefers-reduced-motion: reduce) { .stock-body, .stock-body-in, .stock-head, .stock .chev { transition: none !important; } .stock-body-in { transform: none; } }
.stock-head { transition: background-color .18s ease, padding .6s var(--ease-spring), gap .6s var(--ease-spring); } /* v272: באותה עקומה ומשך כמו הגובה (CARD_ANIM_MS) */
.stock-head:active { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
/* v193: כניסה מדורגת של כרטיסי המניות כשהרשימה נבנית לראשונה */
.stock.enter { animation: cardIn .34s cubic-bezier(.2, .9, .25, 1) both; animation-delay: calc(var(--i, 0) * 32ms); }
@keyframes cardIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .stock.enter { animation: none; } }
/* v246: סידור בגרירה — הכרטיס מורם (צל, הגדלה קלה) ומשאיר מקום מקווקו; בלי בחירת טקסט/תפריט לחיצה ארוכה */
.stock-head { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; }
.stock.dragging { transform: scale(1.03); box-shadow: 0 18px 44px rgba(0, 0, 0, .28); opacity: .97; transition: transform .18s ease, box-shadow .18s ease; pointer-events: none; }
.stock-ph { margin: 16px 0; border: 2px dashed var(--outline); border-radius: var(--radius-xl); box-sizing: border-box; }
html.drag-active, html.drag-active body { -webkit-user-select: none; user-select: none; overscroll-behavior: none; }
/* הדף של הטאב נשאר עם transform מאנימציית הכניסה — אז position:fixed נמדד ממנו ולא מהמסך; בזמן גרירה בלי transform */
html.drag-active .tabpage { transform: none !important; }   /* v324: בלי animation:none — ביטול האנימציה והחזרתה אחרי הגרירה הריצו את tabIn מחדש (העמוד הבהב אחרי לחיצה ארוכה); !important על transform גובר גם על אנימציה רצה */
@media (prefers-reduced-motion: reduce) { .stock.dragging { transform: none; transition: none; } }
/* v278 (בקשת המשתמש): לחיצה ארוכה ושחרור בלי תזוזה → עריכה/מחיקה. הכרטיס נשאר מורם; כפתורים עגולים כמו בהדר — עט ירוק, X אדום,
   צפים ממש מעל הכרטיס/הטאב בצד השמאלי (showItemActions) */
.stock { position: relative; }
.stock.holding { transform: scale(1.02); box-shadow: 0 14px 36px rgba(0, 0, 0, .22); transition: transform .22s cubic-bezier(.3, 1.3, .5, 1), box-shadow .22s ease; z-index: 3; }
.item-acts { position: absolute; top: 50%; inset-inline-end: 12px; z-index: 5; display: flex; gap: 10px; padding: 6px;
  border-radius: var(--pill); background: var(--surface); box-shadow: 0 6px 20px rgba(0, 0, 0, .18), 0 0 0 1px var(--card-border);
  transform: translateY(-50%); animation: actsIn .24s cubic-bezier(.3, 1.3, .5, 1) both; }
[data-theme="dark"] .item-acts { background: #2C2C2E; }
.item-acts.floating { position: fixed; top: 0; inset-inline-end: auto; transform: none; animation-name: actsInFloat; z-index: 60; }
.item-acts.out { animation: actsOut .16s ease both; }
.item-acts .icon-btn { width: 44px; height: 44px; }
.item-acts .act-del .ic { stroke: var(--loss); }
.item-acts .act-del { background: color-mix(in srgb, var(--loss) 12%, var(--surface-2)); }
@keyframes actsIn { from { opacity: 0; transform: translateY(-50%) scale(.6); } to { opacity: 1; transform: translateY(-50%) scale(1); } }
@keyframes actsInFloat { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: scale(1); } }
@keyframes actsOut { to { opacity: 0; transform: translateY(-50%) scale(.7); } }
.item-acts.floating.out { animation-name: actsOutFloat; }
@keyframes actsOutFloat { to { opacity: 0; transform: scale(.7); } }
/* טאב רשימה: מורם בזמן גרירה/עריכה, מקום ריק מקווקו כמו בכרטיסים */
.wl-tab.dragging { transform: scale(1.06); box-shadow: 0 12px 30px rgba(0, 0, 0, .26); pointer-events: none; transition: transform .18s ease, box-shadow .18s ease; }
.wl-tab.holding { transform: scale(1.06); box-shadow: 0 10px 26px rgba(0, 0, 0, .2); transition: transform .22s cubic-bezier(.3, 1.3, .5, 1), box-shadow .22s ease; }
.wl-tab-ph { flex: none; border: 2px dashed var(--outline); border-radius: var(--pill); box-sizing: border-box; }
@media (prefers-reduced-motion: reduce) { .stock.holding, .wl-tab.holding, .wl-tab.dragging { transform: none; transition: none; } .item-acts { animation: none; } }
.kv-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin: 4px 0 14px; }
/* v234: נתוני הכרטיס לפי ת־עיצוב/Google (בקשת המשתמש, תצוגה מקדימה "ה׳" + גובה/אחוזים של "ה2"): בלי בועות ובלי מסגרת —
   קו אופקי דק אחד בין השורות, קווים אנכיים קצרים בין העמודות, תווית שקטה / ערך בולט / אחוז קטן ורגיל */
.kv { position: relative; background: none; border-radius: 0; padding: 7px 4px 8px; min-width: 0; min-height: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; text-align: center; }
.kv::before { content: ''; position: absolute; inset-inline-start: 0; top: 22%; bottom: 22%; width: .5px; background: var(--outline); }
.kv:nth-child(3n+1)::before { display: none; }
.kv:nth-child(n+4) { border-top: .5px solid var(--outline); }
.kv .k { font-size: 11.5px; font-weight: 400; color: var(--on-surface-var); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.kv .v { font-size: clamp(14px, 3.9vw, 16px); font-weight: 600; letter-spacing: -.2px; font-variant-numeric: tabular-nums; white-space: nowrap; max-width: 100%; }
.kv .v2 { font-size: 11px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--on-surface-var); white-space: nowrap; }
.kv .v2.pos { color: var(--gain); } .kv .v2.neg { color: var(--loss); }
/* v236: כרטיס מניה פתוח קומפקטי — נכנס במסך אחד בלי גלילה (בקשת המשתמש): אותו מבנה ועיצוב, פחות רווחים,
   גרף 170 במקום 210, טווחים ושורת התשואה קטנים יותר. כפתור "מדידה", ההסבר וה־legend הוסרו (app.js) */
.stock.open .stock-head { padding: 12px 16px 10px; gap: 6px 10px; }
/* 28/10/2026: בכרטיס פתוח שורת "מהקנייה" כפולה לאריח הרווח — מוסתרת, והגובה עובר לגרף */
.stock.open .stock-sub > .buy-chg, .stock.open .stock-sub > .buy-amt { display: none; }
.stock-body-in { padding: 4px 16px 8px; }   /* 28/10/2026: הגרף גבוה יותר — פחות ריווח סביב הנתונים */
.stock-body .kv-grid { margin: 0 0 6px; }
.stock-body .kv { padding: 3px 4px 4px; gap: 1px; }
.stock-body .chart-wrap canvas { height: 170px; }
.stock-body .chip-row.stock-chips { margin-top: 6px; padding-bottom: 0; }
.stock-chips .range-btn { padding-block: 6px; font-size: 13px; }
.stock-body .pf-range-summary { margin: 6px 0 0; font-size: 14px; gap: 6px; }
.stock-body .pf-range-summary .rs-val { font-size: 18px; }
.stock-body .pf-range-summary .rs-range { font-size: 12.5px; }
.pf-range-summary .rs-sym { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; margin-inline-end: 4px; }
.pf-range-summary .rs-sym .dot { width: 12px; height: 12px; border-radius: var(--pill); flex: none; align-self: center; }
.stock-body .chart-hint { margin-top: 4px; font-size: 12.5px; }
/* v237: שורה תחתונה — תשואה (מתכווצת ונשברת לשורה שנייה אם צריך) + "ערוך" צמוד לקצה השמאלי, בלי חפיפה */
.stock-foot { display: flex; align-items: center; gap: 6px; margin: 0 0 4px; min-height: 32px; } /* v275: גובה שמור — במניית IBKR (בלי "ערוך") שורת התשואה מופיעה רק אחרי הציור, והכרטיס קפץ בסוף הפתיחה */
.stock-foot .pf-range-summary { flex: 1 1 auto; min-width: 0; margin: 0; flex-wrap: nowrap; align-items: center; gap: 6px; white-space: nowrap; }
.stock-foot .pf-range-summary > span { flex: none; }
/* רק התווית "תשואת המניה" מתקצרת כשאין מקום — הסמן, האחוז והטווח תמיד שלמים */
.stock-foot .pf-range-summary > .rs-lbl { flex: 0 10 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stock-foot .pf-range-summary > .rs-range { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.stock-foot .rs-sym { margin-inline-end: 0; font-size: 14px; gap: 5px; }
.stock-foot .rs-sym .dot { width: 10px; height: 10px; }
.stock-foot .rs-lbl { font-size: 13.5px; color: var(--on-surface-var); }
.stock-body .stock-foot .pf-range-summary .rs-val { font-size: 17px; }
.stock-body .stock-foot .pf-range-summary .rs-range { font-size: 12px; }
.stock-foot .pf-range-summary.no-sym .rs-sym { font-size: 0; gap: 0; }
.stock-foot .pf-range-summary.no-lbl > .rs-lbl, .stock-foot .pf-range-summary.no-rng > .rs-range { display: none; }
.stock-body .edit-actions.stock-edit { flex: none; margin: 0; margin-inline-start: auto; padding: 0; }
.stock-body .edit-actions .chip-btn { padding-block: 6px; font-size: 13.5px; white-space: nowrap; }
.stock-foot .stock-edit .chip-btn { padding: 5px 12px; font-size: 13px; gap: 5px; }
.stock-foot .stock-edit { display: flex; gap: 5px; }
.stock-foot .stock-edit .chip-btn:not(.danger) { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 38%, var(--card-border)); }   /* 28/10/2026: כל הכפתורים בירוק המערכת */
.stock-foot .stock-edit .chip-btn:not(.danger) { block-size: 32px; padding-block: 0; font-weight: 700; border-width: 1.5px; background: color-mix(in srgb, var(--primary) 10%, transparent); position: relative; }
.stock-foot .stock-edit .chip-btn:not(.danger)::after { content: ''; position: absolute; inset: -5px -2px; }   /* יעד לחיצה גדול מהמראה */
.stock-foot .stock-edit .stock-ico-btn:not(.danger) { display: flex; inline-size: 34px; padding: 0; gap: 0; justify-content: center; align-items: center; flex: none; }   /* סמל בלבד, קטן ומודגש, ממורכז */
.stock-foot .stock-ico-btn svg { display: block; margin: 0; }
.stock-foot .stock-edit .chip-btn svg * { stroke-width: 2.4; }
html[dir="ltr"] .stock-foot .kc-open-btn { order: -1; }   /* באנגלית (כיוון הפוך) — עדיין בקצה השמאלי */
.stock-foot .stock-ico-btn svg, .stock-foot .an-open-btn svg { width: 16px; height: 16px; flex: none; }
.stock-foot .an-open-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0 11px; gap: 5px; flex: none; white-space: nowrap; font-size: 13px; line-height: 1; }   /* סמל + מילה, באותו גובה כמו כפתורי הסמל; מרכוז אנכי מפורש */
/* תשואה ענקית (מעל 10,000%) מוצגת מקוצרת (‎fmtPct‎ — 12.3K%) — הכפתורים נשארים בגודל נוח ולא נדרסים */
/* 28/10/2026: התראות המחיר של המניה בכרטיס — רשימה מקובצת לפי ת־עיצוב (כותרת קטנה, שורות עם קו מפריד, חץ) */
.st-al { margin: 4px 14px 12px; }
.st-al[hidden] { display: none; }
.st-al-h { display: flex; align-items: center; justify-content: space-between; padding: 0 4px 6px; }
.st-al-t { font-size: 13px; font-weight: 600; color: var(--on-surface-var); }
.st-al-add { inline-size: 28px; block-size: 28px; display: grid; place-items: center; border: 0; border-radius: var(--radius-xl); background: var(--primary-container); color: var(--on-primary-container, var(--primary)); cursor: pointer; padding: 0; }
.st-al-add svg { inline-size: 16px; block-size: 16px; }
.st-al-add:active { transform: scale(.92); }
.st-al-list { border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.st-al-row { inline-size: 100%; display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 0; background: none; color: var(--on-surface); font: inherit; text-align: start; cursor: pointer; }
.st-al-row + .st-al-row { border-block-start: .5px solid var(--separator); }
.st-al-row:active { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.st-al-ic { inline-size: 32px; block-size: 32px; flex: none; display: grid; place-items: center; border-radius: var(--radius-xs); background: var(--primary); color: #fff; } /* כמו סמלי התפריט (.row-link-ic): לבן על ירוק המערכת */
.st-al-ic svg { inline-size: 18px; block-size: 18px; }
.st-al-tx { flex: 1; min-inline-size: 0; display: flex; flex-direction: column; gap: 1px; }
.st-al-tx b { font-size: 16px; font-weight: 600; unicode-bidi: isolate; text-align: start; font-variant-numeric: tabular-nums; }
.st-al-tx small { font-size: 12.5px; color: var(--on-surface-var); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.st-al-st { font-size: 12px; color: var(--on-surface-var); flex: none; }
.st-al-chev { flex: none; color: var(--on-surface-var); opacity: .6; }
.st-al-chev svg { inline-size: 14px; block-size: 14px; display: block; }
[dir="ltr"] .st-al-chev svg { transform: scaleX(-1); }
.st-al-row.done .st-al-ic { background: var(--on-surface-var); opacity: .55; }
.st-al-row.done .st-al-tx b { color: var(--on-surface-var); }

.chart-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.ranges { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; flex: 1; }
.range-btn {
  flex: none; border: 1px solid var(--outline); background: var(--surface);
  border-radius: var(--pill); padding: 8px 15px; font-size: 14px; font-weight: 600;
  font-family: var(--font); color: var(--on-surface-var); cursor: pointer;
}
.range-btn.active { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.measure-btn {
  flex: none; border: 1px dashed var(--primary); background: var(--primary-container);
  color: var(--on-primary-container); border-radius: var(--pill); padding: 8px 15px;
  font-size: 14px; font-weight: 700; font-family: var(--font); cursor: pointer;
}
.measure-btn.on { background: var(--primary); color: var(--on-primary); border-style: solid; }

.measure-chip {
  margin: 0 0 10px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: var(--secondary-container); font-size: 15px; font-weight: 600;
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
}
.measure-chip.hidden { display: none; }
.measure-chip button { border: 0; background: none; cursor: pointer; font-size: 17px; color: var(--on-surface-var); }

.chart-wrap { position: relative; }
/* 27/10/2026: לחצן ההגדלה בפינה העליונה של הגרף בכרטיס המניה → גרף הנרות. עיגול זכוכית קטן, כמו בפקדי המדיה של iOS.
   שמאל פיזי בכוונה: הקנבס מצייר את ציר המחיר תמיד מימין (drawStockChart — padR), בכל שפה */
.chart-wrap canvas { width: 100%; height: 210px; display: block; touch-action: manipulation; }
.chart-wrap canvas.measuring { touch-action: none; cursor: crosshair; }
/* v264: נגיעה בגרף המניה — קו אנכי + נקודה + בועה (מחיר ותאריך); שתי אצבעות — רצועה + תשואה. גלילה אנכית נשארת */
.stock-body .chart-wrap canvas, #pfChart { touch-action: pan-y; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; }
.sc-ov { position: absolute; inset: 0; pointer-events: none; z-index: 5; animation: scIn .16s ease both; }
.sc-ov.hidden { display: none; }
.sc-ov > * { position: absolute; top: 0; left: 0; }
/* v265: קו אנכי מנוקד (תואם ל־Google) */
.sc-line { width: 4px; margin-left: -2px; background: radial-gradient(circle, var(--on-surface-var) 1.2px, transparent 1.6px) 0 0 / 4px 6px repeat-y; opacity: .75; }
.sc-l2, .sc-d2, .sc-band { display: none; }
.sc-ov.m .sc-l2, .sc-ov.m .sc-d2, .sc-ov.m .sc-band { display: block; }
.sc-band { background: color-mix(in srgb, var(--gain) 13%, transparent); border-radius: 4px; }
.sc-ov.neg .sc-band { background: color-mix(in srgb, var(--loss) 13%, transparent); }
.sc-dot { width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--gain); border: 2.5px solid #fff; box-shadow: 0 0 0 6px color-mix(in srgb, var(--gain) 22%, transparent), 0 1px 4px rgba(0,0,0,.25); box-sizing: border-box; }
.sc-ov.neg .sc-dot { background: var(--loss); box-shadow: 0 0 0 6px color-mix(in srgb, var(--loss) 22%, transparent), 0 1px 4px rgba(0,0,0,.25); }
/* v265: הבועה = אותו עיצוב כמו בגרף הביצועים (.pf-tip), בפינה השמאלית העליונה מעל הגרף */
.pf-tip.sc-tip { max-width: none; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sc-tip .sc-px { font-weight: 700; color: var(--on-surface); }
.sc-chg.pos { color: var(--gain); }
.sc-chg.neg { color: var(--loss); }
.sc-chg { font-weight: 600; }
.sc-pct { font-weight: 700; }
.sc-pct.pos { color: var(--gain); }
.sc-pct.neg { color: var(--loss); }
@keyframes scIn { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .sc-ov { animation: none; } }
/* מצב בחירת תאריך מהגרף — גוון מודגש שמסמן "אפשר לבחור" */
.chart-wrap.picking canvas { filter: saturate(1.35) brightness(1.04); }
.chart-wrap.picking::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  border-radius: var(--radius-sm);
  border: 2px dashed var(--primary);
  background: color-mix(in srgb, var(--primary) 7%, transparent);
}
/* בועת הסבר מעל הגרף במצב בחירה */
.pf-pick-bubble {
  margin: 0 0 8px; padding: 10px 14px; border-radius: 14px;
  background: var(--primary-container); color: var(--on-primary-container);
  font-size: 15.5px; font-weight: 700; text-align: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.12);
}
.pf-pick-bubble.hidden { display: none; }
/* v266: סימון בגרף — "המשך" (ראשי, פעיל אחרי שנבחרה נקודה) ו"ביטול" מתחת לגרף */
.pf-pick-bar { display: flex; gap: 10px; margin: 10px 0 4px; }
.pf-pick-bar.hidden { display: none; }
.pf-pick-bar .btn { flex: 1; }
.pf-pick-bar .btn:disabled { opacity: .45; cursor: default; }
.pf-pick-bar .chip-btn { flex: none; min-width: 96px; justify-content: center; }
/* שורת תשואת הטווח מתחת לגרף */
.pf-range-summary {
  margin: 8px 0 2px; font-size: 16px; color: var(--on-surface);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.pf-range-summary .rs-val { font-size: 22px; font-weight: 800; }
.pf-range-summary .rs-val.pos { color: var(--gain, #1B7A3D); }
.pf-range-summary .rs-val.neg { color: var(--loss, #C62828); }
.pf-range-summary .rs-range { font-size: 13.5px; color: var(--on-surface-var); }
/* כפתורי מדדי השוואה — פילס נקיים לפי ת־עיצוב */
.pf-bench-row { display:flex; gap:8px; justify-content:center; flex-wrap:wrap; margin:2px 0 4px; }
.pf-bench-toggle {
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px 7px 12px; border-radius: var(--pill); cursor:pointer;
  border:1px solid var(--outline, #E3E7E4); background:var(--surface, #fff);
  font-size:13.5px; font-weight:600; color:var(--on-surface-var, #6B756F);
  transition:transform .15s ease, opacity .15s ease, background .15s ease, color .15s ease, border-color .15s ease;
}
.pf-bench-toggle:active { transform:scale(.96); }
.pf-bench-dot { width:10px; height:10px; border-radius:50%; flex:none; }
.pf-bench-check { font-size:12px; font-weight:700; color:var(--primary, #30D158); min-width:14px; text-align:center; }
.pf-bench-toggle.on { color:var(--on-surface, #1A1C1A); border-color:var(--primary, #30D158); background:color-mix(in srgb, var(--primary, #30D158) 8%, var(--surface, #fff)); }
.pf-bench-toggle:not(.on) { opacity:.55; }
.pf-bench-toggle:not(.on) .pf-bench-check { color:transparent; }

/* גיליון בחירת "תשואה מתאריך" */
.pf-sheet-veil {
  position: fixed; inset: 0; z-index: 60; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.pf-sheet-veil.hidden { display: none; }
.pf-sheet {
  width: 100%; max-width: 480px; background: var(--surface); color: var(--on-surface);
  border-radius: 20px 20px 0 0; padding: 12px 18px 26px;
  box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
.pf-sheet h3 { margin: 6px 0 12px; font-size: 17px; text-align: center; }
/* v222: הגיליון אטום גם בכהה (--surface שם שקוף־למחצה — התוכן מאחור נראה דרכו) */
[data-theme="dark"] .pf-sheet { background: #1C1C1E; }
.pf-sheet .sheet-btn {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px; margin: 0 0 10px; font-size: 16.5px; font-weight: 600;
  border: 1px solid var(--outline); border-radius: 14px;
  background: var(--surface-container, var(--surface)); color: var(--on-surface);
  cursor: pointer;
}
.pf-sheet .sheet-btn:active { background: var(--secondary-container); }
.pf-sheet input[type="date"] {
  width: 100%; font: inherit; font-size: 17px; padding: 12px;
  border-radius: var(--radius-xs); border: 1px solid var(--outline);
  background: var(--surface); color: var(--on-surface); margin: 0 0 12px;
}
.pf-sheet .sheet-row { display: flex; gap: 10px; }
.pf-sheet .sheet-row .btn { flex: 1; }
/* כלי גרף הביצועים */
.pf-tools { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 2px 0 8px; }
.pf-from-lbl { display: flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--on-surface-var); }
.pf-from-lbl input[type="date"] { font: inherit; padding: 6px 8px; border-radius: 10px; border: 1px solid var(--outline); background: var(--surface); color: var(--on-surface); }
.pf-tip { position: absolute; z-index: 5; background: var(--surface); border: 1px solid var(--outline); border-radius: var(--radius-xs); padding: 8px 10px; font-size: 13px; box-shadow: 0 4px 14px rgba(0,0,0,.14); pointer-events: none; max-width: 220px; }
.pf-tip.hidden { display: none; }
.pf-tip .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-inline-end: 5px; }
.chart-loading {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--on-surface-var); font-size: 15px; background: var(--veil);
  border-radius: var(--radius-sm);
}
/* v273: נכנס ויוצא בדהייה (לא display:none) — בלי הבהוב כשהנתונים מגיעים */
.chart-loading.hidden { opacity: 0; visibility: hidden; pointer-events: none; transition: opacity .3s ease, visibility 0s linear .3s; }
.chart-hint { font-size: 13px; color: var(--on-surface-var); margin-top: 8px; }

/* ---- Rows (deposits / pension) ---- */
.rows { list-style: none; margin: 0; padding: 0; }
.rows li {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--separator); font-size: 16px;
}
.rows li > * { min-width: 0; }
/* v155: הטקסט מתכווץ ונשבר, הסכום והכפתורים לא — אחרת תיאור ארוך דוחף את הסכום מחוץ למסך */
.rows li > :first-child { flex: 1 1 auto; overflow-wrap: anywhere; }
.rows li > :not(:first-child) { flex: none; }
.rows li:last-child { border-bottom: 0; }
.rows .r-date { color: var(--on-surface-var); font-variant-numeric: tabular-nums; font-size: 14px; }
.rows .r-amt { font-weight: 700; font-variant-numeric: tabular-nums; direction: ltr; unicode-bidi: isolate; display: inline-block; } /* v151: הסימן תמיד לפני המספר */
.rows .r-amt.out { color: var(--on-surface); }
.rows .r-amt.in { color: var(--on-surface-var); } /* v151: משיכה — אפור. ירוק שמור לרווח */
.rows .r-amt.zero { color: var(--on-surface-var); font-weight: 400; }
.rows .r-note { font-size: 13.5px; color: var(--on-surface-var); }
.side-chip { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 1px 9px; border-radius: var(--pill); }
.side-chip.buy { color: var(--gain); background: color-mix(in srgb, var(--gain) 14%, transparent); }
.side-chip.sell { color: var(--loss); background: color-mix(in srgb, var(--loss) 14%, transparent); }
.pension-total { font-size: 28px; font-weight: 800; letter-spacing: -.4px; font-variant-numeric: tabular-nums; }

/* ---- Notes ---- */
details.note summary { cursor: pointer; font-weight: 700; font-size: 17px; list-style: none; }
details.note summary::-webkit-details-marker { display: none; }
details.note summary::before { content: "◀ "; font-size: 13px; color: var(--primary); }
details.note[open] summary::before { content: "▼ "; }
.note-body { font-size: 15px; color: var(--on-surface-var); margin-top: 10px; }
.note-body p { margin: 8px 0; }
.fine { font-size: 13.5px; color: var(--on-surface-var); padding: 0 16px; max-width: 720px; margin: 16px auto 0; }
footer.fine { text-align: center; }

.hidden { display: none !important; }

.btn-row { display: flex; gap: 10px; margin-top: 12px; flex-wrap: wrap; }
.btn {
  padding: 13px 22px; font-size: 17px; font-weight: 700; border: 0; border-radius: var(--radius-sm);
  background: var(--primary); color: var(--on-primary); cursor: pointer;
  font-family: var(--font);
}
.btn { transition: transform .15s ease, background-color .2s ease; }
.btn:active { background: var(--primary-dark); transform: scale(.97); }
.link-btn {
  background: none; border: 0; color: var(--link); font-size: 15px;
  text-decoration: underline; cursor: pointer; padding: 8px 4px; font-family: var(--font);
}

/* ---- Section heads + edit mode ---- */
.section-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 8px 0 12px; }
.section-head h2 { margin: 0; font-size: 20px; }
.chip-btn {
  flex: none; border: 1px solid var(--outline); background: var(--surface);
  border-radius: var(--pill); padding: 8px 17px; font-size: 15px; font-weight: 700;
  font-family: var(--font); color: var(--on-surface-var); cursor: pointer;
}
.chip-btn, .range-btn, .mini-btn { transition: transform .15s ease, background-color .2s ease, color .2s ease, border-color .2s ease; }
.chip-btn:active, .range-btn:active, .mini-btn:active { transform: scale(.95); }
.chip-btn.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.chip-btn.danger { color: var(--loss); border-color: var(--loss); }
/* אייקון inline נקי בצבע המותג (מחליף אימוג'י צבעוני) */
.ic { width: 1.15em; height: 1.15em; vertical-align: -0.22em; margin-inline-end: 0.35em; flex: none; }
.edit-actions { display: flex; gap: 12px; align-items: center; padding: 8px 18px 14px; }
.row-actions { display: flex; gap: 8px; flex: none; }
.mini-btn {
  border: 1px solid var(--outline); background: var(--surface); border-radius: var(--radius-xs);
  padding: 6px 12px; font-size: 13.5px; font-weight: 700; font-family: var(--font);
  color: var(--primary); cursor: pointer;
}
.mini-btn.danger { color: var(--loss); }
.rows li.form-li { display: block; }

/* ---- Forms ---- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 12px; }
.form-grid label { display: flex; flex-direction: column; gap: 6px; font-size: 14px; font-weight: 600; color: var(--on-surface-var); }
.form-grid input, .form-grid select {
  font-family: var(--font); font-size: 17px; padding: 11px 12px;
  border: 1px solid var(--outline); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--on-surface); width: 100%; box-sizing: border-box;
}
.form-grid input:focus, .form-grid select:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.form-err { color: var(--loss); font-size: 14.5px; font-weight: 600; margin: 0 0 10px; }
.add-card {
  border: 2px dashed var(--outline); background: none; box-shadow: none;
  color: var(--primary); font-size: 17px; font-weight: 700; font-family: var(--font);
  padding: 16px; cursor: pointer; width: 100%;
}
.add-plus { font-size: 20px; }
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 10px; }
#pfChips { margin-top: 12px; }
/* v107: טווחי גרף המניה מתחת לגרף — כמו בגרף הראשי */
.stock-body .chip-row.stock-chips { margin-top: 12px; }
/* v228: 1D 5D 1M 3M YTD 1Y — שישה כפתורים ברוחב שווה בשורה אחת (בלי גלילה, כדי שתפריט השנה לא ייחתך);
   אותו עיצוב כפתור, רק ריפוד צדדי קטן יותר. תפריט השנה = בועת הסינון, צמוד לקצה של הכפתור */
.stock-body .chip-row.stock-chips { overflow: visible; gap: 6px; }
.stock-chips > .range-btn, .stock-chips > .range-year { flex: 1 1 0; min-width: 0; }
.stock-chips .range-btn { padding-inline: 4px; text-align: center; white-space: nowrap; }
.stock-chips .range-year .range-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 3px; }
.range-year .range-btn.cal .ic { width: 17px; height: 17px; margin: 0; stroke: currentColor; vertical-align: -3px; }
.range-lbl { display: inline-flex; align-items: center; }
.range-year .range-btn.long { font-size: 12.5px; gap: 2px; letter-spacing: -.2px; }
.range-pop-sep { height: 1px; margin: 4px 10px; background: var(--card-border); }
.range-year .range-pop .src-opt .ic { width: 18px; height: 18px; margin-inline-end: 8px; vertical-align: -3px; }
.chart-hint.pick-hint { color: var(--primary); font-weight: 700; }
.range-caret { font-size: 10px; line-height: 1; opacity: .75; transition: transform .2s ease; }
.range-year.open .range-caret { transform: rotate(180deg); }
/* ספציפיות גבוהה — .src-pop / .menu-drop מוגדרים מאוחר יותר בקובץ (top + bottom יחד = בועה מכווצת) */
.range-year .src-pop.range-pop { top: auto; bottom: calc(100% + 8px); width: auto; min-width: 150px; gap: 2px; transform-origin: bottom; }
.range-year .range-pop:not(.hidden) { animation-name: menuUpIn; }
@keyframes menuUpIn { from { opacity: 0; transform: translateY(6px) scale(.97); } to { opacity: 1; transform: none; } }
.range-year .range-pop .src-opt { font-variant-numeric: tabular-nums; padding: 11px 12px; }
@media (prefers-reduced-motion: reduce) { .range-caret { transition: none; } }
.fund-editor { margin-bottom: 14px; }
.fund-editor > b { display: block; margin-bottom: 8px; font-size: 15.5px; }
.danger-card { border: 1px solid var(--loss); }
.btn.danger-btn { background: var(--loss); }

@media (min-width: 560px) {
  .stat-value { font-size: 28px; }
  .ov-stats .stat-value { font-size: 22px; }
}

/* מסכים צרים: מספרים גדולים לא נשברים ולא נחתכים */
@media (max-width: 400px) {
  .stat-value { font-size: 21px; }
  .cards-3 .card { padding: 12px 6px; }
  .ov-stats .stat-value { font-size: 18px; }
  .cards-3.ov-stats { padding: 12px 4px; }
}

/* ---- Toast — קפסולת זכוכית ---- */
.toast {
  position: fixed; bottom: 76px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: rgba(30, 32, 31, .82); color: #fff; padding: 12px 22px; border-radius: var(--pill);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 8px 24px rgba(0, 0, 0, .3);
  font-size: 15.5px; font-weight: 600; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 99; max-width: 90vw; text-align: center;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ---- v297: חלון אישור/הודעה שלנו (במקום confirm/alert של הדפדפן) — אותה קפסולת זכוכית של ה־Toast,
   בגודל התוכן, בלי כותרת. כפתורי גלולה: ביטול שקוף, אישור ירוק, פעולה הרסנית אדומה. ---- */
.dlg-veil {
  position: fixed; inset: 0; z-index: 300; display: grid; place-items: center; padding: 24px 20px;
  background: rgba(0, 0, 0, .32); opacity: 0; transition: opacity .2s ease;
}
.dlg-veil.on { opacity: 1; }
.dlg-veil.off { opacity: 0; transition-duration: .18s; }
.dlg {
  width: fit-content; min-width: min(264px, 100%); max-width: min(340px, 100%);
  padding: 22px 18px 16px; border-radius: var(--radius-xl); text-align: center; color: #fff;
  background: rgba(30, 32, 31, .9);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .18), 0 18px 48px rgba(0, 0, 0, .38);
  transform: scale(.9); transition: transform .32s var(--ease-spring, cubic-bezier(.2, .9, .25, 1));
}
.dlg-veil.on .dlg { transform: none; }
.dlg-veil.off .dlg { transform: scale(.96); }
.dlg-msg { margin: 0 4px 18px; font-size: 16px; font-weight: 600; line-height: 1.45; white-space: pre-line; overflow-wrap: anywhere; max-height: 62vh; overflow-y: auto; }
.dlg.dlg-long { max-width: min(380px, 100%); }
.dlg.dlg-long .dlg-msg { text-align: start; font-size: 15px; font-weight: 500; }
.dlg-btns { display: flex; gap: 10px; }
.dlg-btn {
  flex: 1 1 0; min-width: 104px; min-height: 46px; border: 0; border-radius: var(--pill); padding: 11px 16px;
  font: inherit; font-size: 15.5px; font-weight: 700; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: transform .12s ease, filter .12s ease;
}
.dlg-btn:active { transform: scale(.97); filter: brightness(.92); }
.dlg-cancel { background: rgba(255, 255, 255, .12); color: #fff; }
.dlg-ok { background: var(--primary); color: var(--on-primary); }
.dlg-ok.danger { background: var(--loss); color: #fff; }
.dlg-btn:focus-visible { outline: 2px solid rgba(255, 255, 255, .7); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .dlg, .dlg-veil { transition: none; } }

/* ---- מסך התחברות ---- */
.login-overlay {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(160deg, #1E9E45 0%, #08401A 100%); /* v151: ירוק המותג; 13/10/2026 — נגזר מ־#30D158 של Invest, כמו האדום של Studio והכחול של Academy */
  padding: 20px;
}
.login-card {
  background: #fff; border-radius: var(--radius-xl);
  padding: 38px 30px 30px; max-width: 380px; width: 100%;
  text-align: center; box-shadow: 0 12px 40px rgba(0, 0, 0, .25);
  color: #191C1A;
}
.login-logo { width: 192px; height: 192px; filter: drop-shadow(0 4px 12px rgba(0,0,0,.14)); }
.login-card h1 { margin: 14px 0 4px; font-size: 28px; letter-spacing: -.3px; }
.login-sub { color: #5f6368; font-size: 16px; margin: 0 0 26px; line-height: 1.6; }
.google-btn {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  width: 100%; padding: 14px; margin-bottom: 12px;
  background: #fff; border: 1px solid #dadce0; border-radius: var(--pill);
  font-size: 18px; font-weight: 600; color: #3c4043; cursor: pointer;
  font-family: inherit;
}
.google-btn:active { background: #f6fafe; }
#skipLoginBtn { margin-top: 4px; }
/* 26/10/2026: כניסה עם מייל ושיטות הכניסה (acclink.js) — גיליון מלמטה, מעל מסך הכניסה (1150) ומעל הספרייה והסטודיו */
.mail-btn svg { color: #5f6368; }
.acx-veil {
  position: fixed; inset: 0; z-index: 1200; background: rgba(0,0,0,.45);
  display: flex; align-items: flex-end; justify-content: center;
}
.acx-sheet {
  width: 100%; max-width: 480px; max-height: 92vh; overflow-y: auto;
  background: var(--surface); color: var(--on-surface);
  border-radius: 20px 20px 0 0; padding: 12px 18px calc(22px + env(safe-area-inset-bottom));
  box-shadow: 0 -6px 24px rgba(0,0,0,.25);
}
[data-theme="dark"] .acx-sheet { background: #1C1C1E; }
.acx-sheet h3 { margin: 4px 0 18px; font-size: 19px; font-weight: 700; letter-spacing: -.2px; text-align: center; }
.acx-body { display: flex; flex-direction: column; gap: 12px; }
/* 27/10/2026: שדות מלאים לפי ת־עיצוב (בלי מסגרת), שני השדות בקבוצה אחת עם קו מפריד; צבע המילוי האוטומטי של Chrome מנוטרל */
.acx-in {
  width: 100%; font: inherit; font-size: 17px; padding: 15px 16px; min-height: 52px;
  border-radius: var(--radius-sm); border: 0; box-shadow: none; -webkit-appearance: none; appearance: none;
  background: var(--search-fill); color: var(--on-surface); text-align: start;
}
.acx-in::placeholder { color: var(--search-ph); opacity: 1; }
.acx-in:focus { outline: 2px solid var(--primary); outline-offset: -2px; }
.acx-in:-webkit-autofill, .acx-in:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--on-surface); caret-color: var(--on-surface);
  transition: background-color 600000s 0s, color 600000s 0s;
}
.acx-group { display: flex; flex-direction: column; border-radius: var(--radius-sm); overflow: hidden; background: var(--search-fill); }
.acx-group .acx-in { background: transparent; border-radius: 0; }
.acx-group .acx-in + .acx-in { border-top: .5px solid var(--separator); }
.acx-group .acx-in:focus { outline-offset: -2px; }
.acx-in.acx-code { direction: ltr; text-align: center; font-size: 28px; letter-spacing: .35em; font-variant-numeric: tabular-nums; }
.acx-go { width: 100%; justify-content: center; min-height: 52px; border-radius: var(--pill); margin-top: 2px; }
.acx-links, .acx-add { display: flex; flex-direction: column; align-items: center; gap: 0; margin-top: 2px; }
.acx-add { margin-top: 4px; }
.acx-add .google-btn { margin-bottom: 8px; font-size: 16.5px; }
.acx-link { font-size: 15px; font-weight: 600; text-decoration: none; padding: 10px 12px; }
.acx-link.acx-sub { font-size: 14px; font-weight: 500; color: var(--on-surface-var); }
.acx-err { margin: -2px 0 0; color: var(--loss); font-size: 14px; text-align: center; line-height: 1.45; }
.acx-note { margin: 4px 0 0; color: var(--on-surface-var); font-size: 13.5px; text-align: center; line-height: 1.5; }
.acx-q { text-align: start; font-size: 15px; color: var(--on-surface); margin-bottom: 4px; }
.acx-opt {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px; width: 100%; text-align: start;
  padding: 13px 15px; border: 0; border-radius: var(--radius-sm);
  background: var(--search-fill); color: var(--on-surface); font: inherit; cursor: pointer;
}
.acx-opt b { font-size: 16px; overflow-wrap: anywhere; }
.acx-opt small { color: var(--on-surface-var); font-size: 13.5px; }
.acx-opt.danger b { color: var(--loss); }
.acx-opt:active { background: var(--secondary-container); }
.acx-row { display: flex; align-items: center; gap: 10px; }
.acx-rtx { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.acx-rtx small { color: var(--on-surface-var); font-size: 13.5px; overflow-wrap: anywhere; }
@media (prefers-reduced-motion: no-preference) { .acx-sheet { animation: acxIn .26s cubic-bezier(.2,.8,.2,1); } }
@keyframes acxIn { from { transform: translateY(40px); opacity: .4; } }
.login-overlay.sa { z-index: 1150; }   /* Academy / Studio (shell.js loginGate): מעל הספרייה והסטודיו (900–1101) */
/* 13/10/2026: רקע הכניסה בצבע המערכת של כל אפליקציה — אותה עומק כמו הירוק של Invest */
html[data-app="studio"] .login-overlay { background: linear-gradient(160deg, #C41E2E 0%, #5C0711 100%); }
html[data-app="academy"] .login-overlay { background: linear-gradient(160deg, #1F63C4 0%, #0A2A5C 100%); }

/* ---- מתגי בחירה לפי ת־עיצוב (שפה / ערכת נושא) ---- */
.lang-toggle, .theme-toggle {
  display: flex; background: var(--surface-2);
  border: 1px solid var(--card-border);
  border-radius: var(--pill); padding: 4px; margin-top: 12px;
}
.lang-opt, .theme-opt {
  flex: 1; border: 0; background: transparent; color: var(--on-surface-var);
  font-size: 16px; font-weight: 600; font-family: var(--font);
  padding: 10px 14px; border-radius: var(--pill); cursor: pointer;
  transition: background .2s, color .2s, box-shadow .2s;
}
.lang-opt.active, .theme-opt.active {
  background: var(--seg-active); color: var(--on-surface);
  box-shadow: var(--glass-hi), 0 1px 4px rgba(0, 0, 0, .18); font-weight: 700;
}
/* v293 (בקשת המשתמש): בכרטיס "תצוגה" הבחירה בירוק שלנו — כמו הכפתור הראשי (.btn), אחיד עם שאר הפרויקט */
.display-card .lang-opt.active {
  background: var(--primary); color: var(--on-primary);
  box-shadow: 0 1px 3px color-mix(in srgb, var(--primary) 45%, transparent);
}
.display-card .lang-opt:not(.active):active { color: var(--primary); }
/* v294 (בקשת המשתמש): כרטיס התצוגה מינימליסטי — בלי קווי הפרדה ומסגרות, תוויות קטנות ושקטות, בוררים דקים יותר */
.display-card > h2 { margin-bottom: 6px; }
.display-card .display-row.stack { gap: 7px; padding: 8px 0; }
.display-card .display-row.stack + .display-row.stack { border-top: 0; padding-top: 8px; }
.display-card .display-row.stack .display-label { font-size: 13px; font-weight: 600; letter-spacing: .2px; color: var(--on-surface-var); padding-inline-start: 4px; }
.display-card .lang-toggle { border: 0; padding: 3px; }
.display-card .lang-opt { font-size: 15px; padding: 8px 10px; }
.display-card .lang-opt.active { box-shadow: none; }

/* ---- כרטיס חשבון ---- */
.account-row { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.account-row img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
/* v297: כרטיס החשבון לפי ת־עיצוב ID — בלי כותרת, תמונה גדולה + שם + מייל, פעולה כשורת רשימה */
#accountCard > h2 { display: none; }
.acc-id { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.acc-id img, .acc-id .acc-av { width: 58px; height: 58px; border-radius: 50%; object-fit: cover; flex: none; }
.acc-id .acc-av { display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 16%, var(--surface-2)); color: var(--primary); }
.acc-id .acc-av svg { width: 28px; height: 28px; }
.acc-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.acc-txt b { font-size: 19px; font-weight: 700; color: var(--on-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.acc-txt span { font-size: 14px; color: var(--on-surface-var); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#accountCard .ios-list > button.ios-row { width: 100%; border: 0; background: transparent; font: inherit; text-align: start; }
#accountCard .acc-out { color: var(--loss); }

/* ---- רשימת מעקב (wishlist) ---- */
.wl-card { padding: 14px 16px; }
.wl-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.wl-sym { font-size: 20px; font-weight: 700; letter-spacing: 0.3px; }
.wl-note { font-size: 14px; color: var(--on-surface-var); margin-top: 2px; }
.wl-del { flex: none; }
.wl-price { display: flex; align-items: baseline; gap: 10px; margin-top: 8px; }
.wl-close { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wl-chg { font-size: 16px; font-weight: 700; font-variant-numeric: tabular-nums; }
.form-row { display: flex; gap: 8px; flex-wrap: wrap; }
.form-row input[type="text"] { /* v151: אותו סגנון כמו כל שאר הטפסים (היו תיבות דפדפן גולמיות) */
  flex: 1 1 100%; min-width: 0; font-family: var(--font); font-size: 17px; padding: 11px 12px;
  border: 1px solid var(--outline); border-radius: var(--radius-sm); background: var(--surface);
  color: var(--on-surface); box-sizing: border-box;
}
.form-row input[type="text"]:focus { outline: 2px solid var(--primary); border-color: var(--primary); }
.form-row .chip-btn { flex: 1 1 100%; justify-content: center; }

/* ---- דוחות קרובים ---- */
/* v221: דוחות קרובים — רשימה לפי ת־עיצוב/Material: לוגו, סימבול ושם, שורת "בעוד N ימים", ואריח לוח שנה בקצה */
.earn-list { list-style: none; margin: 4px 0 0; padding: 0; }
/* v223: שני דוחות גלויים, השאר בגלילה בתוך הכרטיס — עוצר על כל שורה, בלי פס גלילה, דהייה בתחתית כשיש עוד */
.earn-list.earn-scroll { max-height: 150px; overflow-y: auto; overscroll-behavior: contain; scroll-snap-type: y mandatory; scrollbar-width: none; -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); mask-image: linear-gradient(to bottom, #000 calc(100% - 26px), transparent); }
.earn-list.earn-scroll::-webkit-scrollbar { display: none; }
.earn-list.earn-scroll.at-end { -webkit-mask-image: none; mask-image: none; }
.earn-list.earn-scroll .earn-row { scroll-snap-align: start; }
/* v224: "עוד N דוחות ⌄" — גלולה קטנה וממורכזת מתחת לחלון (בסוף: "חזרה למעלה ⌃") */
.earn-more { display: flex; align-items: center; gap: 4px; margin: 8px auto 0; padding: 6px 14px; border: 0; border-radius: var(--pill); background: var(--surface-2); color: var(--on-surface); font: inherit; font-size: 13.5px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.earn-more.hidden { display: none; }
.earn-more:active { transform: scale(.97); }
.earn-more-ic { width: 16px; height: 16px; color: var(--primary); transition: transform .2s ease; }
.earn-more.up .earn-more-ic { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .earn-more-ic { transition: none; } }
.earn-row { display: flex; align-items: center; gap: 12px; padding: 10px 0; position: relative; }
.earn-row + .earn-row::before { content: ""; position: absolute; top: 0; inset-inline-start: 52px; inset-inline-end: 0; height: 1px; background: var(--separator); }
.earn-row .stock-logo { width: 40px; height: 40px; border-radius: var(--radius-xs); }
.earn-row .stock-logo-fb { font-size: 18px; }
.earn-main { flex: 1; min-width: 0; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; row-gap: 1px; align-items: baseline; }
.earn-sym { font-weight: 700; font-size: 16px; }
.earn-name { color: var(--on-surface-var); font-size: 13.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.earn-sub { grid-column: 1 / -1; font-size: 13px; color: var(--on-surface-var); line-height: 1.35; } /* v222: נשבר לשורה שנייה במקום "…" */
.earn-cal { flex: none; width: 46px; border-radius: var(--radius-xs); background: var(--surface-2); display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 4px 0 5px; line-height: 1.1; }
.earn-mon { font-size: 11px; font-weight: 700; color: var(--primary); letter-spacing: .2px; }
.earn-day { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--on-surface); }
.earn-row.soon .earn-cal { background: var(--primary); }
.earn-row.soon .earn-mon, .earn-row.soon .earn-day { color: var(--on-primary); }
.earn-row.soon .earn-sub { color: var(--on-surface); font-weight: 600; }
/* v222: שורה לחיצה (הוספה ליומן) + גיליון תחתון לפי ת־עיצוב/Android */
.earn-row { cursor: pointer; -webkit-tap-highlight-color: transparent; border-radius: var(--radius-xs); transition: background-color .15s ease; }
.earn-row:active { background: color-mix(in srgb, var(--on-surface) 6%, transparent); }
.earn-row:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.earn-veil { background: rgba(0, 0, 0, 0); transition: background-color .22s ease; }
.earn-veil.show { background: rgba(0, 0, 0, .42); }
.earn-sheet { transform: translateY(100%); transition: transform .28s cubic-bezier(.2, .9, .25, 1); padding: 8px 18px calc(18px + env(safe-area-inset-bottom)); border-radius: var(--radius-xl) var(--radius-xl) 0 0; }
.earn-veil.show .earn-sheet { transform: none; }
.sheet-grab { width: 38px; height: 5px; border-radius: var(--pill); background: var(--outline); margin: 2px auto 14px; }
.es-head { display: flex; align-items: center; gap: 12px; }
.es-head .stock-logo { width: 52px; height: 52px; border-radius: var(--radius-sm); }
.es-id { min-width: 0; }
.es-title { font-size: 19px; font-weight: 800; }
.es-name { font-size: 14px; color: var(--on-surface-var); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.es-when { margin: 14px 0 16px; padding: 12px 14px; border-radius: var(--radius-sm); background: var(--surface-2); }
.es-day { font-size: 16.5px; font-weight: 700; }
.es-meta { font-size: 13.5px; color: var(--on-surface-var); margin-top: 2px; }
.es-btn { width: 100%; display: flex; align-items: center; justify-content: center; gap: 10px; border-radius: var(--pill); margin-bottom: 10px; }
.es-btn .ic { width: 20px; height: 20px; }
.es-note { font-size: 12.5px; color: var(--on-surface-var); text-align: center; margin: 0 0 8px; }
.es-cancel { display: block; width: 100%; background: none; border: 0; padding: 12px; font: inherit; font-size: 16px; font-weight: 600; color: var(--on-surface-var); cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .earn-sheet, .earn-veil { transition: none; } }
.wl-earn { margin-top: 6px; font-size: 14px; color: var(--on-surface-var); }

/* ---- ביצועי IBKR ---- */
.perf-list { list-style: none; margin: 8px 0 0; padding: 0; }
.perf-row { display: flex; align-items: baseline; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--separator); font-size: 15px; }
.perf-row:last-child { border-bottom: 0; }
.perf-lbl { flex: 1; }
.perf-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.perf-note { font-size: 14px; color: var(--on-surface-var); font-weight: 400; white-space: normal; text-align: end; }

/* ---- v87: חיפוש מניות להוספה ---- */
/* v239: בסגנון שדה החיפוש של iOS — מילוי אפור (tertiarySystemFill) בלי מסגרת, זכוכית מגדלת בהתחלה,
   ⓧ לניקוי, "ביטול" ירוק שמחליק פנימה בפוקוס; תוצאות ברשימה מעוגלת עם מפרידים פנימיים */
.stock-search-wrap { position: relative; margin: 0 0 14px; }
.search-row { display: flex; align-items: center; gap: 0; }
.search-field {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  height: 40px; padding: 0 10px; border-radius: var(--radius-xs);
  background: var(--search-fill); cursor: text;
  transition: background-color .2s ease;
}
.sf-icon { flex: none; width: 19px; height: 19px; fill: none; stroke: var(--search-ph); stroke-width: 2.3; stroke-linecap: round; }
.search-field input {
  flex: 1 1 auto; min-width: 0; height: 100%; padding: 0; margin: 0;
  border: 0; outline: none; background: transparent; box-shadow: none;
  font: inherit; font-size: 17px; letter-spacing: -.2px; color: var(--on-surface);
  -webkit-appearance: none; appearance: none;
}
.search-field input::placeholder { color: var(--search-ph); opacity: 1; }
.search-field input::-webkit-search-cancel-button, .search-field input::-webkit-search-decoration { -webkit-appearance: none; appearance: none; display: none; }
.sf-clear {
  flex: none; width: 22px; height: 22px; padding: 0; border: 0; background: none; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center;
}
.sf-clear.hidden { display: none; }
.sf-clear svg { width: 19px; height: 19px; }
.sf-clear circle { fill: var(--search-ph); stroke: none; }
.sf-clear path { stroke: var(--search-fill-solid); stroke-width: 2.4; stroke-linecap: round; }
/* v245: כפתור "ביטול" ליד השדה הוסר (בקשת המשתמש — נקי יותר); ⓧ מנקה, נגיעה בחוץ סוגרת את התוצאות */
.stock-search-results {
  position: absolute; top: 100%; inset-inline: 0; z-index: 50;
  background: var(--surface); border: 0;
  border-radius: var(--radius-sm); margin-top: 8px; max-height: 340px; overflow-y: auto;
  box-shadow: 0 10px 30px rgba(0, 0, 0, .14), 0 0 0 .5px var(--separator);
}
[data-theme="dark"] .stock-search-results { background: #1C1C1E; box-shadow: 0 10px 30px rgba(0, 0, 0, .5), 0 0 0 .5px rgba(255, 255, 255, .1); }
.stock-search-item {
  position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 14px;
  cursor: pointer;
}
.stock-search-item + .stock-search-item::before { /* מפריד פנימי — מתחיל אחרי הלוגו, כמו ברשימות של iOS */
  content: ''; position: absolute; top: 0; inset-inline-start: 62px; inset-inline-end: 0; height: .5px; background: var(--separator);
}
.stock-search-item:active { background: var(--search-fill); }
.ss-sym { font-weight: 700; font-size: 16px; min-width: 58px; }
.ss-name { flex: 1; min-width: 0; font-size: 14px; color: var(--on-surface-var); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-type { flex: none; font-size: 11.5px; font-weight: 600; color: var(--on-surface-var); background: var(--search-fill); padding: 2px 8px; border-radius: var(--pill); }
.ss-add { flex: none; display: inline-flex; }
/* v240: הערה של פריט מעקב — במקום השווי בכרטיס */
.wl-sub-note .wl-note-txt { color: var(--on-surface-var); font-weight: 500; max-width: 14ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: inline-block; vertical-align: bottom; }
.ss-add svg { width: 24px; height: 24px; }
.ss-add circle { fill: var(--primary); }
.ss-add path { stroke: #fff; stroke-width: 2.4; stroke-linecap: round; fill: none; }
.stock-search-empty, .stock-search-loading {
  padding: 16px; text-align: center; font-size: 14px; color: var(--on-surface-var);
}

/* ---- v244: כמה רשימות מעקב ----
   כותרת = שם הרשימה + ▾ (תפריט כמו ב־Stocks של Apple); מתחת — צ'יפים גלולים לגלילה (Material filter chips):
   הפעיל מלא בירוק, "＋ חדשה" במתאר מקווקו. מעבר רשימה = כניסה מהצד (ציר משותף). */
.wl-menu { position: relative; }
/* 28/10/2026 (בקשת המשתמש): בלי כותרת הרשימה — רק סמל התפריט בשורת החיפוש, מימין הסינון ברשימות האחרות */
/* 29/10/2026 (בקשת המשתמש): הסמל בצד ההתחלה (ימין ב־RTL), ממורכז לגובה השדה, ובעיצוב של כפתור התפריט (☰) בהדר — עיגול זכוכית, סמל בצבע האפליקציה */
.search-row > .wl-menu { order: -1; margin-inline-end: 8px; flex: none; align-self: center; display: grid; }
.search-row > .wl-menu .wl-title-btn { inline-size: 44px; block-size: 44px; padding: 0; display: grid; place-items: center; border: 1px solid transparent; border-radius: 50%;
  background: var(--gl-btn); -webkit-backdrop-filter: var(--gl-fx); backdrop-filter: var(--gl-fx); box-shadow: var(--gl-btn-sh); color: var(--primary); cursor: pointer; transition: transform .18s ease; }
.search-row > .wl-menu .wl-title-btn:active { transform: scale(.94); }
.search-row > .wl-menu .wl-title-btn svg { inline-size: 22px; block-size: 22px; }
.wl-title-btn {
  display: inline-flex; align-items: center; gap: 6px; max-width: 100%;
  border: 0; background: none; padding: 2px 0; cursor: pointer;
  font: inherit; font-size: inherit; font-weight: inherit; color: inherit; letter-spacing: inherit;
}
.wl-menu .wl-pop { inset-inline-start: 0; inset-inline-end: auto; max-width: calc(100vw - 32px); max-height: 70vh; overflow-y: auto; }   /* 28/10/2026: הסמל בקצה השורה — הבועה נפתחת לתוך המסך */
/* 28/10/2026 (בקשת המשתמש): סמל הרשימה בעברית — התבליטים מימין */
[dir="rtl"] .wl-menu .wl-title-btn svg, [dir="rtl"] .wl-pop [data-wl] .src-opt-ic svg { transform: scaleX(-1); }
.wl-opt-count { margin-inline-start: auto; font-size: 13px; font-weight: 600; color: var(--on-surface-var); font-variant-numeric: tabular-nums; }
.wl-opt-count + .src-opt-check { margin-inline-start: 6px; }
.wl-plus { font-size: 20px; font-weight: 700; color: var(--primary); }
.src-opt.danger { color: var(--loss, #C62828); }
.wl-trash .ic { stroke: currentColor; }
.wl-tabs {
  display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch;
  margin: -6px -16px 8px; padding: 8px 16px; scroll-padding-inline: 16px;   /* 29/10: ריפוד אנכי (מקוזז במרווח) — הצל של הצ'יפ לא נחתך */
}
.wl-tabs::-webkit-scrollbar { display: none; }
.wl-tab {
  flex: none; display: inline-flex; align-items: center; gap: 7px; height: 38px; padding: 0 14px;
  border: 1px solid var(--outline); border-radius: var(--pill); background: var(--surface);
  font: inherit; font-size: 15px; font-weight: 600; color: var(--on-surface); cursor: pointer; white-space: nowrap;
  transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.wl-tab:active { transform: scale(.96); }
.wl-tab-name { max-width: 16ch; overflow: hidden; text-overflow: ellipsis; }
.wl-tab-count {
  min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--pill); box-sizing: border-box;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; background: var(--search-fill); color: var(--on-surface-var); font-variant-numeric: tabular-nums;
}
.wl-tab.on { background: var(--primary); border-color: var(--primary); color: var(--on-primary); }
.wl-tab.on .wl-tab-count { background: rgba(0, 0, 0, .16); color: var(--on-primary); }
.wl-tab.add { border-style: dashed; color: var(--primary); background: transparent; gap: 4px; }
.wl-tab.add span[aria-hidden] { font-size: 18px; font-weight: 700; }
#wishlistList.wl-slide { animation: wlSlide .32s cubic-bezier(.2, .9, .25, 1); }
@keyframes wlSlide { from { opacity: 0; transform: translateX(var(--wl-dx, 28px)); } to { opacity: 1; transform: none; } }
.wl-empty { text-align: center; margin-top: 18px; }
.wl-sheet .sheet-grab { width: 38px; height: 5px; border-radius: var(--pill); background: var(--outline); margin: 0 auto 8px; }
.wl-sheet input[type="text"] {
  width: 100%; box-sizing: border-box; font: inherit; font-size: 17px; height: 44px; padding: 0 12px;
  border: 0; border-radius: var(--radius-xs); background: var(--search-fill); color: var(--on-surface); margin: 0 0 12px; outline: none;
}
.wl-sheet input[type="text"]:focus { box-shadow: 0 0 0 2px var(--primary); }
.wl-sheet .sheet-row .chip-btn { flex: 1; justify-content: center; }
@media (prefers-reduced-motion: reduce) { #wishlistList.wl-slide { animation: none; } .wl-tab { transition: none; } }

/* ---- v88/v93: לוגו חברה בכרטיס מניה ---- */
/* v88/v97: אריח לוגו לבן תמיד — גם בערכת נושא כהה */
.stock-logo {
  position: relative; width: 48px; height: 48px; border-radius: 14px; overflow: hidden;
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: #FFFFFF;
  box-shadow: inset 0 0 0 1px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.12);
}
.stock-logo-fb { font-size: 22px; font-weight: 800; color: #3A3A3C; }
/* v253: לוגו שכבר נטען בעבר — בלי אות גיבוי שמהבהבת; היפוך צבעים (לוגו לבן) דרך מחלקה ולא style */
.stock-logo.logo-ok .stock-logo-fb { display: none; }
.stock-logo-img.inv { filter: invert(1); }
.stock-logo-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; padding: 5px; box-sizing: border-box;
}
/* לוגו מוקטן בתוצאות החיפוש */
.ss-logo .stock-logo { width: 36px; height: 36px; border-radius: 10px; }
.ss-logo .stock-logo-fb { font-size: 17px; }
.ss-logo { flex: none; display: inline-flex; }
/* v255: מדד — אייקון גרף ירוק + תווית קצרה במקום לוגו */
.stock-logo.idx-logo { flex-direction: column; gap: 1px; }
.idx-logo svg { width: 55%; height: 55%; fill: none; stroke: #1E9E4A; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.idx-logo .idx-lbl { font-size: 10px; font-weight: 800; color: #3A3A3C; line-height: 1; letter-spacing: -.2px; }
.ss-logo .idx-logo .idx-lbl { font-size: 8.5px; }
/* v274: אייקון לפי סוג הנכס ברשימות המעקב — מדד ירוק, תשואת אג"ח/מט"ח כחול, סחורה ענבר, קריפטו כתום */
.idx-logo.mk-yield svg, .idx-logo.mk-fx svg { stroke: #3478F6; }
.idx-logo.mk-future svg { stroke: #B7791F; }
.idx-logo.mk-crypto svg { stroke: #E8710A; stroke-width: 2; }

/* ---- v90: שורת מיון מניות ---- */
.stock-sort-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: nowrap; /* v246: שורה אחת שנגללת הצידה (4 אופציות) */
  margin: -4px -16px 6px; padding: 8px 18px; overflow-x: auto; scrollbar-width: none;   /* 29/10: ריפוד אנכי (מקוזז במרווח) — הצל לא נחתך */
}
.stock-sort-row::-webkit-scrollbar { display: none; }
.stock-sort-row > * { flex: none; }
.stock-sort-label { font-size: 14px; font-weight: 700; color: var(--on-surface-var); }
.stock-sort-row .sort-chip { padding: 7px 12px; font-size: 14px; white-space: nowrap; }
/* v156: כפתור "סינון" + בועת בחירה (בסגנון בועת התפריט) */
/* כותרת בשורה אחת; אם אין מקום — הכפתורים יורדים לשורה משלהם */
.section-head:has(.head-actions) { flex-wrap: wrap; row-gap: 10px; }
.section-head:has(.head-actions) h2 { white-space: nowrap; }
.head-actions { display: flex; align-items: center; gap: 8px; flex: none; margin-inline-start: auto; }
/* 28/10/2026 (בקשת המשתמש): בלי הכותרת "המניות שלי" — הסינון (והעריכה) משמאל לשורת החיפוש, שהתקצרה בהתאם */
.search-row > .head-actions { margin-inline-start: 8px; }
.search-row > .head-actions .chip-btn { height: 40px; padding-block: 0; }
.src-filter { position: relative; }
.src-btn { display: inline-flex; align-items: center; }
.chip-btn.on .ic { stroke: currentColor; }
.src-pop {
  position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 30;
  min-width: 250px; padding: 8px;
  background: var(--surface); border: 1px solid var(--card-border);
  border-radius: var(--radius-sm); box-shadow: 0 12px 32px rgba(0,0,0,.22);
}
[data-theme="dark"] .src-pop { background: #1C1C1E; }
.src-pop-title { font-size: 13.5px; font-weight: 700; color: var(--on-surface-var); padding: 6px 12px 8px; }
.src-opt {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 12px; border: 0; background: transparent; border-radius: var(--radius-xs);
  font: inherit; font-size: 16px; font-weight: 600; color: var(--on-surface); cursor: pointer; text-align: start;
}
.src-opt:hover { background: var(--surface-2); }
.src-opt.on { background: var(--primary-container); color: var(--on-primary-container); font-weight: 700; }
[data-theme="dark"] .src-opt.on { background: rgba(48, 209, 88, .16); color: var(--on-surface); }
.src-opt-name { white-space: nowrap; }
/* v157: מחיר באגורות → כמה זה בשקלים */
.px-hint { align-self: flex-start; font-size: 13px; font-weight: 600; color: var(--on-surface-var); direction: ltr; unicode-bidi: isolate; }
.src-opt-ic { display: inline-flex; align-items: center; justify-content: center; width: 22px; flex: none; }
.src-opt-ic .ic { margin: 0; width: 20px; height: 20px; }
.src-opt-ic img { border-radius: 5px; }
.src-opt-check { margin-inline-start: auto; display: inline-flex; width: 1.15em; }
.src-opt-check .ic { margin: 0; }


/* v195→v207: בועת שער הדולר — באותו עיצוב כמו בועת הסשן בכרטיס המניה (רקע, פינות, טקסט), עם נקודה:
   ירוקה/אדומה מהבהבת לפי כיוון היום כשיש מסחר במט״ח, אפורה קבועה כשאין (סופ״ש). המספר עצמו לא השתנה. */
.fx-pill {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px;
  flex: none; min-width: 64px; padding: 4px 10px;
  border-radius: var(--radius-xs);
  background: var(--surface-2);
  border: 0; box-shadow: none;
  color: var(--on-surface-var);
}
.fx-pill-label { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600; white-space: nowrap; line-height: 1.25; }
.fx-pill-label .ext-dot { width: 6px; height: 6px; }
.fx-pill-label .ext-dot.pos { color: var(--gain); }
.fx-pill-label .ext-dot.neg { color: var(--loss); }
.fx-pill-value {
  font-size: 17px; font-weight: 700; line-height: 1.15; color: var(--on-surface);
  font-variant-numeric: tabular-nums;
}
.fx-pill-value .fx-num { display: inline-block; direction: ltr; }
.fx-pill.flash .fx-pill-value { animation: none; }
.fx-pill-value .fx-cur { font-size: 11px; font-weight: 600; color: var(--on-surface-var); margin-inline-end: 1px; }
.live-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: #30d158; flex: none;
  animation: livePulse 2s ease-in-out infinite;
}
@keyframes livePulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } }
.fx-pill.flash .fx-pill-value { animation: fxFlash .8s ease-out; }
@keyframes fxFlash { 0% { color: #30d158; } 100% { } }

/* v141: אחזקות ידניות */
.src-tag {
  display: inline-block; margin-inline-start: 6px; padding: 1px 8px; border-radius: var(--pill);
  font-size: 12px; font-weight: 700; vertical-align: middle;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
}
.add-mode { padding-bottom: 6px; }
.add-mode-hint { margin: 0 0 10px; }
.mt-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 4px; }
.mt-actions { gap: 8px; }
.link-btn.danger { color: var(--loss); }
.mt-manage .rows { margin: 6px 0 4px; }

/* v145: כותרת "קניות ידניות" בתוך רשימת ההפקדות */
.rows li.dep-sub { border-top: 1px solid var(--card-border); margin-top: 6px; padding-top: 12px; }

/* v146: תיק דמו + איפוס נפרד */
.demo-card { text-align: center; background: linear-gradient(135deg, color-mix(in srgb, var(--primary) 14%, var(--surface)), var(--surface)); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--card-border)); }
.demo-card h2 { justify-content: center; }
.demo-card-icon { font-size: 34px; line-height: 1; margin-bottom: 4px; }
.demo-card .fine { margin: 6px auto 14px; max-width: 34em; }
.demo-card h2 { margin-bottom: 0; }
/* v218: בלי טקסט הסבר (בקשת המשתמש) — כפתור גלולה רחב וממורכז עם הילה ירוקה עדינה, כמו כפתור ראשי אצלנו */
.demo-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 220px; margin-top: 16px; font-size: 17px; padding: 14px 30px; border-radius: var(--pill); box-shadow: 0 6px 18px color-mix(in srgb, var(--primary) 32%, transparent); }
.demo-banner { display: flex; align-items: center; justify-content: center; gap: 12px; flex-wrap: wrap; margin: 0 0 12px; padding: 10px 14px; border-radius: 14px; font-weight: 600; font-size: 15px; background: color-mix(in srgb, var(--primary) 16%, var(--surface)); color: var(--on-surface); border: 1px solid color-mix(in srgb, var(--primary) 35%, var(--card-border)); }
.demo-banner.hidden, .demo-card.hidden { display: none; }

/* v147: תגית מקור IBKR — הלוגו של Interactive Brokers, באותו מבנה כמו "ידני" */
.src-tag.src-ibkr { padding: 2px 6px; line-height: 0; background: color-mix(in srgb, #d71920 12%, transparent); }
.src-tag.src-ibkr img { width: 14px; height: 14px; display: inline-block; vertical-align: middle; }
.danger-btn .src-tag { margin-inline-start: 0; margin-inline-end: 8px; background: #fff; color: var(--primary); }
.danger-btn .src-tag.src-ibkr { background: #fff; }

/* v151: הגדרות חיבור IBKR — שדות ארוכים (כתובת, טוקן) בעמודה אחת, בלי חיתוך באמצע */
#ibkrConnDetails .form-grid { grid-template-columns: 1fr; }
/* v151: היררכיית כפתורים — "ניתוק" הוא פעולה הרסנית משנית: מתאר אדום.
   אדום מלא נשמר לכפתורי האיפוס בלבד. */
#ibkrDisconnect.danger-btn { background: transparent; color: var(--loss); border: 1.5px solid var(--loss); box-shadow: none; }

/* v154: בועת התפריט נכנסת ברכות — יחד עם החלפת הכפתורים */
.menu-drop:not(.hidden) { animation: menuDropIn .26s cubic-bezier(.2, .9, .25, 1) both; transform-origin: top; }
@keyframes menuDropIn { from { opacity: 0; transform: translateY(-6px) scale(.97); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .menu-drop:not(.hidden) { animation-duration: .12s; } }
/* ההדר המשותף (shell.js): הכניסה מהקוד (WAAPI) — אנימציית CSS רצה מחדש כשההדר עובר בין דפים */
.menu-drop.sh-drop:not(.hidden) { animation: none; }

/* v193: תוכן של <details> (הגדרות IBKR, הדרכה) נכנס ברכות במקום לקפוץ */
details.note[open] > :not(summary) { animation: demoIn .28s cubic-bezier(.2, .9, .25, 1) both; }
@media (prefers-reduced-motion: reduce) { details.note[open] > :not(summary) { animation: none; } }

/* v163: בניית תיק הדמו — בתוך כרטיס הדמו עצמו (בלי חלון צף): שלבים ופס התקדמות בסגנון נקי */
.demo-card.building > :not(.demo-inline) { display: none; }
.demo-inline { animation: demoIn .35s cubic-bezier(.2, .9, .25, 1) both; }
@keyframes demoIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.demo-inline h2 { margin: 2px 0 4px; font-size: 20px; }
.demo-prog-sub { margin: 0 0 16px; font-size: 14.5px; color: var(--on-surface-var); }
.demo-prog-bar { height: 8px; border-radius: var(--pill); background: var(--surface-2); overflow: hidden; }
.demo-prog-bar span {
  display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--primary), color-mix(in srgb, var(--primary) 60%, #7ee2a8));
  transition: width .45s cubic-bezier(.2, .9, .25, 1);
}
.demo-prog-pct { margin: 8px 0 14px; font-size: 13.5px; font-weight: 700; color: var(--on-surface-var); font-variant-numeric: tabular-nums; }
.demo-steps { list-style: none; margin: 0; padding: 0; text-align: start; }
.demo-step { display: flex; align-items: center; gap: 12px; padding: 9px 2px; font-size: 15.5px; color: var(--on-surface-var); transition: color .25s ease; }
.demo-step[data-state="now"], .demo-step[data-state="done"] { color: var(--on-surface); }
.demo-step[data-state="now"] .ds-lbl { font-weight: 700; }
.ds-txt { display: flex; flex-direction: column; min-width: 0; }
.ds-det { font-size: 13px; color: var(--on-surface-var); font-variant-numeric: tabular-nums; }
.ds-det:empty { display: none; }
.ds-dot {
  flex: none; width: 22px; height: 22px; border-radius: 50%; box-sizing: border-box;
  border: 2px solid var(--outline); position: relative; transition: background .25s ease, border-color .25s ease;
}
.demo-step[data-state="now"] .ds-dot { border-color: color-mix(in srgb, var(--primary) 25%, transparent); border-top-color: var(--primary); animation: dsSpin .8s linear infinite; }
.demo-step[data-state="done"] .ds-dot { background: var(--primary); border-color: var(--primary); }
.demo-step[data-state="done"] .ds-dot::after {
  content: ''; position: absolute; inset-inline-start: 7px; top: 3px; width: 5px; height: 10px;
  border: solid var(--on-primary); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.demo-step[data-state="fail"] .ds-dot { border-color: var(--loss); background: color-mix(in srgb, var(--loss) 15%, transparent); }
@keyframes dsSpin { to { transform: rotate(360deg); } }
.demo-prog-err { margin-top: 14px; }
.demo-prog-err p { margin: 0 0 12px; font-size: 14.5px; color: var(--on-surface); }
.demo-err-btns { display: flex; gap: 10px; justify-content: center; align-items: center; flex-wrap: wrap; }
@media (prefers-reduced-motion: reduce) {
  .demo-step[data-state="now"] .ds-dot { animation-duration: 3s; }
  .demo-prog-bar span, .demo-inline { transition: none; animation: none; }
}

/* v165: מחיר חי בסגנון Robinhood — ספרות שהשתנו מתגלגלות, הבזק ירוק/אדום קצר */
.stock-price { position: relative; transition: color .35s ease; direction: ltr; unicode-bidi: isolate; display: inline-block; } /* המספר תמיד LTR — ספרות מגולגלות לא מתערבבות ב־RTL */
.stock-price.px-up, .fx-num.px-up { animation: pxUp .9s ease-out; }
.stock-price.px-down, .fx-num.px-down { animation: pxDown .9s ease-out; }
@keyframes pxUp { 0% { color: var(--gain); text-shadow: 0 0 10px color-mix(in srgb, var(--gain) 55%, transparent); } 100% { } }
@keyframes pxDown { 0% { color: var(--loss); text-shadow: 0 0 10px color-mix(in srgb, var(--loss) 55%, transparent); } 100% { } }
/* v248: תיבת הגלגול בגובה שורה אחת בדיוק של המספר (1lh) — ב־1.15em היא שינתה את גובה השורה, והכרטיס וכל מה שמתחתיו זזו בכל עדכון מחיר */
.px-roll { display: inline-grid; overflow: hidden; height: 1lh; vertical-align: top; line-height: inherit; direction: ltr; }
.px-roll > span { grid-area: 1 / 1; display: block; animation-duration: .4s; animation-timing-function: cubic-bezier(.2, .9, .25, 1); animation-fill-mode: both; }
.px-roll.up .px-old { animation-name: pxRollOutUp; }
.px-roll.up .px-new { animation-name: pxRollInUp; }
.px-roll.down .px-old { animation-name: pxRollOutDown; }
.px-roll.down .px-new { animation-name: pxRollInDown; }
@keyframes pxRollOutUp { from { transform: translateY(0); opacity: 1; } to { transform: translateY(-100%); opacity: 0; } }
@keyframes pxRollInUp { from { transform: translateY(100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
@keyframes pxRollOutDown { from { transform: translateY(0); opacity: 1; } to { transform: translateY(100%); opacity: 0; } }
@keyframes pxRollInDown { from { transform: translateY(-100%); opacity: 0; } to { transform: translateY(0); opacity: 1; } }
/* תג סשן מורחב בכרטיס: טרום־מסחר / אחרי־מסחר / לילי, עם השינוי מהסגירה הרגילה */
.ext-sess { display: inline-flex; align-items: center; justify-content: center; flex-wrap: wrap; column-gap: 5px; row-gap: 0; max-width: 100%; line-height: 1.35; text-align: center; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; padding: 2px 9px; border-radius: var(--radius-xs); background: var(--surface-2); color: var(--on-surface-var); }
.ext-sess.pos { color: var(--gain); } .ext-sess.neg { color: var(--loss); }
/* v199→v201: "השוק סגור · סיבה" ומתחת "אחרי־מסחר +0.25%" — שתי שורות, בועה צרה (fit-content) צמודה לקצה החיצוני */
.ext-sess.closed { flex-direction: column; align-items: flex-end; align-self: flex-end; width: fit-content; max-width: 100%; padding: 3px 6px; row-gap: 0; text-align: end; font-size: 11px; letter-spacing: -.2px; }
.ext-sess.closed .ext-dot { width: 6px; height: 6px; }
@media (max-width: 374px) { .ext-sess.closed { font-size: 10.5px; padding: 2px 6px; } } /* v202: מסך צר — בלי התנגשות גם במילה ארוכה (Thanksgiving) */
.ext-sess.closed .ext-line { display: inline-flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 0 3px; max-width: 100%; }
.ext-sess.closed .ext-lbl { color: var(--on-surface-var); font-weight: 600; }
.ext-sess .ext-lbl { white-space: nowrap; }
.ext-sess .ext-pct { white-space: nowrap; }
.ext-dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; animation: livePulse 2s ease-in-out infinite; flex: none; }
/* v200: הנקודה מהבהבת (ירוק/אדום) רק כשיש מסחר פעיל; כשהשוק סגור — אפורה, קבועה, ובולטת גם על רקע כהה */
.ext-dot.off { animation: none; background: #8E8E93; box-shadow: 0 0 0 2px color-mix(in srgb, #8E8E93 28%, transparent); }
[data-theme="dark"] .ext-dot.off { background: #A1A1A6; box-shadow: 0 0 0 2px rgba(161, 161, 166, .3); }
@media (prefers-reduced-motion: reduce) { .stock-price.px-up, .stock-price.px-down, .fx-num.px-up, .fx-num.px-down, .px-roll > span, .ext-dot { animation: none; } }

/* ---- v193: תנועה וטעינה ---- */
/* שלד מהבהב במקום "—" עד המחיר הראשון */
.skel {
  display: inline-block; width: 4.4em; height: .82em; border-radius: 6px; vertical-align: middle;
  background: linear-gradient(90deg, var(--surface-2) 25%, color-mix(in srgb, var(--on-surface) 9%, var(--surface-2)) 50%, var(--surface-2) 75%);
  background-size: 200% 100%; animation: skel 1.4s ease-in-out infinite;
}
.stock-price .skel { width: 3.6em; }
@keyframes skel { from { background-position: 100% 0; } to { background-position: -100% 0; } }
@media (prefers-reduced-motion: reduce) { .skel { animation: none; } }
/* גרפים נכנסים בעמעום כשיש מה להראות (הקנבס ריק עד אז) */
.chart-wrap canvas, #pieChart { opacity: 0; transition: opacity .38s ease; }
.chart-wrap canvas.drawn, #pieChart.drawn { opacity: 1; }
.chart-loading { transition: opacity .25s ease; }
/* מעברי ערכה/שפה: הצלבה רכה (View Transitions) */
::view-transition-old(root), ::view-transition-new(root) { animation-duration: .28s; animation-timing-function: ease; }
@media (prefers-reduced-motion: reduce) { ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; } }
/* שורות מקרא ורשימות — משוב מגע עדין */
.legend li, .rows li { transition: background-color .18s ease; }
#pieLegend li:active { background: color-mix(in srgb, var(--primary) 12%, transparent); }

/* ---- v204: כותרת כרטיס המניה בשתי שורות עצמאיות (בקשת המשתמש) ----
   שורה 1: סימבול + תגית המקור (קטנה, מעט למעלה) ... מחיר. שורה 2: שם החברה (נקטע ב־…) ... בועת הסשן.
   הבועה כבר לא חולקת עמודה עם הסימבול/התגית, אז "השוק סגור · חג" + השינוי נשארים בשתי שורות בכל רוחב סביר. */
.sh-r1, .sh-r2 { grid-column: 2; display: flex; align-items: center; gap: 7px; min-width: 0; }
.sh-r1 { grid-row: 1; }
.sh-r2 { grid-row: 2; align-items: flex-start; margin-top: 4px; } /* v205: מעט מתחת למחיר הגדול */
.sh-r1 .stock-sym { flex: none; }
.sh-r1 .src-tag { flex: none; align-self: flex-start; margin-top: 1px; font-size: 10.5px; padding: 1px 6px; line-height: 1.3; }
.sh-r1 .stock-price { flex: none; font-size: 27px; line-height: 1.1; height: 1.1em; letter-spacing: -.6px; } /* v205: מחיר גדול; v248: גובה קבוע — הגלגול לא מזיז את הכרטיס */
.sh-r1 .stock-price.px-lg { font-size: 23px; }
.sh-r1 .stock-price.px-xl { font-size: 20px; }
@media (max-width: 374px) { .sh-r1 .stock-price { font-size: 25px; } .sh-r1 .stock-price.px-lg { font-size: 21px; } .sh-r1 .stock-price.px-xl { font-size: 17px; letter-spacing: -.8px; } }
/* המחיר הוא LTR פנימית — margin-inline-start שלו הוא הצד הלא נכון ב־RTL; דוחפים מצד התגית/הסימבול (בכיוון השורה) */
.sh-r1 .src-tag, .sh-r1 .stock-sym:has(+ .stock-price) { margin-inline-end: auto; }
.sh-r2 .stock-name { flex: 0 1 auto; min-width: 0; max-width: none; contain: none; margin-top: 2px; } /* רוחב טבעי — מתכווץ (…) רק כשהבועה צריכה מקום; לא נמתח (שם באנגלית היה נדחף לקצה השני) */
.sh-r2 .stock-ext { flex: none; margin-inline-start: auto; max-width: 100%; }
.sh-r2 .ext-sess.closed { align-self: auto; }
.sh-r2 .ext-sess.closed .ext-line { flex-wrap: nowrap; white-space: nowrap; }

/* v211: כרטיס "ווידג׳ט למסך הבית" בהגדרות — תצוגה מקדימה חיה (אותה תמונה שהווידג׳ט מציג), כפתור משני במתאר */
.btn.secondary-btn { background: transparent; color: var(--primary); border: 1.5px solid var(--primary); box-shadow: none; }
.btn.secondary-btn:active { background: var(--surface-2); }
.btn:disabled { opacity: .45; pointer-events: none; }
.widget-steps { margin: 8px 0 0; padding-inline-start: 22px; display: grid; gap: 6px; line-height: 1.45; }
a.btn { text-decoration: none; display: inline-flex; align-items: center; justify-content: center; } /* v215: קישור שנראה ככפתור (הורדת האפליקציה) */

/* v231: טשטוש כשהתפריט פתוח — לפי ת־עיצוב: זכוכית מטושטשת עם הכהיה עדינה, מופיעה ונעלמת ברכות.
   העמוד: שכבה קבועה מתחת להדר (z 19). ההדר: הלוגו, שורת המקור ובועת השער מטושטשים בעצמם (filter) — שכבת
   backdrop בתוך ההדר השאירה את שורת המקור חדה (הטשטוש חלש בקצה העליון של שכבה). הכפתורים והתפריט — חדים. */
.menu-veil {
  position: fixed; inset: 0; z-index: 19; touch-action: none;
  opacity: 0; pointer-events: none;
  background: rgba(242, 242, 247, .28);
  -webkit-backdrop-filter: blur(18px) saturate(1.35);
  backdrop-filter: blur(18px) saturate(1.35);
  transition: opacity .38s cubic-bezier(.32, .72, 0, 1), visibility 0s linear .38s;
  /* 29/10/2026 (סרטון המשתמש, Invest — "מעקב"): סגור = מוסתר לגמרי. שכבת טשטוש שקופה בגודל המסך נשארה שכבה פעילה מעל
     התוכן, ובטלפון חלק מהעמוד (הרשימות, החיפוש, תחילת שורת המיון) לא נצבע עד גלילה. גם חוסך זיכרון גרפי בכל מסך */
  visibility: hidden;
}
body.menu-blur .menu-veil { opacity: 1; pointer-events: auto; visibility: visible; transition: opacity .38s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
[data-theme="dark"] .menu-veil { background: rgba(0, 0, 0, .32); }
.appbar .brand > *, .appbar-sub, .appbar .fx-pill { transition: filter .38s cubic-bezier(.32, .72, 0, 1), opacity .38s cubic-bezier(.32, .72, 0, 1); }
body.menu-blur .appbar .brand > *, body.menu-blur .appbar-sub, body.menu-blur .appbar .fx-pill { filter: blur(9px) saturate(1.2); opacity: .55; }
/* התפריט עצמו נכנס עם קפיץ עדין מהכפתור (כמו תפריטי iOS) */
body.menu-blur #menuDrop:not(.hidden) { animation: menuPopIn .42s cubic-bezier(.32, .72, 0, 1) both; transform-origin: top left; }
@keyframes menuPopIn { from { opacity: 0; transform: translateY(-8px) scale(.94); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .menu-veil, .appbar .brand > *, .appbar-sub, .appbar .fx-pill { transition-duration: .12s; }
  body.menu-blur #menuDrop:not(.hidden) { animation: none; }
}

/* ---- v256: רווח/הפסד מהקנייה — פס לכל מניה, בנוי מהלוגו האופקי שלה (אריח לבן בשתי הערכות, כמו הלוגואים) ---- */
.gb { position: relative; padding-top: 4px; }
.gb-plot { position: relative; margin-inline: var(--gb-ml, 52px) var(--gb-mr, 52px); }
.gb-grid { position: absolute; top: 0; bottom: 0; width: 0; border-inline-start: 1px dashed var(--card-border); pointer-events: none; }
.gb-grid.zero { border-inline-start: 1.5px solid var(--on-surface-var); opacity: .45; }
.gb-row { position: relative; display: block; width: 100%; height: 46px; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.gb-bar {
  position: absolute; top: 7px; bottom: 7px; display: flex; align-items: center; justify-content: center;
  background: #FFFFFF; border-radius: var(--radius-xs);
  box-shadow: 0 1px 3px rgba(0,0,0,.14), inset 0 0 0 1px rgba(0,0,0,.06);
  transition: left .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), transform .15s;
}
.gb-bar::after { content: ''; position: absolute; top: 0; bottom: 0; width: 4px; }
.gb-up .gb-bar::after { right: 0; border-radius: 0 var(--radius-xs) var(--radius-xs) 0; background: var(--gain); }
.gb-down .gb-bar::after { left: 0; border-radius: var(--radius-xs) 0 0 var(--radius-xs); background: var(--loss); }
/* נגיעה (כמו בעוגה): הפס גדל החוצה מקו האפס בקפיץ עדין, צל רך — בלי עמעום של השאר (v261). v262: הגדלה מורגשת יותר —
   לכל פס כמה שיש מקום (8%–15%, ‎--gb-s מ־gainBarsFit), והאחוז/הלוגו זזים בדיוק עם קצה הפס (‎--gb-shift) — בלי חפיפה ובלי לצאת מהכרטיס */
.gb-row > * { transition: transform .42s cubic-bezier(.3,1.3,.5,1), opacity .3s, box-shadow .3s; }
.gb-bar { transition: left .5s cubic-bezier(.2,.8,.2,1), width .5s cubic-bezier(.2,.8,.2,1), transform .42s cubic-bezier(.3,1.3,.5,1), opacity .3s, box-shadow .3s; }
.gb-up .gb-bar, .gb-up .gb-pct, .gb-up .gb-ico { transform-origin: left center; }
.gb-down .gb-bar, .gb-down .gb-pct, .gb-down .gb-ico { transform-origin: right center; }
.gb-row.active { z-index: 2; }
.gb-up.active .gb-bar { transform: translateX(4px) scale(var(--gb-s, 1.12)); }
.gb-down.active .gb-bar { transform: translateX(-4px) scale(var(--gb-s, 1.12)); }
.gb-row.active:not(.gb-out) .gb-bar { box-shadow: 0 8px 22px rgba(0,0,0,.24), inset 0 0 0 1px rgba(0,0,0,.06); }
.gb-up.active .gb-pct { transform: translate(calc(var(--gb-shift, 12px) + var(--gb-x, 0px)), -50%) scale(1.1); }
.gb-up.active .gb-ico { transform: translate(var(--gb-shift, 12px), -50%) scale(1.15); }
.gb-down.active .gb-pct { transform: translate(calc(-1 * (var(--gb-shift, 12px) + var(--gb-x, 0px))), -50%) scale(1.1); }
.gb-down.active .gb-ico { transform: translate(calc(-1 * var(--gb-shift, 12px)), -50%) scale(1.15); }
.gb-mark { position: relative; display: block; flex: none; height: 18px; width: 72px; overflow: hidden; }
.gb-mark img { position: absolute; display: block; max-width: none; user-select: none; -webkit-user-drag: none; }
/* v259: הלוגו המורכב (אייקון + שם) נשאר במקום (למדידה) — גלוי רק כשנבחר */
.gb-bar > .gb-mark ~ .gb-fb { position: absolute; visibility: hidden; pointer-events: none; }
.gb-usefb .gb-bar > .gb-mark { display: none; }
.gb-usefb .gb-bar > .gb-mark ~ .gb-fb { position: static; visibility: visible; }
.gb-fb { display: flex; align-items: center; gap: 6px; max-width: calc(100% - 14px); overflow: hidden; }
.gb-fb .stock-logo { width: 22px; height: 22px; border-radius: 6px; box-shadow: none; flex: none; }
.gb-fb .stock-logo-fb { font-size: 12px; }
.gb-fb .stock-logo-img { padding: 1px; }
.gb-fb > .gb-fbs { position: absolute; visibility: hidden; }
.gb-tk .gb-fb > .gb-fbn:not(.gb-fbs) { position: absolute; visibility: hidden; }
.gb-tk .gb-fb > .gb-fbs { position: static; visibility: visible; }
.gb-fbn { font-size: 13px; font-weight: 800; color: #1C1C1E; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; letter-spacing: -.2px; }
/* מתחת ל־20% — פס דק בצבע באורך האמיתי + הלוגו הרגיל בקצה, ואז האחוז */
.gb-out .gb-bar { top: 20px; bottom: 20px; min-width: 4px; border-radius: 3px; box-shadow: none; }
.gb-out.gb-up .gb-bar { background: var(--gain); }
.gb-out.gb-down .gb-bar { background: var(--loss); }
.gb-out .gb-bar::after, .gb-out .gb-bar > * { display: none; }
.gb-ico { position: absolute; top: 50%; transform: translateY(-50%); display: none; }
.gb-out .gb-ico { display: block; }
.gb-ico .stock-logo { width: 28px; height: 28px; border-radius: 8px; }
.gb-ico .stock-logo-fb { font-size: 13px; }
.gb-ico .stock-logo-img { padding: 2px; }
.gb-pct { position: absolute; top: 50%; transform: translateY(-50%); font-size: 15px; font-weight: 800; letter-spacing: -.2px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.gb-up .gb-pct { color: var(--gain); }
.gb-down .gb-pct { color: var(--loss); }
.gb-axis { position: relative; height: 20px; margin: 6px 0 0; margin-inline: var(--gb-ml, 52px) var(--gb-mr, 52px); }
.gb-axis span { position: absolute; top: 0; transform: translateX(-50%); font-size: 12px; font-weight: 600; color: var(--on-surface-var); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (prefers-reduced-motion: reduce) { .gb-bar, .gb-row > * { transition: none; } }

/* ---------------- v280: כרטיס IBKR בגוון בורדו + כרטיס התקדמות המשיכה ----------------
   אותו מבנה כמו כרטיס הדמו (גרדיאנט עדין + מסגרת), בגוון של IBKR. כפתורים: ראשי = בורדו מלא (כמו IBKR),
   משני = מתאר בורדו; צורת גלולה (Material 3 / iOS). */
#ibkrCard {
  background: linear-gradient(135deg, color-mix(in srgb, var(--ibkr) 11%, var(--surface)), var(--surface) 70%);
  border: 1px solid color-mix(in srgb, var(--ibkr) 30%, var(--card-border));
}
#ibkrCard > h2 { display: flex; align-items: center; }
#ibkrCard > h2::before {
  content: ''; flex: none; width: 26px; height: 26px; margin-inline-end: 10px; border-radius: 8px;
  background: #fff url(ibkr-logo.png) center / 18px no-repeat; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ibkr) 22%, transparent);
}
#ibkrCard .btn, .ibkr-btn { background: var(--ibkr); color: #fff; border-radius: var(--pill); box-shadow: 0 1px 2px color-mix(in srgb, var(--ibkr) 35%, transparent); }
#ibkrCard .btn:active, .ibkr-btn:active { background: var(--ibkr-press); }
#ibkrCard #ibkrDisconnect.danger-btn, #ibkrCard .ibkr-btn-sec {
  background: transparent; color: var(--ibkr-ink); border: 1.5px solid color-mix(in srgb, var(--ibkr) 55%, transparent); box-shadow: none;
}
#ibkrCard #ibkrDisconnect.danger-btn:active, #ibkrCard .ibkr-btn-sec:active { background: color-mix(in srgb, var(--ibkr) 10%, transparent); }
#ibkrCard .btn:disabled { opacity: .45; }
/* v292 (בקשת המשתמש): "ניתוק" באותה שורה עם "סנכרן וייבא" — כרטיס קומפקטי יותר */
#ibkrCard .ibkr-btns { flex-wrap: nowrap; align-items: stretch; }
#ibkrCard .ibkr-btns > .btn { white-space: nowrap; padding-inline: 18px; }
#ibkrCard .ibkr-btns #ibkrSyncImport { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
#ibkrCard .ibkr-btns #ibkrDisconnect { flex: none; }
@media (max-width: 380px) { #ibkrCard .ibkr-btns > .btn { font-size: 15px; padding-inline: 14px; } }
#ibkrCard .btn .ic { stroke: currentColor; }
/* v295 (בקשת המשתמש): כרטיס IBKR מינימליסטי — אריחי מספרים, רשימה לפי ת־עיצוב, שורות הרחבה נקיות */
#ibkrCard { --ib-tint: color-mix(in srgb, var(--ibkr) 9%, var(--surface-2)); --ib-line: color-mix(in srgb, var(--ibkr) 18%, var(--card-border)); }
#ibkrCard .ib-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 2px 0 8px; }
#ibkrCard .ib-stats > div { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 6px; border-radius: var(--radius-sm); background: var(--ib-tint); }
#ibkrCard .ib-stats b { font-size: 22px; font-weight: 800; line-height: 1.15; color: var(--on-surface); font-variant-numeric: tabular-nums; }
#ibkrCard .ib-stats span { font-size: 12.5px; font-weight: 600; color: var(--on-surface-var); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
#ibkrCard .ib-sum { border-radius: var(--radius-sm); background: var(--ib-tint); padding: 0 14px; }
#ibkrCard .ib-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 11px 0; font-size: min(15px, 3.85vw); line-height: 1.3; }
#ibkrCard .ib-row + .ib-row { border-top: 1px solid var(--ib-line); }
#ibkrCard .ib-row > span:first-child { color: var(--on-surface-var); flex: none; }
#ibkrCard .ib-v { color: var(--on-surface); font-weight: 600; font-variant-numeric: tabular-nums; unicode-bidi: isolate; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
#ibkrCard .ib-more { margin-top: 12px; border-top: 1px solid var(--ib-line); }
#ibkrCard .ib-more > details { padding: 0; margin: 0; border-bottom: 1px solid var(--ib-line); }
#ibkrCard .ib-more > details:last-child { border-bottom: 0; }
#ibkrCard .ib-more > details > summary {
  list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 2px; font-size: 15px; font-weight: 600; color: var(--on-surface); cursor: pointer;
}
#ibkrCard .ib-more > details > summary::-webkit-details-marker { display: none; }
#ibkrCard .ib-more > details > summary::after {
  content: ''; flex: none; width: 8px; height: 8px; margin-inline-end: 4px;
  border-inline-end: 2px solid var(--ibkr-ink); border-bottom: 2px solid var(--ibkr-ink);
  transform: translateY(-2px) rotate(45deg); transition: transform .25s var(--ease-spring, ease);
}
#ibkrCard .ib-more > details[open] > summary::after { transform: translateY(2px) rotate(-135deg); }
/* ב־RTL הקצה "inline-end" הוא הצד השני — הסיבוב הפוך כדי שהחץ יצביע למטה (סגור) / למעלה (פתוח) */
[dir="rtl"] #ibkrCard .ib-more > details > summary::after { transform: translateY(-2px) rotate(-45deg); }
[dir="rtl"] #ibkrCard .ib-more > details[open] > summary::after { transform: translateY(2px) rotate(135deg); }
#ibkrCard .ib-more > details[open] { padding-bottom: 12px; }

@media (prefers-reduced-motion: reduce) { #ibkrCard .ib-more > details > summary::after { transition: none; } }

#ibkrCard.syncing > :not(.ibkr-prog) { display: none; }
.ibkr-prog { animation: demoIn .35s cubic-bezier(.2, .9, .25, 1) both; --primary: var(--ibkr); --on-primary: #fff; }
.ip-head { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; }
.ip-logo { flex: none; width: 44px; height: 44px; border-radius: var(--radius-xs); background: #fff; display: grid; place-items: center;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--ibkr) 20%, transparent), 0 2px 8px color-mix(in srgb, var(--ibkr) 18%, transparent); }
.ip-htxt { min-width: 0; }
.ibkr-prog .ip-head h2 { margin: 0; font-size: 20px; }
.ip-sub { margin: 2px 0 0; font-size: 14px; color: var(--on-surface-var); font-variant-numeric: tabular-nums; }
.ip-bar { height: 8px; border-radius: var(--pill); background: color-mix(in srgb, var(--ibkr) 12%, var(--surface-2)); overflow: hidden; }
.ip-bar span { display: block; height: 100%; width: 0; border-radius: inherit;
  background: linear-gradient(90deg, var(--ibkr), color-mix(in srgb, var(--ibkr) 65%, #ff8fa0)); transition: width .45s cubic-bezier(.2, .9, .25, 1); }
.ip-meta { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin: 8px 2px 10px;
  font-size: 14px; font-weight: 700; color: var(--on-surface-var); font-variant-numeric: tabular-nums; }
.ip-clock { font-weight: 600; }
.ip-steps .demo-step { padding: 8px 2px; }
.ip-rep-h { margin: 14px 2px 6px; font-size: 13px; font-weight: 700; color: var(--on-surface-var); letter-spacing: .02em; }
.ip-reps { list-style: none; margin: 0; padding: 4px 0; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid color-mix(in srgb, var(--ibkr) 14%, var(--card-border)); }
.ip-rep { display: flex; align-items: center; gap: 10px; padding: 9px 14px; font-size: 15px; color: var(--on-surface-var); transition: color .25s ease; }
.ip-rep + .ip-rep { border-top: 1px solid color-mix(in srgb, var(--on-surface) 7%, transparent); }
.ip-yr { flex: none; min-width: 3.2em; display: flex; flex-direction: column; line-height: 1.2; color: var(--on-surface); font-variant-numeric: tabular-nums; text-align: start; }
.ip-yr b { font-weight: 700; }
.ip-yr small { font-size: 12px; font-weight: 500; color: var(--on-surface-var); }
.ip-det { flex: 1; min-width: 0; font-size: 13.5px; text-align: end; font-variant-numeric: tabular-nums; }
.ip-rep[data-state="now"] .ip-det { color: var(--ibkr-ink); font-weight: 600; }
.ip-rep[data-state="done"] .ip-det { color: var(--on-surface); }
.ip-rep[data-state="wait"], .ip-rep[data-state="stopped"] { opacity: .6; }
.ip-rep[data-state="fail"] .ip-det { color: var(--loss); font-weight: 600; }
.ip-ico { flex: none; width: 18px; height: 18px; border-radius: 50%; box-sizing: border-box; border: 2px solid var(--outline); position: relative; }
.ip-rep[data-state="now"] .ip-ico { border-color: color-mix(in srgb, var(--ibkr) 25%, transparent); border-top-color: var(--ibkr); animation: dsSpin .8s linear infinite; }
.ip-rep[data-state="done"] .ip-ico { background: var(--ibkr); border-color: var(--ibkr); }
.ip-rep[data-state="done"] .ip-ico::after { content: ''; position: absolute; inset-inline-start: 5px; top: 2px; width: 4px; height: 8px;
  border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); }
.ip-rep[data-state="skip"] .ip-ico { border-style: dashed; }
.ip-rep[data-state="fail"] .ip-ico { border-color: var(--loss); background: color-mix(in srgb, var(--loss) 15%, transparent); }
.ip-note { margin: 12px 2px 0; font-size: 13px; color: var(--on-surface-var); text-align: center; }
.ip-note.hidden, .ip-err.hidden { display: none; }
.ip-err { margin-top: 14px; text-align: center; }
.ip-err p { margin: 0 0 12px; font-size: 14.5px; color: var(--on-surface); }
.ip-btns { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.ip-btns .btn { min-width: 120px; }
@media (prefers-reduced-motion: reduce) {
  .ibkr-prog, .ip-bar span { animation: none; transition: none; }
  .ip-rep[data-state="now"] .ip-ico { animation-duration: 3s; }
}

/* v281: בהחלקה קצרה במעקב — הצ'יפ של הרשימה שאליה נעבור מסומן */

/* ---------------- v286: כרטיס איפוס קומפקטי + גיליון לפי ת־עיצוב ---------------- */
.reset-card { padding: 6px; }
.reset-open {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--loss); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; text-align: start;
  -webkit-tap-highlight-color: transparent; transition: background .15s ease;
}
.reset-open:active { background: color-mix(in srgb, var(--loss) 10%, transparent); }
.reset-open-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--loss); color: #fff; }
.reset-open-ic svg { width: 19px; height: 19px; }
.reset-open-txt { flex: 1; min-width: 0; }
.reset-open-chev { flex: none; width: 18px; height: 18px; color: var(--on-surface-var); opacity: .7; }
.reset-open-chev svg { width: 100%; height: 100%; }
[dir="ltr"] .reset-open-chev svg { transform: scaleX(-1); }
/* הגיליון: קבוצה מעוגלת עם קווים דקים בין השורות, "ביטול" נפרד — כמו גיליון פעולות הרסניות ב־iOS */
.reset-sheet { padding-bottom: calc(18px + env(safe-area-inset-bottom, 0px)); }
.reset-sheet h3 { color: var(--on-surface-var); font-size: 14px; font-weight: 600; margin: 2px 0 12px; }
.reset-group { border-radius: var(--radius-sm); overflow: hidden; background: var(--surface-2); }
.reset-opt, .reset-cancel {
  display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 56px; padding: 12px 16px;
  border: 0; background: transparent; font: inherit; font-size: 17.5px; cursor: pointer; -webkit-tap-highlight-color: transparent;
  transition: background .12s ease;
}
.reset-opt { color: var(--loss); font-weight: 500; }
.reset-opt + .reset-opt { border-top: 1px solid color-mix(in srgb, var(--on-surface) 10%, transparent); }
.reset-opt.reset-all { font-weight: 700; }
.reset-opt:active, .reset-cancel:active { background: color-mix(in srgb, var(--on-surface) 8%, transparent); }
.reset-opt .src-tag { margin: 0; }
.reset-cancel { margin-top: 10px; border-radius: var(--radius-sm); background: var(--surface-2); color: var(--primary); font-weight: 700; }
.reset-veil { transition: background-color .26s ease; }
.reset-veil .reset-sheet { transition: transform .32s cubic-bezier(.2, .9, .25, 1); }
.reset-veil:not(.in) { background: rgba(0,0,0,0); }
.reset-veil:not(.in) .reset-sheet { transform: translateY(105%); }
@media (prefers-reduced-motion: reduce) { .reset-veil, .reset-veil .reset-sheet { transition: none; } }
/* 14/10/2026: גיבוי ל־Google Drive — אותו גיליון של האיפוס, הפעולות בצבע הראשי (לא הרסניות) */
.row-link-val { flex: none; max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--on-surface-var); font-size: 15px; font-weight: 500; }
/* 14/10/2026: עמוד הגיבוי ל־Google Drive (#tab-backup) — כמו עמוד הגיבוי של הספרייה: סמל, משפט, ואז קבוצות iOS עם כותרת קטנה */
.pfbk-hero { text-align: center; padding: 2px 20px 4px; }
.pfbk-hero p { margin: 4px 0 0; color: var(--on-surface-var); font-size: 14.5px; line-height: 1.5; }
.pfbk-big { width: 60px; height: 60px; margin: 0 auto 10px; border-radius: var(--radius-sm); display: grid; place-items: center; color: #fff; background: linear-gradient(160deg, #4285F4, #34A853); }
.pfbk-big svg { width: 32px; height: 32px; }
.pfbk-page .ios-list { background: var(--surface); box-shadow: var(--shadow); }
.pfbk-sec { margin: 20px 16px 6px; font-size: 13px; font-weight: 600; color: var(--on-surface-var); }
.pfbk-page > .ios-list:first-child { margin-top: 20px; }
.pfbk-page .ios-list + .ios-list, .pfbk-page .pfbk-foot + .ios-list { margin-top: 20px; }
.pfbk-page .ios-row-lbl { display: flex; flex-direction: column; gap: 2px; }
.pfbk-page .ios-row-val { max-width: 62%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pfbk-sub { font-size: 13px; font-weight: 400; color: var(--on-surface-var); line-height: 1.35; }
.pfbk-foot { margin: 6px 16px 0; font-size: 12.5px; line-height: 1.45; color: var(--on-surface-var); }
.pfbk-foot.center { text-align: center; margin-top: 18px; font-size: 14.5px; }
.pfbk-act { justify-content: center; }
.pfbk-act .ios-row-lbl { flex: none; text-align: center; }
.pfbk-act.main .ios-row-lbl { font-weight: 700; }
.pfbk-act.muted { color: var(--on-surface-var); }
.pfbk-act:disabled { opacity: .55; cursor: default; }
.pfbk-errrow { color: var(--loss); font-size: 15px; }
.pfbk-connect { display: block; width: 100%; margin-top: 20px; }
.pfbk-sw { position: relative; flex: none; width: 50px; height: 30px; border: 0; padding: 0; border-radius: var(--pill); background: color-mix(in srgb, var(--on-surface) 18%, transparent); cursor: pointer; transition: background .2s ease; }
.pfbk-sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start .2s ease; }
.pfbk-sw[aria-checked="true"] { background: var(--primary); }
.pfbk-sw[aria-checked="true"] i { inset-inline-start: 23px; }
.pfbk-sw:focus-visible { outline: 2.5px solid var(--primary); outline-offset: 2px; }

/* ---------------- v287: שורת קישור בהגדרות (לפי ת־עיצוב) + עמוד משנה "אפשרויות מתקדמות" ---------------- */
.row-card { padding: 6px; }
.row-link {
  display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 14px; border: 0; border-radius: var(--radius-sm);
  background: transparent; color: var(--on-surface); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; text-align: start;
  -webkit-tap-highlight-color: transparent; transition: background .15s ease;
}
.row-link:active { background: color-mix(in srgb, var(--on-surface) 7%, transparent); }
.row-link-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; }
.row-link-ic svg { width: 19px; height: 19px; }
.adv-ic { background: var(--primary); }
.fb-ic { background: #0A84FF; } /* 15/10/2026: שליחת משוב */
.row-card .row-link + .row-link { border-top: 1px solid var(--card-border); border-radius: 0 0 var(--radius-xs) var(--radius-xs); }
.fb-form { margin: -6px 4px 16px; display: flex; flex-direction: column; gap: 10px; }
.fb-seg { display: flex; gap: 8px; }
.fb-seg .mini-btn { flex: 1; }
.fb-seg .mini-btn[aria-pressed="true"] { background: var(--primary); color: var(--on-primary); border-color: var(--primary); }
.fb-in { width: 100%; box-sizing: border-box; resize: vertical; min-height: 96px; padding: 10px 12px; border-radius: var(--radius-xs); border: 1px solid var(--card-border); background: var(--surface); color: var(--on-surface); font: inherit; font-size: 16px; }
.fb-meta { margin: 0; font-size: 12.5px; color: var(--on-surface-var); } /* v288: הירוק של הסמלים באפליקציה (בקשת המשתמש) */
.row-link-txt { flex: 1; min-width: 0; }
.row-link-chev { flex: none; width: 18px; height: 18px; color: var(--on-surface-var); opacity: .7; }
.row-link-chev svg { width: 100%; height: 100%; }
[dir="ltr"] .row-link-chev svg { transform: scaleX(-1); }
.subpage-head { margin: 4px 2px 14px; }
.subpage-back {
  display: inline-flex; align-items: center; gap: 2px; padding: 6px 8px 6px 4px; margin-inline-start: -6px; border: 0; border-radius: var(--radius-xs);
  background: transparent; color: var(--primary); font: inherit; font-size: 17px; font-weight: 600; cursor: pointer; -webkit-tap-highlight-color: transparent;
}
.subpage-back svg { width: 22px; height: 22px; }
[dir="ltr"] .subpage-back svg { transform: scaleX(-1); }
.subpage-back:active { opacity: .55; }
.subpage-title { margin: 6px 0 0; font-size: 30px; font-weight: 800; letter-spacing: -.4px; }

/* v289: כרטיס "תצוגה" — שפה / ערכת נושא / מטבע: כותרת ומתחתיה בורר ברוחב מלא, שלושתם זהים */
.display-row.stack { flex-direction: column; align-items: stretch; gap: 8px; padding: 10px 0 6px; }
.display-row.stack + .display-row.stack { border-top: 1px solid var(--card-border); padding-top: 14px; }
.display-row.stack .lang-toggle { margin-top: 0; }
.display-row.stack .display-label { font-size: 15px; color: var(--on-surface-var); }

/* v289: רשימה לפי ת־עיצוב (כרטיס "אפליקציה" בעמוד המתקדם) — שורות 52px, קו דק ביניהן, ערך באפור בצד, פעולה בירוק */
.ios-list { border-radius: var(--radius-sm); background: var(--surface-2); overflow: hidden; }
.ios-row {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 52px; padding: 12px 16px; box-sizing: border-box;
  border: 0; background: transparent; font: inherit; font-size: 17px; color: var(--on-surface); text-align: start;
}
.ios-row + .ios-row { border-top: 1px solid color-mix(in srgb, var(--on-surface) 9%, transparent); }
.ios-row-lbl { flex: 1; min-width: 0; font-weight: 500; }
.ios-row-val { flex: none; color: var(--on-surface-var); font-variant-numeric: tabular-nums; font-weight: 500; }
.ios-row-btn { cursor: pointer; color: var(--primary); -webkit-tap-highlight-color: transparent; transition: background .12s ease; }
.ios-row-btn .ios-row-lbl { font-weight: 600; }
.ios-row-btn:active { background: color-mix(in srgb, var(--on-surface) 7%, transparent); }
.ios-row-ic { flex: none; width: 22px; height: 22px; display: grid; place-items: center; }
.ios-row-ic svg { width: 20px; height: 20px; }

/* v291: שורת תיק הדמו בתפריט ההמבורגר (בסגנון שורת הגדרות של iOS) */
.menu-demo { margin: -6px -8px 12px; padding-bottom: 12px; border-bottom: 1px solid var(--card-border); }
.menu-row { padding: 10px 8px; }
.menu-row .row-link-txt { min-width: 0; display: flex; flex-direction: column; gap: 2px; line-height: 1.25; }
.menu-row-t { font-size: 16.5px; font-weight: 700; }
.menu-row-s { font-size: 13px; font-weight: 500; color: var(--on-surface-var); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.demo-ic { background: linear-gradient(135deg, #FFD60A, #FF9F0A); }
.studio-ic { background: #FF4656; }   /* v354: סטודיו התרגום; 13/10/2026 — צבע המערכת של Studio */
.academy-ic { background: #4699FF; }  /* 13/10/2026: צבע המערכת של Academy */
.invest-ic { background: #30D158; }   /* 13/10/2026: צבע המערכת של Invest */
/* כרטיס ההצעה בראש הסקירה — מרווח כמו שאר הכרטיסים */
#tab-overview > #demoOffer { margin-bottom: 14px; }

/* v311: מתג "עדכון ברקע" בכרטיס IBKR — לפי ת־עיצוב, בגוון הכרטיס; RTL דרך מאפיינים לוגיים */
#ibkrCard .ib-sw { position: relative; flex: none; width: 50px; height: 30px; border: 0; padding: 0; border-radius: var(--pill); background: var(--ib-line); cursor: pointer; transition: background .2s ease; }
#ibkrCard .ib-sw i { position: absolute; top: 3px; inset-inline-start: 3px; width: 24px; height: 24px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.25); transition: inset-inline-start .2s ease; }
#ibkrCard .ib-sw[aria-checked="true"] { background: var(--ibkr); }
#ibkrCard .ib-sw[aria-checked="true"] i { inset-inline-start: 23px; }
#ibkrCard .ib-sw:focus-visible { outline: 2.5px solid var(--ibkr); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { #ibkrCard .ib-sw, #ibkrCard .ib-sw i { transition: none; } }

/* v322: רענון בזמן שהספרייה פתוחה — וילון (מעל שכבת הספרייה 900, מתחת לקורא 920) עד שהדף/העמוד הראשון מוכן; בצבע הרקע,
   או בצבע דף הקורא (--curtain, מהסקריפט ב־index.html) כשחוזרים לספר — ואז דוהה */
/* 28/10/2026 (QA מעברים): הווילון ברקע הגוונים של האפליקציה (כמו .lib-root/.st-root) — בצבע שטוח הוא נראה כמסך ריק ואז "רענון"
   כשהגוונים הופיעו. צבע דף הקורא (--curtain) = שכבה אטומה מעל הגוונים; בלעדיו השכבה שקופה */
html.lib-curtain body::after { content: ""; position: fixed; inset: 0; z-index: 910; background: linear-gradient(var(--curtain, transparent), var(--curtain, transparent)), var(--gl-ambient), var(--bg); opacity: 0; transition: opacity .25s ease; pointer-events: none; }
html.lib-restoring body::after { opacity: 1; transition: none; }
html.lib-open, html.lib-open body { overflow: hidden; }

/* שלב 2 בסביבות: תווית קבועה בסביבת הניסוי — לא תופסת מקום בפריסה ולא חוסמת נגיעות */
.env-strip {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); inset-inline-start: 50%;
  transform: translateX(50%); z-index: 2000; pointer-events: none;
  padding: 2px 12px; border-radius: var(--pill);
  background: #F5A524; color: #1A1200; font-size: 12px; font-weight: 700; line-height: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
[dir="ltr"] .env-strip { transform: translateX(-50%); }

/* ההדר המשותף של Academy ו־Studio (shell.js, 13/10/2026) — אחד לאחד כמו ב־Invest. במקום ₪ — בהיר/כהה, ורק כשהתפריט פתוח
   (החלטת המשתמש); נכנס באותה תנועה של הפנים בכפתורים (סיבוב + הקטנה). */
.appbar-actions .shell-theme { display: none; }
.appbar-actions.menu-open .shell-theme { display: flex; animation: shellThemeIn .38s cubic-bezier(.2, .9, .25, 1.15) both; }
@keyframes shellThemeIn { from { opacity: 0; transform: rotate(-120deg) scale(.4); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .appbar-actions.menu-open .shell-theme { animation: none; } }

/* 14/10/2026 (סרטון המשתמש — פתיחה מהווידג'ט): עד הציור הראשון של app.js התוכן ב־index.html הוא תבנית ריקה
   (הסקירה, "טען תיק דמו", מקפים) — מוסתר, וההדר נשאר. רשת ביטחון: אחרי 5 שניות מוצג בכל מקרה */
html.booting main, html.booting .tabs, html.booting .appbar-left { visibility: hidden; animation: snbBootShow 0s 5s forwards; }
@keyframes snbBootShow { to { visibility: visible; } }
html.booting *, html.booting *::before, html.booting *::after { transition: none !important; }   /* מצב הלשוניות/הכפתורים נקבע לפני הציור — בלי "דהייה" שממשיכה אחריו */

/* 15/10/2026: מצב תחזוקה (מרכז הניהול) — פס קבוע בתחתית המסך בשלוש האפליקציות (כמו "סביבת ניסוי", ומעליו כששניהם);
   לא תופס מקום בפריסה ולא חוסם נגיעות. למעלה הוא כיסה את קפסולת מצב השוק ואת הלוגו */
.maint-strip {
  position: fixed; bottom: calc(env(safe-area-inset-bottom, 0px) + 10px); inset-inline-start: 50%;
  transform: translateX(50%); z-index: 2000; pointer-events: none; max-width: calc(100vw - 32px);
  padding: 3px 12px; border-radius: var(--pill); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: #FF9F0A; color: #1A1000; font-size: 12px; font-weight: 700; line-height: 18px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .18);
}
.maint-strip.env-up { bottom: calc(env(safe-area-inset-bottom, 0px) + 38px); }
[dir="ltr"] .maint-strip { transform: translateX(-50%); }
/* 29/10/2026: ב־Invest החוגה בתחתית — ההודעה הקופצת והתוויות הקבועות מעליה */
body.has-dock .toast { bottom: calc(var(--dock-h) + 12px + env(safe-area-inset-bottom, 0px)); }
body.has-dock .env-strip, body.has-dock .maint-strip { bottom: calc(var(--dock-h) + 6px + env(safe-area-inset-bottom, 0px)); }
body.has-dock .maint-strip.env-up { bottom: calc(var(--dock-h) + 34px + env(safe-area-inset-bottom, 0px)); }

/* ==== 28/10/2026 — חומר הזכוכית בכל האפליקציות (בקשת המשתמש, לפי ת־עיצוב; הטוקנים --gl-* ב־:root) ====
   שכבה מאחור = גוון עדין + טשטוש (שורש הטשטוש); הלוח מעליה שקוף 74% בלי backdrop משלו, בלי מסגרת, עם קו שיער.
   מילויים בתוך הלוח שקופים (--surface-2/--search-fill מקומיים). תפריט צף בלי שכבה מאחור — טשטוש משלו (--gl-fx).
   הצבעים של כל אפליקציה (--primary) לא משתנים — רק החומר. */
.menu-veil { background: var(--gl-veil); -webkit-backdrop-filter: var(--gl-veil-fx); backdrop-filter: var(--gl-veil-fx); }
[data-theme="dark"] .menu-veil { background: var(--gl-veil); }
.main-menu, [data-theme="dark"] .main-menu { background: var(--gl-panel); border: 0; box-shadow: var(--gl-ring), var(--gl-shadow);
  --surface-2: var(--gl-fill); --search-fill: var(--gl-fill); --secondary-container: var(--gl-fill); }
/* תפריטים צפים בלי שכבה מאחור: שפה, סינון מקור/טווח/רשימה, פעולות על פריט */
.lang-menu, [data-theme="dark"] .lang-menu, .src-pop, [data-theme="dark"] .src-pop, .item-acts, [data-theme="dark"] .item-acts {
  background: var(--gl-panel); -webkit-backdrop-filter: var(--gl-fx); backdrop-filter: var(--gl-fx); border: 0;
  box-shadow: var(--gl-ring), var(--gl-shadow); --surface-2: var(--gl-fill); --search-fill: var(--gl-fill); }
/* גיליונות מלמטה (Invest + כניסה) */
.pf-sheet-veil, .acx-veil { background: var(--gl-veil); -webkit-backdrop-filter: var(--gl-veil-fx); backdrop-filter: var(--gl-veil-fx); }
.pf-sheet, [data-theme="dark"] .pf-sheet, .acx-sheet, [data-theme="dark"] .acx-sheet {
  background: var(--gl-panel); box-shadow: var(--gl-ring), var(--gl-shadow);
  --surface-2: var(--gl-fill); --search-fill: var(--gl-fill); --secondary-container: var(--gl-fill); }
.pf-sheet .sheet-btn { border: 0; background: var(--gl-fill); }
.sheet-grab { background: color-mix(in srgb, var(--on-surface-var) 45%, transparent); }
/* גיליונות שנכנסים בהדרגה: הטשטוש נבנה יחד עם הגוון */
.earn-veil, .reset-veil { transition: background-color .26s ease, -webkit-backdrop-filter .26s ease, backdrop-filter .26s ease; }
.earn-veil:not(.show), .reset-veil:not(.in) { background: transparent; -webkit-backdrop-filter: blur(0) saturate(1); backdrop-filter: blur(0) saturate(1); }
.earn-veil.show, .reset-veil.in { background: var(--gl-veil); }
/* חלון אישור/הודעה: נשאר קפסולה כהה, עכשיו מעל טשטוש; הקפסולה בלי backdrop משלה */
.dlg-veil { background: var(--gl-veil); -webkit-backdrop-filter: var(--gl-veil-fx); backdrop-filter: var(--gl-veil-fx); }
.dlg { background: rgba(30, 32, 31, .74); -webkit-backdrop-filter: none; backdrop-filter: none; border: 0;
  box-shadow: 0 0 0 .5px rgba(255, 255, 255, .14), 0 18px 48px rgba(0, 0, 0, .38); }
.dlg-cancel { background: rgba(118, 118, 128, .24); }
/* שדות בתוך לוח זכוכית — מילוי שקוף בלי מסגרת (הפוקוס נשאר בצבע האפליקציה) */
.main-menu .form-grid input, .main-menu .form-grid select, .pf-sheet .form-grid input, .pf-sheet .form-grid select,
.acx-sheet .form-grid input { background: var(--gl-fill); border-color: transparent; }

/* ==== 28/10/2026 — כפתורים ראשיים מזכוכית צבעונית (בקשת המשתמש: המראה הזכוכיתי של כפתור ההורדה בדפדפן, מותאם לת־עיצוב העדכני) ====
   הצבע של הכפתור נשאר מלא כמו שהיה (בקשת המשתמש) — רק הגימור זכוכיתי: ברק עדין בחצי העליון (לא הילה לבנה),
   קצה אור דק — חזק למעלה, חלש בתחתית (שבירת אור); טבעת שיער; צל קצר בגוון הכפתור.
   הצבע = --btn-c (ברירת מחדל --primary: Invest ירוק, Academy כחול, Studio אדום; הרסני = --loss). הטקסט נשאר --on-primary. */
html :is(.range-btn.active, .btn, .dlg-ok, .st-btn, .st-plus, .an-btn, .lib-signin, .bk-cta, .adm-btn, .mg-tb.p, .mg-ab.p, .mg-ok56) { --btn-c: var(--primary);
  --btn-glass: linear-gradient(180deg, rgba(255, 255, 255, .2), rgba(255, 255, 255, .05) 48%, rgba(255, 255, 255, 0) 54%), var(--btn-c); }
html .btn.danger-btn, html .dlg-ok.danger { --btn-c: var(--loss); }
html :is(.range-btn.active, .btn, .dlg-ok, .st-btn, .st-plus, .an-btn, .lib-signin, .bk-cta, .adm-btn, .mg-tb.p, .mg-ab.p, .mg-ok56):not(.secondary-btn):not(.ghost):not(.tint):not(.st-btn.danger) {
  background: var(--btn-glass);
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .2), inset 0 0 14px rgba(255, 255, 255, .16),
    0 0 0 .5px color-mix(in srgb, var(--btn-c), #000 12%), 0 6px 18px color-mix(in srgb, var(--btn-c) 30%, transparent);
}
/* בספרייה הצבע מוגדר עם !important — אותו מראה גם שם */
html .lib-root :is(.bk-cta, .adm-btn, .mg-tb.p, .mg-ab.p) { background: var(--btn-glass) !important; }
html :is(.range-btn.active, .btn, .dlg-ok, .st-btn, .st-plus, .an-btn, .lib-signin, .bk-cta, .adm-btn, .mg-ok56):not(.secondary-btn):not(.ghost):not(.tint):active { filter: brightness(.94); }
[data-theme="dark"] :is(.range-btn.active, .btn, .dlg-ok, .st-btn, .st-plus, .an-btn, .lib-signin, .bk-cta, .adm-btn, .mg-ok56):not(.secondary-btn):not(.ghost):not(.tint):not(.st-btn.danger) {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(255, 255, 255, .14), inset 0 0 14px rgba(255, 255, 255, .12),
    0 6px 20px color-mix(in srgb, var(--btn-c) 26%, transparent), 0 2px 6px rgba(0, 0, 0, .3);
}

/* 29/10/2026 (בקשת המשתמש, צילום של "מעקב"): צ'יפ נבחר בכל העמודים (רשימה, מיון, מסננים) = הגלולה של הלשונית הנבחרת —
   אותה זכוכית צבעונית של הכפתורים הראשיים (למעלה): ברק בחצי העליון, קצה אור, טבעת שיער וצל קצר בגוון (הילה רחבה נחתכת בשורות הנגללות). !important — גובר על הצבע המלא של כל רכיב */
html :is(.chip-btn.on, .wl-tab.on, .lib-chip.on, .chip.on, .st-rs-chip.on, .fb-seg .mini-btn[aria-pressed="true"], .adm-seg .mini-btn[aria-pressed="true"]) { --btn-c: var(--primary); border-color: transparent;
  background: linear-gradient(180deg, rgba(255, 255, 255, .26), rgba(255, 255, 255, .07) 48%, rgba(255, 255, 255, 0) 54%), var(--btn-c) !important;
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .55), inset -1px -1px 0 rgba(255, 255, 255, .2), inset 0 0 14px rgba(255, 255, 255, .16),
    0 0 0 .5px color-mix(in srgb, var(--btn-c), #000 12%), 0 2px 7px color-mix(in srgb, var(--btn-c) 38%, transparent) !important; }
[data-theme="dark"] :is(.chip-btn.on, .wl-tab.on, .lib-chip.on, .chip.on, .st-rs-chip.on, .fb-seg .mini-btn[aria-pressed="true"], .adm-seg .mini-btn[aria-pressed="true"]) {
  box-shadow: inset 1px 1px 0 rgba(255, 255, 255, .45), inset -1px -1px 0 rgba(255, 255, 255, .14), inset 0 0 14px rgba(255, 255, 255, .12),
    0 2px 8px color-mix(in srgb, var(--btn-c) 32%, transparent), 0 1px 3px rgba(0, 0, 0, .3) !important; }

/* ==== 28/10/2026 — העמודים מזכוכית (בקשת המשתמש: כרטיסים, סרגלי לשוניות ורכיבים בעמוד) ====
   רקע עדין בגוון האפליקציה מאחור (קבוע, לא נגלל) — בלעדיו זכוכית על רקע אחיד לא נראית. הכרטיסים שקופים (~58%) עם קצה אור
   כיווני וזוהר פנימי במקום מסגרת; בלי backdrop (הרקע מאחור חלק — טשטוש לא מוסיף ועולה בפריימים, ראו v193). */
body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background: var(--gl-ambient); }
.card, [data-theme="dark"] .card, .stock, [data-theme="dark"] .stock { background: var(--gl-card); border-color: transparent; box-shadow: var(--gl-card-sh); }
.pfbk-page .ios-list { background: var(--gl-card); box-shadow: var(--gl-card-sh); }
.stock-search-results, [data-theme="dark"] .stock-search-results { background: var(--gl-panel); -webkit-backdrop-filter: var(--gl-fx); backdrop-filter: var(--gl-fx); box-shadow: var(--gl-ring), var(--gl-shadow); }

/* כפתורים משניים מזכוכית (28/10, בקשת המשתמש): משטח שקוף עם קצה אור כיווני וטשטוש של מה שמאחור; הצבע של הטקסט/המסגרת נשאר */
.range-btn:not(.active), .icon-btn, .fx-pill, .chip-btn:not(.on), .mini-btn:not([aria-pressed="true"]), .btn.secondary-btn {
  background: var(--gl-btn); -webkit-backdrop-filter: var(--gl-fx); backdrop-filter: var(--gl-fx); box-shadow: var(--gl-btn-sh); }
.icon-btn, .chip-btn:not(.on), .mini-btn:not([aria-pressed="true"]) { border-color: transparent; }

/* ==== 28/10/2026 — כפתורי "חזור" בכל האפליקציות: גלולת זכוכית כמו בגרף הנרות (הצבע של האפליקציה נשאר) ==== */
html :is(.subpage-back, .an-back, .adm-back, .st-back) { background: var(--gl-btn) !important; -webkit-backdrop-filter: var(--gl-fx); backdrop-filter: var(--gl-fx); box-shadow: var(--gl-btn-sh);
  border: 0; border-radius: var(--pill) !important; min-height: 36px; padding-block: 5px !important; padding-inline: 8px 14px !important; margin-inline-start: 0; }
html :is(.kc-back, .an-cback) { background: var(--gl-btn) !important; -webkit-backdrop-filter: var(--gl-fx); backdrop-filter: var(--gl-fx); box-shadow: var(--gl-btn-sh); border-radius: 50% !important; }
html :is(.subpage-back, .an-back, .adm-back, .st-back, .kc-back, .an-cback):active { filter: brightness(.94); opacity: 1; }
/* "חזור" בכהה — עיגול זכוכית ניטרלי ונקי (לפי ת־עיצוב): אפור שקוף, בלי צל כבד, קצה אור דק; החץ בצבע האפליקציה */
/* "חזור" בכל ממשק כהה (כולל מסכי הנגן של Studio, שכהים תמיד) — גלולת זכוכית אפורה ניטרלית, כמעט אטומה, עם קצה אור:
   בולטת על כל רקע (גם על הגוון של האפליקציה) ולא מקבלת את צבעו. מקור אחד: --gl-back / --gl-back-sh */
/* 29/10/2026 (בקשת המשתמש): בדיוק כמו כפתור התפריט בהדר בכהה — --surface-2 (לבן 8%) מעל --bg השחור = #141414 אטום,
   עם הצל של --gl-btn-sh הכהה (קצה אור עליון + טבעת דקה + צל). הצבע של האפליקציה רק בחץ ובטקסט. ערכים קבועים — גם במסכים הכהים
   של Studio כשהמערכת בבהיר */
:root { --gl-back: #141414; --gl-back-sh: inset 0 1px 0 rgba(255, 255, 255, .26), inset 0 0 0 .5px rgba(255, 255, 255, .16), 0 4px 14px rgba(0, 0, 0, .4); }
html[data-theme="dark"] :is(.subpage-back, .an-back, .adm-back, .st-back, .kc-back, .an-cback, .lib-back), html .st-dark .st-back,
html[data-theme="dark"] .lib-root .lib-back { background: var(--gl-back) !important; box-shadow: var(--gl-back-sh) !important;
  -webkit-backdrop-filter: var(--gl-fx); backdrop-filter: var(--gl-fx); }
/* 29/10/2026 (בקשת המשתמש): THE SNOWBALL ב־Academy — פתית שלג גדול ויפה: בבועה הנבחרת הפתית במקום הכיתוב (לבן, עם צל עדין
   בגוון הכפתור), וכשאינו נבחר — פתית מעט גדול משאר הסמלים, והכיתוב מתחת קטן מעט כדי שייכנס */
.tab-bub-ico { width: 44px; height: 44px; stroke: #fff; filter: drop-shadow(0 1px 1.5px color-mix(in srgb, var(--btn-c, var(--primary)), #000 45%)); }
.tab-snow .tab-bub-ico { width: 58px; height: 58px; }   /* הפתית — גדול במיוחד */
.tab-snow .tab-ico { width: 43px; height: 43px; stroke-width: 1.7; }
.tab-snow .tab-lbl { font-size: 13px; letter-spacing: -.02em; }
.tab-bub-fill { width: 46px; height: 46px; }   /* סמל מלא (הסקירה) */
.tab-bub-fill path { fill: #fff; stroke: none; }