:root {
  color-scheme: dark;
  --bg: #130a1e;
  --panel: rgba(255, 255, 255, 0.07);
  --text: rgba(255, 255, 255, 0.93);
  --muted: rgba(255, 255, 255, 0.58);
  --border: rgba(255, 255, 255, 0.11);
  --shadow: 0 18px 44px rgba(0, 0, 0, 0.4);
  --brand: #d946ef;
  --brand2: #a855f7;
  --today: #f472b6;
  --focus: rgba(217, 70, 239, 0.35);
  --radius: 18px;
  --radius-sm: 12px;
  --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", "Heebo", "Rubik", Arial, sans-serif;
}

* {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
}

body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(900px 600px at 75% 5%,  rgba(217, 70, 239, 0.32), transparent 60%),
    radial-gradient(700px 500px at 15% 85%, rgba(168, 85, 247, 0.22), transparent 55%),
    radial-gradient(500px 400px at 50% 50%, rgba(244, 114, 182, 0.10), transparent 60%),
    linear-gradient(180deg, #0d0617 0%, var(--bg) 55%, #0d0617 100%);
}

.app {
  max-width: 980px;
  margin: 0 auto;
  padding: 20px 16px 34px;
}

.header {
  padding: 10px 0 18px;
}

.brand {
  display: flex;
  align-items: center;
  gap: 14px;
}

.logo {
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: rgba(217, 70, 239, 0.12);
  border: 1px solid rgba(217, 70, 239, 0.28);
  border-radius: 14px;
  box-shadow: var(--shadow);
}

.title {
  margin: 0;
  font-size: 20px;
  letter-spacing: 0.1px;
  background: linear-gradient(135deg, #f0abfc 0%, #c084fc 60%, #f472b6 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.subtitle {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.35;
}

.main {
  display: grid;
  gap: 16px;
}

.panel {
  background: var(--panel);
  border: 1px solid rgba(217, 70, 239, 0.18);
  border-radius: var(--radius);
  box-shadow: var(--shadow), 0 0 0 1px rgba(168, 85, 247, 0.06) inset;
  backdrop-filter: blur(10px);
  overflow: hidden;
}

.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 14px 10px;
}

.toolbar__group {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}

.iconbtn {
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(217, 70, 239, 0.22);
  background: rgba(217, 70, 239, 0.08);
  color: var(--text);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease;
}

.iconbtn:hover {
  transform: translateY(-1px);
  background: rgba(217, 70, 239, 0.15);
  border-color: rgba(217, 70, 239, 0.38);
}

.iconbtn:active {
  transform: translateY(0);
}

.iconbtn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 6px var(--focus);
}

.monthtitle {
  flex: 1;
  min-width: 0;
  text-align: center;
  display: grid;
  gap: 2px;
}

.monthtitle__main {
  font-weight: 800;
  letter-spacing: 0.2px;
  font-size: 18px;
  color: #f0abfc;
}

.monthtitle__heb {
  font-size: 13px;
  color: rgba(240, 171, 252, 0.7);
  font-weight: 500;
  letter-spacing: 0.3px;
}

.monthtitle__sub {
  font-size: 12px;
  color: var(--muted);
}

.calendar {
  border-top: 1px solid rgba(217, 70, 239, 0.14);
}

.dow {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 0;
  background: rgba(90, 20, 110, 0.22);
  border-bottom: 1px solid rgba(217, 70, 239, 0.12);
}

.dow__cell {
  padding: 10px 6px;
  text-align: center;
  font-size: 12px;
  color: rgba(240, 171, 252, 0.85);
  font-weight: 600;
}

.grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
}

.cell {
  -webkit-appearance: none;
  appearance: none;
  position: relative;
  min-height: 72px;
  padding: 8px 6px;
  border: none;
  border-bottom: 1px solid rgba(217, 70, 239, 0.1);
  border-left: 1px solid rgba(217, 70, 239, 0.07);
  display: flex;
  flex-direction: column;
  gap: 3px;
  background: rgba(255, 255, 255, 0.025);
  color: var(--text);
  font-family: var(--font);
  cursor: pointer;
  text-align: center;
  align-items: center;
  transition: background 100ms ease;
}

.cell:hover {
  background: rgba(217, 70, 239, 0.09);
}

.cell:nth-child(7n) {
  border-left: none;
}

.cell--muted {
  background: rgba(255, 255, 255, 0.012);
  color: rgba(255, 255, 255, 0.38);
}

.cell--muted .cell__heb {
  color: rgba(240, 171, 252, 0.28);
}

.cell--selected {
  outline: 2px solid rgba(217, 70, 239, 0.65);
  outline-offset: -2px;
  background: rgba(217, 70, 239, 0.1);
}

.cell__num {
  font-size: 14px;
  font-weight: 700;
  line-height: 1;
  color: rgba(255, 255, 255, 0.94);
  letter-spacing: 0.3px;
}

.cell__heb {
  font-size: 10px;
  color: rgba(240, 171, 252, 0.5);
  line-height: 1.2;
}

.cell__status {
  margin-top: auto;
  font-size: 10px;
  color: rgba(255, 255, 255, 0.9);
  padding: 2px 6px;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  border: 1px solid rgba(255, 255, 255, 0.14);
}

.cell__status--day {
  background: rgba(244, 114, 182, 0.22);
  border-color: rgba(244, 114, 182, 0.38);
  color: #fce7f3;
}

.cell__status--night {
  background: rgba(168, 85, 247, 0.22);
  border-color: rgba(168, 85, 247, 0.38);
  color: #f3e8ff;
}

.cell__feelings-dot {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.7;
  margin-right: 4px;
  vertical-align: middle;
  position: relative;
  top: -1px;
}

/* ── פילים לפי קטגוריה ── */
.cell__pill {
  font-size: 9px;
  font-weight: 700;
  padding: 2px 5px;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
  letter-spacing: 0.2px;
  line-height: 1.4;
}

/* וסת — סגול/ורוד (dark default) */
.cell__pill--veset {
  background: rgba(217, 70, 239, 0.2);
  border: 1px solid rgba(217, 70, 239, 0.38);
  color: #f0abfc;
}

/* זמן הפסק כשיר — ענבר, גבול מקווקו */
.cell__pill--hefsek-eligible {
  background: rgba(251, 191, 36, 0.12);
  border: 1px dashed rgba(251, 191, 36, 0.45);
  color: #fde68a;
}

/* הפסק בוצע (ok / fail) — ענבר מלא */
.cell__pill--hefsek {
  background: rgba(251, 191, 36, 0.22);
  border: 1px solid rgba(251, 191, 36, 0.5);
  color: #fef3c7;
}

/* שבעה נקיים — ירוק/טורקיז */
.cell__pill--nekiim {
  background: rgba(52, 211, 153, 0.16);
  border: 1px solid rgba(52, 211, 153, 0.35);
  color: #a7f3d0;
}

/* חשש הפסקת גלולות/התקן — כתום */
.cell__pill--veset-pills {
  background: rgba(251, 146, 60, 0.16);
  border: 1px dashed rgba(251, 146, 60, 0.5);
  color: #fdba74;
}

/* הפסקת גלולות/התקן — סגול-ורוד */
.cell__pill--pill-stop {
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.4);
  color: #d8b4fe;
}

/* וסתות פחות מצויים (דילוג / שבוע / סירוג) — 青 (teal-cyan) */
.cell__pill--veset-rare {
  background: rgba(6, 182, 212, 0.14);
  border: 1px dashed rgba(6, 182, 212, 0.45);
  color: #67e8f9;
}

/* ── תג "2/3" — הכנה לקביעות וסת ── */
.cell__approaching-badge {
  position: absolute;
  top: 3px;
  left: 4px;
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
  padding: 2px 4px;
  border-radius: 5px;
  background: rgba(251, 146, 60, 0.18);
  border: 1px solid rgba(251, 146, 60, 0.45);
  color: #fb923c;
  pointer-events: none;
  letter-spacing: 0.01em;
}

/* ── אינדיקטורי בדיקות ── */
.cell__checks {
  display: flex;
  gap: 3px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 1px;
}

.cell__check {
  font-size: 9px;
  font-weight: 700;
  border-radius: 4px;
  padding: 1px 3px;
  line-height: 1.3;
}

.cell__check--ok   { color: #86efac; background: rgba(34, 197, 94, 0.13); }
.cell__check--fail { color: #fca5a5; background: rgba(239, 68, 68, 0.15); }

/* שמור cell__mark לתאימות לאחור */
.cell__mark {
  font-size: 10px;
  color: #fdf4ff;
  background: rgba(217, 70, 239, 0.2);
  border: 1px solid rgba(217, 70, 239, 0.35);
  padding: 2px 6px;
  border-radius: 999px;
  width: max-content;
  max-width: 100%;
}

.cell--today {
  background: linear-gradient(180deg, rgba(244, 114, 182, 0.2), rgba(168, 85, 247, 0.08));
  outline: 2px solid rgba(244, 114, 182, 0.6);
  outline-offset: -2px;
}

.cell--today .cell__num {
  color: #fce7f3;
  font-weight: 900;
}

@media (max-width: 520px) {
  .cell {
    min-height: 62px;
    padding: 6px 4px;
  }

  .cell__num {
    font-size: 13px;
  }

  .cell__heb {
    font-size: 10px;
  }

  .cell__pill,
  .cell__mark,
  .cell__status {
    font-size: 8px;
    padding: 1px 3px;
  }

  .monthtitle__main {
    font-size: 16px;
  }
}

@media (max-width: 360px) {
  .cell {
    min-height: 54px;
    padding: 5px 3px;
  }

  .cell__heb {
    display: none;
  }
}

@media (max-width: 380px) {
  .brand {
    gap: 8px;
  }

  .logo {
    width: 36px;
    height: 36px;
    font-size: 18px;
    border-radius: 10px;
    flex-shrink: 0;
  }

  .title {
    font-size: 16px;
  }

  .subtitle {
    font-size: 11px;
  }
}

.drawer {
  border-top: 1px solid rgba(217, 70, 239, 0.12);
  background: rgba(60, 10, 80, 0.18);
  padding: 12px 14px 14px;
  display: grid;
  gap: 10px;
}

.drawer__row {
  display: grid;
  gap: 6px;
}

.drawer__row--controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.drawer__title {
  font-weight: 800;
  letter-spacing: 0.2px;
  color: #f0abfc;
}

.drawer__hint {
  font-size: 12px;
  color: var(--muted);
}

.divider {
  width: 1px;
  height: 26px;
  background: rgba(217, 70, 239, 0.22);
  margin-inline: 2px;
}

.btn {
  height: 40px;
  padding: 0 14px;
  border-radius: 14px;
  border: 1px solid rgba(217, 70, 239, 0.22);
  background: rgba(217, 70, 239, 0.08);
  color: var(--text);
  cursor: pointer;
  transition: transform 120ms ease, background 120ms ease, border-color 120ms ease, opacity 120ms ease;
  font-size: 14px;
}

.btn:hover {
  transform: translateY(-1px);
  background: rgba(217, 70, 239, 0.16);
  border-color: rgba(217, 70, 239, 0.38);
}

.btn:active {
  transform: translateY(0);
}

.btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  transform: none;
}

.btn--primary {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.85), rgba(168, 85, 247, 0.75));
  border-color: rgba(217, 70, 239, 0.6);
  color: #fff;
  font-weight: 700;
}

.btn--primary:hover {
  background: linear-gradient(135deg, rgba(217, 70, 239, 0.98), rgba(168, 85, 247, 0.88));
  border-color: rgba(217, 70, 239, 0.8);
}

.btn--ghost {
  background: transparent;
  border-color: rgba(255, 255, 255, 0.14);
}

.btn--ghost:hover {
  background: rgba(255, 255, 255, 0.06);
}

.toggle {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: rgba(255, 255, 255, 0.86);
  user-select: none;
}

.toggle input {
  width: 18px;
  height: 18px;
  accent-color: var(--brand);
}

.summary {
  font-size: 12px;
  color: rgba(240, 171, 252, 0.75);
  line-height: 1.5;
}

.popover[hidden] {
  display: none;
}

.popover {
  position: fixed;
  z-index: 60;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
}

.popover__card {
  position: absolute;
  width: min(340px, calc(100vw - 28px));
  border-radius: 18px;
  border: 1px solid rgba(217, 70, 239, 0.28);
  background: rgba(22, 8, 35, 0.97);
  box-shadow: 0 22px 60px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(168, 85, 247, 0.08) inset;
  backdrop-filter: blur(16px);
  transform-origin: top right;
}

.popover__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 12px;
  border-bottom: 1px solid rgba(217, 70, 239, 0.15);
}

.popover__title {
  font-weight: 900;
  letter-spacing: 0.2px;
  font-size: 14px;
  color: #f0abfc;
}

.popover__x {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(217, 70, 239, 0.2);
  background: rgba(217, 70, 239, 0.08);
  color: var(--text);
  cursor: pointer;
  transition: background 120ms ease;
}

.popover__x:hover {
  background: rgba(217, 70, 239, 0.18);
}

.popover__body {
  padding: 10px 14px 6px;
  color: rgba(255, 255, 255, 0.86);
  font-size: 13px;
  line-height: 1.55;
  white-space: pre-line;
}

.popover__times {
  margin-bottom: 10px;
  white-space: nowrap;
}

.popover__question {
  margin-top: 8px;
  font-weight: 600;
}

.popover__feelings-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: 12px;
  color: rgba(255, 255, 255, 0.7);
  margin-top: 10px;
}

.popover__feelings-input {
  width: 100%;
  min-height: 60px;
  padding: 7px 10px;
  border-radius: 8px;
  border: 1px solid rgba(255,255,255,0.2);
  background: rgba(255,255,255,0.08);
  color: inherit;
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.45;
  resize: vertical;
  outline: none;
  direction: rtl;
}
.popover__feelings-input:focus {
  border-color: var(--brand);
  background: rgba(255,255,255,0.12);
}
.popover__feelings-input::placeholder {
  color: rgba(255,255,255,0.38);
}

.popover__info {
  margin-bottom: 4px;
}

.popover__end-sighting {
  margin: 8px 0 4px;
}

.popover__end-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: rgba(240, 200, 255, 0.75);
  flex-wrap: wrap;
}

.popover__feelings-view {
  margin: 8px 0;
  padding: 8px 10px;
  border-radius: 8px;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.13);
  font-size: 13px;
  line-height: 1.5;
  white-space: normal;
}

.popover__actions {
  padding: 10px 14px 14px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-start;
}

/* ── שדות זמן כפולים בהגדרות ── */
.setting-time-pair {
  display: flex;
  flex-direction: column;
  gap: 5px;
  align-items: flex-end;
}

.setting-time-field {
  display: flex;
  align-items: center;
  gap: 5px;
}

.setting-time-lbl {
  font-size: 0.72rem;
  color: var(--text);
  opacity: 0.55;
  white-space: nowrap;
}

/* שדות שעה — תמיד LTR כדי להציג HH:MM בסדר הנכון */
input[type="time"] {
  direction: ltr;
}

/* ── סימון הפסקת גלולות בפופ-אפ ── */
.popover__pills-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(168, 85, 247, 0.2);
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── כפתורי הפסק טהרה / שבעה נקיים בפופ-אפ ── */
.popover__hefsek-section {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid rgba(147, 51, 234, 0.18);
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.popover__hefsek-title {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 2px;
}

.popover__check-row {
  display: flex;
  align-items: center;
  gap: 6px;
}

.popover__check-label {
  font-size: 0.8rem;
  flex: 1;
  color: var(--text);
  opacity: 0.85;
}

.popover__check-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 3px 10px;
  border-radius: 6px;
  border: 1px solid rgba(147, 51, 234, 0.3);
  background: rgba(147, 51, 234, 0.07);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  line-height: 1.4;
}

.popover__check-btn--ok {
  border-color: rgba(34, 197, 94, 0.45);
  color: #16a34a;
}

.popover__check-btn--ok:hover {
  background: rgba(34, 197, 94, 0.15);
  border-color: rgba(34, 197, 94, 0.7);
}

.popover__check-btn--ok.popover__check-btn--active {
  background: rgba(34, 197, 94, 0.22);
  border-color: rgba(34, 197, 94, 0.75);
  color: #15803d;
}

.popover__check-btn--fail {
  border-color: rgba(244, 63, 94, 0.4);
  color: #e11d48;
}

.popover__check-btn--fail:hover {
  background: rgba(244, 63, 94, 0.13);
  border-color: rgba(244, 63, 94, 0.65);
}

.popover__check-btn--fail.popover__check-btn--active {
  background: rgba(244, 63, 94, 0.2);
  border-color: rgba(244, 63, 94, 0.7);
  color: #be123c;
}

.popover__check-btn--del {
  border-color: rgba(100, 100, 100, 0.3);
  color: var(--text);
  opacity: 0.6;
  font-size: 0.75rem;
}

.popover__check-btn--del:hover {
  opacity: 1;
  background: rgba(244, 63, 94, 0.1);
  border-color: rgba(244, 63, 94, 0.4);
  color: #e11d48;
}

.btn--danger {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.88), rgba(239, 68, 68, 0.6));
  border-color: rgba(244, 63, 94, 0.6);
  color: #fff;
  font-weight: 700;
}

.btn--danger:hover {
  background: linear-gradient(135deg, rgba(244, 63, 94, 0.98), rgba(239, 68, 68, 0.75));
}

/* ── Modal הגדרות ── */
.modal[hidden] { display: none; }

.modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}

.modal__card {
  position: relative;
  width: min(500px, 100%);
  max-height: 90vh;
  max-height: 90svh;
  display: flex;
  flex-direction: column;
  border-radius: 22px;
  border: 1px solid rgba(217, 70, 239, 0.28);
  background: rgba(20, 6, 32, 0.98);
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(168, 85, 247, 0.07) inset;
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

.modal__header {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 16px 18px 14px;
  border-bottom: 1px solid rgba(217, 70, 239, 0.14);
}

.modal__title {
  font-size: 18px;
  font-weight: 900;
  color: #f0abfc;
  letter-spacing: 0.2px;
}

.modal__x {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: 1px solid rgba(217, 70, 239, 0.2);
  background: rgba(217, 70, 239, 0.08);
  color: var(--text);
  cursor: pointer;
  font-size: 14px;
  transition: background 120ms ease;
}
.modal__x:hover { background: rgba(217, 70, 239, 0.2); }

/* ── לשוניות ── */
.modal__tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 8px 14px 0;
  flex-shrink: 0;
  border-bottom: 1px solid rgba(217, 70, 239, 0.14);
}

.tab-btn {
  padding: 7px 13px 9px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 10px 10px 0 0;
  background: transparent;
  color: var(--muted);
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: -1px;
  transition: color 120ms, background 120ms;
}
.tab-btn[aria-selected="true"] {
  color: #f0abfc;
  border-bottom-color: rgba(217, 70, 239, 0.75);
  background: rgba(217, 70, 239, 0.06);
}
.tab-btn:hover:not([aria-selected="true"]) {
  color: var(--text);
  background: rgba(217, 70, 239, 0.04);
}

.modal__body {
  flex: 1;
  overflow-y: auto;
  padding: 14px 16px 18px;
}
/* גלילה חלקה + סקרולבר מינימליסטי */
.modal__body::-webkit-scrollbar { width: 4px; }
.modal__body::-webkit-scrollbar-track { background: transparent; }
.modal__body::-webkit-scrollbar-thumb { background: rgba(217,70,239,0.3); border-radius: 4px; }

/* ── כרטיס מודל צר (היסטוריה) ── */
.modal__card--narrow { width: min(340px, 100%); }

/* ── טבלת היסטוריית ראיות ── */
.history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
  direction: rtl;
}
.history-table th,
.history-table td {
  padding: 8px 12px;
  text-align: center;
  border-bottom: 1px solid rgba(217, 70, 239, 0.12);
}
.history-table th {
  font-size: 12px;
  font-weight: 600;
  color: rgba(240, 200, 255, 0.6);
  letter-spacing: 0.03em;
  padding-bottom: 10px;
}
.history-table tbody tr:last-child td { border-bottom: none; }
.history-table tbody tr:hover { background: rgba(217, 70, 239, 0.05); }
.history-empty {
  text-align: center;
  color: rgba(240, 200, 255, 0.45);
  padding: 24px 0;
  font-size: 14px;
}

/* ── פיזור הפלגות ("ימים שנבוכה") ── */
.history-haflagot {
  margin-top: 18px;
  padding: 14px 16px 10px;
  border-top: 1px solid rgba(217, 70, 239, 0.15);
}
.haf-strip__title {
  font-size: 12px;
  font-weight: 600;
  color: rgba(240, 200, 255, 0.6);
  margin-bottom: 14px;
  text-align: center;
  letter-spacing: 0.03em;
}
.haf-strip__track {
  position: relative;
  height: 48px;
  margin: 0 8px;
  direction: ltr; /* מיקום נקודות לפי ערך מספרי, ללא RTL */
}
.haf-strip__track::before {
  content: "";
  position: absolute;
  top: 14px;
  left: 0;
  right: 0;
  height: 2px;
  background: rgba(217, 70, 239, 0.2);
  border-radius: 1px;
}
.haf-strip__dot {
  position: absolute;
  top: 0;
  left: var(--pct);
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.haf-strip__dot::after {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #d946ef;
  box-shadow: 0 0 6px rgba(217, 70, 239, 0.5);
}
.haf-strip__dot[data-count="1"]::after { opacity: 0.6; width: 8px; height: 8px; }
.haf-strip__dot[data-count="2"]::after { opacity: 0.85; width: 10px; height: 10px; }
.haf-strip__dot[data-count="3"]::after,
.haf-strip__dot[data-count="4"]::after { opacity: 1; width: 13px; height: 13px; }
.haf-strip__lbl {
  font-size: 11px;
  color: rgba(240, 200, 255, 0.8);
  order: -1;
}
.haf-strip__badge {
  font-size: 9px;
  color: #d946ef;
  margin-top: 12px;
}
.haf-strip__stats {
  text-align: center;
  font-size: 12px;
  color: rgba(240, 200, 255, 0.55);
  margin-top: 8px;
}

/* ── תצוגה שנתית ── */
.modal__card--annual {
  width: min(680px, 100%);
}

.annual-nav {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 1;
  min-width: 0;
}

.annual-nav__title {
  flex: 1;
  text-align: center;
}

.iconbtn--sm {
  width: 32px;
  height: 32px;
  font-size: 13px;
  flex-shrink: 0;
}

.annual-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  direction: rtl;
}

@media (max-width: 560px) {
  .annual-grid { grid-template-columns: repeat(3, 1fr); gap: 8px; }
}

@media (max-width: 380px) {
  .annual-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; }
}

.annual-month {
  background: rgba(217, 70, 239, 0.05);
  border: 1px solid rgba(217, 70, 239, 0.12);
  border-radius: 8px;
  padding: 6px 4px 4px;
}

.annual-month__name {
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  color: #f0abfc;
  margin-bottom: 4px;
  letter-spacing: 0.02em;
}

.annual-month__dow {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 2px;
}

.annual-dow-cell {
  font-size: 8px;
  text-align: center;
  color: rgba(240, 171, 252, 0.4);
  padding: 0 1px;
}

.annual-month__days {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.annual-day {
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 8px;
  border-radius: 3px;
  color: rgba(240, 200, 255, 0.55);
  line-height: 1;
}

.annual-day--sighting {
  background: rgba(239, 68, 68, 0.75);
  color: #fff;
  font-weight: 700;
  border-radius: 50%;
}

.annual-day--veset-month {
  background: rgba(168, 85, 247, 0.3);
  color: #e9d5ff;
}

.annual-day--veset-haflagah {
  background: rgba(20, 184, 166, 0.28);
  color: #99f6e4;
}

.annual-legend {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(217, 70, 239, 0.1);
}

.annual-legend__item {
  font-size: 11px;
  display: flex;
  align-items: center;
  gap: 5px;
  color: rgba(240, 200, 255, 0.7);
}

.annual-legend__item::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
}

.annual-legend__item--sighting::before    { background: rgba(239, 68, 68, 0.75); }
.annual-legend__item--veset-month::before { background: rgba(168, 85, 247, 0.3); border-radius: 3px; }
.annual-legend__item--veset-haflagah::before { background: rgba(20, 184, 166, 0.28); border-radius: 3px; }

/* ── לוח כרטיסייה ── */
.tab-pane {
  display: grid;
  gap: 10px;
  align-content: start;
}
.tab-pane[hidden] { display: none; }

/* ── כותרת תת-קבוצה בתוך לשונית ── */
.setting-group-label {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: rgba(217, 70, 239, 0.55);
  padding: 6px 6px 0;
  margin-top: 2px;
}

/* ── שורות הגדרה ── */
.setting-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(217, 70, 239, 0.1);
  transition: background 120ms ease;
}
.setting-row:not(.setting-row--disabled):hover {
  background: rgba(217, 70, 239, 0.07);
}

.setting-row--disabled {
  opacity: 0.42;
  cursor: default;
  pointer-events: none;
}

/* ── קבוצת הגדרות עמומה (ההורה מכובה) ── */
.settings-group--dimmed {
  opacity: 0.42;
  pointer-events: none;
}

/* ── כותרות קטגוריות ── */
.setting-section-header {
  font-size: 10.5px;
  font-weight: 800;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  color: rgba(217, 70, 239, 0.65);
  padding: 2px 6px 0;
  margin-top: 4px;
}

/* ── תת-שורות: מוזחות + קו חיבור ── */
.setting-row--sub {
  margin-right: 16px;
  border-radius: 14px 0 0 14px;
  border-right-color: rgba(217, 70, 239, 0.45);
  border-right-width: 2px;
  background: rgba(255, 255, 255, 0.02);
  padding-top: 10px;
  padding-bottom: 10px;
}
.setting-row--sub:not(.setting-row--disabled):hover {
  background: rgba(217, 70, 239, 0.05);
}

/* ── קבוצת תת-שורות — gap פנימי ── */
#notif-sub {
  display: grid;
  gap: 6px;
}

.setting-row--qr {
  align-items: center;
}

.btn--small {
  padding: 6px 14px;
  font-size: 13px;
  min-height: unset;
  height: auto;
}

.sound-controls {
  display: flex;
  gap: 6px;
  align-items: center;
}

/* ── טופס צור קשר ── */
.contact-intro {
  padding: 2px 4px 6px;
}
.contact-form {
  display: grid;
  gap: 12px;
}
.form-group {
  display: grid;
  gap: 5px;
}
.form-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.input--full {
  width: 100%;
  box-sizing: border-box;
}
.input--textarea {
  width: 100%;
  box-sizing: border-box;
  min-height: 90px;
  resize: vertical;
  padding: 10px 12px;
  border-radius: 14px;
  border: 1px solid rgba(217, 70, 239, 0.22);
  background: rgba(255, 255, 255, 0.05);
  color: var(--text);
  font-size: 14px;
  font-family: inherit;
  direction: rtl;
  transition: border-color 120ms ease, background 120ms ease;
}
.input--textarea:focus {
  outline: none;
  border-color: rgba(217, 70, 239, 0.55);
  background: rgba(217, 70, 239, 0.06);
  box-shadow: 0 0 0 3px var(--focus);
}
.input--textarea::placeholder { color: var(--muted); opacity: 0.7; }
.btn--full { width: 100%; justify-content: center; }
.contact-status {
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  text-align: center;
}
.contact-status--ok  { background: rgba(34,197,94,.12); color: #4ade80; border: 1px solid rgba(34,197,94,.25); }
.contact-status--err { background: rgba(239,68,68,.12);  color: #f87171; border: 1px solid rgba(239,68,68,.25); }
.contact-status[hidden] { display: none; }

.pills-auto-info {
  margin: 4px 14px 10px;
  padding: 10px 14px;
  border-radius: 10px;
  background: rgba(217, 70, 239, 0.07);
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
  border: 1px solid rgba(217, 70, 239, 0.15);
}
.pills-auto-info:empty { display: none; }
.pills-auto-info strong { color: var(--text); }

.qr-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 16px 12px 8px;
}
.qr-panel[hidden] { display: none; }

.qr-canvas {
  background: #fff;
  border-radius: 14px;
  padding: 10px;
  box-shadow: 0 4px 18px rgba(76,29,149,0.18);
  display: inline-flex;
}
.qr-canvas img, .qr-canvas canvas {
  display: block;
  border-radius: 6px;
}

.qr-url {
  font-size: 11px;
  color: var(--muted);
  word-break: break-all;
  text-align: center;
  direction: ltr;
}

.setting-label { flex: 1; min-width: 0; }

.setting-name {
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.3;
}

.setting-desc {
  font-size: 12px;
  color: var(--muted);
  margin-top: 3px;
  line-height: 1.4;
}

.badge-soon {
  flex-shrink: 0;
  font-size: 11px;
  font-weight: 600;
  background: rgba(168, 85, 247, 0.14);
  border: 1px solid rgba(168, 85, 247, 0.28);
  color: #c084fc;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

/* ── Toggle button ── */
.toggle-btn {
  width: 50px;
  height: 28px;
  border-radius: 14px;
  border: none;
  background: rgba(255, 255, 255, 0.14);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 220ms ease, box-shadow 220ms ease;
  padding: 0;
}
.toggle-btn[aria-checked="true"] {
  background: var(--brand);
  box-shadow: 0 0 14px rgba(217, 70, 239, 0.45);
}
.toggle-btn__knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.35);
  transition: left 220ms ease;
}
.toggle-btn[aria-checked="true"] .toggle-btn__knob {
  left: 25px;
}

/* ── מיקום ── */
.location-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}

.select {
  height: 40px;
  padding: 0 10px;
  border-radius: 14px;
  border: 1px solid rgba(217, 70, 239, 0.25);
  background: rgba(217, 70, 239, 0.07);
  color: var(--text);
  font-family: var(--font);
  font-size: 14px;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23c084fc' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: left 10px center;
  padding-left: 30px;
  min-width: 130px;
  transition: border-color 120ms ease, background-color 120ms ease;
}

.select:hover {
  border-color: rgba(217, 70, 239, 0.45);
  background-color: rgba(217, 70, 239, 0.12);
}

.select:focus {
  outline: none;
  box-shadow: 0 0 0 3px var(--focus);
}

.select option {
  background: #1e0a2e;
  color: var(--text);
}

.select--small {
  height: 36px;
  min-width: 110px;
  font-size: 13px;
  flex-shrink: 0;
}

.location-status {
  font-size: 11px;
  color: rgba(240, 171, 252, 0.6);
  margin-top: 2px;
}

.location-status::before {
  content: "📍 ";
}

.footer {
  margin-top: 16px;
  padding: 10px 2px;
  color: rgba(240, 171, 252, 0.4);
  font-size: 12px;
}

.footer__note {
  line-height: 1.35;
}

.footer__memorial {
  margin-top: 10px;
  text-align: center;
  font-size: 13px;
  letter-spacing: 0.4px;
  color: rgba(240, 171, 252, 0.55);
  font-style: italic;
}

body.theme-light .footer__memorial {
  color: rgba(88, 28, 135, 0.45);
}

body.theme-floral .footer__memorial {
  color: rgba(157, 23, 77, 0.45);
}

/* ═══════════════════════════════════════════════════════════
   ערכת נושא בהירה — theme-light
   ═══════════════════════════════════════════════════════════ */
body.theme-light {
  color-scheme: light;
  --bg: #fdf4ff;
  --panel: rgba(255, 255, 255, 0.88);
  --text: #2d0050;
  --muted: rgba(88, 28, 135, 0.55);
  --border: rgba(147, 51, 234, 0.18);
  --shadow: 0 18px 44px rgba(147, 51, 234, 0.12);
  --brand: #9333ea;
  --brand2: #7c3aed;
  --today: #db2777;
  --focus: rgba(147, 51, 234, 0.25);
  background:
    radial-gradient(900px 600px at 75% 5%,  rgba(216, 180, 254, 0.55), transparent 60%),
    radial-gradient(700px 500px at 15% 85%, rgba(196, 181, 253, 0.45), transparent 55%),
    radial-gradient(500px 400px at 50% 50%, rgba(251, 207, 232, 0.30), transparent 60%),
    linear-gradient(180deg, #fce7ff 0%, #fdf4ff 55%, #f5f3ff 100%);
}
body.theme-light .title {
  background: linear-gradient(135deg, #7c3aed 0%, #9333ea 60%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.theme-light .subtitle { color: var(--muted); }
body.theme-light .logo {
  background: rgba(147, 51, 234, 0.1);
  border-color: rgba(147, 51, 234, 0.25);
}
body.theme-light .panel {
  background: rgba(255, 255, 255, 0.88);
  border-color: rgba(147, 51, 234, 0.2);
  box-shadow: 0 8px 32px rgba(147, 51, 234, 0.12);
}
body.theme-light .iconbtn {
  border-color: rgba(147, 51, 234, 0.25);
  background: rgba(147, 51, 234, 0.07);
  color: var(--text);
}
body.theme-light .iconbtn:hover {
  background: rgba(147, 51, 234, 0.14);
  border-color: rgba(147, 51, 234, 0.4);
}
body.theme-light .monthtitle__main { color: #7c3aed; }
body.theme-light .monthtitle__heb  { color: rgba(124, 58, 237, 0.72); }
body.theme-light .monthtitle__sub  { color: var(--muted); }
body.theme-light .calendar { border-top-color: rgba(147, 51, 234, 0.15); }
body.theme-light .dow {
  background: rgba(196, 181, 253, 0.28);
  border-bottom-color: rgba(147, 51, 234, 0.15);
}
body.theme-light .dow__cell { color: rgba(109, 40, 217, 0.85); }
body.theme-light .cell {
  background: rgba(255, 255, 255, 0.6);
  border-bottom-color: rgba(147, 51, 234, 0.1);
  border-left-color:   rgba(147, 51, 234, 0.07);
  color: var(--text);
}
body.theme-light .cell:hover { background: rgba(147, 51, 234, 0.08); }
body.theme-light .cell--muted {
  background: rgba(245, 240, 255, 0.45);
  color: rgba(88, 28, 135, 0.35);
}
body.theme-light .cell--muted .cell__heb { color: rgba(147, 51, 234, 0.28); }
body.theme-light .cell--today {
  background: linear-gradient(180deg, rgba(219, 39, 119, 0.16), rgba(147, 51, 234, 0.06));
  outline-color: rgba(219, 39, 119, 0.55);
}
body.theme-light .cell--today .cell__num { color: #9d174d; }
body.theme-light .cell--selected {
  outline-color: rgba(147, 51, 234, 0.65);
  background: rgba(147, 51, 234, 0.09);
}
body.theme-light .cell__num { color: #2d0050; }
body.theme-light .cell__heb { color: rgba(109, 40, 217, 0.55); }
body.theme-light .cell__mark {
  background: rgba(147, 51, 234, 0.12);
  border-color: rgba(147, 51, 234, 0.3);
  color: #5b21b6;
}
body.theme-light .cell__status--day   { background: rgba(219,39,119,.15); border-color: rgba(219,39,119,.35); color: #9d174d; }
body.theme-light .cell__status--night { background: rgba(109,40,217,.15); border-color: rgba(109,40,217,.35); color: #5b21b6; }
/* פילים — light */
body.theme-light .cell__pill--veset          { background: rgba(147,51,234,.11); border-color: rgba(147,51,234,.28); color: #6d28d9; }
body.theme-light .cell__pill--hefsek-eligible{ background: rgba(217,119,6,.09);  border-color: rgba(217,119,6,.35);  color: #92400e; }
body.theme-light .cell__pill--hefsek         { background: rgba(217,119,6,.16);  border-color: rgba(217,119,6,.45);  color: #78350f; }
body.theme-light .cell__pill--nekiim         { background: rgba(16,185,129,.11); border-color: rgba(16,185,129,.3);  color: #065f46; }
body.theme-light .cell__pill--veset-rare     { background: rgba(6,182,212,.09);  border-color: rgba(6,182,212,.35);  color: #0e7490; }
body.theme-light .cell__pill--veset-pills    { background: rgba(234,88,12,.1);   border-color: rgba(234,88,12,.35);  color: #c2410c; }
body.theme-light .cell__pill--pill-stop      { background: rgba(126,34,206,.08);  border-color: rgba(126,34,206,.3);  color: #7c3aed; }
body.theme-light .cell__check--ok   { color: #16a34a; background: rgba(22,163,74,.1); }
body.theme-light .cell__check--fail { color: #dc2626; background: rgba(220,38,38,.1); }
body.theme-light .drawer {
  background: rgba(245, 243, 255, 0.85);
  border-top-color: rgba(147, 51, 234, 0.12);
}
body.theme-light .drawer__title { color: #7c3aed; }
body.theme-light .summary { color: rgba(88, 28, 135, 0.75); }
body.theme-light .btn {
  border-color: rgba(147, 51, 234, 0.25);
  background: rgba(147, 51, 234, 0.07);
  color: var(--text);
}
body.theme-light .btn:hover { background: rgba(147, 51, 234, 0.14); border-color: rgba(147, 51, 234, 0.4); }
body.theme-light .btn--primary {
  background: linear-gradient(135deg, rgba(147,51,234,.88), rgba(124,58,237,.78));
  border-color: rgba(147, 51, 234, 0.6);
  color: #fff;
}
body.theme-light .btn--ghost { border-color: rgba(88,28,135,.22); background: transparent; color: var(--text); }
body.theme-light .btn--ghost:hover { background: rgba(88,28,135,.07); }
body.theme-light .btn--danger { color: #fff; }
body.theme-light .popover__card {
  background: rgba(255, 252, 255, 0.98);
  border-color: rgba(147, 51, 234, 0.25);
  box-shadow: 0 22px 60px rgba(147, 51, 234, 0.18);
}
body.theme-light .popover__header { border-bottom-color: rgba(147, 51, 234, 0.15); }
body.theme-light .popover__title  { color: #7c3aed; }
body.theme-light .popover__body   { color: #2d0050; }
body.theme-light .popover__feelings-label { color: #7c3aed; }
body.theme-light .popover__feelings-input { border-color: rgba(124,58,237,.25); background: rgba(124,58,237,.06); color: #2d0050; }
body.theme-light .popover__feelings-input:focus { border-color: #7c3aed; background: rgba(124,58,237,.1); }
body.theme-light .popover__feelings-input::placeholder { color: rgba(45,0,80,.35); }
body.theme-light .popover__feelings-view { background: rgba(124,58,237,.06); border-color: rgba(124,58,237,.18); }
body.theme-light .popover__x { border-color: rgba(147,51,234,.2); background: rgba(147,51,234,.07); color: var(--text); }
body.theme-light .modal__card {
  background: rgba(253, 246, 255, 0.98);
  border-color: rgba(147, 51, 234, 0.25);
}
body.theme-light .modal__header { border-bottom-color: rgba(147,51,234,.14); }
body.theme-light .modal__title  { color: #7c3aed; }
body.theme-light .modal__x { border-color: rgba(147,51,234,.2); background: rgba(147,51,234,.07); color: var(--text); }
body.theme-light .setting-row { background: rgba(255,255,255,.7); border-color: rgba(147,51,234,.12); }
body.theme-light .setting-row:not(.setting-row--disabled):hover { background: rgba(147,51,234,.07); }
body.theme-light .setting-row--sub { background: rgba(255,255,255,.45); border-right-color: rgba(109,40,217,.4); }
body.theme-light .setting-row--sub:not(.setting-row--disabled):hover { background: rgba(109,40,217,.06); }
body.theme-light .setting-section-header { color: rgba(109,40,217,.7); }
body.theme-light .modal__tabs { border-bottom-color: rgba(147,51,234,.14); }
body.theme-light .tab-btn[aria-selected="true"] { color: #7c3aed; border-bottom-color: rgba(109,40,217,.7); background: rgba(109,40,217,.06); }
body.theme-light .tab-btn:hover:not([aria-selected="true"]) { color: var(--text); background: rgba(109,40,217,.04); }
body.theme-light .setting-group-label { color: rgba(109,40,217,.55); }
body.theme-light .input--textarea { border-color: rgba(124,58,237,.25); background: rgba(124,58,237,.05); color: var(--text); }
body.theme-light .input--textarea:focus { border-color: #7c3aed; background: rgba(124,58,237,.1); }
body.theme-light .setting-name { color: var(--text); }
body.theme-light .badge-soon { background: rgba(109,40,217,.1); border-color: rgba(109,40,217,.25); color: #7c3aed; }
body.theme-light .cell__approaching-badge { background: rgba(234,88,12,.1); border-color: rgba(234,88,12,.35); color: #c2410c; }
body.theme-light .toggle-btn { background: rgba(88,28,135,.15); }
body.theme-light .toggle-btn[aria-checked="true"] { background: var(--brand); }
body.theme-light .select {
  background-color: rgba(147, 51, 234, 0.06);
  color: var(--text);
  border-color: rgba(147, 51, 234, 0.25);
}
body.theme-light .select option { background: #fdf4ff; color: #2d0050; }
body.theme-light .location-status { color: rgba(109, 40, 217, 0.65); }
body.theme-light .footer { color: rgba(88, 28, 135, 0.45); }

/* ═══════════════════════════════════════════════════════════
   ערכת נושא פרחונית — theme-floral (בהירה + SVG גפנים עדין)
   ═══════════════════════════════════════════════════════════ */
body.theme-floral {
  color-scheme: light;
  --bg: #fff8f4;
  --panel: rgba(255, 252, 250, 0.92);
  --text: #4a1020;
  --muted: rgba(120, 40, 70, 0.55);
  --border: rgba(190, 24, 93, 0.18);
  --shadow: 0 18px 44px rgba(190, 24, 93, 0.11);
  --brand: #be185d;
  --brand2: #9d174d;
  --today: #e11d67;
  --focus: rgba(190, 24, 93, 0.25);
  background-color: #fff8f4;
  /* SVG גפנים ופרחים עדינים כרקע משתלב + גרדיאנט פסטל */
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cg opacity='0.13'%3E%3Cpath d='M10,190 C50,150 80,170 100,130 C120,90 150,60 190,10' fill='none' stroke='%23be185d' stroke-width='1.5' stroke-linecap='round'/%3E%3Cpath d='M100,130 C88,115 68,112 52,96' fill='none' stroke='%23be185d' stroke-width='1' stroke-linecap='round'/%3E%3Ccircle cx='100' cy='130' r='2.5' fill='%23be185d'/%3E%3Cellipse cx='100' cy='125.5' rx='2' ry='3.8' fill='%23be185d' opacity='0.7'/%3E%3Cellipse cx='100' cy='134.5' rx='2' ry='3.8' fill='%23be185d' opacity='0.7'/%3E%3Cellipse cx='95.5' cy='130' rx='3.8' ry='2' fill='%23be185d' opacity='0.7'/%3E%3Cellipse cx='104.5' cy='130' rx='3.8' ry='2' fill='%23be185d' opacity='0.7'/%3E%3Ccircle cx='52' cy='96' r='2' fill='%23be185d'/%3E%3Cellipse cx='52' cy='92.5' rx='1.6' ry='3' fill='%23be185d' opacity='0.7'/%3E%3Cellipse cx='52' cy='99.5' rx='1.6' ry='3' fill='%23be185d' opacity='0.7'/%3E%3Cellipse cx='48.5' cy='96' rx='3' ry='1.6' fill='%23be185d' opacity='0.7'/%3E%3Cellipse cx='55.5' cy='96' rx='3' ry='1.6' fill='%23be185d' opacity='0.7'/%3E%3Cpath d='M83,118 Q76,110 85,105 Q88,114 83,118Z' fill='%23a06090' opacity='0.9'/%3E%3Cpath d='M120,98 Q128,90 133,98 Q124,104 120,98Z' fill='%23a06090' opacity='0.9'/%3E%3Cpath d='M155,65 Q148,57 157,52 Q160,61 155,65Z' fill='%23a06090' opacity='0.9'/%3E%3C/g%3E%3C/svg%3E"),
    radial-gradient(800px 500px at 70% 10%, rgba(252, 231, 243, 0.65), transparent 60%),
    radial-gradient(600px 400px at 20% 80%, rgba(255, 228, 236, 0.45), transparent 55%),
    linear-gradient(160deg, #fff8f4 0%, #fef2f8 50%, #fff5ee 100%);
}
body.theme-floral .title {
  background: linear-gradient(135deg, #9d174d 0%, #be185d 60%, #db2777 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}
body.theme-floral .subtitle { color: var(--muted); }
body.theme-floral .logo     { background: rgba(190,24,93,.1); border-color: rgba(190,24,93,.25); }
body.theme-floral .panel    { background: rgba(255,252,250,.9); border-color: rgba(190,24,93,.2); box-shadow: 0 8px 32px rgba(190,24,93,.1); }
body.theme-floral .iconbtn  { border-color: rgba(190,24,93,.25); background: rgba(190,24,93,.07); color: var(--text); }
body.theme-floral .iconbtn:hover { background: rgba(190,24,93,.14); border-color: rgba(190,24,93,.4); }
body.theme-floral .monthtitle__main { color: #9d174d; }
body.theme-floral .monthtitle__heb  { color: rgba(157,23,77,.72); }
body.theme-floral .monthtitle__sub  { color: var(--muted); }
body.theme-floral .calendar { border-top-color: rgba(190,24,93,.15); }
body.theme-floral .dow      { background: rgba(252,231,243,.32); border-bottom-color: rgba(190,24,93,.15); }
body.theme-floral .dow__cell { color: rgba(157,23,77,.85); }
body.theme-floral .cell { background: rgba(255,252,250,.65); border-bottom-color: rgba(190,24,93,.1); border-left-color: rgba(190,24,93,.07); color: var(--text); }
body.theme-floral .cell:hover { background: rgba(190,24,93,.08); }
body.theme-floral .cell--muted { background: rgba(255,248,244,.45); color: rgba(120,40,70,.35); }
body.theme-floral .cell--muted .cell__heb { color: rgba(190,24,93,.28); }
body.theme-floral .cell--today { background: linear-gradient(180deg, rgba(225,29,103,.16), rgba(190,24,93,.06)); outline-color: rgba(225,29,103,.55); }
body.theme-floral .cell--today .cell__num { color: #9d174d; }
body.theme-floral .cell--selected { outline-color: rgba(190,24,93,.65); background: rgba(190,24,93,.09); }
body.theme-floral .cell__num { color: #4a1020; }
body.theme-floral .cell__heb { color: rgba(157,23,77,.55); }
body.theme-floral .cell__mark { background: rgba(190,24,93,.12); border-color: rgba(190,24,93,.3); color: #9d174d; }
body.theme-floral .cell__status--day   { background: rgba(225,29,103,.15); border-color: rgba(225,29,103,.35); color: #9d174d; }
body.theme-floral .cell__status--night { background: rgba(157,23,77,.15); border-color: rgba(157,23,77,.35); color: #831843; }
/* פילים — floral */
body.theme-floral .cell__pill--veset          { background: rgba(190,24,93,.11); border-color: rgba(190,24,93,.28); color: #9d174d; }
body.theme-floral .cell__pill--hefsek-eligible{ background: rgba(217,119,6,.09);  border-color: rgba(217,119,6,.35);  color: #92400e; }
body.theme-floral .cell__pill--hefsek         { background: rgba(217,119,6,.16);  border-color: rgba(217,119,6,.45);  color: #78350f; }
body.theme-floral .cell__pill--nekiim         { background: rgba(16,185,129,.11); border-color: rgba(16,185,129,.3);  color: #065f46; }
body.theme-floral .cell__pill--veset-rare     { background: rgba(6,182,212,.09);  border-color: rgba(6,182,212,.35);  color: #0e7490; }
body.theme-floral .cell__pill--veset-pills    { background: rgba(234,88,12,.1);   border-color: rgba(234,88,12,.35);  color: #c2410c; }
body.theme-floral .cell__pill--pill-stop      { background: rgba(126,34,206,.08);  border-color: rgba(126,34,206,.3);  color: #7c3aed; }
body.theme-floral .cell__check--ok   { color: #16a34a; background: rgba(22,163,74,.1); }
body.theme-floral .cell__check--fail { color: #dc2626; background: rgba(220,38,38,.1); }
body.theme-floral .drawer    { background: rgba(255,248,244,.88); border-top-color: rgba(190,24,93,.12); }
body.theme-floral .drawer__title { color: #9d174d; }
body.theme-floral .summary   { color: rgba(120,40,70,.75); }
body.theme-floral .btn       { border-color: rgba(190,24,93,.25); background: rgba(190,24,93,.07); color: var(--text); }
body.theme-floral .btn:hover { background: rgba(190,24,93,.14); border-color: rgba(190,24,93,.4); }
body.theme-floral .btn--primary { background: linear-gradient(135deg, rgba(190,24,93,.88), rgba(157,23,77,.78)); border-color: rgba(190,24,93,.6); color: #fff; }
body.theme-floral .btn--ghost   { border-color: rgba(120,40,70,.22); background: transparent; color: var(--text); }
body.theme-floral .btn--ghost:hover { background: rgba(120,40,70,.07); }
body.theme-floral .btn--danger  { color: #fff; }
body.theme-floral .popover__card  { background: rgba(255,252,250,.98); border-color: rgba(190,24,93,.25); box-shadow: 0 22px 60px rgba(190,24,93,.18); }
body.theme-floral .popover__header { border-bottom-color: rgba(190,24,93,.15); }
body.theme-floral .popover__title  { color: #9d174d; }
body.theme-floral .popover__body   { color: #4a1020; }
body.theme-floral .popover__feelings-label { color: #9d174d; }
body.theme-floral .popover__feelings-input { border-color: rgba(157,23,77,.25); background: rgba(157,23,77,.06); color: #4a1020; }
body.theme-floral .popover__feelings-input:focus { border-color: #9d174d; background: rgba(157,23,77,.1); }
body.theme-floral .popover__feelings-input::placeholder { color: rgba(74,16,32,.35); }
body.theme-floral .popover__feelings-view { background: rgba(157,23,77,.06); border-color: rgba(157,23,77,.18); }
body.theme-floral .popover__x { border-color: rgba(190,24,93,.2); background: rgba(190,24,93,.07); color: var(--text); }
body.theme-floral .modal__card  { background: rgba(255,250,252,.98); border-color: rgba(190,24,93,.25); }
body.theme-floral .modal__header { border-bottom-color: rgba(190,24,93,.14); }
body.theme-floral .modal__title  { color: #9d174d; }
body.theme-floral .modal__x { border-color: rgba(190,24,93,.2); background: rgba(190,24,93,.07); color: var(--text); }
body.theme-floral .setting-row { background: rgba(255,252,250,.72); border-color: rgba(190,24,93,.12); }
body.theme-floral .setting-row:not(.setting-row--disabled):hover { background: rgba(190,24,93,.07); }
body.theme-floral .setting-row--sub { background: rgba(255,248,245,.45); border-right-color: rgba(190,24,93,.4); }
body.theme-floral .setting-row--sub:not(.setting-row--disabled):hover { background: rgba(190,24,93,.06); }
body.theme-floral .setting-section-header { color: rgba(157,23,77,.7); }
body.theme-floral .modal__tabs { border-bottom-color: rgba(190,24,93,.14); }
body.theme-floral .tab-btn[aria-selected="true"] { color: #9d174d; border-bottom-color: rgba(190,24,93,.7); background: rgba(190,24,93,.06); }
body.theme-floral .tab-btn:hover:not([aria-selected="true"]) { color: var(--text); background: rgba(190,24,93,.04); }
body.theme-floral .setting-group-label { color: rgba(157,23,77,.55); }
body.theme-floral .input--textarea { border-color: rgba(190,24,93,.25); background: rgba(190,24,93,.05); color: var(--text); }
body.theme-floral .input--textarea:focus { border-color: #9d174d; background: rgba(190,24,93,.1); }
body.theme-floral .setting-name { color: var(--text); }
body.theme-floral .badge-soon { background: rgba(157,23,77,.1); border-color: rgba(157,23,77,.25); color: #9d174d; }
body.theme-floral .cell__approaching-badge { background: rgba(234,88,12,.1); border-color: rgba(234,88,12,.35); color: #c2410c; }
body.theme-floral .toggle-btn { background: rgba(120,40,70,.15); }
body.theme-floral .toggle-btn[aria-checked="true"] { background: var(--brand); box-shadow: 0 0 14px rgba(190,24,93,.4); }
body.theme-floral .select { background-color: rgba(190,24,93,.06); color: var(--text); border-color: rgba(190,24,93,.25); }
body.theme-floral .select option { background: #fff8f4; color: #4a1020; }
body.theme-floral .location-status { color: rgba(157,23,77,.65); }
body.theme-floral .footer { color: rgba(120,40,70,.45); }

/* ── בנר עדכון ── */
#update-banner {
  position: fixed;
  bottom: 1.2rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #4c1d95;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 2rem;
  padding: 0.6rem 1.1rem;
  box-shadow: 0 8px 28px rgba(0,0,0,0.45);
  z-index: 9999;
  font-size: 0.9rem;
  white-space: nowrap;
  animation: slideUp 0.3s ease;
}
#update-banner[hidden] { display: none; }
#update-btn {
  background: var(--brand);
  color: #fff;
  border: none;
  border-radius: 1rem;
  padding: 0.3rem 0.9rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font);
}
#update-btn:hover { opacity: 0.85; }
@keyframes slideUp {
  from { opacity: 0; transform: translateX(-50%) translateY(1rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#notif-active-banner {
  position: fixed;
  top: 1rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: #065f46;
  color: #d1fae5;
  border: 1px solid #34d399;
  border-radius: 2rem;
  padding: 0.6rem 1.2rem;
  box-shadow: 0 6px 24px rgba(0,0,0,0.35);
  z-index: 9999;
  font-size: 0.9rem;
  white-space: nowrap;
  animation: slideDown 0.3s ease;
}
#notif-active-banner[hidden] { display: none; }
#notif-active-dismiss {
  background: #34d399;
  color: #064e3b;
  border: none;
  border-radius: 1rem;
  padding: 0.25rem 0.8rem;
  font-size: 0.85rem;
  cursor: pointer;
  font-family: var(--font);
  font-weight: 600;
}
#notif-active-dismiss:hover { background: #6ee7b7; }
@keyframes slideDown {
  from { opacity: 0; transform: translateX(-50%) translateY(-1rem); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ── Tour / Onboarding ────────────────────────────────────────────────────── */
#tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9000;
  background: transparent;   /* spotlight div handles the dark bg */
  pointer-events: all;
}
#tour-overlay[hidden] { display: none; }
/* used for welcome/done steps that have no target element */
#tour-overlay.tour-overlay--centered { background: rgba(0, 0, 0, 0.68); }

/* The actual spotlight cutout: sits over the target, box-shadow darkens everything else */
#tour-spotlight {
  position: fixed;
  z-index: 9001;
  pointer-events: none;
  border-radius: 10px;
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.68),
              0 0 0 4px rgba(217, 70, 239, 0.25),
              0 0 24px rgba(217, 70, 239, 0.3);
  transition: top 0.25s ease, left 0.25s ease, width 0.25s ease, height 0.25s ease;
}
#tour-spotlight[hidden] { display: none !important; }

.tour-tooltip {
  position: fixed;
  z-index: 9002;
  width: min(340px, calc(100vw - 24px));
  background: rgba(20, 6, 32, 0.98);
  border: 1px solid rgba(217, 70, 239, 0.35);
  border-radius: var(--radius);
  padding: 1.2rem 1.4rem 1rem;
  box-shadow: 0 16px 50px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(168, 85, 247, 0.08) inset;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  direction: rtl;
  pointer-events: all;
}
.tour-tooltip__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.55rem;
}
.tour-tooltip__counter {
  font-size: 0.75rem;
  color: var(--muted);
  letter-spacing: 0.03em;
}
.tour-tooltip__skip {
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.3rem;
  font-family: var(--font);
  border-radius: 4px;
}
.tour-tooltip__skip:hover { color: var(--text); background: rgba(255,255,255,.06); }
.tour-tooltip__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--brand);
  margin-bottom: 0.45rem;
  line-height: 1.35;
}
.tour-tooltip__text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 1rem;
  white-space: pre-line;
}
.tour-tooltip__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
}
.tour-btn {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  border: none;
  cursor: pointer;
  font-family: var(--font);
  font-size: 0.88rem;
  font-weight: 600;
  transition: opacity 0.15s;
}
.tour-btn:hover { opacity: 0.82; }
.tour-btn--primary { background: var(--brand); color: #fff; }
.tour-btn--ghost {
  background: transparent;
  color: var(--muted);
  border: 1px solid var(--border);
}
.tour-btn[hidden] { display: none; }

/* Theme overrides for the tour tooltip */
body.theme-light .tour-tooltip {
  background: rgba(253, 246, 255, 0.98);
  border-color: rgba(147, 51, 234, 0.28);
  color: #2d0050;
}
body.theme-light .tour-tooltip__title { color: #7c3aed; }
body.theme-light .tour-tooltip__text  { color: #2d0050; }
body.theme-light .tour-btn--ghost { color: #7c3aed; border-color: rgba(147,51,234,.25); }
body.theme-light .tour-tooltip__skip { color: rgba(109,40,217,.55); }
body.theme-light .tour-tooltip__counter { color: rgba(109,40,217,.55); }
body.theme-light #tour-spotlight {
  border-color: #7c3aed;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6),
              0 0 0 4px rgba(124, 58, 237, 0.25),
              0 0 24px rgba(124, 58, 237, 0.3);
}

body.theme-floral .tour-tooltip {
  background: rgba(255, 248, 244, 0.98);
  border-color: rgba(190, 24, 93, 0.28);
}
body.theme-floral .tour-tooltip__title { color: #9d174d; }
body.theme-floral .tour-tooltip__text  { color: #3b0a1e; }
body.theme-floral .tour-btn--primary { background: #be185d; }
body.theme-floral .tour-btn--ghost { color: #9d174d; border-color: rgba(190,24,93,.25); }
body.theme-floral .tour-tooltip__skip { color: rgba(157,23,77,.55); }
body.theme-floral .tour-tooltip__counter { color: rgba(157,23,77,.55); }
body.theme-floral #tour-spotlight {
  border-color: #be185d;
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.6),
              0 0 0 4px rgba(190, 24, 93, 0.25),
              0 0 24px rgba(190, 24, 93, 0.3);
}