@import url('https://fonts.googleapis.com/css2?family=Heebo:wght@300;400;500;600;700&family=Bellefair&display=swap');

/* גודל בסיס — rem מחושב ביחס לזה */
html { font-size: 16px; }
html.is-mobile { font-size: 6px; }

/* CSS Variables - מחשב */
    :root {
      --main-title-font-desktop: 2.2rem;                  /* גודל כותרת ראשית "תרגילנו בתורתך" */
      --main-title-color-desktop: #2c3e50;                /* צבע כותרת ראשית */
      --hebrew-date-font-desktop: 1.2rem;                 /* גודל שורת התאריך העברי */
      --hebrew-date-color-desktop: #7f8c8d;               /* צבע שורת התאריך העברי */
      --events-font-desktop: 1.1rem;                      /* גודל שורת אירועים (עתידית) */
      --events-color-desktop: #7f8c8d;                    /* צבע שורת אירועים */
      --greeting-font-desktop: 1.1rem;                    /* גודל ברכת שלום עם שם התלמיד */
      --greeting-color-desktop: #34495e;                  /* צבע ברכת השלום */
      --message-font-desktop: 1rem;                       /* גודל תוכן ההודעות */
      --message-color-desktop: #000000;                   /* צבע תוכן ההודעות */
      --topic-title-font-desktop: 1.4rem;                 /* גודל כותרות נושא (תנ"ך, משנה וכו') */
      --topic-title-color-desktop: #2c3e50;               /* צבע כותרות נושא */
      --subtopic-title-font-desktop: 1.1rem;              /* גודל כותרות תת-נושא */
      --subtopic-title-color-desktop: #34495e;            /* צבע כותרות תת-נושא */
      --item-name-font-desktop: 1rem;                     /* גודל שמות תרגילים וחומרים */
      --item-name-color-desktop: #49A88C;                 /* צבע שמות תרגילים וחומרים (גוון אמצעי באנר — דסקטופ) */
      --item-stats-font-desktop: 0.9rem;                  /* גודל טקסט הגשות וציון */
      --item-stats-color-desktop: #2c3e50;                /* צבע טקסט הגשות וציון */
      --item-dates-font-desktop: 0.9rem;                  /* גודל תאריכי פתיחה וסגירה */
      --item-dates-color-desktop: #7f8c8d;                /* צבע תאריכי פתיחה וסגירה */
      --submissions-met-color-desktop: #27ae60;           /* צבע הגשות כשעמד במינימום (ירוק) */
      --submissions-not-met-color-desktop: #e67e22;       /* צבע הגשות כשלא עמד במינימום (כתום כהה) */
      --min-submissions-font-desktop: 0.8rem;             /* גודל טקסט מינימום הגשות */
      --min-submissions-color-desktop: #999;              /* צבע טקסט מינימום הגשות (אפור) */
      --item-icon-font-desktop: 1.2rem;                   /* גודל אייקונים של תרגילים וחומרים */
      --item-icon-color-desktop: #000000;                 /* צבע אייקונים */
      --container-padding-horizontal-desktop: 24px;       /* שוליים מהצדדים של כל המסך */
      --exercise-card-padding-vertical-desktop: 10px;     /* רווח עליון ותחתון בכרטיס תרגיל */
      --exercise-card-padding-horizontal-desktop: 20px;   /* רווח צדדי בכרטיס תרגיל */
      --message-card-padding-vertical-desktop: 10px;      /* רווח עליון ותחתון בכרטיס הודעה */
      --message-card-padding-horizontal-desktop: 20px;    /* רווח צדדי בכרטיס הודעה */
      --text-line-height-desktop: 1.6;                    /* רווח בין שורות באותו טקסט (line-height) */
      --title-to-date-gap-desktop: 20px;                  /* מרווח בין כותרת ראשית לתאריך */
      --date-to-events-gap-desktop: 10px;                 /* מרווח בין תאריך לשורת אירועים */
      --events-to-greeting-gap-desktop: 30px;             /* מרווח בין אירועים לברכה */
      --greeting-to-messages-gap-desktop: 10px;           /* מרווח בין ברכה להודעות */
      --messages-to-content-gap-desktop: 40px;            /* מרווח בין הודעות לנושא ראשון */
      --topic-to-subtopic-gap-desktop: 5px;               /* מרווח בין נושא לתת-נושא */
      --subtitle-to-item-gap-desktop: 0px;               /* מרווח בין כותרת לתרגיל הראשון תחתיה */
      --message-cards-gap-desktop: 5px;                  /* מרווח בין כרטיסי הודעות */
      --exercise-cards-gap-desktop: 5px;                  /* מרווח בין כרטיסי תרגילים */
      --icon-to-text-gap-desktop: 12px;                   /* מרווח בין אייקון לשם התרגיל */
      --mobile-card-rows-gap-desktop: 0px;                /* במחשב: בין שורות בכרטיס (לא רלוונטי) */
      --body-background-color-desktop: #f8f9fa;           /* צבע רקע כללי של המסך */
      --container-background-color-desktop: #ffffff;      /* צבע רקע הקונטיינר הראשי */
      --message-card-background-color-desktop: #ffffff;   /* צבע רקע כרטיסי הודעות */
      --exercise-card-background-color-desktop: #ffffff;  /* צבע רקע כרטיסי תרגילים וחומרים */
      
      /* גדלי פונטים - מסך טעינה (44-48) */
      --loading-title-font-desktop: 1.5rem;               /* גודל כותרת "תרגילנו בתורתך" במסך הטעינה */
      /* גדלי פונטים - תפילה במסך טעינה (מחשב) */
      --loading-prayer-font-desktop: 1rem;                 /* גודל שורות התפילה הרגילות במחשב */
      --loading-main-prayer-font-desktop: 1.4rem;          /* גודל שורת "שתרגילנו בתורתך" במחשב */
      --loading-prayer-line-spacing-desktop: 3px;          /* רווח בין שורות התפילה במחשב */
      --loading-prayer-to-greeting-gap-desktop: 25px;          /* רווח בין סוף התפילה לברכת שלום במחשב */
      --loading-greeting-font-desktop: 1.4rem;            /* גודל ברכת השלום עם שם התלמיד */
      --loading-message-font-desktop: 1.1rem;             /* גודל הודעת "הדף נטען..." */
      --loading-fact-font-desktop: 1.1rem;                  /* גודל טקסט העובדה המעניינת */
      --loading-progress-font-desktop: 0.9rem;            /* גודל טקסט ההתקדמות התחתון */

      /* צבעי טקסט - מסך טעינה (49-53) */
      --loading-title-color-desktop: #ffffff;             /* צבע כותרת מסך הטעינה */
      

      --loading-greeting-color-desktop: rgba(255,255,255,0.9); /* צבע ברכת השלום במסך טעינה */
      --loading-message-color-desktop: rgba(255,255,255,0.8);  /* צבע הודעת הטעינה */
      --loading-fact-color-desktop: rgba(255,255,255,0.95);    /* צבע העובדה המעניינת */
      --loading-progress-color-desktop: rgba(255,255,255,0.7); /* צבע טקסט ההתקדמות */

      /* צבעי רקע - מסך טעינה (54-57) */
      --loading-background-color-desktop: linear-gradient(135deg, #2D7A66 0%, #49A88C 100%); /* רקע כללי של מסך הטעינה */
      --loading-fact-background-color-desktop: rgba(255,255,255,0.2); /* רקע תיבת העובדה המעניינת */
      --loading-spinner-border-main-color-desktop: rgba(255,255,255,0.3); /* צבע הגבול התחתון של הספינר */
      --loading-spinner-border-top-color-desktop: #ffffff; /* צבע הגבול העליון של הספינר */

      /* רווחים וגדלים - מסך טעינה (58-67) */
      --loading-container-padding-desktop: 40px 20px;     /* רווח פנימי של מיכל הטעינה */
      --loading-title-margin-bottom-desktop: 20px;        /* מרווח מתחת לכותרת הטעינה */
      --loading-greeting-margin-bottom-desktop: 30px;     /* מרווח מתחת לברכת השלום */
      --loading-message-margin-bottom-desktop: 30px;      /* מרווח מתחת להודעת הטעינה */
      --loading-fact-margin-desktop: 20px 0;              /* מרווח סביב תיבת העובדה */
      --loading-fact-padding-desktop: 15px;               /* רווח פנימי של תיבת העובדה */
      --loading-spinner-margin-bottom-desktop: 20px;      /* מרווח מתחת לספינר */
      --loading-spinner-size-desktop: 50px;               /* גודל הספינר (רוחב וגובה) */
      --loading-spinner-border-width-desktop: 4px;        /* עובי הגבול של הספינר */
      --loading-fact-border-radius-desktop: 8px;          /* עיגול פינות תיבת העובדה */

      /* אפקטים - מסך טעינה (68-69) */
      --loading-text-shadow-desktop: 0 2px 4px rgba(0,0,0,0.3); /* צללית הטקסט של הכותרת */
      --loading-transition-duration-desktop: 0.5s;        /* משך זמן האנימציה של היעלמות מסך הטעינה */
    }
    
    /* CSS Variables - מובייל */
    html.is-mobile {
      --main-title-font-mobile: 3.2rem;                   /* גודל כותרת ראשית במובייל */
      --main-title-color-mobile: #2c3e50;                 /* צבע כותרת ראשית במובייל */
      --hebrew-date-font-mobile: 2.1rem;                  /* גודל שורת התאריך העברי במובייל */
      --hebrew-date-color-mobile: #7f8c8d;                /* צבע שורת התאריך העברי במובייל */
      --events-font-mobile: 1.9rem;                       /* גודל שורת אירועים במובייל */
      --events-color-mobile: #7f8c8d;                     /* צבע שורת אירועים במובייל */
      --greeting-font-mobile: 2.1rem;                     /* גודל ברכת שלום במובייל */
      --greeting-color-mobile: #34495e;                   /* צבע ברכת השלום במובייל */
      --message-font-mobile: 2.1rem;                      /* גודל תוכן ההודעות במובייל */
      --message-color-mobile: #000000;                    /* צבע תוכן ההודעות במובייל */
      --topic-title-font-mobile: 2.5rem;                    /* גודל כותרות נושא במובייל */
      --topic-title-color-mobile: #2c3e50;                /* צבע כותרות נושא במובייל */
      --subtopic-title-font-mobile: 1.9rem;               /* גודל כותרות תת-נושא במובייל */
      --subtopic-title-color-mobile: #34495e;             /* צבע כותרות תת-נושא במובייל */
      --item-name-font-mobile: 2.3rem;                    /* גודל שמות תרגילים במובייל */
      --item-name-color-mobile: #1B8EA8;                  /* צבע שמות תרגילים במובייל (גוון אמצעי באנר — מובייל) */
      --item-stats-font-mobile: 1.8rem;                     /* גודל טקסט הגשות וציון במובייל */
      --item-stats-color-mobile: #2c3e50;                 /* צבע טקסט הגשות וציון במובייל */
      --item-dates-font-mobile: 1.7rem;                   /* גודל תאריכי פתיחה במובייל */
      --item-dates-color-mobile: #7f8c8d;                 /* צבע תאריכי פתיחה במובייל */
      --submissions-met-color-mobile: #27ae60;            /* צבע הגשות כשעמד במינימום (ירוק) במובייל */
      --submissions-not-met-color-mobile: #e67e22;        /* צבע הגשות כשלא עמד במינימום (כתום כהה) במובייל */
      --min-submissions-font-mobile: 1.5rem;              /* גודל טקסט מינימום הגשות במובייל */
      --min-submissions-color-mobile: #999;               /* צבע טקסט מינימום הגשות (אפור) במובייל */
      --item-icon-font-mobile: 2.2rem;                    /* גודל אייקונים במובייל */
      --item-icon-color-mobile: #000000;                  /* צבע אייקונים במובייל */
      --container-padding-horizontal-mobile: 10px;        /* שוליים מהצדדים במובייל */
      --exercise-card-padding-vertical-mobile: 8px;       /* רווח עליון ותחתון בכרטיס תרגיל במובייל */
      --exercise-card-padding-horizontal-mobile: 10px;    /* רווח צדדי בכרטיס תרגיל במובייל */
      --message-card-padding-vertical-mobile: 10px;       /* רווח עליון ותחתון בכרטיס הודעה במובייל */
      --message-card-padding-horizontal-mobile: 14px;     /* רווח צדדי בכרטיס הודעה במובייל */
      --text-line-height-mobile: 1.4;                     /* רווח בין שורות במובייל */
      --title-to-date-gap-mobile: 10px;                   /* מרווח בין כותרת לתאריך במובייל */
      --date-to-events-gap-mobile: 5px;                   /* מרווח בין תאריך לאירועים במובייל */
      --events-to-greeting-gap-mobile: 15px;              /* מרווח בין אירועים לברכה במובייל */
      --greeting-to-messages-gap-mobile: 5px;             /* מרווח בין ברכה להודעות במובייל */
      --messages-to-content-gap-mobile: 20px;             /* מרווח בין הודעות לתוכן במובייל */
      --topic-to-subtopic-gap-mobile: 3px;                /* מרווח בין נושא לתת-נושא במובייל */
      --subtitle-to-item-gap-mobile: 0px;                 /* מרווח בין כותרת לתרגיל במובייל */
      --message-cards-gap-mobile: 4px;                    /* מרווח בין כרטיסי הודעות במובייל */
      --exercise-cards-gap-mobile: 4px;                   /* מרווח בין כרטיסי תרגילים במובייל */
      --icon-to-text-gap-mobile: 3px;                     /* מרווח בין אייקון לטקסט במובייל */
      --mobile-card-rows-gap-mobile: 0px;                 /* במובייל: בין שורה ראשונה לשנייה בכרטיס */
      --body-background-color-mobile: #ffffff;            /* צבע רקע כללי במובייל */
      --container-background-color-mobile: #ffffff;       /* צבע רקע הקונטיינר במובייל */
      --message-card-background-color-mobile: #ffffff;    /* צבע רקע כרטיסי הודעות במובייל */
      --exercise-card-background-color-mobile: #ffffff;   /* צבע רקע כרטיסי תרגילים במובייל */

      /* גדלי פונטים - מסך טעינה מובייל */
      --loading-title-font-mobile: 4.5rem;                /* גודל כותרת הטעינה במובייל */
      /* גדלי פונטים - תפילה במסך טעינה מובייל */
      --loading-prayer-font-mobile: 3rem;                /* גודל שורות התפילה הרגילות במובייל */
      --loading-main-prayer-font-mobile: 4.5rem;           /* גודל שורת "שתרגילנו בתורתך" במובייל */
      --loading-prayer-line-spacing-mobile: 4px;          /* רווח בין שורות התפילה במובייל */
      --loading-prayer-to-greeting-gap-mobile: 35px;           /* רווח בין סוף התפילה לברכת שלום במובייל */
      --loading-greeting-font-mobile: 3rem;             /* גודל ברכת השלום במובייל */
      --loading-message-font-mobile: 2.5rem;              /* גודל הודעת הטעינה במובייל */
      --loading-fact-font-mobile: 2.5rem;                 /* גודל העובדה המעניינת במובייל */
      --loading-progress-font-mobile: 2rem;             /* גודל טקסט ההתקדמות במובייל */

      /* צבעי טקסט - מסך טעינה מובייל */
      --loading-title-color-mobile: #ffffff;              /* צבע כותרת מסך הטעינה במובייל */
      --loading-greeting-color-mobile: rgba(255,255,255,0.9);  /* צבע ברכת השלום במובייל */
      --loading-message-color-mobile: rgba(255,255,255,0.8);   /* צבע הודעת הטעינה במובייל */
      --loading-fact-color-mobile: rgba(255,255,255,0.95);     /* צבע העובדה במובייל */
      --loading-progress-color-mobile: rgba(255,255,255,0.7);  /* צבע טקסט ההתקדמות במובייל */

      /* צבעי רקע - מסך טעינה מובייל */
      --loading-background-color-mobile: linear-gradient(135deg, #0D5E78 0%, #1B8EA8 50%, #5AC0D5 100%); /* רקע מסך טעינה במובייל — סקאלה טורקיזית */
      --loading-fact-background-color-mobile: rgba(255,255,255,0.2); /* רקע תיבת העובדה במובייל */
      --loading-spinner-border-main-color-mobile: rgba(255,255,255,0.3); /* צבע גבול ספינר במובייל */
      --loading-spinner-border-top-color-mobile: #ffffff;      /* צבע גבול עליון ספינר במובייל */

      /* רווחים וגדלים - מסך טעינה מובייל */
      --loading-container-padding-mobile: 30px 5px;      /* רווח פנימי מיכל טעינה במובייל */
      --loading-title-margin-bottom-mobile: 25px;         /* מרווח מתחת לכותרת במובייל */
      --loading-greeting-margin-bottom-mobile: 35px;      /* מרווח מתחת לברכה במובייל */
      --loading-message-margin-bottom-mobile: 35px;       /* מרווח מתחת להודעה במובייל */
      --loading-fact-margin-mobile: 25px 0;               /* מרווח סביב העובדה במובייל */
      --loading-fact-padding-mobile: 20px;                /* רווח פנימי תיבת העובדה במובייל */
      --loading-spinner-margin-bottom-mobile: 25px;       /* מרווח מתחת לספינר במובייל */
      --loading-spinner-size-mobile: 80px;                /* גודל הספינר במובייל */
      --loading-spinner-border-width-mobile: 5px;         /* עובי גבול הספינר במובייל */
      --loading-fact-border-radius-mobile: 12px;          /* עיגול פינות העובדה במובייל */

      /* אפקטים - מסך טעינה מובייל */
      --loading-text-shadow-mobile: 0 3px 6px rgba(0,0,0,0.4);  /* צללית טקסט במובייל */
      --loading-transition-duration-mobile: 0.6s;         /* משך אנימציה במובייל */      
    }
    
    /* Loading Screen Styles */
    .loading-screen {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: var(--loading-background-color-desktop);
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      z-index: 9999;
      transition: opacity var(--loading-transition-duration-desktop) ease-out;
    }
    
    .loading-screen.hidden {
      opacity: 0;
      pointer-events: none;
    }
    
    .loading-container {
      text-align: center;
      max-width: 400px;
      padding: var(--loading-container-padding-desktop);
    }
    
    .loading-title {
      font-size: var(--loading-title-font-desktop);
      font-weight: 600;
      margin-bottom: var(--loading-title-margin-bottom-desktop);
      text-shadow: var(--loading-text-shadow-desktop);
      color: var(--loading-title-color-desktop);
    }
    
    /* כללי CSS לשורות התפילה - מחשב */
    .prayer-line {
      font-family: 'Bellefair', serif;                      /* פונט מיוחד לתפילה */
      font-size: var(--loading-prayer-font-desktop);        /* גודל פונט רגיל לשורות תפילה */
      font-weight: 400;                                     /* Bellefair עובד הכי טוב ב-400 */
      margin-bottom: var(--loading-prayer-line-spacing-desktop); /* מרווח בין השורות */
      text-shadow: var(--loading-text-shadow-desktop);      /* צללית לטקסט */
      color: var(--loading-title-color-desktop);            /* צבע הטקסט */
      text-align: center;                                   /* יישור למרכז */
    }
    
    .prayer-line.main-prayer {
      font-size: var(--loading-main-prayer-font-desktop);   /* גודל מיוחד לשורה "שתרגילנו בתורתך" */
    }

    .loading-greeting {
      font-size: var(--loading-greeting-font-desktop);
      margin-top: var(--loading-prayer-to-greeting-gap-desktop);
      margin-bottom: var(--loading-greeting-margin-bottom-desktop);
      color: var(--loading-greeting-color-desktop);
    }
    
    .loading-message {
      font-size: var(--loading-message-font-desktop);
      margin-bottom: var(--loading-message-margin-bottom-desktop);
      color: var(--loading-message-color-desktop);
    }
    
    .loading-fact {
      font-size: var(--loading-fact-font-desktop);
      margin: var(--loading-fact-margin-desktop);
      padding: var(--loading-fact-padding-desktop);
      background: var(--loading-fact-background-color-desktop);
      border-radius: var(--loading-fact-border-radius-desktop);
      line-height: 1.4;
      color: var(--loading-fact-color-desktop);
    }

    .spinner {
      width: var(--loading-spinner-size-desktop);
      height: var(--loading-spinner-size-desktop);
      border: var(--loading-spinner-border-width-desktop) solid var(--loading-spinner-border-main-color-desktop);
      border-top: var(--loading-spinner-border-width-desktop) solid var(--loading-spinner-border-top-color-desktop);
      border-radius: 50%;
      animation: spin 1s linear infinite;
      margin: 20px auto var(--loading-spinner-margin-bottom-desktop);
    }
    
    @keyframes spin {
      0% { transform: rotate(0deg); }
      100% { transform: rotate(360deg); }
    }
    
    .progress-text {
      font-size: var(--loading-progress-font-desktop);
      color: var(--loading-progress-color-desktop);
    }
    
    /* הגדרות מובייל למסך טעינה */
    html.is-mobile .loading-screen {
      background: var(--loading-background-color-mobile);
      transition: opacity var(--loading-transition-duration-mobile) ease-out;
    }
    
    html.is-mobile .loading-container {
      padding: var(--loading-container-padding-mobile);
      max-width: 95%;
      margin: 0 auto;
    }
    
    html.is-mobile .loading-title {
      font-size: var(--loading-title-font-mobile);
      margin-bottom: var(--loading-title-margin-bottom-mobile);
      text-shadow: var(--loading-text-shadow-mobile);
      color: var(--loading-title-color-mobile);
    }
    
    html.is-mobile .loading-greeting {
      font-size: var(--loading-greeting-font-mobile);
      margin-top: var(--loading-prayer-to-greeting-gap-mobile);
      margin-bottom: var(--loading-greeting-margin-bottom-mobile);
      color: var(--loading-greeting-color-mobile);
    }
    
    html.is-mobile .loading-message {
      font-size: var(--loading-message-font-mobile);
      margin-bottom: var(--loading-message-margin-bottom-mobile);
      color: var(--loading-message-color-mobile);
    }
    
    html.is-mobile .loading-fact {
      font-size: var(--loading-fact-font-mobile);
      margin: var(--loading-fact-margin-mobile);
      padding: var(--loading-fact-padding-mobile);
      background: var(--loading-fact-background-color-mobile);
      border-radius: var(--loading-fact-border-radius-mobile);
      color: var(--loading-fact-color-mobile);
    }

    html.is-mobile .spinner {
      width: var(--loading-spinner-size-mobile);
      height: var(--loading-spinner-size-mobile);
      border: var(--loading-spinner-border-width-mobile) solid var(--loading-spinner-border-main-color-mobile);
      border-top: var(--loading-spinner-border-width-mobile) solid var(--loading-spinner-border-top-color-mobile);
      margin: 0 auto var(--loading-spinner-margin-bottom-mobile);
    }
    
    html.is-mobile .progress-text {
      font-size: var(--loading-progress-font-mobile);
      color: var(--loading-progress-color-mobile);
    }
    
    /* Main Content Styles - נעתק מviews.html */
    * {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    
        /* הגדרות בסיס */
    * {
      -webkit-text-size-adjust: 100%;
      text-size-adjust: 100%;
    }
    
    body { 
      font-family: "Heebo", Arial, sans-serif; 
      margin: 0; 
      padding: 20px; 
      line-height: var(--text-line-height-desktop); 
      background-color: var(--body-background-color-desktop);
    }
    
    .container {
      max-width: 800px;
      margin: 0 auto;
      background: var(--container-background-color-desktop);
      border-radius: 12px;
      padding: var(--container-padding-horizontal-desktop);
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
    }
    
    .main-title {
      font-size: var(--main-title-font-desktop);
      font-weight: 600;
      text-align: center;
      margin: 0 0 var(--title-to-date-gap-desktop);
      color: var(--main-title-color-desktop);
    }

    .main-logo {
      display: block;
      margin: 0 auto var(--title-to-date-gap-desktop);
      max-width: 180px;
      height: auto;
    }
    
    .greeting { 
      font-size: var(--greeting-font-desktop); 
      text-align: right;
      margin-bottom: var(--greeting-to-messages-gap-desktop);
      color: var(--greeting-color-desktop);
    }
    
.greeting-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 15px;
  flex-wrap: nowrap;
  margin-bottom: 10px;
}

.greeting-text {
  font-size: var(--greeting-font-desktop);
  color: var(--greeting-color-desktop);
  white-space: nowrap;
}

.points-with-items {
  display: flex;
  align-items: center;
  flex-shrink: 0;
}

.points-and-rewards-text {
  font-size: 1.1rem;
  color: var(--greeting-color-desktop);
  white-space: nowrap;
}

/* שורה 2 - עידוד וקישור */
.encouragement-row {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  justify-content: flex-end;
}

.encouragement-text {
  font-size: 1rem;
  color: #555555;
}

.points-link {
  font-size: 0.9rem;
  color: #3498db;
  text-decoration: none;
  white-space: nowrap;
  transition: color 0.3s;
}

.points-link:hover {
  color: #2980b9;
  text-decoration: underline;
}

/* שורה 3 - שורה נוספת */
.extra-line-row {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  justify-content: flex-end;
}

.extra-line-text {
  font-size: 1rem;
  color: #555555;
}

/* מובייל */
html.is-mobile .greeting-text {
  font-size: var(--greeting-font-mobile);
}

html.is-mobile .points-and-rewards-text {
  font-size: 1.8rem;
}

html.is-mobile .encouragement-text {
  font-size: 1.6rem;
}

html.is-mobile .points-link {
  font-size: 1.6rem;
}

html.is-mobile .extra-line-text {
  font-size: 1.6rem;
}

    .hebrew-date {
      font-size: var(--hebrew-date-font-desktop);
      text-align: center;
      margin-bottom: var(--date-to-events-gap-desktop);
      color: var(--hebrew-date-color-desktop);
    }
    
    .events-section {
  margin-bottom: var(--events-to-greeting-gap-desktop);
}

.events-line {
  font-size: var(--events-font-desktop);
  text-align: center;
  margin-bottom: 4px;
  color: var(--events-color-desktop);
}

.events-line:last-child {
  margin-bottom: 0;
}
    
    .messages-section {
      margin-bottom: var(--messages-to-content-gap-desktop);
    }
    
    .message {
      background: var(--message-card-background-color-desktop);
      border: 1px solid #e0e0e0;
      border-radius: 12px;
      padding: var(--message-card-padding-vertical-desktop) var(--message-card-padding-horizontal-desktop);
      margin: var(--message-cards-gap-desktop) 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      font-size: var(--message-font-desktop);
      color: var(--message-color-desktop);
    }
    
    .content-section {
      margin-bottom: 30px;
    }
    
    .topic-title {
      font-size: var(--topic-title-font-desktop);
      font-weight: 600;
      margin: 30px 0 0 0;
      padding: 0;
      color: var(--topic-title-color-desktop);
      text-align: right;
    }
    
    .subtopic-title {
      font-size: var(--subtopic-title-font-desktop);
      font-weight: 400;
      margin: var(--topic-to-subtopic-gap-desktop) 0 var(--subtitle-to-item-gap-desktop) 0;
      padding: 0;
      color: var(--subtopic-title-color-desktop);
      text-align: right;
      padding-right: 15px;
    }
    .subtopic-title + .item-card,
    .subtopic-title + .fold-group-card,
    .subtopic-title + .fold-summary-card,
    .subtopic-title + .fold-content > .item-card:first-child,
    .subtopic-title + .fold-content > .fold-group-card:first-child {
      margin-top: 0;
    }

    .item-card {
      background: var(--exercise-card-background-color-desktop);
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: var(--exercise-card-padding-vertical-desktop) var(--exercise-card-padding-horizontal-desktop);
      margin: var(--exercise-cards-gap-desktop) 0;
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 1.3;
    }
    
    /* רקע אפור בהיר לחומרים (לא תרגילים) */
.item-card.material-item {
  background: #e2e3e5;
}
html.is-mobile .item-card.material-item {
  background: #e2e3e5;
}
    .item-left {
      display: flex;
      align-items: center;
      gap: var(--icon-to-text-gap-desktop);
    }
    
    .item-icon {
      font-size: var(--item-icon-font-desktop);
      color: var(--item-icon-color-desktop);
    }
    
    .item-name {
      font-weight: 500;
      font-size: var(--item-name-font-desktop);
      line-height: 1.05;
    }
    
    .item-name a {
      text-decoration: none;
      color: var(--item-name-color-desktop);
    }
    
    .item-name a:hover {
      text-decoration: underline;
    }
    
    .item-right {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: var(--item-dates-font-desktop);
    }
    
    .item-dates {
      color: var(--item-dates-color-desktop);
      order: 0;
    }
    
    .item-stats.desktop-only {
      color: var(--item-stats-color-desktop);
      font-weight: 500;
      font-size: var(--item-stats-font-desktop);
      order: 2;
      white-space: nowrap;
    }
    
    .item-min-row {
      font-size: var(--min-submissions-font-desktop);
      color: var(--min-submissions-color-desktop);
      text-align: center;
      order: 1;
      white-space: nowrap;
    }
    
    .item-stats .sub-count.submissions-met,
    .mobile-only-minsub .sub-count.submissions-met {
      color: var(--submissions-met-color-desktop) !important;
      font-weight: 600;
    }

    .item-stats .sub-count.submissions-not-met,
    .mobile-only-minsub .sub-count.submissions-not-met {
      color: var(--submissions-not-met-color-desktop) !important;
      font-weight: 600;
    }
    
    .no-items {
      text-align: center;
      color: #7f8c8d;
      font-style: italic;
      margin: 20px 0;
    }
    
    /* ============ CSS קיפול - דסקטופ ============ */
    
    /* כפתור פתח/סגור הכל */
    .fold-all-controls {
      text-align: left;
      margin: 10px 0;
    }
    .fold-all-btn {
      background: none;
      border: 1px solid #ccc;
      border-radius: 8px;
      padding: 4px 12px;
      font-size: 0.85rem;
      color: #666;
      cursor: pointer;
    }
    .fold-all-btn:hover {
      background: #f0f0f0;
    }
    
    /* חץ קיפול */
    .fold-arrow {
      display: inline-block;
      font-size: 0.9em;
      transition: transform 0.2s ease;
      margin-left: 5px;
      color: #888;
      font-style: normal;
    }
    .fold-arrow.closed {
      transform: rotate(0deg);
    }
    .fold-arrow.open {
      transform: rotate(180deg);
    }
    
    /* נושא מתקפל */
    .topic-title.foldable {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .topic-title.foldable:active {
      opacity: 0.8;
    }
    
    /* תת-נושא מתקפל */
    .subtopic-title.foldable {
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
    .subtopic-title.foldable:active {
      opacity: 0.8;
    }
    
    /* כרטיס סיכום מתחת לנושא/תת-נושא סגור */
    .fold-summary-card {
      position: relative;
      cursor: pointer;
      margin-bottom: 14px;
      margin: var(--exercise-cards-gap-desktop) 0;
    }
    .fold-summary-card .fold-summary-header {
      background: var(--exercise-card-background-color-desktop);
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: var(--exercise-card-padding-vertical-desktop) var(--exercise-card-padding-horizontal-desktop);
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: flex-end;
      line-height: 1.3;
      position: relative;
      z-index: 2;
    }
    .fold-summary-stats {
      font-size: var(--item-stats-font-desktop);
      font-weight: 500;
      color: #666;
    }
    /* ערימה מתחת לכרטיס הסיכום */
    .fold-summary-card::before,
    .fold-summary-card::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid #d0d0d0;
      border-radius: 6px;
      background: #fafafa;
    }
    .fold-summary-card::after {
      top: 8px;
      right: 8px;
      left: auto;
      background: #f0f0f0;
      z-index: 0;
    }
    .fold-summary-card::before {
      top: 4px;
      right: 4px;
      left: auto;
      background: #f5f5f5;
      z-index: 1;
    }
    
    /* תוכן מתקפל */
    .fold-content {
      overflow: hidden;
      transition: max-height 0.3s ease;
    }
    .fold-content.collapsed {
      max-height: 0 !important;
      margin: 0;
      padding: 0;
    }
    
    .fold-summary-card.collapsed {
      display: none;
    }
    
    /* קבוצת קיפול מותאמת (ערימת כרטיסים) */
    .fold-group-card {
      position: relative;
      cursor: pointer;
      margin: var(--exercise-cards-gap-desktop) 0;
    }
    .fold-group-card:hover {
      opacity: 0.95;
    }
    
    /* אפקט ערימה - כרטיסים מציצים מתחת לכרטיס הראשי, מוסטים למטה ושמאלה */
    .fold-group-card.collapsed {
      position: relative;
      margin-bottom: 14px;
    }
    .fold-group-card.collapsed::before,
    .fold-group-card.collapsed::after {
      content: '';
      position: absolute;
      width: 100%;
      height: 100%;
      border: 1px solid #d0d0d0;
      border-radius: 6px;
      background: #fafafa;
    }
    /* כרטיס תחתון - הכי למטה ומוסט שמאלה */
    .fold-group-card.collapsed::after {
      top: 8px;
      right: 8px;
      left: auto;
      background: #f0f0f0;
      z-index: 0;
    }
    /* כרטיס אמצעי */
    .fold-group-card.collapsed::before {
      top: 4px;
      right: 4px;
      left: auto;
      background: #f5f5f5;
      z-index: 1;
    }
    
    /* הכרטיס הראשי (העליון) - הטקסט עליו */
    .fold-group-header {
      background: var(--exercise-card-background-color-desktop);
      border: 1px solid #e0e0e0;
      border-radius: 6px;
      padding: var(--exercise-card-padding-vertical-desktop) var(--exercise-card-padding-horizontal-desktop);
      box-shadow: 0 2px 4px rgba(0,0,0,0.05);
      display: flex;
      align-items: center;
      justify-content: space-between;
      line-height: 1.3;
      position: relative;
      z-index: 2;
    }
    
    .fold-group-name {
      font-weight: 500;
      font-size: var(--item-name-font-desktop);
      color: #555;
      display: flex;
      align-items: center;
      gap: 6px;
    }
    
    .fold-emoji {
      font-size: 18px;
      line-height: 1;
      display: inline-block;
      vertical-align: middle;
      color: #2980b9;
      font-weight: bold;
    }
    
    .fold-group-stats {
      display: flex;
      align-items: center;
      gap: 12px;
      font-size: var(--item-stats-font-desktop);
      font-weight: 500;
      white-space: nowrap;
    }
    
    .fold-group-missing {
      font-size: var(--min-submissions-font-desktop);
      color: var(--min-submissions-color-desktop);
    }
    
    /* מינימום קבוצתי על כרטיס קבוצת קיפול - דסקטופ */
    .fold-group-min-target {
      font-size: var(--min-submissions-font-desktop);
      color: var(--min-submissions-color-desktop);
      white-space: nowrap;
    }
    .fold-group-met {
      color: #333;
      font-size: var(--item-stats-font-desktop);
      font-weight: 500;
    }
    .fold-group-personal-info {
      font-size: var(--item-stats-font-desktop);
      font-weight: 500;
      white-space: nowrap;
    }
    /* חץ בצד שמאל של שורת השם — מוסתר בדסקטופ */
    .fold-emoji-name-end {
      display: none;
    }

    /* תוכן פנימי של קבוצת קיפול */
    .fold-group-items {
      overflow: hidden;
      transition: max-height 0.3s ease;
      padding-right: 15px;
    }
    .fold-group-items.collapsed {
      max-height: 0 !important;
      margin: 0;
      padding: 0;
    }

    /* הסתר mobile-only במחשב */
    .mobile-only {
      display: none;
    }

    /* הסתר mobile-only-minsub במחשב */
    .mobile-only-minsub {
      display: none;
    }
    
    /* הגדרות מובייל */
    html.is-mobile body {
      background-color: var(--body-background-color-mobile);
      padding: 0;
      line-height: var(--text-line-height-mobile);
    }
    
    html.is-mobile .container {
      padding: var(--container-padding-horizontal-mobile);
      border-radius: 0;
      box-shadow: none;
      max-width: none;
      margin: 0;
      background: var(--container-background-color-mobile);
    }
    
    html.is-mobile .main-logo {
      max-width: 40%;
      margin-bottom: 4px;
    }

    html.is-mobile .main-title {
      font-size: var(--main-title-font-mobile);
      color: var(--main-title-color-mobile);
      margin: 0 0 var(--title-to-date-gap-mobile);
    }
    /* כללי CSS לשורות התפילה - מובייל */
    html.is-mobile .prayer-line {
      font-size: var(--loading-prayer-font-mobile);         /* גודל פונט רגיל במובייל */
      margin-bottom: var(--loading-prayer-line-spacing-mobile); /* מרווח בין שורות במובייל */
      text-shadow: var(--loading-text-shadow-mobile);       /* צללית במובייל */
      color: var(--loading-title-color-mobile);             /* צבע טקסט במובייל */
    }
    
    html.is-mobile .prayer-line.main-prayer {
      font-size: var(--loading-main-prayer-font-mobile);    /* גודל מיוחד לשורה המרכזית במובייל */
    }

    html.is-mobile .greeting {
      font-size: var(--greeting-font-mobile);
      color: var(--greeting-color-mobile);
      margin-bottom: var(--greeting-to-messages-gap-mobile);
    }
    
    html.is-mobile .hebrew-date {
      font-size: var(--hebrew-date-font-mobile);
      color: var(--hebrew-date-color-mobile);
      margin-bottom: var(--date-to-events-gap-mobile);
    }
    
    html.is-mobile .events-section {
  margin-bottom: var(--events-to-greeting-gap-mobile);
}

html.is-mobile .events-line {
  font-size: var(--events-font-mobile);
  color: var(--events-color-mobile);
  margin-bottom: 4px;
}

html.is-mobile .events-line:last-child {
  margin-bottom: 0;
}
    
    html.is-mobile .message {
      font-size: var(--message-font-mobile);
      padding: var(--message-card-padding-vertical-mobile) var(--message-card-padding-horizontal-mobile);
      background: var(--message-card-background-color-mobile);
      color: var(--message-color-mobile);
      margin: var(--message-cards-gap-mobile) 0;
    }
    
    html.is-mobile .messages-section {
      margin-bottom: var(--messages-to-content-gap-mobile);
    }
    
    html.is-mobile .topic-title {
      font-size: var(--topic-title-font-mobile);
      color: var(--topic-title-color-mobile);
      margin: 8px 0 var(--topic-to-subtopic-gap-mobile) 0;
      text-align: right;
    }
    
    html.is-mobile .subtopic-title {
      font-size: var(--subtopic-title-font-mobile);
      color: var(--subtopic-title-color-mobile);
      margin: var(--topic-to-subtopic-gap-mobile) 0 var(--subtitle-to-item-gap-mobile) 0;
      text-align: right;
      padding-right: 6px;
    }
    
    html.is-mobile .item-card {
      flex-direction: column;
      align-items: stretch;
      gap: 0px;
      padding: var(--exercise-card-padding-vertical-mobile) var(--exercise-card-padding-horizontal-mobile);
      margin: var(--exercise-cards-gap-mobile) 0;
      background: var(--exercise-card-background-color-mobile);
    }
    
    html.is-mobile .item-card.has-min-sub {
      padding-top: 4px;
      padding-bottom: 4px;
    }

    html.is-mobile .item-left {
      display: flex;
      align-items: center;
      justify-content: flex-start;
      width: 100%;
      margin-bottom: 0;
      gap: var(--icon-to-text-gap-mobile);
    }
    
    html.is-mobile .item-icon {
      font-size: var(--item-icon-font-mobile);
      color: var(--item-icon-color-mobile);
      flex-shrink: 0;
    }
    
    html.is-mobile .item-name {
      font-size: var(--item-name-font-mobile);
      line-height: 1;
      font-weight: 600;
      text-align: right;
      flex-grow: 1;
    }
    
    html.is-mobile .item-name a {
      color: var(--item-name-color-mobile);
      text-decoration: none;
    }
    
    html.is-mobile .item-left .item-stats {
      font-size: var(--item-stats-font-mobile);
      color: var(--item-stats-color-mobile);
      font-weight: 400;
      text-align: left;
      flex-shrink: 0;
    }
    
    html.is-mobile .item-min-row {
      font-size: var(--min-submissions-font-mobile);
      color: var(--min-submissions-color-mobile);
      text-align: left;
      display: block;
      width: 100%;
      padding-left: 0;
    }
    
    html.is-mobile .item-stats .sub-count.submissions-met,
    html.is-mobile .mobile-only-minsub .sub-count.submissions-met {
      color: var(--submissions-met-color-mobile) !important;
    }

    html.is-mobile .item-stats .sub-count.submissions-not-met,
    html.is-mobile .mobile-only-minsub .sub-count.submissions-not-met {
      color: var(--submissions-not-met-color-mobile) !important;
    }
    
    html.is-mobile .item-dates {
      text-align: right;
      font-size: var(--item-dates-font-mobile);
      color: var(--item-dates-color-mobile);
    }
    
    html.is-mobile .item-dates:empty {
      display: none;
    }
    
    html.is-mobile .item-right {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: flex-start;
      direction: ltr;
      gap: 4px;
      width: 100%;
      margin-top: -2px;
    }
    
    html.is-mobile .desktop-only {
      display: none;
    }
    
    html.is-mobile .mobile-only {
      display: block;
    }

    html.is-mobile .mobile-only-minsub {
      display: inline;
      font-size: var(--item-stats-font-mobile);
      color: var(--item-stats-color-mobile);
      font-weight: 400;
    }

    html.is-mobile .fold-emoji {
      font-size: 16px;
    }

    /* ============ CSS קיפול - מובייל ============ */
    
    html.is-mobile .fold-all-controls {
      text-align: left;
      margin: 8px 0;
    }
    html.is-mobile .fold-all-btn {
      font-size: 1.3rem;
      padding: 6px 16px;
    }
    html.is-mobile .fold-all-arrow {
      font-size: 2em;
      vertical-align: middle;
      line-height: 0.5;
    }
    
    /* כרטיס סיכום מתחת לנושא/תת-נושא - מובייל */
    html.is-mobile .fold-summary-card {
      margin: var(--exercise-cards-gap-mobile) 0;
      margin-bottom: 14px;
    }
    html.is-mobile .fold-summary-card .fold-summary-header {
      padding: var(--exercise-card-padding-vertical-mobile) var(--exercise-card-padding-horizontal-mobile);
      background: var(--exercise-card-background-color-mobile);
    }
    html.is-mobile .fold-summary-stats {
      font-size: var(--item-stats-font-mobile);
    }
    
    /* קבוצת קיפול - מובייל */
    html.is-mobile .fold-group-card {
      margin: var(--exercise-cards-gap-mobile) 0;
    }
    html.is-mobile .fold-group-card.collapsed {
      margin-bottom: 14px;
      margin-left: 10px;
    }
    html.is-mobile .fold-group-header {
      padding: var(--exercise-card-padding-vertical-mobile) var(--exercise-card-padding-horizontal-mobile);
      background: var(--exercise-card-background-color-mobile);
    }
    html.is-mobile .fold-group-name {
      font-size: var(--item-name-font-mobile);
      font-weight: 600;
    }
    html.is-mobile .fold-group-stats {
      font-size: var(--item-stats-font-mobile);
      font-weight: 400;
      justify-content: flex-start;
      margin-top: -2px;
    }
    html.is-mobile .fold-group-missing {
      font-size: var(--min-submissions-font-mobile);
      color: var(--min-submissions-color-mobile);
      text-align: right;
    }

    /* מינימום קבוצתי על כרטיס קבוצת קיפול - מובייל */
    html.is-mobile .fold-group-card.has-group-min .fold-group-header {
      display: grid;
      grid-template-columns: auto minmax(0, 1fr) auto;
      grid-template-areas:
        "arrow-r name arrow-l"
        "target target target"
        "personal personal personal";
      column-gap: 6px;
      row-gap: 1px;
      padding-top: 4px;
      padding-bottom: 4px;
    }
    html.is-mobile .fold-group-card.has-group-min .fold-group-header > .fg-arrow {
      grid-area: arrow-r;
      align-self: center;
      margin: 0;
    }
    html.is-mobile .fold-group-card.has-group-min .fold-group-name {
      grid-area: name;
      width: auto;
      min-width: 0;
      padding-inline-start: 2px;
    }
    html.is-mobile .fold-group-card.has-group-min .fold-group-stats {
      display: contents;
      width: auto;
      margin: 0;
    }
    html.is-mobile .fold-group-card.has-group-min .fold-group-stats > .fg-arrow {
      grid-area: arrow-l;
      align-self: center;
      margin: 0;
    }
    html.is-mobile .fold-group-card.has-group-min .fold-group-min-target {
      grid-area: target;
      text-align: right;
    }
    html.is-mobile .fold-group-card.has-group-min .fold-group-personal-info {
      grid-area: personal;
      text-align: right;
    }
    html.is-mobile .fold-group-min-target {
      font-size: var(--min-submissions-font-mobile);
      color: var(--min-submissions-color-mobile);
    }
    html.is-mobile .fold-group-met {
      color: #333;
      font-size: var(--item-stats-font-mobile);
      font-weight: 400;
    }
    html.is-mobile .fold-group-personal-info {
      font-size: var(--item-stats-font-mobile);
      font-weight: 400;
    }

    html.is-mobile .fold-group-items {
      padding-right: 6px;
    }

    /* CSS למסך החסימה */
.blocking-title {
  font-size: var(--loading-title-font-desktop);
  font-weight: 600;
  margin-bottom: var(--loading-title-margin-bottom-desktop);
  text-shadow: var(--loading-text-shadow-desktop);
  color: var(--loading-title-color-desktop);
  text-align: center;
}

html.is-mobile .blocking-title {
  font-size: var(--loading-title-font-mobile);
  margin-bottom: var(--loading-title-margin-bottom-mobile);
  text-shadow: var(--loading-text-shadow-mobile);
  color: var(--loading-title-color-mobile);
}

/* סגנון להודעה מיוחדת עם קוד להעתקה */
    .special-notice {
      background: linear-gradient(135deg, #67A516 0%, #5A9012 100%);
      color: white;
      padding: 12px 20px;
      border-radius: 12px;
      margin: 0;
      box-shadow: 0 4px 15px rgba(103, 165, 22, 0.3);
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 15px;
      flex-wrap: nowrap;
    }
    
    .special-notice-title {
      font-size: 0.95rem;
      font-weight: 600;
      text-align: right;
      white-space: nowrap;
      flex-shrink: 0;
      margin: 0;
    }
    
    .code-container {
      display: flex;
      align-items: center;
      flex-shrink: 0;
    }
    
    .code-box {
      background: rgba(255, 255, 255, 0.95);
      color: #2c3e50;
      padding: 8px 12px;
      border-radius: 8px;
      box-shadow: 0 2px 8px rgba(0,0,0,0.1);
      display: flex;
      align-items: center;
      gap: 10px;
    }
    
    .code-text {
      font-family: 'Courier New', monospace;
      font-size: 1rem;
      font-weight: bold;
      letter-spacing: 0.5px;
      direction: ltr;
      white-space: nowrap;
    }
    
    .copy-button {
      background: #4D7D10;
      color: white;
      border: none;
      padding: 6px 14px;
      border-radius: 6px;
      cursor: pointer;
      font-size: 0.85rem;
      font-weight: 600;
      transition: all 0.3s ease;
      white-space: nowrap;
      flex-shrink: 0;
    }
    
    .copy-button:hover {
      background: #3D6A0D;
      transform: scale(1.05);
    }
    
    .copy-button:active {
      transform: scale(0.98);
    }
    
    .copy-button.copied {
      background: #27ae60;
    }
    
    .notice-footer {
      font-size: 0.9rem;
      margin-top: 0;
      text-align: center;
      font-style: italic;
      opacity: 0.9;
    }
    
    .no-code-message {
      background: #fff3cd;
      color: #856404;
      padding: 15px;
      border-radius: 8px;
      text-align: center;
      margin: 15px 0 25px 0;
      border: 2px solid #ffc107;
    }
    
    html.is-mobile .special-notice-title {
      font-size: 1.9rem;
    }
    
    html.is-mobile .special-notice {
      flex-wrap: nowrap;
      gap: 8px;
      padding: 10px 12px;
    }
    
    html.is-mobile .special-notice-title {
      font-size: 1.7rem;
      white-space: nowrap;
    }
    
    html.is-mobile .code-box {
      padding: 8px 12px;
      gap: 8px;
    }
    
    html.is-mobile .code-text {
      font-size: 1.6rem;
    }
    
    html.is-mobile .copy-button {
      font-size: 1.4rem;
      padding: 6px 12px;
    }
    
    html.is-mobile .notice-footer {
      font-size: 1.6rem;
    }

/* Sidebar - פאנל בצד למידע על נקודות */
.sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  z-index: 9999;
  animation: fadeIn 0.3s ease;
}

.sidebar-overlay.show {
  display: block;
}

.sidebar-panel {
  position: fixed;
  top: 0;
  left: -600px;
  width: 600px;
  height: 100%;
  background: white;
  box-shadow: 2px 0 15px rgba(0, 0, 0, 0.3);
  transition: left 0.3s ease;
  z-index: 10000;
}

.sidebar-overlay.show .sidebar-panel {
  left: 0;
}

.sidebar-header {
  background: linear-gradient(135deg, #2D7A66 0%, #49A88C 100%);
  color: white;
  padding: 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sidebar-title {
  font-size: 1.4rem;
  font-weight: 600;
}

.sidebar-close {
  background: rgba(255, 255, 255, 0.2);
  border: none;
  color: white;
  font-size: 28px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.sidebar-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: rotate(90deg);
}

.sidebar-content {
  height: calc(100% - 80px);
  overflow: hidden;
}

.sidebar-iframe {
  width: 100%;
  height: 100%;
  border: none;
}

@keyframes fadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}

/* מובייל - Sidebar תופס את כל המסך */
html.is-mobile .sidebar-panel {
  left: -100%;
  width: 100%;
}

html.is-mobile .sidebar-overlay.show .sidebar-panel {
  left: 0;
}

html.is-mobile .sidebar-title {
  font-size: 1.6rem;
}

html.is-mobile .sidebar-close {
  font-size: 32px;
  width: 45px;
  height: 45px;
}

html.is-mobile .no-code-message {
      font-size: 1.9rem;
    }

/* במובייל - הכפתור קרוב יותר */
html.is-mobile .greeting-text {
  margin-bottom: 0 !important;
}
html.is-mobile .greeting-row {
  margin-bottom: 0;
}

/* הזזת הכפתור קצת שמאלה במחשב בלבד */
.feedback-btn-desktop {
  margin-left: 150px;
}

/* במובייל - בלי הזזה, נשאר בדיוק כמו שהוא */
html.is-mobile .feedback-btn-desktop {
  margin-left: 0;
}

/* אנימציה עדינה לכפתור */
@keyframes gentle-pulse {
  0%, 100% {
    transform: scale(1);
  }
  50% {
    transform: scale(1.02);
  }
}

/* הכפתור מקבל אנימציה עדינה */
a[href*="view=feedback"] {
  animation: gentle-pulse 3s ease-in-out infinite;
}

/* כשעוברים עליו בעכבר, האנימציה נעצרת */
a[href*="view=feedback"]:hover {
  animation: none;
}

/* ======= הודעה קופצת (popup) ======= */
    .popup-overlay {
      display: none;
      position: fixed;
      top: 0; left: 0; right: 0; bottom: 0;
      background: rgba(0,0,0,0.5);
      z-index: 9999;
      justify-content: center;
      align-items: center;
    }
    .popup-overlay.active {
      display: flex;
    }
    .popup-box {
      background: #fff;
      border-radius: 16px;
      padding: 30px 25px 20px;
      max-width: 500px;
      width: 90%;
      box-shadow: 0 8px 32px rgba(0,0,0,0.25);
      text-align: center;
      animation: popupIn 0.3s ease;
      direction: rtl;
    }
    @keyframes popupIn {
      from { opacity: 0; transform: scale(0.9); }
      to   { opacity: 1; transform: scale(1); }
    }
    .popup-content {
      font-size: 1.1rem;
      line-height: 1.7;
      margin-bottom: 25px;
      color: #333;
    }
    .popup-buttons {
      display: flex;
      gap: 12px;
      justify-content: center;
      flex-wrap: wrap;
    }
    .popup-btn {
      padding: 12px 28px;
      border: none;
      border-radius: 12px;
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.15s;
      font-family: inherit;
      font-weight: 600;
      box-shadow: 0 4px 0 rgba(0,0,0,0.2), 0 2px 8px rgba(0,0,0,0.1);
      position: relative;
      top: 0;
    }
    .popup-btn:hover {
      top: -2px;
      box-shadow: 0 6px 0 rgba(0,0,0,0.2), 0 4px 12px rgba(0,0,0,0.15);
    }
    .popup-btn:active {
      top: 3px;
      box-shadow: 0 1px 0 rgba(0,0,0,0.2), 0 1px 4px rgba(0,0,0,0.1);
    }
    .popup-btn-understood {
      background: #5B9BD5;
      color: white;
      box-shadow: 0 4px 0 #3A7BBD, 0 2px 8px rgba(0,0,0,0.1);
    }
    .popup-btn-understood:active {
      box-shadow: 0 1px 0 #3A7BBD, 0 1px 4px rgba(0,0,0,0.1);
    }
    .popup-btn-remind {
      background: #E8A94E;
      color: white;
      box-shadow: 0 4px 0 #C4882E, 0 2px 8px rgba(0,0,0,0.1);
    }
    .popup-btn-remind:active {
      box-shadow: 0 1px 0 #C4882E, 0 1px 4px rgba(0,0,0,0.1);
    }
    /* מובייל */
    html.is-mobile .popup-box {
      padding: 40px 30px 30px;
      border-radius: 20px;
      max-width: 95%;
    }
    html.is-mobile .popup-content {
      font-size: 3rem;
      line-height: 1.8;
      margin-bottom: 35px;  
    }
    html.is-mobile .popup-buttons {
      gap: 16px;
    }
    html.is-mobile .popup-btn {
      font-size: 1.8rem;
      padding: 18px 36px;
      border-radius: 14px;
    }

/* ===== תיקוני תצוגה חדשה ===== */

/* חיצים בקבוצות קיפול — גדולים ושווים בשני הצדדים */
/* שימוש ב-rem/px כדי שהגודל לא יושפע מ-font-size של ה-parent (fold-group-stats קטן מ-header) */
.fg-arrow {
  font-size: 1.3rem;
  flex-shrink: 0;
  line-height: 1;
}
html.is-mobile .fg-arrow {
  font-size: 4rem;
}

/* שם קבוצת קיפול — ימינה (לא ממורכז) */
.fold-group-header {
  justify-content: flex-start;
}
.fold-group-stats {
  margin-right: auto;
  margin-left: 0;
}

/* תיקון ערימה — מרווח שמאלי כדי שהכרטיסים המדומים לא ייחתכו */
.fold-group-card.collapsed {
  margin-left: 10px;
}
.fold-summary-card {
  margin-left: 10px;
}

/* =====================================================
   באנר סטטיסטיקות + Stats Sidebar
   ===================================================== */

@keyframes statsGradT {
  0%   { background-position: 0% 50% }
  50%  { background-position: 100% 50% }
  100% { background-position: 0% 50% }
}
@keyframes statsBars {
  0%, 100% { height: 8px }
  50%       { height: 18px }
}

.stats-banner {
  background: linear-gradient(270deg, #2D7A66, #49A88C, #7CC4AD, #2D7A66);
  background-size: 400% 400%;
  animation: statsGradT 20s ease infinite;
  border-radius: 12px;
  padding: 13px 18px;
  color: #fff;
  cursor: pointer;
  margin: 12px 0 4px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 15px;
  font-weight: 500;
  transition: transform 0.15s, box-shadow 0.15s;
  user-select: none;
}
.stats-banner:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
}
.stats-banner:active { transform: translateY(0); }

/* קישורים בסיידבר — צבע תואם לבאנר */
.stats-link { color: #2D7A66; }
html.is-mobile .stats-link { color: #0D5E78; }

@keyframes bannerArrowPulse {
  0%, 100% { opacity: 0.4; }
  50% { opacity: 1; }
}
.banner-arrow {
  animation: bannerArrowPulse 2.5s ease-in-out infinite;
}

/* Stats sidebar — רוחב גדול יותר */
.stats-sidebar-panel {
  width: min(820px, 100vw) !important;
  display: flex;
  flex-direction: column;
  height: 100%;
}

/* לשוניות */
.stats-tab {
  cursor: pointer;
  font-size: 13px;
  padding: 10px 14px;
  color: #999;
  transition: color 0.15s;
  white-space: nowrap;
  background: transparent;
  border: none;
  position: relative;
  font-family: inherit;
  flex-shrink: 0;
}
.stats-tab:hover:not(.on) { color: #666; }
.stats-tab.on { color: #1D9E75; font-weight: 500; background: #fff; }
.stats-tab.on::after {
  content: '';
  position: absolute;
  bottom: 0; right: 0; left: 0;
  height: 3px;
  background: #1D9E75;
  border-radius: 2px 2px 0 0;
}

/* אזור התוכן */
.stats-pw {
  padding: 18px;
  overflow-y: auto;
  flex: 1;
  font-family: 'Rubik', Arial, sans-serif;
  direction: rtl;
}
.stats-pn { display: none; }
.stats-pn.on { display: block; }

/* גריד לשונית הגשות */
.stats-sub-grid {
  display: grid;
  grid-template-columns: 1fr 220px;
  gap: 24px;
}
.stats-donut-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  border-right: 0.5px solid #e0e0e0;
  padding-right: 20px;
  padding-top: 8px;
}

/* גריד גרפים */
.stats-charts-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
}
.stats-chart-right {
  border-right: 0.5px solid #e0e0e0;
  padding-right: 24px;
}

/* אזור קוביות רשות — מקסימום 14 בשורה, ממורכז, ללא גלילה */
#stats-cubeGrid {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  max-width: 666px;
  margin: 0 auto;
  justify-content: center;
  scrollbar-width: thin;
  padding-top: 6px;
  justify-content: center;
}

/* קוביות רשות */
.stats-cube {
  width: 42px; height: 42px;
  border-radius: 10px;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  cursor: pointer;
  transition: transform 0.15s;
  position: relative;
  flex-shrink: 0;
}
.stats-cube:hover { transform: scale(1.1); }
.stats-cube-tip {
  display: none;
  position: absolute;
  bottom: 110%; left: 50%;
  transform: translateX(-50%);
  background: #444; color: #eee;
  font-size: 11px; padding: 4px 8px;
  border-radius: 8px; white-space: nowrap;
  z-index: 10;
  pointer-events: none;
}
.stats-cube:hover .stats-cube-tip { display: block; }

/* קוביות בקצה הימני בכל שורה (RTL) — tooltip נפתח שמאלה */
.stats-cube.cube-row-first .stats-cube-tip {
  left: auto; right: 0;
  transform: none;
}
/* קוביות בקצה השמאלי בכל שורה (RTL) — tooltip נפתח ימינה */
.stats-cube.cube-row-last .stats-cube-tip {
  left: 0; right: auto;
  transform: none;
}

/* לשונית ניקוד — שם והסבר באותה שורה במחשב */
.stats-points-info {
  display: flex;
  align-items: baseline;
  gap: 0;
  flex-wrap: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* שבירת שורה מובייל בלבד בבאנר/סיידבר */
.mbr { display: none; }
html.is-mobile .mbr { display: block; }

/* מובייל — באנר + סיידבר סטטיסטיקות */
html.is-mobile .stats-banner {
  font-size: 15px;
  padding: 10px 14px;
  border-radius: 14px;
  margin: 4px 0 6px;
  background: linear-gradient(135deg, #0D5E78 0%, #1B8EA8 50%, #5AC0D5 100%);
  height: 56px;
  box-sizing: border-box;
  overflow: hidden;
}
html.is-mobile .stats-banner #statsBannerText {
  line-height: 1.3;
  padding-inline-start: 1.4em;
  text-indent: -1.4em;
  display: inline-block;
}

html.is-mobile .stats-sidebar-panel {
  width: 100% !important;
}
/* כותרת הסיידבר — גובה קבוע למובייל, מונע קפיצה */
html.is-mobile .stats-sidebar-panel > div:first-child {
  background: linear-gradient(270deg, #0D5E78, #1B8EA8, #5AC0D5, #0D5E78) !important;
  background-size: 400% 400% !important;
  height: 56px;
  padding: 10px 14px !important;
  box-sizing: border-box;
  overflow: hidden;
}
html.is-mobile #statsHeaderTitle {
  font-size: 14px !important;
  line-height: 1.3;
  padding-inline-start: 1.4em;
  text-indent: -1.4em;
}
/* X button — תמיד עיגול */
html.is-mobile .stats-sidebar-panel > div:first-child > div:last-child {
  width: 32px !important;
  min-width: 32px;
  height: 32px !important;
  min-height: 32px;
  flex-shrink: 0;
}

html.is-mobile .stats-tab {
  font-size: 12px;
  padding: 12px 6px;
}

html.is-mobile .stats-pw {
  padding: 14px;
  font-size: 14px;
}

html.is-mobile .stats-sub-grid {
  grid-template-columns: 1fr;
}

html.is-mobile .stats-donut-col {
  border-right: none;
  border-top: 2px solid #ccc;
  padding-right: 0;
  padding-top: 4px;
  margin-top: 4px;
  margin-bottom: -12px;
  align-items: flex-start;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 0 14px;
}

html.is-mobile .stats-donut-col > div:first-child {
  margin-bottom: 0 !important;
  white-space: nowrap;
  flex-shrink: 0;
}
html.is-mobile #stats-donutContainer {
  flex-shrink: 0;
}

/* שיאים: br בין שם לטקסט שיחקת — רק במובייל */
.games-mobile-br { display: none; }
html.is-mobile .games-mobile-br { display: block; }

html.is-mobile .stats-charts-grid {
  grid-template-columns: 1fr;
}

html.is-mobile .stats-chart-right {
  border-right: none;
  border-top: 2px solid #ccc;
  padding-right: 0;
  padding-top: 18px;
  margin-top: 18px;
}

html.is-mobile .stats-points-info {
  flex-wrap: wrap;
  white-space: normal;
}

html.is-mobile .stats-points-desc {
  display: block !important;
  width: 100%;
}

html.is-mobile .stats-cube {
  width: 48px;
  height: 48px;
  border-radius: 12px;
}

html.is-mobile #stats-cubeGrid {
  gap: 8px;
  max-width: 100%;
}

/* =====================================================
   AUTH — מסך כניסה + שינוי סיסמה
   ===================================================== */

/* --- מסך כניסה --- */
.login-screen {
  position: fixed;
  inset: 0;
  z-index: 10000;
  display: flex;
  justify-content: center;
  align-items: center;
  background: linear-gradient(135deg, #2D7A66 0%, #49A88C 50%, #7CC4AD 100%);
  background-size: 200% 200%;
  animation: loginGradientShift 10s ease infinite;
}

@keyframes loginGradientShift {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

/* כרטיס כניסה */
.login-card {
  background: rgba(255, 255, 255, 0.97);
  border-radius: 24px;
  padding: 40px 36px 32px;
  width: 400px;
  max-width: 90vw;
  box-shadow: 0 25px 60px rgba(0, 0, 0, 0.2);
  animation: cardFloat 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  position: relative;
  overflow: hidden;
}

@keyframes cardFloat {
  from { opacity: 0; transform: translateY(40px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* אנימציית ניעור בשגיאה */
.login-card.shake {
  animation: cardShake 0.45s ease;
}
@keyframes cardShake {
  0%, 100% { transform: translateX(0); }
  15%  { transform: translateX(-10px); }
  30%  { transform: translateX(8px); }
  45%  { transform: translateX(-6px); }
  60%  { transform: translateX(4px); }
  75%  { transform: translateX(-2px); }
}

/* אנימציית הצלחה */
.login-card.login-success {
  animation: cardSuccess 0.5s ease forwards;
}
@keyframes cardSuccess {
  to { opacity: 0; transform: scale(0.95) translateY(-20px); }
}

/* קו דקורטיבי עליון */
.login-accent {
  height: 4px;
  border-radius: 2px;
  margin-bottom: 30px;
  background: linear-gradient(90deg, #2D7A66, #49A88C, #7CC4AD, #2D7A66);
  background-size: 300% 100%;
  animation: accentGlow 4s linear infinite;
}
@keyframes accentGlow {
  0%   { background-position: 0% 50%; }
  100% { background-position: 300% 50%; }
}

.login-title {
  font-size: 1.6rem;
  font-weight: 700;
  color: #2c3e50;
  text-align: center;
  margin: 0 0 6px;
}

.login-subtitle {
  font-size: 0.95rem;
  color: #999;
  text-align: center;
  margin: 0 0 32px;
  font-weight: 300;
}

/* --- שדות עם floating label --- */
.auth-field {
  position: relative;
  margin-bottom: 22px;
}

.auth-field input {
  width: 100%;
  padding: 20px 16px 8px;
  border: 2px solid #e8e8e8;
  border-radius: 14px;
  font-size: 1rem;
  font-family: inherit;
  background: #fafafa;
  color: #2c3e50;
  box-sizing: border-box;
  transition: border-color 0.3s, background-color 0.3s, box-shadow 0.3s;
  outline: none;
}

.auth-field input:focus {
  border-color: #49A88C;
  background: #fff;
  box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.12);
}

.auth-field label {
  position: absolute;
  right: 18px;
  top: 50%;
  transform: translateY(-50%);
  color: #aaa;
  font-size: 0.95rem;
  font-weight: 400;
  pointer-events: none;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  background: transparent;
  padding: 0 6px;
}

.auth-field input:focus + label,
.auth-field input:not(:placeholder-shown) + label {
  top: 10px;
  transform: translateY(0);
  font-size: 0.72rem;
  color: #49A88C;
  font-weight: 500;
}

/* שדה readonly (שם משתמש בשינוי סיסמה) */
.auth-field input.readonly {
  background: #f0f0f0;
  color: #888;
}

/* שדה עם עין */
.auth-field.has-eye input {
  padding-left: 48px;
}

/* --- אייקון עין --- */
.eye-toggle {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  cursor: pointer;
  color: #bbb;
  transition: color 0.2s;
}
.eye-toggle:hover { color: #49A88C; }
.eye-toggle svg { width: 100%; height: 100%; }
.eye-toggle .eye-closed { display: none; }
.eye-toggle.showing .eye-open { display: none; }
.eye-toggle.showing .eye-closed { display: block; }

/* --- כפתור ראשי --- */
.auth-btn {
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 14px;
  background: linear-gradient(135deg, #49A88C 0%, #2D7A66 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 600;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s, opacity 0.2s;
  position: relative;
  overflow: hidden;
  min-height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
}
.auth-btn:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(102, 126, 234, 0.35);
}
.auth-btn:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.25);
}
.auth-btn:disabled {
  opacity: 0.75;
  cursor: not-allowed;
  transform: none;
}

/* --- ספינר טעינה --- */
.auth-spinner {
  display: inline-block;
  width: 22px;
  height: 22px;
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: authSpin 0.6s linear infinite;
}
.auth-spinner.dark {
  border-color: rgba(102, 126, 234, 0.2);
  border-top-color: #49A88C;
}
@keyframes authSpin {
  to { transform: rotate(360deg); }
}

/* --- הודעת שגיאה בלוגין --- */
.login-error {
  text-align: center;
  color: #e74c3c;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 14px;
  min-height: 1.2em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s;
}
.login-error.visible {
  opacity: 1;
  transform: translateY(0);
}

/* קישורים מתחת ללוגין */
.login-links {
  text-align: center;
  margin-top: 20px;
}
.login-links a {
  color: #49A88C;
  font-size: 0.9rem;
  text-decoration: none;
  font-weight: 500;
  transition: color 0.2s;
}
.login-links a:hover {
  color: #2D7A66;
  text-decoration: underline;
}

.login-contact {
  text-align: center;
  margin-top: 18px;
  font-size: 0.8rem;
  color: #bbb;
  line-height: 1.8;
}

/* =====================================================
   סיידבר שינוי סיסמה
   ===================================================== */

#changePasswordOverlay {
  z-index: 10001;
}

.cp-panel {
  max-width: 420px;
}

.cp-header {
  background: linear-gradient(135deg, #2D7A66, #49A88C);
  padding: 16px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-shrink: 0;
}

.cp-header-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 17px;
  font-weight: 500;
  color: #fff;
}
.cp-header-title svg { stroke: #fff; }

.cp-close {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 20px;
  color: #fff;
  line-height: 1;
  transition: background 0.2s;
}
.cp-close:hover {
  background: rgba(255, 255, 255, 0.35);
}

.cp-content {
  padding: 28px 24px;
  overflow-y: auto;
  flex: 1;
}

.cp-buttons {
  display: flex;
  gap: 12px;
  margin-top: 24px;
}
.cp-buttons .auth-btn {
  flex: 1;
}
.cp-cancel-btn {
  flex: 1;
  padding: 14px;
  border: 2px solid #e0e0e0;
  border-radius: 14px;
  background: #fff;
  color: #888;
  font-size: 1rem;
  font-weight: 500;
  font-family: inherit;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}
.cp-cancel-btn:hover {
  background: #f5f5f5;
  border-color: #ccc;
}

.cp-message {
  text-align: center;
  font-size: 0.9rem;
  font-weight: 500;
  margin-top: 16px;
  min-height: 1.2em;
  opacity: 0;
  transform: translateY(-6px);
  transition: opacity 0.3s, transform 0.3s;
}
.cp-message.visible { opacity: 1; transform: translateY(0); }
.cp-message.error { color: #e74c3c; }
.cp-message.success { color: #27ae60; }

/* =====================================================
   AUTH — מובייל
   ===================================================== */
html.is-mobile .login-screen {
  background: linear-gradient(135deg, #0D5E78 0%, #1B8EA8 50%, #5AC0D5 100%) !important;
  animation: none !important;
}
html.is-mobile .login-card {
  padding: 32px 24px 28px;
  border-radius: 20px;
}
html.is-mobile .login-title {
  font-size: 4.2rem;
}
html.is-mobile .login-subtitle {
  font-size: 2.6rem;
  margin-bottom: 28px;
}
html.is-mobile .auth-field input {
  padding: 28px 16px 12px;
  font-size: 2.6rem;
  border-radius: 14px;
}
html.is-mobile .auth-field label {
  font-size: 2.4rem;
}
html.is-mobile .auth-field input:focus + label,
html.is-mobile .auth-field input:not(:placeholder-shown) + label {
  font-size: 1.4rem;
}
html.is-mobile .auth-field.has-eye input {
  padding-left: 52px;
}
html.is-mobile .eye-toggle {
  width: 24px;
  height: 24px;
  left: 16px;
}
html.is-mobile .auth-btn {
  padding: 20px;
  font-size: 2.8rem;
  border-radius: 14px;
  min-height: 70px;
}
html.is-mobile .login-error {
  font-size: 2.3rem;
}
html.is-mobile .login-links a {
  font-size: 2.3rem;
}
html.is-mobile .login-contact {
  font-size: 2.1rem;
}
html.is-mobile .cp-content {
  padding: 24px 20px;
}
html.is-mobile .cp-content .auth-field input {
  font-size: 2.4rem;
  padding: 28px 16px 12px;
}
html.is-mobile .cp-content .auth-field label {
  font-size: 2.2rem;
}
html.is-mobile .cp-content .auth-field input:focus + label,
html.is-mobile .cp-content .auth-field input:not(:placeholder-shown) + label {
  font-size: 1.3rem;
}
html.is-mobile .cp-cancel-btn {
  font-size: 2.2rem;
  padding: 18px;
}

/* --- צבעי טורקיז למובייל --- */
html.is-mobile .login-accent {
  background: linear-gradient(90deg, #0D5E78, #1B8EA8, #5AC0D5, #0D5E78);
}
html.is-mobile .auth-field input:focus {
  border-color: #1B8EA8;
}
html.is-mobile .auth-field input:focus + label,
html.is-mobile .auth-field input:not(:placeholder-shown) + label {
  color: #1B8EA8;
}
html.is-mobile .eye-toggle:hover {
  color: #1B8EA8;
}
html.is-mobile .auth-btn {
  background: linear-gradient(135deg, #1B8EA8 0%, #0D5E78 100%);
}
html.is-mobile .auth-spinner.dark {
  border-top-color: #1B8EA8;
}
html.is-mobile .login-links a {
  color: #1B8EA8;
}
html.is-mobile .login-links a:hover {
  color: #0D5E78;
}
html.is-mobile .cp-header {
  background: linear-gradient(135deg, #0D5E78, #1B8EA8);
}