:root{
  --bg:#FBF2E1;
  --bg-soft:#F3E4C6;
  --surface:#FFFFFF;
  --surface-soft:#FFFDF8;
  --primary:#9C2B3C;
  --primary-dark:#6E1D2B;
  --primary-mid:#C1495B;
  --primary-tint:#F5E1E0;
  --turquoise:#6E7B4A;
  --turquoise-dark:#56613A;
  --turquoise-tint:#E8ECDC;
  --gold:#D6941F;
  --gold-dark:#B87815;
  --gold-tint:#F6E4BE;
  --text:#38271A;
  --muted:#8A7862;
  --border:rgba(56,39,26,0.10);
  --shadow-sm:0 2px 8px rgba(56,39,26,0.07);
  --shadow-md:0 10px 26px rgba(56,39,26,0.12);
  --shadow-lg:0 22px 54px rgba(56,39,26,0.18);
  --radius-sm:10px;
  --radius:14px;
  --radius-lg:18px;
  --day-font-scale:1;
}
*{box-sizing:border-box}
body{
  font-family:'Heebo','Rubik','Segoe UI','Noto Sans Hebrew',Arial,sans-serif;
  background:
    radial-gradient(1100px 500px at 12% -10%, rgba(156,43,60,0.06), transparent 60%),
    radial-gradient(900px 500px at 100% 0%, rgba(214,148,31,0.08), transparent 55%),
    var(--bg);
  margin:0;color:var(--text);min-height:100vh;position:relative;isolation:isolate;
}
.serif{font-family:'Frank Ruhl Libre','David','Noto Sans Hebrew',serif}

/* ===================== Buttons: shared system ===================== */
/* כל כפתור הוא stacking context משלו (position:relative + overflow:hidden)
   כדי שהברק שעובר ב-hover וה-ripple שנוצר ב-JS בלחיצה (ר' setupButtonRipples
   ב-app.js/join.js) ייכנסו בדיוק בתוך צורת הכפתור, כולל בפינות מעוגלות */
.btn{
  --btn-h:46px;
  position:relative;overflow:hidden;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  height:var(--btn-h);padding:0 18px;border-radius:13px;border:none;
  font-family:inherit;font-weight:700;font-size:0.92rem;cursor:pointer;
  background:var(--surface);color:var(--primary);
  box-shadow:var(--shadow-sm);
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .16s ease, filter .16s ease;
  white-space:nowrap;
  text-decoration:none;
}
/* ברק אלכסוני שגולש על פני הכפתור ב-hover */
.btn::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.55) 48%, transparent 71%);
  transform:translateX(-135%);
  transition:transform .65s ease;
}
.btn:hover::before{transform:translateX(135%)}
.btn:hover{transform:translateY(-3px) scale(1.02);box-shadow:var(--shadow-md)}
.btn:active{
  transform:translateY(-1px) scale(0.93);box-shadow:var(--shadow-sm);filter:brightness(0.97);
  transition:transform .12s cubic-bezier(.4,0,.2,1), box-shadow .12s ease, filter .12s ease;
}
.btn:disabled{opacity:0.5;cursor:default;transform:none;box-shadow:none}
.btn:disabled::before{content:none}
.btn-sm{--btn-h:36px;padding:0 12px;font-size:0.82rem;border-radius:10px}

/* ripple שממורכז בנקודת הלחיצה בפועל (מוזרק ב-JS עם left/top/width/height) */
.btn-ripple{
  position:absolute;z-index:1;border-radius:50%;pointer-events:none;
  background:currentColor;opacity:0.24;transform:scale(0);
  animation:btnRippleOut .6s ease-out forwards;
}
@keyframes btnRippleOut{to{transform:scale(1);opacity:0}}

.btn-primary{background:linear-gradient(180deg,#C1495B,var(--primary));color:#fff;box-shadow:0 10px 22px rgba(156,43,60,0.30)}
.btn-primary:hover{box-shadow:0 16px 30px rgba(156,43,60,0.42)}

.btn-accent{background:linear-gradient(180deg,#F0C36D,var(--gold));color:#3d2c0a;box-shadow:0 10px 22px rgba(214,148,31,0.35)}
.btn-accent:hover{box-shadow:0 16px 32px rgba(214,148,31,0.48)}
/* נצנוץ עדין ואיטי שחוזר על עצמו — רומז "זה הכפתור המיוחד" בלי להטריד
   בזמן עבודה שוטפת (בניגוד לאנימציית ה-attention האגרסיבית בדף הנחיתה) */
.btn-accent::after{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 32%, rgba(255,255,255,0.75) 50%, transparent 68%);
  transform:translateX(-160%);
  animation:accentShimmer 3.4s ease-in-out infinite;
}
@keyframes accentShimmer{0%,52%{transform:translateX(-160%)}100%{transform:translateX(160%)}}

.btn-outline{background:var(--surface);color:var(--primary);border:1.5px solid rgba(156,43,60,0.28)}
.btn-outline:hover{background:var(--primary-tint)}

/* טורקיז ולא אדום/זהב (btn-primary/btn-accent, בשימוש לשדרוג הלוח) בכוונה —
   הקולאז' הוא מוצר נפרד לגמרי מהלוח ומהתשלום שלו, וחשוב שזה ייראה שונה
   ולא ייתפס בטעות כעוד אפשרות שדרוג/תשלום קיימת */
.btn-collage{background:linear-gradient(180deg,#8B9A63,var(--turquoise));color:#fff;box-shadow:0 10px 22px rgba(110,123,74,0.32)}
.btn-collage:hover{box-shadow:0 16px 30px rgba(110,123,74,0.45)}

.btn-ghost{background:transparent;color:var(--text);box-shadow:none}
.btn-ghost:hover{background:rgba(56,39,26,0.06);box-shadow:none;transform:translateY(-1px) scale(1.02)}

.btn-icon{--btn-h:40px;width:40px;padding:0;border-radius:12px;font-size:1rem}
.btn-icon.btn-sm{--btn-h:30px;width:30px;border-radius:9px;font-size:0.85rem}

/* generic small icon buttons used inside panels (layers/dpad) */
.icon-btn{
  position:relative;overflow:hidden;
  border:none;background:var(--surface-soft);color:var(--primary);
  width:30px;height:30px;border-radius:9px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;font-size:0.82rem;box-shadow:var(--shadow-sm);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), background .14s ease, box-shadow .14s ease;
}
.icon-btn:hover{background:var(--primary-tint);transform:translateY(-1px) scale(1.08);box-shadow:var(--shadow-md)}
.icon-btn:active{transform:translateY(0) scale(0.88);transition:transform .1s ease}
.icon-btn:disabled{opacity:0.35;cursor:default;transform:none}

/* ===================== Header ===================== */
header{
  background:var(--surface);
  padding:14px 28px;
  display:flex;flex-direction:column;gap:10px;
  box-shadow:0 6px 24px rgba(56,39,26,0.06);
  border-bottom:1px solid var(--border);
  position:relative;z-index:5;
}
.header-row{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:10px}
.brand-mark{
  width:38px;height:38px;border-radius:12px;flex-shrink:0;
  background:linear-gradient(135deg,var(--primary),var(--primary-mid));
  display:flex;align-items:center;justify-content:center;color:#fff;font-size:1.15rem;
  box-shadow:0 8px 18px rgba(156,43,60,0.30);
}
.brand-title{font-family:'Frank Ruhl Libre','David',serif;font-weight:700;font-size:1.2rem;color:var(--primary-dark)}

.controls{display:flex;flex-wrap:wrap;gap:10px;align-items:center}
.controls input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none}

.header-meta{display:flex;flex-wrap:wrap;align-items:center;gap:14px}
/* "עוד" — הכפתורים המשניים (הדרכה/שגרירות/כלי אדמין וכו') נשארים בשורה
   כרגיל בדסקטופ (display:contents לא פוגע בפריסה), ומתקפלים לתפריט נפתח
   רק במסך צר, כדי לא להציף את הכותרת בטלפון */
.controls-more{display:contents}
.controls-more-toggle{display:none;font-size:1.1rem;line-height:1;padding:8px 12px}
.meta-pill{
  display:flex;align-items:center;gap:7px;background:var(--surface-soft);
  border:1px solid var(--border);border-radius:999px;padding:5px 12px;font-size:0.78rem;color:var(--muted);font-weight:600;
}
.meta-pill strong{color:var(--text);font-weight:700}

.save-indicator{display:flex;align-items:center;gap:6px;font-size:0.78rem;color:var(--muted);font-weight:600}
.save-indicator .dot{width:8px;height:8px;border-radius:50%;background:var(--turquoise);box-shadow:0 0 0 0 rgba(110,123,74,0.5)}
.save-indicator.is-saving .dot{background:var(--gold);animation:pulseDot 1s ease-in-out infinite}
.save-indicator.is-saved .dot{animation:pulseOnce .6s ease}
@keyframes pulseDot{0%,100%{opacity:1}50%{opacity:0.35}}
@keyframes pulseOnce{0%{box-shadow:0 0 0 0 rgba(110,123,74,0.45)}100%{box-shadow:0 0 0 10px rgba(110,123,74,0)}}

.user-label{font-size:0.82rem;color:var(--muted);font-weight:600}

/* ===================== Month navigation ===================== */
.month-nav{
  display:flex;align-items:center;gap:10px;padding:10px 24px 16px;position:relative;z-index:4;
}
.month-tabs{
  display:flex;gap:8px;overflow-x:auto;padding:4px 2px;flex:1;scroll-behavior:smooth;
}
.month-tabs::-webkit-scrollbar{height:6px}
.month-tabs::-webkit-scrollbar-thumb{background:rgba(156,43,60,0.18);border-radius:99px}

.month-button{
  position:relative;overflow:hidden;
  border:1.5px solid var(--border);border-radius:999px;padding:8px 16px;
  background:var(--surface);color:var(--text);font-weight:700;font-size:0.86rem;
  cursor:pointer;white-space:nowrap;display:inline-flex;align-items:center;gap:7px;
  box-shadow:var(--shadow-sm);
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease, background .16s ease, color .16s ease, border-color .16s ease;
}
.month-button:hover{transform:translateY(-2px) scale(1.04);box-shadow:var(--shadow-md)}
.month-button:active{transform:translateY(0) scale(0.93);transition:transform .12s cubic-bezier(.4,0,.2,1)}
.month-button .m-icon{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:0.7rem;flex-shrink:0}

.month-button.is-complete{background:var(--turquoise-tint);border-color:rgba(110,123,74,0.35);color:var(--turquoise-dark)}
.month-button.is-complete .m-icon{
  background:var(--turquoise);color:#fff;border-radius:50%;
  animation:checkPop .38s cubic-bezier(.34,1.56,.64,1);
}
.month-button.is-todo{background:var(--surface);color:var(--muted)}
.month-button.is-todo .m-icon{border:1.5px solid rgba(138,120,98,0.4);border-radius:50%}

.month-button.active{
  background:linear-gradient(180deg,#C1495B,var(--primary));color:#fff;border-color:transparent;
  box-shadow:0 10px 22px rgba(156,43,60,0.32);
}
.month-button.active .m-icon{background:rgba(255,255,255,0.25);border-radius:50%}
.month-button.active.is-complete{background:linear-gradient(180deg,#96A56A,var(--turquoise));box-shadow:0 10px 22px rgba(110,123,74,0.32)}

@keyframes checkPop{0%{transform:scale(0.4);opacity:0}60%{transform:scale(1.15)}100%{transform:scale(1);opacity:1}}

.status-row{padding:0 24px;font-size:0.78rem;color:var(--muted)}

.month-heading{text-align:center;padding:0 24px 12px}
.month-title{font-family:'Frank Ruhl Libre','David','Noto Sans Hebrew',serif;font-weight:700;font-size:1.5rem;color:var(--primary-dark);letter-spacing:0.02em}

/* ===================== Layout ===================== */
main{display:grid;grid-template-columns:320px 1fr;gap:20px;padding:8px 24px 28px;max-width:1600px;margin:0 auto;position:relative;z-index:1;align-items:start}
main.drag-over{outline:2px dashed var(--gold);outline-offset:10px;border-radius:24px}

.sidebar{
  background:var(--surface);padding:18px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);
  border:1px solid var(--border);position:relative;z-index:1;max-height:calc(100vh - 160px);overflow-y:auto;
  display:flex;flex-direction:column;gap:16px;
}
.sidebar::-webkit-scrollbar{width:8px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(156,43,60,0.15);border-radius:99px}

.panel{background:var(--surface-soft);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.panel-title{margin:0 0 10px;font-size:0.9rem;font-weight:800;color:var(--primary-dark);display:flex;align-items:center;gap:7px}
.panel-title .ico{font-size:0.95rem}

/* ---- Gallery ---- */
.upload-label{
  position:relative;overflow:hidden;
  display:flex;align-items:center;justify-content:center;gap:8px;
  height:var(--btn-h,46px);border-radius:13px;cursor:pointer;width:100%;
  background:linear-gradient(180deg,#C1495B,var(--primary));color:#fff;font-weight:700;font-size:0.9rem;
  box-shadow:0 10px 22px rgba(156,43,60,0.30);
  transition:transform .38s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.upload-label::before{
  content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(115deg, transparent 25%, rgba(255,255,255,0.55) 48%, transparent 71%);
  transform:translateX(-135%);
  transition:transform .65s ease;
}
.upload-label:hover::before{transform:translateX(135%)}
.upload-label:hover{transform:translateY(-3px) scale(1.02);box-shadow:0 16px 30px rgba(156,43,60,0.42)}
.upload-label:active{transform:translateY(-1px) scale(0.93);transition:transform .12s cubic-bezier(.4,0,.2,1)}

#gallery{display:flex;flex-wrap:wrap;gap:10px;margin-top:12px}
.thumb-item{
  display:flex;flex-direction:column;align-items:center;gap:6px;width:76px;
  background:var(--surface);border-radius:var(--radius-sm);padding:6px;border:1px solid var(--border);
  box-shadow:var(--shadow-sm);transition:transform .16s ease, box-shadow .16s ease, border-color .16s ease;
}
.thumb-item:hover{transform:translateY(-3px) scale(1.03);box-shadow:var(--shadow-md);border-color:rgba(156,43,60,0.25)}
.thumb{width:64px;height:64px;object-fit:cover;border-radius:9px;border:1px solid var(--border);cursor:grab;display:block}
.thumb:active{cursor:grabbing}
.thumb-item.dragging{opacity:0.45;transform:scale(0.95)}
.thumb-add-btn{
  width:100%;font-size:0.68rem;padding:5px 2px;border-radius:8px;border:none;
  background:var(--primary-tint);color:var(--primary-dark);cursor:pointer;white-space:nowrap;font-weight:700;
  transition:background .14s ease, transform .14s ease;
}
.thumb-add-btn:hover{background:var(--primary);color:#fff;transform:translateY(-1px)}
.thumb-delete-btn{
  width:100%;font-size:0.68rem;padding:5px 2px;border-radius:8px;border:none;
  background:transparent;color:#8a2f2f;cursor:pointer;white-space:nowrap;font-weight:700;
  transition:background .14s ease, transform .14s ease;
}
.thumb-delete-btn:hover{background:#fbe4e4;transform:translateY(-1px)}

/* ---- Designer / properties panel ---- */
.designer-controls{display:flex;flex-direction:column;gap:10px}
.designer-controls label{display:flex;flex-direction:column;gap:5px;font-size:0.85rem;font-weight:700;color:var(--text)}
.designer-controls input,.designer-controls select{
  padding:9px 10px;border-radius:10px;border:1px solid var(--border);font-family:inherit;background:var(--surface);
}
.designer-controls input[type="range"]{padding:0;accent-color:var(--primary)}
.designer-controls input[type="color"]{padding:3px;height:38px;cursor:pointer}
.checkbox-row{flex-direction:row!important;align-items:center;gap:8px!important}
.checkbox-row input{width:auto!important}

.hint{font-size:0.76rem;color:var(--muted);line-height:1.45;margin:0}
.hint.hint-error{color:#d33;font-weight:700;font-size:0.86rem}
#selectedDayLabel{font-size:0.78rem;color:var(--muted);background:var(--surface);border-radius:8px;padding:6px 9px}

.properties-empty{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;
  text-align:center;padding:22px 10px;color:var(--muted);font-size:0.82rem;
}
.properties-empty .ico{font-size:1.4rem;opacity:0.6}
.properties-fields{display:flex;flex-direction:column;gap:10px;animation:fadeSlideIn .22s ease}
@keyframes fadeSlideIn{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}

/* layers list */
#layersPanel{display:flex;flex-direction:column;gap:5px;max-height:210px;overflow-y:auto;margin-bottom:2px}
.layer-row{
  display:flex;align-items:center;gap:7px;padding:7px 8px;border-radius:10px;
  background:var(--surface);border:1px solid var(--border);cursor:pointer;font-size:0.8rem;
  transition:background .14s ease, border-color .14s ease, transform .1s ease;
}
.layer-row:hover{background:var(--primary-tint);border-color:rgba(156,43,60,0.25)}
.layer-row.active{background:linear-gradient(180deg,#C1495B,var(--primary));border-color:transparent;box-shadow:var(--shadow-sm)}
.layer-row.active .layer-name{color:#fff;font-weight:700}
.layer-row.layer-hidden{opacity:0.5}
.layer-thumb{width:24px;height:24px;object-fit:cover;border-radius:6px;flex-shrink:0}
.layer-name{flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.layer-actions{display:flex;gap:3px;flex-shrink:0}
.layer-btn{border:none;background:rgba(156,43,60,0.08);border-radius:7px;width:23px;height:23px;line-height:1;font-size:0.72rem;cursor:pointer;padding:0;display:flex;align-items:center;justify-content:center;transition:background .14s ease}
.layer-btn:hover{background:rgba(156,43,60,0.18)}
.layer-row.active .layer-btn{background:rgba(255,255,255,0.22)}
.layer-row.active .layer-btn:hover{background:rgba(255,255,255,0.35)}
.layer-btn:disabled{opacity:0.35;cursor:default}

.dpad-group{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.dpad{display:grid;grid-template-columns:repeat(3,30px);grid-template-rows:repeat(2,30px);gap:4px}
.dpad #btnUp{grid-column:2;grid-row:1}
.dpad #btnLeft{grid-column:1;grid-row:2}
.dpad #btnRight{grid-column:3;grid-row:2}
.dpad #btnDown{grid-column:2;grid-row:2}
.action-row{display:flex;gap:6px;flex-wrap:wrap}

/* ==== הקנווס: עמוד A4 לרוחב אמיתי (יחס 297:210), בדיוק כמו בהדפסה ==== */
.canvas-wrap{display:flex;justify-content:center;align-items:flex-start;padding:4px 0}
.canvas-page{
  position:relative;width:100%;max-width:1150px;aspect-ratio:297/210;background:#FFFFFF;
  border-radius:var(--radius-lg);
  box-shadow:0 26px 64px rgba(56,39,26,0.18),0 0 0 1px rgba(56,39,26,0.06);
  overflow:hidden;transition:box-shadow .2s ease;
  /* מאפשר ל-cqw בתוך העמוד (ר' canvas-month-label) להיות יחסי לרוחב
     הקנווס עצמו, לא לרוחב חלון הדפדפן — אחרת גודל הגופן של שם-החודש היה
     תלוי כמה מקום התופסת סרגל הצד/רוחב החלון באותו רגע, ולא בגודל הקנווס
     בפועל: אותו קנווס נראה שונה כל פעם (וגם נדפס שונה) לפי רוחב החלון */
  container-type:inline-size;
}
.canvas-page.month-transition{animation:canvasSwitch .32s ease}
@keyframes canvasSwitch{0%{opacity:0.35;transform:scale(0.992) translateY(4px)}100%{opacity:1;transform:scale(1) translateY(0)}}

/* כל אובייקט על הקנווס (רקע/שם-חודש/בלוק-תאריכים) ממוקם באחוזים מהעמוד עצמו,
   לא מה-viewport — בלי תלות בגלילה, ובדיוק כמו שיודפס */
.page-background-image,.page-background-text,.canvas-month-label,.canvas-calendar-block{
  position:absolute;transform-origin:center;touch-action:none;cursor:grab;
}
.page-background-image:active,.page-background-text:active,.canvas-month-label:active,.canvas-calendar-block:active{cursor:grabbing}

.page-background-image{border-radius:12px;background-size:cover;background-position:center;border:1px solid rgba(255,255,255,0.7);box-shadow:0 10px 26px rgba(56,39,26,0.16);z-index:1;transform:translate(-50%,-50%);animation:overlayIn .22s ease}
.page-background-text{padding:4px 6px;font-weight:800;color:var(--text);font-size:18px;z-index:1;display:flex;align-items:center;justify-content:center;text-align:center;white-space:pre-wrap;overflow:hidden;transform:translate(-50%,-50%);text-shadow:0 1px 4px rgba(255,255,255,0.85),0 1px 10px rgba(255,255,255,0.6);animation:overlayIn .22s ease}
@keyframes overlayIn{from{opacity:0;transform:translate(-50%,-50%) scale(0.9)}to{opacity:1;transform:translate(-50%,-50%) scale(1)}}
.page-background-image.selected,.page-background-text.selected{outline:3px solid var(--gold);box-shadow:0 12px 30px rgba(214,148,31,0.32);z-index:20}

/* שם החודש/לוח התאריכים חייבים להישאר תמיד מעל תמונות/טקסטים של הרקע —
   כולל כשפריט רקע נבחר (z-index:20, שורה למעלה) — אחרת הוספה/בחירה של
   תמונת רקע "בולעת" ומכסה את התאריכים בעריכה החיה (זה לא קרה בייצוא ה-PDF
   כי שם מסירים את מצב ה-selected לפני הצילום, מה שהסתיר את הבאג) */
.canvas-month-label{width:94%;text-align:var(--month-label-align,right);font-family:'Frank Ruhl Libre','David','Noto Sans Hebrew',serif;font-weight:700;font-size:clamp(1.5rem,3.8cqw,2.8rem);letter-spacing:0.03em;color:var(--primary-dark);z-index:30;cursor:default;pointer-events:none}
.canvas-calendar-block{width:94%;z-index:30;cursor:default;pointer-events:none}
.canvas-month-label.block-selected,.canvas-calendar-block.block-selected{outline:2px dashed var(--gold);outline-offset:6px;border-radius:10px}

/* תאי היום נשארים חצי-שקופים כשיש רקע לחודש הנוכחי, כדי שהתאריכים יישארו
   קריאים — אבל בעדינות: שקיפות חזקה מדי "שוטפת" את התמונה בלבן ומחלישה
   אותה בדיוק באזור שהיא הכי אמורה להיראות (מתחת ללוח התאריכים עצמו) */
.canvas-page.has-bg .day:not(.has-background-image){background:rgba(255,255,255,0.48);box-shadow:none;border:var(--day-border-width,1px) solid var(--day-border-color,rgba(56,39,26,0.08))}
.canvas-page.has-bg .day.holiday:not(.has-background-image){background:rgba(214,148,31,0.20)}
.canvas-page.has-bg .day.has-background-image{position:relative;z-index:1}

/* resize handles */
.overlay-handle{position:absolute;width:13px;height:13px;border-radius:4px;background:#fff;border:2px solid var(--gold);box-shadow:0 4px 10px rgba(56,39,26,0.16);z-index:31;pointer-events:auto;transform:translate(-50%,-50%)}
.overlay-handle.br{cursor:se-resize}
.overlay-handle.bl{cursor:sw-resize}
.overlay-handle.tr{cursor:ne-resize}
.overlay-handle.tl{cursor:nw-resize}

.block-move-handle{position:absolute;top:-16px;left:50%;transform:translate(-50%,-50%);width:30px;height:30px;border-radius:50%;background:linear-gradient(180deg,#C1495B,var(--primary));color:#fff;display:flex;align-items:center;justify-content:center;cursor:grab;z-index:32;box-shadow:0 8px 18px rgba(156,43,60,0.40);font-size:1rem;touch-action:none;pointer-events:auto}
.block-move-handle:active{cursor:grabbing}
.block-resize-handle{position:absolute;width:14px;height:14px;border-radius:4px;background:#fff;border:2px solid var(--gold);box-shadow:0 4px 10px rgba(56,39,26,0.18);z-index:32;touch-action:none;pointer-events:auto}
.block-resize-handle.tl{top:0;left:0;transform:translate(-50%,-50%);cursor:nw-resize}
.block-resize-handle.tr{top:0;right:0;transform:translate(50%,-50%);cursor:ne-resize}
.block-resize-handle.bl{bottom:0;left:0;transform:translate(-50%,50%);cursor:sw-resize}
.block-resize-handle.br{bottom:0;right:0;transform:translate(50%,50%);cursor:se-resize}

/* gap/padding/min-height כאן ב-cqw (יחסי לרוחב הקנווס עצמו, ר' container-type
   על .canvas-page) ולא בפיקסלים קבועים - אחרת בקנווס מצומצם (חלון צר,
   תצוגת מובייל) גובה השורות נשאר קבוע בעוד הקנווס עצמו מצטמצם, והלוח
   "מציף" למטה ומכסה/נדחק מתחת לשם-החודש. הערכים נבחרו כך שבקנווס בגודל
   העיצוב המלא (1150px) הם זהים בדיוק לערכים המקוריים בפיקסלים */
.weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:0.52cqw;margin-bottom:0.7cqw}
.weekday{background:transparent;text-align:center;padding:0.35cqw;font-family:'Frank Ruhl Libre','David','Noto Sans Hebrew',serif;font-weight:700;color:var(--primary-dark);font-size:0.9rem;transform:scale(var(--text-fix-x,1),var(--text-fix-y,1))}
/* גובה קבוע (שווה ל-6 שורות, המקסימום האפשרי בחודש עברי) בלי תלות במספר
   השורות בפועל (5 או 6) — כדי שללוח יהיה אותו גובה כולל בכל החודשים ולא
   "יקפוץ" לפי כמה שורות יש לחודש הנוכחי. מספר השורות בפועל (--cal-rows,
   נקבע ב-renderMonth ב-app.js) קובע כמה שורות 1fr מתחלקות בתוך הגובה הזה,
   כך שבחודש עם פחות שורות כל תא פשוט גבוה יותר במקום שהלוח כולו יהיה נמוך יותר */
.calendar{display:grid;grid-template-columns:repeat(7,1fr);grid-template-rows:repeat(var(--cal-rows,6),1fr);gap:0.52cqw;height:39.14cqw}
.day{
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFDF8 100%);min-height:6.09cqw;padding:0.52cqw;border-radius:12px;
  border:var(--day-border-width,1px) solid var(--day-border-color,var(--border));position:relative;z-index:0;overflow:hidden;box-shadow:inset 0 1px 0 rgba(255,255,255,0.9);
  pointer-events:auto;cursor:pointer;transition:box-shadow .16s ease, border-color .16s ease;
}
.day:hover{box-shadow:0 8px 18px rgba(56,39,26,0.10);border-color:rgba(156,43,60,0.22)}
/* פייד רך בקצוות התמונה, כתחליף מכוון ל"טשטוש" שהמסך מייצר באקראי כשהוא
   מקטין תמונות גדולות לתא קטן (אפקט שנעלם בהדפסה/ייצוא ברזולוציה גבוהה,
   כי שם הדפדפן כבר לא צריך להקטין כמעט כלום ואז רואים חיתוך חד בין
   תאים סמוכים שמוצגת בהם אותה תמונה עם מיקום שונה). ב-cqw כדי שהעוצמה
   היחסית תישאר זהה גם בלכידת 300dpi לא רק על המסך הרגיל */
.day.has-background-image{cursor:grab;box-shadow:inset 0 0 1.6cqw 0.35cqw rgba(255,255,255,0.55)}
/* תמונת/ות התאריך (ר' applyDayBackgroundImages ב-app.js) — גם תמונה בודדת
   עוברת דרך אותו מבנה של תמונה-ומעלה: מכל flex ברוחב מלא, מתחת לכל שאר
   תוכן התא (z-index:-1 — z-index:0 על .day עצמו מבודד את הקשר-הערמה כך
   שהערך השלילי נשאר בתוך התא ולא "בורח" מתחת לתאים/לרקע העמוד שמסביב),
   כל תמונה בתא-flex עצמאי עם cover משלה כדי לשמור על היחס גובה-רוחב
   המקורי שלה בלי למתוח. ה-slice הוא רק "חלון" חתוך (overflow:hidden) —
   ה-fill הפנימי הוא זה שסוחב את התמונה בפועל ומתכווץ/מתרחב עם
   backgroundScale (ר' adjustDayImageOnWheel), כדי שהזום לא "יברח" מעבר
   לעמודה של התמונה הזו אל תוך התמונה השכנה */
.day-images{position:absolute;inset:0;z-index:-1;display:flex}
.day-image-slice{flex:1 1 0;min-width:0;height:100%;position:relative;overflow:hidden;box-shadow:inset 0 0 1.6cqw 0.35cqw rgba(255,255,255,0.55)}
.day-image-fill{position:absolute;inset:0;background-size:cover;background-position:center;background-repeat:no-repeat;transform-origin:center;transition:transform .12s ease}
.day .floating-image,.day .floating-text,.day .event-bubble{position:absolute;cursor:move;z-index:2;pointer-events:auto}
.day .floating-image{width:40px;height:40px;border-radius:10px;background-size:cover;background-position:center;border:2px solid rgba(255,255,255,0.9);box-shadow:0 6px 14px rgba(56,39,26,0.18)}
.day .floating-text{padding:3px 6px;border-radius:8px;background:rgba(255,255,255,0.92);max-width:80px;font-size:calc(0.65rem * var(--day-font-scale));line-height:1.15;white-space:pre-wrap;box-shadow:0 4px 10px rgba(56,39,26,0.14);transform:scale(var(--text-fix-x,1),var(--text-fix-y,1))}
.day .floating-text.selected{outline:2px solid var(--gold);box-shadow:0 0 0 3px rgba(214,148,31,0.22);background:#ffffff}
.day .event-bubble{transform:translate(-50%,-50%) scale(var(--text-fix-x,1),var(--text-fix-y,1));max-width:88%;padding:2px 5px;border-radius:6px;background:var(--surface-soft);color:var(--muted);font-size:calc(0.55rem * var(--day-font-scale));line-height:1.25;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;box-shadow:0 2px 6px rgba(56,39,26,0.14)}
.day .event-bubble.selected{outline:2px solid var(--gold);box-shadow:0 0 0 3px rgba(214,148,31,0.22);background:#ffffff;color:var(--primary-dark)}
.day.background-selected{outline:2px solid var(--gold);box-shadow:0 0 0 3px rgba(214,148,31,0.22)}
.day .overlay-layer{position:absolute;inset:0;pointer-events:none}
.day.holiday{border-color:var(--gold);background:linear-gradient(135deg,#FCF2DC 0%,#F7E4B7 100%)}
.day.empty{background:transparent;border:none;box-shadow:none;cursor:default}
.day .date{font-weight:800;font-size:calc(0.72rem * var(--day-font-scale));margin-bottom:3px;padding:2px 6px;display:inline-flex;align-items:center;gap:3px;justify-content:center;border-radius:999px;background:var(--primary-tint);color:var(--primary-dark);transform:scale(var(--text-fix-x,1),var(--text-fix-y,1))}
.day .date-gregorian{font-weight:600;font-size:calc(0.6rem * var(--day-font-scale));opacity:0.65}
.day.holiday .date{background:var(--gold-tint);color:#6b5324}
.canvas-month-label .gregorian-months{font-size:0.42em;font-weight:600;opacity:0.7;letter-spacing:0.01em}
.day .holiday-label{margin-top:3px;padding:2px 6px;border-radius:999px;background:var(--gold-tint);color:#6b5324;font-size:calc(0.52rem * var(--day-font-scale));font-weight:700;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:inline-block;transform:scale(var(--text-fix-x,1),var(--text-fix-y,1))}

/* בועות גדולות שמופיעות במעבר עכבר על תא היום (הוספת תמונה/אירוע), כדי
   לאפשר עבודה ישירה מתוך התאריכים בלי לעבור לסרגל הצדדי. ה-pointer-events
   על הכפתורים עצמם פעיל רק כש-.day:hover — כך שכל שאר הזמן הם לא חוסמים
   שום קליק/גרירה קיימים בתא (גרירת רקע, בחירת תאריך, עריכת טקסט צף וכו').
   במסך טלפון צר יש override נפרד (ר' @media(max-width:480px) למטה) שהופך
   את זה לעיגולי-פינה קטנים במקום — ר' שם למה */
.day-hover-actions{
  position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:5px;
  padding:5px;border-radius:11px;pointer-events:none;
  background:linear-gradient(180deg, rgba(56,39,26,0.12), rgba(56,39,26,0.58));
  opacity:0;transform:scale(0.9);
  transition:opacity .18s ease, transform .18s ease;
  z-index:8;
}
.day:hover .day-hover-actions,.day:focus-within .day-hover-actions,.day.selected .day-hover-actions{opacity:1;transform:scale(1)}
.day-bubble-btn{
  position:relative;overflow:hidden;
  pointer-events:none;
  display:flex;align-items:center;justify-content:center;gap:4px;
  width:94%;padding:5px 4px;border-radius:999px;border:none;cursor:pointer;
  font-weight:800;font-size:0.6rem;color:#fff;font-family:'Rubik','Segoe UI',sans-serif;
  box-shadow:0 6px 16px rgba(0,0,0,0.28);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), filter .14s ease, box-shadow .14s ease;
  /* --text-fix-x/y (ר' applyBlockTransform ב-app.js): מבטלים את העיוות
     ממתיחה לא-אחידה של לוח התאריכים גם על כפתורי-העריכה עצמם, לא רק על
     תוכן הלוח - hover/active למטה מרכיבים על זה עם calc() כדי לא לאבד
     את אפקט ההגדלה-בלחיצה */
  transform:scale(var(--text-fix-x,1),var(--text-fix-y,1));
}
.day-bubble-btn .icon{font-size:0.95rem;line-height:1}
.day:hover .day-bubble-btn,.day:focus-within .day-bubble-btn,.day.selected .day-bubble-btn{pointer-events:auto}
.day-bubble-btn:hover{transform:scale(calc(var(--text-fix-x,1) * 1.1),calc(var(--text-fix-y,1) * 1.1));filter:brightness(1.12);box-shadow:0 8px 20px rgba(0,0,0,0.34)}
.day-bubble-btn:active{transform:scale(calc(var(--text-fix-x,1) * 0.9),calc(var(--text-fix-y,1) * 0.9));transition:transform .1s ease}
.day-bubble-photo{background:linear-gradient(180deg,#96A56A,var(--turquoise))}
.day-bubble-event{background:linear-gradient(180deg,#C1495B,var(--primary))}

/* כפתור "+" קטן בפינת התא, זמין רק כשכבר יש לתאריך תמונה/ות (ר' hasPhotoAlready
   ב-app.js) — פותח מחדש את בורר-התמונות כדי להוסיף תמונה נוספת (הריבוע
   מתחלק אוטומטית לעמודות) או להסיר תמונות קיימות. יושב בתוך day-hover-actions
   ולכן מופיע/נעלם יחד עם שאר בועות ה-hover */
.day-photo-corner-btn{
  position:absolute;top:6px;left:6px;width:22px;height:22px;border-radius:50%;
  border:none;background:linear-gradient(180deg,#96A56A,var(--turquoise));color:#fff;
  font-size:1rem;font-weight:800;line-height:1;display:flex;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.32);pointer-events:none;
  transition:transform .15s ease, filter .15s ease;
  transform:scale(var(--text-fix-x,1),var(--text-fix-y,1));
}
.day:hover .day-photo-corner-btn,.day:focus-within .day-photo-corner-btn,.day.selected .day-photo-corner-btn{pointer-events:auto}
.day-photo-corner-btn:hover{transform:scale(calc(var(--text-fix-x,1) * 1.15),calc(var(--text-fix-y,1) * 1.15));filter:brightness(1.15)}
.day-photo-corner-btn:active{transform:scale(calc(var(--text-fix-x,1) * 0.9),calc(var(--text-fix-y,1) * 0.9))}

/* זום פנימה/החוצה לתמונת התאריך — פינה נגדית לכפתור "+" כדי לא להתנגש איתו,
   זמינה רק כשכבר יש תמונה (ר' hasPhotoAlready ב-app.js). גם גלגלת עכבר על
   התא כשהרקע נבחר עושה את אותו הדבר (ר' adjustDayImageOnWheel) — הכפתורים
   כאן הם הדרך הנגישה למגע/מובייל שאין בו גלגלת */
.day-zoom-controls{position:absolute;bottom:6px;left:6px;display:flex;gap:4px;pointer-events:none}
.day:hover .day-zoom-controls,.day:focus-within .day-zoom-controls,.day.selected .day-zoom-controls{pointer-events:auto}
.day-zoom-btn{
  width:20px;height:20px;border-radius:50%;border:none;
  background:rgba(56,39,26,0.6);color:#fff;font-size:0.85rem;font-weight:800;line-height:1;
  display:flex;align-items:center;justify-content:center;cursor:pointer;
  box-shadow:0 4px 10px rgba(0,0,0,0.3);pointer-events:none;
  transition:transform .15s ease, filter .15s ease;
  transform:scale(var(--text-fix-x,1),var(--text-fix-y,1));
}
.day:hover .day-zoom-btn,.day:focus-within .day-zoom-btn,.day.selected .day-zoom-btn{pointer-events:auto}
.day-zoom-btn:hover{transform:scale(calc(var(--text-fix-x,1) * 1.15),calc(var(--text-fix-y,1) * 1.15));filter:brightness(1.3)}
.day-zoom-btn:active{transform:scale(calc(var(--text-fix-x,1) * 0.9),calc(var(--text-fix-y,1) * 0.9))}

/* כפתור סגירה/יציאה ממצב-עריכה לתאריך עם תמונה — רק בטלפון (ר'
   @media(max-width:480px) למטה). בדסקטופ/טאבלט מוסתר תמיד: display:none
   כברירת מחדל, כדי לא לשנות שם שום דבר */
.day-deselect-btn{
  display:none;position:absolute;top:6px;right:6px;width:22px;height:22px;border-radius:50%;
  border:none;background:rgba(56,39,26,0.65);color:#fff;
  font-size:0.7rem;font-weight:800;line-height:1;align-items:center;justify-content:center;
  cursor:pointer;box-shadow:0 4px 10px rgba(0,0,0,0.32);pointer-events:none;
  transition:transform .15s ease, filter .15s ease;
  transform:scale(var(--text-fix-x,1),var(--text-fix-y,1));
}
.day:hover .day-deselect-btn,.day:focus-within .day-deselect-btn,.day.selected .day-deselect-btn{pointer-events:auto}
.day-deselect-btn:hover{filter:brightness(1.3)}
.day-deselect-btn:active{transform:scale(calc(var(--text-fix-x,1) * 0.9),calc(var(--text-fix-y,1) * 0.9))}

/* תצוגה מקדימה גדולה של התאריך עצמו בתוך חלונית בחירת התמונות — כדי לראות
   בבירור איך התמונה תיראה באותו תאריך (חיתוך/מיקום), בלי להסתמך על התא
   הזעיר בלוח האמיתי. אותם day-images/day-image-slice/day-image-fill
   בדיוק כמו בתא אמיתי (ר' applyDayBackgroundImages ב-app.js), רק בקנה
   מידה גדול יותר — container-type משלה כדי שיחידות ה-cqw הפנימיות יתייחסו
   לרוחב שלה, לא לרוחב הקנווס (ר' .canvas-page). מוסתר לגמרי כברירת מחדל —
   רק בטלפון (ר' @media(max-width:480px) למטה) היא מופיעה, כדי שהחלונית
   הזו לא תשתנה בכלל אצל מי שמשתמשת במחשב/טאבלט */
.date-preview-wrap{display:none;margin-bottom:14px}
.date-preview-box{
  position:relative;z-index:0;width:100%;max-width:320px;margin:0 auto 8px;
  aspect-ratio:2.3/1;border-radius:12px;overflow:hidden;
  background:linear-gradient(180deg,#FFFFFF 0%,#FFFDF8 100%);
  border:1px solid var(--border);box-shadow:var(--shadow-sm);
  container-type:inline-size;
}
.date-preview-box.is-draggable{cursor:grab;touch-action:none}
.date-preview-box.is-draggable:active{cursor:grabbing}
/* אירועי התאריך מוצגים על גבי התצוגה המקדימה (ר' renderDatePreview ב-
   app.js) — לצפייה בלבד, לא ניתנים לגרירה כאן */
.date-preview-event{
  position:absolute;transform:translate(-50%,-50%);z-index:2;
  max-width:70%;padding:3px 7px;border-radius:6px;
  background:var(--surface-soft);color:var(--muted);
  font-size:0.72rem;line-height:1.25;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  box-shadow:0 2px 6px rgba(56,39,26,0.14);
  pointer-events:none;
}
.date-preview-hint{margin:0;text-align:center}

/* ---- קולאז' (מוצר נפרד מהלוח) ---- */
.collage-toolbar{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-bottom:6px}
.collage-format-choice{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:10px}

.collage-frames{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px}
.collage-frame-option{
  display:grid;gap:2px;width:64px;height:46px;padding:5px;border-radius:10px;
  border:2px solid var(--border);background:var(--surface-soft);cursor:pointer;
}
.collage-frame-option:hover{border-color:var(--turquoise)}
.collage-frame-option.selected{border-color:var(--turquoise-dark);background:var(--turquoise-tint)}
.collage-frame-option span{background:rgba(56,39,26,0.18);border-radius:3px}

.collage-preview-wrap{display:flex;justify-content:center;margin:6px 0 14px}
/* יחס לרוחב (landscape) — A4 כברירת מחדל (297x210מ"מ), משתנה דינמית לפי
   הגודל שנבחר (ר' renderCollagePreview) כדי לשקף בדיוק את יחס-הממדים של
   הקובץ שיורד בפועל (downloadCollageImage), לא ריבוע/פורטרט שרירותי.
   position:relative כדי שכיתובים (collage-text) ימוקמו יחסית אליו */
.collage-preview{
  position:relative;width:100%;max-width:520px;aspect-ratio:297/210;display:grid;gap:10px;
  border-radius:var(--radius-sm);padding:12px;box-shadow:var(--shadow-sm);
}
.collage-slot{
  position:relative;overflow:hidden;border-radius:8px;
  background-color:rgba(255,255,255,0.55);border:1.5px dashed var(--border);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;color:var(--muted);cursor:pointer;
}
.collage-slot:hover{border-color:var(--turquoise)}
.collage-slot.filled{border-style:solid;cursor:default}
/* touch-action:none חובה לגרירה תקינה במגע (בלי זה הדפדפן "גונב" את
   התנועה לגלילת הדף, אותה בעיה שכבר תוקנה בגרירת אירוע/תמונה בלוח עצמו) */
.collage-slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;cursor:grab;touch-action:none;user-select:none}
.collage-slot-zoom{position:absolute;bottom:5px;left:8px;right:8px;width:calc(100% - 16px);z-index:2}
.collage-slot-remove{
  position:absolute;top:4px;left:4px;width:22px;height:22px;border-radius:50%;border:none;
  background:rgba(0,0,0,0.55);color:#fff;font-size:0.75rem;line-height:1;cursor:pointer;z-index:2;padding:0;
}

/* כיתובים: שכבה חופשית מעל כל הקולאז' (position:absolute יחסית ל-.collage-preview),
   לא בתוך grid-area של חריץ ספציפי — ר' renderCollageTexts */
/* width:max-content (לא auto) חובה כאן: אלמנט position:absolute עם left:X%
   ו-transform למרכוז מחשב את רוחב ה-shrink-to-fit לפי השטח הפנוי בין left
   לקצה הקונטיינר (בלי להתחשב ב-transform, שהוא ויזואלי-בלבד אחרי הלייאוט) —
   ב-left:50% זה נותן רק חצי מרוחב הקולאז', מה שדוחס את collage-text-content
   ל-min-width שלו וגורם לכיתוב "להתפרק" לאות בשורה. max-content עוקף את זה */
.collage-text{
  position:absolute;transform:translate(-50%,-50%);display:flex;align-items:center;
  gap:4px;width:max-content;max-width:92%;z-index:3;
}
.collage-text-handle{cursor:grab;touch-action:none;opacity:0.75;font-size:0.75rem;background:rgba(255,255,255,0.7);border-radius:4px;padding:1px 4px;flex-shrink:0}
/* white-space:nowrap (לא pre-wrap) בכוונה: כיתוב הוא שורה אחת קצרה, וזה גם
   מונע תקלת flex ידועה (min-width:auto מחשב item גמיש כ-0 ומאפשר לו
   להידחס עד שהטקסט "מתפרק" לאות בשורה) — nowrap מבטיח שה-min-content width
   של התא שווה לרוחב הטקסט המלא, אז flex-shrink לא יכול לדחוס אותו יותר מזה */
.collage-text-content{
  outline:none;cursor:text;white-space:nowrap;text-align:center;font-weight:700;
  padding:2px 6px;text-shadow:0 2px 6px rgba(0,0,0,0.45);
}
/* .modal-content input{width:100%} (למעלה) מנצח כל כלל עם אותה סגוליות
   (class+type = 0,1,1) לפי סדר-מקור בלבד — .collage-text-color לבד הוא רק
   (0,1,0) וגם ככה היה מפסיד. modal-content .collage-text-color מעלה
   לסגוליות (0,2,1) כדי לנצח בוודאות. גם input[type=color] לא נחתך למעגל
   ע"י border-radius על האלמנט עצמו — הריבוע הפנימי (הצבע עצמו) יושב
   ב-shadow DOM נפרד (color-swatch) שדורש עיצוב נקודתי משלו */
.modal-content .collage-text-color{
  width:22px;height:22px;padding:0;border:2px solid #fff;border-radius:50%;
  overflow:hidden;flex-shrink:0;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,0.35);
  -webkit-appearance:none;appearance:none;
}
.collage-text-color::-webkit-color-swatch-wrapper{padding:0;border-radius:50%}
.collage-text-color::-webkit-color-swatch{border:none;border-radius:50%}
.collage-text-color::-moz-color-swatch{border:none;border-radius:50%}
.collage-text-size-btn{
  width:20px;height:20px;border-radius:50%;border:none;background:rgba(255,255,255,0.9);
  color:var(--text);font-size:0.75rem;font-weight:800;line-height:1;cursor:pointer;
  flex-shrink:0;box-shadow:0 1px 3px rgba(0,0,0,0.3);padding:0;
}
.collage-text-remove{
  width:18px;height:18px;border-radius:50%;border:none;background:rgba(0,0,0,0.6);color:#fff;
  font-size:0.6rem;line-height:1;cursor:pointer;padding:0;flex-shrink:0;
}

/* ---- חלונית בחירת תמונות לתאריך ---- */
.photo-picker-content{max-width:520px;width:92vw}
.photo-picker-content .btn{margin-bottom:12px}
.photo-picker-count{font-size:0.8rem;font-weight:700;color:var(--muted);margin:-4px 0 12px}
.photo-picker-grid{display:flex;flex-wrap:wrap;gap:10px;max-height:320px;overflow-y:auto;padding-bottom:2px}
.photo-picker-thumb-wrap{
  position:relative;width:88px;height:88px;padding:0;border-radius:12px;cursor:pointer;
  border:2px solid transparent;box-shadow:var(--shadow-sm);background:none;overflow:hidden;
  transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
}
.photo-picker-thumb-wrap:hover{transform:scale(1.05);box-shadow:var(--shadow-md)}
.photo-picker-thumb{width:100%;height:100%;object-fit:cover;display:block}
.photo-picker-thumb-wrap.is-assigned{border-color:var(--primary)}
.photo-picker-badge{
  position:absolute;top:4px;left:4px;width:20px;height:20px;border-radius:50%;
  background:var(--primary);color:#fff;font-size:0.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;opacity:0;transform:scale(0.6);
  transition:opacity .15s ease, transform .15s ease;
}
.photo-picker-thumb-wrap.is-assigned .photo-picker-badge{opacity:1;transform:scale(1)}

/* אירועים לתאריך שנפתח, מתחת לגריד התמונות באותה חלונית "+" (ר'
   renderPhotoPickerEvents/addEventFromPhotoPicker ב-app.js) */
.picker-divider{border:none;border-top:1px solid var(--border);margin:16px 0 12px}
.picker-events-list{display:flex;flex-direction:column;gap:6px;max-height:160px;overflow-y:auto;margin-bottom:10px}
.picker-event-row{
  display:flex;align-items:center;justify-content:space-between;gap:8px;
  padding:7px 10px;border-radius:10px;background:var(--surface-soft);
  font-size:0.8rem;color:var(--text);
}
.picker-event-remove{
  flex:none;width:22px;height:22px;border-radius:50%;border:none;cursor:pointer;
  background:rgba(156,43,60,0.12);color:var(--primary);font-size:0.7rem;font-weight:800;
  display:flex;align-items:center;justify-content:center;transition:background .15s ease, color .15s ease;
}
.picker-event-remove:hover{background:var(--primary);color:#fff}
.picker-event-add{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.picker-event-add input{flex:1 1 140px;min-width:0;margin-top:0;padding:8px 10px;border:1px solid var(--border);border-radius:10px;font-family:inherit}
.picker-event-add input[type="time"]{flex:0 0 110px}
.picker-event-add .btn{margin-bottom:0;flex:none}

/* ===================== Modal ===================== */
.modal{position:fixed;inset:0;display:flex;align-items:center;justify-content:center;background:rgba(56,39,26,0.42);backdrop-filter:blur(4px);z-index:50;overflow-y:auto;padding:24px 12px}
.hidden{display:none}
.modal-content{background:var(--surface);padding:22px;border-radius:var(--radius-lg);min-width:320px;box-shadow:var(--shadow-lg);animation:fadeSlideIn .18s ease;max-height:calc(100vh - 48px);overflow-y:auto;margin:auto}
.modal-content h3{margin:0 0 14px;color:var(--primary-dark);font-family:'Frank Ruhl Libre','David',serif}
.modal-content label{display:block;font-size:0.85rem;font-weight:700;margin-bottom:10px;color:var(--text)}

.welcome-content{max-width:420px;width:100%;text-align:center}
.welcome-content .modal-actions{justify-content:center}

/* ===================== Upgrade pricing cards ===================== */
.upgrade-content{max-width:640px;width:100%}
.upgrade-header{text-align:center;margin-bottom:18px}
.upgrade-title{
  margin:0 0 6px;font-family:'Frank Ruhl Libre','David',serif;font-weight:900;font-size:1.5rem;
  background:linear-gradient(90deg,var(--primary),var(--turquoise-dark),var(--gold-dark));
  -webkit-background-clip:text;background-clip:text;color:transparent;
  animation:upgradeTitleGlow 2.4s ease-in-out infinite;
}
@keyframes upgradeTitleGlow{0%,100%{filter:brightness(1)}50%{filter:brightness(1.25)}}
.upgrade-subtitle{margin:0 0 10px;font-weight:800;font-size:1.05rem;color:var(--primary-dark)}
.upgrade-intro{max-width:480px;margin:0 auto;text-align:center}

.upgrade-tiers{display:flex;gap:16px;flex-wrap:wrap;margin:18px 0;justify-content:center;align-items:stretch}
.tier-card{
  position:relative;flex:1 1 230px;max-width:260px;display:flex;flex-direction:column;gap:8px;
  padding:24px 20px 20px;border-radius:var(--radius-lg);border:2px solid transparent;
  cursor:pointer;text-align:center;overflow:hidden;
  box-shadow:var(--shadow-sm);transition:transform .18s ease, border-color .18s ease, box-shadow .18s ease;
}
.tier-card::before{
  content:'';position:absolute;inset:0;z-index:-1;opacity:0.9;transition:opacity .18s ease;
}
.tier-basic::before{background:linear-gradient(160deg,var(--primary-tint) 0%,var(--surface) 65%)}
.tier-premium::before{background:linear-gradient(160deg,var(--gold-tint) 0%,var(--turquoise-tint) 100%)}
.tier-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-md)}
.tier-card input[type="radio"]{position:absolute;top:16px;left:16px;width:19px;height:19px;accent-color:var(--primary);margin:0}
.tier-card:has(input:checked){
  border-color:var(--primary);box-shadow:0 14px 30px rgba(156,43,60,0.26);transform:translateY(-4px);
}
.tier-card:has(input:checked)::before{opacity:1}
.tier-badge{
  position:absolute;top:-12px;right:50%;transform:translateX(50%);white-space:nowrap;
  background:linear-gradient(180deg,#F0C36D,var(--gold));color:#3d2c0a;font-size:0.72rem;font-weight:800;
  padding:4px 12px;border-radius:999px;box-shadow:0 6px 14px rgba(214,148,31,0.4);
}
.tier-name{font-weight:800;color:var(--primary-dark);font-size:0.98rem;margin-top:8px}
.tier-price-row{display:flex;align-items:baseline;justify-content:center;gap:8px;flex-wrap:wrap}
.tier-price{font-size:1.7rem;color:var(--primary);line-height:1;font-family:'Frank Ruhl Libre','David',serif}
.tier-photos{font-size:0.78rem;font-weight:700;color:var(--turquoise-dark);background:var(--surface);border-radius:999px;padding:3px 10px}
.tier-features{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:7px;text-align:right}
.tier-features li{font-size:0.78rem;color:var(--text);line-height:1.4}

.upgrade-payment-method{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin:4px 0 14px}
.payment-btn{
  position:relative;flex:1 1 130px;max-width:160px;display:flex;flex-direction:column;align-items:center;gap:4px;
  padding:14px 10px;border-radius:var(--radius-lg);border:2px solid var(--border);
  cursor:pointer;text-align:center;background:var(--surface);box-shadow:var(--shadow-sm);
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.payment-btn input[type="radio"]{position:absolute;opacity:0;width:0;height:0;margin:0}
.payment-btn:hover{transform:translateY(-2px);box-shadow:var(--shadow-md)}
.payment-btn:has(input:checked){border-color:var(--primary);box-shadow:0 10px 22px rgba(156,43,60,0.22);transform:translateY(-2px)}
.payment-btn-icon{font-size:1.6rem;line-height:1}
.payment-btn-label{font-weight:800;font-size:0.85rem;color:var(--text)}
#upgradePhoneRow{margin-bottom:12px}
#upgradePhoneRow label{display:block;font-size:0.78rem;font-weight:700;color:var(--primary-dark);margin-bottom:2px}

.modal-content input{width:100%;margin-top:6px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;font-family:inherit}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:6px}

.my-links-row{
  display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;
  padding:12px 14px;border:1.5px solid var(--border);border-radius:var(--radius);
  background:var(--surface);cursor:pointer;text-align:right;font-family:inherit;
  transition:transform .15s ease,border-color .15s ease,box-shadow .15s ease;
}
.my-links-row:hover{transform:translateY(-2px);border-color:var(--primary);box-shadow:var(--shadow-md)}
.my-links-row.is-active{border-color:var(--turquoise-dark);background:var(--turquoise-tint)}
.my-links-row-label{font-weight:800;color:var(--primary-dark);font-size:0.92rem}
.sales-table{width:100%;border-collapse:collapse;font-size:0.85rem}
.sales-table th,.sales-table td{padding:8px 10px;text-align:right;border-bottom:1px solid var(--border)}
.sales-table th{color:var(--primary-dark);font-weight:800;position:sticky;top:0;background:var(--surface)}

/* מצב "סטטוס בלבד": אותו upgradeModal משמש גם להצגת התקדמות תפיסת קישור-מתנה /
   המתנה לאישור תשלום, לא רק להצעת המחיר עצמה — במצב הזה מסתירים את כרטיסי
   המחיר וכפתור הרכישה כדי שלא ייראה כאילו מוצעת הצעת שדרוג בתשלום */
.upgrade-content.status-only .upgrade-header,
.upgrade-content.status-only .upgrade-tiers,
.upgrade-content.status-only .upgrade-payment-method,
.upgrade-content.status-only #upgradePhoneRow,
.upgrade-content.status-only #startUpgrade{display:none}

/* ===================== Mobile sidebar toggle ===================== */
.mobile-panel-toggle{display:none}
.sidebar-backdrop{display:none}

@media(max-width:900px){
  header{padding:12px 16px}
  .month-nav{padding:8px 16px 12px}
  .status-row{padding:0 16px}
  main{grid-template-columns:1fr;padding:8px 16px 90px;gap:14px}
  .canvas-wrap{order:-1}

  .mobile-panel-toggle{
    display:flex;position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:40;
  }
  .sidebar{
    position:fixed;left:0;right:0;bottom:0;top:auto;max-height:78vh;
    border-radius:20px 20px 0 0;transform:translateY(105%);transition:transform .28s ease;
    box-shadow:0 -20px 50px rgba(56,39,26,0.28);z-index:41;
  }
  .sidebar.open{transform:translateY(0)}
  .sidebar-backdrop{
    display:none;position:fixed;inset:0;background:rgba(56,39,26,0.35);z-index:39;
  }
  body.sidebar-open .sidebar-backdrop{display:block}
}

/* ===================== מובייל: רק טלפון, לא טאבלט/מחשב =====================
   הבלוק הזה (ולא ה-900px למעלה, שהיה קיים כבר קודם ומיועד גם למסכים בינוניים)
   מיועד במפורש רק לטלפון: גם 480px (חוצץ בבטחה גם אייפד לאורך, 768px) וגם
   pointer:coarse (מגע אמיתי) ביחד — לא רוחב לבד, כי חלון דפדפן מוקטן/לא-
   מוסך במחשב יכול לרדת מתחת ל-480px ולהפעיל בטעות התנהגות טלפון (למשל
   פתיחת חלונית באמצע גרירה עם עכבר) גם אצל מי שכלל לא בטלפון. עכבר לעולם
   לא ייחשב מגע, לא משנה כמה החלון צר. כל מה שבפנים לא משפיע על טאבלט/
   מחשב בשום מצב */
@media(max-width:480px) and (pointer:coarse){
  /* לוח התאריכים הוא בעצם עמוד A4 לרוחב (297x210) — זו הצורה שבאמת תודפס,
     ותמונות/טקסט על גביו ממוקמים לפי אחוזים מהעמוד הזה. אם נשנה את הצורה
     שלו (ריבועי/לאורך במקום לרוחב) מה שרואים בטלפון כבר לא יהיה מה שבאמת
     יודפס. במקום זה, כדי שלא ייראה צר וקטן, קובעים את הגודל לפי הגובה
     הפנוי במסך ולא רק לפי הרוחב — כך העמוד גדל ותופס יותר מקום זמין, בלי
     לעוות את היחס האמיתי בין הרוחב לגובה */
  .canvas-page{max-width:max(240px, calc((100dvh - 320px) * 297 / 210))}

  /* שם החודש (clamp(1.5rem,3.8cqw,2.8rem) בכלל ה-base) — ה-1.5rem הוא רצפה
     קבועה שמתאימה לקנווס בגודל דסקטופ, אבל בקנווס קטן מאוד בטלפון (ר' מעלה)
     3.8cqw יוצא קטן בהרבה מ-1.5rem, ואז clamp "נתקע" על הרצפה הגדולה מדי -
     הטקסט חורג/נחתך משמאל כי הוא רחב יותר מהקופסה שלו. רצפה נמוכה יותר רק
     כאן פותרת את זה בלי לגעת בגודל בדסקטופ (שם 3.8cqw תמיד גדול מ-1.5rem
     ממילא, אז הרצפה שם אף פעם לא נכנסת לתמונה) */
  .canvas-month-label{font-size:clamp(0.9rem,3.8cqw,2.8rem)}

  .controls-more-toggle{display:inline-flex}
  .controls-more{
    display:none;position:absolute;left:16px;right:16px;top:100%;margin-top:6px;
    flex-direction:column;gap:6px;padding:10px;z-index:38;
    background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md,12px);
    box-shadow:var(--shadow-lg);
  }
  .controls-more.open{display:flex}
  .controls-more .btn{width:100%}
  .header-meta{position:relative}

  /* בועות ה-הוסף-תמונה/הוסף-אירוע (day-bubble-btn, ר' styles.css למעלה
     ו-renderMonth ב-app.js): בדסקטופ/טאבלט הן נשארות בדיוק כמו שהיו —
     בועה גדולה שמתגלה ב-hover. בטלפון מבקשים בלי שום סימון בכלל על התאריך
     — הקשה על תאריך ריק פותחת ישר את חלונית הוספת-תמונה/אירוע (ר' ה-click
     listener על .day ב-renderMonth, שבודק isPhoneMode()) */
  .day-bubble-btn{display:none}
  .day-deselect-btn{display:flex}
  /* כפתורי הגדלה/הקטנה על התא בלוח עצמו מיותרים בטלפון — יש כבר גרירה
     ותצוגה מקדימה גדולה עם שינוי-גודל בחלונית (ר' datePreviewBox), ותא
     כה קטן פשוט לא מכיל בנוחות 3-4 כפתורי-פינה יחד. בדסקטופ/טאבלט נשאר
     כמו שהיה */
  .day-zoom-controls{display:none}

  .date-preview-wrap:not(.hidden){display:block}

  /* כפתור הסגירה של חלונית הוספת-תמונה/אירוע נשאר תמיד גלוי בתחתית, גם
     כשגוללים בתוכה — כדי שלא יהיה צריך לגלול עד הסוף כדי למצוא איך סוגרים.
     בטלפון בלבד, כי רק שם התצוגה המקדימה מאריכה את החלונית מספיק בשביל
     שזה יהיה רלוונטי */
  .photo-picker-content .modal-actions{
    position:sticky;bottom:-22px;margin:6px -22px -22px;padding:12px 22px;
    background:var(--surface);border-top:1px solid var(--border);
  }

  /* אצבע פחות מדויקת מסמן עכבר — מגדילים את שטח האחיזה של ידיות הגרירה/
     שינוי-הגודל. הגדלה ויזואלית בלבד של הריבוע עצמו, בלי לשנות את מנגנון
     ה-pointer events */
  .overlay-handle{width:24px;height:24px}
  .block-resize-handle{width:24px;height:24px}

  /* בלי touch-action:none הדפדפן "גונב" את התנועה כדי לגלול את הדף במקום
     להעביר אותה לגרירת האירוע/הטקסט עצמו (ר' beginDrag ב-app.js) — זו
     הסיבה שגרירה של אירוע לא הרגישה אמינה במגע */
  .day .floating-image,.day .floating-text,.day .event-bubble{touch-action:none}
}

/* ===================== Greeting card (שנה טובה לחברים) ===================== */
.greeting-fab{
  position:fixed;left:18px;bottom:18px;z-index:40;
  width:60px;height:60px;border-radius:50%;border:none;cursor:pointer;
  font-size:1.6rem;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(180deg,#F0C36D,var(--gold));
  box-shadow:0 10px 26px rgba(214,148,31,0.45);
  transition:transform .3s cubic-bezier(.34,1.56,.64,1), box-shadow .22s ease;
}
.greeting-fab:hover{transform:translateY(-3px) scale(1.06);box-shadow:0 16px 34px rgba(214,148,31,0.55)}
.greeting-fab:active{transform:translateY(-1px) scale(0.94)}

.gc-recipient-choice{display:flex;gap:14px;margin-bottom:10px}
.modal-content .gc-recipient-option{display:flex;align-items:center;gap:6px;font-size:0.9rem;font-weight:500;cursor:pointer;margin-bottom:0}
.gc-recipient-option input{width:auto;margin:0}

.greeting-preview-wrap{display:flex;justify-content:center;margin:14px 0}

.gc-card{
  width:260px;aspect-ratio:210/148.5;padding:18px 14px;border-radius:16px;
  background:#fdfaf3 url('assets/greeting-card/rosh-hashana-frame.png') center/contain no-repeat;
  border:2px solid var(--gold);box-shadow:var(--shadow-sm);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;
  text-align:center;
}
.gc-card-decor{display:none}
.gc-card-title{font-family:'Suez One','Frank Ruhl Libre',serif;font-size:1.25rem;color:var(--primary-dark)}
.gc-card-line{font-family:'Suez One','Frank Ruhl Libre',serif;font-size:1.05rem;color:var(--text)}
.gc-card-sign{margin-top:1px;font-size:0.85rem;color:var(--muted)}
.gc-card-name{font-family:'Frank Ruhl Libre',serif;font-weight:800;font-size:1.15rem;color:var(--primary)}

/* רשת 18 העותקים ל-A4, נבנית מחוץ למסך רק לצילום ה-PDF (ר' downloadGreetingCard
   ב-app.js) — לא מוצגת למשתמשת, רק נלכדת ע"י html-to-image */
.gc-print-grid{display:grid;grid-template-columns:repeat(3,1fr);grid-template-rows:repeat(6,1fr);background:#fff}
.gc-print-grid .gc-card{width:100%;height:100%;aspect-ratio:auto;border-radius:0;border:1px dashed var(--gold-dark);box-shadow:none}

/* ===================== Footer ===================== */
.site-footer{
  text-align:center;
  padding:22px 20px 18px;
  font-size:0.82rem;
  color:var(--muted);
}
.site-footer a{
  color:var(--primary-dark);
  font-weight:600;
  text-decoration:none;
  border-bottom:1px solid var(--border);
  transition:color .15s ease, border-color .15s ease;
}
.site-footer a:hover{color:var(--primary);border-color:var(--primary)}

/* Ctrl+P ישיר על העמוד החי — ה-export האמיתי פותח חלון נפרד עם רק הקנווס בגודל A4 מדויק */
@media print{
  header,.sidebar,.month-nav,.status-row,.modal,.mobile-panel-toggle,.sidebar-backdrop,.site-footer,.greeting-fab{display:none!important}
  main{display:block;padding:0;max-width:none}
  .canvas-wrap{padding:0}
  .canvas-page{max-width:none;width:297mm;height:210mm;box-shadow:none;border-radius:0;margin:0 auto}
  @page{size:A4 landscape;margin:0}
}