:root {
        --primary-color: #2c3e50;
        --accent-color: #b8860b; 
        --bg-color: #f8f9fa;
      }

      /* מרכוז מלא של הכרטיס */
      body, html {
        height: 100%;
        margin: 0;
        display: flex;
        justify-content: center;
        align-items: center;
        background-color: var(--bg-color);
        font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
        overflow: hidden; /* מניעת גלילה מיותרת */
      }

      .wrapper {
        background: #ffffff;
        /* גודל כרטיס רספונסיבי */
        width: min(95%, 800px); 
        padding: clamp(20px, 5vw, 50px);
        border-radius: clamp(15px, 3vw, 30px);
        box-shadow: 0 15px 35px rgba(0,0,0,0.08);
        text-align: center;
        border-top: clamp(4px, 1vw, 8px) solid var(--accent-color);
        box-sizing: border-box;
      }

      /* יום ותאריך */
      .header {
        font-size: clamp(0.9rem, 2.5vw, 1.2rem);
        color: #7f8c8d;
        margin-bottom: clamp(15px, 3vw, 30px);
        display: flex;
        justify-content: center;
        gap: 10px;
        align-items: center;
      }

      .bullet { color: #ddd; }

      /* שורת הספירה המרכזית */
      .content {
        margin: clamp(15px, 4vw, 40px) 0;
      }

      .omer {
        display: block;
        white-space: nowrap; /* הכרחת שורה אחת תמיד */
        /* חישוב גופן דינמי: יתפוס בערך 90% מרוחב הכרטיס */
        font-size: clamp(14px, 3.8vw, 32px); 
        font-weight: 800;
        color: var(--primary-color);
        letter-spacing: -0.02em;
      }

      .day {
        color: var(--accent-color);
        padding: 0 0.2em;
      }

      .week {
        font-weight: 600;
        color: #34495e;
      }

      /* מידות הקבלה */
      .footer {
        margin-top: clamp(15px, 3vw, 30px);
      }

      .sefira {
        display: inline-block;
        background: #fdfaf0;
        padding: 0.6em 1.5em;
        border-radius: 50px;
        font-size: clamp(0.85rem, 2.2vw, 1.1rem);
        color: #5d4037;
        border: 1px solid #efebe9;
        font-weight: 600;
      }

      .no-omer {
        font-size: 1.5rem;
        color: #bdc3c7;
        font-weight: 300;
      }

      /* התאמה למסכים קטנים מאוד (סלולרי ברוחב 320px) */
      @media (max-width: 400px) {
        .omer {
          font-size: 4.2vw; /* הגדלה קלה של היחס במסכים זעירים */
        }
      }