/* html עצמו לא היה מוגבל בגובה/overflow בכלל - אם התוכן הפנימי (phone-wrapper)
   חורג פעם מגובה המסך, ה-body/html עצמם היו גדלים לפי min-height וגוללים
   את כל הדף (עם פס-גלילה נייטיבי של הדפדפן, לא קשור בכלל לכל מנגנוני
   ה-overflow-y:auto/scrollbar-width:none הפנימיים) - לפי בקשה מפורשת
   ("אני רוצה שלא תהיה בכלל גלילה במסך הראשי") */
html {
    height: 100%;
    height: 100dvh;
    overflow: hidden;
}
#app-container {
    /* overflow-x היה מוגדר בלי overflow-y - לפי כלל תקן ה-CSS, כשציר אחד
       non-visible והשני visible (ברירת המחדל, כי לא הוצהר), הדפדפן "מקדם"
       אוטומטית את הציר הלא-מוצהר ל-auto (כדי שלא יהיה שילוב לא-הגיוני של
       חיתוך בציר אחד וגלישה חופשית בשני) - זה בדיוק מה שיצר את פס-הגלילה
       הבלתי-נראה-בקוד שדווח שוב ושוב ("עדיין יש גלילה"), אימות דרך
       getComputedStyle(...).overflowY === 'auto' בקונסול בפועל */
    overflow: hidden !important;
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
}
:root {
    /* --bg-main מוגדר כגרדיאנט (לא צבע אחיד) עבור ערכת ברירת המחדל וכל 15
       ערכות הנושא הפרימיום - .phone-wrapper/.app-loading-overlay משתמשים ב-
       background (הקיצור), לא background-color, כדי שגרדיאנט יעבוד בפועל.
       --bg-row הוא משתנה חדש: "משטח שורה" משותף לכל התוכן ברשימות (שורות
       לו"ז, פתקים, ארוחות, אירועים וכו') - כך שכל השורות באפליקציה מקבלות
       את גוון ערכת הנושא הנבחרת, לא רק הרקע הגדול מאחורי הכול */
    /* חזרה לסגול-ורוד המקורי - הכחול-חלל (שהיה כאן זמנית) עבר לערכת-נושא
       נפרדת בסוף רשימת הערכות ("Deep Space"), לפי בקשה מפורשת ("הכחול
       תשאיר בסוף הרשימה"), במקום להיעלם לגמרי */
    --bg-main: linear-gradient(135deg, #1a0412, #2b0a30);
    --bg-row: rgba(70, 15, 55, 0.55);
    --bg-glass: rgba(40, 10, 35, 0.65);
    --bg-sheet: #1f0a1c;
    --border-color: rgba(255, 0, 127, 0.25);
    --text-primary: #f5f5f7;
    --text-secondary: #a1a1a6;
    --accent-pink: #ff007f;
    --accent-purple: #a855f7;
    --accent-purple-light: #c084fc;
    --accent-green: #00e676;
    --accent-cyan: #00d4ff;
    --accent-gold: #f59e0b;
    --accent-red: #ff453a;
    /* גרסאות "טקסט" של צבעי הניאון (--accent-*-text): במצב כהה זהות בדיוק
       לצבע המקורי (שם הניגודיות כבר טובה על רקע כהה) - html.light-mode
       למטה דורס אותן בגרסה מוכהית יותר, כי אותו גוון פסטלי בהיר שמאיר יפה
       על רקע כהה כמעט בלתי-קריא כטקסט על הרקע הבהיר של מצב בהיר ("בקושי
       רואים את הסגול") - כל שימושי color (לא border/background) בכל
       הקובץ עברו לגרסת -text כדי שהתיקון יחול על כל הצבעים בכל האפליקציה.
       --user-accent (לא מוגדר כברירת מחדל - ר' applyGlobalTextColor ב-
       app.js שקובעת אותו כ-inline style על ה-html כשנבחר צבע טקסט אישי
       בהגדרות) דורס רק את שלושת הגוונים ה"מותגיים" (ורוד/סגול/סגול-בהיר),
       לא את הצבעים המשמעותיים סמנטית (ירוק=הכנסה/הצלחה, אדום=הוצאה/מחיקה,
       זהב=תקציב) - כדי שבחירת צבע אישית לא תשבור את המשמעות שלהם */
    --accent-pink-text: var(--user-accent, var(--accent-pink));
    --accent-purple-text: var(--user-accent, var(--accent-purple));
    --accent-purple-light-text: var(--user-accent, var(--accent-purple-light));
    --accent-green-text: var(--accent-green);
    --accent-cyan-text: var(--accent-cyan);
    --accent-gold-text: var(--accent-gold);
    --accent-red-text: var(--accent-red);
    --transition: all 0.25s cubic-bezier(0.25, 1, 0.5, 1);
    /* חשוב שזה יוגדר גם ברמת המסמך (לא רק על כל input[type=date] בנפרד,
       ר' למטה) - בכמה גרסאות WebView באנדרואיד הלוח השנה/הבורר הנייטיבי של
       המערכת (לא רכיב HTML רגיל שאפשר לעצב) מכבד את color-scheme של המסמך
       כולו, לא את זה שמוגדר רק על ה-input הבודד שפתח אותו - לפי דיווח מפורש
       על בורר תאריך שנפתח לבן/בהיר על אף ה-color-scheme:dark שכבר יש
       על ה-input עצמו */
    color-scheme: dark;
}
/* גודל האפליקציה (הגדרות > App Size): כמעט כל האפליקציה בנויה ב-rem, אז
   שינוי font-size של html מגדיל/מקטין הכול באופן יחסי בלי לגעת ברכיבים
   בנפרד. הערכים המקוריים (16/18/20px) היו קרובים מדי זה לזה - "קטן" בפועל
   היה בדיוק ה-16px הרגיל של הדפדפן (לא קטן ממש), ו"גדול" היה רק צעד קטן
   מעליו, כך ששני הקצוות הרגישו כמעט זהים. עכשיו "בינוני" (לא "קטן") הוא
   ברירת המחדל האמיתית (16px, בלי attribute - התנהגות זהה לכולם שלא נגעו
   בהגדרה הזו מעולם), "קטן" קטן ממנה בפועל, ו"גדול" גדול משמעותית - כדי
   שיהיה שימושי גם למי שצריך טקסט גדול בבירור (למשל הורים מבוגרים) */
html[data-ui-scale="small"] { font-size: 14px; }
html[data-ui-scale="large"] { font-size: 22px; }
/* ערכות נושא פרימיום (18 סה"כ, כולל "ברירת מחדל" שמוגדרת ב-:root/html.light-mode
   למעלה): כל ערכה מגדירה --bg-main כגרדיאנט (הרקע הגדול מאחורי הכול) וגם
   --bg-row (גוון-שורה משותף לכל הרשימות - לו"ז, פתקים, ארוחות, אירועים) -
   כך שהצבע באמת מכסה את כל המסך, לא רק פס צר שנחבא מאחורי הכרטיסים.
   --bg-glass/--bg-sheet (כרטיסים/גליונות) נשארים תמיד צבע אחיד ונקי כדי
   שטקסט יישאר קריא, גם כשהרקע/השורות מלאים בגרדיאנט */
[data-color-theme="blue_teal"] {
    --bg-main: linear-gradient(135deg, #001820, #002733);
    --bg-row: rgba(10, 45, 58, 0.55);
    --border-color: rgba(0, 212, 255, 0.25);
    --accent-pink: #00d4ff;
    --accent-purple: #0ea5e9;
    --accent-purple-light: #38bdf8;
}
[data-color-theme="gold_red"] {
    --bg-main: linear-gradient(135deg, #1a0f05, #2a0808);
    --bg-row: rgba(58, 30, 12, 0.55);
    --border-color: rgba(245, 158, 11, 0.25);
    --accent-pink: #f59e0b;
    --accent-purple: #dc2626;
    --accent-purple-light: #f87171;
}
[data-color-theme="forest_emerald"] {
    --bg-main: linear-gradient(135deg, #001a10, #002a1a);
    --bg-row: rgba(10, 50, 35, 0.55);
    --border-color: rgba(16, 185, 129, 0.25);
    --accent-pink: #10b981;
    --accent-purple: #059669;
    --accent-purple-light: #34d399;
}
[data-color-theme="rose_gold"] {
    --bg-main: linear-gradient(135deg, #1a0510, #2a0a18);
    --bg-row: rgba(55, 20, 35, 0.55);
    --border-color: rgba(244, 63, 94, 0.25);
    --accent-pink: #f43f5e;
    --accent-purple: #d4af37;
    --accent-purple-light: #fbbf24;
}
[data-color-theme="midnight_indigo"] {
    --bg-main: linear-gradient(135deg, #0a0620, #140a30);
    --bg-row: rgba(35, 25, 70, 0.55);
    --border-color: rgba(99, 102, 241, 0.25);
    --accent-pink: #6366f1;
    --accent-purple: #4338ca;
    --accent-purple-light: #818cf8;
}
[data-color-theme="sunset_coral"] {
    --bg-main: linear-gradient(135deg, #200a05, #350c18);
    --bg-row: rgba(70, 30, 25, 0.55);
    --border-color: rgba(251, 113, 133, 0.25);
    --accent-pink: #fb7185;
    --accent-purple: #f97316;
    --accent-purple-light: #fdba74;
}
[data-color-theme="ocean_teal"] {
    --bg-main: linear-gradient(135deg, #001218, #002530);
    --bg-row: rgba(10, 50, 60, 0.55);
    --border-color: rgba(6, 182, 212, 0.25);
    --accent-pink: #06b6d4;
    --accent-purple: #0891b2;
    --accent-purple-light: #22d3ee;
}
[data-color-theme="lavender_dream"] {
    --bg-main: linear-gradient(135deg, #140a24, #200f38);
    --bg-row: rgba(55, 35, 80, 0.55);
    --border-color: rgba(216, 180, 254, 0.3);
    --accent-pink: #d8b4fe;
    --accent-purple: #9333ea;
    --accent-purple-light: #e9d5ff;
}
[data-color-theme="cherry_blossom"] {
    --bg-main: linear-gradient(135deg, #1a0510, #2a0a1c);
    --bg-row: rgba(58, 22, 40, 0.55);
    --border-color: rgba(244, 114, 182, 0.25);
    --accent-pink: #f472b6;
    --accent-purple: #ec4899;
    --accent-purple-light: #f9a8d4;
}
[data-color-theme="arctic_frost"] {
    --bg-main: linear-gradient(135deg, #020a10, #0a1c28);
    --bg-row: rgba(15, 45, 60, 0.55);
    --border-color: rgba(56, 189, 248, 0.25);
    --accent-pink: #38bdf8;
    --accent-purple: #0284c7;
    --accent-purple-light: #7dd3fc;
}
[data-color-theme="volcanic_ember"] {
    --bg-main: linear-gradient(135deg, #170502, #2b0805);
    --bg-row: rgba(65, 20, 15, 0.55);
    --border-color: rgba(239, 68, 68, 0.28);
    --accent-pink: #ef4444;
    --accent-purple: #991b1b;
    --accent-purple-light: #f87171;
}
[data-color-theme="mint_fresh"] {
    --bg-main: linear-gradient(135deg, #001a14, #002a20);
    --bg-row: rgba(10, 55, 45, 0.55);
    --border-color: rgba(20, 184, 166, 0.25);
    --accent-pink: #5eead4;
    --accent-purple: #14b8a6;
    --accent-purple-light: #99f6e4;
}
[data-color-theme="royal_amethyst"] {
    --bg-main: linear-gradient(135deg, #16041e, #280836);
    --bg-row: rgba(65, 20, 80, 0.55);
    --border-color: rgba(192, 38, 211, 0.28);
    --accent-pink: #c026d3;
    --accent-purple: #7e22ce;
    --accent-purple-light: #e879f9;
}
[data-color-theme="graphite_steel"] {
    --bg-main: linear-gradient(135deg, #0d0e10, #1a1c20);
    --bg-row: rgba(45, 50, 58, 0.55);
    --border-color: rgba(100, 116, 139, 0.25);
    --accent-pink: #94a3b8;
    --accent-purple: #64748b;
    --accent-purple-light: #cbd5e1;
}
[data-color-theme="citrus_lime"] {
    --bg-main: linear-gradient(135deg, #0f1400, #1a2400);
    --bg-row: rgba(60, 70, 10, 0.55);
    --border-color: rgba(202, 138, 4, 0.25);
    --accent-pink: #84cc16;
    --accent-purple: #ca8a04;
    --accent-purple-light: #facc15;
}
[data-color-theme="copper_bronze"] {
    --bg-main: linear-gradient(135deg, #1a0f02, #2a1505);
    --bg-row: rgba(70, 40, 10, 0.55);
    --border-color: rgba(217, 119, 6, 0.25);
    --accent-pink: #d97706;
    --accent-purple: #92400e;
    --accent-purple-light: #fbbf24;
}
[data-color-theme="navy_sapphire"] {
    --bg-main: linear-gradient(135deg, #020817, #050f2a);
    --bg-row: rgba(15, 30, 70, 0.55);
    --border-color: rgba(59, 130, 246, 0.25);
    --accent-pink: #3b82f6;
    --accent-purple: #1e3a8a;
    --accent-purple-light: #60a5fa;
}
/* "Deep Space" - הערכה שהייתה ה-Default זמנית (כחול-חלל כהה), עברה לכאן
   בסוף הרשימה כשה-Default חזר לסגול-ורוד המקורי - לפי בקשה מפורשת ("הכחול
   תשאיר בסוף הרשימה") */
/* בכוונה בלי דריסת accent-pink/purple - בדיוק כמו כשזו הייתה ה-Default,
   הצבעים הניאון (ורוד/סגול) נשארים הרגילים, רק הרקע היה כחול-חלל */
[data-color-theme="deep_space"] {
    --bg-main: linear-gradient(135deg, #04070f, #0a1128);
    --bg-row: rgba(20, 30, 55, 0.55);
    --border-color: rgba(100, 140, 255, 0.25);
}
/* "ערכות נושא מיוחדות" - קבוצה ראשונה (טעימה) לפני שמרחיבים ל-50+, לפי בקשה
   מפורשת. אותו מנגנון בדיוק כמו ערכות הצבע הרגילות למעלה (data-color-theme +
   6 המשתנים הקבועים) - רק עם השראה קונספטואלית במקום שם-צבע גנרי */
[data-color-theme="lego_bricks"] {
    --bg-main: linear-gradient(135deg, #1a0000, #2b0a00);
    --bg-row: rgba(60, 15, 10, 0.55);
    --border-color: rgba(255, 204, 0, 0.3);
    --accent-pink: #ffcc00;
    --accent-purple: #d01012;
    --accent-purple-light: #ff6b35;
}
[data-color-theme="blueprint_draft"] {
    --bg-main: linear-gradient(135deg, #001233, #002255);
    --bg-row: rgba(0, 40, 80, 0.55);
    --border-color: rgba(255, 255, 255, 0.22);
    --accent-pink: #e0f2ff;
    --accent-purple: #4fc3f7;
    --accent-purple-light: #81d4fa;
}
[data-color-theme="star_map"] {
    --bg-main: linear-gradient(135deg, #000010, #05051a);
    --bg-row: rgba(10, 10, 40, 0.55);
    --border-color: rgba(255, 215, 130, 0.25);
    --accent-pink: #ffd166;
    --accent-purple: #7c83fd;
    --accent-purple-light: #b5b9ff;
}
[data-color-theme="vaporwave_neon"] {
    --bg-main: linear-gradient(135deg, #0d0221, #1a0538);
    --bg-row: rgba(40, 10, 60, 0.55);
    --border-color: rgba(255, 0, 200, 0.3);
    --accent-pink: #ff2ee6;
    --accent-purple: #00fff2;
    --accent-purple-light: #7afcff;
}
[data-color-theme="barbie_dream"] {
    --bg-main: linear-gradient(135deg, #3d0026, #5c0038);
    --bg-row: rgba(219, 39, 119, 0.4);
    --border-color: rgba(255, 105, 180, 0.3);
    --accent-pink: #ff69b4;
    --accent-purple: #d6006d;
    --accent-purple-light: #ffb6c9;
}
[data-color-theme="gold_sparkle"] {
    --bg-main: linear-gradient(135deg, #1a1000, #2b1d00);
    --bg-row: rgba(80, 60, 0, 0.4);
    --border-color: rgba(251, 191, 36, 0.35);
    --accent-pink: #fbbf24;
    --accent-purple: #f59e0b;
    --accent-purple-light: #fef08a;
}
[data-color-theme="pink_sparkle"] {
    --bg-main: linear-gradient(135deg, #2b0018, #40002b);
    --bg-row: rgba(80, 0, 55, 0.4);
    --border-color: rgba(236, 72, 153, 0.35);
    --accent-pink: #ec4899;
    --accent-purple: #f472b6;
    --accent-purple-light: #fbcfe8;
}
[data-color-theme="silver_sparkle"] {
    --bg-main: linear-gradient(135deg, #14161a, #202328);
    --bg-row: rgba(60, 65, 75, 0.4);
    --border-color: rgba(203, 213, 225, 0.3);
    --accent-pink: #e5e7eb;
    --accent-purple: #94a3b8;
    --accent-purple-light: #f8fafc;
}
[data-color-theme="starlight_glam"] {
    --bg-main: linear-gradient(135deg, #0a0020, #1a0040);
    --bg-row: rgba(40, 0, 80, 0.4);
    --border-color: rgba(244, 114, 182, 0.3);
    --accent-pink: #f472b6;
    --accent-purple: #a78bfa;
    --accent-purple-light: #fef08a;
}
[data-color-theme="diamond_sparkle"] {
    --bg-main: linear-gradient(135deg, #0a1420, #14202e);
    --bg-row: rgba(20, 50, 70, 0.4);
    --border-color: rgba(125, 211, 252, 0.35);
    --accent-pink: #e0f2fe;
    --accent-purple: #7dd3fc;
    --accent-purple-light: #ffffff;
}
[data-color-theme="aurora_borealis"] {
    --bg-main: linear-gradient(135deg, #00050f, #001a1a);
    --bg-row: rgba(0, 40, 40, 0.4);
    --border-color: rgba(74, 222, 190, 0.3);
    --accent-pink: #4ade80;
    --accent-purple: #a78bfa;
    --accent-purple-light: #67e8f9;
}
[data-color-theme="pixel_art"] {
    --bg-main: linear-gradient(135deg, #0f0326, #1a0a3d);
    --bg-row: rgba(40, 15, 70, 0.5);
    --border-color: rgba(0, 255, 136, 0.3);
    --accent-pink: #ff3864;
    --accent-purple: #2de2e6;
    --accent-purple-light: #f9c80e;
}
[data-color-theme="stock_market"] {
    --bg-main: linear-gradient(135deg, #001a0d, #002912);
    --bg-row: rgba(0, 60, 30, 0.5);
    --border-color: rgba(34, 197, 94, 0.3);
    --accent-pink: #22c55e;
    --accent-purple: #ef4444;
    --accent-purple-light: #86efac;
}
[data-color-theme="neon_trading_chart"] {
    --bg-main: linear-gradient(135deg, #05010f, #0a0518);
    --bg-row: rgba(30, 10, 50, 0.5);
    --border-color: rgba(236, 72, 153, 0.3);
    --accent-pink: #ec4899;
    --accent-purple: #6366f1;
    --accent-purple-light: #c084fc;
}
[data-color-theme="candlestick_bands"] {
    --bg-main: linear-gradient(135deg, #050b14, #0a1420);
    --bg-row: rgba(15, 30, 50, 0.5);
    --border-color: rgba(56, 189, 248, 0.25);
    --accent-pink: #22d3a8;
    --accent-purple: #f43f5e;
    --accent-purple-light: #fb923c;
}
[data-color-theme="market_data_glow"] {
    --bg-main: linear-gradient(135deg, #0a0420, #150a35);
    --bg-row: rgba(40, 20, 80, 0.4);
    --border-color: rgba(251, 146, 60, 0.3);
    --accent-pink: #fb923c;
    --accent-purple: #818cf8;
    --accent-purple-light: #f472b6;
}
[data-color-theme="steampunk_brass"] {
    --bg-main: linear-gradient(135deg, #1a1006, #2b1a0a);
    --bg-row: rgba(80, 50, 20, 0.5);
    --border-color: rgba(184, 115, 51, 0.35);
    --accent-pink: #cd7f32;
    --accent-purple: #8a6438;
    --accent-purple-light: #e8b878;
}
[data-color-theme="vintage_newspaper"] {
    --bg-main: linear-gradient(135deg, #1a1610, #2b241a);
    --bg-row: rgba(60, 50, 35, 0.4);
    --border-color: rgba(180, 160, 120, 0.3);
    --accent-pink: #b8a078;
    --accent-purple: #8a7a5c;
    --accent-purple-light: #e8dcc0;
}
[data-color-theme="film_noir"] {
    --bg-main: linear-gradient(135deg, #000000, #1a1a1a);
    --bg-row: rgba(255, 255, 255, 0.06);
    --border-color: rgba(255, 255, 255, 0.2);
    --accent-pink: #d4d4d4;
    --accent-purple: #a3a3a3;
    --accent-purple-light: #f5f5f5;
}
[data-color-theme="pop_art_comics"] {
    --bg-main: linear-gradient(135deg, #1a0000, #000814);
    --bg-row: rgba(20, 20, 20, 0.5);
    --border-color: rgba(255, 221, 0, 0.35);
    --accent-pink: #ff1744;
    --accent-purple: #2979ff;
    --accent-purple-light: #ffdd00;
}
[data-color-theme="origami_paper"] {
    --bg-main: linear-gradient(135deg, #1f1410, #2b1c14);
    --bg-row: rgba(80, 50, 35, 0.4);
    --border-color: rgba(251, 146, 60, 0.3);
    --accent-pink: #fb923c;
    --accent-purple: #f472b6;
    --accent-purple-light: #fde68a;
}
[data-color-theme="watercolor_wash"] {
    --bg-main: linear-gradient(135deg, #1a0f2e, #2b1a3d);
    --bg-row: rgba(80, 50, 100, 0.35);
    --border-color: rgba(196, 145, 255, 0.25);
    --accent-pink: #f9a8d4;
    --accent-purple: #c4b5fd;
    --accent-purple-light: #a5f3fc;
}
[data-color-theme="chemistry_lab"] {
    --bg-main: linear-gradient(135deg, #001a1a, #002b2b);
    --bg-row: rgba(0, 60, 60, 0.5);
    --border-color: rgba(45, 212, 191, 0.3);
    --accent-pink: #2dd4bf;
    --accent-purple: #a3e635;
    --accent-purple-light: #67e8f9;
}
[data-color-theme="botanical_greenhouse"] {
    --bg-main: linear-gradient(135deg, #041a0a, #0a2b14);
    --bg-row: rgba(10, 60, 25, 0.5);
    --border-color: rgba(74, 222, 128, 0.3);
    --accent-pink: #4ade80;
    --accent-purple: #16a34a;
    --accent-purple-light: #bbf7d0;
}
[data-color-theme="kids_sky_grass"] {
    --bg-main: linear-gradient(135deg, #0a1a3d, #1a2b5c);
    --bg-row: rgba(30, 50, 100, 0.45);
    --border-color: rgba(250, 204, 21, 0.3);
    --accent-pink: #facc15;
    --accent-purple: #4ade80;
    --accent-purple-light: #93c5fd;
}
[data-color-theme="rainbow_balloons"] {
    --bg-main: linear-gradient(135deg, #1a1030, #2b1a45);
    --bg-row: rgba(60, 30, 80, 0.4);
    --border-color: rgba(244, 63, 94, 0.3);
    --accent-pink: #f43f5e;
    --accent-purple: #a855f7;
    --accent-purple-light: #fbbf24;
}
[data-color-theme="underwater_ocean"] {
    --bg-main: linear-gradient(135deg, #001a2e, #003049);
    --bg-row: rgba(0, 60, 90, 0.4);
    --border-color: rgba(56, 189, 248, 0.3);
    --accent-pink: #f97316;
    --accent-purple: #38bdf8;
    --accent-purple-light: #5eead4;
}
[data-color-theme="dino_jungle"] {
    --bg-main: linear-gradient(135deg, #0a1f0a, #142f14);
    --bg-row: rgba(20, 60, 20, 0.4);
    --border-color: rgba(132, 204, 22, 0.3);
    --accent-pink: #f97316;
    --accent-purple: #84cc16;
    --accent-purple-light: #facc15;
}
[data-color-theme="space_rocket"] {
    --bg-main: linear-gradient(135deg, #04051a, #0a0d2e);
    --bg-row: rgba(20, 20, 60, 0.4);
    --border-color: rgba(250, 204, 21, 0.3);
    --accent-pink: #f43f5e;
    --accent-purple: #818cf8;
    --accent-purple-light: #fde68a;
}
[data-color-theme="bull_run"] {
    --bg-main: linear-gradient(135deg, #001a08, #002e12);
    --bg-row: rgba(0, 60, 20, 0.5);
    --border-color: rgba(74, 222, 128, 0.35);
    --accent-pink: #4ade80;
    --accent-purple: #16a34a;
    --accent-purple-light: #bbf7d0;
}
[data-color-theme="bear_crash"] {
    --bg-main: linear-gradient(135deg, #1a0000, #2e0008);
    --bg-row: rgba(60, 0, 10, 0.5);
    --border-color: rgba(248, 113, 113, 0.35);
    --accent-pink: #f87171;
    --accent-purple: #991b1b;
    --accent-purple-light: #fecaca;
}
[data-color-theme="multi_ticker_grid"] {
    --bg-main: linear-gradient(135deg, #05070a, #0a0e14);
    --bg-row: rgba(20, 25, 35, 0.5);
    --border-color: rgba(148, 163, 184, 0.3);
    --accent-pink: #22c55e;
    --accent-purple: #ef4444;
    --accent-purple-light: #38bdf8;
}
[data-color-theme="teddy_bear"] {
    --bg-main: linear-gradient(135deg, #2b1a0a, #3d2410);
    --bg-row: rgba(90, 60, 30, 0.4);
    --border-color: rgba(217, 119, 6, 0.3);
    --accent-pink: #d97706;
    --accent-purple: #92400e;
    --accent-purple-light: #fbbf24;
}
[data-color-theme="wooden_blocks"] {
    --bg-main: linear-gradient(135deg, #1f1408, #2b1c0e);
    --bg-row: rgba(90, 60, 30, 0.4);
    --border-color: rgba(180, 120, 60, 0.3);
    --accent-pink: #ef4444;
    --accent-purple: #3b82f6;
    --accent-purple-light: #fbbf24;
}
[data-color-theme="board_game_dice"] {
    --bg-main: linear-gradient(135deg, #1a0a10, #2b0f1a);
    --bg-row: rgba(80, 20, 40, 0.4);
    --border-color: rgba(244, 63, 94, 0.3);
    --accent-pink: #f43f5e;
    --accent-purple: #facc15;
    --accent-purple-light: #fda4af;
}
[data-color-theme="arcade_neon"] {
    --bg-main: linear-gradient(135deg, #0a0014, #14001f);
    --bg-row: rgba(40, 0, 60, 0.5);
    --border-color: rgba(217, 70, 239, 0.35);
    --accent-pink: #d946ef;
    --accent-purple: #06b6d4;
    --accent-purple-light: #fde047;
}
[data-color-theme="kite_pinwheel"] {
    --bg-main: linear-gradient(135deg, #001a33, #002b52);
    --bg-row: rgba(0, 60, 100, 0.4);
    --border-color: rgba(56, 189, 248, 0.3);
    --accent-pink: #f43f5e;
    --accent-purple: #38bdf8;
    --accent-purple-light: #fde047;
}
[data-color-theme="tropical_leaves"] {
    --bg-main: linear-gradient(135deg, #021a0e, #042b18);
    --bg-row: rgba(10, 60, 30, 0.4);
    --border-color: rgba(22, 163, 74, 0.3);
    --accent-pink: #facc15;
    --accent-purple: #16a34a;
    --accent-purple-light: #86efac;
}
[data-color-theme="autumn_forest"] {
    --bg-main: linear-gradient(135deg, #2b1405, #3d1c08);
    --bg-row: rgba(90, 40, 10, 0.4);
    --border-color: rgba(249, 115, 22, 0.3);
    --accent-pink: #f97316;
    --accent-purple: #dc2626;
    --accent-purple-light: #fde047;
}
[data-color-theme="wildflower_meadow"] {
    --bg-main: linear-gradient(135deg, #0a1f0a, #142f10);
    --bg-row: rgba(20, 60, 20, 0.4);
    --border-color: rgba(236, 72, 153, 0.3);
    --accent-pink: #ec4899;
    --accent-purple: #84cc16;
    --accent-purple-light: #fde047;
}
[data-color-theme="flower_garden"] {
    --bg-main: linear-gradient(135deg, #1a0a1a, #2b1428);
    --bg-row: rgba(80, 30, 70, 0.4);
    --border-color: rgba(236, 72, 153, 0.3);
    --accent-pink: #ec4899;
    --accent-purple: #a855f7;
    --accent-purple-light: #fde68a;
}
[data-color-theme="ocean_waves"] {
    --bg-main: linear-gradient(135deg, #001220, #002840);
    --bg-row: rgba(0, 50, 80, 0.4);
    --border-color: rgba(56, 189, 248, 0.3);
    --accent-pink: #38bdf8;
    --accent-purple: #0ea5e9;
    --accent-purple-light: #a5f3fc;
}
[data-color-theme="coral_reef"] {
    --bg-main: linear-gradient(135deg, #001a20, #002e30);
    --bg-row: rgba(0, 50, 60, 0.4);
    --border-color: rgba(251, 146, 60, 0.3);
    --accent-pink: #fb7185;
    --accent-purple: #2dd4bf;
    --accent-purple-light: #fdba74;
}
[data-color-theme="cherry_blossom_garden"] {
    --bg-main: linear-gradient(135deg, #1f0a14, #2e1420);
    --bg-row: rgba(90, 30, 55, 0.4);
    --border-color: rgba(244, 114, 182, 0.3);
    --accent-pink: #f9a8d4;
    --accent-purple: #f472b6;
    --accent-purple-light: #fce7f3;
}
[data-color-theme="race_car"] {
    --bg-main: linear-gradient(135deg, #0a0a0a, #1a1a1a);
    --bg-row: rgba(40, 40, 40, 0.4);
    --border-color: rgba(239, 68, 68, 0.35);
    --accent-pink: #ef4444;
    --accent-purple: #18181b;
    --accent-purple-light: #f5f5f5;
}
[data-color-theme="train_journey"] {
    --bg-main: linear-gradient(135deg, #1a1005, #2b1c0a);
    --bg-row: rgba(80, 50, 20, 0.4);
    --border-color: rgba(180, 120, 60, 0.3);
    --accent-pink: #dc2626;
    --accent-purple: #525252;
    --accent-purple-light: #e8dcc0;
}
[data-color-theme="airplane_sky"] {
    --bg-main: linear-gradient(135deg, #001a3d, #002b5c);
    --bg-row: rgba(0, 50, 90, 0.4);
    --border-color: rgba(147, 197, 253, 0.3);
    --accent-pink: #f97316;
    --accent-purple: #3b82f6;
    --accent-purple-light: #dbeafe;
}
[data-color-theme="sailboat_waves"] {
    --bg-main: linear-gradient(135deg, #001a26, #00303f);
    --bg-row: rgba(0, 50, 70, 0.4);
    --border-color: rgba(56, 189, 248, 0.3);
    --accent-pink: #f8fafc;
    --accent-purple: #0ea5e9;
    --accent-purple-light: #7dd3fc;
}
[data-color-theme="motorcycle_speed"] {
    --bg-main: linear-gradient(135deg, #0a0a0a, #1f1005);
    --bg-row: rgba(60, 30, 10, 0.4);
    --border-color: rgba(249, 115, 22, 0.35);
    --accent-pink: #f97316;
    --accent-purple: #18181b;
    --accent-purple-light: #fdba74;
}
[data-color-theme="hot_air_balloon"] {
    --bg-main: linear-gradient(135deg, #1a0a30, #2b1245);
    --bg-row: rgba(60, 20, 80, 0.4);
    --border-color: rgba(251, 191, 36, 0.3);
    --accent-pink: #f43f5e;
    --accent-purple: #fbbf24;
    --accent-purple-light: #a78bfa;
}
[data-color-theme="bicycle_ride"] {
    --bg-main: linear-gradient(135deg, #001a0a, #002b12);
    --bg-row: rgba(10, 60, 25, 0.4);
    --border-color: rgba(34, 197, 94, 0.3);
    --accent-pink: #22c55e;
    --accent-purple: #15803d;
    --accent-purple-light: #bbf7d0;
}
[data-color-theme="submarine_deep"] {
    --bg-main: linear-gradient(135deg, #00050f, #001529);
    --bg-row: rgba(0, 30, 60, 0.4);
    --border-color: rgba(56, 189, 248, 0.25);
    --accent-pink: #facc15;
    --accent-purple: #0369a1;
    --accent-purple-light: #7dd3fc;
}
[data-color-theme="helicopter_rotor"] {
    --bg-main: linear-gradient(135deg, #14161a, #1f2229);
    --bg-row: rgba(40, 45, 55, 0.4);
    --border-color: rgba(250, 204, 21, 0.3);
    --accent-pink: #facc15;
    --accent-purple: #64748b;
    --accent-purple-light: #e2e8f0;
}
[data-color-theme="rocket_ship"] {
    --bg-main: linear-gradient(135deg, #05010f, #0a0320);
    --bg-row: rgba(20, 10, 50, 0.4);
    --border-color: rgba(148, 163, 184, 0.3);
    --accent-pink: #e2e8f0;
    --accent-purple: #6366f1;
    --accent-purple-light: #fb923c;
}
/* מצב בהיר (Light Mode, חינמי): מחליף את משתני הרקע/הטקסט - צבעי הניאון
   עצמם (var(--accent-*), לשימוש ברקעים/מסגרות/צללים עדינים) נשארות זהות,
   כדי לשמור על הזוהר הרענן גם על רקע בהיר. אבל var(--accent-*-text) (טקסט
   בלבד - כותרות קטגוריה, מספרים, תוויות) כן מוכהות פה באמצעות color-mix,
   כי אותו גוון פסטלי בהיר שנראה נהדר כטקסט זוהר על רקע כהה כמעט בלתי-קריא
   כטקסט על הרקע הבהיר של מצב בהיר עצמו ("ברקע הלבן בקושי רואים את הסגול") -
   הערך המקורי (var(--accent-*)) הוא זה שנכנס ל-color-mix, אז זה אוטומטית
   נכון לכל אחת מ-18 ערכות הנושא הפרימיום בלי לגעת בהן בנפרד */
html.light-mode {
    color-scheme: light;
    --bg-main: linear-gradient(135deg, #fdf0fa, #f3e8ff);
    --bg-row: rgba(168, 85, 247, 0.08);
    --bg-glass: rgba(255, 255, 255, 0.72);
    --bg-sheet: #ffffff;
    --border-color: rgba(168, 85, 247, 0.2);
    --text-primary: #17141f;
    --text-secondary: #6b6578;
    --accent-pink-text: color-mix(in srgb, var(--user-accent, var(--accent-pink)) 60%, black 40%);
    --accent-purple-text: color-mix(in srgb, var(--user-accent, var(--accent-purple)) 65%, black 35%);
    --accent-purple-light-text: color-mix(in srgb, var(--user-accent, var(--accent-purple-light)) 50%, black 50%);
    --accent-green-text: color-mix(in srgb, var(--accent-green) 55%, black 45%);
    --accent-cyan-text: color-mix(in srgb, var(--accent-cyan) 55%, black 45%);
    --accent-gold-text: color-mix(in srgb, var(--accent-gold) 65%, black 35%);
    --accent-red-text: color-mix(in srgb, var(--accent-red) 60%, black 40%);
}
/* אותה ערכת-נושא פרימיום (data-color-theme, ר' למעלה) שולטת גם ברקע/שורות של
   מצב בהיר, לא רק בצבעי הניאון של מצב כהה - כך שבחירה אחת בהגדרות נותנת גם
   רקע וגם שורות בגוון תואם (כולל גרדיאנטים) כשמצב בהיר פעיל */
html.light-mode[data-color-theme="blue_teal"] {
    --bg-main: linear-gradient(135deg, #d6f3fa, #b8e8f3);
    --bg-row: rgba(14, 165, 233, 0.1);
    --bg-glass: rgba(231, 246, 251, 0.75);
    --bg-sheet: #f4fcff;
    --border-color: rgba(14, 165, 233, 0.25);
    --text-primary: #0f2a33;
    --text-secondary: #4a6b73;
}
html.light-mode[data-color-theme="gold_red"] {
    --bg-main: linear-gradient(135deg, #fde8d2, #fbd5cf);
    --bg-row: rgba(220, 38, 38, 0.1);
    --bg-glass: rgba(253, 241, 231, 0.75);
    --bg-sheet: #fffaf3;
    --border-color: rgba(220, 38, 38, 0.2);
    --text-primary: #2e1a0d;
    --text-secondary: #7a5c47;
}
html.light-mode[data-color-theme="forest_emerald"] {
    --bg-main: linear-gradient(135deg, #d3f7e6, #b8edd4);
    --bg-row: rgba(16, 185, 129, 0.1);
    --bg-glass: rgba(234, 250, 243, 0.75);
    --bg-sheet: #f4fffa;
    --border-color: rgba(16, 185, 129, 0.25);
    --text-primary: #0d2c20;
    --text-secondary: #4d7a67;
}
html.light-mode[data-color-theme="rose_gold"] {
    --bg-main: linear-gradient(135deg, #fde3ea, #fce4c4);
    --bg-row: rgba(244, 63, 94, 0.1);
    --bg-glass: rgba(253, 241, 243, 0.75);
    --bg-sheet: #fff8f9;
    --border-color: rgba(244, 63, 94, 0.25);
    --text-primary: #2e1420;
    --text-secondary: #7a5560;
}
html.light-mode[data-color-theme="midnight_indigo"] {
    --bg-main: linear-gradient(135deg, #e0e2fb, #ccd0f7);
    --bg-row: rgba(99, 102, 241, 0.1);
    --bg-glass: rgba(238, 240, 253, 0.75);
    --bg-sheet: #f6f7ff;
    --border-color: rgba(99, 102, 241, 0.25);
    --text-primary: #161233;
    --text-secondary: #5c5a80;
}
html.light-mode[data-color-theme="sunset_coral"] {
    --bg-main: linear-gradient(135deg, #ffd9c7, #ffc2d4);
    --bg-row: rgba(251, 113, 133, 0.12);
    --bg-glass: rgba(255, 241, 236, 0.75);
    --bg-sheet: #fff8f5;
    --border-color: rgba(251, 113, 133, 0.25);
    --text-primary: #331408;
    --text-secondary: #8a5a45;
}
html.light-mode[data-color-theme="ocean_teal"] {
    --bg-main: linear-gradient(135deg, #c9f4fb, #a6e6f2);
    --bg-row: rgba(6, 182, 212, 0.12);
    --bg-glass: rgba(231, 251, 253, 0.75);
    --bg-sheet: #f4feff;
    --border-color: rgba(6, 182, 212, 0.25);
    --text-primary: #062024;
    --text-secondary: #3f6b73;
}
html.light-mode[data-color-theme="lavender_dream"] {
    --bg-main: linear-gradient(135deg, #ede0ff, #dfc9ff);
    --bg-row: rgba(147, 51, 234, 0.1);
    --bg-glass: rgba(246, 240, 255, 0.75);
    --bg-sheet: #fbf7ff;
    --border-color: rgba(168, 85, 247, 0.25);
    --text-primary: #241830;
    --text-secondary: #7a6a8c;
}
html.light-mode[data-color-theme="cherry_blossom"] {
    --bg-main: linear-gradient(135deg, #ffe0ec, #ffd0e6);
    --bg-row: rgba(236, 72, 153, 0.1);
    --bg-glass: rgba(255, 240, 246, 0.75);
    --bg-sheet: #fff8fb;
    --border-color: rgba(244, 114, 182, 0.25);
    --text-primary: #33101f;
    --text-secondary: #8c5a70;
}
html.light-mode[data-color-theme="arctic_frost"] {
    --bg-main: linear-gradient(135deg, #dcf3ff, #c2e6fb);
    --bg-row: rgba(56, 189, 248, 0.1);
    --bg-glass: rgba(240, 249, 255, 0.75);
    --bg-sheet: #f8fdff;
    --border-color: rgba(56, 189, 248, 0.25);
    --text-primary: #0a2331;
    --text-secondary: #4d7284;
}
html.light-mode[data-color-theme="volcanic_ember"] {
    --bg-main: linear-gradient(135deg, #ffd9d2, #ffc2ba);
    --bg-row: rgba(239, 68, 68, 0.12);
    --bg-glass: rgba(253, 236, 236, 0.75);
    --bg-sheet: #fff5f5;
    --border-color: rgba(239, 68, 68, 0.28);
    --text-primary: #2e0a0a;
    --text-secondary: #8a4f4f;
}
html.light-mode[data-color-theme="mint_fresh"] {
    --bg-main: linear-gradient(135deg, #d3fff5, #b3f5e8);
    --bg-row: rgba(20, 184, 166, 0.1);
    --bg-glass: rgba(234, 255, 250, 0.75);
    --bg-sheet: #f4fffd;
    --border-color: rgba(20, 184, 166, 0.25);
    --text-primary: #052e28;
    --text-secondary: #4d7a70;
}
html.light-mode[data-color-theme="royal_amethyst"] {
    --bg-main: linear-gradient(135deg, #f6def5, #ecc7f5);
    --bg-row: rgba(192, 38, 211, 0.12);
    --bg-glass: rgba(250, 240, 255, 0.75);
    --bg-sheet: #fdf7ff;
    --border-color: rgba(192, 38, 211, 0.28);
    --text-primary: #210b33;
    --text-secondary: #6e5480;
}
html.light-mode[data-color-theme="citrus_lime"] {
    --bg-main: linear-gradient(135deg, #f7fbd0, #eef7b0);
    --bg-row: rgba(202, 138, 4, 0.1);
    --bg-glass: rgba(250, 253, 235, 0.75);
    --bg-sheet: #fdfef0;
    --border-color: rgba(202, 138, 4, 0.25);
    --text-primary: #2a2e05;
    --text-secondary: #6e7530;
}
html.light-mode[data-color-theme="copper_bronze"] {
    --bg-main: linear-gradient(135deg, #fde9cf, #f6d9ad);
    --bg-row: rgba(146, 64, 14, 0.1);
    --bg-glass: rgba(253, 244, 231, 0.75);
    --bg-sheet: #fffaf2;
    --border-color: rgba(217, 119, 6, 0.25);
    --text-primary: #2e1a05;
    --text-secondary: #7a5a35;
}
html.light-mode[data-color-theme="navy_sapphire"] {
    --bg-main: linear-gradient(135deg, #dbe7ff, #c2d6fb);
    --bg-row: rgba(30, 58, 138, 0.1);
    --bg-glass: rgba(236, 243, 255, 0.75);
    --bg-sheet: #f5f9ff;
    --border-color: rgba(59, 130, 246, 0.25);
    --text-primary: #0a1530;
    --text-secondary: #4a5a80;
}
html.light-mode[data-color-theme="deep_space"] {
    --bg-main: linear-gradient(135deg, #e6ecff, #d2ddfa);
    --bg-row: rgba(30, 58, 138, 0.08);
    --bg-glass: rgba(240, 244, 255, 0.75);
    --bg-sheet: #f6f8ff;
    --border-color: rgba(100, 140, 255, 0.25);
    --text-primary: #0d1330;
    --text-secondary: #4d5878;
}
html.light-mode[data-color-theme="lego_bricks"] {
    --bg-main: linear-gradient(135deg, #fff8e1, #ffe0b2);
    --bg-row: rgba(255, 200, 0, 0.12);
    --bg-glass: rgba(255, 250, 240, 0.75);
    --bg-sheet: #fffdf7;
    --border-color: rgba(208, 16, 18, 0.25);
    --text-primary: #2b0a00;
    --text-secondary: #7a4a30;
}
html.light-mode[data-color-theme="blueprint_draft"] {
    --bg-main: linear-gradient(135deg, #eaf4ff, #d3e8ff);
    --bg-row: rgba(79, 195, 247, 0.12);
    --bg-glass: rgba(240, 249, 255, 0.75);
    --bg-sheet: #f5fbff;
    --border-color: rgba(79, 195, 247, 0.3);
    --text-primary: #001233;
    --text-secondary: #355a80;
}
html.light-mode[data-color-theme="star_map"] {
    --bg-main: linear-gradient(135deg, #eef0ff, #dfe3ff);
    --bg-row: rgba(124, 131, 253, 0.12);
    --bg-glass: rgba(245, 246, 255, 0.75);
    --bg-sheet: #f7f8ff;
    --border-color: rgba(255, 193, 90, 0.3);
    --text-primary: #0a0a2a;
    --text-secondary: #4a4a7a;
}
html.light-mode[data-color-theme="vaporwave_neon"] {
    --bg-main: linear-gradient(135deg, #ffe0fa, #e0fbff);
    --bg-row: rgba(255, 46, 230, 0.1);
    --bg-glass: rgba(255, 245, 253, 0.75);
    --bg-sheet: #fff8fd;
    --border-color: rgba(255, 46, 230, 0.25);
    --text-primary: #2a0a30;
    --text-secondary: #7a4a70;
}
html.light-mode[data-color-theme="barbie_dream"] {
    --bg-main: linear-gradient(135deg, #ffe0f0, #ffc2e0);
    --bg-row: rgba(255, 105, 180, 0.12);
    --bg-glass: rgba(255, 245, 250, 0.75);
    --bg-sheet: #fff8fb;
    --border-color: rgba(219, 39, 119, 0.25);
    --text-primary: #3d0026;
    --text-secondary: #8c4a6a;
}
html.light-mode[data-color-theme="gold_sparkle"] {
    --bg-main: linear-gradient(135deg, #fff8e0, #ffedb8);
    --bg-row: rgba(251, 191, 36, 0.12);
    --bg-glass: rgba(255, 251, 235, 0.75);
    --bg-sheet: #fffdf5;
    --border-color: rgba(251, 191, 36, 0.3);
    --text-primary: #2b1d00;
    --text-secondary: #7a5c1a;
}
html.light-mode[data-color-theme="pink_sparkle"] {
    --bg-main: linear-gradient(135deg, #ffe0f0, #ffd0e8);
    --bg-row: rgba(236, 72, 153, 0.12);
    --bg-glass: rgba(255, 245, 250, 0.75);
    --bg-sheet: #fff8fb;
    --border-color: rgba(236, 72, 153, 0.25);
    --text-primary: #2b0018;
    --text-secondary: #8c4a6a;
}
html.light-mode[data-color-theme="silver_sparkle"] {
    --bg-main: linear-gradient(135deg, #f1f5f9, #e2e8f0);
    --bg-row: rgba(148, 163, 184, 0.12);
    --bg-glass: rgba(248, 250, 252, 0.75);
    --bg-sheet: #fafcfe;
    --border-color: rgba(148, 163, 184, 0.3);
    --text-primary: #14161a;
    --text-secondary: #525a68;
}
html.light-mode[data-color-theme="starlight_glam"] {
    --bg-main: linear-gradient(135deg, #ede0ff, #e0d5fb);
    --bg-row: rgba(167, 139, 250, 0.12);
    --bg-glass: rgba(246, 240, 255, 0.75);
    --bg-sheet: #fbf7ff;
    --border-color: rgba(244, 114, 182, 0.3);
    --text-primary: #0a0020;
    --text-secondary: #6e5a80;
}
html.light-mode[data-color-theme="diamond_sparkle"] {
    --bg-main: linear-gradient(135deg, #e0f4ff, #d0ecff);
    --bg-row: rgba(125, 211, 252, 0.12);
    --bg-glass: rgba(240, 251, 255, 0.75);
    --bg-sheet: #f5fdff;
    --border-color: rgba(125, 211, 252, 0.3);
    --text-primary: #0a1420;
    --text-secondary: #3f6b7a;
}
html.light-mode[data-color-theme="aurora_borealis"] {
    --bg-main: linear-gradient(135deg, #d0f5ea, #e0d5fb);
    --bg-row: rgba(74, 222, 190, 0.1);
    --bg-glass: rgba(240, 253, 250, 0.75);
    --bg-sheet: #f5fffc;
    --border-color: rgba(167, 139, 250, 0.25);
    --text-primary: #000a1a;
    --text-secondary: #4a5a7a;
}
html.light-mode[data-color-theme="pixel_art"] {
    --bg-main: linear-gradient(135deg, #e0faff, #fff0d0);
    --bg-row: rgba(45, 226, 230, 0.12);
    --bg-glass: rgba(240, 253, 255, 0.75);
    --bg-sheet: #f5feff;
    --border-color: rgba(45, 226, 230, 0.3);
    --text-primary: #0f0326;
    --text-secondary: #4a4a7a;
}
html.light-mode[data-color-theme="stock_market"] {
    --bg-main: linear-gradient(135deg, #e3fbe9, #c9f5d4);
    --bg-row: rgba(34, 197, 94, 0.1);
    --bg-glass: rgba(240, 253, 244, 0.75);
    --bg-sheet: #f5fff8;
    --border-color: rgba(34, 197, 94, 0.25);
    --text-primary: #00250f;
    --text-secondary: #4a7a5c;
}
html.light-mode[data-color-theme="neon_trading_chart"] {
    --bg-main: linear-gradient(135deg, #fde8f5, #e8e0fb);
    --bg-row: rgba(236, 72, 153, 0.1);
    --bg-glass: rgba(253, 245, 253, 0.75);
    --bg-sheet: #fffafd;
    --border-color: rgba(236, 72, 153, 0.25);
    --text-primary: #1a0520;
    --text-secondary: #6e4a70;
}
html.light-mode[data-color-theme="candlestick_bands"] {
    --bg-main: linear-gradient(135deg, #e0f7ff, #d0ecff);
    --bg-row: rgba(56, 189, 248, 0.1);
    --bg-glass: rgba(240, 251, 255, 0.75);
    --bg-sheet: #f5fdff;
    --border-color: rgba(56, 189, 248, 0.25);
    --text-primary: #04101a;
    --text-secondary: #3f5a70;
}
html.light-mode[data-color-theme="market_data_glow"] {
    --bg-main: linear-gradient(135deg, #fde8d8, #e0e0fb);
    --bg-row: rgba(251, 146, 60, 0.1);
    --bg-glass: rgba(253, 247, 240, 0.75);
    --bg-sheet: #fffaf5;
    --border-color: rgba(129, 140, 248, 0.25);
    --text-primary: #150a35;
    --text-secondary: #5a4a80;
}
html.light-mode[data-color-theme="steampunk_brass"] {
    --bg-main: linear-gradient(135deg, #f5e6d0, #e8d0a8);
    --bg-row: rgba(184, 115, 51, 0.12);
    --bg-glass: rgba(250, 244, 232, 0.75);
    --bg-sheet: #fdf8ef;
    --border-color: rgba(184, 115, 51, 0.3);
    --text-primary: #2b1a0a;
    --text-secondary: #7a5a35;
}
html.light-mode[data-color-theme="vintage_newspaper"] {
    --bg-main: linear-gradient(135deg, #f0e6d0, #e8dcc0);
    --bg-row: rgba(180, 160, 120, 0.15);
    --bg-glass: rgba(248, 243, 232, 0.75);
    --bg-sheet: #faf5e8;
    --border-color: rgba(140, 120, 90, 0.3);
    --text-primary: #2b241a;
    --text-secondary: #6b5f48;
}
html.light-mode[data-color-theme="film_noir"] {
    --bg-main: linear-gradient(135deg, #f0f0f0, #d4d4d4);
    --bg-row: rgba(0, 0, 0, 0.08);
    --bg-glass: rgba(248, 248, 248, 0.75);
    --bg-sheet: #fafafa;
    --border-color: rgba(0, 0, 0, 0.2);
    --text-primary: #0a0a0a;
    --text-secondary: #525252;
}
html.light-mode[data-color-theme="pop_art_comics"] {
    --bg-main: linear-gradient(135deg, #fff4cc, #ffe0e0);
    --bg-row: rgba(255, 23, 68, 0.1);
    --bg-glass: rgba(255, 250, 235, 0.75);
    --bg-sheet: #fffdf5;
    --border-color: rgba(255, 221, 0, 0.35);
    --text-primary: #1a0000;
    --text-secondary: #7a3a3a;
}
html.light-mode[data-color-theme="origami_paper"] {
    --bg-main: linear-gradient(135deg, #fff0e0, #ffe8d0);
    --bg-row: rgba(251, 146, 60, 0.1);
    --bg-glass: rgba(255, 248, 240, 0.75);
    --bg-sheet: #fffaf3;
    --border-color: rgba(251, 146, 60, 0.25);
    --text-primary: #2b1c14;
    --text-secondary: #8a6a50;
}
html.light-mode[data-color-theme="watercolor_wash"] {
    --bg-main: linear-gradient(135deg, #fce7f3, #e0e7ff);
    --bg-row: rgba(196, 145, 255, 0.1);
    --bg-glass: rgba(253, 245, 255, 0.75);
    --bg-sheet: #fefaff;
    --border-color: rgba(196, 145, 255, 0.25);
    --text-primary: #241830;
    --text-secondary: #6e5a80;
}
html.light-mode[data-color-theme="chemistry_lab"] {
    --bg-main: linear-gradient(135deg, #e0fbfa, #d0f5e8);
    --bg-row: rgba(45, 212, 191, 0.12);
    --bg-glass: rgba(240, 253, 252, 0.75);
    --bg-sheet: #f5fffd;
    --border-color: rgba(45, 212, 191, 0.3);
    --text-primary: #001a1a;
    --text-secondary: #3f6b6b;
}
html.light-mode[data-color-theme="botanical_greenhouse"] {
    --bg-main: linear-gradient(135deg, #e0fae6, #c5f2d0);
    --bg-row: rgba(74, 222, 128, 0.1);
    --bg-glass: rgba(240, 253, 244, 0.75);
    --bg-sheet: #f5fff8;
    --border-color: rgba(74, 222, 128, 0.25);
    --text-primary: #04220c;
    --text-secondary: #4a7a58;
}
html.light-mode[data-color-theme="kids_sky_grass"] {
    --bg-main: linear-gradient(135deg, #bfe3ff, #d4f5c3);
    --bg-row: rgba(74, 222, 128, 0.12);
    --bg-glass: rgba(240, 250, 255, 0.75);
    --bg-sheet: #f5fcff;
    --border-color: rgba(250, 204, 21, 0.35);
    --text-primary: #0a1a3d;
    --text-secondary: #3a5a80;
}
html.light-mode[data-color-theme="rainbow_balloons"] {
    --bg-main: linear-gradient(135deg, #fff5e0, #e0f0ff);
    --bg-row: rgba(244, 63, 94, 0.1);
    --bg-glass: rgba(255, 250, 240, 0.75);
    --bg-sheet: #fffdf5;
    --border-color: rgba(244, 63, 94, 0.25);
    --text-primary: #2b1a10;
    --text-secondary: #7a5a50;
}
html.light-mode[data-color-theme="underwater_ocean"] {
    --bg-main: linear-gradient(135deg, #d0f0ff, #b0e0f5);
    --bg-row: rgba(56, 189, 248, 0.12);
    --bg-glass: rgba(235, 251, 255, 0.75);
    --bg-sheet: #f0fbff;
    --border-color: rgba(56, 189, 248, 0.3);
    --text-primary: #001a2e;
    --text-secondary: #3f6b80;
}
html.light-mode[data-color-theme="dino_jungle"] {
    --bg-main: linear-gradient(135deg, #e0f5d0, #c8ecb0);
    --bg-row: rgba(132, 204, 22, 0.12);
    --bg-glass: rgba(240, 253, 232, 0.75);
    --bg-sheet: #f5fff0;
    --border-color: rgba(132, 204, 22, 0.3);
    --text-primary: #0a1f0a;
    --text-secondary: #4a6b3a;
}
html.light-mode[data-color-theme="space_rocket"] {
    --bg-main: linear-gradient(135deg, #e0e0fb, #c8c8f5);
    --bg-row: rgba(129, 140, 248, 0.12);
    --bg-glass: rgba(240, 240, 253, 0.75);
    --bg-sheet: #f5f5ff;
    --border-color: rgba(250, 204, 21, 0.35);
    --text-primary: #04051a;
    --text-secondary: #4a4a7a;
}
html.light-mode[data-color-theme="bull_run"] {
    --bg-main: linear-gradient(135deg, #e0fae6, #c0f0cc);
    --bg-row: rgba(74, 222, 128, 0.12);
    --bg-glass: rgba(240, 253, 244, 0.75);
    --bg-sheet: #f5fff8;
    --border-color: rgba(74, 222, 128, 0.3);
    --text-primary: #001a08;
    --text-secondary: #4a7a58;
}
html.light-mode[data-color-theme="bear_crash"] {
    --bg-main: linear-gradient(135deg, #ffe0e0, #ffc2c2);
    --bg-row: rgba(248, 113, 113, 0.12);
    --bg-glass: rgba(255, 240, 240, 0.75);
    --bg-sheet: #fff5f5;
    --border-color: rgba(248, 113, 113, 0.3);
    --text-primary: #1a0000;
    --text-secondary: #7a4040;
}
html.light-mode[data-color-theme="multi_ticker_grid"] {
    --bg-main: linear-gradient(135deg, #e8eef5, #d0dce8);
    --bg-row: rgba(148, 163, 184, 0.12);
    --bg-glass: rgba(245, 248, 251, 0.75);
    --bg-sheet: #f8fafc;
    --border-color: rgba(148, 163, 184, 0.3);
    --text-primary: #05070a;
    --text-secondary: #4a5568;
}
html.light-mode[data-color-theme="teddy_bear"] {
    --bg-main: linear-gradient(135deg, #fdf0dc, #f5deb8);
    --bg-row: rgba(217, 119, 6, 0.12);
    --bg-glass: rgba(253, 246, 234, 0.75);
    --bg-sheet: #fffaf0;
    --border-color: rgba(217, 119, 6, 0.25);
    --text-primary: #2b1a0a;
    --text-secondary: #7a5a35;
}
html.light-mode[data-color-theme="wooden_blocks"] {
    --bg-main: linear-gradient(135deg, #fdf0d8, #f5e0b0);
    --bg-row: rgba(180, 120, 60, 0.12);
    --bg-glass: rgba(253, 247, 234, 0.75);
    --bg-sheet: #fffaf0;
    --border-color: rgba(180, 120, 60, 0.3);
    --text-primary: #1f1408;
    --text-secondary: #7a5a35;
}
html.light-mode[data-color-theme="board_game_dice"] {
    --bg-main: linear-gradient(135deg, #ffe8ee, #fff0d0);
    --bg-row: rgba(244, 63, 94, 0.1);
    --bg-glass: rgba(255, 245, 248, 0.75);
    --bg-sheet: #fffafb;
    --border-color: rgba(244, 63, 94, 0.25);
    --text-primary: #1a0a10;
    --text-secondary: #7a4a58;
}
html.light-mode[data-color-theme="arcade_neon"] {
    --bg-main: linear-gradient(135deg, #f5e0ff, #dcfaff);
    --bg-row: rgba(217, 70, 239, 0.1);
    --bg-glass: rgba(250, 240, 255, 0.75);
    --bg-sheet: #fdf5ff;
    --border-color: rgba(217, 70, 239, 0.25);
    --text-primary: #0a0014;
    --text-secondary: #6e4a80;
}
html.light-mode[data-color-theme="kite_pinwheel"] {
    --bg-main: linear-gradient(135deg, #d0f0ff, #bfe8ff);
    --bg-row: rgba(56, 189, 248, 0.12);
    --bg-glass: rgba(235, 251, 255, 0.75);
    --bg-sheet: #f0fbff;
    --border-color: rgba(56, 189, 248, 0.3);
    --text-primary: #001a33;
    --text-secondary: #3f6b80;
}
html.light-mode[data-color-theme="tropical_leaves"] {
    --bg-main: linear-gradient(135deg, #d8fae0, #b8f0c8);
    --bg-row: rgba(22, 163, 74, 0.1);
    --bg-glass: rgba(235, 253, 240, 0.75);
    --bg-sheet: #f5fff8;
    --border-color: rgba(22, 163, 74, 0.25);
    --text-primary: #021a0e;
    --text-secondary: #4a7a58;
}
html.light-mode[data-color-theme="autumn_forest"] {
    --bg-main: linear-gradient(135deg, #ffe8d0, #ffd0a8);
    --bg-row: rgba(249, 115, 22, 0.12);
    --bg-glass: rgba(255, 246, 234, 0.75);
    --bg-sheet: #fffaf3;
    --border-color: rgba(249, 115, 22, 0.25);
    --text-primary: #2b1405;
    --text-secondary: #7a5030;
}
html.light-mode[data-color-theme="wildflower_meadow"] {
    --bg-main: linear-gradient(135deg, #e8f5d0, #d0ecc8);
    --bg-row: rgba(132, 204, 22, 0.1);
    --bg-glass: rgba(240, 253, 232, 0.75);
    --bg-sheet: #f5fff0;
    --border-color: rgba(236, 72, 153, 0.25);
    --text-primary: #0a1f0a;
    --text-secondary: #4a6b3a;
}
html.light-mode[data-color-theme="flower_garden"] {
    --bg-main: linear-gradient(135deg, #ffe0f5, #f5d0ff);
    --bg-row: rgba(236, 72, 153, 0.1);
    --bg-glass: rgba(255, 245, 253, 0.75);
    --bg-sheet: #fffafd;
    --border-color: rgba(236, 72, 153, 0.25);
    --text-primary: #1a0a1a;
    --text-secondary: #7a4a70;
}
html.light-mode[data-color-theme="ocean_waves"] {
    --bg-main: linear-gradient(135deg, #d0eeff, #b0dcf5);
    --bg-row: rgba(56, 189, 248, 0.1);
    --bg-glass: rgba(235, 250, 255, 0.75);
    --bg-sheet: #f0faff;
    --border-color: rgba(56, 189, 248, 0.25);
    --text-primary: #001220;
    --text-secondary: #3f6b80;
}
html.light-mode[data-color-theme="coral_reef"] {
    --bg-main: linear-gradient(135deg, #d0f5f0, #ffe0d8);
    --bg-row: rgba(45, 212, 191, 0.1);
    --bg-glass: rgba(240, 253, 250, 0.75);
    --bg-sheet: #f5fffc;
    --border-color: rgba(251, 146, 60, 0.25);
    --text-primary: #001a20;
    --text-secondary: #3f6b60;
}
html.light-mode[data-color-theme="cherry_blossom_garden"] {
    --bg-main: linear-gradient(135deg, #ffeaf3, #ffd9e8);
    --bg-row: rgba(244, 114, 182, 0.1);
    --bg-glass: rgba(255, 246, 250, 0.75);
    --bg-sheet: #fffafc;
    --border-color: rgba(244, 114, 182, 0.25);
    --text-primary: #1f0a14;
    --text-secondary: #7a4a60;
}
html.light-mode[data-color-theme="race_car"] {
    --bg-main: linear-gradient(135deg, #f0f0f0, #d8d8d8);
    --bg-row: rgba(239, 68, 68, 0.1);
    --bg-glass: rgba(248, 248, 248, 0.75);
    --bg-sheet: #fafafa;
    --border-color: rgba(239, 68, 68, 0.25);
    --text-primary: #0a0a0a;
    --text-secondary: #525252;
}
html.light-mode[data-color-theme="train_journey"] {
    --bg-main: linear-gradient(135deg, #f0e6d0, #e0d0b0);
    --bg-row: rgba(180, 120, 60, 0.1);
    --bg-glass: rgba(250, 244, 232, 0.75);
    --bg-sheet: #fdf8ef;
    --border-color: rgba(180, 120, 60, 0.25);
    --text-primary: #1a1005;
    --text-secondary: #7a5a35;
}
html.light-mode[data-color-theme="airplane_sky"] {
    --bg-main: linear-gradient(135deg, #d0e8ff, #b8daff);
    --bg-row: rgba(59, 130, 246, 0.1);
    --bg-glass: rgba(235, 246, 255, 0.75);
    --bg-sheet: #f0f8ff;
    --border-color: rgba(59, 130, 246, 0.25);
    --text-primary: #001a3d;
    --text-secondary: #3f5a80;
}
html.light-mode[data-color-theme="sailboat_waves"] {
    --bg-main: linear-gradient(135deg, #d0f0fb, #b0e4f5);
    --bg-row: rgba(14, 165, 233, 0.1);
    --bg-glass: rgba(235, 251, 255, 0.75);
    --bg-sheet: #f0fbff;
    --border-color: rgba(14, 165, 233, 0.25);
    --text-primary: #001a26;
    --text-secondary: #3f6b7a;
}
html.light-mode[data-color-theme="motorcycle_speed"] {
    --bg-main: linear-gradient(135deg, #f5e8d8, #e8d0b0);
    --bg-row: rgba(249, 115, 22, 0.12);
    --bg-glass: rgba(253, 247, 240, 0.75);
    --bg-sheet: #fffaf3;
    --border-color: rgba(249, 115, 22, 0.3);
    --text-primary: #0a0a0a;
    --text-secondary: #7a5030;
}
html.light-mode[data-color-theme="hot_air_balloon"] {
    --bg-main: linear-gradient(135deg, #ffe0f0, #fff0d0);
    --bg-row: rgba(251, 191, 36, 0.1);
    --bg-glass: rgba(255, 248, 240, 0.75);
    --bg-sheet: #fffaf5;
    --border-color: rgba(251, 191, 36, 0.25);
    --text-primary: #1a0a30;
    --text-secondary: #7a5a60;
}
html.light-mode[data-color-theme="bicycle_ride"] {
    --bg-main: linear-gradient(135deg, #e0fae6, #c0f0cc);
    --bg-row: rgba(34, 197, 94, 0.1);
    --bg-glass: rgba(240, 253, 244, 0.75);
    --bg-sheet: #f5fff8;
    --border-color: rgba(34, 197, 94, 0.25);
    --text-primary: #001a0a;
    --text-secondary: #4a7a58;
}
html.light-mode[data-color-theme="submarine_deep"] {
    --bg-main: linear-gradient(135deg, #d0e8fb, #b0d4f0);
    --bg-row: rgba(3, 105, 161, 0.1);
    --bg-glass: rgba(235, 246, 253, 0.75);
    --bg-sheet: #f0f9ff;
    --border-color: rgba(3, 105, 161, 0.25);
    --text-primary: #00050f;
    --text-secondary: #3f5a70;
}
html.light-mode[data-color-theme="helicopter_rotor"] {
    --bg-main: linear-gradient(135deg, #eef1f5, #dbe1e8);
    --bg-row: rgba(100, 116, 139, 0.1);
    --bg-glass: rgba(245, 247, 250, 0.75);
    --bg-sheet: #f8fafb;
    --border-color: rgba(250, 204, 21, 0.3);
    --text-primary: #14161a;
    --text-secondary: #525a68;
}
html.light-mode[data-color-theme="rocket_ship"] {
    --bg-main: linear-gradient(135deg, #e0e0fb, #c8c8f0);
    --bg-row: rgba(99, 102, 241, 0.1);
    --bg-glass: rgba(240, 240, 253, 0.75);
    --bg-sheet: #f5f5ff;
    --border-color: rgba(99, 102, 241, 0.25);
    --text-primary: #05010f;
    --text-secondary: #4a4a7a;
}
html.light-mode[data-color-theme="graphite_steel"] {
    --bg-main: linear-gradient(135deg, #e4e7eb, #d3d8dd);
    --bg-row: rgba(100, 116, 139, 0.1);
    --bg-glass: rgba(241, 243, 245, 0.75);
    --bg-sheet: #fafbfc;
    --border-color: rgba(100, 116, 139, 0.25);
    --text-primary: #1a1d21;
    --text-secondary: #5c6570;
}
html.light-mode body { background-color: #e9e6f2; }

/* נגישות: מצב ניגודיות גבוהה - דורס כל ערכת-נושא/מצב-בהיר שנבחרו (לכן
   !important על כל ערך), כי המטרה כאן היא קריאות מקסימלית, לא אסתטיקה.
   כהה: לבן/צהוב על שחור מלא. בהיר (light-mode פעיל בו-זמנית): שחור על לבן -
   שני הכיוונים עדיין "צבעים בולטים מאוד" כמו שהתבקש, לא רק היפוך גרדיאנט */
html.high-contrast {
    --bg-main: #000000 !important;
    --bg-row: #000000 !important;
    --bg-glass: #000000 !important;
    --bg-sheet: #000000 !important;
    --border-color: #ffffff !important;
    --text-primary: #ffffff !important;
    --text-secondary: #ffff00 !important;
    --accent-pink: #ffff00 !important;
    --accent-purple: #00ffff !important;
    --accent-purple-light: #00ffff !important;
    --accent-green: #00ff00 !important;
    --accent-cyan: #00ffff !important;
    --accent-gold: #ffff00 !important;
    --accent-red: #ff3b30 !important;
}
html.high-contrast.light-mode {
    --bg-main: #ffffff !important;
    --bg-row: #ffffff !important;
    --bg-glass: #ffffff !important;
    --bg-sheet: #ffffff !important;
    --border-color: #000000 !important;
    --text-primary: #000000 !important;
    --text-secondary: #000000 !important;
    --accent-pink: #b30000 !important;
    --accent-purple: #0000cc !important;
    --accent-purple-light: #0000cc !important;
    --accent-green: #006600 !important;
    --accent-cyan: #005580 !important;
    --accent-gold: #806600 !important;
}
/* מסנן צבע (עיוורון צבעים): גווני-אפור מלאים על כל האפליקציה - הכי פשוט
   ואמין, כי זה מוריד לגמרי הסתמכות על צבע (האפליקציה כבר לא מסתמכת רק על
   צבע לסטטוסים - יש תמיד גם סימן/אייקון, +/- ,✓/❌ וכו') */
.phone-wrapper.grayscale-mode { filter: grayscale(1); }
.color-filter-picker { display: flex; gap: 8px; margin-bottom: 4px; }
.color-filter-option {
    flex: 1 1 0;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 10px;
    color: var(--text-primary);
    font-size: 0.82rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}
.color-filter-option.active { border-color: var(--accent-pink); background-color: rgba(255, 0, 127, 0.1); color: var(--accent-pink-text); }
.color-filter-option:active { transform: scale(0.97); }
/* עיגולי-צבע לבחירת צבע טקסט לפתק/משימה בודדים (ר' CENTER_ITEM_COLOR_PRESETS
   ב-app.js) - "ברירת מחדל" (חזרה לצבע הטקסט הרגיל של הנושא) הוא עיגול עם
   קו-מתאר בלבד ואות A, לא צבע מוצק, כדי שיהיה ברור שהוא "ללא צבע נבחר" */
.note-color-swatches { display: flex; flex-wrap: wrap; gap: 10px; margin: 6px 0 10px; }
/* תצוגה מקדימה חיה של הפתק/משימה במודל ההוספה/עריכה (ר' updateCenterItemPreview
   ב-app.js) - אותו עיצוב-בסיס בדיוק כמו שורה אמיתית ברשימה (.center-list li),
   רק בלי הכפתורים, כדי שמה שרואים כאן יהיה בדיוק מה שיתקבל בפועל - לפי בקשה
   מפורשת ("שתהיה ממש דוגמא לאיך זה יראה") */
.center-list-item-preview {
    background-color: var(--bg-row);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.9rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    margin: 4px 0 12px;
    min-height: 20px;
    transition: var(--transition);
}
.center-list-item-preview .center-list-item-text { margin-inline-start: 0; }
.note-color-swatch {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: var(--transition);
}
.note-color-swatch.selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.3), 0 0 10px rgba(255, 255, 255, 0.3); transform: scale(1.08); }
.note-color-swatch-default { background-color: transparent; border: 2px dashed var(--text-secondary); color: var(--text-secondary); font-size: 0.8rem; font-weight: 700; display: flex; align-items: center; justify-content: center; }
.note-color-swatch-default.selected { border-style: solid; border-color: var(--accent-purple); color: var(--accent-purple-text); }
/* שדות קלט/כרטיסי משנה כהים באופן קבוע (רקע rgba(0,0,0,x) + טקסט לבן) -
   במצב בהיר הופכים לתיבות אפורות בהירות עם טקסט כהה, כדי להישאר קריאים */
/* שורות תוכן (לו"ז/ארוחות/התקדמות) משתמשות ב-var(--bg-row) - כך שגם במצב
   בהיר, החלפת ערכת נושא פרימיום צובעת אותן בגוון התואם, ולא רק את הרקע הגדול */
html.light-mode .day-tab,
html.light-mode .day-page,
html.light-mode .slot-input-group,
html.light-mode .meal-row,
html.light-mode .progress-row {
    background-color: var(--bg-row);
    color: var(--text-primary);
}
/* שדות קלט/טפסים נשארים תמיד בגוון אפור-נייטרלי קבוע, ללא קשר לערכת הנושא -
   כדי שיישארו נראים כמו שדה הזנה פונקציונלי, לא כמו שורת תוכן צבעונית */
html.light-mode .calendar-event-recur-interval-input,
html.light-mode .recipe-form-grid input,
html.light-mode .recipe-form-grid textarea,
html.light-mode .recipe-form-grid select,
html.light-mode #recipe-ai-raw-input,
html.light-mode .food-input,
html.light-mode .calories-input,
html.light-mode .weight-inputs-wrap input,
html.light-mode .hours-input,
html.light-mode .schedule-adder-grid select,
html.light-mode .schedule-adder-grid input,
html.light-mode .preset-manager-grid select,
html.light-mode .preset-manager-grid input,
html.light-mode #sport-custom-type-input,
html.light-mode #sport-quick-custom-type-input,
html.light-mode #water-daily-goal-input,
html.light-mode #calorie-daily-goal-input,
html.light-mode #protein-daily-goal-input,
html.light-mode #habit-name-input,
html.light-mode #contact-us-message,
html.light-mode #ai-schedule-duration-months,
html.light-mode #preset-quick-add-search,
html.light-mode #food-quick-add-input,
html.light-mode #routine-item-title-input,
html.light-mode #routine-tab-name-input,
html.light-mode #glance-edit-task-day-select,
html.light-mode #glance-edit-task-reminder,
html.light-mode #glance-edit-task-reminder-text,
html.light-mode #ai-quick-add-input,
html.light-mode .vision-card-back-add-row input {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--text-primary);
}
/* תיבות רשימה (פתקים/רשימת קניות/יומן) ותפריטים נפתחים משתמשות ב-var(--bg-row)
   כדי לקבל גם הן את גוון ערכת הנושא, עם זכוכית לבנה רכה כברירת מחדל - וה-
   color-scheme הופך מ-dark ל-light כדי שלוח השנה/התפריט הנייטיבי של הדפדפן
   (הפופאפ עצמו, שלא ניתן לעצב ב-CSS) ייפתח גם הוא בהיר ולא כתיבה שחורה */
html.light-mode .center-list li:not(.center-list-divider),
html.light-mode .calendar-event-item {
    background-color: var(--bg-row);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.08);
}
html.light-mode .calendar-event-series-dates {
    background-color: rgba(0, 0, 0, 0.04);
}
html.light-mode .language-select,
html.light-mode .preset-select-trigger {
    background-color: rgba(0, 0, 0, 0.05);
    color: var(--accent-purple-text);
    color-scheme: light;
}
html.light-mode input[type="date"] {
    background: rgba(0, 0, 0, 0.05) !important;
    color: var(--accent-purple-text) !important;
    color-scheme: light;
}
/* כרטיסי היתרונות במודל השדרוג לפרימיום: טקסט כהה כבר מגיע מ-var(--text-primary),
   אבל הרקע/מסגרת הסגולים העדינים (6%/15% אלפא) כמעט נבלעים ברקע לבן - מגבירים
   קצת את העוצמה ומוסיפים זוהר עדין כדי שהכרטיסים ייראו פרימיום גם במצב בהיר */
html.light-mode .premium-benefits-list li {
    background-color: rgba(168, 85, 247, 0.08);
    border-color: rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 12px rgba(168, 85, 247, 0.12);
}
body {
    /* var(--user-font) - נקבע ב-JS (applyGlobalFont) כשנבחר פונט פרימיום
       מותאם אישית מ-Google Fonts; לא מוגדר כברירת מחדל, אז נופל תמיד
       לערימת פונטי המערכת הרגילה */
    font-family: var(--user-font, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif);
    background-color: #07060a;
    color: var(--text-primary);
    margin: 0;
    padding: 0;
    /* הכיוון (RTL/LTR) נקבע דינמית ע"י ה-dir על ה-html, לא כאן, כדי שהחלפת שפה תעבוד */
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    min-height: 100dvh;
    -webkit-font-smoothing: antialiased;
    overflow: hidden;
    overflow-x: hidden !important;
    position: relative;
    max-width: 100vw;
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
    -webkit-tap-highlight-color: transparent;
}
/* טקסט בשדות קלט/טקסטאריה חייב להישאר ניתן לבחירה/עריכה כרגיל - רק תוויות
   ותוכן סטטי "מתים" לחלוטין (בלי בחירה, בלי תפריט חיפוש/העתקה של הדפדפן) */
input, textarea, select {
    -webkit-user-select: text;
    user-select: text;
    -webkit-touch-callout: default;
}
/* ברירת מחדל = מובייל תמיד מלא: בלי שום תקרת max-width מוגבלת כאן בכלל, כדי
   שלא יהיה שום "טווח ביניים" לא-מכוסה בין הבסיס לבין המדיה-קווארי הבאה - זה
   בדיוק מה ששבר את זה בעבר (טווח 421-768px ספציפי שלא תמיד "נתפס" נכון בכל
   מכשיר/דפדפן). התקרה הצרה (כרטיס "סימולטור טלפון") חלה אך ורק ממש 769px+,
   כלומר מסך שהוא כמעט בוודאות טאבלט/דסקטופ אמיתי ולא טלפון */
.phone-wrapper {
    width: 100%;
    max-width: 100vw;
    height: 100vh;
    height: 100dvh;
    /* var(--app-height) מוגדר ב-JS (setAppHeightVar, app.js) מ-window.innerHeight
       בפועל - עוקף מקרים באנדרואיד שבהם 100vh/100dvh לא מחריגים נכון את סרגל
       הניווט התחתון של המערכת, מה שגרם לסרגל הטאבים שלנו להיחתך מתחתיו */
    height: var(--app-height, 100dvh);
    /* background (לא background-color): --bg-main יכול להחזיק גם גרדיאנט
       בחלק מערכות הנושא הפרימיום (ר' data-color-theme למטה) - background-color
       פשוט מתעלם מערך גרדיאנט, ואילו background (הקיצור) מקבל את שניהם */
    background: var(--bg-main);
    position: relative;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    overflow-x: hidden !important;
    box-sizing: border-box;
    padding: 10px;
    border-left: 1px solid rgba(255, 255, 255, 0.02);
    border-right: 1px solid rgba(255, 255, 255, 0.02);
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.9);
}
.ambient-glow {
    position: absolute;
    border-radius: 50%;
    filter: blur(65px);
    -webkit-filter: blur(65px);
    opacity: 0.28;
    z-index: 1;
    pointer-events: none;
    animation: floatingGlow 10s infinite alternate ease-in-out;
}
.glow-pink { width: 200px; height: 200px; background-color: var(--accent-pink); top: 15%; left: -15%; }
.glow-purple { width: 240px; height: 240px; background-color: var(--accent-purple); bottom: 20%; right: -20%; animation-delay: -4s; }
header { text-align: center; margin-bottom: 15px; position: relative; z-index: 5; display: none; }
/* בלי רקע-זכוכית/מסגרת/צל - מאז שרשת הקוביות הוסרה (הניווט עבר לסרגל
   התחתון), "כרטיס" גדול עם כמעט כלום בפנים היה נראה כמו קוביה ריקה בול
   באמצע המסך; עכשיו זו רק שורת הברכה, שקופה על רקע האפליקציה */
/* רקע מסך הבית בלבד: ברירת המחדל שקטה לגמרי (בלי שמיים+דשא, בלי במה, בלי
   שורות מחברת - כולן בוטלו לפי בקשה מפורשת). z-index:-1 בתוך .home-hero-panel
   (שכבר יוצר הקשר-ערימה משלו בזכות position:relative+z-index:5) יושב מתחת
   לתוכן הפאנל אבל עדיין מעל רקע ה-phone-wrapper הכללי - כך שרק מסך הבית
   מושפע. .home-theme-pattern בפני עצמו ריק (ללא background-image) - רק
   ערכות הנושא המיוחדות בפרימיום (ר' למטה) נותנות לו דוגמת רקע ייחודית */
.home-sky-scene { position: absolute; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.home-theme-pattern { position: absolute; inset: 0; }
/* דוגמאות רקע ייחודיות לכל ערכת נושא מיוחדת - לא רק צבעים, אלא מוטיב אמיתי
   שמזכיר את הנושא (משטח לגו עם פטמות, נייר שרטוט, שמיים זרועי כוכבים,
   רשת ניאון) - כל השכבות ב-CSS טהור (גרדיאנטים חוזרים), בלי תמונות */
html[data-color-theme="lego_bricks"] .home-sky-scene .home-theme-pattern,
[data-color-theme="lego_bricks"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 20px 20px, rgba(255, 214, 51, 0.55) 0 6px, transparent 7px),
        linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
    background-size: 40px 40px, 40px 40px, 40px 40px;
}
html[data-color-theme="blueprint_draft"] .home-sky-scene .home-theme-pattern,
[data-color-theme="blueprint_draft"] > .home-theme-pattern {
    background-image:
        linear-gradient(rgba(120, 190, 255, 0.14) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 190, 255, 0.14) 1px, transparent 1px),
        linear-gradient(rgba(120, 190, 255, 0.3) 1px, transparent 1px),
        linear-gradient(90deg, rgba(120, 190, 255, 0.3) 1px, transparent 1px);
    background-size: 20px 20px, 20px 20px, 100px 100px, 100px 100px;
}
/* ברירת המחדל (data-theme="default") וכל 17 ערכות הצבע הפרימיום (הבחירה
   הראשונה, השטוחה - לא הקונספטואליות עם הדוגמאות המצוירות): שמיים דינמיים
   לפי שעה - כוכבים בלילה (אותה תבנית בדיוק כמו star_map למטה) או שמש קטנה
   ביום, מעל ה---bg-main של כל ערכה (בלי גרדיאנט נפרד משלה) - לפי בקשה
   מפורשת שנייה ("תעשה את זה לכל הערכות נושא עם הצבע"). sky-day/sky-night
   מתווספות ע"י updateHomeSkyDayNight ב-app.js לפי השעה המקומית.
   html:not([data-color-theme]) ולא [data-color-theme="default"] - כי
   applyColorTheme מסיר את התכונה לגמרי כשבוחרים 'default' (ר' app.js),
   לא מגדיר אותה לערך "default". :not(.light-mode) בכל השורות - ברקע בהיר
   (מצב בהיר) כוכבים לבנים לא ייראו, ולא ביקשה את זה שם.
   .home-sky-topstrip - אלמנט נפרד עם גובה קבוע (לא mask-image על
   home-theme-pattern המשותף - לא עבד באמינות בבדיקה בפועל, גם בנייד וגם
   במחשב) - פשוט position:absolute + height קבוע + overflow:hidden, בלי
   שום תלות בתמיכת mask-image בדפדפן - לפי בקשה מפורשת "תחשוב על דרך אחרת" */
/* --sky-sun-x/--sky-sun-y - נקודת העיגון של השמש (יום בלבד, לא נוגע
   בכוכבי הלילה שממורכזים כתבנית-אריחים חוזרת ולא בנקודה בודדת) - ברירת
   המחדל קרובה לכותרת "בוקר טוב", עם דריסה למובייל/דסקטופ למטה, לפי בקשה
   מפורשת ("השמש קרובה יותר לבוקר טוב"/"במובייל היא מאחורי כפתור התפריט") */
.home-sky-topstrip { position: absolute; top: 0; inset-inline: 0; height: 220px; overflow: hidden; --sky-sun-x: 82%; --sky-sun-y: 14%; }
@media (max-width: 480px) {
    .home-sky-topstrip { --sky-sun-x: 62%; }
}
@media (min-width: 1024px) {
    .home-sky-topstrip { --sky-sun-x: 92%; --sky-sun-y: 10%; }
}
html:not(.light-mode):not([data-color-theme]) .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="blue_teal"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="gold_red"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="forest_emerald"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="rose_gold"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="midnight_indigo"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="sunset_coral"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="ocean_teal"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="lavender_dream"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="cherry_blossom"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="arctic_frost"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="volcanic_ember"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="mint_fresh"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="royal_amethyst"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="graphite_steel"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="citrus_lime"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="copper_bronze"] .home-sky-scene .home-sky-topstrip.sky-night,
html:not(.light-mode)[data-color-theme="navy_sapphire"] .home-sky-scene .home-sky-topstrip.sky-night {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 90px 70px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 150px 20px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 50px 120px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 130px 150px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 10px 170px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 175px 110px, rgba(255, 255, 255, 0.75), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
html:not(.light-mode):not([data-color-theme]) .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="blue_teal"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="gold_red"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="forest_emerald"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="rose_gold"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="midnight_indigo"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="sunset_coral"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="ocean_teal"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="lavender_dream"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="cherry_blossom"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="arctic_frost"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="volcanic_ember"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="mint_fresh"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="royal_amethyst"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="graphite_steel"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="citrus_lime"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="copper_bronze"] .home-sky-scene .home-sky-topstrip.sky-day,
html:not(.light-mode)[data-color-theme="navy_sapphire"] .home-sky-scene .home-sky-topstrip.sky-day {
    /* "שעון סאנברסט" עם שדה נצנצים (אפשרות 103 בהשוואת השמשות) - גרעין
       פליז קטן, 12 קרניים דקות (repeating-conic-gradient בטבעת בזווית של
       30deg, כמו שעון קיר), ומסביב נקודות-כוכב עדינות + כמה נצנצי ✦ (כל
       נצנץ = שתי אליפסות דקות מצטלבות) לפי בקשה מפורשת. ה-mask-image
       מגביל את הקרניים האינסופיות-מטבען של conic-gradient לעיגול סביב
       נקודת השמש בלבד - שייך רק ל-.sky-day, לא נוגע בכוכבי הלילה */
    background-image:
        repeating-conic-gradient(from 0deg at var(--sky-sun-x) var(--sky-sun-y), rgba(232, 192, 125, 0.65) 0deg 2deg, transparent 2deg 30deg),
        radial-gradient(circle at var(--sky-sun-x) var(--sky-sun-y), #fff6e0 0 4px, #e8c07d 4px 8px, rgba(232, 192, 125, 0.4) 8px 14px, transparent 15px),
        radial-gradient(2px 2px at calc(var(--sky-sun-x) - 29px) calc(var(--sky-sun-y) - 37px), rgba(255, 246, 224, 0.9), transparent),
        radial-gradient(1.5px 1.5px at calc(var(--sky-sun-x) - 39px) calc(var(--sky-sun-y) - 23px), rgba(255, 246, 224, 0.85), transparent),
        radial-gradient(2px 2px at calc(var(--sky-sun-x) + 37px) calc(var(--sky-sun-y) - 1px), rgba(255, 246, 224, 0.9), transparent),
        radial-gradient(1.5px 1.5px at calc(var(--sky-sun-x) - 33px) calc(var(--sky-sun-y) + 23px), rgba(255, 246, 224, 0.85), transparent),
        radial-gradient(2px 2px at calc(var(--sky-sun-x) + 15px) calc(var(--sky-sun-y) + 35px), rgba(255, 246, 224, 0.9), transparent),
        radial-gradient(1.5px 1.5px at calc(var(--sky-sun-x) + 35px) calc(var(--sky-sun-y) - 29px), rgba(255, 246, 224, 0.85), transparent),
        radial-gradient(2px 2px at calc(var(--sky-sun-x) - 41px) calc(var(--sky-sun-y) + 11px), rgba(255, 246, 224, 0.9), transparent),
        radial-gradient(1.5px 6px at calc(var(--sky-sun-x) + 7px) calc(var(--sky-sun-y) - 43px), rgba(255, 240, 210, 0.9), transparent),
        radial-gradient(6px 1.5px at calc(var(--sky-sun-x) + 7px) calc(var(--sky-sun-y) - 43px), rgba(255, 240, 210, 0.9), transparent),
        radial-gradient(1.2px 5px at calc(var(--sky-sun-x) - 45px) calc(var(--sky-sun-y) - 7px), rgba(255, 240, 210, 0.85), transparent),
        radial-gradient(5px 1.2px at calc(var(--sky-sun-x) - 45px) calc(var(--sky-sun-y) - 7px), rgba(255, 240, 210, 0.85), transparent),
        radial-gradient(1.4px 5.5px at calc(var(--sky-sun-x) + 33px) calc(var(--sky-sun-y) + 27px), rgba(255, 240, 210, 0.88), transparent),
        radial-gradient(5.5px 1.4px at calc(var(--sky-sun-x) + 33px) calc(var(--sky-sun-y) + 27px), rgba(255, 240, 210, 0.88), transparent),
        radial-gradient(1.1px 4.5px at calc(var(--sky-sun-x) + 31px) calc(var(--sky-sun-y) - 39px), rgba(255, 240, 210, 0.8), transparent),
        radial-gradient(4.5px 1.1px at calc(var(--sky-sun-x) + 31px) calc(var(--sky-sun-y) - 39px), rgba(255, 240, 210, 0.8), transparent);
    background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(circle 52px at var(--sky-sun-x) var(--sky-sun-y), black 55%, transparent 100%);
    mask-image: radial-gradient(circle 52px at var(--sky-sun-x) var(--sky-sun-y), black 55%, transparent 100%);
}
/* אותו אפקט יום/לילה, גרסת מצב בהיר - היה חסר לגמרי (הכוכבים הלבנים
   מהמצב הכהה פשוט לא נראים על רקע בהיר) לפי בקשה מפורשת. אותה גאומטריה
   בדיוק כמו למעלה, רק בגוונים כהים/רוויים יותר שנראים על פסטל בהיר -
   כוכבי לילה בגוון אינדיגו-מעומעם במקום לבן, ושמש-יום בגוון ענבר עמוק
   יותר במקום קרם-לבן */
html.light-mode:not([data-color-theme]) .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="blue_teal"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="gold_red"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="forest_emerald"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="rose_gold"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="midnight_indigo"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="sunset_coral"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="ocean_teal"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="lavender_dream"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="cherry_blossom"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="arctic_frost"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="volcanic_ember"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="mint_fresh"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="royal_amethyst"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="graphite_steel"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="citrus_lime"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="copper_bronze"] .home-sky-scene .home-sky-topstrip.sky-night,
html.light-mode[data-color-theme="navy_sapphire"] .home-sky-scene .home-sky-topstrip.sky-night {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(71, 60, 130, 0.5), transparent),
        radial-gradient(1px 1px at 90px 70px, rgba(71, 60, 130, 0.38), transparent),
        radial-gradient(2px 2px at 150px 20px, rgba(71, 60, 130, 0.45), transparent),
        radial-gradient(1px 1px at 50px 120px, rgba(71, 60, 130, 0.32), transparent),
        radial-gradient(1.5px 1.5px at 130px 150px, rgba(71, 60, 130, 0.45), transparent),
        radial-gradient(1px 1px at 10px 170px, rgba(71, 60, 130, 0.28), transparent),
        radial-gradient(1.5px 1.5px at 175px 110px, rgba(71, 60, 130, 0.4), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
html.light-mode:not([data-color-theme]) .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="blue_teal"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="gold_red"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="forest_emerald"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="rose_gold"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="midnight_indigo"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="sunset_coral"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="ocean_teal"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="lavender_dream"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="cherry_blossom"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="arctic_frost"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="volcanic_ember"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="mint_fresh"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="royal_amethyst"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="graphite_steel"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="citrus_lime"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="copper_bronze"] .home-sky-scene .home-sky-topstrip.sky-day,
html.light-mode[data-color-theme="navy_sapphire"] .home-sky-scene .home-sky-topstrip.sky-day {
    background-image:
        repeating-conic-gradient(from 0deg at var(--sky-sun-x) var(--sky-sun-y), rgba(154, 100, 30, 0.55) 0deg 2deg, transparent 2deg 30deg),
        radial-gradient(circle at var(--sky-sun-x) var(--sky-sun-y), #fff0d0 0 4px, #c9822a 4px 8px, rgba(154, 100, 30, 0.4) 8px 14px, transparent 15px),
        radial-gradient(2px 2px at calc(var(--sky-sun-x) - 29px) calc(var(--sky-sun-y) - 37px), rgba(140, 90, 20, 0.7), transparent),
        radial-gradient(1.5px 1.5px at calc(var(--sky-sun-x) - 39px) calc(var(--sky-sun-y) - 23px), rgba(140, 90, 20, 0.6), transparent),
        radial-gradient(2px 2px at calc(var(--sky-sun-x) + 37px) calc(var(--sky-sun-y) - 1px), rgba(140, 90, 20, 0.7), transparent),
        radial-gradient(1.5px 1.5px at calc(var(--sky-sun-x) - 33px) calc(var(--sky-sun-y) + 23px), rgba(140, 90, 20, 0.6), transparent),
        radial-gradient(2px 2px at calc(var(--sky-sun-x) + 15px) calc(var(--sky-sun-y) + 35px), rgba(140, 90, 20, 0.7), transparent),
        radial-gradient(1.5px 1.5px at calc(var(--sky-sun-x) + 35px) calc(var(--sky-sun-y) - 29px), rgba(140, 90, 20, 0.6), transparent),
        radial-gradient(2px 2px at calc(var(--sky-sun-x) - 41px) calc(var(--sky-sun-y) + 11px), rgba(140, 90, 20, 0.7), transparent),
        radial-gradient(1.5px 6px at calc(var(--sky-sun-x) + 7px) calc(var(--sky-sun-y) - 43px), rgba(130, 85, 20, 0.65), transparent),
        radial-gradient(6px 1.5px at calc(var(--sky-sun-x) + 7px) calc(var(--sky-sun-y) - 43px), rgba(130, 85, 20, 0.65), transparent),
        radial-gradient(1.2px 5px at calc(var(--sky-sun-x) - 45px) calc(var(--sky-sun-y) - 7px), rgba(130, 85, 20, 0.6), transparent),
        radial-gradient(5px 1.2px at calc(var(--sky-sun-x) - 45px) calc(var(--sky-sun-y) - 7px), rgba(130, 85, 20, 0.6), transparent),
        radial-gradient(1.4px 5.5px at calc(var(--sky-sun-x) + 33px) calc(var(--sky-sun-y) + 27px), rgba(130, 85, 20, 0.62), transparent),
        radial-gradient(5.5px 1.4px at calc(var(--sky-sun-x) + 33px) calc(var(--sky-sun-y) + 27px), rgba(130, 85, 20, 0.62), transparent),
        radial-gradient(1.1px 4.5px at calc(var(--sky-sun-x) + 31px) calc(var(--sky-sun-y) - 39px), rgba(130, 85, 20, 0.55), transparent),
        radial-gradient(4.5px 1.1px at calc(var(--sky-sun-x) + 31px) calc(var(--sky-sun-y) - 39px), rgba(130, 85, 20, 0.55), transparent);
    background-repeat: no-repeat;
    -webkit-mask-image: radial-gradient(circle 52px at var(--sky-sun-x) var(--sky-sun-y), black 55%, transparent 100%);
    mask-image: radial-gradient(circle 52px at var(--sky-sun-x) var(--sky-sun-y), black 55%, transparent 100%);
}
html[data-color-theme="star_map"] .home-sky-scene .home-theme-pattern,
[data-color-theme="star_map"] > .home-theme-pattern {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(255, 255, 255, 0.9), transparent),
        radial-gradient(1px 1px at 90px 70px, rgba(255, 255, 255, 0.7), transparent),
        radial-gradient(2px 2px at 150px 20px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 50px 120px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(1.5px 1.5px at 130px 150px, rgba(255, 255, 255, 0.85), transparent),
        radial-gradient(1px 1px at 10px 170px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(1.5px 1.5px at 175px 110px, rgba(255, 255, 255, 0.75), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
html[data-color-theme="vaporwave_neon"] .home-sky-scene .home-theme-pattern,
[data-color-theme="vaporwave_neon"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 50% 100%, rgba(255, 110, 255, 0.35), transparent 60%),
        linear-gradient(rgba(255, 0, 230, 0.18) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0, 255, 242, 0.18) 1px, transparent 1px);
    background-size: 100% 100%, 34px 34px, 34px 34px;
}
html[data-color-theme="barbie_dream"] .home-sky-scene .home-theme-pattern,
[data-color-theme="barbie_dream"] > .home-theme-pattern {
    background-image:
        radial-gradient(2px 2px at 30px 40px, rgba(255, 215, 0, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 100px 90px, rgba(255, 255, 255, 0.8), transparent),
        radial-gradient(2px 2px at 160px 30px, rgba(255, 105, 180, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 60px 140px, rgba(255, 215, 0, 0.7), transparent),
        radial-gradient(2px 2px at 140px 160px, rgba(255, 255, 255, 0.85), transparent);
    background-size: 180px 180px;
    background-repeat: repeat;
}
html[data-color-theme="aurora_borealis"] .home-sky-scene .home-theme-pattern,
[data-color-theme="aurora_borealis"] > .home-theme-pattern {
    background-image:
        linear-gradient(100deg, transparent 30%, rgba(74, 222, 128, 0.18) 40%, transparent 55%),
        linear-gradient(110deg, transparent 45%, rgba(167, 139, 250, 0.15) 55%, transparent 68%),
        linear-gradient(95deg, transparent 60%, rgba(103, 232, 249, 0.15) 68%, transparent 80%);
    background-size: 100% 100%;
}
html[data-color-theme="pixel_art"] .home-sky-scene .home-theme-pattern,
[data-color-theme="pixel_art"] > .home-theme-pattern {
    background-image:
        repeating-conic-gradient(rgba(255, 255, 255, 0.05) 0% 25%, transparent 0% 50%),
        radial-gradient(rgba(255, 56, 100, 0.5) 40%, transparent 40%),
        radial-gradient(rgba(45, 226, 230, 0.5) 40%, transparent 40%);
    background-size: 24px 24px, 96px 96px, 96px 96px;
    background-position: 0 0, 0 0, 48px 48px;
}
html[data-color-theme="stock_market"] .home-sky-scene .home-theme-pattern,
[data-color-theme="stock_market"] > .home-theme-pattern {
    background-image:
        linear-gradient(rgba(34, 197, 94, 0.12) 1px, transparent 1px),
        linear-gradient(90deg, rgba(34, 197, 94, 0.12) 1px, transparent 1px),
        linear-gradient(45deg, transparent 48%, rgba(34, 197, 94, 0.5) 49%, rgba(34, 197, 94, 0.5) 51%, transparent 52%);
    background-size: 40px 40px, 40px 40px, 80px 80px;
}
html[data-color-theme="neon_trading_chart"] .home-sky-scene .home-theme-pattern,
[data-color-theme="neon_trading_chart"] > .home-theme-pattern {
    background-image:
        linear-gradient(105deg, transparent 20%, rgba(236, 72, 153, 0.22) 35%, transparent 50%),
        linear-gradient(75deg, transparent 40%, rgba(99, 102, 241, 0.2) 55%, transparent 70%),
        repeating-linear-gradient(90deg, rgba(192, 132, 252, 0.3) 0 3px, transparent 3px 9px);
    background-size: 100% 100%, 100% 100%, 100% 36px;
    background-repeat: no-repeat, no-repeat, repeat-x;
    background-position: 0 0, 0 0, 0 100%;
}
html[data-color-theme="candlestick_bands"] .home-sky-scene .home-theme-pattern,
[data-color-theme="candlestick_bands"] > .home-theme-pattern {
    background-image:
        repeating-linear-gradient(90deg, rgba(34, 211, 168, 0.35) 0 4px, transparent 4px 8px, rgba(244, 63, 94, 0.3) 8px 12px, transparent 12px 16px),
        linear-gradient(180deg, transparent 35%, rgba(56, 189, 248, 0.12) 45%, rgba(56, 189, 248, 0.12) 65%, transparent 75%);
    background-size: 32px 100%, 100% 100%;
    background-repeat: repeat-x, no-repeat;
}
html[data-color-theme="market_data_glow"] .home-sky-scene .home-theme-pattern,
[data-color-theme="market_data_glow"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 50% 100%, rgba(129, 140, 248, 0.35), transparent 60%),
        repeating-linear-gradient(90deg, rgba(251, 146, 60, 0.3) 0 8px, transparent 8px 20px),
        linear-gradient(0deg, rgba(244, 114, 182, 0.25) 0%, transparent 45%);
    background-size: 100% 100%, 100% 100%, 100% 100%;
}
html[data-color-theme="steampunk_brass"] .home-sky-scene .home-theme-pattern,
[data-color-theme="steampunk_brass"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 25px 25px, rgba(232, 184, 120, 0.35) 0 3px, transparent 4px, transparent 10px, rgba(232, 184, 120, 0.15) 11px, transparent 12px),
        linear-gradient(rgba(232, 184, 120, 0.06) 1px, transparent 1px),
        linear-gradient(90deg, rgba(232, 184, 120, 0.06) 1px, transparent 1px);
    background-size: 50px 50px, 50px 50px, 50px 50px;
}
html[data-color-theme="vintage_newspaper"] .home-sky-scene .home-theme-pattern,
[data-color-theme="vintage_newspaper"] > .home-theme-pattern {
    background-image:
        linear-gradient(90deg, rgba(74, 64, 48, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 4px 4px, rgba(74, 64, 48, 0.2) 0 1.5px, transparent 2px);
    background-size: 90px 100%, 8px 8px;
}
html[data-color-theme="film_noir"] .home-sky-scene .home-theme-pattern,
[data-color-theme="film_noir"] > .home-theme-pattern {
    background-image: repeating-linear-gradient(115deg, rgba(255, 255, 255, 0.06) 0 10px, transparent 10px 26px);
}
html[data-color-theme="pop_art_comics"] .home-sky-scene .home-theme-pattern,
[data-color-theme="pop_art_comics"] > .home-theme-pattern {
    background-image: radial-gradient(circle at 6px 6px, rgba(255, 221, 0, 0.5) 0 3px, transparent 3.5px);
    background-size: 14px 14px;
}
html[data-color-theme="origami_paper"] .home-sky-scene .home-theme-pattern,
[data-color-theme="origami_paper"] > .home-theme-pattern {
    background-image:
        linear-gradient(45deg, rgba(251, 146, 60, 0.12) 25%, transparent 25%, transparent 75%, rgba(251, 146, 60, 0.12) 75%),
        linear-gradient(-45deg, rgba(244, 114, 182, 0.1) 25%, transparent 25%, transparent 75%, rgba(244, 114, 182, 0.1) 75%);
    background-size: 60px 60px, 60px 60px;
}
html[data-color-theme="watercolor_wash"] .home-sky-scene .home-theme-pattern,
[data-color-theme="watercolor_wash"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 25% 30%, rgba(249, 168, 212, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 70% 60%, rgba(196, 181, 253, 0.25) 0%, transparent 45%),
        radial-gradient(circle at 45% 80%, rgba(165, 243, 252, 0.22) 0%, transparent 45%);
    background-size: 100% 100%;
}
html[data-color-theme="chemistry_lab"] .home-sky-scene .home-theme-pattern,
[data-color-theme="chemistry_lab"] > .home-theme-pattern {
    background-image:
        radial-gradient(3px 3px at 30px 40px, rgba(45, 212, 191, 0.5), transparent),
        radial-gradient(2px 2px at 90px 20px, rgba(163, 230, 53, 0.5), transparent),
        radial-gradient(4px 4px at 140px 90px, rgba(45, 212, 191, 0.4), transparent),
        radial-gradient(2px 2px at 60px 120px, rgba(103, 232, 249, 0.5), transparent),
        radial-gradient(3px 3px at 170px 150px, rgba(163, 230, 53, 0.45), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
html[data-color-theme="botanical_greenhouse"] .home-sky-scene .home-theme-pattern,
[data-color-theme="botanical_greenhouse"] > .home-theme-pattern {
    background-image:
        radial-gradient(ellipse 10px 4px at 30px 30px, rgba(74, 222, 128, 0.35), transparent),
        radial-gradient(ellipse 8px 3px at 100px 60px, rgba(187, 247, 208, 0.3), transparent),
        radial-gradient(ellipse 12px 5px at 160px 20px, rgba(22, 163, 74, 0.3), transparent),
        radial-gradient(ellipse 9px 4px at 50px 130px, rgba(74, 222, 128, 0.3), transparent),
        radial-gradient(ellipse 10px 4px at 140px 150px, rgba(187, 247, 208, 0.28), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
/* היחיד עם מוטיב מלא (שמש + עננים + אופק דשא) ולא רק דוגמה חוזרת - לפי בקשה
   מפורשת "אפילו עם צריך עננים ושמיים ודשא אז תשקיע" */
html[data-color-theme="kids_sky_grass"] .home-sky-scene .home-theme-pattern,
[data-color-theme="kids_sky_grass"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 80% 15%, rgba(250, 204, 21, 0.8) 0 18px, rgba(250, 204, 21, 0.3) 19px 22px, transparent 23px),
        radial-gradient(ellipse 30px 12px at 20% 20%, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(ellipse 22px 10px at 45% 12%, rgba(255, 255, 255, 0.4), transparent),
        linear-gradient(180deg, transparent 0%, transparent 62%, rgba(74, 222, 128, 0.35) 63%, rgba(74, 222, 128, 0.5) 100%);
    background-size: 100% 100%;
}
/* קשת ובלונים - קשת מצוירת כטבעות מקוננות עולות מהתחתית + שני בלונים צפים */
html[data-color-theme="rainbow_balloons"] .home-sky-scene .home-theme-pattern,
[data-color-theme="rainbow_balloons"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 50% 130%, transparent 55%, rgba(244, 63, 94, 0.35) 56% 60%, transparent 61%),
        radial-gradient(circle at 50% 130%, transparent 61%, rgba(251, 191, 36, 0.35) 62% 66%, transparent 67%),
        radial-gradient(circle at 50% 130%, transparent 67%, rgba(34, 197, 94, 0.35) 68% 72%, transparent 73%),
        radial-gradient(circle at 50% 130%, transparent 73%, rgba(59, 130, 246, 0.35) 74% 78%, transparent 79%),
        radial-gradient(circle at 20% 20%, rgba(168, 85, 247, 0.6) 0 14px, transparent 15px),
        radial-gradient(circle at 75% 15%, rgba(244, 63, 94, 0.6) 0 12px, transparent 13px);
    background-size: 100% 100%;
}
/* עולם מתחת למים - בועות עולות + אדוות אור גלי */
html[data-color-theme="underwater_ocean"] .home-sky-scene .home-theme-pattern,
[data-color-theme="underwater_ocean"] > .home-theme-pattern {
    background-image:
        radial-gradient(3px 3px at 30px 200px, rgba(255, 255, 255, 0.6), transparent),
        radial-gradient(2px 2px at 90px 150px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(4px 4px at 150px 250px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(2px 2px at 60px 100px, rgba(255, 255, 255, 0.4), transparent),
        repeating-radial-gradient(ellipse 300px 40px at 50% 0%, rgba(94, 234, 212, 0.15) 0 10px, transparent 10px 40px);
    background-size: 200px 300px, 200px 300px, 200px 300px, 200px 300px, 100% 100%;
    background-repeat: repeat, repeat, repeat, repeat, no-repeat;
}
/* עולם הדינוזאורים - נקודות עור-דינוזאור + עלי ג'ונגל מפוזרים */
html[data-color-theme="dino_jungle"] .home-sky-scene .home-theme-pattern,
[data-color-theme="dino_jungle"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 25px 25px, rgba(250, 204, 21, 0.3) 0 5px, transparent 6px),
        radial-gradient(ellipse 14px 6px at 100px 60px, rgba(132, 204, 22, 0.35), transparent),
        radial-gradient(ellipse 16px 7px at 160px 130px, rgba(132, 204, 22, 0.3), transparent),
        radial-gradient(circle at 140px 30px, rgba(250, 204, 21, 0.25) 0 4px, transparent 5px);
    background-size: 90px 90px, 200px 200px, 200px 200px, 90px 90px;
}
/* טיסה לחלל - ירח בפינה + כוכבים מפוזרים + שובל רקטה אלכסוני */
html[data-color-theme="space_rocket"] .home-sky-scene .home-theme-pattern,
[data-color-theme="space_rocket"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 82% 12%, rgba(253, 230, 138, 0.9) 0 16px, rgba(253, 230, 138, 0.25) 17px 20px, transparent 21px),
        radial-gradient(1.5px 1.5px at 20px 30px, #fff, transparent),
        radial-gradient(1px 1px at 60px 80px, #fff, transparent),
        radial-gradient(2px 2px at 120px 40px, #fff, transparent),
        radial-gradient(1px 1px at 160px 110px, #fff, transparent),
        linear-gradient(35deg, transparent 40%, rgba(244, 63, 94, 0.3) 48%, rgba(253, 230, 138, 0.4) 50%, transparent 58%);
    background-size: 100% 100%, 180px 180px, 180px 180px, 180px 180px, 180px 180px, 100% 100%;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat, no-repeat;
}
html[data-color-theme="bull_run"] .home-sky-scene .home-theme-pattern,
[data-color-theme="bull_run"] > .home-theme-pattern {
    background-image:
        repeating-linear-gradient(90deg, rgba(74, 222, 128, 0.4) 0 4px, transparent 4px 8px, rgba(22, 163, 74, 0.35) 8px 10px, transparent 10px 16px),
        linear-gradient(20deg, transparent 45%, rgba(74, 222, 128, 0.3) 52%, transparent 60%);
    background-size: 32px 100%, 100% 100%;
    background-repeat: repeat-x, no-repeat;
}
html[data-color-theme="bear_crash"] .home-sky-scene .home-theme-pattern,
[data-color-theme="bear_crash"] > .home-theme-pattern {
    background-image:
        repeating-linear-gradient(90deg, rgba(248, 113, 113, 0.4) 0 4px, transparent 4px 8px, rgba(153, 27, 27, 0.35) 8px 10px, transparent 10px 16px),
        linear-gradient(-20deg, transparent 45%, rgba(248, 113, 113, 0.3) 52%, transparent 60%);
    background-size: 32px 100%, 100% 100%;
    background-repeat: repeat-x, no-repeat;
}
html[data-color-theme="multi_ticker_grid"] .home-sky-scene .home-theme-pattern,
[data-color-theme="multi_ticker_grid"] > .home-theme-pattern {
    background-image:
        linear-gradient(rgba(148, 163, 184, 0.2) 1px, transparent 1px),
        linear-gradient(90deg, rgba(148, 163, 184, 0.2) 1px, transparent 1px),
        repeating-linear-gradient(90deg, rgba(34, 197, 94, 0.3) 0 3px, transparent 3px 6px, rgba(239, 68, 68, 0.3) 6px 9px, transparent 9px 12px);
    background-size: 60px 60px, 60px 60px, 12px 60px;
}
html[data-color-theme="teddy_bear"] .home-sky-scene .home-theme-pattern,
[data-color-theme="teddy_bear"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 30px 30px, rgba(251, 191, 36, 0.4) 0 4px, transparent 5px),
        repeating-linear-gradient(45deg, rgba(251, 191, 36, 0.12) 0 2px, transparent 2px 10px),
        repeating-linear-gradient(-45deg, rgba(251, 191, 36, 0.12) 0 2px, transparent 2px 10px);
    background-size: 70px 70px, 20px 20px, 20px 20px;
}
html[data-color-theme="wooden_blocks"] .home-sky-scene .home-theme-pattern,
[data-color-theme="wooden_blocks"] > .home-theme-pattern {
    background-image:
        linear-gradient(rgba(255, 255, 255, 0.08) 2px, transparent 2px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.08) 2px, transparent 2px),
        linear-gradient(45deg, rgba(239, 68, 68, 0.2) 25%, transparent 25%, transparent 75%, rgba(59, 130, 246, 0.2) 75%);
    background-size: 44px 44px, 44px 44px, 44px 44px;
}
html[data-color-theme="board_game_dice"] .home-sky-scene .home-theme-pattern,
[data-color-theme="board_game_dice"] > .home-theme-pattern {
    background-image:
        linear-gradient(45deg, rgba(244, 63, 94, 0.15) 25%, transparent 25%, transparent 75%, rgba(244, 63, 94, 0.15) 75%),
        linear-gradient(45deg, rgba(244, 63, 94, 0.15) 25%, transparent 25%, transparent 75%, rgba(244, 63, 94, 0.15) 75%),
        radial-gradient(circle at 10px 10px, rgba(250, 204, 21, 0.6) 0 3px, transparent 4px);
    background-size: 40px 40px, 40px 40px, 20px 20px;
    background-position: 0 0, 20px 20px, 0 0;
}
html[data-color-theme="arcade_neon"] .home-sky-scene .home-theme-pattern,
[data-color-theme="arcade_neon"] > .home-theme-pattern {
    background-image:
        linear-gradient(rgba(217, 70, 239, 0.15) 1px, transparent 1px),
        linear-gradient(90deg, rgba(6, 182, 212, 0.15) 1px, transparent 1px),
        radial-gradient(circle at 20px 20px, rgba(253, 224, 71, 0.5) 0 5px, transparent 6px);
    background-size: 30px 30px, 30px 30px, 60px 60px;
}
html[data-color-theme="kite_pinwheel"] .home-sky-scene .home-theme-pattern,
[data-color-theme="kite_pinwheel"] > .home-theme-pattern {
    background-image:
        linear-gradient(45deg, rgba(244, 63, 94, 0.3) 25%, transparent 25.5%),
        linear-gradient(45deg, rgba(253, 224, 71, 0.3) 25%, transparent 25.5%),
        linear-gradient(45deg, rgba(56, 189, 248, 0.25) 25%, transparent 25.5%);
    background-size: 90px 90px, 90px 90px, 90px 90px;
    background-position: 0 0, 45px 20px, 20px 55px;
}
html[data-color-theme="tropical_leaves"] .home-sky-scene .home-theme-pattern,
[data-color-theme="tropical_leaves"] > .home-theme-pattern {
    background-image:
        radial-gradient(ellipse 40px 20px at 30px 40px, rgba(22, 163, 74, 0.3), transparent),
        radial-gradient(ellipse 34px 16px at 130px 100px, rgba(134, 239, 172, 0.25), transparent),
        radial-gradient(ellipse 44px 22px at 60px 160px, rgba(22, 163, 74, 0.28), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
html[data-color-theme="autumn_forest"] .home-sky-scene .home-theme-pattern,
[data-color-theme="autumn_forest"] > .home-theme-pattern {
    background-image:
        radial-gradient(ellipse 6px 4px at 30px 40px, rgba(249, 115, 22, 0.6), transparent),
        radial-gradient(ellipse 5px 3px at 100px 90px, rgba(220, 38, 38, 0.5), transparent),
        radial-gradient(ellipse 6px 4px at 160px 30px, rgba(253, 224, 71, 0.55), transparent),
        radial-gradient(ellipse 5px 3px at 60px 140px, rgba(249, 115, 22, 0.5), transparent),
        radial-gradient(ellipse 6px 4px at 140px 160px, rgba(220, 38, 38, 0.45), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
html[data-color-theme="wildflower_meadow"] .home-sky-scene .home-theme-pattern,
[data-color-theme="wildflower_meadow"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 30px 30px, rgba(236, 72, 153, 0.6) 0 3px, transparent 4px),
        radial-gradient(circle at 90px 70px, rgba(253, 224, 71, 0.6) 0 3px, transparent 4px),
        radial-gradient(circle at 150px 40px, rgba(236, 72, 153, 0.5) 0 3px, transparent 4px),
        radial-gradient(circle at 60px 130px, rgba(253, 224, 71, 0.55) 0 3px, transparent 4px),
        linear-gradient(rgba(132, 204, 22, 0.06) 1px, transparent 1px);
    background-size: 180px 180px, 180px 180px, 180px 180px, 180px 180px, 8px 8px;
}
html[data-color-theme="race_car"] .home-sky-scene .home-theme-pattern,
[data-color-theme="race_car"] > .home-theme-pattern {
    background-image:
        linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
        linear-gradient(45deg, rgba(255, 255, 255, 0.15) 25%, transparent 25%, transparent 75%, rgba(255, 255, 255, 0.15) 75%),
        repeating-linear-gradient(100deg, rgba(239, 68, 68, 0.15) 0 2px, transparent 2px 20px);
    background-size: 24px 24px, 24px 24px, 100% 40px;
    background-position: 0 0, 12px 12px, 0 0;
}
html[data-color-theme="train_journey"] .home-sky-scene .home-theme-pattern,
[data-color-theme="train_journey"] > .home-theme-pattern {
    background-image:
        radial-gradient(ellipse 12px 8px at 40px 30px, rgba(232, 220, 192, 0.3), transparent),
        radial-gradient(ellipse 16px 10px at 90px 15px, rgba(232, 220, 192, 0.25), transparent),
        repeating-linear-gradient(90deg, rgba(180, 120, 60, 0.35) 0 4px, transparent 4px 20px),
        linear-gradient(180deg, transparent 83%, rgba(180, 120, 60, 0.4) 84%, transparent 85%, transparent 91%, rgba(180, 120, 60, 0.4) 92%, transparent 93%);
    background-size: 150px 150px, 150px 150px, 100% 16px, 100% 100%;
    background-repeat: repeat, repeat, repeat-x, no-repeat;
}
html[data-color-theme="airplane_sky"] .home-sky-scene .home-theme-pattern,
[data-color-theme="airplane_sky"] > .home-theme-pattern {
    background-image:
        radial-gradient(ellipse 28px 12px at 40px 40px, rgba(255, 255, 255, 0.5), transparent),
        radial-gradient(ellipse 22px 10px at 130px 90px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(ellipse 24px 11px at 80px 150px, rgba(255, 255, 255, 0.45), transparent),
        repeating-linear-gradient(-15deg, rgba(249, 115, 22, 0.4) 0 8px, transparent 8px 22px);
    background-size: 200px 200px, 200px 200px, 200px 200px, 100% 100%;
    background-repeat: repeat, repeat, repeat, no-repeat;
}
html[data-color-theme="sailboat_waves"] .home-sky-scene .home-theme-pattern,
[data-color-theme="sailboat_waves"] > .home-theme-pattern {
    background-image:
        linear-gradient(45deg, rgba(248, 250, 252, 0.25) 25%, transparent 25.5%),
        repeating-radial-gradient(ellipse 260px 30px at 50% 100%, rgba(56, 189, 248, 0.15) 0 8px, transparent 8px 30px);
    background-size: 60px 60px, 100% 100%;
    background-position: 20px 30px, 0 0;
}
html[data-color-theme="motorcycle_speed"] .home-sky-scene .home-theme-pattern,
[data-color-theme="motorcycle_speed"] > .home-theme-pattern {
    background-image: repeating-linear-gradient(92deg, rgba(249, 115, 22, 0.3) 0 3px, transparent 3px 26px, rgba(249, 115, 22, 0.15) 26px 28px, transparent 28px 50px);
}
html[data-color-theme="hot_air_balloon"] .home-sky-scene .home-theme-pattern,
[data-color-theme="hot_air_balloon"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 50% 30%, rgba(244, 63, 94, 0.15) 0 40px, transparent 41px),
        repeating-linear-gradient(90deg, rgba(251, 191, 36, 0.25) 0 10px, rgba(167, 139, 250, 0.25) 10px 20px);
    background-size: 100px 100px, 40px 100%;
    background-repeat: repeat, repeat-x;
}
html[data-color-theme="bicycle_ride"] .home-sky-scene .home-theme-pattern,
[data-color-theme="bicycle_ride"] > .home-theme-pattern {
    background-image: repeating-conic-gradient(from 0deg, rgba(34, 197, 94, 0.25) 0deg 4deg, transparent 4deg 30deg);
    background-size: 80px 80px;
    background-position: 40px 40px;
}
html[data-color-theme="submarine_deep"] .home-sky-scene .home-theme-pattern,
[data-color-theme="submarine_deep"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 40px 40px, transparent 0 14px, rgba(125, 211, 252, 0.3) 15px 17px, transparent 18px),
        radial-gradient(2px 2px at 90px 100px, rgba(255, 255, 255, 0.4), transparent),
        radial-gradient(3px 3px at 150px 60px, rgba(255, 255, 255, 0.35), transparent);
    background-size: 160px 160px, 160px 160px, 160px 160px;
}
html[data-color-theme="helicopter_rotor"] .home-sky-scene .home-theme-pattern,
[data-color-theme="helicopter_rotor"] > .home-theme-pattern {
    background-image: repeating-conic-gradient(from 0deg, rgba(226, 232, 240, 0.15) 0deg 2deg, transparent 2deg 8deg);
    background-size: 140px 140px;
    background-position: 70px 70px;
}
html[data-color-theme="rocket_ship"] .home-sky-scene .home-theme-pattern,
[data-color-theme="rocket_ship"] > .home-theme-pattern {
    background-image:
        radial-gradient(1.5px 1.5px at 30px 40px, #fff, transparent),
        radial-gradient(1px 1px at 90px 90px, #fff, transparent),
        radial-gradient(2px 2px at 150px 30px, #fff, transparent),
        linear-gradient(50deg, transparent 42%, rgba(251, 146, 60, 0.4) 48%, rgba(226, 232, 240, 0.3) 50%, transparent 56%);
    background-size: 180px 180px, 180px 180px, 180px 180px, 100% 100%;
    background-repeat: repeat, repeat, repeat, no-repeat;
}
html[data-color-theme="gold_sparkle"] .home-sky-scene .home-theme-pattern,
[data-color-theme="gold_sparkle"] > .home-theme-pattern {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(251, 191, 36, 0.9), transparent),
        radial-gradient(1px 1px at 60px 80px, rgba(254, 240, 138, 0.8), transparent),
        radial-gradient(2px 2px at 120px 40px, rgba(251, 191, 36, 0.85), transparent),
        radial-gradient(1px 1px at 160px 110px, rgba(254, 240, 138, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 40px 140px, rgba(251, 191, 36, 0.75), transparent),
        radial-gradient(1px 1px at 100px 165px, rgba(254, 240, 138, 0.65), transparent),
        radial-gradient(2px 2px at 175px 175px, rgba(251, 191, 36, 0.8), transparent);
    background-size: 190px 190px;
    background-repeat: repeat;
}
html[data-color-theme="pink_sparkle"] .home-sky-scene .home-theme-pattern,
[data-color-theme="pink_sparkle"] > .home-theme-pattern {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(236, 72, 153, 0.9), transparent),
        radial-gradient(1px 1px at 60px 80px, rgba(251, 207, 232, 0.85), transparent),
        radial-gradient(2px 2px at 120px 40px, rgba(244, 114, 182, 0.85), transparent),
        radial-gradient(1px 1px at 160px 110px, rgba(251, 207, 232, 0.75), transparent),
        radial-gradient(1.5px 1.5px at 40px 140px, rgba(236, 72, 153, 0.75), transparent),
        radial-gradient(1px 1px at 100px 165px, rgba(251, 207, 232, 0.7), transparent),
        radial-gradient(2px 2px at 175px 175px, rgba(244, 114, 182, 0.8), transparent);
    background-size: 190px 190px;
    background-repeat: repeat;
}
html[data-color-theme="silver_sparkle"] .home-sky-scene .home-theme-pattern,
[data-color-theme="silver_sparkle"] > .home-theme-pattern {
    background-image:
        radial-gradient(1.5px 1.5px at 20px 30px, rgba(248, 250, 252, 0.9), transparent),
        radial-gradient(1px 1px at 60px 80px, rgba(203, 213, 225, 0.8), transparent),
        radial-gradient(2px 2px at 120px 40px, rgba(248, 250, 252, 0.85), transparent),
        radial-gradient(1px 1px at 160px 110px, rgba(203, 213, 225, 0.7), transparent),
        radial-gradient(1.5px 1.5px at 40px 140px, rgba(248, 250, 252, 0.75), transparent),
        radial-gradient(1px 1px at 100px 165px, rgba(203, 213, 225, 0.65), transparent),
        radial-gradient(2px 2px at 175px 175px, rgba(248, 250, 252, 0.8), transparent);
    background-size: 190px 190px;
    background-repeat: repeat;
}
html[data-color-theme="starlight_glam"] .home-sky-scene .home-theme-pattern,
[data-color-theme="starlight_glam"] > .home-theme-pattern {
    background-image:
        radial-gradient(2px 2px at 25px 35px, rgba(254, 240, 138, 0.9), transparent),
        radial-gradient(1.5px 1.5px at 70px 90px, rgba(244, 114, 182, 0.85), transparent),
        radial-gradient(2.5px 2.5px at 130px 45px, rgba(167, 139, 250, 0.85), transparent),
        radial-gradient(1.5px 1.5px at 170px 120px, rgba(254, 240, 138, 0.75), transparent),
        radial-gradient(2px 2px at 45px 150px, rgba(244, 114, 182, 0.75), transparent),
        radial-gradient(1.5px 1.5px at 110px 175px, rgba(167, 139, 250, 0.7), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
html[data-color-theme="diamond_sparkle"] .home-sky-scene .home-theme-pattern,
[data-color-theme="diamond_sparkle"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 50% 20%, rgba(224, 242, 254, 0.25), transparent 55%),
        radial-gradient(2px 2px at 20px 30px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 70px 80px, rgba(125, 211, 252, 0.9), transparent),
        radial-gradient(2px 2px at 130px 40px, #fff, transparent),
        radial-gradient(1.5px 1.5px at 170px 120px, rgba(125, 211, 252, 0.85), transparent),
        radial-gradient(2px 2px at 45px 150px, #fff, transparent);
    background-size: 100% 100%, 190px 190px, 190px 190px, 190px 190px, 190px 190px, 190px 190px;
    background-repeat: no-repeat, repeat, repeat, repeat, repeat, repeat;
}
html[data-color-theme="flower_garden"] .home-sky-scene .home-theme-pattern,
[data-color-theme="flower_garden"] > .home-theme-pattern {
    background-image:
        radial-gradient(circle at 25px 25px, rgba(236, 72, 153, 0.5) 0 5px, transparent 6px),
        radial-gradient(circle at 85px 60px, rgba(168, 85, 247, 0.45) 0 5px, transparent 6px),
        radial-gradient(circle at 140px 20px, rgba(253, 230, 138, 0.5) 0 4px, transparent 5px),
        radial-gradient(circle at 55px 130px, rgba(236, 72, 153, 0.4) 0 4px, transparent 5px),
        radial-gradient(circle at 155px 140px, rgba(168, 85, 247, 0.4) 0 5px, transparent 6px);
    background-size: 190px 190px;
    background-repeat: repeat;
}
html[data-color-theme="ocean_waves"] .home-sky-scene .home-theme-pattern,
[data-color-theme="ocean_waves"] > .home-theme-pattern {
    background-image:
        repeating-radial-gradient(ellipse 280px 26px at 50% 0%, rgba(56, 189, 248, 0.18) 0 8px, transparent 8px 34px),
        repeating-radial-gradient(ellipse 220px 20px at 50% 100%, rgba(165, 243, 252, 0.15) 0 6px, transparent 6px 28px);
    background-size: 100% 100%;
}
html[data-color-theme="coral_reef"] .home-sky-scene .home-theme-pattern,
[data-color-theme="coral_reef"] > .home-theme-pattern {
    background-image:
        radial-gradient(ellipse 10px 16px at 30px 40px, rgba(251, 146, 60, 0.4), transparent),
        radial-gradient(ellipse 8px 14px at 100px 90px, rgba(45, 212, 191, 0.4), transparent),
        radial-gradient(ellipse 12px 18px at 160px 30px, rgba(251, 113, 133, 0.35), transparent),
        radial-gradient(ellipse 9px 15px at 60px 140px, rgba(45, 212, 191, 0.35), transparent),
        radial-gradient(2px 2px at 140px 160px, rgba(255, 255, 255, 0.5), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
html[data-color-theme="cherry_blossom_garden"] .home-sky-scene .home-theme-pattern,
[data-color-theme="cherry_blossom_garden"] > .home-theme-pattern {
    background-image:
        radial-gradient(ellipse 7px 5px at 30px 40px, rgba(249, 168, 212, 0.6), transparent),
        radial-gradient(ellipse 6px 4px at 100px 90px, rgba(244, 114, 182, 0.5), transparent),
        radial-gradient(ellipse 7px 5px at 160px 30px, rgba(252, 231, 243, 0.55), transparent),
        radial-gradient(ellipse 6px 4px at 60px 140px, rgba(244, 114, 182, 0.45), transparent),
        radial-gradient(ellipse 7px 5px at 140px 160px, rgba(249, 168, 212, 0.5), transparent);
    background-size: 200px 200px;
    background-repeat: repeat;
}
.home-hero-panel {
    /* padding-top מוגדל (לא 14px) כדי לפנות מקום מתחת לשני כפתורי ה-FAB
       הקבועים (עוזר AI בפינה שמאל-עליונה - top:22px עד 122px אחרי שהוגדל
       ("גדול פי כמה"), המבורגר בפינה ימין-עליונה, קטן בהרבה) - בלי זה שורת
       "שלום.../תאריך" מסתתרת מתחתיהם. הסרגל העליון (.bottom-tab-bar) שסיפק
       את הפינוי הזה הוסר לגמרי */
    padding: 140px 14px 14px 14px;
    margin-bottom: 16px;
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
/* flex:1 + overflow-y:auto חזרו עכשיו (בניגוד להערה הישנה למעלה) - לא כדי
   למרכז שום דבר, אלא כי נוסף כרטיס לוח-שבועי חדש שיכול לצמוח גבוה מהמסך;
   בלי גלילה כאן, כל תוכן שחורג מהיה מוסתר לגמרי ע"י overflow:hidden של
   .phone-wrapper בלי שום דרך להגיע אליו. אותו מתכון בדיוק כמו .main-scroll-area
   למטה (flex:1 + min-height:0 + overflow-y:auto באותו הורה flex-column) */
/* padding-bottom זהה בדיוק ל-.main-scroll-area למטה - זה מה שבאמת חסר קודם.
   בלי זה, גם עם גלילה פנימית, כשהתוכן לא הרבה יותר גבוה מהמסך כמעט ואין
   טווח גלילה לברוח מהבועות הצפות (שקבועות ל-.phone-wrapper, לא לתוכן הזה) -
   כל תחתית הכרטיס פשוט תמיד יושבת בדיוק באזור המסך שבו הבועות נמצאות */
.home-hero-panel:not(.hidden) { display: flex; flex-direction: column; flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overflow-x: hidden !important; padding-bottom: calc(165px + env(safe-area-inset-bottom, 0px)); scrollbar-width: none; }
/* גלילה כן פעילה, אבל בלי הפס הנראה - אותו דפוס בדיוק כמו .main-scroll-area,
   פשוט נשכח כאן קודם */
.home-hero-panel:not(.hidden)::-webkit-scrollbar { display: none; }
.home-hero-panel:not(.hidden) + .main-scroll-area { display: none; }
.home-greeting-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; padding: 0 4px; }
.home-greeting-text { margin: 0; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); }
.home-greeting-date { margin: 2px 0 0 0; font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); text-transform: capitalize; }
.home-premium-badge {
    display: flex;
    align-items: center;
    gap: 5px;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.18), rgba(255, 0, 127, 0.18));
    border: 1px solid rgba(245, 158, 11, 0.4);
    color: var(--accent-gold-text);
    font-size: 0.72rem;
    font-weight: 700;
    border-radius: 20px;
    padding: 6px 12px;
    cursor: pointer;
    flex-shrink: 0;
    font-family: inherit;
}
.home-premium-badge:active { transform: scale(0.95); }
.home-premium-badge-icon { font-size: 0.8rem; }
/* flex-direction:row + wrap (לא column) - עם 4 קוביות (כולל "כספים" החדשה),
   עמודה אנכית בודדת עם gap:40px נהייתה גבוהה מדי למסך מובייל רגיל וגלשה
   מתחת לקפל, מתנגשת עם כפתורי ה-FAB הצפים בתחתית. עוטפים ל-2 בשורה במקום -
   נכון גם למובייל צר (2×110px נכנס בנוחות) וגם לרחב יותר */
.dashboard-grid {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: center;
    align-content: center;
    justify-content: center;
    gap: 28px 24px;
    position: relative;
    z-index: 5;
    width: 100%;
    max-width: 100%;
    flex: 1;
    padding: 20px 0;
    box-sizing: border-box;
}
/* שפת עיצוב מעגלית אחידה בכל האפליקציה: קוביית ניווט ראשית (.nav-cube) ותת-קוביה
   בתוך מסך פנימי (.sub-tile) הן שתיהן מכל שקוף בלבד - כל העיצוב (זכוכית כהה +
   טבעת ניאון) יושב על האייקון העגול (.cube-icon/.sub-tile-icon) עצמו, והכותרת
   יושבת כתווית נקייה מתחתיו, בדיוק כמו אייקוני התרגילים ב-Samsung Health */
.nav-cube, .sub-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 92px;
    cursor: pointer;
    transition: var(--transition);
}
.nav-cube:active, .sub-tile:active { transform: scale(0.93); }
.cube-icon, .sub-tile-icon, .recipe-category-icon {
    width: 84px;
    height: 84px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    background-color: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 2px solid rgba(255, 255, 255, 0.08);
    box-sizing: border-box;
    border-color: var(--tile-accent, var(--accent-purple));
    box-shadow: 0 0 18px var(--tile-glow-1, rgba(168, 85, 247, 0.5)), 0 0 26px var(--tile-glow-2, rgba(168, 85, 247, 0.2)), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
/* ערכת נושא ניאון ייחודית לכל "עולם" ראשי - כל תת-הקוביות והקטגוריות שבתוכו
   (כולל קטגוריות מתכונים, המקוננות בתוך תזונה) יורשות את אותם משתני צבע, כך
   שכל עולם נראה מאוחד: לו"ז = זהב, פתקים ומטרות = ורוד, כספים = סגול,
   תזונה = טורקיז רך (לא ירוק חזק כמו קודם - לפי בקשה מפורשת, כדי שיתאים
   לגוונים השכנים בסרגל התחתון) */
#schedule-section {
    --tile-accent: var(--accent-gold);
    --tile-glow-1: rgba(245, 158, 11, 0.5);
    --tile-glow-2: rgba(255, 193, 7, 0.22);
}
#my-center-section {
    --tile-accent: var(--accent-pink);
    --tile-glow-1: rgba(255, 0, 127, 0.5);
    --tile-glow-2: rgba(168, 85, 247, 0.3);
}
#finance-section {
    --tile-accent: var(--accent-purple);
    --tile-glow-1: rgba(168, 85, 247, 0.5);
    --tile-glow-2: rgba(255, 0, 127, 0.22);
}
#nutrition-section {
    --tile-accent: #2dd4bf;
    --tile-glow-1: rgba(45, 212, 191, 0.45);
    --tile-glow-2: rgba(0, 212, 255, 0.22);
}
.nav-cube.active .cube-icon { box-shadow: 0 0 22px rgba(255, 255, 255, 0.4), inset 0 1px 1px rgba(255, 255, 255, 0.15); }
/* קוביות מסך הבית מעט גדולות ובולטות יותר מתת-הקוביות הפנימיות, כדי להיראות
   פרימיום כשהן היחידות על המסך, נערמות אנכית עם מרווח נדיב ביניהן */
.nav-cube { width: 110px; }
.nav-cube .cube-icon { width: 106px; height: 106px; font-size: 2.3rem; }
.nav-cube .cube-title { font-size: 0.78rem; max-width: 110px; }
.cube-title, .sub-tile-title, .recipe-category-label {
    font-size: 0.7rem;
    font-weight: 700;
    color: var(--text-primary);
    text-align: center;
    white-space: normal;
    word-wrap: break-word;
    max-width: 92px;
    line-height: 1.2;
}
.nav-cube.active .cube-title { text-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
/* רמה 2 של הניווט: בתוך כל מסך ראשי (למשל תזונה), רשת קטנה של "תת-קוביות"
   נכנסת לתצוגה ממוקדת של פיצ'ר בודד (subview-panel) - אותו דפוס show/hide
   בדיוק כמו recipes-list-view/recipe-detail-view הקיימים (class "open"),
   ואותה שפת עיצוב מעגלית-ניאונית כמו .nav-cube, פשוט נערמת בשורות גמישות */
.sub-tile-grid {
    display: flex;
    flex-wrap: wrap;
    align-content: center;
    justify-content: center;
    gap: 20px 16px;
    margin-bottom: 16px;
    width: 100%;
    max-width: 100%;
    flex: 1;
    box-sizing: border-box;
}
.sub-tile-grid.hidden { display: none; }
.subview-panel { display: none; }
.subview-panel.open { display: block; }
.main-scroll-area {
    flex: 1;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overflow-x: hidden !important;
    overscroll-behavior-x: contain;
    min-width: 0;
    position: relative;
    z-index: 10;
    /* padding-top זהה לזה של .home-hero-panel למעלה, מאותה סיבה בדיוק - עוזר
       ה-AI גדל משמעותית ("גדול פי כמה") ובלי זה השורה הראשונה של כל תצוגת
       תת-מסך (רשת קוביות/רשימה) הייתה מתחילה ממש מתחת לפינה השמאלית-עליונה
       ומתנגשת איתו. padding-bottom - מפנה מקום רק מתחת ל-.ai-fab הצף
       (bottom:25px) כדי שהשורה האחרונה בכל רשימה לא תיבלע מתחתיו */
    padding-top: 140px;
    padding-bottom: calc(165px + env(safe-area-inset-bottom, 0px));
    scrollbar-width: none;
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}
.main-scroll-area::-webkit-scrollbar { display: none; }
.tab-content { display: none !important; }
/* display:flex בעמודה כדי שרשת התת-קוביות (.sub-tile-grid, flex:1) תוכל
   להתפרש ולהתמרכז אנכית על פני כל הגובה הפנוי כשהיא התוכן היחיד הגלוי -
   כשתצוגה ממוקדת (.subview-panel.open) פתוחה, היא פשוט נערמת כתוכן רגיל */
.tab-content.active-tab { display: flex !important; flex-direction: column; min-height: 100%; animation: fadeIn 0.25s ease-out; }
/* כרטיסים היו כבר "זכוכיתיים" חלקית (bg-glass שקוף-חלקית + blur), רק בלי
   ברק/הדגשה - לפי בקשה מפורשת ("רוצה שהכל יראה ככה, איזו זכוכית יפה")
   מוסיפים את אותה שפה חזותית כמו בועות ה-Dock/עוזר ה-AI: מסגרת עליונה
   בהירה יותר לתפוס אור, והילת-ברק פנימית (inset box-shadow עם blur גדול
   ו-spread שלילי, לא ::before+overflow:hidden) - כדי לא לגעת ב-overflow של
   .card (רכיב נפוץ מאוד באפליקציה, "+.btn-floating-add" למשל נשען על
   overflow:visible כדי לבלוט מעל הכרטיס בפינה) */
.card {
    background-color: var(--bg-glass);
    backdrop-filter: blur(25px);
    -webkit-backdrop-filter: blur(25px);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-top: 1px solid rgba(255, 255, 255, 0.22);
    border-radius: 16px;
    padding: 16px;
    margin-bottom: 14px;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.3),
        inset 0 1px 0 rgba(255, 255, 255, 0.12),
        inset 0 34px 40px -30px rgba(255, 255, 255, 0.07),
        inset 0 -30px 40px -28px rgba(0, 0, 0, 0.18);
    position: relative;
    z-index: 5;
    width: 100%;
    box-sizing: border-box;
}
.card-title-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
/* אותה שורת-כותרת+כפתור-הוספה, בתוך modal-preset-quick-add - כדי שיהיה
   אפשר גם להוסיף/לערוך ארוחות קבועות ישירות מהבועה, לא רק לחפש קיימות */
.preset-quick-add-header-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.preset-quick-add-header-row h3 { margin: 0; text-align: start; }

/* "לוח היום" (🧭) - טאבים מותאמים-אישית + לוח צבעוני לפי בלוקי-שעה, ר'
   openDailyBoardModal/renderDailyBoard ב-app.js */
.daily-board-sheet { max-height: 85vh; display: flex; flex-direction: column; }
.daily-board-close-btn { position: absolute; top: 12px; inset-inline-end: 16px; width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.1); background-color: rgba(255,255,255,0.06); color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; z-index: 5; }
.daily-board-tabs-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.daily-board-tabs-scroll { display: flex; gap: 8px; overflow-x: auto; flex: 1; min-width: 0; padding-bottom: 2px; }
.daily-board-tab-pill { flex-shrink: 0; padding: 8px 16px; border-radius: 999px; border: 1px solid rgba(255,255,255,0.08); background-color: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 0.85rem; font-family: inherit; cursor: pointer; white-space: nowrap; transition: var(--transition); }
/* צבעי ערכת-הנושא הנבחרת (var(--accent-purple)/--accent-pink, ר' :root
   למעלה) - לא rgba קבועים, לפי בקשה מפורשת ("תשנה את זה לצבע של ערכת
   נושא") - כך שגם הטאב הפעיל וגם כפתור ה-+ יתאימו לערכת הנושא הפרימיום
   שנבחרה, לא תמיד לסגול-ורוד של ברירת המחדל */
.daily-board-tab-pill.active { background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)); border-color: var(--accent-purple); color: #fff; font-weight: 600; }
.daily-board-tab-add { flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; border: none; background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)); color: #fff; font-size: 1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0; line-height: 1; box-shadow: 0 0 10px rgba(168,85,247,0.4); }
.daily-board-tab-actions { display: flex; justify-content: flex-end; gap: 14px; margin-top: 6px; }
.btn-link-action { background: none; border: none; padding: 4px 2px; font-size: 0.78rem; color: var(--text-secondary); cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; }
.daily-board-delete-tab-btn { color: #f87171; }
.daily-board-body { flex: 1; overflow-y: auto; margin-top: 10px; display: flex; flex-direction: column; gap: 14px; }
.daily-board-bucket-section { border-radius: 14px; padding: 12px 14px; border: 1px solid rgba(255,255,255,0.06); }
/* היו 4 גוונים קבועים (כתום/ירוק/כחול/סגול) בלי קשר לערכת הנושא הנבחרת -
   עכשיו נגזרים משלושת צבעי-המותג של הערכה עצמה (ורוד/סגול/סגול-בהיר, אלה
   שכן משתנים לפי ערכת נושא) ב-color-mix, כדי שגם 4 הפרקים יזוזו יחד עם
   הערכה שנבחרה, ועדיין יישארו מובחנים אחד מהשני - לפי בקשה מפורשת ("תשנה
   צבעים לפי ערכת נושא") */
.daily-board-bucket-morning { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-pink-text) 20%, transparent), color-mix(in srgb, var(--accent-pink-text) 5%, transparent)); }
.daily-board-bucket-noon { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-purple-light-text) 20%, transparent), color-mix(in srgb, var(--accent-purple-light-text) 5%, transparent)); }
.daily-board-bucket-afternoon { background: linear-gradient(135deg, color-mix(in srgb, var(--accent-purple-text) 20%, transparent), color-mix(in srgb, var(--accent-purple-text) 5%, transparent)); }
.daily-board-bucket-evening { background: linear-gradient(135deg, color-mix(in srgb, color-mix(in srgb, var(--accent-purple-text) 50%, var(--accent-pink-text) 50%) 20%, transparent), color-mix(in srgb, color-mix(in srgb, var(--accent-purple-text) 50%, var(--accent-pink-text) 50%) 5%, transparent)); }
.daily-board-bucket-header { font-size: 0.85rem; font-weight: 700; margin-bottom: 8px; color: var(--text-primary); text-shadow: 0 0 10px rgba(255,255,255,0.25); }
.daily-board-item-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-top: 1px solid rgba(255,255,255,0.05); }
.daily-board-item-row:first-of-type { border-top: none; }
.daily-board-item-time { font-size: 0.78rem; color: var(--text-secondary); min-width: 46px; text-shadow: 0 0 8px rgba(255,255,255,0.2); }
/* "זוהר" בפנים - טקסט הפריט מקבל drop-shadow-כפול עדין (לא רק צבע) בסגנון
   הזוהר של ai-brain-icon, לפי בקשה מפורשת ("שהכל בפנים יהיה זוהר") -
   שורה ריקה (טרם מולאה) מקבלת זוהר עמום/סגול-ורוד במקום, כהזמנה לגעת בה */
.daily-board-item-title { flex: 1; font-size: 0.88rem; color: var(--text-primary); text-align: start; background: none; border: none; padding: 0; cursor: pointer; font-family: inherit; text-shadow: 0 0 8px rgba(255,255,255,0.35), 0 0 16px rgba(168,85,247,0.25); }
.daily-board-item-row-empty .daily-board-item-title { color: var(--text-secondary); text-shadow: 0 0 8px rgba(168,85,247,0.3); }
.daily-board-item-time-label { text-align: center; font-size: 1.3rem; font-weight: 700; color: #fff; margin: 4px 0 12px; text-shadow: 0 0 12px rgba(168,85,247,0.55), 0 0 22px rgba(236,72,153,0.35); }
/* התאמה אישית של שעות "סדר היום" בהגדרות - ר' renderDailyBoardHourSettings/
   toggleDailyBoardHour ב-app.js */
.daily-board-hours-settings { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; margin-top: 6px; }
.daily-board-hours-settings.hidden { display: none; }
.daily-board-hours-panel-hint { font-size: 0.76rem; color: var(--text-secondary); margin: 0; }
.daily-board-hours-settings-group { background-color: var(--bg-row); border-radius: 12px; padding: 10px 12px; }
.daily-board-hours-settings-group-label { font-size: 0.82rem; font-weight: 600; color: var(--text-primary); display: block; margin-bottom: 8px; }
.daily-board-hours-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.board-hour-chip { padding: 6px 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.08); background-color: rgba(255,255,255,0.04); color: var(--text-secondary); font-size: 0.78rem; font-family: inherit; cursor: pointer; }
.board-hour-chip.active { background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink)); border-color: var(--accent-purple); color: #fff; font-weight: 600; }
.card-title-row.collapsible-header { cursor: pointer; user-select: none; }
.card-header-actions { display: flex; align-items: center; gap: 8px; }
.card-toggle-icon { font-size: 0.7rem; color: var(--text-secondary); transition: transform 0.2s ease; }
.card-body { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; }
.card.expanded .card-title-row.collapsible-header { margin-bottom: 12px; }
.card:not(.expanded) .card-title-row.collapsible-header { margin-bottom: 0; }
.card.expanded .card-body { max-height: 3000px; }
.card.expanded .card-toggle-icon { transform: rotate(180deg); }
h2 { font-size: 1.1rem; margin: 0; font-weight: 600; color: var(--text-primary); }
.btn-floating-add {
    background-color: rgba(255, 0, 127, 0.08);
    color: var(--accent-pink-text);
    border: 1px solid rgba(255, 0, 127, 0.25);
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.1rem;
    font-weight: bold;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
    z-index: 10;
}
.btn-floating-add:active { transform: scale(0.9); background-color: rgba(255, 0, 127, 0.2); }
/* עכבר לא יכול "לגלול" רצועה אופקית מוסתרת-פס-גלילה בלי מגע/עכבר-אופקי -
   שני חצים גלויים בשני הצדדים, שתמיד עובדים בלחיצה בלי קשר לדפדפן/התקן,
   לפי דיווח חוזר ("במחשב רואים עד חמישי וזהו") אחרי שניסיון עם גלגלת-עכבר
   לא היה אמין מספיק */
.day-tabs-strip-row { display: flex; align-items: center; gap: 4px; margin-bottom: 10px; }
.day-tabs-nav-btn {
    flex: 0 0 auto;
    background-color: var(--bg-row);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    border-radius: 8px;
    width: 26px;
    height: 40px;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
}
.day-tabs-nav-btn:hover { color: var(--text-primary); border-color: var(--accent-purple); }
.day-tabs-nav-btn:active { transform: scale(0.92); }
.day-tabs-strip { display: flex; gap: 8px; overflow-x: auto; overscroll-behavior-x: contain; padding-bottom: 8px; margin-bottom: 0; scrollbar-width: none; -webkit-overflow-scrolling: touch; flex: 1 1 auto; min-width: 0; }
.day-tabs-strip::-webkit-scrollbar { display: none; }
.day-tab { flex: 0 0 auto; display: flex; flex-direction: column; align-items: center; gap: 2px; background-color: var(--bg-row); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 10px; padding: 8px 12px; color: var(--text-secondary); cursor: pointer; transition: var(--transition); font-family: inherit; }
.day-tab.active { background-color: rgba(168, 85, 247, 0.15); border-color: var(--accent-purple); color: var(--text-primary); box-shadow: 0 0 10px rgba(168, 85, 247, 0.15); }
.day-tab-name { font-size: 0.75rem; font-weight: 700; }
.day-tab-date { font-size: 0.65rem; opacity: 0.7; }

.schedule-touch-row { display: flex; width: 100%; max-width: 100%; box-sizing: border-box; }
.vertical-scroll-track { flex: 0 0 12%; min-width: 12%; max-width: 12%; touch-action: pan-y; }
.days-scroll-container { display: flex; align-items: flex-start; flex: 1 1 88%; overflow-x: auto !important; overflow-y: hidden; overscroll-behavior-x: contain; min-width: 0; max-width: 88% !important; box-sizing: border-box; scroll-snap-type: x mandatory; gap: 12px; scrollbar-width: none; -webkit-overflow-scrolling: touch; transition: height 0.25s ease; }
.days-scroll-container::-webkit-scrollbar { display: none; }



/* אשכול-שורה: בלי קופסת-זכוכית מלבנית מאחור בכלל (לפי בקשה מפורשת - "כמו
   המוח בלי רקע"), בהשראת תמונת-סגנון ששלחה המשתמשת - שורה אחת אופקית עם
   קשת עדינה כלפי מעלה ככל שמתרחקים מהמרכז (ר' FAB_ROW_OFFSETS ב-app.js) -
   מי שבמרכז ("קדמי") גדול/בולט יותר, לא בהכרח הפתק - כל בועה יכולה להגיע
   לשם דרך סיבוב (ר' .fab-tier-front למטה). צל נפרד לכל בועה (לא צל-רצפה
   משותף אחד - נדחה במפורש: "סתם עיגול שחור") נמצא בתוך box-shadow של
   .dock-fab עצמה. .fab-dock עצמו הוא נקודת-עיגון בגודל 0 (position:absolute,
   בלי width/height) - ממוקם ב-left:50% (למרכז אופקית) ו-top (למרכז אנכית,
   "קצת למטה" מהאמצע הליטרלי לפי בקשה מפורשת), לא באמצעות translate(-50%)
   כי לקופסה בגודל 0 זה ממילא no-op. כל בועה ממוקמת סביב הנקודה הזו ב-JS
   (ר' applyDockOrder/FAB_ROW_OFFSETS ב-app.js) עם left:0;top:0 קבוע
   ו-transform:translate() שמערבב אחוזים (למרכז את הבועה על עצמה) ופיקסלים
   (ההיסט מהמרכז) - כך שאין תלות כלל בגודל תיבה של ה-Dock */
.fab-dock {
    position: absolute !important;
    left: 50%;
    top: 56%;
    z-index: 99999 !important;
    opacity: 1;
    transition: opacity 0.3s ease;
}
.phone-wrapper.menu-open .fab-dock,
.phone-wrapper.modal-open .fab-dock,
.phone-wrapper.subview-open .fab-dock,
.phone-wrapper.vision-open .fab-dock,
.phone-wrapper.study-open .fab-dock,
.phone-wrapper.projects-open .fab-dock {
    display: none;
}
/* "הצצה להיום" (לא תפריט/מודל) - כניסה/יציאה בהדרגה (fade), לא היעלמות
   פתאומית, לפי בקשה מפורשת. opacity+pointer-events (לא display:none) כדי
   שה-transition על .fab-dock למעלה יוכל לרוץ בפועל */
.phone-wrapper.today-preview-open .fab-dock {
    opacity: 0;
    pointer-events: none;
}

/* עיצוב משותף לכל בועה ב-Dock - זכוכית שקופה/צלולה כמעט חסרת-צבע (לא
   סגול/ציאן צבעוני!) - לפי בקשה מפורשת ומדויקת אחרי שהגרסה הצבעונית נדחתה
   ("לא דומה בכלל, אותו הצבע כמו בתמונה") - התמונה שהמשתמשת שלחה מראה זכוכית
   כמעט לבנה/כסופה, לא ורוד-סגול. backdrop-filter עם saturate בנוסף ל-blur
   מגביר את הבהירות/ה"קריסטל" של מה שנראה מאחורי הבועה. ברק עגלגל (::before)
   בפינה השמאלית-עליונה מדמה השתקפות אור על משטח זכוכית/כדור מבריק.
   overflow:hidden קוצץ את הברק למעגל עצמו בלי לפגוע ב-box-shadow (זה לא
   מושפע מ-overflow, נצבע כחלק מהקופסה עצמה, לא כתוכן חורג) */
.dock-fab {
    position: absolute;
    /* left/top (לא transform!) הם מה ש-JS קובע לכל בועה (ר' applyDockOrder
       ב-app.js) - ערכי פיקסלים ביחס לנקודת העיגון של .fab-dock (שגודלה 0,
       אז left/top כאחוזים היו תמיד מתאפסים - חייב פיקסלים). transform
       ממרכז את הבועה על הנקודה של עצמה בלבד - היסט הגרירה החיה כבר לא כאן
       (ר' ההערה על #fab-dock ב-.fab-dock עצמו) כדי לא "להתנגש" עם אנימציית
       הריחוף (dockFabFloat) שגם היא כותבת ל-transform של הבועה הזו - שתי
       אנימציות/עדכונים על אותה תכונה, על אותו אלמנט, בו-זמנית, זה מה שגרם
       לגרירה "לקפוץ" במקום לזוז חלק */
    left: 0;
    top: 0;
    transform: translate(-50%, -50%);
    width: 76px;
    height: 76px;
    border-radius: 50%;
    overflow: hidden;
    /* בועת-סבון אמיתית (לפי בקשה מפורשת + תמונת-סגנון): גוף כחלחל-שקוף עם
       ניגודיות חזקה, לא גוון אחיד חלש. saturate גבוה ב-backdrop-filter
       מגביר את תחושת ה"קריסטל" של הרקע הנראה מבעד לבועה */
    background: linear-gradient(150deg, rgba(210, 235, 255, 0.45) 0%, rgba(180, 220, 255, 0.15) 45%, rgba(200, 230, 255, 0.04) 60%, rgba(190, 225, 255, 0.18) 100%);
    backdrop-filter: blur(16px) saturate(1.6);
    -webkit-backdrop-filter: blur(16px) saturate(1.6);
    border: 1.5px solid rgba(255, 255, 255, 0.55);
    color: #fff;
    font-size: 2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    /* מודל-אור עקבי: "אור ישר מלמעלה" - inset-ים/צל-המגע בלי היסט אופקי,
       רק אנכי. הצל התחתון (0 32px 6px -6px, כהה 0.75) - היסט גדול יותר
       (32px, לא 20px) כדי שיהיה רווח ברור בין הבועה לצל שלה (הבועה נראית
       "מרחפת גבוה", לא נוגעת) - בדיוק כמו בתמונת-הסגנון של בועת-סבון בודדת
       על משטח לבן (צל שטוח, חד וכהה, מרוחק בבירור מהכדור מעליו, לא "מוצמד"
       אליו) - לפי בקשה מפורשת אחרי שהגרסה הקודמת עדיין לא הייתה קרובה
       מספיק. blur קטן (6px) ו-spread שלילי (-6px) שומרים על קצה חד/מוגדר
       ואליפסה קטנה מהבועה עצמה, לא עיגול מטושטש ברוחב זהה */
    box-shadow:
        0 32px 6px -9px rgba(0, 0, 0, 0.75),
        0 0 20px -4px rgba(200, 225, 255, 0.5),
        inset 0 3px 3px rgba(255, 255, 255, 0.75),
        inset 0 -10px 14px rgba(0, 0, 0, 0.18);
    padding: 0;
    flex-shrink: 0;
    transition: var(--transition), left 0.35s ease, top 0.35s ease, width 0.3s ease, height 0.3s ease, font-size 0.3s ease;
    animation: dockFabFloat 5s ease-in-out infinite;
    touch-action: none;
    user-select: none;
    -webkit-user-select: none;
}
/* ריחוף עדין - אותו רעיון בדיוק כמו aiBrainFloat (עוזר ה-AI), לפי בקשה
   מפורשת "שהבועות ירחפו קצת כמו המוח". משך שונה מעט לכל רמת-עומק (ר'
   .fab-tier-* למטה) כדי שלא כולן "ינשמו" בדיוק ביחד - מרגיש יותר אורגני */
@keyframes dockFabFloat {
    0%, 100% { transform: translate(-50%, -50%) translateY(0); }
    50% { transform: translate(-50%, -50%) translateY(-5px); }
}
/* highlight-ים - רך וגדול למעלה (השתקפות כללית), חד/קטן למעלה (נקודת-אור
   ישירה, "ספקולר"), ועוד נקודת-אור שנייה קטנה יותר למטה (כמו בתמונת-
   הסגנון - בועת סבון אמיתית כמעט תמיד מראה גם השתקפות משנית בתחתית).
   שתי שכבות radial-gradient על ::after (לא עוד pseudo-element - לאלמנט יש
   רק before/after) - זה מה שהיה חסר כדי שזה יראה "זכוכיתי" ולא רק "מעומעם" */
.dock-fab::before {
    content: '';
    position: absolute;
    top: 6%;
    left: 12%;
    width: 52%;
    height: 38%;
    background: radial-gradient(ellipse at center, rgba(255, 255, 255, 0.8), transparent 72%);
    border-radius: 50%;
    pointer-events: none;
}
.dock-fab::after {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse 14% 10% at 32% 20%, rgba(255, 255, 255, 0.95), transparent 100%),
        radial-gradient(ellipse 18% 12% at 55% 82%, rgba(255, 255, 255, 0.55), transparent 100%);
    border-radius: 50%;
    filter: blur(0.5px);
    pointer-events: none;
}
.dock-fab:active { transform: translate(-50%, -50%) scale(0.9); }
/* גרירה ישירה של בועה ספציפית (ר' initDockCarouselGestures ב-app.js) -
   רק היא זזה, לא כל השורה. מבטלים transition על left/top כדי שהיא תעקוב
   מיידית אחרי האצבע (לא "תגרור רגליים"), ומקפיאים את אנימציית הריחוף
   (animation-play-state) כדי שלא תתחרה על transform עם ה-scale/מיקום שלה
   באותו רגע. z-index (נקבע ב-JS, לא כאן) מרים אותה מעל שכנותיה תוך כדי
   הגרירה כדי שלא "תיבלע" מתחתן */
.dock-fab.dock-fab-active-drag { transition: none; animation-play-state: paused; }
/* שתי רמות גודל בלבד (לא מדורג) - האמצעית גדולה (fab-tier-front), כל
   השאר קטנות באופן אחיד (fab-tier-side), לפי בקשה מפורשת. בלי opacity/
   עמעום - זה גרם להן להיראות "דהויות" ולא זכוכיתיות, רק הגודל משדר מרחק.
   נקבע ב-JS (ר' applyDockOrder) לפי מרחק המשבצת מהמרכז, לא קבוע לבועה
   ספציפית - כל בועה יכולה להיות "קדמית" כשמסובבים */
.dock-fab.fab-tier-side { width: 58px; height: 58px; font-size: 1.5rem; animation-duration: 4.4s; }
@media (max-width: 420px) {
    .ai-brain-fab { width: 112px; height: 112px; }
    .ai-brain-icon { font-size: 4rem; }
    .home-calorie-badge { left: calc(50% - 88px); }
    html[dir="ltr"] .home-calorie-badge { right: calc(50% - 88px); }
    /* מפנה מקום מתחת לעוזר ה-AI הגדול יותר (112px, קצה תחתון ב-top:22px+112px=134px)
       - הערך הבסיסי (140px, ר' .home-hero-panel/.main-scroll-area למעלה)
       מחושב לפי הגרסה הרגילה (100px) ולא מספיק יותר במובייל */
    .home-hero-panel { padding-top: 150px; }
    .main-scroll-area { padding-top: 150px; }
}
/* מי שבמרכז (עמדת "קדמי") - לא בהכרח הפתק! לפי בקשה מפורשת ("אני רוצה
   שהמשתמש יבחר לעצמו מה יהיה באמצע על ידי סיבוב") כל בועה יכולה להגיע
   לעמדה הזו דרך סיבוב (ר' fabCarouselOrder/applyDockOrder ב-app.js) -
   fab-tier-front נקבעת דינמית לפי מיקום, לא ID קבוע. גדולה יותר ופעימה
   עדינה (זוהר לבן-רך, לא צבעוני) כדי שתמיד תבלוט כעוגן המרכזי */
.dock-fab.fab-tier-front {
    width: 92px;
    height: 92px;
    font-size: 2.4rem;
    /* שתי אנימציות בו-זמנית (לא רק fabPulse שהיה מחליף/מוחק את dockFabFloat
       שיורשת מ-.dock-fab - animation הוא shorthand, לא מצטבר בין כללים) -
       הריחוף (transform) והפעימה (box-shadow) על שתי תכונות שונות, אין ביניהן
       התנגשות */
    animation: dockFabFloat 6s ease-in-out infinite, fabPulse 2.5s ease-in-out infinite;
}
/* עד עכשיו לא כללה בכלל את שכבת הצל ה"מרחפת/מנותקת" ששאר הבועות מקבלות
   מ-.dock-fab (הפעימה - animation - היא shorthand, אז היא דורסת את כל
   box-shadow, כולל השכבה הזו) - זה כנראה מה שגרם לצל של הבועה הקדמית
   להרגיש שונה/צמוד יחסית לשכנות שלה, לפי בקשה מפורשת. עכשיו כוללת גם אותה
   (עם spread שלילי יותר, -14 במקום -6, כי הבועה הקדמית גדולה יותר ופיזית
   קרובה יותר לשכנות - כדי שהצל לא "יגע" בהן) וגם את זוהר-הפעימה הסגול מעליה */
@keyframes fabPulse {
    0%, 100% { box-shadow: 0 32px 6px -14px rgba(0, 0, 0, 0.75), 0 0 30px -2px rgba(168, 85, 247, 0.45), inset 0 3px 3px rgba(255, 255, 255, 0.75), inset 0 -10px 14px rgba(0, 0, 0, 0.18); }
    50% { box-shadow: 0 32px 6px -14px rgba(0, 0, 0, 0.75), 0 0 42px 0px rgba(168, 85, 247, 0.6), inset 0 3px 3px rgba(255, 255, 255, 0.75), inset 0 -10px 14px rgba(0, 0, 0, 0.18); }
}


/* עוזר ה-AI (🧠): ננעל בפינה השמאלית-עליונה - בדיוק המקום שאימוג'י הברכה
   ("מזג האוויר") תפס לפני שהוסר - בלי גרירה בכלל, לפי בקשה מפורשת.
   position:absolute יחסית ל-.phone-wrapper (לא fixed) מאותה סיבה בדיוק כמו
   .ai-fab למעלה - כך שהוא נשאר צמוד לכרטיס הנראה בפועל גם בדסקטופ רחב עם
   שוליים, לא לחלון הדפדפן הגולמי.
   בלי קופסה/רקע/מסגרת בעדיפות - ניסינו עיגול זכוכית מסביב (כמו בועות ה-
   Dock) ונדחה במפורש ("בלי בועה שיהיה יותר חופשי") - חזרה לגרסה השקופה
   לגמרי, רק עם זוהר חזק יותר על האימוג'י עצמו (ר' .ai-brain-icon) */
.ai-brain-fab {
    position: absolute;
    top: 22px;
    left: 22px;
    width: 100px;
    height: 100px;
    background: transparent;
    border: none;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 3500;
    padding: 0;
    transition: var(--transition);
    user-select: none;
    -webkit-user-select: none;
}
.ai-brain-fab:active { transform: scale(0.9); }
/* עוזר ה-AI/תפריט ההמבורגר יושבים בשתי פינות מנוגדות (ר' ההערות עליהם
   למעלה) - בעברית/RTL עוזר ה-AI בשמאל וההמבורגר בימין; באנגלית/LTR הן
   צריכות להתחלף כדי שהפריסה תישאר "מראה" נכונה (לא נשארת קבועה לפי צד
   פיזי בלי קשר לכיוון השפה, מה שדווח כבאג ויזואלי מפורש) */
html[dir="ltr"] .ai-brain-fab { left: auto; right: 22px; }
html[dir="ltr"] .ai-brain-fab[data-tooltip]::after { left: auto; right: 0; }
/* כפתור "לוח היום" - יורש את העיצוב השקוף/בלי-קופסה של עוזר ה-AI, אבל לא
   את מיקומו: נעוץ ממש בתחתית המסך (מתחת לדוק כולו), קטן, במרכז אופקית -
   לא בפינה העליונה יחד עם המוח, ולא תופס עמדה בתוך הדוק עצמו, לפי בקשה
   מפורשת ("יותר קטן, ודווקא למטה... הכי הכי למטה שיש") */
/* פס דק זוהר במקום אייקון מצפן - לפי בקשה מפורשת ("פס דק נקי בלי כלום
   זוהר כל ערכת נושא בצבע שלה"). התג הריק תופס עדיין שטח-מגע נוח (44px
   גובה), אבל רק הפס הפנימי הקטן (::after) נראה בפועל */
/* פס לאורך כל הרוחב (לא רק כדור-גלולה קטן במרכז) - לפי בקשה מפורשת
   ("קצת מכוער... תעשה פס לאורך הכל, גם מובייל וגם במחשב") */
.daily-board-fab { top: auto; left: 50%; right: auto; bottom: 26px; transform: translateX(-50%); width: calc(100% - 40px); max-width: 500px; height: 44px; }
html[dir="ltr"] .daily-board-fab { left: 50%; right: auto; transform: translateX(-50%); }
.daily-board-fab:active { transform: translateX(-50%) scale(0.9); }
/* var(--accent-pink)/var(--accent-purple-light) בלי סיומת -text בכוונה - גרסת
   ה-text מוכהית ב-40% שחור במצב בהיר (כדי שטקסט יישאר קריא), מה שגרם לפס
   הזוהר להיראות כהה/עמום דווקא במצב הבהיר - לפי בקשה מפורשת ("בבהיר אני
   רוצה שהסרגל... יהיה בהיר"). הגוונים המקוריים נשארים בהירים/זוהרים בשני
   המצבים כי הם לא תלויי-ניגודיות-טקסט */
.daily-board-fab::after {
    content: "";
    display: block;
    width: 100%;
    height: 6px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--accent-pink), var(--accent-purple-light));
    box-shadow: 0 0 10px color-mix(in srgb, var(--accent-pink) 70%, transparent), 0 0 18px color-mix(in srgb, var(--accent-purple-light) 50%, transparent);
}
/* תג קלוריות עדין ליד "סדר היום" - כבוי כברירת מחדל (ר' isHomeCalorieBadgeOn
   ב-app.js), אפשרות למי שרוצה לראות מספר קלוריות תמידי במסך הבית. יושב
   באותה שורה תחתונה, קצת בצד, לא מרכזי כמו המצפן - לפי בקשה מפורשת
   ("עדין... ליד המצפן מימין או שמאל") */
.home-calorie-badge {
    position: absolute;
    bottom: 30px;
    left: calc(50% - 76px);
    transform: translateX(-50%);
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    border-radius: 999px;
    background-color: rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 0.82rem;
    font-weight: 700;
    cursor: pointer;
    z-index: 3400;
    text-shadow: 0 0 8px rgba(255, 140, 0, 0.35);
}
.home-calorie-badge.hidden { display: none; }
html[dir="ltr"] .home-calorie-badge { left: auto; right: calc(50% - 76px); transform: translateX(50%); }
/* אימוג'י מוח - "חופשי" בלי קופסה/עיגול מסביב, אבל "זכוכיתי וזוהר" (לפי
   בקשה מפורשת) - זוהר לבן-קריר חזק ורב-שכבתי (כמה drop-shadow ברדיוסים
   שונים יוצרים "בלום" רך, כמו הילה סביב זכוכית מוארת, לא רק קו זוהר דק
   אחד). translateY עדין ואיטי (לא scale/box-shadow) כדי שה"נשימה" תרגיש
   כמו ריחוף חופשי, לא כמו כפתור שמהבהב */
.ai-brain-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    font-size: 3.6rem;
    line-height: 1;
    filter: saturate(0.9) brightness(1.1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 16px rgba(210, 225, 255, 0.55)) drop-shadow(0 0 32px rgba(168, 85, 247, 0.35));
    animation: aiBrainFloat 5.5s ease-in-out infinite;
    transition: filter 0.25s ease;
}
@keyframes aiBrainFloat {
    0%, 100% { transform: translateY(0); filter: saturate(0.9) brightness(1.1) drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)) drop-shadow(0 0 16px rgba(210, 225, 255, 0.55)) drop-shadow(0 0 32px rgba(168, 85, 247, 0.35)); }
    50% { transform: translateY(-14px); filter: saturate(0.9) brightness(1.1) drop-shadow(0 0 8px rgba(255, 255, 255, 0.6)) drop-shadow(0 0 22px rgba(210, 225, 255, 0.4)) drop-shadow(0 0 40px rgba(168, 85, 247, 0.25)); }
}
/* ההילה מתחזקת במעבר עכבר/לחיצה, לאותת על פעילות - animation:none חובה כאן
   (לא רק filter) כי אנימציית CSS פעילה "מנצחת" בקאסקייד על ערך filter רגיל
   שמוגדר ב-:hover/:active, אז בלי לעצור אותה השינוי פשוט לא היה נראה */
.ai-brain-fab:hover .ai-brain-icon, .ai-brain-fab:active .ai-brain-icon {
    animation: none;
    transform: translateY(-4px);
    filter: saturate(1) brightness(1.15) drop-shadow(0 0 8px rgba(255, 255, 255, 0.85)) drop-shadow(0 0 22px rgba(210, 225, 255, 0.7)) drop-shadow(0 0 44px rgba(168, 85, 247, 0.45));
}

/* תגית-רמז (tooltip) בעיצוב האפליקציה במקום ה-title הדפדפני הגנרי (שאי
   אפשר לעצב עם CSS בכלל) - על בועות ה-Dock ועל עוזר ה-AI כאחד (ר'
   data-i18n-tooltip/data-tooltip ב-i18n.js). ::after עם content מ-attr()
   כדי שהתוכן יגיע ישירות מה-HTML בלי JS נוסף לבניית/הצמדת אלמנט. מוסתרת
   כברירת מחדל (opacity:0 + pointer-events:none) ומופיעה רק ב-hover/focus */
[data-tooltip]::after {
    content: attr(data-tooltip);
    position: absolute;
    white-space: nowrap;
    background-color: var(--bg-glass);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid var(--accent-purple);
    color: var(--text-primary);
    font-size: 0.72rem;
    font-weight: 700;
    padding: 6px 12px;
    border-radius: 10px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.15s ease;
    z-index: 100000;
}
/* בטלנו את תגית-הרמז על בועות ה-Dock (במחשב, hover) - overflow:hidden של
   .dock-fab (נחוץ לקיצוץ הברק/highlight-ים לעיגול, ר' .dock-fab למעלה)
   קוצץ גם אותה בטעות, כך שבמקום לצוף מעל הבועה היא נראית כטקסט מקוטע
   "בתוך" הבועה עצמה - דווח במפורש עם צילום מסך. הכי בטוח פשוט לכבות אותה
   לגמרי כאן, לפי בקשה מפורשת ("תמחוק את המילים") */
.dock-fab[data-tooltip]::after {
    display: none;
}
/* בורר יעד "פתק מהיר" (quick-note-dest-mini, ר' index.html) - אין לו
   class="dock-fab", אז צריך כלל מיקום נפרד; אותו רעיון (קופץ מעליו, ממורכז),
   רק עם מרווח קטן יותר שמתאים לגודל הזעיר של הכפתורים */
.quick-note-dest-mini[data-tooltip]::after {
    bottom: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
}
.quick-note-dest-mini[data-tooltip]:hover::after, .quick-note-dest-mini[data-tooltip]:focus-visible::after {
    opacity: 1;
}
/* עוזר ה-AI יושב בפינה העליונה - רמז שיקפוץ מעליו היה נחתך מחוץ למסך,
   אז כאן דווקא מתחתיו, מיושר לשמאל (לא ממורכז, כי הכפתור צמוד לקצה) */
.ai-brain-fab[data-tooltip]::after {
    top: calc(100% + 10px);
    left: 0;
}
.ai-brain-fab[data-tooltip]:hover::after, .ai-brain-fab[data-tooltip]:focus-visible::after {
    opacity: 1;
}

/* תפריט המבורגר: כפתור קבוע בפינה הימנית-עליונה (מול עוזר ה-AI בשמאל),
   שפותח מגירה שקופצת מהצד עם קיצורי-דרך מסודרים בקטגוריות - לא מחליף את
   רשת הריבועים, רק נוסף לצידה. position:absolute יחסית ל-.phone-wrapper,
   אותה סיבה בדיוק כמו שאר ה-FAB-ים (נשאר צמוד לכרטיס גם בדסקטופ רחב) */
.hamburger-fab {
    position: absolute;
    top: 22px;
    right: 22px;
    width: 44px;
    height: 44px;
    border-radius: 14px;
    background-color: rgba(255, 255, 255, 0.06);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: var(--text-primary);
    font-size: 1.3rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.35);
    z-index: 3500;
    padding: 0;
    transition: var(--transition);
}
.hamburger-fab:active { transform: scale(0.9); }
html[dir="ltr"] .hamburger-fab { right: auto; left: 22px; }

.hamburger-drawer-overlay {
    position: absolute;
    inset: 0;
    background-color: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 4000;
    display: none;
}
.hamburger-drawer-overlay.open { display: block; animation: fadeOverlay 0.2s ease-out; }
/* כשהמגירה פתוחה (menu-open) או כל מודל אחר (modal-open, ר' openModal/
   closeModal ב-app.js) - מסתירים בכוח את שני כפתורי ה-FAB הנותרים (ה-Dock
   המאוחד כבר מוסתר לגמרי דרך .fab-dock למעלה). חייבים להעלים אותם ממש (לא
   רק סדר שכבות), כי z-index:99999 !important שלהם גבוה בהרבה מ-4000/2000 של
   המגירה/המודלים, אחרת הם ממשיכים לצוף מעל התוכן ואף לתפוס לחיצות/מגע
   שאמורות להגיע לכפתורים מתחתיהם - זה גרם בפועל לכפתור "איפוס פריסת
   הקיצורים" בהגדרות להיראות כאילו לא עושה כלום במובייל */
.phone-wrapper.menu-open .ai-brain-fab,
.phone-wrapper.menu-open .hamburger-fab,
.phone-wrapper.modal-open .ai-brain-fab,
.phone-wrapper.modal-open .hamburger-fab,
.phone-wrapper.vision-open .ai-brain-fab,
.phone-wrapper.vision-open .hamburger-fab,
.phone-wrapper.study-open .ai-brain-fab,
.phone-wrapper.study-open .hamburger-fab,
.phone-wrapper.projects-open .ai-brain-fab,
.phone-wrapper.projects-open .hamburger-fab {
    opacity: 0 !important;
    pointer-events: none !important;
}
.hamburger-drawer {
    position: absolute;
    top: 10px;
    bottom: 10px;
    right: 10px;
    width: 82%;
    max-width: 320px;
    /* var(--border-color) כבר rgba עדין מותאם לכל ערכת-נושא/מצב (בהיר/כהה) -
       גרדיאנט דהוי שמשתמש בו נותן "שטיפת צבע" עדינה שתואמת את הצבע הנבחר,
       בלי שום קוד נוסף פר-ערכה */
    background-color: var(--bg-sheet);
    background-image: linear-gradient(160deg, var(--border-color), transparent 55%);
    border: 1px solid var(--border-color);
    border-radius: 22px;
    box-shadow: -10px 0 35px rgba(0, 0, 0, 0.5);
    box-sizing: border-box;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.25s cubic-bezier(0.25, 1, 0.5, 1);
}
.hamburger-drawer-overlay.open .hamburger-drawer { transform: translateX(0); }
/* אותה מגירה בדיוק, רק מוצמדת לצד השני ונפתחת מהצד השני - כדי שבאנגלית/LTR
   היא תיפתח מכיוון קריאה טבעי (משמאל) במקום להישאר תמיד צמודה לימין */
html[dir="ltr"] .hamburger-drawer {
    right: auto;
    left: 10px;
    box-shadow: 10px 0 35px rgba(0, 0, 0, 0.5);
    transform: translateX(-100%);
}
html[dir="ltr"] .hamburger-drawer-overlay.open .hamburger-drawer { transform: translateX(0); }
/* הגלילה בפועל קורית כאן, לא ב-.hamburger-drawer עצמו - כך שפס הגלילה נשאר
   בתוך הקצוות המעוגלים (שנחתכים ע"י overflow:hidden בהורה) ולא "בורח" מהם
   למעלה/למטה */
.hamburger-drawer-scroll {
    height: 100%;
    overflow-y: auto;
    padding: 20px 16px;
    box-sizing: border-box;
}
.hamburger-drawer-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; }
.hamburger-drawer-header h3 { font-size: 1.05rem; margin: 0; }
.hamburger-drawer-close { background: transparent; border: none; color: var(--text-secondary); font-size: 1.1rem; cursor: pointer; padding: 4px; }
.hamburger-drawer-section-title { font-size: 0.72rem; font-weight: 700; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.5px; margin: 16px 0 8px 0; }
.hamburger-drawer-item {
    display: flex;
    align-items: center;
    gap: 12px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 10px 12px;
    margin-bottom: 6px;
    color: var(--text-primary);
    font-size: 0.88rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition: var(--transition);
}
/* פס עדין בין שורה לשורה (לא לפני כותרת קבוצה, כי שם כבר יש הפרדה ויזואלית) */
.hamburger-drawer-item + .hamburger-drawer-item { border-top: 1px solid var(--border-color); }
.hamburger-drawer-item:active { transform: scale(0.98); background-color: rgba(255, 255, 255, 0.06); }
.hamburger-drawer-item-icon { font-size: 1.1rem; flex-shrink: 0; }
.hamburger-drawer-item-title { flex: 1 1 auto; min-width: 0; }

/* לוח החזון (Vision Board) - כפתור "+" בכותרת המגירה מקובץ יחד עם ה-✕
   (justify-content:space-between עם 3 ילדים ישיר אותם למרחקים שווים, לא
   צמודים זה לזה) */
.hamburger-drawer-header-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.vision-drawer-add-btn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(168, 85, 247, 0.3); background-color: rgba(168, 85, 247, 0.1); color: var(--accent-purple-light-text); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; transition: var(--transition); }
.vision-drawer-add-btn:active { transform: scale(0.88); }
.vision-goals-empty { text-align: center; font-size: 0.85rem; color: var(--text-secondary); margin-top: 24px; padding: 0 10px; }

/* מגירת "לימודים" - עיצוב "יומן פתוח": קו שוליים אדום אנכי + פינה מקופלת,
   כמו דף מחברת אמיתי - לפי בקשה מפורשת ("יכול להראות כמו יומן"). מוגבל
   ל-#study-drawer-overlay בלבד כדי שהפתקים/לוח החזון יישארו בעיצוב הרשימה
   השטוח הרגיל שלהם. השורות המשורטטות עצמן (ר' .study-tasks-list למטה) הוזזו
   מכאן לרשימה עצמה - כשהן היו על .hamburger-drawer (הורה רחוק), לא היה שום
   ערבות שהן יתיישרו עם הגובה האמיתי של כל פריט, ודווח שהטקסט "צף" מעל
   השורות ולא יושב עליהן */
/* "מראה דף-מחברת" משותף - לא רק ל"לימודים" יותר, גם ל"הפרויקטים שלי" (מחברת
   בודקה בתוך פרויקט) - מפתח-class משותף (לא ID-scoped כמו קודם) כדי שדף
   מחברת חדש יוכל להשתמש באותו מראה בדיוק בלי לשכפל כלום */
.notebook-paper-drawer {
    background-color: var(--bg-sheet);
    background-image: linear-gradient(160deg, var(--border-color), transparent 55%);
}
.notebook-paper-drawer::after {
    content: "";
    position: absolute; top: 0; inset-inline-start: 0; width: 26px; height: 26px;
    background: linear-gradient(135deg, transparent 50%, rgba(0, 0, 0, 0.18) 50%);
    border-radius: 0 0 22px 0;
    pointer-events: none;
}
/* השורות עצמן על הרשימה, לא על הורה רחוק - כל שורה (32px) מתאימה בדיוק
   לגובה .study-task-item, כך שהטקסט והוי תמיד יושבים בדיוק על קו. min-height
   נותנת "עמוד מחברת" מלא-שורות גם כשיש מעט פריטים או אף לא אחד.
   קו-השוליים (::before) עבר לכאן, על הרשימה עצמה, ולא על .hamburger-drawer
   החיצוני - בפעם הקודמת הוא היה במרחב-קואורדינטות נפרד (הדרישה חושבה ידנית
   נגד ריפוד ה-.hamburger-drawer-scroll), ותמיד יצא לא מדויק. עכשיו הוא
   ילד ישיר של אותו אלמנט שמכיל בפועל את השורות/ה-checkbox - "40px" מחושב
   רק נגד ריפוד .study-task-item (2px) + רוחב ה-checkbox (30px), בלי שכבות
   ריפוד נוספות באמצע - דווח פעמיים ("הריבוע... על הקו") לפני שהתוקן ככה */
.study-tasks-list {
    position: relative;
    list-style: none; margin: 0; padding: 0; min-height: 320px;
    background-image: repeating-linear-gradient(to bottom, transparent 0 31px, rgba(140, 170, 255, 0.22) 31px 32px);
    background-size: 100% 32px;
}
.study-tasks-list::before {
    content: "";
    /* inset-inline-start (לא end): ה-checkbox יושב בקצה ה"start" של הזרימה
       (ימין ב-RTL, שמאל ב-LTR - הוא הילד הראשון ב-flex) - הקו חייב להיות
       באותו קצה כדי בכלל להיות רלוונטי לחישוב המרחק ממנו */
    position: absolute; top: 0; bottom: 0; inset-inline-start: 40px; width: 1px;
    background: rgba(230, 90, 90, 0.5);
    pointer-events: none;
}
.study-task-item { display: flex; align-items: center; gap: 8px; height: 32px; padding: 0 2px; }
/* display:block כדי לבטל את display:-webkit-box + -webkit-line-clamp:3 של
   הכלל הכללי (.center-list-item-text) - בלעדיו הדפדפן ניסה בכל זאת לעטוף
   עד 3 שורות בתוך span שגובהו לא מוגבל, למרות ה-white-space:nowrap, וזה
   גלש מחוץ לגובה הקבוע (32px) של .study-task-item וכיסה את הפריט הבא -
   דווח כ"זה עולה עליו" */
.study-task-item .center-list-item-text { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
/* לחיצה על טקסט ארוך (שנחתך בשלוש נקודות) מרחיבה את השורה במקום - height:auto
   ו-align-items:flex-start כדי שהצ'קבוקס/כפתורים יישארו למעלה כשהטקסט גולש
   לכמה שורות, במקום להתמרכז אנכית מול טקסט ארוך */
.study-task-item.expanded { height: auto; align-items: flex-start; padding-top: 6px; padding-bottom: 6px; }
.study-task-item.expanded .center-list-item-text { overflow: visible; text-overflow: clip; white-space: normal; }
/* כפתור-כניסה שקט בתחתית מגירת "לימודים" ל"הפרויקטים שלי" - גבול מקווקו כדי
   שיהיה ברור שזו הזמנה לתכונה נפרדת, לא עוד שורה ברשימה שמעליו */
.study-drawer-footer-link { display: flex; align-items: center; gap: 8px; width: 100%; margin-top: 20px; padding: 10px 12px; background: transparent; border: 1px dashed var(--border-color); border-radius: 12px; color: var(--text-secondary); font-size: 0.82rem; cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s, color 0.2s; }
.study-drawer-footer-link:hover { border-color: var(--accent-pink-text); border-style: solid; color: var(--text-primary); box-shadow: 0 0 14px var(--tile-glow-1, rgba(255, 0, 127, 0.5)), 0 0 22px var(--tile-glow-2, rgba(168, 85, 247, 0.3)); }
.study-drawer-footer-link:active { transform: scale(0.98); }
.study-drawer-footer-link-icon { font-size: 1rem; }
/* כרטיסי פרויקט/מחברה - רשימת-תיקיות רגילה, לא דף-מחברת (זה רק לתוכן בפועל
   בתוך מחברת ספציפית, ר' .study-tasks-list) */
.project-card, .notebook-card { display: flex; align-items: center; gap: 12px; width: 100%; background-color: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.04); border-radius: 12px; padding: 10px 12px; margin-bottom: 6px; box-sizing: border-box; }
.project-card-main, .notebook-card-main { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 10px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.project-card-actions, .notebook-card-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.projects-list { list-style: none; margin: 0; padding: 0; }
/* בורר אייקון לפרויקט - אותו דפוס בדיוק כמו .vision-goal-category-chip, רק
   ריבועי (אמוג'י בלבד, בלי תווית טקסט) */
.icon-picker-row { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 4px; }
.icon-picker-chip { width: 38px; height: 38px; display: flex; align-items: center; justify-content: center; border-radius: 10px; font-size: 1.1rem; background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; transition: var(--transition); padding: 0; }
.icon-picker-chip.selected { background-color: rgba(168, 85, 247, 0.18); border-color: var(--accent-purple); }

/* מחברת רב-דפים - ניווט/פאנל-דפים/כלי-ציור/קנבס/בוחר-אימוג'ים, כולם בתוך
   #notebook-detail-drawer-overlay (ר' index.html). הפאנל ורשימת התוצאות
   משתמשים ב-.language-search-input/.language-no-results הקיימים כדי לשמור
   על אותה שפה חזותית כמו שאר בוררי-החיפוש באפליקציה */
.notebook-page-header-nav { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px 0; }
.notebook-page-nav-btn { width: 30px; height: 30px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; border-radius: 50%; background-color: rgba(255,255,255,0.04); border: 1px solid var(--border-color); color: var(--text-primary); font-size: 1.1rem; cursor: pointer; }
.notebook-page-nav-btn:disabled { opacity: 0.3; cursor: default; }
.notebook-page-title-btn { flex: 1 1 auto; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 6px; background: transparent; border: none; color: var(--text-primary); font-weight: 600; font-size: 0.95rem; cursor: pointer; overflow: hidden; }
.notebook-page-title-btn span:first-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.notebook-page-title-edit-icon { font-size: 0.75rem; opacity: 0.6; flex-shrink: 0; }
.notebook-page-counter { font-size: 0.72rem; color: var(--text-secondary); flex-shrink: 0; white-space: nowrap; }
.notebook-page-tabs-arrow { flex-shrink: 0; background: transparent; border: none; color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; transition: transform 0.2s; padding: 4px; }
.notebook-page-tabs-arrow.open { transform: rotate(180deg); }
.notebook-page-tabs-panel { max-height: 0; overflow: hidden; transition: max-height 0.25s ease; }
.notebook-page-tabs-panel.open { max-height: 50vh; overflow-y: auto; margin-bottom: 8px; }
.notebook-page-tabs-list { list-style: none; margin: 6px 0 0 0; padding: 0; }
.notebook-page-tab-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 8px 6px; border-bottom: 1px solid var(--border-color); color: var(--text-primary); font-size: 0.85rem; }
.notebook-page-tab-item.active { color: var(--accent-purple-text); font-weight: 700; }
.notebook-page-tab-item-main { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; cursor: pointer; }
.notebook-page-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 8px 0; }
.notebook-color-swatch { width: 24px; height: 24px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; padding: 0; box-sizing: border-box; }
.notebook-color-swatch.active { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-sheet); }
.notebook-toolbar-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; border-radius: 8px; background-color: rgba(255,255,255,0.04); border: 1px solid var(--border-color); font-size: 0.95rem; cursor: pointer; }
.notebook-toolbar-btn.active { background-color: rgba(168, 85, 247, 0.18); border-color: var(--accent-purple); }
/* touch-action:none קריטי - בלעדיו ציור באצבע/Apple Pencil "גונב" את הגלילה
   של הדף במקום לצייר, במיוחד באייפד/מובייל */
.notebook-page-canvas { display: block; width: 100%; height: 220px; border-radius: 12px; background-color: var(--bg-glass); border: 1px solid var(--border-color); touch-action: none; margin-bottom: 8px; }
/* בוחר-אימוג'ים משותף חזותית ל-.icon-picker-row/.icon-picker-chip, אבל בלי
   מצב .selected קבוע - כל לחיצה כאן היא הנחתה חד-פעמית על הקנבס, לא בחירה */
.notebook-emoji-picker { max-height: 160px; overflow-y: auto; margin-bottom: 8px; }
.notebook-items-section-header { display: flex; justify-content: flex-end; margin-bottom: 4px; }

/* כרטיס-חזון בודד - גובה קבוע כי שני הצדדים (front/back) ממוקמים absolute
   בתוך perspective; overflow-y:auto בגב הכרטיס מאפשר רשימת תחנות-ביניים
   ארוכה לגלול בלי לשבור את מכניקת ההיפוך */
.vision-goal-card { position: relative; height: 190px; margin-bottom: 16px; perspective: 1000px; cursor: pointer; }
.vision-card-inner { position: relative; width: 100%; height: 100%; transition: transform 0.5s cubic-bezier(0.25, 1, 0.5, 1); transform-style: preserve-3d; }
.vision-goal-card.flipped .vision-card-inner { transform: rotateY(180deg); }
.vision-card-face { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; border-radius: 20px; overflow: hidden; box-sizing: border-box; }
.vision-card-front {
    background-color: #1a0f2e;
    background-size: cover, contain;
    background-repeat: no-repeat, no-repeat;
    background-position: center, center;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    padding: 14px;
    box-sizing: border-box;
    color: #fff;
}
.vision-card-front-name { font-size: 1rem; font-weight: 700; text-shadow: 0 1px 4px rgba(0,0,0,0.6); margin-bottom: 6px; }
.vision-card-category-tag { display: inline-block; align-self: flex-start; border-radius: 999px; padding: 3px 10px; font-size: 0.7rem; font-weight: 600; background: rgba(168, 85, 247, 0.35); border: 1px solid rgba(168, 85, 247, 0.5); margin-bottom: 8px; }
/* גביע נוצץ-וזוהר על כרטיסי יעדים שהושגו - לפי בקשה מפורשת ("שיתגאו אנשים
   במה שעשו") */
.vision-card-trophy-badge {
    position: absolute; top: 10px; inset-inline-end: 10px; font-size: 1.5rem;
    filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.9)) drop-shadow(0 0 12px rgba(250, 204, 21, 0.5));
    animation: trophyGlowPulse 2.4s ease-in-out infinite;
}
@keyframes trophyGlowPulse {
    0%, 100% { filter: drop-shadow(0 0 6px rgba(250, 204, 21, 0.9)) drop-shadow(0 0 12px rgba(250, 204, 21, 0.5)); }
    50% { filter: drop-shadow(0 0 10px rgba(250, 204, 21, 1)) drop-shadow(0 0 18px rgba(250, 204, 21, 0.75)); }
}
/* "יעדים שכבשתי" - סקשן קבוע בתחתית לוח החזון, לא נעלם אוטומטית לעולם -
   כותרת מודגשת עם גוון זהוב כדי להבדיל אותו מהרשימה הפעילה למעלה */
.vision-goals-achieved-section { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--border-color); }
.vision-goals-achieved-title { font-size: 0.95rem; font-weight: 700; color: #fbbf24; margin: 0 0 12px 0; text-align: center; }
.vision-card-progress-row { display: flex; align-items: center; gap: 8px; }
.vision-card-progress-row .progress-bar-bg { flex: 1 1 auto; }
.vision-card-progress-pct { font-size: 0.75rem; font-weight: 700; flex-shrink: 0; }
.vision-card-back {
    transform: rotateY(180deg);
    background-color: var(--bg-row);
    border: 1px solid rgba(168, 85, 247, 0.3);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.22);
    padding: 12px 14px;
    box-sizing: border-box;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}
.vision-card-back-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; flex-shrink: 0; gap: 8px; }
.vision-card-back-title { font-size: 0.88rem; font-weight: 700; color: var(--text-primary); margin: 0; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vision-card-flip-back-btn { background: transparent; border: none; color: var(--accent-purple-light-text); font-size: 1rem; cursor: pointer; padding: 2px 6px; flex-shrink: 0; }
.vision-card-back-actions { display: flex; gap: 10px; margin-top: 8px; flex-shrink: 0; }
.vision-milestone-row { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.06); }
.vision-milestone-row input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-purple); cursor: pointer; flex-shrink: 0; }
.vision-milestone-row span { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; color: var(--text-primary); word-break: break-word; }
.vision-milestone-row span.completed { color: var(--text-secondary); text-decoration: line-through; }
.vision-milestone-add-today-btn { background: transparent; border: none; color: var(--accent-purple-light-text); font-size: 0.85rem; cursor: pointer; padding: 2px 4px; flex-shrink: 0; transition: var(--transition); }
.vision-milestone-add-today-btn:active { transform: scale(0.9); }
.vision-card-no-milestones { font-size: 0.78rem; color: var(--text-secondary); text-align: center; padding: 10px 0; }
.vision-card-back-add-row { display: flex; gap: 6px; margin-top: 8px; flex-shrink: 0; }
.vision-card-back-add-row input { flex: 1 1 auto; min-width: 0; background-color: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.05); color: #fff; border-radius: 8px; padding: 7px 8px; font-size: 0.78rem; outline: none; box-sizing: border-box; }

/* צ'יפים לבחירת קטגוריה (מודל הוספה/עריכה) - אותה שפה כמו סוואצ'ים אחרים
   באפליקציה, רק עם אייקון+טקסט במקום עיגול צבע בלבד */
.vision-goal-category-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px; }
.vision-goal-category-chip { display: flex; align-items: center; gap: 5px; border-radius: 999px; padding: 6px 12px; font-size: 0.78rem; font-weight: 600; background-color: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); color: var(--text-secondary); cursor: pointer; transition: var(--transition); }
.vision-goal-category-chip.selected { background-color: rgba(168, 85, 247, 0.18); border-color: var(--accent-purple); color: var(--accent-purple-light-text); }
.vision-goal-category-chip:active { transform: scale(0.95); }

.vision-goal-image-preview { display: block; width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; margin: 8px 0; border: 1px solid rgba(168, 85, 247, 0.2); }

.vision-goal-pending-milestones-list { display: flex; flex-direction: column; gap: 6px; }
.vision-goal-pending-milestone-row { display: flex; align-items: center; gap: 8px; background-color: rgba(255,255,255,0.03); border-radius: 10px; padding: 7px 10px; }
.vision-goal-pending-milestone-row span { flex: 1 1 auto; min-width: 0; font-size: 0.82rem; word-break: break-word; }
.vision-goal-pending-milestone-remove { background: transparent; border: none; color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; flex-shrink: 0; padding: 2px; }
.vision-goal-milestone-add-row { display: flex; gap: 8px; margin-top: 4px; }
.vision-goal-milestone-add-row input { flex: 1 1 auto; min-width: 0; }


.premium-drawer-title { margin-top: 18px !important; }
.btn-settings-drawer-feature { width: 100%; margin-top: 4px; background-color: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.25); color: var(--accent-purple-light-text); }
.day-page { flex: 0 0 100%; min-width: 0; min-height: 0; height: auto; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; background-color: var(--bg-row); border: 1px solid rgba(255, 255, 255, 0.02); border-radius: 12px; padding: 10px; box-sizing: border-box; overflow: hidden; align-self: flex-start; }
.day-page-header { font-weight: 600; color: var(--text-primary); font-size: 0.85rem; text-align: center; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid rgba(255, 255, 255, 0.04); }
.day-page-empty { text-align: center; color: var(--text-secondary); font-size: 0.78rem; padding: 16px 8px; opacity: 0.7; }
.slots-grid { display: flex; flex-direction: column; gap: 10px; }
/* אירועים חד-פעמיים (calendar_events) שחלים על היום הספציפי הזה השבוע -
   ר' loadWeekOneTimeEvents ב-app.js. :not(:empty) כדי שלא יישאר מרווח ריק
   מיותר בימים בלי שום אירוע כזה */
.day-page-onetime { display: flex; flex-direction: column; gap: 10px; }
.day-page-onetime:not(:empty) { margin-top: 10px; padding-top: 10px; border-top: 1px solid rgba(255, 255, 255, 0.04); }
/* flex + space-between במקום grid: שלושת החלקים (שעה/משימה/מחיקה) נפרשים
   על פני כל רוחב השורה מקצה לקצה - הזמן ("שעה") ל-flex:0 0 auto בקצה אחד,
   כפתור המחיקה ל-flex:0 0 auto בקצה השני, ועטיפת המשימה (flex:1) ממלאת
   ומתפרשת על כל השטח הפנוי שביניהם, כדי שלא "יצטופפו" באמצע השורה */
.slot-input-group { background-color: var(--bg-row); border-radius: 10px; padding: 10px 12px; display: flex; justify-content: space-between; align-items: center; gap: 8px; width: 100%; border: 1px solid rgba(255,255,255,0.01); transition: background-color 0.3s ease, box-shadow 0.3s ease, max-height 0.3s ease, opacity 0.25s ease, padding 0.3s ease, margin 0.3s ease; min-width: 0; max-width: 100%; box-sizing: border-box; max-height: 68px; opacity: 1; overflow: hidden; }
.slot-input-group.slot-removing { max-height: 0; opacity: 0; padding-top: 0; padding-bottom: 0; margin: 0; border-width: 0; pointer-events: none; }
.slot-input-group.just-added { background-color: rgba(0, 230, 118, 0.15); box-shadow: 0 0 0 1px var(--accent-green); }
.slot-input-group.task-pink { border-right: 3px solid var(--accent-pink); }
.slot-input-group.task-purple { border-right: 3px solid var(--accent-purple); }
/* width מפורש (לא רק flex-basis) - ל-<input> יש רוחב "טבעי" מובנה של הדפדפן
   (כאילו size=20, ~150px+) שלא תלוי באורך הערך המוצג בפועל ("09:00"). בלי
   width מפורש, כשההורה עובר ל-CSS Grid במובייל (ר' המדיה-קווארי למטה),
   עמודת ה-auto של השעה "מתנפחת" לפי הרוחב הטבעי הזה במקום לפי "09:00"
   בפועל - זה בדיוק מה שגזל את השטח הפנוי מהתג המרכזי וגרם לו להצטמצם
   לאייקון בלבד */
.slot-time { flex: 0 0 60px; width: 60px; background: transparent !important; border: none !important; color: var(--text-primary) !important; font-weight: 600; text-align: center; font-size: 0.8rem; padding: 0 !important; outline: none; }
.task-pink .slot-time { color: var(--accent-pink-text) !important; }
.task-purple .slot-time { color: var(--accent-purple-text) !important; }
.slot-task { background: transparent; border: none; color: var(--text-primary); padding: 2px 0; font-size: 0.85rem; text-align: center; outline: none; width: 100%; min-width: 0; box-sizing: border-box; }
/* שורה ריקה: עדינה ולא בולטת, כדי שמשימות מאוכלסות "יקפצו" לעין מולה מיד -
   נשארת מלאה כשהיא בפוקוס (המשתמש מקליד בה ממש עכשיו), כדי שלא תיעלם מתחת ידיו */
.slot-input-group:not(.has-task) { opacity: 0.5; }
.slot-input-group:not(.has-task):focus-within { opacity: 1; }
/* flex: 1 1 0 (לא auto) + min-width קבוע - כדי שהעטיפה תמיד תתפוס את כל
   השטח הפנוי ולעולם לא תתכווץ מתחת לרוחב שמסתיר את הטקסט (הבאג שגרם לטקסט
   כמו "בויילר רום 🎶" להיעלם ולהשאיר רק את האייקון בבועה זעירה במובייל) */
.slot-task-wrap { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 5px; min-width: 100px; box-sizing: border-box; transition: var(--transition); }
.slot-task-wrap .slot-task { flex: 1 1 auto; width: auto; min-width: 0; }
/* עוטפת את כל כפתורי הפעולה (העברה/שכפול/מחיקה) כילד-גריד/פלקס *אחד*, לא
   שלושה נפרדים - קריטי במובייל (ר' המדיה-קווארי למטה): .slot-input-group שם
   הוא grid עם 3 עמודות בדיוק, אז כל כפתור נוסף כילד ישיר חמישי היה "גולש"
   לשורת grid נסתרת נוספת (grid-auto-flow: row כברירת מחדל) במקום להצטרף
   לעמודת ה-auto השלישית - בדיוק מה שגרם לכפתור השכפול (ולפעמים גם למחיקה/
   העברה) להיעלם לגמרי מתחת ל-overflow/גובה השורה */
.slot-actions-wrap { flex: 0 0 auto; display: flex; align-items: center; gap: 2px; }
.slot-task-icon { flex-shrink: 0; font-size: 0.85rem; line-height: 1; }
/* ידית הגרירה מקובצת עם השעה (קצה ימני ב-RTL), לא עם כפתור המחיקה -
   כדי שכפתור המחיקה יישאר לבד בקצה השמאלי, כמו שהמשתמש ביקש בדיאגרמה */
.slot-time-wrap { flex: 0 0 auto; display: flex; align-items: center; gap: 4px; }
.slot-drag-handle { cursor: grab; color: var(--text-secondary); font-size: 0.95rem; padding: 0 2px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; flex-shrink: 0; }
.slot-drag-handle:active { cursor: grabbing; }
/* SortableJS עם forceFallback:true (ר' app.js): .sortable-ghost הוא ה"רווח"
   שנשאר במקום המקורי בזמן הגרירה - משותק לגמרי (opacity:0) לפי בקשה מפורשת,
   כך שאין שום סימן חזותי במקום המקורי. .sortable-fallback הוא השכפול הצף
   ש-SortableJS יוצר ומזיז אחרי האצבע/העכבר במצב forceFallback - מוסתר
   לחלוטין כדי שלא תהיה שום "רוח"/צל כפול מעל האצבע, השורה עצמה מתעדכנת
   חי בתוך הרשימה במקום זאת. .sortable-chosen נשאר גלוי (עם קנה-מידה/צל
   עדינים) על השורה החיה עצמה, כמשוב שרואים איזו שורה פעילה */
.sortable-ghost { opacity: 0 !important; }
.sortable-fallback { display: none !important; }
/* חריג לגרירת-פתקים (note-triage): שם השכפול הצף *הוא* המשוב היחיד לגרירה
   (הפריט המקורי לא זז ברשימה, כי pull:'clone') - אז חייבים לראות אותו,
   בניגוד לסידור-מחדש של שעות/אירועים למעלה. .note-triage-drag-clone (ר'
   dragClass ב-app.js) הופך את הכלל הגלובלי בחזרה, עם עיצוב עצמאי (לא
   תלוי בהורה .center-list, כי הוא מצורף ישירות ל-body) */
.sortable-fallback.note-triage-drag-clone {
    display: flex !important;
    opacity: 0.95 !important;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-row);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--accent-pink);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.9rem;
    color: var(--text-primary);
    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.5);
    z-index: 99999 !important;
}
.sortable-chosen { position: relative; z-index: 20; opacity: 0.9; transform: scale(1.02); box-shadow: 0 10px 24px rgba(0, 0, 0, 0.55); }
/* "פיל" ניאון סביב משימה מאוכלסת - לילך/לבנדר רך ליתר קונטרסט על רקע כהה,
   קריא ואסתטי בלי להיות תוקפני מדי (אחרי ניסיונות קודמים עם זהב/סגול) */
.slot-input-group.has-task .slot-task-wrap {
    background-color: rgba(200, 162, 200, 0.15);
    border: 1px solid #C8A2C8;
    border-radius: 20px;
    padding: 5px 12px;
    box-shadow: 0 0 10px rgba(200, 162, 200, 0.5);
}
.slot-input-group.has-task .slot-task {
    color: #C8A2C8;
    font-weight: 700;
    text-shadow: 0 0 8px rgba(200, 162, 200, 0.6);
}
.btn-delete-slot { flex: 0 0 auto; background: transparent; color: var(--text-secondary); border: none; font-size: 0.7rem; cursor: pointer; }
.btn-move-slot { flex: 0 0 auto; background: transparent; color: var(--text-secondary); border: none; font-size: 0.7rem; cursor: pointer; opacity: 0.7; }
.btn-move-slot:hover { opacity: 1; }
.btn-duplicate-slot { flex: 0 0 auto; background: transparent; color: var(--text-secondary); border: none; font-size: 0.7rem; cursor: pointer; opacity: 0.7; }
.btn-duplicate-slot:hover { opacity: 1; }
.btn-clear-week { background-color: rgba(255, 69, 58, 0.03); color: var(--accent-red-text); border: 1px solid rgba(255, 69, 58, 0.08); font-size: 0.8rem; border-radius: 10px; padding: 10px; cursor: pointer; width: 100%; font-weight: 600; }
.btn-add-day-slot { background-color: rgba(168, 85, 247, 0.06); color: var(--accent-purple-light-text); border: 1px solid rgba(168, 85, 247, 0.2); font-size: 0.78rem; border-radius: 8px; padding: 8px; cursor: pointer; width: 100%; font-weight: 600; margin-top: 6px; }

/* מבט ליומן: עכשיו כן ניתן לקיפול כמו כל כרטיס אחר (collapsible-header +
   .expanded) - לפי בקשה מפורשת. בלי override של max-height כאן, הקיפול/
   פתיחה הרגיל של .card-body מהכללים הכלליים למעלה עובד ישירות */
/* הצצה להיום: ניתן לקיפול כמו כל כרטיס אחר, מקופל כברירת מחדל (בלי class
   expanded בהתחלה ב-HTML) - לפי בקשה מפורשת */
.today-tasks-card.expanded .card-body { max-height: none; overflow: visible; }
.calendar-glance-heading { display: flex; flex-direction: column; gap: 2px; }
.calendar-glance-title-row { display: flex; align-items: baseline; gap: 6px; }
.calendar-glance-year { font-size: 0.7rem; font-weight: 700; color: var(--text-secondary); }
.calendar-glance-subtitle { font-size: 0.72rem; font-weight: 500; color: var(--text-secondary); opacity: 0.85; }
.calendar-glance-list { display: flex; flex-direction: column; gap: 8px; }
/* "כל האירועים" קצת דהוי יותר מ"מבט חודשי" *רק* כשהכרטיס מקופל - כדי
   שיהיה קל להבדיל ביניהם מבלי לפתוח - לפי בקשה מפורשת. לאחר פתיחה
   (expanded) הכול חוזר לצבע/עוצמה רגילים כרגיל */
.calendar-glance-card:not(.expanded) .card-title-row { opacity: 0.68; }
/* זוהר עדין על כותרות החודש ב"כל האירועים" - לפי בקשה מפורשת ("ממש יפה") */
.calendar-glance-month-header { font-size: 0.78rem; font-weight: 700; color: var(--accent-purple-light-text); text-shadow: 0 0 8px rgba(168, 85, 247, 0.5); padding: 4px 4px 0; }
.calendar-event-item {
    background-color: var(--bg-row);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-inline-start: 3px solid var(--accent-purple);
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
}
.calendar-event-date-badge {
    /* color-mix (לא rgba קבוע) - כך שהתג של התאריך עוקב אחרי הגוון הסגול
       האמיתי של ערכת הנושא הנבחרת, ולא נשאר בסגול ברירת המחדל הקבוע כשבוחרים
       ערכה אחרת - זה מה שגרם לו להיראות "אפור"/לא-תואם, בעיקר במצב בהיר */
    background-color: color-mix(in srgb, var(--accent-purple) 14%, transparent);
    border: 1px solid color-mix(in srgb, var(--accent-purple) 32%, transparent);
    color: var(--accent-purple-light-text);
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    border-radius: 8px;
    padding: 4px 8px;
    white-space: nowrap;
}
.calendar-event-title-text { color: var(--text-primary); font-weight: 500; font-size: 0.9rem; flex: 1 1 auto; min-width: 0; text-align: start; }
.calendar-glance-empty { color: var(--text-secondary); font-size: 0.85rem; text-align: center; padding: 10px 0; }

/* "משימות להיום": אותה שפה חזותית כמו שורות מבט-ליומן, אבל בגוון הזהב של
   עולם הלו"ז (--tile-accent) במקום סגול, כדי להבחין ביניהם בבירור */
.today-tasks-list { display: flex; flex-direction: column; gap: 8px; }
/* פירוט היום הנבחר במבט חודשי משתמש באותה מחלקה (today-tasks-row) אבל
   בהקשר שונה לגמרי - כאן דורסים בחזרה לגוון סגול (במקום הזהב של
   "משימות להיום" בבית), לפי בקשה מפורשת ("צבע... שיותר מתאים לסגול") */
#monthly-calendar-day-detail .today-tasks-row { border-inline-start-color: var(--accent-purple); }
#monthly-calendar-day-detail .today-tasks-time,
#monthly-calendar-day-detail .day-detail-checkbox { accent-color: var(--accent-purple); color: var(--accent-purple-text); }
.today-tasks-row {
    background-color: var(--bg-row);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-inline-start: 3px solid var(--tile-accent, var(--accent-gold));
    border-radius: 12px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    width: 100%;
    box-sizing: border-box;
}
.today-tasks-time {
    background-color: rgba(245, 158, 11, 0.12);
    border: 1px solid rgba(245, 158, 11, 0.3);
    color: var(--tile-accent, var(--accent-gold));
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    font-size: 0.78rem;
    border-radius: 8px;
    padding: 4px 8px;
    white-space: nowrap;
}
.today-tasks-text { color: var(--text-primary); font-weight: 500; font-size: 0.9rem; flex: 1 1 auto; min-width: 0; text-align: start; }
.today-tasks-text.completed { text-decoration: line-through; color: var(--text-secondary); opacity: 0.7; }
.today-tasks-empty { color: var(--text-secondary); font-size: 0.85rem; text-align: center; padding: 10px 0; }
/* הודעת עידוד כשכל המשימות של היום בוצעו (או "יש עוד זמן") - ר' loadTodayTasks
   ב-app.js. גרדיאנט סגול->ורוד ניאון, אותה פלטה כמו שאר כפתורי/תגי ה"הצלחה"
   באפליקציה (ai-fab, פרימיום) - לא זהב/כתום שיצא עמום ולא מתאים */
.today-tasks-celebration {
    text-align: center;
    font-size: 0.82rem;
    font-weight: 600;
    color: #fff;
    background: linear-gradient(135deg, color-mix(in srgb, var(--accent-purple) 30%, transparent), color-mix(in srgb, var(--accent-pink) 30%, transparent));
    border: 1px solid color-mix(in srgb, var(--accent-pink) 35%, transparent);
    border-radius: 12px;
    padding: 10px 14px;
    margin: 10px 0 0 0;
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* נצנצי חגיגה כשמסיימים את כל המשימות של היום - ר' triggerAllDoneSparkles
   ב-app.js. inset:0 בתוך .phone-wrapper (position:relative + overflow:hidden
   כבר קיימים שם) כדי שהנצנצים ייחתכו בדיוק לגבולות "הטלפון" ולא יגלשו
   מחוצה לו על מסכים רחבים (דסקטופ) */
.all-done-sparkles { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 9998; }
.all-done-sparkle {
    position: absolute;
    top: -30px;
    animation-name: allDoneSparkleFall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-pink) 60%, transparent));
}
@keyframes allDoneSparkleFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    10% { opacity: 1; }
    85% { opacity: 1; }
    100% { transform: translateY(115vh) rotate(360deg); opacity: 0; }
}
/* ברכה יומית (בוקר טוב/ערב טוב וכו') - ר' checkDailyGreeting ב-app.js.
   fixed+centered למעלה, מעל הכל, נעלמת בהדרגה אחרי כמה שניות */
.daily-greeting-banner {
    position: absolute;
    top: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 9999;
    text-align: center;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
    background: linear-gradient(135deg, var(--accent-purple), var(--accent-pink));
    border: 1px solid rgba(255, 255, 255, 0.25);
    border-radius: 16px;
    padding: 12px 20px;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.35);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    white-space: nowrap;
    animation: dailyGreetingIn 0.4s ease-out;
    transition: opacity 0.6s ease, transform 0.6s ease;
}
.daily-greeting-banner-hide { opacity: 0; transform: translateX(-50%) translateY(-10px); }
@keyframes dailyGreetingIn {
    0% { opacity: 0; transform: translateX(-50%) translateY(-14px); }
    100% { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* בועת "מה הכי חשוב לך היום" (ר' checkDailyFocusPrompt ב-app.js) - לא מודל,
   בועת-צ'אט בסגנון הודעת וואטסאפ שיוצאת ישירות מעוזר ה-AI (זכוכית שקופה +
   זוהר סגול, לא הצבעים הוורוד-סגול הרגילים של כפתורי CTA) - צמודה לצד של
   אייקון המוח (לא ממורכזת במסך) עם "זנב" בצד הפונה אליו, לפי בקשה מפורשת
   ("כמו הודעה כזו כמו בוואטסאפ אבל רק מהמוח"). עוזר ה-AI יושב ב-left:22px
   ב-RTL (ברירת המחדל) ו-right:22px ב-LTR (ר' html[dir="ltr"] .ai-brain-fab
   למעלה) - הבועה מוצמדת לצד השני בדיוק באותה לוגיקה */
.daily-focus-bubble {
    position: absolute;
    top: 46px;
    left: 130px;
    right: auto;
    z-index: 3200;
    width: 250px;
    max-width: calc(100% - 150px);
    box-sizing: border-box;
    background-color: var(--bg-glass);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid var(--accent-purple);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4), 0 0 22px rgba(168, 85, 247, 0.3);
    animation: dailyFocusBubbleIn 0.4s ease-out;
}
.daily-focus-bubble.hidden { display: none; }
/* זנב-בועה קטן שמצביע שמאלה, לעבר אייקון המוח - תחושת "בועת דיבור" שיוצאת
   ממנו, כמו הודעה שהתקבלה בוואטסאפ */
.daily-focus-bubble::before {
    content: "";
    position: absolute;
    top: 26px;
    left: -7px;
    width: 14px;
    height: 14px;
    transform: rotate(45deg);
    background-color: var(--bg-glass);
    border-bottom: 1px solid var(--accent-purple);
    border-left: 1px solid var(--accent-purple);
}
@keyframes dailyFocusBubbleIn {
    0% { opacity: 0; transform: translateY(-6px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
/* אותו היפוך פינות בדיוק כמו עוזר ה-AI עצמו - הבועה עוברת לצד השני, עם
   הזנב מצביע ימינה אליו במקום שמאלה */
html[dir="ltr"] .daily-focus-bubble { left: auto; right: 130px; }
html[dir="ltr"] .daily-focus-bubble::before {
    left: auto;
    right: -7px;
    transform: rotate(-135deg);
}
.daily-focus-bubble-collapsed { display: flex; align-items: center; gap: 8px; padding: 14px 14px 14px 16px; cursor: pointer; }
.daily-focus-bubble-text { flex: 1; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; }
.daily-focus-bubble-close { flex-shrink: 0; background: none; border: none; color: var(--text-secondary); font-size: 0.85rem; cursor: pointer; opacity: 0.6; padding: 2px 4px; }
.daily-focus-bubble-close:hover { opacity: 1; }
.daily-focus-bubble-expanded { display: flex; flex-direction: column; gap: 8px; padding: 0 14px 14px 14px; }
.daily-focus-bubble-expanded.hidden { display: none; }
.daily-focus-bubble-expanded-header { display: flex; justify-content: flex-end; margin-top: 6px; }
/* תג "1" קטן על אייקון המוח כשיש שאלה יומית שעוד לא נענתה - כמו הודעה
   שלא נקראה. יושב על .ai-brain-fab עצמו (לא נע עם ה"נשימה" של האייקון
   הפנימי) כדי שלא יזוז/יקפוץ */
.ai-brain-fab-badge {
    position: absolute;
    top: 14px;
    right: 14px;
    min-width: 20px;
    height: 20px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 10px;
    background: linear-gradient(135deg, #ff3b6a, #ff5e3a);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 800;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.45);
    z-index: 2;
    animation: aiBrainBadgePulse 1.8s ease-in-out infinite;
}
.ai-brain-fab-badge.hidden { display: none; }
/* "נצפה אבל לא נענה" - התג נשאר (לא נעלם), רק חלש/דהוי ובלי הפעימה הבולטת -
   לפי בקשה מפורשת ("שיהיה שם אבל פשוט פחות חזק שלא יציק"). האייקון עצמו
   (.ai-brain-fab) לא משתנה בכלל - רק התג הקטן הזה */
.ai-brain-fab-badge.daily-focus-badge-dim { opacity: 0.4; animation: none; }
/* התג עצמו קטן (20px) - אזור לחיצה שקוף ומוגדל סביבו (48px, בהתאם להמלצת
   מינימום מגע) כדי שלחיצה קרובה עדיין תפגע בתג ולא "תפול" דרכו לכפתור
   המוח שמתחתיו - זה בדיוק מה שדווח ("לחיצה על ההודעה הקטנה נלחצת על
   המוח") */
.ai-brain-fab-badge::before {
    content: '';
    position: absolute;
    inset: -14px;
}
@keyframes aiBrainBadgePulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.15); } }
.daily-focus-bubble-expanded textarea {
    resize: none;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 10px;
    color: var(--text-primary);
    padding: 8px 10px;
    font-size: 0.82rem;
    font-family: inherit;
    outline: none;
}
/* תגיות "Daily Mix" - בחירה מרובה, ר' renderDailyFocusTags/toggleDailyFocusTag
   ב-app.js. תגית "אחר" מסומנת שונה (איטלי) כדי להבדיל אותה מהתגיות הקבועות */
.daily-focus-tags-list { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.daily-focus-tag-chip {
    background-color: var(--bg-row);
    border: 1px solid var(--border-color);
    color: var(--text-primary);
    border-radius: 14px;
    padding: 6px 12px;
    font-size: 0.76rem;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition: var(--transition);
}
.daily-focus-tag-chip.selected { background: var(--accent-purple); border-color: var(--accent-purple); color: #fff; }
.daily-focus-tag-chip-other { font-style: italic; }
.daily-focus-bubble-submit-row { display: flex; justify-content: flex-end; }
.daily-focus-bubble-submit {
    background: transparent;
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple-text);
    border-radius: 20px;
    padding: 6px 18px;
    font-size: 0.78rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
}
.daily-focus-bubble-submit:hover { background-color: rgba(168, 85, 247, 0.15); }
/* מוסתרת בכוח כשהמגירה/מודל פתוחים - אותו טעם בדיוק כמו שני כפתורי ה-FAB
   הקבועים (ר' ההערה עליהם למעלה): z-index גבוה שלה היה מנצח את שכבת
   המגירה/המודלים ומשאיר אותה צפה מעליהם */
.phone-wrapper.menu-open .daily-focus-bubble,
.phone-wrapper.modal-open .daily-focus-bubble,
.phone-wrapper.vision-open .daily-focus-bubble,
.phone-wrapper.study-open .daily-focus-bubble,
.phone-wrapper.projects-open .daily-focus-bubble {
    opacity: 0 !important;
    pointer-events: none !important;
}
/* צ'קבוקס קטן מאוד (לפי בקשה מפורשת) לסימון "בוצע" בפירוט היום בלוח החודשי */
.day-detail-checkbox { width: 13px; height: 13px; flex-shrink: 0; accent-color: var(--tile-accent, var(--accent-gold)); cursor: pointer; margin: 0; }
/* אייקון "חוזר" קטן בפירוט היום בלוח החודשי - מבדיל חזותית משימה קבועה
   מהלו"ז השבועי מאירוע חד-פעמי (שאין לו את האייקון הזה) */
.today-tasks-recurring-icon { flex-shrink: 0; font-size: 0.8rem; opacity: 0.75; }

.calendar-event-recurring-toggle { display: flex; align-items: center; gap: 8px; font-size: 0.82rem; color: var(--text-secondary); cursor: pointer; padding: 2px 0; }
.calendar-event-recurring-toggle input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--accent-purple); cursor: pointer; }
.calendar-event-recurring-options { display: flex; flex-direction: column; gap: 8px; padding: 10px; margin-top: 4px; background-color: rgba(168, 85, 247, 0.05); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 12px; }
.calendar-event-recurring-options .language-select { padding: 10px 10px 10px 32px; font-size: 0.85rem; background-size: 12px; }
html[dir="rtl"] .calendar-event-recurring-options .language-select { padding: 10px 32px 10px 10px; }
.calendar-event-repeat-interval-row { display: flex; align-items: center; gap: 8px; }
.calendar-event-repeat-every-label { flex-shrink: 0; font-size: 0.82rem; color: var(--text-secondary); font-weight: 600; }
.calendar-event-recur-interval-input { flex: 0 0 54px; width: 54px; min-width: 0; background-color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.05); color: #fff; border-radius: 10px; padding: 10px 4px; font-size: 0.85rem; text-align: center; outline: none; box-sizing: border-box; }
.calendar-event-repeat-interval-row .language-select { flex: 1 1 auto; min-width: 0; }

.calendar-event-series { display: flex; flex-direction: column; }
.calendar-event-series-header { margin-bottom: 0; }
.calendar-event-series-toggle { background: transparent; border: 1px solid rgba(168, 85, 247, 0.25); color: var(--accent-purple-light-text); border-radius: 8px; width: 26px; height: 26px; font-size: 0.68rem; padding: 0; flex-shrink: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.calendar-event-series-toggle:active { transform: scale(0.92); }
.calendar-event-series-dates { display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 14px 10px 14px; margin-top: -4px; background-color: rgba(20, 18, 26, 0.3); border-radius: 0 0 12px 12px; border-inline-start: 3px solid var(--accent-purple); }
.calendar-event-series-date-line { display: flex; align-items: center; gap: 6px; background-color: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); color: var(--accent-purple-light-text); font-size: 0.72rem; font-weight: 600; border-radius: 6px; padding: 3px 8px; cursor: pointer; }
.calendar-event-series-date-line input[type="checkbox"] { width: 13px; height: 13px; accent-color: var(--accent-purple); cursor: pointer; margin: 0; }
.calendar-event-series-date-line.completed { opacity: 0.55; text-decoration: line-through; }
/* מחיקת מופע בודד מתוך סדרה חוזרת - קטן ועדין, כדי לא להתחרות ויזואלית עם
   ה-❌ הראשי של הסדרה כולה בכותרת (deleteRecurringSeries, שמפסיקה את כולם) */
.calendar-event-series-date-delete { background: transparent; border: none; color: var(--text-secondary); font-size: 0.62rem; padding: 0; margin-inline-start: 2px; cursor: pointer; opacity: 0.7; flex-shrink: 0; }
.calendar-event-series-date-delete:hover { opacity: 1; }
/* וי ישיר על המופע הקרוב ביותר בכותרת המצומצמת - בדיוק כמו הוי של כל מופע
   ברשימה הפתוחה למטה, רק נגיש בלי צורך ללחוץ על החץ ולהרחיב קודם */
.calendar-event-series-nearest-checkbox { width: 15px; height: 15px; accent-color: var(--accent-purple); cursor: pointer; margin: 0; flex-shrink: 0; }

/* כוכב - מחליף את ידית הגרירה הישנה (הוסרה) כדרך לקבוע עדיפות ב"כל
   האירועים" - לפי בקשה מפורשת, כדי שהסדר יהיה לפי תאריך + כוכב בלבד */
.calendar-event-star-btn { background: none; border: none; padding: 0 2px; font-size: 0.8rem; cursor: pointer; flex-shrink: 0; color: var(--accent-purple-text); transition: var(--transition); }
.calendar-event-star-btn:active { transform: scale(0.9); }
.calendar-event-progress-badge { flex-shrink: 0; background-color: rgba(0, 230, 118, 0.1); border: 1px solid rgba(0, 230, 118, 0.3); color: var(--accent-green-text); font-size: 0.7rem; font-weight: 700; border-radius: 20px; padding: 3px 9px; }

/* המתכונים שלי: רשת קוביות (תמיד פתוחה, ללא חץ קיפול) + תצוגת פרטים במסך מלא */
.recipes-main-card .card-body { max-height: none; overflow: visible; }
.hidden { display: none !important; }

.recipes-categories-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 14px 10px; width: 100%; box-sizing: border-box; }
.recipe-category-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    gap: 6px;
    width: 92px;
    cursor: pointer;
    transition: var(--transition);
}
.recipe-category-card:active { transform: scale(0.93); }
.recipe-category-icon { position: relative; }
.recipe-category-count { position: absolute; bottom: -2px; inset-inline-end: -2px; background-color: var(--tile-accent, var(--accent-purple)); color: #fff; font-size: 0.62rem; font-weight: 700; border-radius: 10px; padding: 1px 6px; min-width: 14px; text-align: center; border: 2px solid var(--bg-main); }

.recipes-list-view { display: none; }
.recipes-list-view.open { display: block; }
.recipes-list-header { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.recipes-list-header h3 { margin: 0; font-size: 0.95rem; color: var(--accent-purple-light-text); }

.recipes-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; width: 100%; box-sizing: border-box; }
.recipes-empty { grid-column: 1 / -1; color: var(--text-secondary); font-size: 0.85rem; text-align: center; padding: 20px 0; }

.skeleton-card { aspect-ratio: 1; border-radius: 14px; background: linear-gradient(110deg, rgba(255,255,255,0.03) 8%, rgba(255,255,255,0.08) 18%, rgba(255,255,255,0.03) 33%); background-size: 200% 100%; animation: skeletonShimmer 1.4s ease-in-out infinite; }
@keyframes skeletonShimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } }

.app-loading-overlay { display: none; position: absolute; inset: 0; background: var(--bg-main); z-index: 4000; align-items: center; justify-content: center; }
.app-loading-overlay.open { display: flex; }
/* נצנצים שיורדים מתחת למשפט "That's about to become real" - במקום עיגול
   טעינה גנרי, לפי בקשה מפורשת ("טעינה אחרת כמו נצנצים שיורדים מתוך המשפט").
   אותו רעיון בדיוק כמו all-done-sparkle/allDoneSparkleFall (ר' startLoadingSparkles
   ב-app.js), רק בתוך אזור קטן ומוגבל מתחת לטקסט, לא על פני כל המסך */
.loading-sparkles-wrap { position: relative; width: 100%; max-width: 220px; height: 60px; margin: -14px auto 0; overflow: hidden; }
.loading-sparkles { position: absolute; inset: 0; pointer-events: none; }
.loading-sparkle {
    position: absolute;
    top: -4px;
    animation-name: loadingSparkleFall;
    animation-timing-function: ease-in;
    animation-fill-mode: forwards;
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--accent-purple-light) 60%, transparent));
}
[data-color-theme="deep_space"] .loading-sparkle {
    filter: drop-shadow(0 0 4px rgba(59, 130, 246, 0.6));
}
@keyframes loadingSparkleFall {
    0% { transform: translateY(0) rotate(0deg); opacity: 0; }
    15% { opacity: 1; }
    80% { opacity: 1; }
    100% { transform: translateY(60px) rotate(200deg); opacity: 0; }
}
/* אנימציית "ספר" על כל המסך במסך הטעינה - 7 "דפים" ערוכים בערימה (position:
   absolute, z-index יורד), כל אחד הופך (rotateY, perspective תלת-ממדי) בתורו
   עם עיכוב מדורג, וחושף את הדף שמתחתיו - כך שזה נראה כמו דפדוף אמיתי מדף
   לדף, לא רק פתיחת כריכה בודדת. הדף האחרון (book-final-page) הוא "עמוד
   הסיום" הקבוע עם ברכת הפתיחה+ספינר, ונשאר גלוי עד שהטעינה האמיתית מסתיימת */
/* perspective נמוך יותר (היה 2200px) = זווית תלת-ממדית הרבה יותר דרמטית
   ונראית-אמיתית בזמן ההיפוך, לא שטוחה - לפי בקשה מפורשת ("שיראה כמו דפדוף
   אמיתי לא שיראה ישר") */
.book-fullscreen { position: relative; width: 92%; max-width: 520px; height: 82%; max-height: 780px; perspective: 1000px; }
.book-page, .book-final-page {
    position: absolute; inset: 0;
    border-radius: 16px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.55);
    backface-visibility: hidden; -webkit-backface-visibility: hidden;
    transform-origin: left center;
    display: flex; align-items: center; justify-content: center;
}
/* ממשיך את גרדיאנט הרקע של הדפים עצמם (במקום החזרה הפתאומית לרקע האפליקציה
   הכהה/שחור-כמעט, שנראה מנותק ו"מכוער" ליד הדפים הצבעוניים שלפניו) + זוהר
   רדיאלי עדין מאחורי הטקסט לתחושת עומק, לא ריבוע שטוח. var(--bg-main)/
   var(--accent-purple) במקום צבעים קבועים - כך שמסך הכניסה משתנה אוטומטית
   לפי ערכת הנושא שנבחרה (לא תמיד כחול קבוע), לפי בקשה מפורשת. index.html
   מיישם את data-color-theme סינכרונית ומוקדם מאוד כדי שזה כבר נכון בציור
   הראשון, ר' ההערה שם */
.book-final-page {
    /* var(--border-color) - לא var(--accent-purple) - כי רק צבעי הרקע/משטחים
       (כולל border-color) עודכנו לכחול בזמן הצביעה-מחדש של ברירת המחדל,
       ולא צבעי ה-accent (ר' ההערה למעלה ב-:root); כך זה כבר נכון גם
       בברירת המחדל וגם בכל ערכה פרימיום בלי override נפרד */
    background:
        radial-gradient(ellipse at 50% 45%, var(--border-color), transparent 60%),
        var(--bg-main);
    border: 1px solid var(--border-color);
    flex-direction: column; gap: 18px;
    z-index: 0;
}
/* font-family קבוע (לא var(--user-font)) בכוונה - מסך הטעינה מוצג לפני
   שהפונט המותאם-אישית נטען מהשרת (async), ובלעדי זה הטקסט "מהבהב" בין
   הפונט הזמני לפונט הסופי כמה מאות מילישניות אחרי - לפי דיווח מפורש
   ("יש שם בפונט שונה את המשפט הראשון ואז הוא משתנה") */
/* var(--text-primary) היה כמעט תמיד לבן/כמעט-לבן בכל ערכות הנושא (במצב כהה,
   מטעמי קריאות על רקע כהה) - זה בדיוק מה ש"עדיין לבן" מתאר. עכשיו צבוע
   באותו גוון-מותג של הערכה הנבחרת (accent-purple-light-text), כמו הכיתוב
   השני "That's about to become real" בעמוד הבא - לפי בקשה מפורשת ("לכל
   ערכות נושא כל אחת בצבע שלה") */
.book-welcome-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1.25rem; font-weight: 800; color: var(--accent-purple-light-text); margin: 0; text-align: center; padding: 0 24px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.book-final-page .book-welcome-subtext { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1.1rem; font-weight: 700; color: var(--accent-purple-light); margin: 0; text-align: center; padding: 0 24px; text-shadow: 0 0 16px color-mix(in srgb, var(--accent-purple) 50%, transparent); }
[data-color-theme="deep_space"] .book-final-page .book-welcome-subtext {
    color: #93c5fd;
    text-shadow: 0 0 16px rgba(59, 130, 246, 0.5);
}
.book-logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1.6rem; font-weight: 800; color: #fff; letter-spacing: 0.5px; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.4); }
.book-title-page { flex-direction: column; gap: 14px; }
.book-logo-small { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 1rem; font-weight: 800; color: rgba(255,255,255,0.85); letter-spacing: 0.5px; text-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); }
/* רק שני "דפים" (לא 7) - הדף הראשון (כותרת) ודף הסיום (עם הספינר) - לפי
   בקשה מפורשת ("רק הדף הראשון והאחרון"). כל דף נשאר גלוי כ-3.5 שניות (היה
   5) - קוצר לפי בקשה מפורשת ("יותר מהיר, אבל קריא") - ר'
   BOOK_LOADING_ANIMATION_MS ב-app.js ששומר את כל הרצף פתוח מספיק זמן */
.book-page { animation-name: bookPageTurn; animation-duration: 0.3s; animation-timing-function: ease-in-out; animation-fill-mode: forwards; }
.book-page-1 { background: var(--bg-main); z-index: 7; animation-delay: 3.5s; }
/* brightness יורד ועולה סביב אמצע ההיפוך (הדף "בפרופיל", כמעט בלי רוחב) -
   מדמה איך דף אמיתי כמעט לא מחזיר אור ברגע שהוא ניצב לצופה, לפי בקשה
   מפורשת שהדפדוף ייראה אמיתי ולא שטוח */
@keyframes bookPageTurn { 0% { transform: rotateY(0deg); filter: brightness(1); } 50% { filter: brightness(0.55); } 100% { transform: rotateY(-180deg); filter: brightness(1); } }
/* ספרים בעברית נפתחים/מדפדפים מימין לשמאל - מראה של הציר וכיוון הסיבוב,
   כדי שזה יראה כמו דפדוף אמיתי גם ב-RTL, לא רק פליפ מוזר בכיוון ההפוך */
html[dir="rtl"] .book-page, html[dir="rtl"] .book-final-page { transform-origin: right center; }
html[dir="rtl"] .book-page { animation-name: bookPageTurnRtl; }
@keyframes bookPageTurnRtl { 0% { transform: rotateY(0deg); filter: brightness(1); } 50% { filter: brightness(0.55); } 100% { transform: rotateY(180deg); filter: brightness(1); } }
.recipe-card {
    background-color: var(--bg-glass);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 14px;
    padding: 14px;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25);
    min-width: 0;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-height: 84px;
}
.recipe-card:active { transform: scale(0.96); }
.recipe-card-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.recipe-card-calories { font-size: 0.75rem; font-weight: 600; color: var(--accent-purple-light-text); }

.recipe-form-grid { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.recipe-form-grid input, .recipe-form-grid textarea, .recipe-form-grid select { background-color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255,255,255,0.05); color: #fff; border-radius: 10px; padding: 12px; font-size: 0.9rem; outline: none; font-family: inherit; resize: vertical; box-sizing: border-box; width: 100%; }
#recipe-ai-raw-input { background-color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(168, 85, 247, 0.2); color: #fff; border-radius: 10px; padding: 12px; font-size: 0.85rem; outline: none; font-family: inherit; resize: vertical; box-sizing: border-box; width: 100%; margin-bottom: 8px; }
/* אזהרה עדינה מתחת לשדה הקלוריות - מוצגת רק כשהערך שם הוא אומדן מקומי
   (לא מספר מפורש מהטקסט ולא תוצאה מ-AI אמיתי בענן), כדי שהמשתמש ידע לבדוק */
.recipe-calories-estimate-hint { margin: -4px 0 0 0; font-size: 0.72rem; color: var(--accent-gold-text); opacity: 0.85; }
#btn-recipe-ai-parse { width: 100%; margin-bottom: 4px; }
.recipe-scan-divider { text-align: center; font-size: 0.7rem; color: var(--text-secondary); opacity: 0.6; margin: 8px 0; text-transform: uppercase; letter-spacing: 1px; }
.recipe-scan-hint { text-align: center; font-size: 0.68rem; color: var(--text-secondary); opacity: 0.7; margin: 4px 0 10px 0; }
.btn-meal-photo-scan { width: 100%; text-align: center; margin-bottom: 12px; }
.meal-photo-loading { display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 14px; margin-bottom: 12px; background-color: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 12px; }
.meal-photo-loading p { color: var(--text-secondary); font-size: 0.8rem; margin: 0; }
#btn-recipe-scan-image { width: 100%; margin-bottom: 4px; }

.recipe-detail-view {
    display: none;
    /* absolute (לא fixed!) יחסית ל-.phone-wrapper - בדיוק כמו כל שאר החלונות
       המלאים באפליקציה (apple-modal/login-overlay/hamburger-drawer-overlay).
       fixed שבור בדסקטופ הרחב, כי שם .phone-wrapper הוא כרטיס ממורכז עם
       max-width (לא כל חלון הדפדפן) - fixed היה "בורח" מגבולות הכרטיס וגם לא
       מכסה נכון את הרוחב המלא שלו. z-index גבוה מ-.fab-dock (99999 !important)
       זה מה שבאמת תיקן את הבעיה של הכפתור הצף שהציץ מעל תצוגת המתכון */
    position: absolute;
    inset: 0;
    /* background (לא background-color)! חלק מהערכות הפרימיום מגדירות
       --bg-main כגרדיאנט (ר' ההערה על .phone-wrapper למעלה) - background-color
       מתעלם בשקט מערך גרדיאנט ומשאיר את הרקע שקוף, בדיוק מה שגרם לרשימת
       המתכונים "לבצבץ" מתחת לתצוגה למרות המיקום/z-index התקינים */
    background: var(--bg-main);
    z-index: 100000;
    flex-direction: column;
    overflow: hidden;
}
.recipe-detail-view.open { display: flex; }
.recipe-detail-header { padding: 16px; flex-shrink: 0; border-bottom: 1px solid rgba(255,255,255,0.05); display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.recipe-detail-header-actions { display: flex; align-items: center; gap: 8px; }
.btn-recipe-back, .btn-subview-back { background: transparent; border: 1px solid rgba(255,255,255,0.08); color: var(--text-primary); border-radius: 20px; padding: 8px 16px; font-size: 0.85rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; }
.btn-recipe-back:active, .btn-subview-back:active { transform: scale(0.95); }
/* חץ-חזרה "←" קבוע בטקסט - נכון פיזית ל-RTL (חזרה = ימינה בכיוון קריאה),
   אבל מצביע לכיוון הלא נכון באנגלית/LTR (שם "חזרה" אמור להיות שמאלה).
   scaleX(-1) הופך את הגליף עצמו ויזואלית בלי לגעת ב-18 המופעים ב-HTML */
html[dir="ltr"] .btn-recipe-back span[aria-hidden="true"],
html[dir="ltr"] .btn-subview-back span[aria-hidden="true"],
html[dir="ltr"] .btn-back-home span[aria-hidden="true"] {
    display: inline-block;
    transform: scaleX(-1);
}
.btn-subview-back { margin-bottom: 14px; }
/* כפתור "חזור למסך הבית": בכוונה בולט/ניאוני יותר מ-btn-subview-back הרגיל -
   זו החזרה מ"עולם" שלם חזרה לרשת הקוביות הראשית, לא רק חזרה לרשת תת-קוביות.
   margin-top: אותה סיבה בדיוק כמו padding-top:70px של .home-hero-panel - מפנה
   מקום קבוע מתחת לשני כפתורי ה-FAB (עוזר AI בפינה שמאל-עליונה, המבורגר
   בפינה ימין-עליונה, שניהם top:22px עד ~70px) כדי שכותרת הכרטיס הראשון בעמוד
   (עם החץ לקיפול/פלוס, שיושבים בדיוק בפינה שמאלית ב-RTL) לא תיחבא מתחתיהם -
   בלי זה החץ/פלוס כמעט בלתי לחיצים בעמודים כמו הרגלים/ספורט */
.btn-back-home {
    background-color: rgba(168, 85, 247, 0.1);
    border: 1px solid var(--accent-purple);
    color: var(--text-primary);
    border-radius: 20px;
    padding: 8px 16px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    align-self: flex-start;
    box-shadow: 0 0 14px rgba(168, 85, 247, 0.35);
    transition: var(--transition);
    margin-top: 14px;
    margin-bottom: 14px;
}
.btn-back-home:active { transform: scale(0.95); }
.btn-recipe-edit, .btn-recipe-delete { border-radius: 20px; padding: 8px 14px; font-size: 0.8rem; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; border: 1px solid; }
.btn-recipe-edit { background-color: rgba(168, 85, 247, 0.1); border-color: rgba(168, 85, 247, 0.3); color: var(--accent-purple-light-text); }
.btn-recipe-delete { background-color: rgba(255, 69, 58, 0.08); border-color: rgba(255, 69, 58, 0.25); color: var(--accent-red-text); }
.btn-recipe-edit:active, .btn-recipe-delete:active { transform: scale(0.95); }
.recipe-detail-empty-line { color: var(--text-secondary) !important; font-style: italic; }
.recipe-detail-body { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 8px 20px 30px 20px; box-sizing: border-box; }
.recipe-detail-body h2 { font-size: 1.3rem; margin: 6px 0 10px 0; }
.recipe-detail-body h3 { font-size: 0.95rem; color: var(--accent-purple-light-text); margin: 20px 0 10px 0; }
.recipe-detail-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 6px; }
.recipe-detail-badge { background-color: rgba(168, 85, 247, 0.1); border: 1px solid rgba(168, 85, 247, 0.25); color: var(--accent-purple-light-text); font-size: 0.75rem; font-weight: 600; border-radius: 20px; padding: 5px 12px; }
.recipe-detail-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.recipe-detail-list li { background-color: var(--bg-row); border-radius: 8px; padding: 10px 12px; font-size: 0.88rem; color: var(--text-primary); text-align: start; }
.recipe-detail-instructions p { font-size: 0.88rem; color: var(--text-primary); line-height: 1.6; margin: 0 0 10px 0; text-align: start; }
.recipe-detail-calories-summary { color: var(--accent-purple-light-text) !important; font-weight: 600; }

.meals-container { display: flex; flex-direction: column; gap: 8px; width: 100%; box-sizing: border-box; }
.meal-row { background-color: var(--bg-row); padding: 10px; border-radius: 12px; border: 1px solid rgba(255,255,255,0.01); display: flex; flex-direction: column; gap: 6px; width: 100%; box-sizing: border-box; }
.meal-header-row { display: flex; justify-content: space-between; align-items: center; }
.meal-label { font-weight: 600; font-size: 0.8rem; color: var(--accent-pink-text); }
.preset-select-trigger { background-color: rgba(168, 85, 247, 0.08); color: var(--accent-purple-light-text); border: 1px solid rgba(168, 85, 247, 0.22); border-radius: 8px; padding: 4px 8px; font-size: 0.7rem; outline: none; cursor: pointer; transition: var(--transition); font-family: inherit; }
.preset-select-trigger:hover { background-color: rgba(168, 85, 247, 0.15); border-color: rgba(168, 85, 247, 0.4); }
/* תת-כותרת (מרכיבים) מתחת לשם/קלוריות של כל ארוחה שמורה ברשימת הבחירה -
   טקסט קטן ועמום יותר, כדי שלא יתחרה עם השם הראשי */
.preset-picker-description { display: block; font-size: 0.72rem; color: var(--text-secondary); opacity: 0.75; margin-top: 2px; }
.nutrition-food-tip { font-size: 0.75rem; color: var(--text-secondary); text-align: center; margin: 10px 0 0 0; opacity: 0.85; }
.meal-inputs-wrap { display: flex; gap: 8px; flex-wrap: wrap; }
.food-input { flex: 1 1 120px; min-width: 0; box-sizing: border-box; padding: 8px; background-color: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.03); color:#fff; border-radius: 6px; font-size: 0.8rem; outline:none; }
.calories-input { flex: 0 0 60px; box-sizing: border-box; padding: 8px; background-color: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.03); color:#fff; border-radius: 6px; font-size: 0.8rem; text-align:center; outline:none; }
/* בדיקת AI ברקע על שורת ארוחה (ר' escalateMealRowToAI) - הבהוב עדין שמסמן
   שהמספר עדיין עשוי להתעדכן, בלי לחסום את השדה */
.calories-input.ai-estimating { animation: caloriesAiEstimatePulse 1.1s ease-in-out infinite; }
@keyframes caloriesAiEstimatePulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.4; } }
/* מספר קלוריות חריג למנה בודדת (ר' IMPLAUSIBLE_SINGLE_MEAL_CALORIES/
   flagImplausibleCalories) - אזהרה לא-חוסמת (מסגרת+זוהר אדום), לא מונעת שמירה */
.calories-input.calories-implausible { border-color: var(--accent-red); box-shadow: 0 0 0 2px rgba(255, 69, 58, 0.3); }
.protein-input { flex: 0 0 70px; box-sizing: border-box; padding: 8px; background-color: rgba(0,0,0,0.25); border: 1px solid rgba(255,255,255,0.03); color:#fff; border-radius: 6px; font-size: 0.8rem; text-align:center; outline:none; }
/* שמירת שורת ארוחה שהוקלדה כ"ארוחה קבועה" (meal_presets) בלחיצה אחת -
   בלי לצאת ל"ניהול ארוחות" ולהקליד שוב את מה שכבר הוקלד כאן */
.btn-save-as-preset { flex: 0 0 auto; background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.06); border-radius: 6px; padding: 8px 10px; font-size: 0.85rem; cursor: pointer; }
.btn-save-as-preset:active { transform: scale(0.92); }
.stats-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; }
.stats-grid-2col { grid-template-columns: repeat(2, minmax(0, 1fr)); }
#steps-connect-wrap { display: flex; flex-direction: column; gap: 8px; }
.steps-connect-note { font-size: 0.7rem; color: var(--text-secondary); text-align: center; margin: 0; line-height: 1.4; }
.stat-box { background-color: rgba(255, 255, 255, 0.02); border-radius: 10px; padding: 10px 2px; text-align: center; border: 1px solid rgba(255,255,255,0.02); min-width: 0; box-sizing: border-box; overflow: hidden; }
.stat-box h3 { margin: 0 0 2px 0; font-size: 0.7rem; color: var(--text-secondary); font-weight: 500; }
.stat-number { font-size: 1.25rem; font-weight: 700; }
.today .stat-number { color: var(--accent-pink-text); }
.weekly .stat-number { color: var(--accent-purple-text); }
.monthly .stat-number { color: var(--text-primary); }
.stat-avg { font-size: 0.62rem; color: var(--text-secondary); margin-top: 1px; }
/* 4 כרטיסי "סיכום חודשי" של הוצאות/הכנסות - כל אחד עם צבע ייעודי משלו */
.finance-stat-income .stat-number { color: var(--accent-green-text); }
.finance-stat-expense .stat-number { color: var(--accent-purple-text); }
.finance-stat-budget .stat-number, .finance-stat-budget .stat-number-input { color: var(--accent-gold-text); }
.finance-stat-remaining .stat-number { color: var(--accent-green-text); }
/* תקציב מתוכנן ניתן לעריכה במקום (לא כפתור/מודל נפרד) - נראה בדיוק כמו
   .stat-number הרגיל אבל הוא בפועל input, ללא מסגרת/רקע ברירת מחדל של הדפדפן */
.stat-number-input {
    width: 100%;
    box-sizing: border-box;
    background: transparent;
    border: none;
    border-bottom: 1px dashed rgba(245, 158, 11, 0.4);
    text-align: center;
    font-size: 1.25rem;
    font-weight: 700;
    font-family: inherit;
    outline: none;
    padding: 0 0 2px 0;
}
.stat-number-input::placeholder { color: var(--text-secondary); opacity: 0.5; font-weight: 500; }
.stat-number-input:focus { border-bottom-color: var(--accent-gold); }
/* תווית "חריגה" רכה - ענבר/אדום, לא צבעק אזהרה תוקפני, כשההוצאות עברו את
   התקציב המתוכנן */
.finance-overspend-label {
    display: inline-block;
    margin-top: 3px;
    font-size: 0.62rem;
    font-weight: 700;
    color: var(--accent-red-text);
    background-color: rgba(255, 69, 58, 0.1);
    border: 1px solid rgba(255, 69, 58, 0.25);
    border-radius: 10px;
    padding: 1px 8px;
}
.weight-inputs-wrap { display: flex; flex-wrap: wrap; gap: 8px; }
.weight-inputs-wrap input { background-color: rgba(0,0,0,0.2); border: 1px solid rgba(255,255,255,0.03); color: #fff; border-radius: 8px; padding: 8px; font-size: 0.8rem; outline: none; flex: 1 1 110px; min-width: 0; box-sizing: border-box; }
.weight-inputs-wrap .date-picker-field-trigger { flex: 1 1 110px; min-width: 0; padding: 8px; font-size: 0.8rem; }
.weight-inputs-wrap #btn-save-weight { flex: 1 1 100%; width: 100% !important; }
/* max-width+margin:auto (לא width:100% גורף) - כדי שברוחב מסך גדול (דסקטופ)
   הרשימה לא תימתח לכל הרוחב אלא תישאר קומפקטית וממורכזת, לפי בקשה מפורשת */
/* חזרה ל-width:100% מלא (בלי תקרת max-width) - לפי בקשה מפורשת שהרוחב
   המלא "נראה יותר טוב"; הריבועים עצמם עגולים ומצומצמים יותר במקום זה
   (border-radius/padding למטה), לפי בקשה מפורשת "יותר עגולה... ויותר קטנה" */
.center-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; width: 100%; }
.center-list li {
    background-color: var(--bg-row);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(168, 85, 247, 0.2);
    border-radius: 20px;
    padding: 8px 14px;
    display: flex;
    flex-direction: row; /* הצ'קבוקס בצד ימין, כפתור המחיקה בצד שמאל */
    justify-content: space-between;
    /* flex-start ולא center - פתק עם טקסט ארוך שגולש להרבה שורות "מותח" את
       השורה לגובה ענק, ועם align-items:center כפתורי העריכה/מחיקה מתמרכזים
       אי-שם באמצע גוש הטקסט העצום, כמעט בלתי-נראים; עם flex-start הם תמיד
       צמודים לשורה הראשונה של הטקסט, בלי קשר לכמה הפתק ארוך */
    align-items: flex-start;
    font-size: 0.9rem;
    color: var(--text-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2);
    width: 100%;
    box-sizing: border-box;
}
/* min-width:0 + overflow-wrap - פתק עם "מילה" ארוכה בלי רווחים בכלל (למשל
   שורת קווים תחתונים "____...." שהוקלדה כמפריד חזותי) היא בלתי-שבירה
   כברירת מחדל; פריט flex לא מתכווץ מתחת ל-min-content שלו (min-width:auto
   כברירת מחדל), אז המילה הענקית "דחפה" את כל השורה לרוחב ענק והוציאה את
   כפתורי העריכה/מחיקה (שבאים אחריה ב-flex) הרחק מחוץ לתחום הנראה - בדיוק
   מה שנראה כמו "קו" עם כפתורים חסרים */
/* line-clamp ל-3 שורות - פתק ארוך מאוד מצטמצם עם "..." במקום למתוח את
   השורה לגובה ענק, לפי בקשה מפורשת. הטקסט המלא עדיין נגיש דרך העריכה (✏️) */
.center-list-item-text { flex: 1; min-width: 0; overflow-wrap: break-word; word-break: break-word; text-align: start; margin-inline-start: 10px; font-weight: 500; color: var(--text-primary); display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 3; overflow: hidden; }
.center-list-item-text.completed { text-decoration: line-through; color: var(--text-secondary); }
/* מפריד "להגיע לזה" בתוך רשימת הפתקים - לא כרטיס פתק (מבטל את הרקע/מסגרת/
   צל של .center-list li), תגית קטנה בצד במקום קו - אותה שפה חזותית כמו
   today-tasks-time, כדי שיהיה ברור שזה קטע נפרד ברשימה ולא פתק שאפשר
   ללחוץ/לערוך/למחוק */
.center-list-divider {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 8px;
    cursor: pointer;
}
.center-list-divider-label {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--text-secondary);
    font-size: 0.68rem;
    font-weight: 700;
    border-radius: 8px;
    padding: 3px 10px;
}
/* מתקפל, מכווץ כברירת מחדל - .expanded (מתווסף/מוסר ב-onclick, ר'
   buildNoteSomedayDivider ב-app.js) חושף את הפתקים; ה-› מסתובב 90 מעלות
   כשפתוח, אותו דפוס בדיוק כמו שאר הכפתרים המתקפלים באפליקציה */
.center-list-divider-chevron { color: var(--text-secondary); font-size: 0.85rem; transition: transform 0.2s ease; }
.center-list-divider.expanded .center-list-divider-chevron { transform: rotate(90deg); }
.center-list-divider:not(.expanded) ~ li { display: none; }
/* פתקי "להגיע לזה" - מהמפריד עצמו ועד סוף הרשימה (~ תופס את כל האחים
   שאחריו, לא רק את הבא) - מקבלים סטייל בהיר/שקוף יותר כדי שלא ישתלטו
   חזותית על הפתקים הרגילים מעליהם, לפי בקשה מפורשת. opacity ולא rgba קבוע,
   כדי שזה יעבוד אוטומטית בכל ערכת נושא/מצב בהיר-כהה בלי לשכפל צבעים */
.center-list-divider,
.center-list-divider ~ li {
    opacity: 0.6;
}
/* גרירת פתק אל "היום"/"מחר" (ר' initNoteTriageDragDrop ב-app.js) - אותה שפה
   חזותית כמו ידית הגרירה של הלו"ז (.slot-drag-handle) */
.note-drag-handle { cursor: grab; color: var(--text-secondary); font-size: 0.95rem; padding: 0 2px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; flex-shrink: 0; }
/* ארכיון פתקים מחוקים - אייקון קטן ומעומעם, תמיד בצד שמאל הפיזי (לא לפי
   כיוון הכתיבה - בקשה מפורשת), לא קישור-טקסט עם חץ ולא מתקפל בתוך הרשימה -
   לחיצה עליו פותחת מודל נפרד (modal-notes-archive), "כמו לעולם חדש" */
/* margin-right (פיזי, לא margin-inline-end לוגי) - תמיד בצד שמאל הפיזי
   של המסך בלי קשר לכיוון הכתיבה של השפה הנוכחית (RTL/LTR), לפי בקשה מפורשת */
.notes-archive-icon-btn { display: flex; align-items: center; gap: 2px; margin-top: 8px; margin-right: auto; width: fit-content; background: none; border: none; padding: 4px; font-size: 0.9rem; color: var(--text-secondary); opacity: 0.5; cursor: pointer; transition: var(--transition); }
.notes-archive-icon-btn:hover { opacity: 1; }
.notes-archive-count-badge { font-size: 0.65rem; font-variant-numeric: tabular-nums; }
.notes-archive-list { margin-top: 6px; opacity: 0.85; }
/* פתק בארכיון - אותו בסיס עיצובי כמו פתק רגיל (.center-list li) אבל שקוף
   יותר ובלי ידית גרירה (ארכיון לא נגרר), כדי שיהיה ברור חזותית שזה "לא
   לשימוש שוטף" בלי להיעלם לגמרי */
.archive-item { opacity: 0.7; border-style: dashed; }
.archive-item .center-list-item-text { color: var(--text-secondary); }
/* הרגלים ורצף - שורה עם כפתור סימון-יומי, שם, תגית רצף וכפתור מחיקה, לפי
   סדר קבוע (לא space-between כמו .center-list li הרגיל, כדי שלא "יתפזרו"
   עם 4 ילדים) */
.habit-item { display: flex; align-items: center; gap: 10px; position: relative; overflow: hidden; }
/* פס גרדיאנט בצד ההתחלה הלוגי (RTL-safe) - זוהר כשההרגל בוצע היום, עמום
   כשלא, כדי שהעין תתפוס מיד מה כבר נעשה בלי לקרוא כל שורה. לפי בקשה מפורשת
   לעיצוב יותר "יפה" - לא היה שום דבר חזותי שמבדיל בין שורות בעבר */
.habit-item::before {
    content: '';
    position: absolute;
    inset-inline-start: 0;
    top: 0;
    bottom: 0;
    width: 4px;
    background: linear-gradient(180deg, var(--accent-gold), var(--accent-pink));
    opacity: 0.2;
    transition: var(--transition);
}
.habit-item.habit-done::before { opacity: 1; box-shadow: 0 0 10px rgba(245, 158, 11, 0.55); }
.habit-streak-badge {
    flex-shrink: 0;
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--text-secondary);
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 4px 10px;
    font-variant-numeric: tabular-nums;
}
.habit-streak-badge.habit-streak-active {
    color: #fff;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-pink));
    border-color: transparent;
    box-shadow: 0 2px 8px rgba(245, 158, 11, 0.4);
}
.btn-habit-history { flex-shrink: 0; background: transparent; border: none; color: var(--text-secondary); font-size: 0.95rem; cursor: pointer; padding: 4px; opacity: 0.8; transition: var(--transition); }
.btn-habit-history:hover { opacity: 1; transform: scale(1.1); }
/* מודל היסטוריית הרגל - שלושת השבבים העגולים (רצף נוכחי/שיא/סה"כ) מעל
   הלוח החודשי, ואותם רכיבי monthly-calendar-* בדיוק כמו הלוח הכללי */
.habit-history-stats { display: flex; justify-content: space-around; margin-bottom: 16px; }
.habit-history-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; }
.habit-history-stat-value { font-size: 1.3rem; font-weight: 800; color: var(--accent-gold-text); font-variant-numeric: tabular-nums; }
.habit-history-stat-label { font-size: 0.68rem; color: var(--text-secondary); font-weight: 600; }
.habit-history-grid .monthly-calendar-cell { cursor: default; }
.habit-history-grid .monthly-calendar-cell.habit-history-done { background-color: rgba(245, 158, 11, 0.16); border-color: rgba(245, 158, 11, 0.45); }
/* עזרה ושאלות נפוצות - גיליון גבוה יותר מהרגיל (85vh->92vh) כי יש הרבה
   תוכן; החיפוש תמיד גלוי למעלה, מחוץ לרשימה הגוללת עצמה */
.help-faq-sheet { max-height: 92vh; display: flex; flex-direction: column; }
#help-faq-search { width: 100%; box-sizing: border-box; margin-bottom: 10px; flex-shrink: 0; }
.help-faq-list { overflow-y: auto; }
.help-faq-category-header { font-size: 0.72rem; font-weight: 700; color: var(--tile-accent, var(--accent-gold)); text-transform: uppercase; letter-spacing: 0.03em; margin: 16px 0 6px; }
.help-faq-category-header:first-child { margin-top: 0; }
.help-faq-item { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.help-faq-question { width: 100%; background: none; border: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 10px 2px; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); text-align: start; cursor: pointer; }
.help-faq-arrow { flex-shrink: 0; color: var(--text-secondary); font-size: 0.7rem; transition: transform 0.2s ease; }
.help-faq-item.open .help-faq-arrow { transform: rotate(180deg); }
.help-faq-answer { max-height: 0; overflow: hidden; color: var(--text-secondary); font-size: 0.8rem; line-height: 1.5; transition: max-height 0.25s ease-out; }
.help-faq-item.open .help-faq-answer { max-height: 400px; padding-bottom: 12px; }
.note-drag-handle:active { cursor: grabbing; }
.note-triage-hint { font-size: 0.72rem; color: var(--text-secondary); margin: 0 0 8px 0; text-align: center; }
.note-triage-zones { display: flex; gap: 10px; margin-bottom: 12px; }
/* כרטיס-זכוכית זוהר, לא מסגרת מקווקוות - אותה שפה חזותית כמו שאר האפליקציה
   (stat-box/calendar-event-date-badge וכו') כדי שלא ירגיש כמו "אזור טכני" נפרד */
/* מוקטן (padding/font/אייקון) - לפי בקשה מפורשת ("סתם תופסים מקום") */
.note-triage-zone {
    flex: 1 1 0;
    background-color: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 0, 127, 0.22);
    border-radius: 12px;
    padding: 7px 6px;
    text-align: center;
    font-size: 0.68rem;
    font-weight: 700;
    color: var(--text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    transition: var(--transition);
    min-height: 20px;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.25), inset 0 1px 1px rgba(255, 255, 255, 0.06);
}
.note-triage-icon {
    font-size: 1rem;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: radial-gradient(circle at 50% 35%, rgba(255, 0, 127, 0.28), rgba(168, 85, 247, 0.12));
    box-shadow: 0 0 10px rgba(255, 0, 127, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
/* SortableJS מוסיף .sortable-ghost על הפריט המדומה בזמן גרירה מעל היעד -
   מדגישים את האזור עצמו כשמרחפים מעליו עם פריט נגרר, כולל הגדלה קלה */
.note-triage-zone:has(.sortable-ghost) {
    border-color: var(--accent-pink);
    background-color: rgba(255, 0, 127, 0.1);
    color: var(--accent-pink-text);
    box-shadow: 0 0 20px rgba(255, 0, 127, 0.45), inset 0 1px 1px rgba(255, 255, 255, 0.12);
    transform: scale(1.04);
}
.btn-delete-item { background: transparent; color: var(--text-secondary); border: none; cursor: pointer; font-size: 0.85rem; padding: 4px; transition: var(--transition); z-index: 10;}
.btn-delete-item:hover { color: var(--accent-red-text); transform: scale(1.1); }
/* קופסת סימון: var(--accent-purple) ולא צבע קבוע, כדי שתעקוב אוטומטית אחרי
   ערכת הנושא הפעילה (כהה/בהיר וגם ערכות הצבע הפרימיום שמחליפות את המשתנה הזה) */
.btn-complete-item {
    background: transparent;
    border: 2px solid var(--accent-purple);
    border-radius: 10px;
    width: 30px;
    height: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    font-size: 1rem;
    font-weight: 700;
    margin-left: 10px;
    z-index: 10;
    transition: var(--transition);
}
.btn-complete-item:active { transform: scale(0.88); }
.btn-complete-item.checked {
    background: var(--accent-purple);
    color: #fff;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.2);
}
.progress-container { display: flex; flex-direction: column; gap: 8px; }
.progress-row { background-color: var(--bg-row); border: 1px solid rgba(255,255,255,0.01); border-radius: 10px; padding: 10px; }
.progress-info { display: flex; justify-content: space-between; align-items: center; font-size: 0.8rem; margin-bottom: 6px; }
.progress-counter { display: flex; align-items: center; gap: 6px; }
.btn-counter { background-color: rgba(255, 255, 255, 0.04); color: var(--text-primary); border: 1px solid rgba(255,255,255,0.03); border-radius: 4px; width: 22px; height: 22px; display: flex; justify-content: center; align-items: center; font-weight: bold; z-index: 10;}
.progress-bar-bg { background-color: rgba(255, 255, 255, 0.02); height: 8px; border-radius: 4px; overflow: hidden; }
.progress-bar-fill {
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.4s ease;
    background: linear-gradient(90deg, #ff007f, #a855f7, #7c3aed, #4f46e5, #3b82f6, #06b6d4, #10b981, #eab308, #f97316, #ff007f);
    background-size: 300% 100%;
    animation: progressFlow 6s linear infinite;
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.45);
}
.progress-bar-fill.completed {
    background: linear-gradient(90deg, var(--accent-green), #00e676, #06b6d4, var(--accent-green));
    background-size: 300% 100%;
    animation: progressFlow 4s linear infinite;
    box-shadow: 0 0 10px var(--accent-green);
}
@keyframes progressFlow { 0% { background-position: 0% 50%; } 100% { background-position: 300% 50%; } }
/* שורת 7 ימי-השבוע (וי אמיתי לכל תאריך, לא מונה מופשט) - כל יום הוא כפתור
   קטן ועגול, מסומן = ✓ בגוון ירוק ניאון, לא מסומן = אות ראשונה של שם היום */
.progress-days-row { display: flex; gap: 6px; margin-bottom: 8px; }
.progress-day-check {
    flex: 1 1 0;
    aspect-ratio: 1;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-secondary);
    font-size: 0.75rem;
    font-weight: 700;
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.progress-day-check.checked { background-color: rgba(0, 230, 118, 0.18); border-color: var(--accent-green); color: var(--accent-green-text); box-shadow: 0 0 8px rgba(0, 230, 118, 0.4); }
.progress-day-check:disabled { opacity: 0.35; cursor: not-allowed; }
.progress-day-check:active:not(:disabled) { transform: scale(0.9); }
/* ויזואליזציית "הליכה למטרה" ליעד החודשי (ר' buildGoalPathHtml ב-app.js) -
   inset-inline-start/margin-inline-start בכל מקום (לא left/right/transform)
   כדי שהמסלול יתהפך אוטומטית נכון בעברית (RTL) מול אנגלית (LTR).
   האווטאר/הדגל בנויים כ"כדורי ניאון" זוהרים - בדיוק אותה שפה חזותית של
   .cube-icon/.sub-tile-icon בשאר האפליקציה (זכוכית כהה + טבעת זוהרת + הבהוק
   פנימי) - כדי שירגיש תלת-ממדי ומלוטש כמו כל שאר האייקונים, לא אימוג'י שטוח
   מונח על קו. הוסרה ההטיה התלת-ממדית האמיתית (perspective/rotateX/translateZ)
   שהייתה כאן קודם - באגי חפיפה/בריחה מחוץ לכרטיס במסכים רחבים ובמובייל
   (רכיבים עם transform תלת-ממדי לפעמים "בורחים" מ-overflow:hidden של ההורה
   בדפדפנים מסוימים) - עדיף מסלול שטוח יציב על פני אפקט תלת-ממד שביר */
.goal-path-perspective { padding: 6px 0 34px 0; }
.goal-path-track {
    position: relative;
    height: 46px;
    /* 22px, לא 6px: זה חצי הרוחב של .goal-path-avatar (38px) - בלי שוליים
       מספיקים, כשה-pct מתקרב ל-0% או ל-100% חצי מהאווטאר "נשפך" מעבר לגבול
       המסלול וניחתך ע"י overflow-hidden של .phone-wrapper - בדיוק התלונה
       "לא רואים טוב את האיש רץ" במובייל */
    margin: 0 22px;
}
.goal-path-line {
    position: absolute;
    top: 50%;
    inset-inline-start: 0;
    inset-inline-end: 38px;
    height: 10px;
    transform: translateY(-50%);
    border-radius: 6px;
    background: linear-gradient(90deg, var(--accent-purple), var(--accent-pink));
    opacity: 0.28;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(255, 255, 255, 0.1);
}
.goal-path-step {
    position: absolute;
    top: 50%;
    width: 12px;
    height: 12px;
    margin-inline-start: -6px;
    margin-top: -6px;
    border-radius: 50%;
    background-color: var(--bg-glass);
    border: 2px solid var(--accent-purple);
    opacity: 0.5;
    transition: var(--transition);
    box-sizing: border-box;
    box-shadow: inset 0 1px 1px rgba(255, 255, 255, 0.15);
}
.goal-path-step.reached { opacity: 1; background: var(--accent-purple); box-shadow: 0 0 10px rgba(168, 85, 247, 0.7), inset 0 1px 1px rgba(255, 255, 255, 0.3); }
.goal-path-avatar {
    position: absolute;
    top: 50%;
    width: 38px;
    height: 38px;
    margin-inline-start: -19px;
    margin-top: -19px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    background-color: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--accent-pink);
    box-shadow: 0 0 16px rgba(255, 0, 127, 0.55), 0 0 24px rgba(168, 85, 247, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 6px 10px rgba(0, 0, 0, 0.4);
    transition: inset-inline-start 0.6s cubic-bezier(0.25, 1, 0.5, 1);
    z-index: 2;
}
/* יעד ידני (custom) בלבד: אפשר לגרור את הדמות לאורך המסלול כדי לקבוע
   התקדמות ישירות, במקום ללחוץ הרבה פעמים על +/- ליעד גדול */
.goal-path-track[data-draggable="true"] { cursor: pointer; touch-action: none; }
.goal-path-avatar.draggable { cursor: grab; }
.goal-path-avatar.dragging { transition: none; cursor: grabbing; }
.goal-path-flag {
    position: absolute;
    top: 50%;
    inset-inline-end: -2px;
    width: 34px;
    height: 34px;
    margin-top: -17px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    background-color: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 2px solid var(--accent-gold);
    box-shadow: 0 0 14px rgba(245, 158, 11, 0.55), inset 0 1px 1px rgba(255, 255, 255, 0.15), 0 6px 10px rgba(0, 0, 0, 0.4);
}
.btn-logout { background-color: transparent; color: var(--text-secondary); border: 1px solid rgba(255, 255, 255, 0.06); font-size: 0.8rem; border-radius: 20px; padding: 10px 20px; cursor: pointer; transition: var(--transition); }
.btn-logout:hover { color: var(--accent-red-text); border-color: rgba(255, 69, 58, 0.15); }
/* align-items:center (לא flex-end) - כל המודלים באפליקציה מרוכזים אנכית
   באמצע המסך במקום להיצמד לתחתית כ"בוטום-שיט", לפי בקשה מפורשת ("שיהיה
   באמצע המסך... גם במחשב וגם בנייד, בכל המודלים") */
.apple-modal { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.8); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px); z-index: 2000; display: none; justify-content: center; align-items: center; animation: fadeOverlay 0.2s ease-out; padding: 20px; box-sizing: border-box; }
/* לוח-שנה/תפריט-נפתח מותאמים (modal-custom-date-picker / modal-custom-select-
   picker) נפתחים/נסגרים *ישירות* (לא דרך openModal/closeModal) בדיוק כדי
   שלא יסגרו מודל-הורה שהם נפתחו מתוכו (ר' ההערה על openCustomDatePicker
   ב-app.js) - z-index גבוה יותר מבטיח שהם תמיד יצטיירו *מעל* אותו מודל-הורה
   שנשאר פתוח מתחתיהם, בלי תלות בסדר ה-DOM */
#modal-custom-date-picker, #modal-custom-select-picker { z-index: 2500; }
/* בורר השפה חייב להיפתח גם מעל מסך הכניסה (.login-overlay, z-index:3000 -
   גבוה מ-.apple-modal הרגיל של 2000!) אז הוא צריך z-index ייעודי גבוה יותר */
#modal-language-picker { z-index: 3500; }
/* border-radius מלא בכל הפינות (לא רק העליונות) + צל סימטרי - כרטיס
   צף במרכז המסך, לא "בוטום-שיט" צמוד לתחתית */
.modal-sheet { background-color: var(--bg-sheet); border: 1px solid rgba(255, 0, 127, 0.2); width: 100%; max-width: 520px; border-radius: 20px; padding: 10px 20px 30px 20px; box-shadow: 0 10px 40px rgba(0, 0, 0, 0.7); box-sizing: border-box; transform: translateY(40px); opacity: 0; transition: transform 0.23s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.23s ease-out; max-height: 85vh; overflow-y: auto; position: relative; }

.recipe-scan-loading { display: flex; position: absolute; inset: 0; background-color: rgba(7, 6, 10, 0.94); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); flex-direction: column; align-items: center; justify-content: center; gap: 16px; border-radius: 20px; z-index: 50; }
.recipe-scan-loading p { color: var(--text-secondary); font-size: 0.85rem; margin: 0; font-weight: 500; }
.chasing-dots-loader { display: flex; gap: 10px; }
.chasing-dots-loader span { width: 13px; height: 13px; border-radius: 50%; background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); box-shadow: 0 0 10px rgba(168, 85, 247, 0.6); animation: chasingDotBounce 1.1s ease-in-out infinite; }
.chasing-dots-loader span:nth-child(1) { animation-delay: 0s; }
.chasing-dots-loader span:nth-child(2) { animation-delay: 0.15s; }
.chasing-dots-loader span:nth-child(3) { animation-delay: 0.3s; }
@keyframes chasingDotBounce { 0%, 80%, 100% { transform: scale(0.6) translateY(0); opacity: 0.5; } 40% { transform: scale(1.15) translateY(-12px); opacity: 1; } }
.modal-header-bar { display: flex; justify-content: center; padding: 5px 0 12px 0; }
.modal-pull-bar { width: 36px; height: 5px; background-color: rgba(255, 255, 255, 0.12); border-radius: 3px; }
.modal-sheet h3 { margin: 0 0 15px 0; font-size: 1.05rem; font-weight: 600; text-align: center; color: var(--accent-pink-text); }
/* כותרת "עוזר AI" זוהרת - ניאון סגול/ורוד, לפי בקשה מפורשת */
.ai-brain-modal-title { text-shadow: 0 0 10px rgba(255, 0, 127, 0.65), 0 0 18px rgba(168, 85, 247, 0.5); }
.modal-subtitle { margin: -8px 0 14px 0; font-size: 0.75rem; color: var(--text-secondary); text-align: center; }

/* "דגשי תזונה" - מודל בסגנון מגזין/עיתון דיגיטלי: פונט serif לכותרות (תחושת
   עיתון, לא ה-sans-serif הרגיל של שאר האפליקציה), מסת'הד עם קו כפול, וכותרות
   כתבה עם גרדיאנט זהב->ורוד כמו premium-unlock-content. תוכן קבוע בלבד -
   בלי מעקב נתונים, אז אין צורך בשום JS מעבר לפתיחת/סגירת המודל הרגילה */
.nutrition-daily-sheet { max-width: 560px; }
.nutrition-daily-masthead { text-align: center; padding-bottom: 14px; margin-bottom: 16px; border-bottom: 3px double rgba(245, 158, 11, 0.35); }
.nutrition-daily-title {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    margin: 0 0 6px 0;
    background: linear-gradient(135deg, var(--accent-gold), var(--accent-pink));
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
}
.nutrition-daily-subtitle { font-family: Georgia, 'Times New Roman', serif; font-style: italic; font-size: 0.78rem; color: var(--text-secondary); margin: 0; }
.nutrition-daily-article { margin-bottom: 4px; }
.nutrition-daily-headline {
    font-family: Georgia, 'Times New Roman', serif;
    font-size: 1.02rem;
    font-weight: 700;
    color: var(--accent-gold-text);
    margin: 0 0 8px 0;
    line-height: 1.3;
}
.nutrition-daily-article p { font-size: 0.85rem; line-height: 1.6; color: var(--text-primary); margin: 0 0 10px 0; }
.nutrition-daily-list { margin: 0 0 10px 0; padding-inline-start: 20px; display: flex; flex-direction: column; gap: 8px; }
.nutrition-daily-list li { font-size: 0.85rem; line-height: 1.5; color: var(--text-primary); }
.nutrition-daily-tip { background-color: rgba(168, 85, 247, 0.08); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 10px; padding: 10px 12px; font-size: 0.8rem !important; color: var(--text-secondary) !important; }
.nutrition-daily-divider { height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.15), transparent); margin: 18px 0; }
.nutrition-daily-close { width: 100%; margin-top: 8px; }
.ai-brain-tabs { display: flex; gap: 8px; margin-bottom: 14px; }
.ai-brain-tab { flex: 1; background-color: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.15); color: var(--text-secondary); border-radius: 10px; padding: 10px; font-size: 0.82rem; font-weight: 700; cursor: pointer; transition: var(--transition); font-family: inherit; }
.ai-brain-tab.active { background-color: rgba(168, 85, 247, 0.15); border-color: var(--accent-purple); color: var(--text-primary); box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
/* "תאי מוח" - רק בשורת הקטגוריות של modal-ai-brain עצמו (לא ב-.ai-brain-tab
   הכללי, שמשמש גם בוררי מים/תקציב/ספורט אחרים) - כל קטגוריה נראית כמו נוירון
   זוהר אורגני, עם "סינפסות" (קווי-חיבור מהבהבים) לתא הבא בתור - לפי בקשה
   מפורשת ("תעצב לי מגניב... כמו תאי מוח") */
.ai-brain-cell-row {
    flex-wrap: wrap;
    justify-content: center;
    gap: 4px 0;
    padding: 6px 10px 22px 10px;
}
.ai-brain-cell-row .ai-brain-tab {
    flex: 0 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    gap: 5px;
    background: radial-gradient(circle at 32% 28%, rgba(233, 213, 255, 0.22), rgba(88, 28, 135, 0.22) 55%, rgba(20, 6, 36, 0.35) 100%);
    border: 1px solid rgba(216, 180, 254, 0.35);
    border-radius: 46% 54% 53% 47% / 58% 47% 53% 42%;
    color: var(--text-secondary);
    padding: 9px 13px;
    margin: 0 6px;
    font-size: 0.72rem;
    animation: aiCellBreathe 3.4s ease-in-out infinite;
}
.ai-brain-cell-row .ai-brain-tab:not(:last-child)::after {
    content: "";
    position: absolute;
    top: 50%;
    inset-inline-end: -12px;
    width: 12px;
    height: 2px;
    background: linear-gradient(90deg, rgba(216, 180, 254, 0.65), rgba(216, 180, 254, 0.1));
    transform: translateY(-50%);
    animation: aiCellSynapsePulse 2.2s ease-in-out infinite;
}
@keyframes aiCellBreathe {
    0%, 100% { box-shadow: 0 0 9px rgba(168, 85, 247, 0.2), inset 0 0 8px rgba(255, 255, 255, 0.05); }
    50% { box-shadow: 0 0 15px rgba(168, 85, 247, 0.38), inset 0 0 8px rgba(255, 255, 255, 0.09); }
}
@keyframes aiCellSynapsePulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 1; } }
.ai-brain-cell-row .ai-brain-tab.active {
    animation: none;
    background: radial-gradient(circle at 32% 28%, rgba(249, 168, 212, 0.55), rgba(168, 85, 247, 0.5) 55%, rgba(20, 6, 36, 0.5) 100%);
    border-color: var(--accent-pink);
    color: var(--text-primary);
    box-shadow: 0 0 16px rgba(236, 72, 153, 0.5), 0 0 30px rgba(168, 85, 247, 0.3), inset 0 0 10px rgba(255, 255, 255, 0.12);
    transform: scale(1.08);
}
.ai-brain-cell-row .ai-brain-tab:active { transform: scale(0.94); }
/* בררת חד-פעמי/חוזר מעל תיבת הטקסט של תכנון הלו"ז - אותה שפה חזותית בדיוק
   כמו .ai-brain-tab, רק קטן יותר כי זו בחירה משנית בתוך טאב אחד, לא מעבר טאבים */
.ai-schedule-mode-toggle { display: flex; gap: 8px; margin-bottom: 10px; }
.ai-schedule-mode-btn { flex: 1; background-color: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.15); color: var(--text-secondary); border-radius: 10px; padding: 8px; font-size: 0.78rem; font-weight: 700; cursor: pointer; transition: var(--transition); font-family: inherit; }
.ai-schedule-mode-btn.active { background-color: rgba(168, 85, 247, 0.15); border-color: var(--accent-purple); color: var(--text-primary); box-shadow: 0 0 10px rgba(168, 85, 247, 0.2); }
/* אייקון "מידע" קטן ליד "חוזר כל יום" - מסביר את ההבדל מ"חוזר" הרגיל
   (שמכבד את היום/ים שהוזכרו בטקסט) בלי לתפוס מקום קבוע כמו שאר הכפתורים */
.ai-schedule-mode-info { position: relative; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; cursor: help; font-size: 0.95rem; opacity: 0.75; padding: 0 2px; }
.ai-schedule-mode-info:hover, .ai-schedule-mode-info:focus-visible { opacity: 1; }
.ai-schedule-mode-info[data-tooltip]::after {
    bottom: calc(100% + 8px);
    inset-inline-end: -10px;
    width: 190px;
    white-space: normal;
    text-align: start;
    font-weight: 500;
}
.ai-schedule-mode-info[data-tooltip]:hover::after, .ai-schedule-mode-info[data-tooltip]:focus-visible::after { opacity: 1; }
#ai-schedule-duration-months { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
#routine-item-title-input, #routine-tab-name-input { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
/* בועות ספורט מותאמות-אישית: אין הגבלת כמות, אז הבועות עוטפות לשורה חדשה
   במקום להידחס - בהיקף מזהה #sport-type-picker בלבד, לא נוגע ב-.ai-brain-tab
   המשותף שמשמש גם במקומות אחרים באפליקציה */
#sport-type-picker { flex-wrap: wrap; }
#sport-type-picker .ai-brain-tab { flex: 0 0 auto; }
.sport-type-bubble-delete { margin-inline-start: 6px; opacity: 0.7; cursor: pointer; }
.sport-history-thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex-shrink: 0; }
.ai-brain-target-choice { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.ai-brain-target-option { display: flex; align-items: center; gap: 8px; background-color: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 10px; padding: 10px 12px; font-size: 0.85rem; color: var(--text-primary); cursor: pointer; }
.ai-brain-target-option input[type="radio"] { accent-color: var(--accent-purple); width: 16px; height: 16px; cursor: pointer; flex-shrink: 0; }
.ai-brain-panel { margin-top: 2px; }
.ai-brain-panel .modal-subtitle { margin-top: 0; margin-bottom: 16px; line-height: 1.5; }
.ai-brain-panel .action-buttons-wrap { margin-top: 16px !important; }
/* תיבת הטקסט של תכנון הלו"ז מטקסט חופשי - לפני התיקון הזה לא הייתה לה שום
   הגדרת CSS ייעודית, אז היא נפלה חזרה לעיצוב ברירת המחדל המכוער של הדפדפן
   (גבול אפור, בלי עיגול פינות, בלי גובה מינימלי). עכשיו משתמשת באותם משתני
   הרקע/הטקסט כמו כל שאר האפליקציה, אז עוקבת אוטומטית אחרי כהה/בהיר/ערכות פרימיום */
#ai-schedule-input, #ai-finance-input {
    width: 100%;
    min-height: 120px;
    background-color: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 14px;
    padding: 14px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: var(--transition);
}
#ai-schedule-input::placeholder, #ai-finance-input::placeholder { color: var(--text-secondary); opacity: 0.75; }
#ai-schedule-input:focus, #ai-finance-input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18), 0 0 16px rgba(168, 85, 247, 0.15); }
#ai-schedule-input::-webkit-scrollbar, #ai-finance-input::-webkit-scrollbar { width: 8px; }
#ai-schedule-input::-webkit-scrollbar-track, #ai-finance-input::-webkit-scrollbar-track { background: transparent; }
#ai-schedule-input::-webkit-scrollbar-thumb, #ai-finance-input::-webkit-scrollbar-thumb { background-color: rgba(168, 85, 247, 0.3); border-radius: 8px; }
#schedule-clarify-input {
    width: 100%;
    background-color: var(--bg-glass);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    text-align: center;
    transition: var(--transition);
}
#schedule-clarify-input::placeholder { color: var(--text-secondary); opacity: 0.75; }
#schedule-clarify-input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18); }
/* פריסה חכמה: אותו סגנון בדיוק כמו #ai-schedule-input (תיאור המשימה) ו-
   #schedule-clarify-input (שאלת ההבהרה על ימים פנויים) - בלי זה השדות האלה
   היו נופלים לעיצוב ברירת המחדל הלבן/מכוער של הדפדפן */
#smart-split-task-input {
    width: 100%;
    min-height: 100px;
    background-color: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 14px;
    padding: 14px;
    font-family: inherit;
    font-size: 0.9rem;
    line-height: 1.5;
    color: var(--text-primary);
    outline: none;
    resize: vertical;
    box-sizing: border-box;
    transition: var(--transition);
    margin-bottom: 10px;
}
#smart-split-task-input::placeholder { color: var(--text-secondary); opacity: 0.75; }
#smart-split-task-input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18), 0 0 16px rgba(168, 85, 247, 0.15); }
/* קוביה סגולה עם אייקון בלבד - אותם צבעים בדיוק כמו input[type=date] הרגיל
   (רקע/מסגרת סגולים) כדי שתישאר אותה שפה חזותית, בלי טקסט dd/mm/yyyy גלוי -
   לפי בקשה מפורשת. showPicker() נקרא על ה-input האמיתי, שרק מוסתר-ויזואלית */
/* בלי רקע/מסגרת - רק ה-SVG הסגול עצמו על הרקע הרגיל של המודל, לפי בקשה
   מפורשת ("נקי... רקע רגיל") - stroke="currentColor" ב-SVG עצמו יורש את
   ה-color כאן, כך שהצבע נשלט ממש מ-CSS (לא פילטר על אימוג'י) */
.date-picker-icon-only {
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 10px auto;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    color: var(--accent-purple-light-text);
    cursor: pointer;
    transition: var(--transition);
}
.date-picker-icon-only:active { transform: scale(0.9); }
.date-picker-hidden-input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
#smart-split-clarify-input {
    width: 100%;
    background-color: var(--bg-glass);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    text-align: center;
    transition: var(--transition);
}
#smart-split-clarify-input::placeholder { color: var(--text-secondary); opacity: 0.75; }
#smart-split-clarify-input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18); }
/* אותו סגנון בדיוק כמו #schedule-clarify-input - שני המודלים הם אותו דפוס
   "שאלת הבהרה יחידה", רק אחד ל-AI לוח זמנים והשני ל-AI הוספת מזון מהירה.
   בלי זה, השדה נשאר בעיצוב ברירת המחדל הלבן של הדפדפן ולא תואם את שאר האפליקציה */
#food-clarify-input {
    width: 100%;
    background-color: var(--bg-glass);
    border: 1px solid rgba(168, 85, 247, 0.25);
    border-radius: 12px;
    padding: 12px 14px;
    font-family: inherit;
    font-size: 0.9rem;
    color: var(--text-primary);
    outline: none;
    box-sizing: border-box;
    text-align: center;
    transition: var(--transition);
}
#food-clarify-input::placeholder { color: var(--text-secondary); opacity: 0.75; }
#food-clarify-input:focus { border-color: var(--accent-purple); box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.18); }
.recipe-image-preview { display: block; width: 100%; max-height: 160px; object-fit: cover; border-radius: 12px; margin-bottom: 10px; border: 1px solid rgba(168, 85, 247, 0.2); }
.recipe-detail-photo { display: block; width: 100%; max-height: 220px; object-fit: cover; border-radius: 14px; margin-bottom: 14px; }
.recipe-card-photo { display: block; width: 100%; height: 90px; object-fit: cover; border-radius: 10px; margin-bottom: 8px; }
.hours-settings-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 8px; width: 100%; max-width: 100%; box-sizing: border-box; }
.hours-settings-row { display: flex; align-items: center; gap: 4px; min-width: 0; }
.hours-settings-row .hours-input { flex: 1; min-width: 0; }
.hours-settings-row .btn-delete-slot { flex-shrink: 0; }
.hours-input { background-color: var(--bg-glass); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 10px; padding: 10px; font-size: 0.85rem; outline: none; text-align: center; box-sizing: border-box; min-width: 0; }
.schedule-adder-grid, .preset-manager-grid { display: flex; flex-direction: column; gap: 10px; }
#recurring-installment-fields, #recurring-end-date-fields { display: flex; flex-direction: column; gap: 10px; }
/* היו rgba(0,0,0,0.4)+color:#fff קבועים - עובד רק על רקע כהה, ולא תלוי
   בערכת-נושא בכלל. זה מסביר את כל תלונות "התיבה אפורה במצב בהיר" לאורך כל
   השדות האלה, לא רק ל-#center-item-input שכבר תוקן בנפרד קודם */
.schedule-adder-grid select, .schedule-adder-grid input, .preset-manager-grid select, .preset-manager-grid input, .preset-manager-grid textarea, #sport-custom-type-input, #sport-quick-custom-type-input, #water-daily-goal-input, #sport-notes-input, #glance-edit-task-title-input, #glance-edit-task-time-input, #center-item-input, #help-faq-search, #calorie-daily-goal-input, #protein-daily-goal-input, #habit-name-input, #contact-us-message, #ai-schedule-duration-months, #preset-quick-add-search, #food-quick-add-input, #routine-item-title-input, #routine-tab-name-input, #glance-edit-task-day-select, #glance-edit-task-reminder, #glance-edit-task-reminder-text, #study-item-input { background-color: var(--bg-glass); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 14px; padding: 12px; font-size: 0.9rem; font-family: inherit; outline: none; z-index: 15;}
#preset-quick-add-search, #food-quick-add-input { width: 100%; box-sizing: border-box; margin-bottom: 10px; }
.preset-quick-add-list { display: flex; flex-direction: column; gap: 6px; max-height: 50vh; overflow-y: auto; }
.preset-quick-add-item { display: flex; align-items: center; justify-content: space-between; gap: 8px; background-color: var(--bg-row); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; padding: 10px 12px; cursor: pointer; text-align: start; width: 100%; color: var(--text-primary); font-family: inherit; font-size: 0.88rem; }
.preset-quick-add-item:active { transform: scale(0.98); }
.preset-quick-add-item-cal { color: var(--text-secondary); font-size: 0.8rem; flex-shrink: 0; }
#habit-name-input { width: 100%; box-sizing: border-box; }
#contact-us-message { width: 100%; box-sizing: border-box; font-family: inherit; resize: vertical; margin-bottom: 10px; }
#contact-us-category { margin-bottom: 10px; }
/* היה input חד-שורתי, שהפך פתק ארוך לבלתי-ניתן-לעריכה בפועל (אין דרך
   לראות/לגלול בתוכו) - עכשיו טקסטאריה עם כמה שורות גובה וגלילה/שינוי-גודל
   פנימיים משלה, בלי לגעת ב-JS בכלל (textarea.value עובד זהה ל-input.value) */
/* לפני זה לא היה שום עיצוב מפורש לטקסטאריות האלה - הן הוצגו בעיצוב הדפדפן
   ברירת-המחדל (color-scheme של הדפדפן/מערכת, לא של האפליקציה), מה שגרם
   לתיבה אפורה כהה על רקע לבן במצב בהיר ("לשנות את האפור הזה במצב הבהיר") */
#center-item-input, #study-item-input, #project-item-input, #notebook-item-input, #contact-us-message {
    width: 100%;
    box-sizing: border-box;
    font-family: inherit;
    resize: vertical;
    background-color: var(--bg-glass);
    border: 1px solid var(--border-color);
    border-radius: 12px;
    color: var(--text-primary);
    padding: 12px;
    font-size: 0.95rem;
    outline: none;
}
#center-item-input:focus, #study-item-input:focus, #project-item-input:focus, #notebook-item-input:focus, #contact-us-message:focus {
    border-color: var(--accent-pink);
    box-shadow: 0 0 0 3px rgba(255, 0, 127, 0.18);
}
#glance-edit-task-title-input, #glance-edit-task-time-input { width: 100%; box-sizing: border-box; }
#water-daily-goal-input, #calorie-daily-goal-input, #protein-daily-goal-input { width: 100%; box-sizing: border-box; }
/* שדה "איזה ספורט?" חי מחוץ ל-.preset-manager-grid (לא חלק מהרשת, כי הוא
   מוצג רק תנאי כשבוחרים "אחר") - לכן צריך width מפורש, בניגוד לשדות ברשת
   שמקבלים אותו מ-grid-template-columns של ההורה */
#sport-custom-type-input { width: 100%; box-sizing: border-box; }
/* הערות האימון: גם היא חיה מחוץ ל-.preset-manager-grid (כדי לתפוס רוחב מלא
   ולא להידחס לעמודה ברשת), אז צריכה את אותה טיפול ידני בדיוק */
#sport-notes-input { width: 100%; box-sizing: border-box; font-family: inherit; resize: vertical; }
.reminder-fields-wrap { display: flex; flex-wrap: wrap; gap: 10px; }
.reminder-fields-wrap select { flex: 1 1 140px; min-width: 0; box-sizing: border-box; }
.reminder-fields-wrap input { flex: 2 1 200px; min-width: 0; box-sizing: border-box; }

.reminder-toast { position: absolute; top: -140px; left: 16px; right: 16px; background: linear-gradient(135deg, rgba(255,0,127,0.18), rgba(168,85,247,0.18)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(255,0,127,0.35); border-radius: 16px; padding: 14px; display: flex; align-items: flex-start; gap: 10px; box-shadow: 0 10px 30px rgba(0,0,0,0.5); z-index: 4000; transition: top 0.35s cubic-bezier(0.25, 1, 0.5, 1); }
.reminder-toast.show { top: 16px; }
.reminder-toast-icon { font-size: 1.4rem; line-height: 1; }
.reminder-toast-body { flex: 1; min-width: 0; }
.reminder-toast-title { font-weight: 700; font-size: 0.9rem; color: var(--text-primary); margin-bottom: 2px; }
.reminder-toast-text { font-size: 0.8rem; color: var(--text-secondary); word-break: break-word; }
.reminder-toast-close { background: transparent; border: none; color: var(--text-secondary); font-size: 0.9rem; cursor: pointer; padding: 2px; flex-shrink: 0; }

.app-toast { position: absolute; bottom: -80px; left: 16px; right: 16px; background: linear-gradient(135deg, rgba(168, 85, 247, 0.28), rgba(255, 0, 127, 0.22)); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border: 1px solid rgba(168, 85, 247, 0.4); border-radius: 14px; padding: 12px 16px; display: flex; align-items: center; gap: 10px; box-shadow: 0 8px 24px rgba(0,0,0,0.45); z-index: 4500; opacity: 0; pointer-events: none; font-size: 0.85rem; font-weight: 600; color: var(--text-primary); transition: bottom 0.3s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.3s ease; }
.app-toast.show { bottom: 90px; opacity: 1; }
.app-toast.error { background: linear-gradient(135deg, rgba(255, 69, 58, 0.28), rgba(255, 0, 127, 0.18)); border-color: rgba(255, 69, 58, 0.4); }

.btn-test-chime { flex: 1 1 100%; background-color: rgba(168, 85, 247, 0.08); color: var(--accent-purple-light-text); border: 1px solid rgba(168, 85, 247, 0.25); font-size: 0.8rem; padding: 8px; }

.preset-manage-title { margin: 18px 0 10px 0 !important; font-size: 0.85rem !important; }
.preset-manage-list { max-height: 320px; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; }
.preset-manage-empty { color: var(--text-secondary); font-size: 0.8rem; text-align: center; padding: 10px 0; }
.preset-manage-list li.preset-manage-item { padding: 8px 12px; font-size: 0.8rem; }
.preset-manage-name-wrap { flex: 1; display: flex; flex-direction: column; text-align: start; min-width: 0; }
.preset-manage-name { text-align: start; }
.preset-manage-actions { display: flex; gap: 4px; }
/* קבוצת קטגוריה (אקורדיון): ה-li העוטף עצמו "שקוף" - בלי הזכוכית/מסגרת/צל
   שכל .center-list li מקבל כברירת מחדל - כדי שרק כרטיסי הארוחות הבודדים
   בפנים (.preset-manage-item, עדיין li רגיל בתוך .center-list) ייראו ככרטיס */
.preset-manage-list li.preset-category-group {
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    display: block;
}
.preset-category-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    cursor: pointer;
    padding: 6px 4px;
    font-size: 0.8rem;
    font-weight: 700;
    color: var(--accent-purple-light-text);
    border-bottom: 1px solid rgba(168, 85, 247, 0.15);
    user-select: none;
}
.preset-category-label { flex: 1; text-align: start; }
.preset-category-count { flex-shrink: 0; font-size: 0.65rem; font-weight: 700; color: var(--text-secondary); background-color: rgba(168, 85, 247, 0.1); border-radius: 10px; padding: 1px 8px; }
.preset-category-chevron { flex-shrink: 0; font-size: 0.6rem; color: var(--text-secondary); transition: transform 0.2s ease; }
.preset-category-group.expanded .preset-category-chevron { transform: rotate(180deg); }
.preset-category-items { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; max-height: 0; overflow: hidden; transition: max-height 0.25s ease-out; }
.preset-category-group.expanded .preset-category-items { max-height: 2000px; margin-top: 8px; }
.btn-edit-item { background: transparent; color: var(--accent-purple-light-text); border: none; cursor: pointer; font-size: 0.85rem; padding: 4px; transition: var(--transition); z-index: 10; display: inline-flex; align-items: center; }
.btn-edit-item:hover { color: var(--accent-purple-text); transform: scale(1.1); }
.btn-edit-icon { width: 15px; height: 15px; flex-shrink: 0; }

.settings-label { display: block; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 8px; font-weight: 600; }
.language-select {
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(20, 10, 30, 0.55);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23c084fc'><path d='M5.5 7.5l4.5 5 4.5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: left 12px center;
    background-size: 14px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid var(--accent-purple);
    color: var(--accent-purple-light-text);
    border-radius: 10px;
    padding: 12px 12px 12px 36px;
    font-size: 0.9rem;
    font-weight: 600;
    outline: none;
    cursor: pointer;
    transition: var(--transition);
}
.language-select:focus, .language-select:hover { border-color: var(--accent-pink); box-shadow: 0 0 0 3px rgba(255, 0, 127, 0.18); }
/* כפתור-טריגר לתפריט-נפתח מותאם (custom-select-trigger) - משתמש ב-.language-select
   הקיים לעיצוב הבסיסי (מסגרת/צבע/חץ), רק צריך לוודא שטקסט ארוך נחתך יפה
   כמו ב-<select> טבעי, ושהיישור/הצבע תמיד תואמים גם כשלא נבחר עדיין ערך */
.custom-select-trigger { display: block; text-align: start; }
.custom-select-trigger span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.custom-select-picker-row.selected { border-color: var(--accent-purple); background-color: rgba(168, 85, 247, 0.12); color: var(--accent-purple-light-text); font-weight: 700; }
.language-select option { background-color: var(--bg-sheet); color: var(--text-primary); }
html[dir="rtl"] .language-select { background-position: right 12px center; padding: 12px 36px 12px 12px; }
.ai-quick-add-wrap { display: flex; flex-direction: column; gap: 10px; }
#ai-quick-add-input { width: 100%; box-sizing: border-box; background-color: rgba(0,0,0,0.4); border: 1px solid rgba(255,255,255,0.08); color: #fff; border-radius: 10px; padding: 12px; font-size: 0.9rem; outline: none; resize: vertical; font-family: inherit; }
.premium-tier-card { background-color: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.2); border-radius: 14px; padding: 14px; margin-bottom: 12px; }
.premium-tier-card:last-child { margin-bottom: 0; }
.premium-tier-card h3 { margin: 0 0 6px 0; font-size: 0.95rem; color: var(--accent-purple-light-text); }
.premium-tier-card p { margin: 0 0 12px 0; font-size: 0.78rem; color: var(--text-secondary); line-height: 1.4; }
.btn-upgrade { cursor: pointer; }

.premium-benefits-list { list-style: none; padding: 0; margin: 0 0 16px 0; display: flex; flex-direction: column; gap: 8px; }
.premium-benefits-list li { display: flex; align-items: center; gap: 10px; background-color: rgba(168, 85, 247, 0.06); border: 1px solid rgba(168, 85, 247, 0.15); border-radius: 10px; padding: 8px 12px; font-size: 0.8rem; color: var(--text-primary); }
.premium-benefit-icon { font-size: 1rem; flex-shrink: 0; }

.theme-picker-grid { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 16px; }
.theme-swatch { position: relative; width: 42px; height: 42px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.1); cursor: pointer; padding: 0; flex-shrink: 0; }
.theme-swatch.selected { border-color: #fff; box-shadow: 0 0 0 2px var(--accent-purple); }
.theme-swatch-default { background: linear-gradient(135deg, #ff007f, #a855f7); }
.theme-swatch-blue { background: linear-gradient(135deg, #00d4ff, #0ea5e9); }
.theme-swatch-gold { background: linear-gradient(135deg, #f59e0b, #dc2626); }
.theme-swatch-forest { background: linear-gradient(135deg, #10b981, #059669); }
.theme-swatch-rose { background: linear-gradient(135deg, #f43f5e, #d4af37); }
.theme-swatch-indigo { background: linear-gradient(135deg, #6366f1, #4338ca); }
.theme-swatch-sunset { background: linear-gradient(135deg, #fb7185, #f97316); }
.theme-swatch-ocean { background: linear-gradient(135deg, #06b6d4, #0891b2); }
.theme-swatch-lavender { background: linear-gradient(135deg, #d8b4fe, #9333ea); }
.theme-swatch-cherry { background: linear-gradient(135deg, #f472b6, #ec4899); }
.theme-swatch-arctic { background: linear-gradient(135deg, #38bdf8, #0284c7); }
.theme-swatch-volcanic { background: linear-gradient(135deg, #ef4444, #991b1b); }
.theme-swatch-mint { background: linear-gradient(135deg, #5eead4, #14b8a6); }
.theme-swatch-amethyst { background: linear-gradient(135deg, #c026d3, #7e22ce); }
.theme-swatch-graphite { background: linear-gradient(135deg, #94a3b8, #64748b); }
.theme-swatch-citrus { background: linear-gradient(135deg, #84cc16, #ca8a04); }
.theme-swatch-copper { background: linear-gradient(135deg, #d97706, #92400e); }
.theme-swatch-navy { background: linear-gradient(135deg, #3b82f6, #1e3a8a); }
.theme-swatch-deepspace { background: linear-gradient(135deg, #0a1128, #04070f); }
.theme-swatch-lock { position: absolute; bottom: -4px; inset-inline-end: -4px; font-size: 0.7rem; background-color: rgba(0,0,0,0.6); border-radius: 50%; width: 18px; height: 18px; display: flex; align-items: center; justify-content: center; }
/* "ערכות נושא מיוחדות" - היה מחולק ל-10 קטגוריות עם שורת צ'יפים לניווט
   ביניהן + כרטיסיית-גריד אחת מוצגת בכל פעם - הוחלף בגריד רציף אחד עם קו-
   מפריד עדין (לא accordion, לא צ'יפים) לפי בקשה מפורשת ("בלי יותר מידי
   כרטיסיות... בשורה ביחד"). קו דק משני צדי התווית ("── ✨ ערכות מיוחדות ──")
   כדי להבדיל בעדינות מהערכות הרגילות מעליו, בלי חלוקה כבדה */
.theme-special-divider {
    display: flex; align-items: center; gap: 10px;
    margin: 14px 0 10px; color: var(--text-secondary);
    font-size: 0.78rem; font-weight: 700;
}
.theme-special-divider::before, .theme-special-divider::after {
    content: ""; flex: 1; height: 1px; background: var(--border-color);
}
/* תצוגה מקדימה חיה: כל אריח מציג את דוגמת הרקע האמיתית של הערכה (לא רק
   גרדיאנט צבעים) - האריח עצמו נושא data-color-theme, שבזכות הכללת ה-
   selector-ים למעלה ([data-color-theme="X"] בלי דרישת תג html) גם מזין
   את המשתנים (--bg-main וכו') וגם את .home-theme-pattern הפנימי שלו, בלי
   לשכפל אף שורת CSS - "תצוגה מקדימה בתוך זה מאוד חשוב" */
/* עיגול קטן (42px) כמו .theme-swatch הרגילות, לא ריבוע מעוגל גדול (68px) -
   לפי בקשה מפורשת ("בעיגולים קטנים כמו הלמעלה") אחרי שהרשימה צומצמה */
.theme-preview-tile {
    position: relative; width: 42px; height: 42px; border-radius: 50%;
    border: 2px solid rgba(255,255,255,0.12); cursor: pointer; padding: 0;
    flex-shrink: 0; overflow: hidden; background: var(--bg-main);
}
.theme-preview-tile .home-theme-pattern { position: absolute; inset: 0; }
.theme-preview-tile.selected { border-color: var(--accent-purple); box-shadow: 0 0 0 2px var(--accent-purple); }

/* --- אשף הרשמה + סיור באפליקציה (openOnboarding/openAppTour ב-app.js) -
   שני אשפי-שלבים גנריים באותו עיצוב, מונעים ע"י renderOnboardingStep/
   renderTourStep שמציירות לתוך onboarding-step-body/tour-step-body לפי
   מערך שלבים ב-JS, כדי לא לשכפל HTML כמעט-זהה לכל שלב --- */
.onboarding-modal .modal-sheet { padding-top: 44px; min-height: 380px; display: flex; flex-direction: column; }
.onboarding-skip-link {
    position: absolute; top: 18px; inset-inline-end: 20px;
    background: none; border: none; cursor: pointer;
    color: var(--text-secondary); font-size: 0.78rem; font-weight: 700;
    padding: 4px 8px;
}
.onboarding-skip-link:hover { color: var(--text-primary); }
.onboarding-step-body { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px; padding: 12px 8px 20px; }
.onboarding-icon { font-size: 3rem; line-height: 1; margin-bottom: 4px; filter: drop-shadow(0 4px 14px rgba(168, 85, 247, 0.35)); }
.onboarding-title { margin: 0; font-size: 1.2rem; font-weight: 800; color: var(--text-primary); }
.onboarding-subtitle { margin: 0; font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; max-width: 32ch; }
.onboarding-step-body input[type="text"], .onboarding-step-body input[type="tel"] {
    width: 100%; max-width: 280px; margin-top: 8px; text-align: center;
}
.onboarding-hint { font-size: 0.7rem; color: var(--text-secondary); opacity: 0.7; margin-top: -4px; }
.onboarding-dots { display: flex; justify-content: center; gap: 7px; margin: 4px 0 14px; }
.onboarding-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--bg-row); border: 1px solid var(--border-color); transition: var(--transition); }
.onboarding-dot.active { background: var(--accent-purple); border-color: var(--accent-purple); width: 20px; border-radius: 4px; }
.onboarding-tour-offer-buttons { display: flex; flex-direction: column; gap: 10px; width: 100%; max-width: 280px; margin-top: 10px; }

.settings-toggle-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.settings-toggle-row .settings-label { margin-bottom: 0; }
/* שורות סדר-הכפתורים-הצפים (עם ידית גרירה) - מפרישים מ-space-between
   הרגיל: הידית קבועה בהתחלה, התווית גדלה כדי לדחוף את המתג לסוף */
.settings-toggle-row[data-fab-id] { justify-content: flex-start; gap: 10px; }
.settings-toggle-row[data-fab-id] .settings-label { flex: 1; }
.fab-order-drag-handle { cursor: grab; color: var(--text-secondary); font-size: 0.95rem; flex-shrink: 0; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; }
.fab-order-drag-handle:active { cursor: grabbing; }

/* מסך-ראשי של ההגדרות: 5 שורות-קטגוריה קומפקטיות במקום גלילה ארוכה אחת -
   בסגנון הגדרות וואטסאפ/iOS, לפי בקשה מפורשת */
#settings-main-menu h3 { margin-bottom: 14px; }
/* עוגל לגמרי (border-radius:999px, לא ערך קבוע) - כך שאורך ורוחב מקבלים
   קצוות מעוגלים באותה מידה משני הצדדים, בסגנון btn-back-home (כפתור "חזור
   למסך הבית") שהובא כדוגמה - כולל אותו זוהר עדין קבוע (לא רק ב-hover),
   שמתחזק קלות במגע/ריחוף. קומפקטי יותר מהגרסה הקודמת (padding מוקטן) */
/* width:fit-content + margin:auto (לא width:100%) - הטקסט קצר, אין צורך
   שהפס יימתח לכל רוחב המסך, לפי בקשה מפורשת ("הכתב לא כזה ארוך... ושיהיה
   באמצע") - min-width שומר על יעד-מגע סביר גם לתוויות קצרות מאוד */
.settings-category-row {
    display: flex;
    align-items: center;
    gap: 10px;
    width: fit-content;
    min-width: 240px;
    max-width: 100%;
    margin: 0 auto 8px auto;
    background-color: var(--bg-row);
    border: 1px solid rgba(168, 85, 247, 0.3);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--text-primary);
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
    box-shadow: 0 0 10px rgba(168, 85, 247, 0.22);
}
.settings-category-row:hover, .settings-category-row:active { border-color: var(--accent-purple); background-color: rgba(168, 85, 247, 0.08); box-shadow: 0 0 16px rgba(168, 85, 247, 0.4); }
/* תג עיגול לאייקון - במקום לסמוך על זה שהאמוג'י עצמו "נראה" עגול (תלוי-
   גופן/מערכת הפעלה, לא עקבי בין מכשירים) - אותו מתכון בדיוק כמו
   .note-triage-icon, לעקביות חזותית */
.settings-category-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 35%, rgba(255, 0, 127, 0.28), rgba(168, 85, 247, 0.12));
    box-shadow: 0 0 8px rgba(168, 85, 247, 0.3), inset 0 1px 1px rgba(255, 255, 255, 0.1);
}
.settings-category-label { flex: 1; text-align: start; font-size: 0.85rem; font-weight: 600; }
.settings-category-chevron { color: var(--text-secondary); font-size: 1rem; flex-shrink: 0; }
/* המשתמשת ביקשה במפורש את הגליף ‹ הזה (בלי קשר לכיוון RTL/LTR של שאר
   האפליקציה) - נשאר קבוע, לא מתהפך */

/* מסכי-משנה: כותרת חזרה קבועה למעלה, אותו תוכן שהיה קודם בשורה ארוכה אחת -
   רק מחולק עכשיו לפי קטגוריה ומוסתר/נחשף (ר' openSettingsSubscreen ב-app.js) */
.settings-subscreen.hidden { display: none; }
.settings-back-btn {
    display: flex;
    align-items: center;
    gap: 6px;
    background: none;
    border: none;
    color: var(--accent-purple-text);
    font-size: 0.85rem;
    font-weight: 700;
    font-family: inherit;
    cursor: pointer;
    padding: 4px 0 14px 0;
    margin: 0;
}
.settings-back-btn:hover { opacity: 0.8; }
.settings-subscreen h3 { margin-bottom: 14px; }
/* גודל האפליקציה (הגדרות) - שלושה כפתורים צמודים במקום select נייטיבי,
   באותה שורה בדיוק כמו שאר הגדרות ה-toggle */
.ui-scale-btn-group { display: flex; gap: 3px; background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 10px; padding: 3px; flex-shrink: 0; }
/* קומפקטי - יושב באותה שורת הגדרות (settings-toggle-row) לצד תווית, לא תופס
   רוחב מלא כמו .language-select (שנועד למסך התחברות, הקשר שונה) */
#meal-count-select, #snack-count-select, #finance-cycle-day-select { background-color: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-primary); border-radius: 8px; padding: 6px 10px; font-size: 0.8rem; outline: none; cursor: pointer; flex-shrink: 0; }
/* צובעים גם את רשימת ה-<option> עצמה (לא רק את התיבה הסגורה) - בלי זה
   הרשימה הפתוחה נופלת לצבעי ברירת המחדל של המערכת (רקע לבן, טקסט בקושי
   נראה) גם כשכל שאר האתר כהה, לפי דיווח מפורש ("לא רואים כלום") */
#meal-count-select option, #snack-count-select option, #finance-cycle-day-select option { background-color: #1a1025; color: #fff; }
.ui-scale-btn { background: none; border: none; color: var(--text-secondary); font-size: 0.7rem; font-weight: 600; padding: 6px 10px; border-radius: 8px; cursor: pointer; transition: var(--transition); }
.ui-scale-btn.active { background-color: var(--accent-purple); color: #fff; }
.switch { position: relative; display: inline-block; width: 46px; height: 26px; flex-shrink: 0; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch-slider { position: absolute; cursor: pointer; inset: 0; background-color: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.12); border-radius: 26px; transition: var(--transition); }
.switch-slider::before { content: ""; position: absolute; width: 20px; height: 20px; left: 2px; top: 2px; background-color: #fff; border-radius: 50%; transition: var(--transition); box-shadow: 0 1px 3px rgba(0,0,0,0.4); }
.switch input:checked + .switch-slider { background-color: var(--accent-purple); border-color: var(--accent-purple); box-shadow: 0 0 10px rgba(168, 85, 247, 0.5); }
.switch input:checked + .switch-slider::before { transform: translateX(20px); }
/* כפתור המתג: בעברית/RTL הכדור מתחיל משמאל ונע ימינה (מסומן=ימין) - טבעי
   יותר להפוך גם את זה באנגלית/LTR (מתחיל מימין, נע שמאלה כשמסומן), כמו
   מתגי מערכת הפעלה טבעיים בכל כיוון */
html[dir="ltr"] .switch-slider::before { left: auto; right: 2px; }
html[dir="ltr"] .switch input:checked + .switch-slider::before { transform: translateX(-20px); }

.monthly-goal-empty { color: var(--text-secondary); font-size: 0.82rem; margin: 0 0 10px 0; }
.monthly-goal-nav { display: flex; align-items: center; justify-content: center; gap: 14px; margin-bottom: 14px; }
.monthly-goal-nav-btn {
    background-color: rgba(255, 255, 255, 0.04);
    color: var(--text-primary);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 8px;
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    line-height: 1;
    cursor: pointer;
    transition: var(--transition);
    z-index: 10;
}
.monthly-goal-nav-btn:hover:not(:disabled) { background-color: rgba(168, 85, 247, 0.15); border-color: var(--accent-purple); }
.monthly-goal-nav-btn:disabled { opacity: 0.3; cursor: default; }
.monthly-goal-month-label { font-size: 0.8rem; font-weight: 600; color: var(--text-secondary); min-width: 120px; text-align: center; }
/* קפיצה של שנה שלמה בלוח השנה המותאם (navigateCustomDatePicker(±12) ב-app.js) -
   כפתור צר יותר עם גופן קטן יותר כדי שסימן הכפול (‹‹/››) ייכנס בנוחות בלי
   לגלוש, לפי בקשה מפורשת אחרי שדפדוף שנה-שנה בחיצי החודש הרגילים היה מעצבן */
.custom-date-picker-year-nav { width: 22px; font-size: 0.75rem; }
/* לוח חודשי: כותרות ימים + רשת 7 עמודות, תא לכל יום עם נקודה אם יש בו
   אירוע/משימה - אותו גוון זהב כמו שאר עולם הלו"ז */
.monthly-calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 6px; }
.monthly-calendar-weekdays span { text-align: center; font-size: 0.68rem; color: var(--text-secondary); font-weight: 600; }
.monthly-calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.monthly-calendar-cell {
    position: relative;
    /* var(--bg-row) - לא רקע לבן/שחור קבוע - כך שגם תאי התאריך בלוח החודשי
       מקבלים את גוון ערכת הנושא הנבחרת, במקום להישאר תמיד אפורים */
    background-color: var(--bg-row);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 8px;
    aspect-ratio: 1 / 1;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-primary);
    font-size: 0.78rem;
    cursor: pointer;
    padding: 0;
    transition: var(--transition);
}
.monthly-calendar-cell.empty { visibility: hidden; cursor: default; }
.monthly-calendar-cell.today { border-color: var(--tile-accent, var(--accent-gold)); color: var(--tile-accent, var(--accent-gold)); font-weight: 700; }
.monthly-calendar-cell.selected { background-color: color-mix(in srgb, var(--tile-accent, var(--accent-gold)) 18%, transparent); border-color: var(--tile-accent, var(--accent-gold)); }
.monthly-calendar-dot { position: absolute; bottom: 4px; width: 5px; height: 5px; border-radius: 50%; background-color: var(--tile-accent, var(--accent-gold)); }
/* SortableJS מוסיף .sortable-ghost על התא בזמן שגוררים משימה מעליו (ר'
   initCalendarGridDropTargets ב-app.js) - מדגישים את התא עצמו כמו
   note-triage-zone:has(.sortable-ghost), כך שברור לאן המשימה תעבור.
   הכלל הגלובלי .sortable-ghost{opacity:0} (למעלה) רק מסתיר אותו - הוא
   עדיין תופס מקום בפועל בפריסה, וכאן זה אסון: השורה הנגררת (עם ידית+
   טקסט+כפתורים) הרבה יותר רחבה מתא-יומן ריבועי, אז הריבוע "מתנפח" סביבה
   (דווח: "זה מגדיל את הריבועים לממש גדול") - display:none מוציא אותו
   לגמרי מהפריסה, לא רק שקוף, כך שהתא נשאר בגודלו הקבוע */
.monthly-calendar-cell .sortable-ghost { display: none !important; }
.monthly-calendar-cell:has(.sortable-ghost) {
    border-color: var(--accent-pink);
    background-color: rgba(255, 0, 127, 0.16);
    transform: scale(1.08);
}
.calendar-task-drag-handle { cursor: grab; color: var(--text-secondary); font-size: 0.95rem; padding: 0 2px; touch-action: none; user-select: none; -webkit-user-select: none; -webkit-touch-callout: none; flex-shrink: 0; }
.calendar-task-drag-handle:active { cursor: grabbing; }
.monthly-calendar-day-detail { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.monthly-calendar-day-title { font-weight: 600; font-size: 0.85rem; color: var(--text-primary); margin-bottom: 2px; }
/* ממוצע יומי מעל לוח החודש של הקלוריות (calorie-monthly-avg) - אותה שפה
   ויזואלית כמו כותרות משנה אחרות (calendar-glance-subtitle) */
.monthly-calendar-avg-line { text-align: center; font-size: 0.8rem; color: var(--text-secondary); margin-bottom: 12px; }
.monthly-calendar-avg-line strong { color: var(--tile-accent, var(--accent-purple)); font-size: 1rem; }
.monthly-calendar-day-total { text-align: end; font-weight: 700; font-size: 0.88rem; color: var(--tile-accent, var(--accent-purple)); padding: 4px 6px 0 6px; }

.monthly-goal-header-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.monthly-goal-name { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monthly-goal-actions { display: flex; align-items: center; gap: 4px; flex-shrink: 0; }
.btn-edit-item { background: transparent; color: var(--text-secondary); border: none; cursor: pointer; font-size: 0.85rem; padding: 4px; transition: var(--transition); z-index: 10; }
.btn-edit-item:hover { color: var(--accent-purple-text); transform: scale(1.1); }
.monthly-goal-readonly-badge { font-size: 0.68rem; color: var(--text-secondary); background-color: rgba(255,255,255,0.04); padding: 4px 10px; border-radius: 20px; flex-shrink: 0; white-space: nowrap; }
.monthly-goal-values-row { display: flex; align-items: center; justify-content: center; gap: 12px; margin-top: 10px; margin-bottom: 2px; }
.monthly-goal-values { text-align: center; font-size: 0.8rem; color: var(--text-secondary); margin: 0; font-weight: 600; letter-spacing: 0.2px; }
.monthly-goal-quick-controls { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.btn-goal-step { width: 26px; height: 26px; border-radius: 50%; border: 1px solid rgba(168, 85, 247, 0.3); background-color: rgba(168, 85, 247, 0.1); color: var(--accent-purple-light-text); font-size: 1rem; font-weight: 700; display: flex; align-items: center; justify-content: center; cursor: pointer; padding: 0; line-height: 1; transition: var(--transition); }
.btn-goal-step:active { transform: scale(0.88); }
.btn-goal-step:disabled { opacity: 0.3; cursor: default; }
.monthly-goal-trophy-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 12px;
    padding: 10px 12px;
    border-radius: 12px;
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.14), rgba(255, 0, 127, 0.08));
    border: 1px solid rgba(234, 179, 8, 0.3);
}
/* width/height+flex-center מפורש (לא רק font-size) כי לגליף האימוג'י 🏆
   עצמו יש ריפוד לא-סימטרי מובנה בפונט - בלי קופסה מרוכזת מפורשת הוא נראה
   "לא ממורכז" יחסית לטקסט לידו, גם כשההורה עצמו flex+align-items:center */
.monthly-goal-trophy-icon { font-size: 1.6rem; flex-shrink: 0; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; line-height: 1; }
.monthly-goal-trophy-text { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.monthly-goal-trophy-text strong { font-size: 0.85rem; color: var(--text-primary); }
.monthly-goal-trophy-text span { font-size: 0.72rem; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.monthly-goal-claim-btn { flex-shrink: 0; font-size: 0.72rem; padding: 8px 12px; white-space: nowrap; }
.monthly-goal-lookback-list { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.05); }
.monthly-goal-lookback-item { display: flex; align-items: center; gap: 8px; background-color: var(--bg-row); border-radius: 8px; padding: 8px 10px; font-size: 0.75rem; color: var(--text-secondary); }
.monthly-goal-lookback-item.achieved { color: var(--accent-green-text); }
.monthly-goal-lookback-month { font-weight: 700; min-width: 54px; }
.monthly-goal-lookback-name { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-primary); }
.monthly-goal-lookback-values { flex-shrink: 0; }

.goal-celebration-sheet { text-align: center; position: relative; overflow: hidden; }
.goal-celebration-emoji { font-size: 3rem; margin-bottom: 8px; animation: chasingDotBounce 1s ease-in-out infinite; }
.goal-celebration-summary { font-size: 0.8rem; color: var(--text-secondary); font-weight: 600; margin: -6px 0 14px 0; }
.confetti-container { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.confetti-piece {
    position: absolute;
    top: -20px;
    width: 8px;
    height: 14px;
    opacity: 0;
    border-radius: 2px;
    animation: confettiFall 2.4s ease-in forwards;
}
.confetti-piece:nth-child(1)  { left: 4%;  background: var(--accent-pink);   animation-delay: 0s; }
.confetti-piece:nth-child(2)  { left: 13%; background: var(--accent-purple); animation-delay: 0.12s; }
.confetti-piece:nth-child(3)  { left: 22%; background: var(--accent-green);  animation-delay: 0.2s; }
.confetti-piece:nth-child(4)  { left: 31%; background: #eab308;              animation-delay: 0.05s; }
.confetti-piece:nth-child(5)  { left: 40%; background: var(--accent-pink);   animation-delay: 0.3s; }
.confetti-piece:nth-child(6)  { left: 50%; background: var(--accent-purple); animation-delay: 0.18s; }
.confetti-piece:nth-child(7)  { left: 60%; background: var(--accent-green);  animation-delay: 0.35s; }
.confetti-piece:nth-child(8)  { left: 69%; background: #eab308;              animation-delay: 0.1s; }
.confetti-piece:nth-child(9)  { left: 78%; background: var(--accent-pink);   animation-delay: 0.4s; }
.confetti-piece:nth-child(10) { left: 87%; background: var(--accent-purple); animation-delay: 0.15s; }
.confetti-piece:nth-child(11) { left: 96%; background: var(--accent-green);  animation-delay: 0.45s; }
.confetti-piece:nth-child(12) { left: 55%; background: #eab308;              animation-delay: 0.25s; }
@keyframes confettiFall {
    0%   { transform: translateY(0) rotate(0deg); opacity: 1; }
    100% { transform: translateY(260px) rotate(560deg); opacity: 0; }
}

.premium-tiers-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 4px 0 16px 0; }
.premium-tier-option {
    position: relative;
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 12px 6px;
    text-align: center;
    cursor: pointer;
    transition: var(--transition);
    box-sizing: border-box;
}
.premium-tier-option.selected { border-color: var(--accent-purple); background-color: rgba(168, 85, 247, 0.1); box-shadow: 0 0 0 1px var(--accent-purple); }
.premium-tier-option.featured { border-color: rgba(255, 0, 127, 0.3); }
.premium-tier-option.featured.selected { border-color: var(--accent-pink); box-shadow: 0 0 0 1px var(--accent-pink); }
.premium-tier-badge { position: absolute; top: -9px; left: 50%; transform: translateX(-50%); background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); color: #fff; font-size: 0.58rem; font-weight: 700; border-radius: 20px; padding: 2px 8px; white-space: nowrap; }
.premium-tier-name { font-size: 0.78rem; font-weight: 600; color: var(--text-primary); margin-bottom: 4px; }
.premium-tier-price-main { font-size: 1.05rem; font-weight: 800; color: var(--accent-purple-light-text); }
.premium-tier-price-sub { font-size: 0.62rem; font-weight: 500; color: var(--text-secondary); margin-top: 3px; line-height: 1.3; }
.premium-tier-period { font-size: 0.62rem; font-weight: 500; color: var(--text-secondary); }
.btn-premium-cta { width: 100%; background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); color: #fff; }

/* טקס פתיחת פרימיום: שכבה על-גבי-הכול עם שדה נצנצים שמהבהבים אחד-אחד
   (עיכוב שונה לכל תו), ואז כרטיס תוכן שנכנס במרכז בהדרגה - position:absolute
   יחסית ל-.phone-wrapper, מעל אפילו המגירה (z-index הכי גבוה באפליקציה) */
.premium-unlock-ceremony {
    position: absolute;
    inset: 0;
    z-index: 5000;
    display: none;
    background: radial-gradient(circle at 50% 40%, rgba(168, 85, 247, 0.25), rgba(0, 0, 0, 0.85) 70%);
    align-items: center;
    justify-content: center;
}
.premium-unlock-ceremony.open { display: flex; animation: fadeOverlay 0.3s ease-out; }
.premium-sparkle-field { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.premium-sparkle {
    position: absolute;
    font-size: 1.3rem;
    opacity: 0;
    animation: premiumSparkleTwinkle 1.8s ease-in-out infinite;
    filter: drop-shadow(0 0 6px rgba(245, 158, 11, 0.7));
}
@keyframes premiumSparkleTwinkle {
    0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
    50% { opacity: 1; transform: scale(1.1) rotate(20deg); }
}
.premium-unlock-content {
    position: relative;
    z-index: 1;
    text-align: center;
    padding: 30px 24px;
    max-width: 300px;
    animation: premiumUnlockContentIn 0.5s cubic-bezier(0.25, 1, 0.5, 1) both;
    animation-delay: 0.2s;
}
@keyframes premiumUnlockContentIn {
    0% { opacity: 0; transform: scale(0.7) translateY(10px); }
    100% { opacity: 1; transform: scale(1) translateY(0); }
}
.premium-unlock-icon { font-size: 3rem; margin-bottom: 10px; filter: drop-shadow(0 0 14px rgba(245, 158, 11, 0.6)); }
.premium-unlock-content h2 { font-size: 1.3rem; margin: 0 0 10px 0; background: linear-gradient(135deg, var(--accent-gold), var(--accent-pink)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.premium-unlock-content p { font-size: 0.85rem; color: var(--text-secondary); margin: 0 0 20px 0; line-height: 1.5; }
.action-buttons-wrap { display: flex; gap: 8px; }
/* קיצורי דרך ליד "הוספה" בתוך מודל "פתק מהיר" - לא בורר יעד (זה חזר להיות
   הבורר הגדול עם הטקסט למעלה, ר' .ai-schedule-mode-toggle) אלא ניווט אמיתי:
   סוגר את המודל וקופץ ישר לרשימה המלאה (פתקים/רשימת קניות), לפי בקשה
   מפורשת - אין להם מצב "active" כי הם לא toggle, כל לחיצה פשוט מנווטת */
.quick-note-dest-mini-row { display: flex; gap: 6px; flex-shrink: 0; }
.quick-note-dest-mini {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: var(--text-primary);
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    flex-shrink: 0;
    transition: var(--transition);
}
.quick-note-dest-mini:active { transform: scale(0.9); }
button { font-family: inherit; font-weight: 600; border-radius: 10px; padding: 12px; cursor: pointer; transition: var(--transition); border: none; z-index: 10;}
.btn-primary { background: linear-gradient(135deg, var(--accent-pink), var(--accent-purple)); color: #fff; width: 100%; }
.btn-secondary { background-color: rgba(255, 255, 255, 0.02); color: var(--text-primary); border: 1px solid rgba(255, 0, 127, 0.1); width: 100%; }
.btn-clear-specific { background-color: rgba(255, 255, 255, 0.03); color: var(--text-secondary); border: 1px solid rgba(255,255,255,0.04); }
/* פעולות הרסניות (ביטול מנוי, מחיקת חשבון) - מודגשות באדום כדי לבלוט מכל
   שאר כפתורי ההגדרות הרגילים */
.btn-danger-outline { color: var(--accent-red-text) !important; border-color: rgba(255, 69, 58, 0.3) !important; background-color: rgba(255, 69, 58, 0.06) !important; }
/* מחיקת חשבון: קישור טקסט קטן ולא בולט (לא כפתור מלא) - כדי שלא תתחרה
   ויזואלית עם שאר פעולות ניהול המשתמש, אבל עדיין ברור/אדום כפעולה הרסנית */
.btn-link-danger-small { background: transparent; border: none; color: var(--accent-red-text); opacity: 0.7; font-size: 0.72rem; text-decoration: underline; cursor: pointer; padding: 4px; }
.btn-link-danger-small:active { opacity: 1; }
/* כפתור-קישור משני עדין (למשל "שתפי את ההישג") - קטן ולא מתחרה עם הכפתור
   הראשי, בכוונה: זו פעולה לגמרי אופציונלית שאין שום לחץ להשתמש בה */
.btn-link-subtle { background: transparent; border: none; color: var(--text-secondary); opacity: 0.8; font-size: 0.78rem; text-decoration: underline; cursor: pointer; padding: 4px; }
.btn-link-subtle:active { opacity: 1; }
/* מודל אישור מחיקת חשבון - עיצוב "רציני/עגום" ייעודי, לא ברירת המחדל
   השמחה/הניאון של שאר האפליקציה: גוני אדום-כהה עמוקים, לא צבעי הפרימיום */
.delete-account-confirm-sheet {
    background: linear-gradient(165deg, var(--bg-sheet), rgba(80, 12, 12, 0.35));
    border-top: 1px solid rgba(255, 69, 58, 0.4);
    box-shadow: 0 -10px 40px rgba(255, 69, 58, 0.12);
}
.delete-account-confirm-icon { text-align: center; font-size: 2.2rem; margin-bottom: 4px; filter: drop-shadow(0 0 10px rgba(255, 69, 58, 0.55)); }
.delete-account-confirm-title { text-align: center; color: var(--accent-red-text); }
.delete-account-confirm-input {
    display: block; width: 100%; box-sizing: border-box; background-color: rgba(255, 69, 58, 0.07);
    border: 1px solid rgba(255, 69, 58, 0.35); color: var(--text-primary); border-radius: 10px;
    padding: 12px; font-size: 0.9rem; outline: none; text-align: center; margin-top: 4px;
}
.btn-danger-solid {
    background: linear-gradient(135deg, #ff453a, #8f1414); color: #fff; border: none; font-weight: 700;
    box-shadow: 0 4px 16px rgba(255, 69, 58, 0.35); border-radius: 12px; padding: 12px; cursor: pointer;
    transition: var(--transition); flex: 1 1 0;
}
.btn-danger-solid:disabled { opacity: 0.32; cursor: not-allowed; box-shadow: none; }
.btn-danger-solid:not(:disabled):active { transform: scale(0.97); }
/* הוצאות/הכנסות: שורת היסטוריה - יורשת עיצוב בסיס מ-.center-list li (רקע/
   מסגרת/צל תלויי-ערכת-נושא), כאן רק פריסת התוכן הפנימי */
.finance-history-row { gap: 10px; }
.finance-history-main { display: flex; flex-direction: column; gap: 2px; flex: 1 1 auto; min-width: 0; }
.finance-history-category { font-weight: 700; font-size: 0.88rem; }
.finance-history-note { font-size: 0.75rem; color: var(--text-secondary); }
.finance-history-date { font-size: 0.68rem; color: var(--text-secondary); opacity: 0.8; }
.finance-history-amount { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; flex-shrink: 0; }
.finance-history-empty { color: var(--text-secondary); text-align: center; padding: 10px 0; background: transparent !important; box-shadow: none !important; border: none !important; }
/* הוצאות קבועות: תג "מקור" (כרטיס/בנק) קטן ליד השם - עוזר להבדיל בין כמה
   ייבואים ממקורות שונים, ר' confirmRecurringExpenseImport ב-app.js */
.recurring-expense-source-tag { display: inline-block; align-self: flex-start; font-size: 0.65rem; font-weight: 600; padding: 1px 8px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); color: var(--text-secondary); }
.finance-history-row.recurring-expense-ended { opacity: 0.55; }
/* ייבוא הוצאות קבועות מאקסל/CSV: אחרי שתי גרסאות קודמות (מיפוי-עמודות-
   בבוררים, ואז הקשה-ישירה-על-הטבלה) שגם הן בלבלו בבדיקה בפועל, גרסה זו
   מוותרת לגמרי על מושג "עמודות" - ניחוש אוטומטי מלא + רשימת סימון פשוטה
   לתיקון/ביטול, בדיוק כמו רשימת מטלות רגילה */
.import-review-checkbox { flex-shrink: 0; width: 20px; height: 20px; margin: 0; }
.import-review-name-input { width: 100%; min-width: 0; background: transparent; border: none; color: var(--text-primary); font-size: 0.85rem; font-weight: 600; padding: 4px; }
.import-review-amount-input { flex: 0 0 72px; width: 72px; background: transparent; border: none; border-bottom: 1px solid var(--border-color); color: var(--text-primary); text-align: end; font-variant-numeric: tabular-nums; padding: 4px; }
.import-review-name-input:focus, .import-review-amount-input:focus { outline: none; border-bottom: 1px solid var(--accent-purple); }
/* תג "פרימיום פעיל" עדין - מחליף את כפתור "שדרוג לפרימיום" ברגע שכבר יש
   פרימיום, כדי לא להמשיך להציע שדרוג למי שכבר שדרגה */
.premium-active-badge { text-align: center; margin: 10px 0; }
.premium-active-badge span { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; color: var(--accent-gold-text); background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); box-shadow: 0 0 12px rgba(245, 158, 11, 0.2); }
/* תג "שבוע ניסיון חינם" - סגנון סגול (לא זהב, כדי לא להיראות כמו "פרימיום
   פעיל" אמיתי) - ר' renderSettingsSubscriptionSection ב-app.js. אין <span>
   פנימי כאן (הטקסט נכנס ישירות ל-textContent), אז הסגנון על האלמנט עצמו */
#settings-trial-banner.trial-banner { display: inline-block; padding: 6px 16px; border-radius: 20px; font-size: 0.8rem; font-weight: 700; color: var(--accent-purple-light); background: rgba(168, 85, 247, 0.12); border: 1px solid rgba(168, 85, 247, 0.35); box-shadow: 0 0 12px rgba(168, 85, 247, 0.2); }
.apple-modal.open { display: flex; }
.apple-modal.open .modal-sheet { transform: translateY(0); opacity: 1; }
.login-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background-color: #050505; display: flex; justify-content: center; align-items: center; z-index: 3000; }
.login-card { background-color: var(--bg-sheet); border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 20px; padding: 30px 20px; width: 85%; text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.8); }
/* לוגו "NOT10.ai" - פונט ייעודי (Poppins, ר' index.html) רק לשם המותג עצמו,
   לא לכל הטקסט באפליקציה - לפי בקשה מפורשת ("פונט יותר יפה") */
.brand-wordmark { font-family: 'Poppins', -apple-system, sans-serif; font-weight: 600; letter-spacing: 0.3px; background: linear-gradient(135deg, var(--accent-pink-text), var(--accent-purple-light-text)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.login-card h2.brand-wordmark { font-size: 1.4rem; }
.login-card p { color: var(--text-secondary); font-size: 0.85rem; margin: 0 0 14px 0; }
/* direction:ltr הוסר - הוא הפיל את המרכוז של טקסט ה-placeholder (עברית/ערבית
   וכו') על אף text-align:center, כי זה יצר ניגוד בין כיוון הקונטיינר לכיוון
   התווים בפועל. עכשיו יורש dir מ-html (נקבע דינמית ב-setLanguage) - לפי
   בקשה מפורשת ("שיהיה ככה בכל השפות") */
.login-card input { display: block; width: 100%; box-sizing: border-box; background-color: var(--bg-glass); border: 1px solid var(--border-color); color: var(--text-primary); border-radius: 10px; padding: 12px; font-size: 0.9rem; outline: none; margin-bottom: 10px; text-align: center; }
.login-card input:focus { border-color: var(--accent-purple); }
.login-card .h-captcha { display: flex; justify-content: center; margin-bottom: 14px; }
.password-input-wrap { position: relative; margin-bottom: 10px; }
/* padding-inline-start תואם (לא רק end) - כדי שהריפוד יהיה סימטרי משני
   הצדדים, כך שהטקסט הממורכז (text-align:center) יראה ממורכז בפועל למרות
   שכפתור העין/קוף תופס מקום רק בצד אחד - לפי בקשה מפורשת ("עדיין לא ממורכז") */
.password-input-wrap input { margin-bottom: 0; padding-inline-end: 42px; padding-inline-start: 42px; }
.btn-toggle-password { position: absolute; top: 50%; inset-inline-end: 10px; transform: translateY(-50%); background: transparent; border: none; padding: 4px; font-size: 1rem; cursor: pointer; opacity: 0.75; }
.btn-toggle-password:active { opacity: 1; }
.login-card .btn-primary { margin-top: 4px; }
.auth-message { min-height: 1.1em; color: var(--accent-pink-text); font-size: 0.8rem !important; margin: 0 0 8px 0 !important; }
.auth-toggle-line { margin: 16px 0 0 0 !important; font-size: 0.8rem !important; }
.auth-toggle-line a { color: var(--accent-purple-light-text); font-weight: 600; text-decoration: none; margin-right: 4px; }
.auth-toggle-line a:hover { text-decoration: underline; }
.auth-legal-links { margin: 18px 0 0 0 !important; font-size: 0.7rem !important; opacity: 0.6; text-align: center; }
.auth-legal-links a { color: var(--text-secondary); text-decoration: underline; }
.auth-legal-links span { margin: 0 6px; }
.settings-legal-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 16px; margin: 10px 0 4px; font-size: 0.75rem; }
.settings-legal-links a { color: var(--text-secondary); text-decoration: underline; }
/* "שכחתי סיסמה" - קישור קטן וצנוע מתחת לשדה הסיסמה, לא כפתור בולט */
.auth-forgot-line { margin: 6px 0 0 0 !important; font-size: 0.75rem !important; text-align: end; }
.auth-forgot-line a { color: var(--text-secondary); text-decoration: none; }
.auth-forgot-line a:hover { color: var(--accent-purple-light-text); text-decoration: underline; }

/* בורר שפה משותף (מסך כניסה + הגדרות) - "כפתור" שפותח חלון חיפוש, לא <select>
   רגיל, כדי שיהיה נוח גם כשיתווספו הרבה עוד שפות בעתיד */
.language-picker-trigger {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: var(--bg-glass);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--border-color);
    border-radius: 20px;
    padding: 8px 14px;
    color: var(--text-primary);
    font-size: 0.85rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}
.language-picker-trigger:active { transform: scale(0.97); }
.language-picker-trigger-login { margin: 0 auto 14px auto; }
.language-picker-flag { font-size: 1.05rem; line-height: 1; }
.language-picker-chevron { color: var(--text-secondary); font-size: 0.75rem; }

.language-search-input {
    display: block;
    width: 100%;
    box-sizing: border-box;
    background-color: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    color: var(--text-primary);
    border-radius: 12px;
    padding: 12px 14px;
    font-size: 0.9rem;
    outline: none;
    margin-bottom: 12px;
}
.language-search-input:focus { border-color: var(--accent-purple); }

.language-picker-list { display: flex; flex-direction: column; gap: 8px; max-height: 40vh; overflow-y: auto; }
.language-picker-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.04);
    border-radius: 12px;
    padding: 12px;
    color: var(--text-primary);
    font-size: 0.9rem;
    font-weight: 500;
    font-family: inherit;
    cursor: pointer;
    text-align: start;
    transition: var(--transition);
}
.language-picker-item:active { transform: scale(0.98); }
.language-picker-item.active { border-color: var(--accent-pink); background-color: rgba(255, 0, 127, 0.08); }
.language-picker-item .language-picker-name { flex: 1 1 auto; }
.language-picker-check { color: var(--accent-pink-text); font-weight: 700; }
.language-no-results { color: var(--text-secondary); font-size: 0.85rem; text-align: center; padding: 16px 0; }

/* בורר מאכלים: כפתורי יחידה (גרם/כף/כפית/כוס) - אותם יחסי-המרה בדיוק כמו
   VOLUME_UNIT_TO_GRAMS במנתח החופשי-מטקסט, רק כבחירה מפורשת לא ניחוש מטקסט */
.food-picker-unit-row { display: flex; gap: 6px; margin-top: 8px; }
.food-picker-unit-btn {
    flex: 1 1 0;
    background-color: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 10px;
    padding: 8px 4px;
    color: var(--text-primary);
    font-size: 0.78rem;
    font-weight: 600;
    font-family: inherit;
    cursor: pointer;
    transition: var(--transition);
}
.food-picker-unit-btn.active { border-color: var(--accent-pink); background-color: rgba(255, 0, 127, 0.1); color: var(--accent-pink-text); }
.food-picker-unit-btn:active { transform: scale(0.96); }
/* בורר מאכלים: שדה כמות + תווית יחידה (גרם/יחידות) לצד תצוגת קלוריות חיה */
.food-picker-qty-row { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.food-picker-qty-row input { flex: 1 1 auto; box-sizing: border-box; background-color: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); color: var(--text-primary); border-radius: 12px; padding: 12px 14px; font-size: 0.9rem; outline: none; text-align: center; }
.food-picker-qty-row input:focus { border-color: var(--accent-purple); }
.food-picker-qty-row span { flex: 0 0 auto; color: var(--text-secondary); font-size: 0.85rem; font-weight: 600; }
input[type="date"] {
    background: rgba(20, 10, 30, 0.55) !important;
    color: var(--accent-purple-light-text) !important;
    border: 1px solid var(--accent-purple) !important;
    border-radius: 10px !important;
    padding: 9px 10px !important;
    font-weight: bold !important;
    box-sizing: border-box;
    min-width: 0;
    color-scheme: dark; /* מכריח את הדפדפן להציג את לוח השנה הנייטיבי בערכת נושא כהה */
    transition: var(--transition);
}
input[type="date"]:focus { border-color: var(--accent-pink) !important; box-shadow: 0 0 0 3px rgba(255, 0, 127, 0.18); }
input[type="date"]::-webkit-calendar-picker-indicator {
    filter: invert(46%) sepia(84%) saturate(2661%) hue-rotate(295deg) brightness(100%) contrast(101%);
    opacity: 0.85;
    cursor: pointer;
    transition: var(--transition);
}
input[type="date"]::-webkit-calendar-picker-indicator:hover { opacity: 1; }
.date-picker-container input[type="date"] { width: 100%; }
/* כפתור-שדה ללוח השנה המותאם-אישית - מחליף input[type=date] רגיל, אותה שפה
   חזותית (רקע/מסגרת/צבע סגולים) אבל עם SVG נקי במקום אייקון-הדפדפן, ועם
   הערך הנבחר כטקסט קריא - ר' openDateFieldPicker/updateDateFieldDisplay ב-app.js */
.date-picker-field-trigger {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    background: rgba(20, 10, 30, 0.55);
    color: var(--accent-purple-light-text);
    border: 1px solid var(--accent-purple);
    border-radius: 10px;
    padding: 9px 10px;
    font-weight: bold;
    font-family: inherit;
    font-size: 0.9rem;
    box-sizing: border-box;
    cursor: pointer;
    transition: var(--transition);
}
.date-picker-field-trigger:active { transform: scale(0.98); }
.date-picker-field-icon { flex-shrink: 0; width: 18px; height: 18px; }
.date-picker-field-trigger span { flex: 1; text-align: start; }
@keyframes floatingGlow { 0% { transform: translate(0, 0) scale(1); } 100% { transform: translate(20px, 30px) scale(1.1); } }
@keyframes fadeOverlay { from { opacity: 0; } to { opacity: 1; } }

/* --- תיקון שורש לבעיית "כרטיס צר באמצע" + כפתור מחיקה שנחתך/נעלם במובייל ---
   הסיבה האמיתית: .vertical-scroll-track (עמודת מגע שקופה לגלילה אנכית, ללא
   תוכן חזותי, לא מקושרת לשום JS) הייתה תופסת 12% קבועים מרוחב השורה גם
   במסכי מובייל צרים - זה דחס את .days-scroll-container (וכל מה שבתוכו,
   כולל שורות הלו"ז) ל-88% בלבד מהרוחב, מה שגם יצר את המראה ה"צר באמצע"
   וגם השאיר פחות מדי שטח לתג המשימה+כפתור המחיקה, עד שהמחיקה נדחקה מחוץ
   לגבול הנראה. כאן מצמצמים את הרצועה לרצועת מגע דקה במקום 12% נוזלי, כדי
   שהתוכן האמיתי יקבל כמעט את כל הרוחב, ומקשיחים את שורת הלו"ז עצמה
   (flex עם !important) כדי שהזמן/התג/המחיקה תמיד ייפרשו קצה-לקצה ולעולם
   לא ייחתכו */
@media (max-width: 768px) {
    .card { padding: 8px 12px; }
    .card-body, .day-tabs-strip, .schedule-touch-row, .days-scroll-container, .day-page {
        width: 100%;
        max-width: 100% !important;
        box-sizing: border-box;
    }
    .day-page { padding: 8px; }
    .vertical-scroll-track { flex: 0 0 14px; min-width: 14px; max-width: 14px; }
    .days-scroll-container { flex: 1 1 auto; }
    /* עוברים ל-CSS Grid במקום flex עבור השורה במובייל: שני סבבים קודמים עם
       flex-grow על .slot-task-wrap נתנו תוצאות לא-עקביות (הפיל לא תפס את
       השטח הפנוי כמצופה, וכפתור המחיקה "נעלם"). עמודת grid עם minmax(0,1fr)
       לוקחת בדיוק את השטח הנותר אחרי שתי העמודות הקבועות (auto), בלי תלות
       בחישובי flex-grow/flex-basis מקוננים - מנגנון פשוט וחזוי הרבה יותר.
       סדר ה-DOM (זמן, תג-משימה, מחיקה) + dir="rtl" דינמי הופכים ויזואלית
       לבד: עמודה ראשונה (auto=זמן) בקצה הימני, עמודה אחרונה (auto=מחיקה)
       בקצה השמאלי, כמו שהמשתמש ביקש בדיאגרמה. */
    /* עמודה ראשונה עם רוחב *קבוע* (לא auto): ל-<input> יש רוחב טבעי מובנה
       (כאילו size=20, ~150px+) שאינו תלוי באורך "09:00" בפועל - כשההורה
       הוא grid ועמודתו auto, הדפדפן מודד את הרוחב הטבעי הזה (לא את הערך
       המוצג) וה"מתנפחת" הזאת גזלה את כל השטח מעמודת ה-1fr המרכזית, מה
       שגרם לתג להצטמצם לאייקון בלבד. עמודה קבועה (72px, ידית+שעה) פותרת
       את זה לחלוטין בלי תלות בגודל הטבעי של השדה */
    .slot-input-group {
        display: grid !important;
        grid-template-columns: 80px minmax(0, 1fr) auto !important;
        align-items: center !important;
        width: 100% !important;
        max-width: 100% !important;
        overflow: visible !important;
        padding: 8px 10px !important;
        gap: 8px !important;
    }
    .slot-time-wrap { flex: none !important; width: 100%; justify-content: center; }
    /* width קבוע ולא auto: בתוך slot-time-wrap (flex) שדה auto+basis:auto חוזר
       לאותה בעיית "רוחב טבעי מנופח" שתוארה למעלה, רק בהקשר פנימי אחר */
    .slot-time { flex: none !important; width: 46px !important; }
    .slot-drag-handle { font-size: 1.05rem !important; padding: 4px 6px !important; }
    /* הבאג האמיתי מאחורי "ה-X יושב מעל התג": .slot-task-wrap קיבל width:100%
       ביחד עם padding, בלי box-sizing:border-box - כלומר הריפוד נוסף *מעל*
       ה-100% (מודל content-box ברירת המחדל), כך שהתא בפועל היה רחב יותר
       מעמודת ה-grid שלו ב-28px (14px משני הצדדים) וגלש ויזואלית לתוך עמודת
       הפעולות השכנה. box-sizing:border-box מבטיח שה-100% כולל את הריפוד,
       כך שהתג נשאר בדיוק בתוך גבולות התא שלו ולעולם לא נוגע בכפתור המחיקה */
    .slot-task-wrap {
        min-width: 0 !important;
        max-width: none !important;
        width: auto !important;
        box-sizing: border-box !important;
        justify-content: center;
        text-align: center;
        padding: 6px 14px !important;
    }
    .slot-task-wrap .slot-task {
        flex: 1 1 auto !important;
        width: 100% !important;
        min-width: 0 !important;
        max-width: none !important;
        box-sizing: border-box !important;
        white-space: nowrap;
        overflow: visible !important;
        text-overflow: clip !important;
        text-align: center;
    }
    /* כפתור מחיקה עם תיבת מגע קבועה ומובטחת (26x26) - לעולם לא יכול "להיעלם"
       או להתכווץ לגודל בלתי-נראה, בניגוד להסתמכות על גודל טקסט/אמוג'י בלבד */
    .btn-delete-slot, .btn-move-slot, .btn-duplicate-slot {
        flex: none !important;
        width: 26px !important;
        height: 26px !important;
        min-width: 26px !important;
        font-size: 0.9rem !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* --- התאמה לטאבלטים/iPad: הרחבת ה"כרטיס" הראשי, בלי לשבור את הגריד הגמיש --- */
/* מתחת ל-769px (כל טלפון) אין תקרת max-width בכלל - ראה כלל הבסיס של
   .phone-wrapper למעלה. כל הגריד (dashboard-grid, stats-grid,
   hours-settings-grid, slot-input-group) כבר בנוי עם minmax(0, 1fr), אז
   הרחבת .phone-wrapper בלבד מספיקה כדי לנצל את השטח הנוסף בלי לשבור
   סימטריה. .modal-sheet מוגבל ל-520px למעלה כדי שהמגירה/הפופאפ ימשיכו
   להיראות כמו חלון צף מרכזי ולא יימתחו על פני כל הרוחב. */
@media (min-width: 769px) {
    .phone-wrapper { max-width: 700px; padding: 16px; }
    .day-tabs-strip { justify-content: space-between; gap: 12px; }
    .day-tab { padding: 12px 18px; }
    .day-tab-name { font-size: 0.85rem; }
    .day-tab-date { font-size: 0.72rem; }
}
@media (min-width: 1000px) {
    .phone-wrapper { max-width: 820px; }
    .day-tabs-strip { gap: 16px; }
    .day-tab { padding: 14px 22px; }
}

/* --- שכבת פריסה נוספת למחשב שולחני/טאבלט רחב (1024px+): "כמו דשבורד" רב-
   טורי במקום עמודה בודדת צרה. הכול תוספת בלבד - media query חדש, בלי לגעת
   באף כלל בסיס (מובייל) או בשני בלוקי ה-@media למעלה - כך שמתחת ל-1024px
   הכול ממשיך להתנהג בדיוק כפי שהתנהג לפני השינוי הזה */
@media (min-width: 1024px) {
    .phone-wrapper { max-width: 1200px; }

    /* כל מסך ראשי עם כמה כרטיסים ישירים (MyWeek, כספים) הופך לרשת רב-טורית -
       כפתור "חזרה", רשת תת-קוביות, ותצוגות subview תמיד תופסים רוחב מלא (לא
       נכנסים לרשת בעצמם, ר' .subview-panel/.sub-tile-grid), רק ה-.card-ים
       עצמם מסתדרים זה לצד זה */
    .tab-content.active-tab {
        display: grid !important;
        grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
        gap: 16px;
        align-items: start;
    }
    .tab-content.active-tab > *:not(.card) { grid-column: 1 / -1; }
}
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }