/* תיק ההשקעות — שפת עיצוב v31: Liquid Glass בסגנון iOS 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: #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: #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);
}

[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);
}

* { 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;
  padding: 10px 16px 8px;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  box-shadow: var(--glass-hi);
  color: var(--on-surface);
}
/* v131: לוגו 106px בצד אחד (הלוגו קודם ב־DOM -> קצה ה"התחלה" ב־RTL, כלומר
   ימין), כפתורי הפעולה + שורת "מקור" מקובצים יחד בצד השני (שמאל),
   ממורכזים אנכית מול גובה הלוגו (align-items:center בשורה). */
.appbar-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.appbar h1.brand { flex: none; overflow: visible; line-height: 0; font-size: 0; margin: 0; }
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: הלוגו גדול ככל שהטור השני (מקור + כפתורים + שער) מאפשר בלי להגביה את ההדר */
  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));
}
/* v140: flex-end (לא flex-start) — הצד היציב הוא זה שצמוד לקצה המסך (לא
   לצד הלוגו). שורת "מקור" ארוכה (אחרי־מסחר) מרחיבה את התיבה כלפי הלוגו;
   flex-start היה מצמיד את שתי השורות לקצה שזז, וגורר את כפתורי הפעולה
   ימינה (לכיוון הלוגו) בכל פעם שהטקסט התארך. */
.appbar-left { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; min-width: 0; padding: 2px 0; } /* v195: שורת "מקור" מעל הכפתורים, בועת השער מתחתיהם */
.appbar-actions { display: flex; align-items: center; gap: 8px; flex: none; }
.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; } }
.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;
  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;
  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; }
}

/* ---- 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 — סרגל זכוכית צף ----
   גלילה פנימית אופקית עם סרגל מוסתר: כל 5 הלשוניות תמיד נגישות,
   שום דבר לא נחתך בקצוות — לא ב־RTL ולא ב־LTR. */
.tabs {
  position: sticky; top: 78px; z-index: 15;
  display: flex; gap: 4px;
  isolation: isolate;
  margin: 12px 14px 0; padding: 6px;
  max-width: calc(100% - 28px);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--pill);
  box-shadow: var(--shadow), var(--glass-hi);
}
.tabs::-webkit-scrollbar { display: none; }
/* לחיצה נקייה ברמת אפל: בלי קוביית ההיילייט של אנדרואיד, עם משוב עדין */
button, a, .tab, .icon-btn, .ss-add {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
}
.tab {
  flex: 1 0 auto; min-width: 0; border: 0; cursor: pointer; font-family: var(--font);
  font-size: 16px; font-weight: 600; color: var(--on-surface-var);
  background: transparent; border-radius: var(--pill);
  padding: 12px 10px;
  display: flex; align-items: center; justify-content: center; gap: 6px;
  white-space: nowrap;
  transition: background .28s cubic-bezier(.32,.72,.35,1), color .28s ease, transform .16s ease;
}
.tab:active { transform: scale(.95); }
/* v275 (בקשת המשתמש): טאב הסקירה = הסמל בלבד (הכיתוב נשאר לקוראי מסך). ירוק כשלא פעיל, בצבע הטקסט על הגלולה הירוקה */
.tab.tab-icon { flex: 0 0 auto; padding-inline: 16px; }
.tab-ico { width: 28px; height: 28px; margin-block: -3px; flex: none; display: block; } /* v276: גדול יותר (בקשת המשתמש) — שוליים שליליים: גובה הטאבים לא משתנה */
.tab-ico path { fill: var(--primary); transition: fill .28s ease; }
.tab.active .tab-ico path { fill: currentColor; }
.tab.active {
  background: var(--primary); color: var(--on-primary); font-weight: 700;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 8px rgba(0, 0, 0, .18);
}
/* v193: גלולה אחת שמחליקה בין הלשוניות (כמו בורר המקטעים של אפל) — הרקע הקופץ של .tab.active נשאר רק כגיבוי בלי JS */
.tab { position: relative; z-index: 1; }
.tab-ind {
  position: absolute; top: 6px; bottom: 6px; left: 0; width: 0; z-index: 0;
  border-radius: var(--pill); background: var(--primary);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25), 0 2px 8px rgba(0, 0, 0, .18);
  transition: transform .42s cubic-bezier(.32, .72, .35, 1), width .42s cubic-bezier(.32, .72, .35, 1);
  will-change: transform; pointer-events: none;
}
.tabs.has-ind .tab.active { background: transparent; box-shadow: none; }
@media (prefers-reduced-motion: reduce) { .tab-ind { transition: none; } }
.tab-ind.off { opacity: 0; } /* v223: בעמוד ההגדרות (אין לשונית) */
.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;
}
.tab.active .count-chip { background: var(--on-primary); color: var(--primary); }

/* ---- 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; } }

.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; }
/* 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; }
/* שורות המשנה: שתי עמודות — אחוזים בצד ההתחלה, סכומים בצד הסוף, שורה לכל זוג */
.stock-sub { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 3px 12px; font-size: 14px; color: var(--on-surface-var); }
.stock-sub .sub-val, .stock-sub .buy-amt { justify-self: end; 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: נתוני הכרטיס בסגנון Apple/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; }
.stock-body-in { padding: 8px 16px 12px; }
.stock-body .kv-grid { margin: 0 0 6px; }
.stock-body .kv { padding: 5px 4px 6px; 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: 10px; margin-top: 8px; min-height: 28px; } /* 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-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; }

.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; }
.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: קו אנכי מנוקד (כמו בגוגל) */
.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; }
  .tab { font-size: 15px; padding: 11px 8px; }
}

/* ---- 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, #0F7A5A 0%, #063D2D 100%); /* v151: ירוק המותג (היה כחול זר) */
  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; }

/* ---- מתגי בחירה בסגנון אפל (שפה / ערכת נושא) ---- */
.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: כרטיס החשבון בסגנון Apple 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: דוחות קרובים — רשימה בסגנון iOS/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: שורה לחיצה (הוספה ליומן) + גיליון תחתון בסגנון iOS/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-head { margin-bottom: 6px; }
.wl-menu { position: relative; }
.wl-h2 { margin: 0; }
.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-title-txt { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.wl-title-caret { font-size: .6em; color: var(--primary); transition: transform .25s cubic-bezier(.2, .9, .25, 1); }
.wl-menu.open .wl-title-caret { transform: rotate(180deg); }
.wl-menu .wl-pop { inset-inline-end: auto; inset-inline-start: 0; max-height: 70vh; overflow-y: auto; }
.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: 0 -16px 14px; padding: 2px 16px; scroll-padding-inline: 16px;
}
.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-title-caret, .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: 2px -16px 12px; padding: 2px 18px; overflow-x: auto; scrollbar-width: none;
}
.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; }
.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: 11.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: 16px; 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; } }

/* 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: טשטוש כשהתפריט פתוח — בסגנון Apple: זכוכית מטושטשת עם הכהיה עדינה, מופיעה ונעלמת ברכות.
   העמוד: שכבה קבועה מתחת להדר (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);
}
body.menu-blur .menu-veil { opacity: 1; pointer-events: auto; }
[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 מינימליסטי — אריחי מספרים, רשימה בסגנון Apple, שורות הרחבה נקיות */
#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: בהחלקה קצרה במעקב — הצ'יפ של הרשימה שאליה נעבור מסומן */
#wlTabs .wl-tab.swipe-peek { box-shadow: inset 0 0 0 2px var(--primary); }

/* ---------------- v286: כרטיס איפוס קומפקטי + גיליון בסגנון Apple ---------------- */
.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; } }

/* ---------------- v287: שורת קישור בהגדרות (כמו iOS) + עמוד משנה "אפשרויות מתקדמות" ---------------- */
.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); } /* 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: רשימה בסגנון iOS (כרטיס "אפליקציה" בעמוד המתקדם) — שורות 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: linear-gradient(135deg, #FF5E57, #FF2D55); }   /* v354: סטודיו התרגום */
/* כרטיס ההצעה בראש הסקירה — מרווח כמו שאר הכרטיסים */
#tab-overview > #demoOffer { margin-bottom: 14px; }

/* v311: מתג "עדכון ברקע" בכרטיס IBKR — בסגנון iOS, בגוון הכרטיס; 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) כשחוזרים לספר — ואז דוהה */
html.lib-curtain body::after { content: ""; position: fixed; inset: 0; z-index: 910; background: var(--curtain, 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%); }