/* =========================================
       1. Design Tokens  (facelift — burgundy/gold)
       ========================================= */
    :root {
      /* Brand palette */
      --brand:        #6B1C2A;
      --brand-dark:   #4A1520;
      --brand-light:  rgba(107,28,42,0.07);
      --accent:       #E08A2A;
      --accent-light: rgba(224,138,42,0.14);

      /* Surfaces */
      --surface:  #FEFBF7;
      --bg-body:  #F3EDE6;
      --bg-card:  #FFFFFF;
      --card:     #FFFFFF;

      /* Text */
      --text:        #2D2424;
      --text-main:   #2D2424;   /* alias kept for legacy refs */
      --muted:       #8A7E78;
      --text-muted:  #8A7E78;   /* alias */
      --border:      #EDE6DC;

      /* Status */
      --success:       #3D9970;
      --success-light: rgba(61,153,112,0.10);
      --danger:        #C0392B;
      --danger-light:  rgba(192,57,43,0.10);
      --warning:       #D4880F;
      --warning-light: rgba(212,136,15,0.12);

      /* Back-compat aliases (so legacy references keep working) */
      --primary:       var(--brand);
      --primary-hover: var(--brand-dark);

      /* Shape & shadow */
      --radius:    16px;
      --radius-sm: 10px;
      --shadow-sm: 0 1px 4px rgba(0,0,0,.04);
      --shadow:    0 4px 14px rgba(107,28,42,.10);
      --shadow-md: 0 10px 28px rgba(107,28,42,.18);

      /* Aliyah type colors (profile timeline & distribution) */
      --type-shacharit: #4f46e5;
      --type-mincha:    #3D9970;
      --type-maftir:    #E08A2A;
      --type-kohen:     #06b6d4;
      --type-levi:      #8b5cf6;
    }

    * { margin: 0; padding: 0; box-sizing: border-box; }
    body {
      font-family: 'Heebo', 'Segoe UI', system-ui, -apple-system, sans-serif;
      background: var(--bg-body);
      color: var(--text);
      padding: 20px;
      line-height: 1.55;
      -webkit-font-smoothing: antialiased;
    }
    .font-serif, .memorial-strip { font-family: 'Frank Ruhl Libre', 'SBL Hebrew', 'David', serif; }
    .container { max-width: 1200px; margin: 0 auto; }

    /* Chabad Logo */
    .chabad-logo { display: inline-block; margin-bottom: 10px; }
    .chabad-logo img {
      height: 70px; width: auto; display: block;
      filter: drop-shadow(0 2px 6px rgba(0,0,0,.18));
      border-radius: 10px;
    }

    /* ───── Hero Header ───── */
    header {
      position: relative;
      background: linear-gradient(145deg, var(--brand) 0%, var(--brand-dark) 100%);
      color: #fff;
      border-radius: 0 0 24px 24px;
      padding: 28px 24px 22px;
      margin: -20px -20px 22px -20px;
      box-shadow: var(--shadow);
      border-top: none;
      text-align: center;
    }
    header::before {
      content: "";
      position: absolute; inset: 0;
      border-radius: inherit;
      background:
        radial-gradient(circle at 85% -10%, rgba(200,155,60,.18), transparent 55%),
        radial-gradient(circle at 10% 110%, rgba(255,255,255,.05), transparent 55%);
      pointer-events: none;
      z-index: 0;
    }
    header > * { position: relative; z-index: 1; }
    /* The search results dropdown sits inside the header but must escape it */
    header .global-search-wrapper { z-index: 50; }
    header .global-search-results { z-index: 600; }
    .bsd-mark {
      position: absolute; top: 12px; right: 16px;
      font-family: 'Frank Ruhl Libre','SBL Hebrew','David',serif;
      font-size: 0.9rem; font-weight: 700;
      color: var(--accent); letter-spacing: 1px; opacity: .9;
    }
    .brand-title {
      font-family: 'Heebo', sans-serif;
      font-size: 2.1rem; font-weight: 800;
      color: #fff; margin-bottom: 4px; letter-spacing: -0.5px;
      text-shadow: 0 1px 0 rgba(0,0,0,.15);
    }
    .brand-subtitle {
      color: rgba(255,255,255,.72);
      font-size: 1rem; font-weight: 500;
      display: flex; align-items: center; justify-content: center; gap: 8px;
    }
    .ai-badge {
      background: linear-gradient(135deg, var(--accent) 0%, #B28A30 100%);
      color: #fff; padding: 4px 12px; border-radius: 20px;
      font-size: 0.82rem; font-weight: 600;
      display: inline-flex; align-items: center; gap: 4px;
    }

    /* Memorial strip (לעילוי נשמת) */
    .memorial-strip {
      display: inline-block;
      margin-top: 10px;
      padding: 6px 14px;
      background: rgba(255,255,255,.08);
      border-right: 3px solid var(--accent);
      border-radius: 6px;
      font-size: 0.92rem;
      color: rgba(255,255,255,.9);
      letter-spacing: .2px;
      line-height: 1.7;
    }

    /* ───── Zmanim bar (pills inside hero) ───── */
    .zmanim-bar {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      background: transparent;
      padding: 0;
      border: none;
      width: 100%;
      max-width: 980px;
      margin: 14px auto 0;
      font-size: 0.88rem;
      font-weight: 600;
    }
    .zman-item {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 4px;
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      padding: 10px 12px;
      min-height: 68px;
      color: #fff;
      text-align: center;
      overflow: hidden;
    }
    .zman-item > span:last-child {
      font-size: 0.92rem;
      line-height: 1.25;
      word-break: break-word;
    }
    .zman-label {
      color: var(--accent);
      font-size: 0.62rem;
      font-weight: 700;
      letter-spacing: 1.4px;
      text-transform: uppercase;
      line-height: 1;
    }
    .zman-sep { display: none; }
    @media (max-width: 900px) {
      .zmanim-bar { grid-template-columns: repeat(3, 1fr); }
    }

    /* ───── Tabs ───── */
    .tabs {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin-top: 18px;
      flex-wrap: wrap;
      role: "tablist";
    }
    .tab-btn {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.12);
      padding: 8px 16px;
      border-radius: 10px;
      font-family: inherit;
      font-size: 0.92rem;
      font-weight: 500;
      color: rgba(255,255,255,.78);
      cursor: pointer;
      transition: all 0.18s ease;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .tab-icon-svg {
      width: 16px; height: 16px;
      display: inline-block; vertical-align: middle;
      margin-left: 4px; stroke: currentColor;
    }
    .tab-btn:hover, .tab-btn:focus {
      background: rgba(255,255,255,.15);
      color: #fff; outline: none;
    }
    .tab-btn[aria-selected="true"] {
      background: #fff;
      color: var(--brand);
      border-color: #fff;
      font-weight: 700;
      box-shadow: 0 4px 14px rgba(0,0,0,.12);
    }
    .tab-btn[aria-selected="true"] .tab-icon-svg { stroke: var(--brand); }
    .tab-share-btn {
      position: fixed;
      bottom: 80px;
      left: 16px;
      z-index: 998;
      width: 48px;
      height: 48px;
      border-radius: 50%;
      background: #25d366;
      color: white;
      border: none;
      box-shadow: 0 4px 12px rgba(37,211,102,0.4);
      cursor: pointer;
      transition: all 0.2s;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 0;
      font-size: 0;
    }
    .tab-share-btn:hover { background: #1ebe57; transform: scale(1.08); }
    .tab-share-btn svg { width: 26px; height: 26px; fill: white; }
    /* Inline circle action buttons */
    .wa-circle-btn, .clip-circle-btn {
      width: 44px; height: 44px; min-width: 44px;
      border-radius: 50%; border: none;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer; transition: all 0.2s; padding: 0; flex-shrink: 0;
    }
    .wa-circle-btn { background: #25d366; box-shadow: 0 2px 8px rgba(37,211,102,0.3); }
    .wa-circle-btn:hover { background: #1ebe57; transform: scale(1.08); }
    .wa-circle-btn svg { width: 22px; height: 22px; fill: white; }
    .clip-circle-btn { background: #64748b; box-shadow: 0 2px 8px rgba(100,116,139,0.3); }
    .clip-circle-btn:hover { background: #475569; transform: scale(1.08); }
    .clip-circle-btn svg { width: 20px; height: 20px; fill: none; stroke: white; stroke-width: 2; }
    /* Main Content Area */
    .tab-panel { display: none; animation: fadeIn 0.3s ease-out; }
    .tab-panel.active { display: block; }
    .card {
      background: var(--surface);
      border-radius: var(--radius);
      padding: 18px;
      box-shadow: var(--shadow-sm);
      margin-bottom: 14px;
      border: 1px solid var(--border);
    }
    h2 {
      font-size: 1.25rem;
      margin-bottom: 14px;
      color: var(--brand);
      font-weight: 700;
      display: flex; align-items: center; gap: 10px;
    }

    /* ───── Chip row (filters) ───── */
    .chip-row {
      display: flex;
      gap: 6px;
      padding: 2px 0 10px;
      overflow-x: auto;
      scrollbar-width: none;
    }
    .chip-row::-webkit-scrollbar { display: none; }
    .chip {
      padding: 6px 14px;
      border-radius: 20px;
      font-size: 0.82rem;
      white-space: nowrap;
      cursor: pointer;
      border: 1px solid var(--border);
      color: var(--muted);
      font-weight: 500;
      background: transparent;
      transition: all .15s ease;
    }
    .chip:hover { color: var(--brand); border-color: var(--brand-light); }
    .chip.active {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
      font-weight: 700;
    }

    /* ───── Badges ───── */
    .badge {
      font-size: 0.72rem;
      padding: 3px 9px;
      border-radius: 10px;
      font-weight: 600;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .badge-success { background: var(--success-light); color: var(--success); }
    .badge-danger  { background: var(--danger-light);  color: var(--danger); }
    .badge-warning { background: var(--warning-light); color: var(--warning); }
    .badge-accent  { background: var(--accent-light);  color: #8B6914; font-weight: 700; }
    .badge-brand   { background: var(--brand-light);   color: var(--brand); }

    /* ───── Member List ───── */
    .member-list { display: flex; flex-direction: column; gap: 8px; }
    .member-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 12px 16px;
      background: var(--card);
      border-radius: 12px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      transition: all 0.18s ease;
    }
    .member-item:hover {
      transform: translateX(-2px);
      border-color: var(--brand-light);
      box-shadow: 0 3px 10px rgba(107,28,42,.06);
    }
    .member-right { display: flex; align-items: center; gap: 12px; }
    .member-name { font-weight: 700; font-size: 1.02rem; color: var(--text); }
    .member-left {
      font-size: 0.85rem;
      color: var(--muted);
      display: flex; gap: 10px; align-items: center;
    }

    /* ───── Avatar (square rounded, gradient) ───── */
    .avatar-square, .badge-circle {
      width: 40px; height: 40px;
      border-radius: 12px;
      background: linear-gradient(135deg, var(--brand-light), var(--accent-light));
      display: flex; align-items: center; justify-content: center;
      color: var(--brand);
      font-weight: 800;
      font-size: 1rem;
      flex-shrink: 0;
      border: 1px solid var(--border);
    }
    /* Keep the original coloured circles for count indicators */
    .badge-circle.bg-green  { background: var(--success); color: #fff; border-color: transparent; border-radius: 50%; width: 32px; height: 32px; font-size: .92rem; }
    .badge-circle.bg-orange { background: var(--accent);  color: #fff; border-color: transparent; border-radius: 50%; width: 32px; height: 32px; font-size: .92rem; }
    .badge-circle.bg-red    { background: var(--danger);  color: #fff; border-color: transparent; border-radius: 50%; width: 32px; height: 32px; font-size: .92rem; }

    /* ───── Stats Grid ───── */
    .stats-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      margin-bottom: 14px;
    }
    .stat-box {
      background: var(--card);
      padding: 14px 10px;
      border-radius: var(--radius);
      text-align: center;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
      transition: transform .18s ease, box-shadow .18s ease;
    }
    .stat-box:hover { transform: translateY(-2px); box-shadow: 0 6px 18px rgba(107,28,42,.08); }
    .stat-number {
      font-size: 2rem;
      font-weight: 800;
      color: var(--brand);
      line-height: 1;
      margin-bottom: 4px;
    }
    .stat-label {
      color: var(--muted);
      font-weight: 600;
      font-size: 0.82rem;
      letter-spacing: .2px;
    }

    /* ───── Balance Bar (progress-style) ───── */
    .balance-bar {
      min-height: 44px;
      border-radius: 12px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      font-weight: 700;
      font-size: 0.98rem;
      padding: 8px 16px;
      margin-bottom: 14px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }
    .balance-good   { background: var(--success-light); color: var(--success); border-color: rgba(61,153,112,.25); }
    .balance-medium { background: var(--warning-light); color: var(--warning); border-color: rgba(212,136,15,.25); }
    .balance-bad    { background: var(--danger-light);  color: var(--danger);  border-color: rgba(192,57,43,.25); }

    /* ───── Distribution row ───── */
    .distribution-row {
      display: flex;
      gap: 10px;
      flex-wrap: wrap;
      justify-content: space-between;
    }
    .dist-item {
      flex: 1 1 120px;
      min-width: 120px;
      background: var(--card);
      border-radius: 12px;
      border: 1px solid var(--border);
      padding: 12px 10px;
      text-align: center;
      box-shadow: var(--shadow-sm);
    }
    .dist-label {
      font-size: 0.82rem;
      color: var(--muted);
      margin-bottom: 4px;
      font-weight: 600;
    }
    .dist-value {
      font-size: 1.35rem;
      font-weight: 800;
      color: var(--brand);
      line-height: 1;
    }
    .dist-percent {
      font-size: 0.78rem;
      color: var(--muted);
    }

    /* ───── AI Insights Card ───── */
    .insights-card {
      background: linear-gradient(135deg, var(--surface) 0%, var(--accent-light) 100%);
      border: 1.5px solid rgba(200,155,60,.35);
      border-radius: var(--radius);
      padding: 18px;
      margin-bottom: 18px;
      box-shadow: var(--shadow-sm);
    }
    .insights-card h3 {
      color: var(--brand);
      font-size: 1.15rem;
      margin-bottom: 14px;
      display: flex;
      align-items: center;
      gap: 8px;
      font-weight: 700;
    }
    .insight-item {
      background: var(--card);
      padding: 12px 16px;
      border-radius: 10px;
      margin-bottom: 8px;
      border-right: 3px solid var(--accent);
      font-size: 0.92rem;
      line-height: 1.7;
      box-shadow: var(--shadow-sm);
    }
    .insight-item strong { color: var(--brand); }
    .book-stats {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
      gap: 10px;
      margin-top: 12px;
    }
    .book-item {
      background: var(--card);
      padding: 12px 14px;
      border-radius: 10px;
      border-right: 3px solid var(--brand);
      box-shadow: var(--shadow-sm);
    }
    .book-name {
      font-weight: 700;
      color: var(--brand);
      margin-bottom: 4px;
    }
    /* Chart Canvas */
    .chart-container {
      width: 100%;
      height: 200px;             /* היה 250px */
      position: relative;
      margin-top: 10px;          /* היה 20px */
    }
    canvas { width: 100% !important; height: 100% !important; }
    /* ───── Forms & Buttons ───── */
    .form-group { margin-bottom: 14px; }
    .form-label { font-weight: 600; color: var(--text); font-size: 0.9rem; display: block; margin-bottom: 6px; }
    .form-control {
      width: 100%;
      padding: 11px 12px;
      border: 1.5px solid var(--border);
      border-radius: 10px;
      font-family: inherit;
      font-size: 0.95rem;
      background: var(--card);
      color: var(--text);
      transition: border-color .2s, box-shadow .2s;
    }
    .form-control:focus {
      outline: none;
      border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(107,28,42,.08);
    }

    /* Aliyah entry row */
    #inputsContainer { counter-reset: ali; }
    .aliyah-row {
      display: grid;
      grid-template-columns: 30px 1fr 180px 110px auto auto;
      gap: 10px;
      align-items: center;
      margin-bottom: 10px;
      counter-increment: ali;
    }
    .aliyah-row .aliyah-pledge-input {
      font-weight: 600;
      color: var(--brand);
      text-align: center;
    }
    .aliyah-row .aliyah-pledge-input::placeholder { color: var(--text-muted); font-weight: 500; }
    .aliyah-num {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      width: 30px; height: 30px;
      border-radius: 50%;
      background: var(--brand-light);
      color: var(--brand);
      font-weight: 800;
      font-size: 0.88rem;
      flex-shrink: 0;
    }
    .aliyah-num::before { content: counter(ali); }
    .aliyah-row .form-control {
      width: 100%;
      border-radius: var(--radius-sm);
    }
    .aliyah-row .aliyah-name-input { font-weight: 600; }
    .aliyah-row .sale-toggle {
      padding: 8px 12px;
      border-radius: var(--radius-sm);
      border: 1.5px solid var(--border);
      background: var(--card);
      color: var(--muted);
      font-size: 1rem;
      line-height: 1;
      cursor: pointer;
      transition: all 0.15s;
      white-space: nowrap;
      min-width: 44px;
      min-height: 40px;
    }
    .aliyah-row .sale-toggle:hover { border-color: var(--accent); color: var(--accent); }
    .aliyah-row .sale-toggle.active {
      background: var(--accent-light);
      border-color: var(--accent);
      color: #8B6914;
      font-weight: 800;
    }
    .aliyah-row .aliyah-del {
      width: 40px; height: 40px;
      border-radius: var(--radius-sm);
      border: 1.5px solid var(--border);
      background: var(--card);
      color: var(--muted);
      font-size: 1rem;
      cursor: pointer;
      transition: all 0.15s;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .aliyah-row .aliyah-del:hover {
      border-color: var(--danger);
      color: var(--danger);
      background: var(--danger-light);
    }

    /* Custom autocomplete for member name inputs (replaces native <datalist>
       which rendered detached from the anchor input on desktop). */
    .ac-dropdown {
      position: absolute;
      z-index: 9999;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.12);
      max-height: 240px;
      overflow-y: auto;
      min-width: 200px;
      font-size: 0.92rem;
    }
    .ac-dropdown .ac-item {
      padding: 8px 12px;
      cursor: pointer;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .ac-dropdown .ac-item:hover,
    .ac-dropdown .ac-item.active {
      background: var(--brand-light);
      color: var(--brand);
    }
    .ac-dropdown .ac-empty {
      padding: 10px 12px;
      color: var(--text-muted);
      font-size: 0.85rem;
      font-style: italic;
    }

    /* Entry form: parsha is the primary field, event type as a chip */
    .entry-parsha-group { margin-bottom: 10px; }
    .entry-parsha-select {
      font-size: 1.02rem;
      font-weight: 600;
      padding: 13px 14px;
    }
    .entry-parsha-label-row {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      margin-bottom: 6px;
    }
    .entry-parsha-label-row .form-label { margin-bottom: 0; }
    .past-shabbat-toggle {
      background: var(--card);
      color: var(--brand);
      border: 1px dashed var(--border);
      border-radius: 999px;
      padding: 4px 12px;
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .past-shabbat-toggle:hover {
      border-style: solid;
      border-color: var(--brand);
      background: var(--brand-light);
    }
    .past-shabbat-panel {
      margin-top: 10px;
      background: var(--brand-light);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px;
    }
    .past-shabbat-panel-title {
      font-weight: 700;
      font-size: 0.92rem;
      color: var(--brand);
      margin-bottom: 8px;
    }
    .past-shabbat-list {
      display: flex;
      flex-direction: column;
      gap: 6px;
      max-height: 320px;
      overflow-y: auto;
    }
    .past-shabbat-item {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      padding: 10px 12px;
      background: var(--bg-card);
      border: 1px solid var(--border);
      border-radius: 10px;
      font-family: inherit;
      cursor: pointer;
      text-align: right;
      transition: all 0.15s;
    }
    .past-shabbat-item:hover {
      border-color: var(--brand);
      background: var(--brand-light);
    }
    .past-shabbat-parsha {
      font-weight: 700;
      color: var(--text);
      font-size: 0.96rem;
    }
    .past-shabbat-meta {
      color: var(--text-muted);
      font-size: 0.82rem;
    }
    .past-shabbat-hint {
      margin-top: 8px;
      padding: 10px 12px;
      background: var(--success-light);
      border: 1px solid rgba(61,153,112,0.35);
      border-radius: 10px;
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      justify-content: space-between;
    }
    .past-shabbat-hint-text {
      color: var(--success);
      font-weight: 700;
      font-size: 0.9rem;
    }
    .past-shabbat-hint-date {
      color: var(--text-muted);
      font-weight: 500;
    }
    .past-shabbat-clear {
      background: transparent;
      border: 1px solid rgba(61,153,112,0.5);
      color: var(--success);
      border-radius: 999px;
      padding: 4px 12px;
      font-family: inherit;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
    }
    .past-shabbat-clear:hover {
      background: var(--success);
      color: #fff;
    }
    .entry-chips-row {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-bottom: 12px;
    }
    .chip-select-wrap {
      position: relative;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--brand-light);
      border: 1px solid var(--border);
      border-radius: 999px;
      padding: 6px 12px 6px 10px;
      color: var(--brand);
      font-weight: 700;
      font-size: 0.88rem;
      cursor: pointer;
      transition: all 0.15s;
    }
    .chip-select-wrap:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
    .chip-select-wrap:hover .chip-select-caret { color: #fff; }
    .chip-select-icon { font-size: 0.95rem; line-height: 1; }
    .chip-select {
      appearance: none;
      -webkit-appearance: none;
      background: transparent;
      border: none;
      color: inherit;
      font: inherit;
      padding: 0 4px 0 0;
      cursor: pointer;
      outline: none;
      font-weight: 700;
    }
    .chip-select-caret {
      font-size: 0.75rem;
      color: var(--brand);
      pointer-events: none;
      line-height: 1;
    }
    .entry-name-toggle {
      background: transparent;
      border: 1px dashed var(--border);
      border-radius: 999px;
      color: var(--muted);
      padding: 6px 12px;
      font-family: inherit;
      font-size: 0.82rem;
      font-weight: 600;
      cursor: pointer;
      transition: all 0.15s;
    }
    .entry-name-toggle:hover { border-color: var(--brand); color: var(--brand); }
    .entry-name-toggle[aria-expanded="true"] {
      border-style: solid;
      border-color: var(--brand);
      color: var(--brand);
      background: var(--brand-light);
    }
    .entry-event-name-group { margin-bottom: 12px; }

    /* Entry form header + submit */
    .entry-header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 16px;
    }
    .entry-header h2 { margin: 0; }
    .entry-bulk-btn {
      background: var(--card);
      color: var(--brand);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      padding: 8px 14px;
      font-family: inherit;
      font-size: 0.85rem;
      font-weight: 600;
      cursor: pointer;
      white-space: nowrap;
      transition: all 0.15s;
    }
    .entry-bulk-btn:hover { border-color: var(--brand); background: var(--brand-light); }
    .entry-add-row {
      width: 100%;
      margin-top: 12px;
      background: transparent;
      border: 1.5px dashed var(--border);
      color: var(--muted);
    }
    .entry-add-row:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-light); }
    .entry-submit-wrap { margin-top: 24px; }
    .entry-submit-btn { width: 100%; font-size: 1.02rem; padding: 14px 20px; }

    /* Search + in-field funnel button (unified pattern across the app) */
    .search-filter-bar {
      position: relative;
      margin-bottom: 16px;
    }
    .search-filter-bar .search-input,
    .search-filter-bar .form-control {
      width: 100%;
      padding-inline-end: 48px; /* reserve space for the funnel button */
    }
    .filter-trigger {
      position: absolute;
      top: 50%;
      inset-inline-end: 6px;
      transform: translateY(-50%);
      width: 34px;
      height: 34px;
      padding: 0;
      border-radius: 50%;
      background: transparent;
      border: none;
      color: var(--muted);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-family: inherit;
      transition: background 0.18s, color 0.18s, box-shadow 0.18s;
    }
    .filter-trigger:hover,
    .filter-trigger.is-active {
      background: var(--brand);
      color: #fff;
    }
    .filter-trigger.has-active {
      background: var(--accent);
      color: #fff;
      box-shadow: 0 2px 6px rgba(200, 155, 60, 0.35);
    }
    .filter-trigger svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
    }
    /* Hide any inline label text so the trigger is icon-only; keep aria-label for a11y */
    .filter-trigger .label,
    .filter-trigger > span:not(.filter-badge) { display: none; }

    /* Active-filter indicator — small gold dot on the funnel button */
    .filter-badge {
      display: none;
      position: absolute;
      top: 1px;
      inset-inline-end: 1px;
      width: 9px;
      height: 9px;
      padding: 0;
      border-radius: 50%;
      background: var(--accent);
      border: 1.5px solid var(--bg-card);
      color: transparent;
      font-size: 0;
      line-height: 0;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
    .filter-badge.active { display: inline-block; }
    /* Optional numeric variant (not used by default) */
    .filter-badge.with-count {
      width: auto;
      min-width: 16px;
      height: 16px;
      padding: 0 5px;
      border-radius: 8px;
      color: #fff;
      font-size: 0.68rem;
      font-weight: 800;
      line-height: 1;
      border: 1.5px solid var(--bg-card);
    }
    .filter-badge.with-count.active { display: inline-flex; }

    /* Filter backdrop */
    .filter-backdrop {
      position: fixed;
      inset: 0;
      background: rgba(45, 36, 36, 0.45);
      z-index: 999;
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.22s ease;
    }
    .filter-backdrop.open {
      opacity: 1;
      pointer-events: auto;
    }

    /* Filter sheet (bottom sheet on mobile, popover on desktop) */
    .filter-sheet {
      position: fixed;
      left: 0; right: 0; bottom: 0;
      background: var(--surface);
      border-radius: 20px 20px 0 0;
      box-shadow: 0 -8px 28px rgba(0,0,0,0.18);
      padding: 8px 18px 20px;
      transform: translateY(100%);
      transition: transform 0.25s ease;
      z-index: 1000;
      max-height: 85vh;
      overflow-y: auto;
      display: block;
    }
    .filter-sheet[hidden] { display: none; }
    .filter-sheet.open { transform: translateY(0); }
    .filter-sheet-handle {
      width: 40px;
      height: 4px;
      background: var(--border);
      border-radius: 2px;
      margin: 6px auto 10px;
      touch-action: none;
      cursor: grab;
    }
    .filter-sheet-handle:active { cursor: grabbing; }
    .filter-sheet-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-bottom: 14px;
      touch-action: none;
    }
    .filter-sheet-head h3 {
      margin: 0;
      font-size: 1.05rem;
      color: var(--brand);
      font-weight: 700;
    }
    .filter-sheet-close {
      width: 36px; height: 36px;
      border-radius: 50%;
      border: none;
      background: var(--brand-light);
      color: var(--brand);
      font-size: 1rem;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .filter-sheet-close:hover { background: var(--brand); color: #fff; }
    .filter-sheet-body .form-group { margin-bottom: 14px; }
    .filter-sheet-body .filter-group-label,
    .filter-sheet .filter-group-label,
    .filter-sheet-body .form-label {
      display: block;
      font-size: 0.82rem;
      font-weight: 700;
      color: var(--muted);
      margin: 14px 0 6px;
      letter-spacing: 0.3px;
    }
    .filter-sheet-body .filter-group-label:first-child,
    .filter-sheet .filter-group-label:first-child,
    .filter-sheet-body .form-group:first-child .form-label { margin-top: 4px; }
    .filter-sheet .chip-row {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      padding: 0;
      overflow: visible;
    }
    .filter-sheet .chip {
      min-height: 34px;
      padding: 6px 12px;
      font-size: 0.9rem;
    }
    .filter-sheet-body .form-control { margin-bottom: 4px; }
    .filter-sheet-body .form-control + .form-control { margin-top: 8px; }

    /* Two short fields on one row to reduce vertical scroll in the drawer.
       Grid enforces equal columns so the pair always lines up — unlike
       flex-wrap which let the two shrink unevenly on varying label widths. */
    .filter-sheet-body .filter-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 10px;
      align-items: end;
    }
    .filter-sheet-body .filter-row > .form-group {
      min-width: 0;
      margin-bottom: 0;
      display: flex;
      flex-direction: column;
    }
    .filter-sheet-body .filter-row > .form-group > .form-label {
      margin-bottom: 6px;
      min-height: 1.1em;
    }
    .filter-sheet-body .filter-row > .form-group > .form-control {
      width: 100%;
      margin-bottom: 0;
    }
    .filter-sheet-body .filter-row + * { margin-top: 14px; }

    /* Row of page-level action buttons that used to share the search bar */
    .page-actions-row {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-bottom: 12px;
    }
    .page-actions-row .btn {
      flex: 1 1 auto;
      min-width: 0;
      padding: 8px 12px;
      font-size: 0.85rem;
      gap: 4px;
    }

    /* When any filter sheet is open, step aside the floating WhatsApp help
       FAB so it doesn't overlap the drawer's close button on mobile. */
    body:has(.filter-sheet.open) #gabbai-help-wrap {
      opacity: 0;
      pointer-events: none;
      transform: translateY(-50%) translateX(-110%);
      transition: opacity 0.18s ease, transform 0.22s ease;
    }
    .filter-sheet-actions {
      display: flex;
      gap: 10px;
      margin-top: 14px;
      padding-top: 14px;
      border-top: 1px solid var(--border);
    }
    .filter-sheet-actions .btn { flex: 1; }
    /* Desktop: centered modal instead of bottom sheet */
    @media (min-width: 601px) {
      .filter-sheet {
        left: 50%;
        right: auto;
        bottom: auto;
        top: 50%;
        width: 420px;
        max-width: calc(100vw - 32px);
        max-height: 85vh;
        border-radius: var(--radius);
        box-shadow: var(--shadow-md);
        border: 1px solid var(--border);
        transform: translate(-50%, calc(-50% + 12px));
        opacity: 0;
        pointer-events: none;
        transition: transform 0.22s ease, opacity 0.22s ease;
      }
      .filter-sheet.open {
        transform: translate(-50%, -50%);
        opacity: 1;
        pointer-events: auto;
      }
      .filter-sheet-handle { display: none; }
    }

    /* Inline filter group */
    .filter-inline {
      display: flex; gap: 10px;
      align-items: center;
      flex-wrap: wrap;
    }
    .filter-inline .form-control { width: auto; }
    textarea.form-control {
      resize: vertical; min-height: 100px;
      font-family: 'Heebo', system-ui, monospace;
    }

    /* Buttons */
    .btn {
      padding: 10px 20px;
      border-radius: 10px;
      border: none;
      font-family: inherit;
      font-weight: 600;
      cursor: pointer;
      font-size: 0.95rem;
      transition: transform .15s ease, box-shadow .18s ease, filter .18s ease;
      display: inline-flex;
      align-items: center;
      gap: 8px;
      justify-content: center;
    }
    .btn:hover { filter: brightness(0.97); transform: translateY(-1px); }
    .btn:active { transform: translateY(0); }
    .btn-primary {
      background: var(--brand);
      color: #fff;
      box-shadow: 0 2px 8px rgba(107,28,42,.25);
    }
    .btn-primary:hover { background: var(--brand-dark); box-shadow: 0 4px 14px rgba(107,28,42,.32); }
    .btn-secondary {
      background: var(--card);
      color: var(--brand);
      border: 1px solid var(--border);
    }
    .btn-secondary:hover { border-color: var(--brand); background: var(--brand-light); }
    .btn-success { background: var(--success); color: #fff; box-shadow: 0 2px 8px rgba(61,153,112,.25); }
    .btn-danger  { background: var(--danger);  color: #fff; box-shadow: 0 2px 8px rgba(192,57,43,.25); }
    .btn-accent  { background: var(--accent);  color: #fff; box-shadow: 0 2px 8px rgba(200,155,60,.28); }

    .btn-icon-small { background: none; border: none; cursor: pointer; font-size: 1.05rem; opacity: 0.6; padding: 4px; }
    .btn-icon-small:hover { opacity: 1; transform: scale(1.1); }

    .attendance-btn {
      padding: 3px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--card);
      cursor: pointer;
      font-size: 0.75rem; font-weight: 600;
      transition: all 0.2s;
    }
    .att-active     { background: var(--success-light); color: var(--success); border-color: rgba(61,153,112,.35); }
    .att-occasional { background: var(--accent-light);  color: #8B6914;         border-color: rgba(200,155,60,.35); }
    .att-inactive   { background: var(--danger-light);  color: var(--danger);  border-color: rgba(192,57,43,.30); }

    /* ───── Quick filter chips (members tab) ───── */
    .quick-chips {
      display: flex;
      gap: 6px;
      flex-wrap: wrap;
      padding: 4px 0 10px;
      margin-bottom: 6px;
    }
    .quick-chips .chip {
      flex: 1 1 auto;
      padding: 6px 10px;
      border-radius: 999px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--text);
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      transition: all .15s ease;
      white-space: nowrap;
      text-align: center;
    }
    .quick-chips .chip:hover { border-color: var(--brand-light); }
    .quick-chips .chip.chip-active {
      background: var(--brand);
      color: #fff;
      border-color: var(--brand);
    }

    /* ───── Clean member card (members tab) ───── */
    .member-list--clean { gap: 6px; }
    .member-card {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      cursor: pointer;
      position: relative;
    }
    .member-card:hover {
      background: var(--surface);
      transform: none;
      border-color: var(--brand-light);
    }
    .member-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
    .member-card__count { flex-shrink: 0; }
    .member-card__body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 2px;
    }
    .member-card__top {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
    }
    .member-card__name {
      font-weight: 700;
      font-size: 1rem;
      color: var(--text);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .member-card__role {
      font-size: 0.72rem;
      padding: 2px 8px;
      flex-shrink: 0;
    }
    .member-card__meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      color: var(--muted);
    }
    .member-card__last {
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .att-dot {
      width: 10px;
      height: 10px;
      border-radius: 50%;
      display: inline-block;
      flex-shrink: 0;
      cursor: pointer;
      border: 1.5px solid transparent;
      transition: transform .15s ease;
    }
    .att-dot:hover { transform: scale(1.3); }
    .att-dot.att-active     { background: var(--success); }
    .att-dot.att-occasional { background: var(--accent); }
    .att-dot.att-inactive   { background: var(--danger); }

    /* Overflow menu (⋮) */
    .member-card__menu-wrap { position: relative; flex-shrink: 0; }
    .member-card__menu-btn {
      background: none;
      border: none;
      padding: 6px;
      border-radius: 8px;
      color: var(--muted);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: background .15s ease, color .15s ease;
    }
    .member-card__menu-btn:hover { background: var(--surface); color: var(--brand); }
    .member-menu {
      position: absolute;
      top: calc(100% + 4px);
      left: 0;
      min-width: 170px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      box-shadow: 0 6px 20px rgba(0,0,0,.12);
      padding: 6px;
      z-index: 30;
      display: none;
      flex-direction: column;
      gap: 2px;
    }
    .member-menu.open { display: flex; }
    .member-menu button {
      background: none;
      border: none;
      padding: 8px 10px;
      text-align: right;
      font-size: 0.9rem;
      color: var(--text);
      border-radius: 6px;
      cursor: pointer;
      font-weight: 500;
      display: flex;
      align-items: center;
      gap: 10px;
    }
    .member-menu button svg { flex-shrink: 0; color: var(--brand); }
    .member-menu button:hover { background: var(--brand-light); color: var(--brand); }
    .member-menu button:hover svg { color: var(--brand); }

    /* ───── Page head (title + top-right actions) ───── */
    .page-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 14px;
    }
    .page-head h2 { margin: 0; }
    .page-head-actions {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-shrink: 0;
    }
    .page-head-menu-btn {
      width: 40px;
      height: 40px;
      border-radius: 50%;
      border: 1.5px solid var(--border);
      background: var(--card);
      color: var(--brand);
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      transition: all 0.15s ease;
    }
    .page-head-menu-btn:hover {
      border-color: var(--brand);
      background: var(--brand-light);
    }
    .page-head .wa-circle-btn { width: 40px; height: 40px; }
    .page-head .wa-circle-btn svg { width: 20px; height: 20px; }

    /* ───── Parsha card (collapsible) ───── */
    .parsha-card {
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: var(--radius-sm);
      box-shadow: var(--shadow-sm);
      transition: border-color .15s ease, box-shadow .15s ease;
      overflow: hidden;
    }
    .parsha-card:hover { border-color: var(--brand-light); }
    .parsha-card.open {
      border-color: var(--brand-light);
      box-shadow: var(--shadow);
    }
    .parsha-card__head {
      display: flex;
      align-items: center;
      gap: 12px;
      padding: 10px 14px;
      cursor: pointer;
      user-select: none;
    }
    .parsha-card__count {
      flex-shrink: 0;
      width: 40px;
      height: 40px;
      border-radius: 12px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 800;
      font-size: 1rem;
      color: #fff;
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
    }
    .parsha-card__body {
      flex: 1;
      min-width: 0;
      display: flex;
      flex-direction: column;
      gap: 3px;
    }
    .parsha-card__top {
      display: flex;
      align-items: center;
      gap: 8px;
      min-width: 0;
      flex-wrap: wrap;
    }
    .parsha-card__name {
      font-weight: 700;
      font-size: 1rem;
      color: var(--brand);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .parsha-card__meta {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.82rem;
      color: var(--muted);
      flex-wrap: wrap;
    }
    .parsha-card__meta .dot-sep {
      width: 3px;
      height: 3px;
      border-radius: 50%;
      background: var(--border);
      display: inline-block;
    }
    .parsha-card__preview {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      flex-wrap: wrap;
      font-size: 0.82rem;
      color: var(--muted);
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .parsha-card__preview .preview-name {
      color: var(--text);
      font-weight: 500;
    }
    .parsha-card__preview .preview-sale {
      background: var(--accent-light);
      color: var(--brand-dark);
      border-radius: 4px;
      padding: 1px 6px;
      font-size: 0.72rem;
      font-weight: 700;
    }
    .parsha-card__preview .preview-more {
      color: var(--muted);
      font-weight: 600;
    }
    .parsha-card__chev {
      flex-shrink: 0;
      color: var(--muted);
      transition: transform .2s ease;
    }
    .parsha-card.open .parsha-card__chev { transform: rotate(180deg); }

    .parsha-card__expanded {
      border-top: 1px solid var(--border);
      padding: 12px 14px 14px;
      background: var(--surface);
      display: none;
    }
    .parsha-card.open .parsha-card__expanded { display: block; }

    .parsha-card__names {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
    }
    .parsha-name-pill {
      display: inline-flex;
      align-items: center;
      gap: 4px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 6px;
      padding: 4px 10px;
      font-size: 0.88rem;
      cursor: pointer;
      transition: all .15s ease;
    }
    .parsha-name-pill:hover {
      border-color: var(--brand);
      background: var(--brand-light);
    }
    .parsha-name-pill.is-sale {
      background: var(--accent-light);
      border-color: var(--accent);
    }
    .parsha-name-pill.is-match {
      background: rgba(200,155,60,0.12);
      border-color: rgba(200,155,60,0.55);
      font-weight: 700;
    }
    .parsha-name-pill .pill-tag {
      background: var(--accent);
      color: #fff;
      padding: 1px 6px;
      border-radius: 4px;
      font-size: 0.68rem;
      font-weight: 800;
    }

    .parsha-card__actions {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin-top: 12px;
      padding-top: 10px;
      border-top: 1px dashed var(--border);
      justify-content: flex-end;
    }
    .parsha-card__action {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 6px 12px;
      font-size: 0.85rem;
      color: var(--brand);
      cursor: pointer;
      font-family: inherit;
      font-weight: 600;
      transition: all .15s ease;
    }
    .parsha-card__action:hover {
      border-color: var(--brand);
      background: var(--brand-light);
    }

    /* History summary banners (member/parsha/book filters) */
    .history-summary {
      background: var(--brand-light);
      border: 1.5px solid rgba(107,28,42,.22);
      border-radius: 12px;
      padding: 14px 16px;
      margin-bottom: 14px;
      color: var(--text);
      font-size: 0.92rem;
    }
    .history-summary strong { color: var(--brand); }

    /* Actions sheet (kebab menu in parsha page) */
    .actions-sheet-body { padding-bottom: 4px; }
    .actions-group { margin-bottom: 14px; }
    .actions-group:last-child { margin-bottom: 0; }
    .actions-group-title {
      font-size: 0.78rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: none;
      letter-spacing: 0.2px;
      margin-bottom: 6px;
      padding: 0 4px;
    }
    .action-row {
      display: flex;
      align-items: center;
      gap: 12px;
      width: 100%;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      margin-bottom: 6px;
      cursor: pointer;
      font-family: inherit;
      text-align: right;
      transition: all .15s ease;
    }
    .action-row:last-child { margin-bottom: 0; }
    .action-row:hover {
      border-color: var(--brand);
      background: var(--brand-light);
    }
    .action-row-icon {
      font-size: 1.3rem;
      flex-shrink: 0;
      width: 32px;
      text-align: center;
    }
    .action-row-body {
      display: flex;
      flex-direction: column;
      gap: 2px;
      flex: 1;
      min-width: 0;
    }
    .action-row-title {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--text);
    }
    .action-row-sub {
      font-size: 0.78rem;
      color: var(--muted);
    }
    .actions-group--danger .actions-group-title { color: var(--danger); }
    .action-row--danger {
      border-color: rgba(192,57,43,0.28);
      background: var(--danger-light);
    }
    .action-row--danger:hover {
      border-color: var(--danger);
      background: rgba(192,57,43,0.12);
    }
    .action-row--danger .action-row-title { color: var(--danger); }

    /* Shabbat assignment preview */
    .shabbat-preview {
      background: linear-gradient(135deg, var(--surface), var(--accent-light));
      border: 1.5px solid var(--accent);
      border-radius: var(--radius);
      padding: 18px;
      margin-bottom: 18px;
      box-shadow: var(--shadow-sm);
    }
    .shabbat-slot {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      margin: 6px 0;
      background: var(--card);
      border-radius: 10px;
      border: 1px solid var(--border);
      transition: border-color .15s;
    }
    .shabbat-slot:hover { border-color: var(--brand); }
    .slot-label { font-weight: 700; color: var(--brand); min-width: 70px; }
    .slot-name  { flex: 1; margin: 0 12px; font-size: 1rem; }
    .slot-actions { display: flex; gap: 6px; }
    /* Layout Helpers */
    .grid-2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(450px, 1fr)); gap: 20px; }
    .hidden { display: none; }
    @keyframes fadeIn { from { opacity: 0; transform: translateY(5px); } to { opacity: 1; transform: translateY(0); } }
    /* =========================================
       Tablet (≤900px)
       ========================================= */
    @media (max-width: 900px) {
      body { padding: 12px; }
      .container { max-width: 100%; }
      header { padding: 20px 16px 18px; margin: -12px -12px 16px -12px; border-radius: 0 0 20px 20px; }
      .brand-title { font-size: 1.7rem; line-height: 1.15; }
      .brand-subtitle { font-size: 0.92rem; }
      .zmanim-bar { gap: 8px; padding: 0; width: 100%; }
      .card { padding: 14px; margin-bottom: 12px; border-radius: 14px; }
      h2 { font-size: 1.1rem; gap: 6px; margin-bottom: 10px; }
      .grid-2 { grid-template-columns: 1fr; gap: 12px; }
      .book-stats { grid-template-columns: 1fr; }
      .stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
      .stat-box { padding: 12px 8px; border-radius: 12px; }
      .stat-number { font-size: 1.5rem; }
      .stat-label { font-size: 0.74rem; }
      .balance-bar { font-size: 0.92rem; min-height: 38px; padding: 8px 12px; }
      .profile-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .chart-container { height: 170px; }
    }

    /* =========================================
       Mobile (≤600px) — bottom nav
       ========================================= */
    @media (max-width: 600px) {
      /* Body: room for fixed bottom nav */
      body { padding: 8px 8px 72px 8px; }

      /* Compact hero header */
      header {
        padding: 10px 12px 12px;
        margin: -8px -8px 10px -8px;
        border-radius: 0 0 16px 16px;
      }
      .chabad-logo { margin-bottom: 4px; }
      .chabad-logo img { height: 44px; border-radius: 8px; }
      .brand-title { font-size: 1.05rem; margin-bottom: 1px; letter-spacing: -0.3px; }
      .brand-subtitle { font-size: 0.75rem; flex-wrap: wrap; gap: 4px; }
      .bsd-mark { top: 6px; right: 10px; font-size: 0.7rem; }
      .memorial-strip { display: none; }

      /* Zmanim: horizontal scroll strip — shows more info in less height */
      .zmanim-bar {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        gap: 6px;
        padding: 0 2px 2px;
        margin-top: 8px;
        width: 100%;
        max-width: 100%;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }
      .zmanim-bar::-webkit-scrollbar { display: none; }
      .zman-sep { display: none; }
      .zman-item {
        flex: 0 0 auto;
        scroll-snap-align: start;
        flex-direction: column;
        gap: 2px;
        align-items: center;
        justify-content: center;
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 10px;
        padding: 6px 12px;
        min-width: 92px;
        min-height: 46px;
        text-align: center;
        font-size: 0.78rem;
      }
      .zman-item > span:last-child { font-size: 0.78rem; line-height: 1.15; }
      .zman-label {
        font-size: 0.56rem;
        color: var(--accent);
        font-weight: 700;
        letter-spacing: 1.4px;
      }

      /* Global search: full width */
      .global-search-wrapper { max-width: 100%; margin-top: 8px; }
      .global-search-kbd { display: none; }

      /* ───── Tabs: fixed bottom nav ───── */
      .tabs {
        position: fixed;
        bottom: 0; left: 0; right: 0;
        z-index: 999;
        background: var(--brand);
        border-top: 1px solid var(--brand-dark);
        box-shadow: 0 -4px 16px rgba(74,21,32,0.25);
        margin: 0;
        padding: 5px 2px env(safe-area-inset-bottom, 5px);
        border-radius: 0;
        display: flex;
        justify-content: space-around;
        gap: 0;
        overflow-x: auto;
        overflow-y: hidden;
        flex-wrap: nowrap;
        scrollbar-width: none;
      }
      .tabs::-webkit-scrollbar { display: none; }
      .tab-btn {
        flex: 1 0 0;
        min-width: 0;
        padding: 6px 4px 8px;
        font-size: inherit;
        border-radius: 10px;
        background: transparent;
        border: none;
        color: rgba(255,255,255,.45);
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 2px;
        white-space: nowrap;
        min-height: 54px;
        justify-content: center;
        line-height: 1.1;
      }
      .tab-btn:hover { background: rgba(255,255,255,.06); color: rgba(255,255,255,.85); }
      .tab-icon-svg { width: 22px; height: 22px; margin: 0 0 2px 0; }
      .tab-label { font-size: 0.62rem; font-weight: 600; letter-spacing: .2px; }
      .tab-btn[aria-selected="true"] {
        background: rgba(255,255,255,.10);
        color: var(--accent);
        border-radius: 12px;
        font-weight: 800;
        border: none;
        box-shadow: none;
      }
      .tab-btn[aria-selected="true"] .tab-icon-svg { stroke: var(--accent); }

      /* Cards */
      .card { padding: 12px; margin-bottom: 10px; border-radius: 12px; }
      h2 { font-size: 1.02rem; }

      /* Stats 2-col */
      .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 6px; margin-bottom: 10px; }
      .stat-box { padding: 10px 6px; border-radius: 10px; }
      .stat-number { font-size: 1.35rem; }
      .stat-label { font-size: 0.7rem; }

      /* Balance */
      .balance-bar { font-size: 0.84rem; min-height: 34px; padding: 6px 10px; margin-bottom: 10px; }

      /* Members */
      .member-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
        padding: 10px 12px;
      }
      .member-right, .member-left { width: 100%; gap: 8px; }
      .member-left { flex-wrap: wrap; }
      .member-name { font-size: 0.95rem; }

      /* Clean card overrides for mobile (keep single row) */
      .member-card {
        flex-direction: row;
        align-items: center;
        gap: 10px;
        padding: 10px 12px;
      }
      .member-card__body { width: auto; }
      .member-card__name { font-size: 0.95rem; }
      .member-card__meta { font-size: 0.78rem; }

      /* Parsha card on mobile */
      .parsha-card__head { padding: 10px 12px; gap: 10px; }
      .parsha-card__count { width: 36px; height: 36px; border-radius: 10px; font-size: 0.95rem; }
      .parsha-card__name { font-size: 0.95rem; }
      .parsha-card__meta { font-size: 0.78rem; }
      .parsha-card__preview { font-size: 0.78rem; }
      .parsha-card__expanded { padding: 10px 12px 12px; }
      .page-head h2 { font-size: 1.05rem; }

      /* Touch-friendly buttons */
      .btn { min-height: 44px; padding: 10px 14px; font-size: 0.92rem; }
      .tab-share-btn { bottom: 72px; left: 12px; width: 44px; height: 44px; }
      .tab-share-btn svg { width: 22px; height: 22px; }

      /* Entry card: tighter spacing for shorter page */
      #entry .card { padding: 12px 12px 16px; }
      #entry .form-group { margin-bottom: 10px; }
      #entry .form-label { font-size: 0.82rem; margin-bottom: 3px; }
      #entry .form-control { padding: 9px 10px; font-size: 0.92rem; }
      .entry-parsha-select { padding: 11px 12px; font-size: 0.96rem; }
      .entry-chips-row { gap: 6px; margin-bottom: 10px; }
      .chip-select-wrap { padding: 5px 10px 5px 8px; font-size: 0.82rem; }
      .entry-name-toggle { padding: 5px 10px; font-size: 0.76rem; }

      /* Entry header */
      .entry-header { margin-bottom: 10px; }
      .entry-bulk-btn { padding: 6px 10px; font-size: 0.76rem; }

      /* Sticky save button above bottom nav */
      #entry .entry-submit-wrap {
        position: sticky;
        bottom: 76px;
        background: linear-gradient(to top, var(--surface) 70%, rgba(254,251,247,0));
        padding: 14px 0 8px;
        margin-top: 16px;
        z-index: 5;
      }

      /* Entry form — two-row on mobile to fit pledge amount */
      .aliyah-row {
        grid-template-columns: 22px minmax(0, 1.3fr) minmax(0, 0.9fr) auto auto;
        grid-template-areas:
          "num name note sale del"
          "num pledge pledge pledge pledge";
        gap: 5px 5px;
        margin-bottom: 8px;
        padding-bottom: 4px;
        border-bottom: 1px dashed rgba(107,28,42,0.08);
      }
      .aliyah-row .aliyah-pledge-input {
        grid-area: pledge;
        padding: 6px 8px;
        font-size: 0.82rem;
        min-height: 34px;
      }
      .aliyah-num {
        grid-area: num;
        width: 22px; height: 22px;
        font-size: 0.72rem;
        align-self: center;
        margin-top: 0;
      }
      .aliyah-row .aliyah-name-input {
        grid-area: name;
        padding: 8px 8px;
        font-size: 0.9rem;
      }
      .aliyah-row .aliyah-note-input {
        grid-area: note;
        padding: 8px 6px;
        font-size: 0.8rem;
        color: var(--muted);
      }
      .aliyah-row .aliyah-note-input::placeholder { font-size: 0.75rem; }
      .aliyah-row .sale-toggle {
        grid-area: sale;
        min-width: 34px;
        min-height: 36px;
        padding: 4px 6px;
        font-size: 1rem;
      }
      .aliyah-row .aliyah-del {
        grid-area: del;
        width: 34px; height: 36px;
        font-size: 0.85rem;
      }

      /* Distribution */
      .distribution-row { gap: 8px; }
      .dist-item { min-width: calc(50% - 4px); padding: 10px 9px; }

      /* Insights */
      .insights-card { padding: 12px; }
      .insight-item { font-size: 0.88rem; padding: 10px; }

      /* Filters */
      .filter-inline .form-control { width: 100%; }

      /* Shabbat slots */
      .shabbat-slot { flex-wrap: wrap; gap: 6px; align-items: flex-start; }
      .slot-label { min-width: 0; }
      .slot-name { margin: 0; width: 100%; }
      .slot-actions { width: 100%; justify-content: flex-end; }

      /* Chart */
      .chart-container { height: 150px; }

      /* Profile overlay mobile overrides moved below base rules (see end of profile block) */

      /* Long absent */
      .la-actions-wrap { width: 100%; }
      .la-actions-wrap .btn { width: auto; }
    }

    /* =========================================
       Profile Card Modal (redesigned)
       ========================================= */
    .profile-overlay {
      position: fixed; inset: 0;
      background: rgba(45,36,36,0.55);
      z-index: 1000;
      display: flex; align-items: center; justify-content: center;
      padding: 20px;
      animation: fadeIn 0.2s ease-out;
      backdrop-filter: blur(4px);
    }
    .profile-card {
      background: var(--surface);
      border-radius: 20px;
      width: 100%; max-width: 720px;
      max-height: 90vh; overflow: hidden;
      display: flex; flex-direction: column;
      box-shadow: 0 25px 60px -12px rgba(74,21,32,0.45);
      border: 1px solid var(--border);
      animation: profileSlideIn 0.3s ease-out;
      position: relative;
    }
    @keyframes profileSlideIn {
      from { opacity:0; transform:translateY(20px) scale(0.97); }
      to   { opacity:1; transform:translateY(0) scale(1); }
    }
    @keyframes profileSlideUp {
      from { transform:translateY(100%); }
      to   { transform:translateY(0); }
    }
    @keyframes profileSlideDown {
      from { transform:translateY(0); }
      to   { transform:translateY(100%); }
    }

    /* ── Drag handle (mobile bottom-sheet) ────── */
    .profile-drag-handle {
      display: none;
      position: absolute;
      top: 0; left: 0; right: 0;
      height: 22px;
      z-index: 4;
      cursor: grab;
      touch-action: none;
    }
    .profile-drag-handle::before {
      content: "";
      position: absolute;
      top: 8px; left: 50%; transform: translateX(-50%);
      width: 44px; height: 4px;
      border-radius: 4px;
      background: rgba(255,255,255,.38);
    }
    .profile-drag-handle:active { cursor: grabbing; }

    /* ── Hero header ──────────────────────────── */
    .profile-header {
      background: linear-gradient(135deg, var(--brand) 0%, var(--brand-dark) 100%);
      padding: 22px 20px 18px;
      color: #fff;
      text-align: center;
      position: relative;
      overflow: hidden;
      flex-shrink: 0;
    }
    .profile-header::before {
      content: "";
      position: absolute; inset: 0;
      background: radial-gradient(circle at 15% -20%, rgba(200,155,60,.22), transparent 60%);
      pointer-events: none;
    }
    .profile-header > * { position: relative; z-index: 1; }
    .profile-avatar-wrap {
      position: relative;
      width: 64px; height: 64px;
      margin: 0 auto 8px;
    }
    .profile-avatar {
      width: 64px; height: 64px;
      border-radius: 16px;
      background: rgba(255,255,255,0.14);
      display: flex; align-items: center; justify-content: center;
      font-size: 1.7rem; font-weight: 800;
      border: 2px solid var(--accent);
      box-shadow: 0 4px 14px rgba(0,0,0,.15);
    }
    .profile-att-badge {
      position: absolute;
      bottom: -2px; left: -2px;
      width: 16px; height: 16px;
      border-radius: 50%;
      background: #9ca3af;
      border: 2px solid var(--brand-dark);
      box-shadow: 0 1px 3px rgba(0,0,0,.25);
    }
    .profile-att-badge[data-att="active"]     { background: #3ee07e; box-shadow: 0 0 0 2px var(--brand-dark), 0 0 8px rgba(62,224,126,.55); }
    .profile-att-badge[data-att="occasional"] { background: #fbbf24; }
    .profile-att-badge[data-att="inactive"]   { background: #f87171; }
    .profile-name {
      font-size: 1.35rem; font-weight: 800; line-height: 1.2;
      margin-bottom: 6px;
    }
    .profile-id-row {
      display: flex; justify-content: center; align-items: center;
      gap: 6px; flex-wrap: wrap; margin-top: 2px;
    }
    .profile-role {
      background: rgba(200,155,60,0.22);
      color: var(--accent);
      padding: 1px 9px;
      border-radius: 16px;
      font-size: 0.7rem;
      font-weight: 700;
      display: inline-flex; align-items: center; gap: 4px;
      border: 1px solid rgba(200,155,60,.35);
      line-height: 1.5;
    }
    .profile-close {
      position: absolute; top: 12px; left: 12px;
      background: rgba(255,255,255,0.14);
      border: 1px solid rgba(255,255,255,0.18);
      color: #fff;
      width: 34px; height: 34px;
      border-radius: 50%;
      cursor: pointer;
      display: flex; align-items: center; justify-content: center;
      transition: background .15s;
      padding: 0;
      z-index: 5;
    }
    .profile-close:hover { background: rgba(255,255,255,0.28); }
    .profile-close svg { width: 16px; height: 16px; }

    /* ── Sticky action bar ────────────────────── */
    .profile-action-bar {
      position: sticky; top: 0; z-index: 3;
      background: var(--surface);
      border-bottom: 1px solid var(--border);
      padding: 10px 12px;
      display: grid;
      grid-template-columns: repeat(6, minmax(0, 1fr));
      gap: 6px;
      flex-shrink: 0;
    }
    .profile-action-bar .btn {
      flex-direction: column;
      align-items: center;
      justify-content: center;
      display: flex;
      gap: 4px;
      padding: 8px 4px;
      font-size: 0.76rem;
      line-height: 1.15;
      min-height: 58px;
      min-width: 0;
      box-shadow: none;
    }
    .profile-action-bar .btn span {
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      max-width: 100%;
    }
    .profile-action-bar .btn svg { width: 18px; height: 18px; }

    /* ── Deceased member styling ───────────────
       The profile card and the member-list row both go to a muted, slightly
       desaturated palette so the gabbai sees at a glance "this person passed
       away" without losing the data underneath. We don't drop opacity below
       .65 — the names, dates and history must stay readable. */
    .profile-card.profile-deceased { background: linear-gradient(180deg, #fafaf7 0%, #f1ede4 100%); }
    .profile-card.profile-deceased .profile-stats-grid,
    .profile-card.profile-deceased .profile-section { filter: grayscale(.25); }
    .profile-deceased-badge {
      display: inline-block;
      background: #6b7280;
      color: #fff;
      font-size: 0.78rem;
      padding: 2px 10px;
      border-radius: 999px;
      font-weight: 700;
      margin-inline-start: 6px;
      vertical-align: middle;
    }
    .profile-action-bar--deceased { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
    .profile-action-bar--deceased .profile-deceased-notice {
      grid-column: 1 / -1;
      background: #f3f0e8;
      border: 1px solid #d6cdb6;
      color: #5b3b1f;
      padding: 10px 14px;
      border-radius: 10px;
      font-weight: 700;
      font-size: 0.92rem;
      text-align: center;
      line-height: 1.5;
    }
    .profile-chip--deceased input:checked + span { color: #6b1c2a; }
    .member-deceased { opacity: .68; filter: grayscale(.35); }
    .member-deceased .member-card__name { color: #4b5563; }
    .member-deceased-tag {
      background: #6b7280 !important;
      color: #fff !important;
      font-size: 0.72rem;
    }

    /* ── Scrollable content wrapper ───────────── */
    .profile-scroll {
      flex: 1; min-height: 0;
      overflow-y: auto;
      -webkit-overflow-scrolling: touch;
    }
    .profile-body {
      display: flex; flex-direction: column;
      gap: 12px;
      padding: 14px;
    }

    /* ── Stats grid (under action bar) ────────── */
    .profile-stats-grid {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 10px;
    }
    .profile-stats-grid .stat-box {
      padding: 12px 10px;
      text-align: center;
      min-width: 0;
    }
    .profile-stats-grid .stat-number {
      font-size: 1.6rem; line-height: 1;
      margin-bottom: 6px;
      display: inline-flex; align-items: baseline; gap: 3px;
    }
    .profile-stats-grid .stat-number[data-state="ok"]     { color: var(--success); }
    .profile-stats-grid .stat-number[data-state="warn"]   { color: var(--warning); }
    .profile-stats-grid .stat-number[data-state="danger"] { color: var(--danger); }
    .profile-stats-grid .stat-number[data-state="muted"]  { color: var(--muted); }
    .profile-stats-grid .stat-label { font-size: 0.72rem; }
    .profile-stats-grid .stat-sub {
      font-size: 0.68rem;
      color: var(--muted);
      margin-top: 3px;
      white-space: nowrap;
      overflow: hidden; text-overflow: ellipsis;
    }

    /* Fairness bar inside stat-box */
    .profile-fairness-bar {
      height: 6px;
      border-radius: 3px;
      background: var(--border);
      overflow: hidden;
      margin-top: 6px;
    }
    .profile-fairness-fill { height: 100%; border-radius: 3px; transition: width 0.5s ease; background: var(--brand); }
    .profile-fairness-fill[data-state="ok"]     { background: var(--success); }
    .profile-fairness-fill[data-state="warn"]   { background: var(--warning); }
    .profile-fairness-fill[data-state="danger"] { background: var(--danger); }

    /* Type distribution inside a stat-box */
    .profile-type-dist {
      display: flex; flex-direction: column; gap: 4px;
      margin-top: 2px;
    }
    .profile-type-dist-row {
      display: flex; align-items: center; gap: 6px;
      font-size: 0.78rem;
    }
    .profile-type-dot {
      width: 8px; height: 8px; border-radius: 50%;
      flex-shrink: 0;
    }
    .profile-type-dot[data-type="שחרית"] { background: var(--type-shacharit); }
    .profile-type-dot[data-type="מנחה"]  { background: var(--type-mincha); }
    .profile-type-dot[data-type="מפטיר"] { background: var(--type-maftir); }
    .profile-type-dot[data-type="כהן"]   { background: var(--type-kohen); }
    .profile-type-dot[data-type="לוי"]   { background: var(--type-levi); }
    .profile-type-label {
      color: var(--muted);
      flex: 1; text-align: right;
    }
    .profile-type-count { font-weight: 700; color: var(--text); }

    /* ── Profile sections ─────────────────────── */
    .profile-section {
      background: var(--card);
      border-radius: var(--radius);
      padding: 14px 14px;
      border: 1px solid var(--border);
      box-shadow: var(--shadow-sm);
    }
    .profile-section-title {
      font-weight: 700;
      font-size: 0.95rem;
      margin-bottom: 12px;
      color: var(--brand);
      display: flex; align-items: center; gap: 8px;
    }
    .profile-section-title svg {
      width: 18px; height: 18px;
      flex-shrink: 0;
      color: var(--brand);
    }
    .profile-section-title .profile-section-count {
      margin-right: auto;
      background: var(--brand-light);
      color: var(--brand);
      font-size: 0.72rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
      min-width: 22px; text-align: center;
    }
    .profile-empty {
      color: var(--muted);
      font-size: 0.88rem;
      text-align: center;
      padding: 14px 6px;
      background: var(--surface);
      border: 1px dashed var(--border);
      border-radius: 10px;
    }

    /* ── Contacts (phone / email / address) ──── */
    .profile-contacts { display: flex; flex-direction: column; gap: 8px; }
    .contact-row {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-right: 3px solid var(--brand-light);
      border-radius: 10px;
    }
    .contact-icon {
      width: 34px; height: 34px;
      border-radius: 10px;
      background: var(--brand-light);
      color: var(--brand);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .contact-icon svg { width: 18px; height: 18px; }
    .contact-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .contact-label { font-size: 0.72rem; color: var(--muted); font-weight: 600; }
    .contact-value {
      color: var(--text);
      font-weight: 600;
      font-size: 0.92rem;
      text-decoration: none;
      overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
      direction: ltr; text-align: right;
    }
    .contact-value:hover { color: var(--brand); text-decoration: underline; }
    .contact-action, .contact-edit {
      flex-shrink: 0;
      width: 34px; height: 34px;
      border-radius: 10px;
      border: 1px solid var(--border);
      background: var(--card);
      color: var(--muted);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      transition: all .15s;
      padding: 0;
    }
    .contact-action svg, .contact-edit svg { width: 16px; height: 16px; }
    .contact-action { color: var(--success); border-color: rgba(61,153,112,.25); background: var(--success-light); }
    .contact-action:hover { background: var(--success); color: #fff; }
    .contact-edit:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }
    .contact-row[data-kind="email"]   .contact-action { color: var(--accent); background: var(--accent-light); border-color: rgba(224,138,42,.25); }
    .contact-row[data-kind="email"]   .contact-action:hover { background: var(--accent); color: #fff; }
    .contact-row[data-kind="address"] .contact-action { color: var(--brand); background: var(--brand-light); border-color: rgba(107,28,42,.2); }
    .contact-row[data-kind="address"] .contact-action:hover { background: var(--brand); color: #fff; }
    .contact-empty {
      display: flex; align-items: center; gap: 8px;
      padding: 10px 14px;
      background: transparent;
      border: 1px dashed var(--border);
      border-radius: 10px;
      color: var(--muted);
      font-size: 0.88rem;
      font-weight: 600;
      cursor: pointer;
      width: 100%;
      text-align: right;
      justify-content: flex-start;
      transition: all .15s;
      font-family: inherit;
    }
    .contact-empty:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }
    .contact-empty svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* Inline edit mode */
    .contact-row--editing {
      background: var(--bg-body);
      border-right-color: var(--brand);
      align-items: flex-start;
    }
    .contact-edit-wrap {
      flex: 1; min-width: 0;
      display: flex; flex-direction: column; gap: 4px;
      padding-top: 2px;
    }
    .contact-edit-wrap .contact-label { margin-bottom: 1px; }
    .contact-input {
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 8px 10px;
      font-size: 0.95rem;
      font-family: inherit;
      background: var(--surface);
      color: var(--text);
      width: 100%;
      line-height: 1.3;
      transition: border-color .15s, box-shadow .15s;
    }
    .contact-input:focus {
      outline: none; border-color: var(--brand);
      box-shadow: 0 0 0 3px rgba(107,28,42,.10);
    }
    .contact-input--ltr { direction: ltr; text-align: right; }
    .contact-row--invalid .contact-input {
      border-color: var(--danger);
      box-shadow: 0 0 0 3px rgba(192,57,43,.10);
    }
    .contact-edit-error {
      font-size: 0.76rem;
      color: var(--danger);
      font-weight: 600;
      line-height: 1.3;
      min-height: 1em;
    }
    .contact-edit-error:empty { display: none; }
    .contact-save, .contact-cancel {
      flex-shrink: 0;
      width: 34px; height: 34px;
      border-radius: 10px;
      border: 1px solid var(--border);
      cursor: pointer;
      display: inline-flex; align-items: center; justify-content: center;
      padding: 0;
      transition: all .15s;
      margin-top: 18px; /* align with input, below label */
    }
    .contact-save svg, .contact-cancel svg { width: 16px; height: 16px; }
    .contact-save {
      background: var(--success-light);
      color: var(--success);
      border-color: rgba(61,153,112,.25);
    }
    .contact-save:hover { background: var(--success); color: #fff; }
    .contact-cancel {
      background: var(--card);
      color: var(--muted);
    }
    .contact-cancel:hover { background: var(--danger-light); color: var(--danger); border-color: rgba(192,57,43,.25); }

    /* ── Timeline ─────────────────────────────── */
    .profile-timeline { display: flex; flex-direction: column; gap: 2px; }
    .timeline-item {
      display: flex; align-items: center; gap: 10px;
      padding: 9px 10px;
      border-radius: 10px;
      font-size: 0.9rem;
      transition: background .15s;
    }
    .timeline-item:hover { background: var(--brand-light); }
    .timeline-dot {
      width: 10px; height: 10px; border-radius: 50%;
      flex-shrink: 0; background: var(--accent);
    }
    .timeline-dot[data-type="שחרית"] { background: var(--type-shacharit); }
    .timeline-dot[data-type="מנחה"]  { background: var(--type-mincha); }
    .timeline-dot[data-type="מפטיר"] { background: var(--type-maftir); }
    .timeline-dot[data-type="כהן"]   { background: var(--type-kohen); }
    .timeline-dot[data-type="לוי"]   { background: var(--type-levi); }
    .timeline-parsha { font-weight: 600; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .timeline-date { color: var(--muted); font-size: 0.78rem; flex-shrink: 0; }
    .timeline-type {
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 0.7rem;
      font-weight: 700;
      flex-shrink: 0;
      background: var(--accent-light);
      color: #8B6914;
    }
    .timeline-type[data-type="שחרית"] { background: rgba(79,70,229,.12); color: var(--type-shacharit); }
    .timeline-type[data-type="מנחה"]  { background: var(--success-light); color: var(--success); }
    .timeline-type[data-type="מפטיר"] { background: var(--accent-light); color: #8B6914; }
    .timeline-type[data-type="כהן"]   { background: rgba(6,182,212,.12); color: var(--type-kohen); }
    .timeline-type[data-type="לוי"]   { background: rgba(139,92,246,.12); color: var(--type-levi); }
    .timeline-more {
      margin-top: 8px;
      padding: 0;
    }
    .timeline-more summary {
      cursor: pointer;
      list-style: none;
      text-align: center;
      font-size: 0.85rem;
      color: var(--brand);
      font-weight: 600;
      padding: 8px;
      border-radius: 8px;
      background: var(--brand-light);
      border: 1px dashed rgba(107,28,42,.2);
      user-select: none;
      transition: background .15s;
    }
    .timeline-more summary:hover { background: rgba(107,28,42,.12); }
    .timeline-more summary::-webkit-details-marker { display: none; }
    .timeline-more[open] summary { margin-bottom: 6px; }
    .timeline-more[open] summary::after { content: " ▲"; }
    .timeline-more:not([open]) summary::after { content: " ▼"; }

    /* ── Tags ─────────────────────────────────── */
    .profile-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
    .profile-tag {
      background: var(--accent-light);
      color: #8B6914;
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: 600;
      display: inline-flex; align-items: center; gap: 4px;
      border: 1px solid rgba(224,138,42,.25);
    }
    .profile-tag-remove {
      background: transparent;
      border: none;
      color: #8B6914;
      cursor: pointer;
      padding: 0 0 0 2px;
      font-size: 0.9rem;
      opacity: .65;
      line-height: 1;
    }
    .profile-tag-remove:hover { opacity: 1; color: var(--danger); }
    .profile-tag-add {
      background: transparent;
      color: var(--muted);
      padding: 4px 10px;
      border-radius: 8px;
      font-size: 0.8rem;
      font-weight: 600;
      cursor: pointer;
      border: 1px dashed var(--border);
      transition: all .15s;
      display: inline-flex; align-items: center; gap: 4px;
    }
    .profile-tag-add:hover { background: var(--brand-light); color: var(--brand); border-color: var(--brand); }

    /* ── Settings section (attendance + kind) ── */
    .profile-settings { display: grid; gap: 12px; }
    .profile-settings-row { display: grid; gap: 6px; }
    .profile-settings-label {
      font-size: 0.82rem; font-weight: 700; color: var(--muted);
    }
    .profile-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .profile-chip { position: relative; cursor: pointer; }
    .profile-chip input { position: absolute; opacity: 0; pointer-events: none; }
    .profile-chip span {
      display: inline-block;
      padding: 6px 12px;
      border: 1.5px solid var(--border);
      border-radius: 999px;
      background: var(--card);
      color: var(--text);
      font-size: 0.85rem;
      font-weight: 600;
      transition: all 0.15s;
    }
    .profile-chip:hover span { border-color: var(--brand); color: var(--brand); }
    .profile-chip input:checked + span {
      background: var(--brand); color: #fff; border-color: var(--brand);
      box-shadow: 0 2px 8px rgba(107,28,42,.22);
    }
    .profile-chip input:focus-visible + span {
      outline: 2px solid var(--brand); outline-offset: 2px;
    }

    /* ── Notes textarea ──────────────────────── */
    .profile-notes-wrap { position: relative; }
    .profile-notes {
      width: 100%;
      border: 1px solid var(--border);
      border-radius: 10px;
      padding: 10px 12px;
      font-size: 0.92rem;
      min-height: 72px;
      resize: vertical;
      font-family: inherit;
      background: var(--surface);
      color: var(--text);
      line-height: 1.5;
    }
    .profile-notes:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(107,28,42,.08); }
    .profile-notes-saved {
      position: absolute;
      bottom: 8px; left: 10px;
      font-size: 0.7rem; color: var(--success);
      opacity: 0; transition: opacity .2s;
      pointer-events: none;
      background: var(--surface);
      padding: 0 4px;
    }
    .profile-notes-saved.show { opacity: 1; }

    /* ── Yahrzeits ────────────────────────────── */
    .profile-yahrzeits { display: flex; flex-direction: column; gap: 8px; }
    .yahrzeit-card {
      display: flex; align-items: center; justify-content: space-between;
      gap: 8px;
      padding: 10px 12px;
      background: var(--surface);
      border: 1px solid var(--border);
      border-right: 3px solid var(--accent);
      border-radius: 10px;
      font-size: 0.9rem;
    }
    .yahrzeit-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
    .yahrzeit-name { font-weight: 700; color: var(--text); }
    .yahrzeit-relation { color: var(--muted); font-weight: 500; font-size: 0.85rem; }
    .yahrzeit-date {
      color: var(--brand); font-weight: 700;
      font-size: 0.85rem;
    }
    .yahrzeit-remove {
      background: none; border: none; cursor: pointer;
      color: var(--muted);
      padding: 6px;
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .yahrzeit-remove:hover { color: var(--danger); background: var(--danger-light); }
    .yahrzeit-remove svg { width: 14px; height: 14px; }
    .yahrzeit-card-email {
      background: none; border: none; cursor: pointer;
      color: var(--muted);
      padding: 6px 8px;
      border-radius: 6px;
      font-size: 1rem; line-height: 1;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .yahrzeit-card-email:hover { color: var(--brand); background: rgba(0,0,0,0.04); }
    .yahrzeit-card-email:disabled { cursor: default; }
    .yahrzeit-edit {
      background: none; border: none; cursor: pointer;
      color: var(--muted);
      padding: 6px;
      border-radius: 6px;
      display: flex; align-items: center; justify-content: center;
      transition: all .15s;
    }
    .yahrzeit-edit:hover { color: var(--brand); background: rgba(0,0,0,0.04); }
    .yahrzeit-edit svg { width: 14px; height: 14px; }
    .yahrzeit-email-badge {
      font-size: 0.78rem;
      color: var(--muted);
      margin-top: 4px;
    }

    .yahrzeit-toggle {
      margin-top: 10px;
    }
    .yahrzeit-toggle summary {
      cursor: pointer; list-style: none; user-select: none;
      display: inline-flex; align-items: center; gap: 6px;
      padding: 8px 14px;
      background: var(--brand-light);
      color: var(--brand);
      border: 1px dashed rgba(107,28,42,.25);
      border-radius: 10px;
      font-size: 0.85rem; font-weight: 600;
      transition: background .15s;
    }
    .yahrzeit-toggle summary:hover { background: rgba(107,28,42,.12); }
    .yahrzeit-toggle summary::-webkit-details-marker { display: none; }
    .yahrzeit-form {
      margin-top: 10px;
      padding: 12px;
      background: var(--bg-body);
      border-radius: 12px;
      border: 1px solid var(--border);
      display: flex; flex-direction: column; gap: 8px;
    }
    .yahrzeit-form .form-control { font-size: 0.9rem; }
    .yahrzeit-form-row { display: flex; gap: 8px; }
    .yahrzeit-form-row .form-control:last-child { flex: 0 0 90px; }
    .yahrzeit-form-row .form-control:first-child { flex: 1; }
    .yahrzeit-form .btn { width: 100%; min-height: 40px; }

    .clickable-name { cursor: pointer; transition: color 0.15s; }
    .clickable-name:hover { color: var(--brand); text-decoration: underline; }

    /* Mobile / tablet — bottom-sheet override (placed AFTER base rules
       so it wins source order on matching viewports). */
    @media (max-width: 900px) {
      .profile-overlay {
        padding: 0;
        align-items: flex-end;
        justify-content: center;
      }
      .profile-card {
        width: 100vw;
        max-width: 100vw;
        margin: 0;
        max-height: 94vh;
        border-left: none;
        border-right: none;
        border-bottom: none;
        border-radius: 20px 20px 0 0;
        animation: none;
        will-change: transform;
      }
      .profile-card.profile-entering { animation: profileSlideUp 0.28s ease-out; }
      .profile-card.profile-dragging { transition: none !important; }
      .profile-drag-handle { display: block; }
    }
    @media (max-width: 600px) {
      .profile-header { padding: 26px 14px 14px; }
      .profile-name { font-size: 1.2rem; }
      .profile-avatar { width: 56px; height: 56px; font-size: 1.45rem; border-radius: 14px; }
      .profile-close { top: 14px; left: 10px; width: 34px; height: 34px; }
      .profile-action-bar { padding: 10px; gap: 5px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
      .profile-action-bar .btn { font-size: 0.72rem; min-height: 56px; padding: 7px 3px; }
      .profile-action-bar .btn svg { width: 17px; height: 17px; }
      .profile-body { padding: 12px; gap: 10px; }
      .profile-stats-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
      .profile-stats-grid .stat-number { font-size: 1.35rem; }
      .profile-section { padding: 12px; }
      .timeline-item { padding: 8px; font-size: 0.85rem; }
      .timeline-date { font-size: 0.72rem; }
    }

    /* =========================================
       Trends / Heatmap
       ========================================= */
    .heatmap-table { border-collapse: collapse; font-size: 0.7rem; direction: rtl; }
    .heatmap-table th, .heatmap-table td { padding: 3px 5px; text-align: center; white-space: nowrap; }
    .heatmap-table th { position: sticky; top: 0; background: var(--card); font-weight: 700; z-index: 1; color: var(--brand); }
    .heatmap-table th.name-col { position: sticky; right: 0; background: var(--card); z-index: 2; text-align: right; }
    .heatmap-table td.name-col { position: sticky; right: 0; background: var(--card); z-index: 1; text-align: right; font-weight: 600; font-size: 0.75rem; color: var(--text); }
    .hm-cell { width: 24px; height: 24px; border-radius: 4px; display: inline-block; }

    /* Long-absent page summary strip + countdown slot */
    .longabsent-summary {
      display: flex;
      align-items: center;
      flex-wrap: wrap;
      gap: 6px;
      margin-bottom: 10px;
      color: var(--muted);
      font-size: 0.88rem;
    }
    .longabsent-summary:empty { display: none; }
    .longabsent-summary strong { color: var(--brand); font-weight: 800; }
    .la-dot-sep { color: var(--border); font-size: 0.7rem; opacity: 0.8; }
    .la-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 6px; }
    .la-reasons:empty { display: none; }
    .la-reason {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 0.78rem; font-weight: 700;
      padding: 3px 9px; border-radius: 999px;
      border: 1px solid transparent;
      line-height: 1.2;
      white-space: nowrap;
    }
    @media (max-width: 600px) {
      .la-reasons { flex-wrap: nowrap; gap: 4px; }
      .la-reason { font-size: 0.72rem; padding: 2px 7px; }
    }
    .la-reason--time { background: var(--danger-light); color: var(--danger); border-color: rgba(200,60,60,.20); }
    .la-reason--count { background: var(--accent-light); color: var(--accent); border-color: rgba(200,155,60,.30); }
    .la-catchup {
      margin-top: 4px;
      font-size: 0.78rem;
      color: var(--muted);
      font-style: italic;
    }
    .member-card__countdown:empty { display: none; }
    .member-card__countdown {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
      margin-top: 6px;
      padding-top: 6px;
      border-top: 1px dashed var(--border);
    }

    .alert-item {
      background: var(--card);
      padding: 12px 16px;
      border-radius: 10px;
      margin-bottom: 8px;
      border-right: 4px solid;
      display: flex; align-items: center; gap: 10px;
      box-shadow: var(--shadow-sm);
    }
    .alert-warn   { border-color: var(--warning); background: var(--warning-light); }
    .alert-info   { border-color: var(--brand);   background: var(--brand-light); }
    .alert-good   { border-color: var(--success); background: var(--success-light); }
    .alert-danger { border-color: var(--danger);  background: var(--danger-light); }

    .streak-item {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 10px 14px;
      margin-bottom: 6px;
      background: var(--accent-light);
      border-radius: 10px;
      border: 1px solid rgba(200,155,60,.30);
    }

    /* =========================================
       Global Search
       ========================================= */
    .global-search-wrapper { position: relative; max-width: 500px; margin: 16px auto 0; }
    .global-search-box {
      display: flex;
      align-items: center;
      background: rgba(255,255,255,0.96);
      border: 1.5px solid rgba(255,255,255,0.18);
      border-radius: 14px;
      padding: 8px 16px;
      transition: all 0.2s;
      gap: 8px;
      box-shadow: 0 4px 14px rgba(0,0,0,.10);
    }
    .global-search-box:focus-within {
      border-color: var(--accent);
      box-shadow: 0 0 0 3px rgba(200,155,60,0.22);
    }
    .global-search-icon { font-size: 1.05rem; flex-shrink: 0; color: var(--muted); }
    .global-search-input {
      border: none; background: transparent; flex: 1;
      font-family: inherit; font-size: 0.95rem;
      outline: none; color: var(--text); min-width: 0;
    }
    .global-search-input::placeholder { color: var(--muted); }
    .global-search-kbd {
      background: var(--brand-light);
      color: var(--brand);
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 0.7rem;
      font-family: monospace;
      flex-shrink: 0;
      font-weight: 600;
    }
    .global-search-clear {
      background: none; border: none; cursor: pointer;
      font-size: 1rem; color: var(--muted);
      padding: 2px 6px; flex-shrink: 0;
    }
    .global-search-clear:hover { color: var(--brand); }
    .global-search-results {
      position: absolute; top: calc(100% + 6px); right: 0; left: 0;
      background: var(--card);
      border-radius: 16px;
      box-shadow: 0 20px 40px rgba(74,21,32,0.22);
      border: 1px solid var(--border);
      max-height: 400px; overflow-y: auto; z-index: 500;
      padding: 8px;
    }
    .gsr-category {
      padding: 4px 12px;
      font-size: 0.72rem;
      font-weight: 700;
      color: var(--muted);
      text-transform: uppercase;
      letter-spacing: 0.8px;
    }
    .gsr-item {
      display: flex; align-items: center; gap: 10px;
      padding: 10px 14px;
      border-radius: 10px;
      cursor: pointer;
      transition: background 0.15s;
    }
    .gsr-item:hover, .gsr-item.gsr-active { background: var(--brand-light); }
    .gsr-icon { font-size: 1.15rem; flex-shrink: 0; width: 28px; text-align: center; }
    .gsr-text { flex: 1; font-size: 0.93rem; font-weight: 500; color: var(--text); }
    .gsr-sub { font-size: 0.78rem; color: var(--muted); }
    .gsr-badge {
      background: var(--accent-light);
      color: #8B6914;
      padding: 2px 8px;
      border-radius: 6px;
      font-size: 0.72rem;
      font-weight: 700;
    }
    .gsr-empty { text-align: center; padding: 20px; color: var(--muted); font-size: 0.9rem; }

    /* =========================================
       Backup Indicator
       ========================================= */
    .backup-indicator {
      display: inline-flex; align-items: center; gap: 4px;
      font-size: 0.7rem;
      padding: 2px 8px;
      border-radius: 6px;
      margin-right: 6px;
      cursor: pointer;
      transition: all 0.3s;
      font-weight: 600;
    }
    .backup-saved   { background: var(--success-light); color: var(--success); }
    .backup-unsaved { background: var(--danger-light);  color: var(--danger); animation: backupPulse 2s ease-in-out infinite; }
    @keyframes backupPulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.6; } }

    /* =========================================
       Dashboard redesign — hero / tiles / previews
       ========================================= */
    .dashboard-hero {
      position: relative;
      background: linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 100%);
      color: #fff;
      border-radius: 22px;
      padding: 16px 16px 14px;
      margin-bottom: 14px;
      box-shadow: 0 10px 28px rgba(74,21,32,0.22);
      overflow: hidden;
    }
    .dashboard-hero::before {
      content: "";
      position: absolute; inset: 0;
      background:
        radial-gradient(circle at 85% -10%, rgba(200,155,60,.18), transparent 55%),
        radial-gradient(circle at 8% 110%, rgba(255,255,255,.05), transparent 55%);
      pointer-events: none;
    }
    .dashboard-hero > * { position: relative; z-index: 1; }

    .dashboard-hero-top {
      display: flex;
      align-items: center;
      gap: 12px;
      margin-bottom: 14px;
    }
    .hero-icons {
      display: flex;
      gap: 8px;
      order: 3;        /* Left side in RTL */
      margin-right: auto;
    }
    .hero-icon-btn {
      position: relative;
      width: 40px; height: 40px;
      border-radius: 50%;
      background: rgba(255,255,255,.20);
      border: 1px solid rgba(255,255,255,.32);
      color: #fff;
      display: inline-flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .18s ease, transform .18s ease;
    }
    .hero-icon-btn:hover { background: rgba(255,255,255,.32); transform: translateY(-1px); }
    .hero-icon-btn svg { width: 22px; height: 22px; stroke: #fff; stroke-width: 2.4; }
    .hero-icon-dot {
      position: absolute; top: 4px; left: 4px;
      width: 9px; height: 9px; border-radius: 50%;
      background: var(--accent);
      box-shadow: 0 0 0 2px var(--brand-dark);
    }
    .hero-brand {
      display: flex; flex-direction: column;
      text-align: right;
      order: 2;
      flex: 1;
      min-width: 0;
    }
    .hero-brand-title {
      font-size: 1.18rem;
      font-weight: 800;
      color: #fff;
      letter-spacing: -0.3px;
      line-height: 1.15;
    }
    .hero-brand-sub {
      font-size: 0.82rem;
      font-weight: 500;
      color: rgba(255,255,255,.72);
      margin-top: 2px;
    }
    .hero-logo {
      order: 1;
      flex-shrink: 0;
    }
    .hero-logo img {
      width: 52px; height: 52px;
      border-radius: 12px;
      background: #fff;
      padding: 4px;
      object-fit: cover;
      display: block;
      box-shadow: 0 4px 10px rgba(0,0,0,.2);
    }

    .hero-pills {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
      margin-bottom: 10px;
    }
    .hero-pill {
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 12px;
      padding: 8px 4px;
      text-align: center;
      display: flex; flex-direction: column; align-items: center; gap: 4px;
      min-height: 68px;
      justify-content: center;
      overflow: hidden;
      min-width: 0;
    }
    .hero-pill-label {
      font-size: 0.58rem;
      font-weight: 700;
      color: var(--accent);
      letter-spacing: 1.4px;
      text-transform: uppercase;
      line-height: 1;
    }
    .hero-pill-value {
      font-size: 0.82rem;
      font-weight: 700;
      color: #fff;
      line-height: 1.18;
      white-space: normal;
      word-break: keep-all;
      overflow-wrap: anywhere;
      max-width: 100%;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .hero-meta {
      display: flex;
      gap: 8px;
      margin-bottom: 12px;
      min-height: 0;
    }
    .hero-meta:empty { display: none; }
    .hero-meta-item {
      flex: 1 1 0;
      min-width: 0;
      font-size: 0.76rem;
      color: rgba(255,255,255,.85);
      background: rgba(255,255,255,.10);
      border: 1px solid rgba(255,255,255,.12);
      border-radius: 10px;
      padding: 6px 10px;
      font-weight: 600;
      text-align: center;
      line-height: 1.25;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
    }
    .hero-meta-item:empty { display: none; }

    .hero-stats {
      display: grid;
      grid-template-columns: repeat(4, minmax(0, 1fr));
      gap: 8px;
    }
    .hero-stat {
      background: rgba(255,255,255,.08);
      border: 1px solid rgba(255,255,255,.10);
      border-radius: 14px;
      padding: 12px 6px 10px;
      text-align: center;
      position: relative;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      min-height: 78px;
      min-width: 0;
    }
    .hero-stat-icon {
      width: 18px; height: 18px;
      color: #fff;
      stroke: #fff;
      stroke-width: 2.2;
      display: block;
      margin: 0 auto 4px;
      opacity: .92;
    }
    .hero-stat-number {
      font-size: 1.4rem;
      font-weight: 800;
      color: #fff;
      line-height: 1.05;
    }
    .hero-stat-label {
      font-size: 0.72rem;
      font-weight: 600;
      color: rgba(255,255,255,.78);
      letter-spacing: .2px;
      margin-top: 3px;
    }

    /* Balance bar — progress-fill variant */
    .balance-progress {
      position: relative;
      background: #EFE6DE;
      border: 1px solid var(--border);
      overflow: hidden;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      gap: 8px;
      padding: 10px 14px;
      min-height: 40px;
    }
    .balance-progress .balance-fill {
      position: absolute;
      top: 0; right: 0; bottom: 0;
      width: var(--balance-fill, 0%);
      background: currentColor;
      opacity: .18;
      transition: width .4s ease;
      pointer-events: none;
    }
    .balance-progress .balance-text,
    .balance-progress .balance-value {
      position: relative;
      z-index: 1;
    }
    .balance-progress .balance-text {
      display: inline-flex; align-items: center; gap: 6px;
    }
    .balance-progress .balance-text::before {
      content: "";
      width: 14px; height: 14px;
      display: inline-block;
      background: currentColor;
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><polyline points='20 6 9 17 4 12' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    }
    .balance-progress .balance-value {
      margin-right: auto;
      font-weight: 800;
    }
    .balance-progress.balance-bad .balance-text::before {
      -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l10 18H2L12 2z M12 10v4 M12 17h.01' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
              mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2l10 18H2L12 2z M12 10v4 M12 17h.01' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'/></svg>") center/contain no-repeat;
    }

    /* Memorial top strip — single-line above the header */
    .memorial-topbar + header { margin-top: 0; }
    .memorial-topbar {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      padding: 8px 14px;
      margin: -20px -20px 14px -20px;
      background: linear-gradient(180deg, #2C0F15 0%, #3A1018 100%);
      color: #F4E2C7;
      border-bottom: 1px solid rgba(224,138,42,.35);
      font-family: 'Frank Ruhl Libre','SBL Hebrew','David',serif;
      font-size: 0.92rem;
      font-weight: 500;
      letter-spacing: .2px;
      text-align: center;
      line-height: 1.3;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    .memorial-topbar-icon {
      color: var(--accent);
      flex-shrink: 0;
      font-size: 0.95rem;
    }
    .memorial-topbar-text {
      color: #FBE6C2;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    /* Shabbat CTA card */
    .cta-card {
      width: 100%;
      display: flex;
      align-items: center;
      gap: 12px;
      background: linear-gradient(155deg, var(--brand) 0%, var(--brand-dark) 100%);
      color: #fff;
      border: none;
      border-radius: 16px;
      padding: 14px 16px;
      margin-bottom: 14px;
      cursor: pointer;
      text-align: right;
      font-family: inherit;
      box-shadow: 0 8px 20px rgba(74,21,32,0.18);
      transition: transform .15s ease, box-shadow .15s ease;
    }
    .cta-card:hover { transform: translateY(-1px); box-shadow: 0 10px 24px rgba(74,21,32,0.26); }
    .cta-card:active { transform: translateY(0); }
    .cta-card .cta-icon {
      width: 42px; height: 42px;
      border-radius: 12px;
      background: rgba(255,255,255,.12);
      border: 1px solid rgba(255,255,255,.18);
      display: inline-flex; align-items: center; justify-content: center;
      color: #fff;
      flex-shrink: 0;
    }
    .cta-card .cta-icon svg { width: 20px; height: 20px; }
    .cta-card .cta-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
    .cta-card .cta-title { font-size: 1.02rem; font-weight: 800; line-height: 1.2; }
    .cta-card .cta-subtitle { font-size: 0.82rem; color: rgba(255,255,255,.78); line-height: 1.3; }
    .cta-card .cta-chevron {
      width: 32px; height: 32px;
      border-radius: 50%;
      background: rgba(255,255,255,.1);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .cta-card .cta-chevron svg { width: 16px; height: 16px; transform: scaleX(-1); }

    /* Quick action tiles */
    .tile-grid {
      display: grid;
      grid-template-columns: repeat(5, 1fr);
      gap: 8px;
      margin-bottom: 14px;
    }
    .tile {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 6px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 14px;
      padding: 12px 6px;
      color: var(--brand);
      cursor: pointer;
      font-family: inherit;
      font-size: 0.78rem;
      font-weight: 700;
      box-shadow: var(--shadow-sm);
      transition: transform .15s ease, border-color .15s ease, box-shadow .15s ease;
    }
    .tile:hover { transform: translateY(-2px); border-color: var(--brand-light); box-shadow: 0 6px 16px rgba(107,28,42,.08); }
    .tile .tile-icon {
      width: 36px; height: 36px;
      border-radius: 12px;
      background: var(--brand-light);
      display: inline-flex; align-items: center; justify-content: center;
    }
    .tile .tile-icon svg { width: 18px; height: 18px; color: var(--brand); }
    .tile .tile-label { color: var(--text); font-weight: 600; }

    /* Highlighted quick-add tile (נדר מהיר) */
    .tile.tile-accent { background: linear-gradient(135deg, var(--brand), #8a2836); border-color: var(--brand); color: #fff; }
    .tile.tile-accent .tile-icon { background: rgba(255,255,255,.18); }
    .tile.tile-accent .tile-icon svg { color: #fff; }
    .tile.tile-accent .tile-label { color: #fff; }
    .tile.tile-accent:hover { border-color: var(--accent); box-shadow: 0 6px 18px rgba(107,28,42,.25); }

    /* Dashboard donations summary card */
    .donations-summary-pills {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
    }
    .donations-summary-pill {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      gap: 2px;
      padding: 10px 12px;
      border-radius: 12px;
      background: var(--brand-light);
      border: 1px solid var(--border);
    }
    .donations-summary-label {
      font-size: 0.72rem;
      color: var(--text-muted);
      font-weight: 600;
    }
    .donations-summary-value {
      font-size: 1.05rem;
      font-weight: 800;
      color: var(--brand);
      line-height: 1.15;
    }
    .donations-summary-sub {
      font-size: 0.68rem;
      color: var(--text-muted);
      min-height: 0.9em;
    }
    .donations-summary-pill.donations-summary-paid .donations-summary-value { color: #1e7a3a; }
    .donations-summary-pill.donations-summary-balance .donations-summary-value { color: #b45309; }
    @media (max-width: 520px) {
      .donations-summary-pill { padding: 8px 10px; }
      .donations-summary-value { font-size: 0.95rem; }
    }

    /* Preview card shared styles */
    .preview-card { margin-bottom: 14px; }
    .preview-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 10px;
    }
    .preview-title {
      margin: 0;
      font-size: 1.02rem;
      color: var(--brand);
      font-weight: 800;
      display: inline-flex; align-items: center; gap: 6px;
    }
    .preview-count {
      background: var(--brand-light);
      color: var(--brand);
      border-radius: 999px;
      padding: 2px 10px;
      font-size: 0.78rem;
      font-weight: 800;
    }
    .preview-link {
      background: none; border: none;
      color: var(--muted);
      font-size: 0.82rem;
      font-weight: 700;
      cursor: pointer;
      padding: 4px 6px;
      border-radius: 8px;
    }
    .preview-link:hover { color: var(--brand); background: var(--brand-light); }
    .preview-empty {
      color: var(--muted);
      font-size: 0.88rem;
      padding: 6px 0 2px;
    }
    .preview-card #yahrzeitBanner:empty + .preview-empty { display: block; }
    .preview-card #yahrzeitBanner:not(:empty) ~ .preview-empty { display: none; }
    .preview-card #yahrzeitBanner > div {
      background: transparent !important;
      color: var(--text) !important;
      box-shadow: none !important;
      border: none !important;
      padding: 0 !important;
      margin: 0 !important;
    }
    .preview-card #yahrzeitBanner > div > div:first-child { display: none; }
    .preview-card #yahrzeitBanner > div > div[style*="border-bottom"] {
      border-bottom: 1px solid var(--border) !important;
      padding: 8px 0 !important;
    }
    .preview-card #yahrzeitBanner > div > div[style*="border-bottom"]:last-child {
      border-bottom: none !important;
    }

    /* Hitvaadut → Aliyah reminder card */
    .hitvaadut-reminder-card {
      border: 1px solid rgba(224,138,42,0.35);
      box-shadow: 0 4px 14px rgba(224,138,42,0.10), var(--shadow-sm);
    }
    .hitvaadut-reminder-card .preview-title { color: #8B6914; }
    .hitvaadut-reminder-card .preview-count {
      background: var(--accent-light);
      color: #8B6914;
    }
    .hitvaadut-reminder-inner {
      background: linear-gradient(135deg, var(--accent-light), rgba(224,138,42,0.22));
      border-right: 4px solid var(--accent);
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .hitvaadut-reminder-headline {
      font-weight: 800;
      font-size: 0.98rem;
      color: var(--brand);
      line-height: 1.4;
    }
    .hitvaadut-reminder-meta {
      font-size: 0.82rem;
      color: var(--muted);
      font-weight: 600;
    }
    .hitvaadut-reminder-donors {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      margin-top: 2px;
    }
    .hitvaadut-donor-chip {
      background: #fff;
      border: 1px solid rgba(224,138,42,0.45);
      color: var(--brand);
      border-radius: 999px;
      padding: 6px 12px;
      font-size: 0.88rem;
      font-weight: 700;
      font-family: inherit;
      cursor: pointer;
      box-shadow: 0 1px 3px rgba(107,28,42,0.06);
      transition: background 0.15s, transform 0.1s;
    }
    .hitvaadut-donor-chip:hover {
      background: var(--accent-light);
      transform: translateY(-1px);
    }
    .hitvaadut-donor-chip:active { transform: translateY(0); }

    /* Event list */
    .event-list { display: flex; flex-direction: column; gap: 8px; }
    .event-item {
      display: flex; align-items: center; gap: 10px;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
    }
    .event-item .event-icon {
      width: 36px; height: 36px;
      border-radius: 10px;
      background: var(--brand-light);
      color: var(--brand);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .event-item .event-icon svg { width: 18px; height: 18px; }
    .event-item .event-body { flex: 1; min-width: 0; }
    .event-item .event-title { font-weight: 700; color: var(--text); font-size: 0.96rem; line-height: 1.2; }
    .event-item .event-subtitle { font-size: 0.78rem; color: var(--muted); margin-top: 2px; }
    .event-item .event-tag {
      background: var(--accent-light);
      color: #8B6914;
      border-radius: 999px;
      padding: 2px 10px;
      font-size: 0.72rem;
      font-weight: 800;
    }
    .event-item .event-tag.tag-shabbat { background: var(--brand-light); color: var(--brand); }
    .event-item .event-tag.tag-holiday { background: var(--accent-light); color: #8B6914; }

    /* Recent activity feed */
    .activity-feed { display: flex; flex-direction: column; gap: 2px; }
    .activity-item {
      display: flex; align-items: flex-start; gap: 10px;
      padding: 10px 4px;
      border-bottom: 1px solid var(--border);
    }
    .activity-item:last-child { border-bottom: none; }
    .activity-item .activity-icon {
      width: 28px; height: 28px; border-radius: 8px;
      background: var(--brand-light); color: var(--brand);
      display: inline-flex; align-items: center; justify-content: center;
      flex-shrink: 0;
    }
    .activity-item .activity-icon svg { width: 14px; height: 14px; }
    .activity-item .activity-body { flex: 1; min-width: 0; }
    .activity-item .activity-text { font-size: 0.9rem; color: var(--text); font-weight: 600; line-height: 1.3; }
    .activity-item .activity-meta { font-size: 0.76rem; color: var(--muted); margin-top: 2px; }

    /* About card */
    .about-card {
      background: linear-gradient(135deg, #FAF5EE, #F3EDE6);
      border: 1px dashed rgba(200,155,60,.35);
      border-radius: 16px;
      padding: 14px 16px;
      margin-bottom: 80px;
      text-align: center;
    }
    .about-card .about-head {
      font-size: 0.88rem;
      font-weight: 800;
      color: var(--brand);
      margin-bottom: 6px;
    }
    .about-card .about-chips {
      display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px;
      color: var(--muted);
      font-size: 0.8rem;
    }
    .about-card .about-chips span {
      position: relative;
      padding: 2px 0;
    }
    .about-card .about-chips span + span::before {
      content: "·";
      position: absolute;
      right: -7px;
      color: rgba(139,105,20,.55);
    }
    .about-card .about-foot {
      margin-top: 8px;
      font-size: 0.74rem;
      color: var(--muted);
    }

    /* Long-absent preview: compact horizontal row that stays single-line */
    #longabsentPreview .la-preview-item {
      display: flex;
      align-items: center;
      gap: 10px;
      padding: 10px 12px;
      flex-direction: row;
      flex-wrap: nowrap;
    }
    #longabsentPreview .la-info {
      display: flex;
      align-items: center;
      gap: 10px;
      flex: 1 1 auto;
      min-width: 0;
    }
    #longabsentPreview .la-info .badge-circle { flex-shrink: 0; }
    #longabsentPreview .la-text {
      display: flex;
      flex-direction: column;
      min-width: 0;
      line-height: 1.2;
    }
    #longabsentPreview .la-text .member-name {
      font-size: 0.96rem;
      font-weight: 700;
      color: var(--text);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #longabsentPreview .la-text .la-subtitle {
      font-size: 0.76rem;
      color: var(--danger);
      font-weight: 600;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }
    #longabsentPreview .la-schedule-btn {
      flex-shrink: 0;
      background: var(--brand);
      color: #fff;
      border: none;
      border-radius: 10px;
      padding: 7px 14px;
      font-weight: 700;
      font-size: 0.82rem;
      cursor: pointer;
      transition: background .15s ease;
    }
    #longabsentPreview .la-schedule-btn:hover { background: var(--brand-dark); }
    @media (max-width: 600px) {
      #longabsentPreview .la-preview-item {
        flex-direction: row;
        align-items: center;
        padding: 8px 10px;
        gap: 8px;
      }
      #longabsentPreview .la-text .member-name { font-size: 0.9rem; }
      #longabsentPreview .la-text .la-subtitle { font-size: 0.72rem; }
      #longabsentPreview .la-schedule-btn { padding: 6px 12px; font-size: 0.78rem; }
    }

    /* =========================================
       Mobile bottom navigation (new, clean 5-item)
       ========================================= */
    .bottom-nav {
      position: fixed;
      bottom: 0; left: 0; right: 0;
      z-index: 999;
      display: none;    /* hidden on desktop */
      justify-content: space-around;
      align-items: stretch;
      background: var(--brand);
      border-top: 1px solid var(--brand-dark);
      box-shadow: 0 -4px 16px rgba(74,21,32,0.25);
      padding: 6px 4px env(safe-area-inset-bottom, 6px);
    }
    .bottom-nav-item {
      flex: 1 1 0;
      min-width: 0;
      background: transparent;
      border: none;
      color: #fff;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 2px;
      padding: 6px 2px 8px;
      cursor: pointer;
      border-radius: 12px;
      font-family: inherit;
      opacity: .92;
      transition: opacity .15s ease, background .15s ease, color .15s ease;
    }
    .bottom-nav-item:hover { opacity: 1; }
    .bottom-nav-icon {
      width: 24px; height: 24px;
      flex-shrink: 0;
      stroke: currentColor;
      stroke-width: 2.2;
    }
    .bottom-nav-label { font-size: 0.64rem; font-weight: 700; letter-spacing: .2px; }
    .bottom-nav-item.active {
      color: var(--accent);
      background: rgba(255,255,255,.10);
      opacity: 1;
    }

    /* "More" sheet spacing */
    .more-sheet-body {
      display: flex;
      flex-direction: column;
      gap: 4px;
      padding: 6px 4px 18px;
    }
    .more-sheet-item {
      display: flex;
      align-items: center;
      gap: 12px;
      background: transparent;
      border: none;
      width: 100%;
      padding: 12px 8px;
      border-radius: 12px;
      font-family: inherit;
      font-size: 0.98rem;
      color: var(--text);
      font-weight: 600;
      cursor: pointer;
      text-align: right;
    }
    .more-sheet-item:hover { background: var(--brand-light); color: var(--brand); }
    .more-sheet-item svg {
      width: 22px; height: 22px;
      color: var(--brand);
      flex-shrink: 0;
    }

    /* Grouped categories inside the "More" sheet — fits all screens
       in one view (no scroll) by laying items out in a 3-column grid. */
    .more-sheet-group { margin-bottom: 14px; }
    .more-sheet-group:last-child { margin-bottom: 0; }
    .more-sheet-group > h4 {
      margin: 0 4px 8px;
      font-size: 0.95rem;
      font-weight: 800;
      color: var(--brand);
      letter-spacing: .2px;
    }
    .more-sheet-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 6px;
    }
    .more-sheet-item--grid {
      flex-direction: column;
      align-items: center;
      gap: 6px;
      padding: 10px 6px;
      font-size: 0.82rem;
      line-height: 1.15;
      text-align: center;
      min-height: 76px;
    }
    .more-sheet-item--grid svg {
      width: 22px; height: 22px;
      padding: 11px;
      background: var(--brand-light);
      border-radius: 50%;
      box-sizing: content-box;
      transition: background-color .15s ease, color .15s ease;
    }
    .more-sheet-item--grid:hover svg,
    .more-sheet-item--grid:focus-visible svg,
    .more-sheet-item--grid:active svg {
      background: var(--brand);
      color: #fff;
    }
    /* "Coming soon" item — sits in a normal group, non-interactive,
       carries a "בקרוב" pill. No special border so it blends in
       cleanly with the rest of the grid. */
    .more-sheet-item--soon {
      position: relative;
      opacity: 0.75;
      cursor: default;
    }
    .more-sheet-item--soon:hover { background: transparent; color: var(--text); }
    .more-sheet-item--soon:hover svg,
    .more-sheet-item--soon:focus-visible svg {
      background: var(--brand-light);
      color: var(--brand);
    }
    .soon-badge {
      position: absolute;
      top: 4px;
      right: 4px;
      background: var(--accent, var(--brand));
      color: #fff;
      font-size: 0.62rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 8px;
      letter-spacing: .2px;
    }
    /* Very narrow phones — drop to 2 columns so labels don't break. */
    @media (max-width: 360px) {
      .more-sheet-grid { grid-template-columns: repeat(2, 1fr); }
    }

    /* Subtle visual divider between groups in the desktop tab bar. */
    .tabs-sep {
      display: inline-block;
      width: 1px;
      height: 20px;
      background: var(--border);
      margin: 0 6px;
      align-self: center;
      flex-shrink: 0;
    }
    @media (max-width: 900px) { .tabs-sep { display: none; } }

    /* =========================================
       Dashboard redesign — mobile tweaks
       ========================================= */
    @media (max-width: 900px) {
      /* Hide desktop top-tabs, show bottom-nav */
      header .tabs { display: none; }
      .bottom-nav { display: flex; }
      body { padding-bottom: 80px; }
      .memorial-topbar { margin: -12px -12px 12px -12px; padding: 6px 10px; font-size: 0.82rem; }

      /* Optional: suppress big header branding on dashboard since hero covers it */
      body.dashboard-active header .chabad-logo,
      body.dashboard-active header .brand-title,
      body.dashboard-active header .brand-subtitle,
      body.dashboard-active header .bsd-mark {
        display: none;
      }
      body.dashboard-active header {
        padding: 12px 14px 14px;
        margin-bottom: 10px;
      }
    }

    @media (max-width: 600px) {
      .memorial-topbar { margin: -8px -8px 10px -8px; font-size: 0.78rem; padding: 6px 8px; gap: 6px; }
      .memorial-topbar-icon { font-size: 0.82rem; }
      .dashboard-hero { border-radius: 20px; padding: 14px 14px 12px; }
      .dashboard-hero-top { margin-bottom: 12px; }
      .hero-brand-title { font-size: 1.05rem; }
      .hero-brand-sub { font-size: 0.76rem; }
      .hero-logo img { width: 44px; height: 44px; border-radius: 10px; padding: 3px; }
      .hero-pills { grid-template-columns: repeat(4, 1fr); gap: 4px; }
      .hero-pill { padding: 7px 4px; min-height: 48px; }
      .hero-pill-label { font-size: 0.54rem; letter-spacing: 1.2px; }
      .hero-pill-value { font-size: 0.8rem; }
      .hero-stat-number { font-size: 1.18rem; }
      .hero-stat-label { font-size: 0.64rem; }
      .tile-grid { grid-template-columns: repeat(5, 1fr); gap: 6px; }
      .tile { padding: 10px 4px; font-size: 0.7rem; }
      .tile .tile-icon { width: 30px; height: 30px; }
      .tile .tile-icon svg { width: 14px; height: 14px; }
      .cta-card { padding: 12px 14px; }
      .cta-card .cta-title { font-size: 0.95rem; }
      .cta-card .cta-subtitle { font-size: 0.76rem; }
    }

    /* =========================================
       Activity Log (רישום פעילות)
       ========================================= */
    .activity-summary {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      margin: 6px 0 14px;
    }
    .activity-summary-chip {
      display: inline-flex;
      align-items: center;
      gap: 6px;
      padding: 6px 12px;
      border-radius: 999px;
      background: var(--brand-light);
      border: 1px solid var(--border);
      font-size: 0.85rem;
      color: var(--text-main);
    }
    .activity-summary-chip strong { color: var(--brand); font-weight: 800; }
    .activity-chip-create { background: var(--success-light); border-color: rgba(61,153,112,0.25); }
    .activity-chip-create strong { color: var(--success); }
    .activity-chip-update { background: var(--warning-light); border-color: rgba(212,136,15,0.25); }
    .activity-chip-update strong { color: var(--warning); }
    .activity-chip-delete { background: var(--danger-light); border-color: rgba(192,57,43,0.25); }
    .activity-chip-delete strong { color: var(--danger); }
    .activity-summary-empty {
      font-size: 0.88rem;
      color: var(--text-muted);
      padding: 8px 4px;
    }

    .activity-log-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
      margin-top: 10px;
    }
    .activity-log-item {
      background: var(--card);
      border: 1px solid var(--border);
      border-right: 4px solid var(--brand);
      border-radius: var(--radius-sm);
      padding: 12px 14px;
      box-shadow: var(--shadow-sm);
    }
    .activity-log-item.activity-action-create { border-right-color: var(--success); }
    .activity-log-item.activity-action-update { border-right-color: var(--warning); }
    .activity-log-item.activity-action-delete { border-right-color: var(--danger); }

    .activity-log-main {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .activity-log-icon {
      font-size: 1.4rem;
      line-height: 1;
      flex-shrink: 0;
      margin-top: 2px;
    }
    .activity-log-body {
      flex: 1;
      min-width: 0;
    }
    .activity-log-head {
      display: flex;
      flex-wrap: wrap;
      gap: 6px;
      align-items: center;
      margin-bottom: 4px;
    }
    .activity-log-action {
      font-size: 0.72rem;
      font-weight: 800;
      padding: 2px 8px;
      border-radius: 999px;
      letter-spacing: 0.3px;
      background: var(--brand-light);
      color: var(--brand);
      text-transform: uppercase;
    }
    .activity-action-create .activity-log-action { background: var(--success-light); color: var(--success); }
    .activity-action-update .activity-log-action { background: var(--warning-light); color: var(--warning); }
    .activity-action-delete .activity-log-action { background: var(--danger-light); color: var(--danger); }
    .activity-log-cat {
      font-size: 0.75rem;
      color: var(--text-muted);
      padding: 2px 8px;
      border-radius: 999px;
      background: var(--bg-body);
      border: 1px solid var(--border);
    }
    .activity-log-title {
      font-weight: 700;
      font-size: 0.98rem;
      color: var(--text);
      margin-bottom: 2px;
      word-break: break-word;
    }
    .activity-log-desc {
      font-size: 0.85rem;
      color: var(--text-muted);
      line-height: 1.45;
    }
    .activity-log-time {
      flex-shrink: 0;
      font-size: 0.75rem;
      color: var(--text-muted);
      white-space: nowrap;
      margin-top: 2px;
    }
    .activity-details {
      margin-top: 8px;
      padding: 8px 10px;
      background: var(--bg-body);
      border-radius: 8px;
      border: 1px dashed var(--border);
      font-size: 0.82rem;
      color: var(--text);
    }
    .activity-detail-row { margin-bottom: 3px; line-height: 1.4; }
    .activity-detail-row:last-child { margin-bottom: 0; }
    .activity-detail-label {
      font-weight: 700;
      color: var(--brand);
      margin-left: 4px;
    }
    .activity-detail-more { color: var(--text-muted); font-size: 0.78rem; }

    .activity-empty {
      text-align: center;
      padding: 28px 12px;
      color: var(--text-muted);
      font-size: 0.9rem;
      background: var(--bg-body);
      border: 1px dashed var(--border);
      border-radius: var(--radius-sm);
    }

    @media (max-width: 560px) {
      .activity-log-main { gap: 8px; }
      .activity-log-icon { font-size: 1.15rem; }
      .activity-log-title { font-size: 0.92rem; }
      .activity-log-desc { font-size: 0.8rem; }
      .activity-log-time { font-size: 0.7rem; }
    }

    /* =========================================
       Feedback tab — "עזרו לנו להשתפר"
       ========================================= */
    .feedback-intro-card h2 { color: var(--brand); margin-bottom: 8px; }
    .feedback-intro { color: var(--text); line-height: 1.6; margin: 0; }
    .feedback-card { margin-top: 16px; }
    .feedback-card h2 { color: var(--brand); margin-bottom: 10px; }
    .feedback-card-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; }
    .feedback-card-sub { color: var(--text-muted); font-size: 0.9rem; margin: 0 0 12px; line-height: 1.55; }
    .form-row { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; }
    .form-row-inline { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
    @media (max-width: 560px) { .form-row-inline { grid-template-columns: 1fr; } }
    .form-hint { font-size: 0.82rem; color: var(--text-muted); }
    .form-actions { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
    .feedback-msg { padding: 10px 12px; border-radius: var(--radius-sm); font-weight: 600; margin: 8px 0 12px; }
    .feedback-msg.ok { background: var(--success-light); color: var(--success); border: 1px solid rgba(61,153,112,.3); }
    .feedback-msg.err { background: var(--danger-light); color: var(--danger); border: 1px solid rgba(192,57,43,.3); }

    .feedback-list { display: flex; flex-direction: column; gap: 12px; }
    .feedback-empty { text-align: center; padding: 22px 12px; color: var(--text-muted); background: var(--bg-body); border: 1px dashed var(--border); border-radius: var(--radius-sm); }
    .feedback-empty.err { color: var(--danger); }
    .feedback-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; }
    .feedback-item-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 0.85rem; color: var(--text-muted); }
    .feedback-title { font-weight: 700; color: var(--text); font-size: 1rem; }
    .feedback-description { color: var(--text); line-height: 1.55; white-space: pre-wrap; }
    .feedback-type-badge { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; border: 1px solid transparent; }
    .feedback-type-feature { background: rgba(79,70,229,0.1); color: #4338ca; border-color: rgba(79,70,229,0.25); }
    .feedback-type-improvement { background: var(--accent-light); color: var(--accent); border-color: rgba(224,138,42,0.3); }
    .feedback-type-bug { background: var(--danger-light); color: var(--danger); border-color: rgba(192,57,43,0.3); }
    .feedback-status { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; background: var(--bg-body); color: var(--text); border: 1px solid var(--border); }
    .feedback-status-new { background: #eef2ff; color: #4338ca; border-color: rgba(79,70,229,0.25); }
    .feedback-status-community-review { background: var(--accent-light); color: var(--accent); border-color: rgba(224,138,42,0.3); }
    .feedback-status-approved { background: var(--success-light); color: var(--success); border-color: rgba(61,153,112,0.3); }
    .feedback-status-rejected { background: var(--danger-light); color: var(--danger); border-color: rgba(192,57,43,0.3); }
    .feedback-status-in-progress { background: var(--warning-light); color: var(--warning); border-color: rgba(212,136,15,0.3); }
    .feedback-status-done { background: rgba(61,153,112,0.2); color: var(--success); border-color: rgba(61,153,112,0.4); }
    .feedback-date { margin-inline-start: auto; }
    .feedback-community { font-weight: 600; color: var(--brand); }
    .feedback-admin-note { background: var(--brand-light); border: 1px solid rgba(107,28,42,0.18); border-radius: var(--radius-sm); padding: 8px 10px; font-size: 0.9rem; color: var(--text); }
    .feedback-admin-note strong { color: var(--brand); }
    .feedback-meta { font-size: 0.85rem; color: var(--text-muted); }

    .feedback-vote-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
    .vote-btn { appearance: none; border: 1px solid var(--brand); background: #fff; color: var(--brand); border-radius: 999px; padding: 7px 14px; font-weight: 700; font-family: inherit; cursor: pointer; font-size: 0.88rem; }
    .vote-btn:hover { background: var(--brand-light); }
    .vote-btn.voted { background: var(--brand); color: #fff; }
    .vote-btn.voted:hover { background: var(--brand-dark); }
    .vote-btn.disabled, .vote-btn[disabled] { opacity: 0.5; cursor: not-allowed; }
    .vote-count { margin-inline-start: 4px; font-weight: 600; }
    .feedback-hint { font-size: 0.82rem; color: var(--text-muted); font-style: italic; }

    .feedback-comments { display: flex; flex-direction: column; gap: 8px; margin-top: 4px; }
    .feedback-comment { background: var(--bg-body); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; }
    .feedback-comment-head { display: block; font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; }
    .feedback-comment-form { display: flex; gap: 8px; margin-top: 4px; align-items: stretch; }
    .feedback-comment-form .form-control { flex: 1; }

    /* =========================================
       Admin feedback card (admin.html)
       ========================================= */
    .fb-stats-grid { display: grid; grid-template-columns: repeat(6,1fr); gap: 10px; }
    @media (max-width: 900px) { .fb-stats-grid { grid-template-columns: repeat(3,1fr); } }
    @media (max-width: 520px) { .fb-stats-grid { grid-template-columns: repeat(2,1fr); } }
    .fb-stat { background: linear-gradient(160deg,#FAF4EC,#F3EDE6); border: 1px solid var(--border); border-radius: 12px; padding: 10px 8px; text-align: center; }
    .fb-stat-value { font-size: 1.4rem; font-weight: 800; color: var(--brand); line-height: 1.1; }
    .fb-stat-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; margin-top: 4px; }
    #feedback-admin-card select, #feedback-admin-card input[type=text] {
      padding: 9px 11px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 0.95rem; background: #fff; color: var(--text);
    }
    .fb-list { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; }
    .fb-row { background: #fff; border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; }
    .fb-row-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.82rem; color: var(--text-muted); }
    .fb-type-badge { display: inline-flex; padding: 3px 8px; border-radius: 999px; font-size: 0.76rem; font-weight: 700; border: 1px solid transparent; }
    .fb-type-feature { background: rgba(79,70,229,0.1); color: #4338ca; border-color: rgba(79,70,229,0.25); }
    .fb-type-improvement { background: var(--accent-light); color: var(--accent); border-color: rgba(224,138,42,0.3); }
    .fb-type-bug { background: var(--danger-light); color: var(--danger); border-color: rgba(192,57,43,0.3); }
    .fb-community { font-weight: 700; color: var(--brand); }
    .fb-id { direction: ltr; font-family: ui-monospace,SFMono-Regular,Menlo,monospace; font-size: 0.78rem; color: var(--text-muted); }
    .fb-date { margin-inline-start: auto; }
    .fb-meta { color: var(--text-muted); font-size: 0.85rem; }
    .fb-title { font-weight: 700; color: var(--text); font-size: 1rem; }
    .fb-desc { color: var(--text); line-height: 1.55; white-space: pre-wrap; }
    .fb-contact { font-size: 0.85rem; color: var(--text-muted); }
    .fb-comments { display: flex; flex-direction: column; gap: 6px; background: var(--bg-body); border: 1px dashed var(--border); border-radius: 10px; padding: 8px 10px; }
    .fb-comment { font-size: 0.88rem; color: var(--text); }
    .fb-comment-head { display: block; font-size: 0.76rem; color: var(--text-muted); font-weight: 600; margin-bottom: 2px; }
    .fb-controls { display: grid; grid-template-columns: 180px 1fr auto auto; gap: 8px; align-items: start; margin-top: 6px; }
    @media (max-width: 720px) { .fb-controls { grid-template-columns: 1fr; } }
    .fb-status-select { padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font-family: inherit; font-size: 0.92rem; color: var(--text); }
    .fb-note { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; font-family: inherit; font-size: 0.92rem; resize: vertical; min-height: 44px; color: var(--text); background: #fff; }
    .fb-replies { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
    .fb-reply { background: var(--brand-light); border: 1px solid rgba(107,28,42,0.18); border-radius: 10px; padding: 8px 10px; }
    .fb-reply-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.76rem; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; }
    .fb-reply-text { font-size: 0.9rem; color: var(--text); white-space: pre-wrap; }
    .fb-reply-del { background: none; border: none; color: var(--text-muted); font-size: 0.78rem; cursor: pointer; padding: 0 4px; }
    .fb-reply-del:hover { color: #c0392b; }
    .feedback-admin-thread { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; }
    .feedback-admin-note-head { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 4px; }
    .feedback-admin-note-text { white-space: pre-wrap; }

    /* =====================================================
       Donations & Pledges (תרומות ונדרים)
       ===================================================== */
    .donations-kpi-grid {
      display: grid;
      grid-template-columns: repeat(4, 1fr);
      gap: 10px;
      margin: 8px 0 14px;
    }
    @media (max-width: 720px) { .donations-kpi-grid { grid-template-columns: repeat(2, 1fr); } }
    .donations-kpi-tile {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 12px 14px;
      display: flex;
      flex-direction: column;
      gap: 4px;
      box-shadow: 0 1px 2px rgba(0,0,0,0.03);
    }
    .donations-kpi-label { font-size: 0.78rem; color: var(--text-muted); font-weight: 600; }
    .donations-kpi-value { font-size: 1.35rem; font-weight: 800; color: var(--text); }
    .donations-kpi-sub { font-size: 0.74rem; color: var(--text-muted); }
    .donations-kpi-pledged { border-right: 3px solid var(--brand); }
    .donations-kpi-paid { border-right: 3px solid #3D9970; }
    .donations-kpi-balance { border-right: 3px solid var(--accent); }
    .donations-kpi-open { border-right: 3px solid #C0392B; }

    .donations-list { display: flex; flex-direction: column; gap: 10px; margin-top: 6px; }
    .donations-empty {
      padding: 24px 12px;
      text-align: center;
      color: var(--text-muted);
      font-size: 0.92rem;
      background: rgba(107,28,42,0.04);
      border-radius: 12px;
    }
    .donation-list-item {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      transition: box-shadow 0.15s ease;
    }
    .donation-list-item:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
    .donation-list-paid { opacity: 0.8; }
    .donation-list-canceled { opacity: 0.55; }
    .donation-list-main { display: flex; flex-direction: column; gap: 4px; }
    .donation-list-row1 { display: flex; align-items: center; gap: 10px; justify-content: space-between; flex-wrap: wrap; }
    .donation-list-row1-end { display: inline-flex; align-items: center; gap: 6px; }
    .donation-list-delete-btn { padding: 3px 7px; }
    .donation-list-delete-btn svg { width: 13px; height: 13px; }
    .donation-list-name {
      background: transparent; border: 0; padding: 0;
      color: var(--brand); font-weight: 800; font-size: 1.02rem;
      cursor: pointer; font-family: inherit;
    }
    .donation-list-name:hover { text-decoration: underline; }
    .donation-list-row2 { font-size: 0.88rem; color: var(--text-muted); }
    .donation-list-purpose { font-weight: 600; color: var(--text); }
    .donation-list-row3 { display: flex; flex-wrap: wrap; gap: 10px 16px; font-size: 0.88rem; margin-top: 4px; }
    .donation-list-amount strong { color: var(--brand); }
    .donation-list-paid strong { color: #3D9970; }
    .donation-list-balance strong { color: var(--accent); }
    .donation-list-payments-count {
      font-size: 0.76rem; color: var(--text-muted);
      background: rgba(0,0,0,0.04); padding: 2px 8px; border-radius: 10px;
    }

    /* Status badges */
    .donation-status-badge {
      display: inline-block;
      padding: 3px 10px;
      border-radius: 999px;
      font-size: 0.74rem;
      font-weight: 700;
      line-height: 1.4;
      white-space: nowrap;
    }
    .donation-status-open { background: rgba(224,138,42,0.15); color: #9a5a0f; }
    .donation-status-partial { background: rgba(107,28,42,0.12); color: var(--brand); }
    .donation-status-paid { background: rgba(61,153,112,0.18); color: #1f6b4a; }
    .donation-status-canceled { background: rgba(0,0,0,0.08); color: var(--text-muted); text-decoration: line-through; }

    /* Profile card summary + pledge cards */
    .donation-summary {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 8px;
      margin: 10px 0 14px;
    }
    .donation-summary-pill {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      display: flex;
      flex-direction: column;
      gap: 2px;
      align-items: flex-start;
    }
    .donation-summary-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
    .donation-summary-value { font-size: 1.05rem; font-weight: 800; color: var(--text); }
    .donation-summary-pledged { border-right: 3px solid var(--brand); }
    .donation-summary-paid { border-right: 3px solid #3D9970; }
    .donation-summary-balance { border-right: 3px solid var(--accent); }

    .donation-card {
      background: #fff;
      border: 1px solid var(--border);
      border-radius: 12px;
      padding: 10px 12px;
      margin-bottom: 10px;
      transition: box-shadow 0.15s ease;
    }
    .donation-card-canceled { opacity: 0.65; }
    .donation-card-head {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 10px;
      margin-bottom: 6px;
    }
    .donation-card-title {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .donation-purpose { font-weight: 700; color: var(--text); font-size: 0.98rem; }
    .donation-card-actions { display: flex; gap: 6px; }
    .donation-card-action {
      background: transparent;
      border: 1px solid var(--border);
      border-radius: 8px;
      padding: 4px 8px;
      color: var(--text-muted);
      cursor: pointer;
      font-size: 0.9rem;
      line-height: 1;
    }
    .donation-card-action:hover { background: rgba(0,0,0,0.04); color: var(--text); }
    .donation-card-action svg { width: 14px; height: 14px; display: block; }
    .donation-card-delete:hover { background: rgba(192,57,43,0.08); color: #C0392B; border-color: #C0392B; }
    .donation-card-edit:hover { background: rgba(107,28,42,0.08); color: #6B1C2A; border-color: #6B1C2A; }
    .donation-card-pay:hover { background: rgba(61,153,112,0.10); color: #3D9970; border-color: #3D9970; }

    .donation-amounts {
      display: flex;
      flex-wrap: wrap;
      gap: 6px 14px;
      font-size: 0.9rem;
      margin-bottom: 4px;
    }
    .donation-amounts strong { color: var(--brand); }
    .donation-amounts .donation-paid strong { color: #3D9970; }
    .donation-amounts .donation-balance strong { color: var(--accent); }
    .donation-meta {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-bottom: 4px;
      display: flex;
      flex-wrap: wrap;
      gap: 4px 8px;
      align-items: center;
    }
    .donation-parsha-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(212,175,55,0.12);
      border: 1px solid rgba(212,175,55,0.35);
      color: var(--text);
      font-weight: 600;
      font-size: 0.78rem;
    }
    .donation-payerid-chip {
      display: inline-flex;
      align-items: center;
      gap: 3px;
      padding: 2px 8px;
      border-radius: 999px;
      background: rgba(61,153,112,0.10);
      border: 1px solid rgba(61,153,112,0.35);
      color: var(--text);
      font-weight: 600;
      font-size: 0.78rem;
      letter-spacing: 0.3px;
      direction: ltr;
      unicode-bidi: isolate;
    }
    .donation-payerid-missing {
      background: rgba(224,138,42,0.10);
      border-color: rgba(224,138,42,0.45);
      color: var(--accent);
      direction: rtl;
    }
    .donation-list-payerid {
      direction: ltr;
      unicode-bidi: isolate;
      font-variant-numeric: tabular-nums;
    }
    .donation-list-payerid.donation-payerid-missing {
      color: var(--accent);
      font-weight: 600;
      direction: rtl;
    }
    .required-mark {
      color: var(--accent);
      font-weight: 700;
      margin-inline-start: 2px;
    }
    .donation-payerid-hint {
      font-size: 0.78rem;
      color: var(--text-muted);
      margin-top: -2px;
      padding: 0 2px;
    }
    .donation-year-filter {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0 8px;
      font-size: 0.85rem;
      color: var(--text-muted);
    }
    .donation-year-filter label { font-weight: 600; }
    .donation-year-select {
      padding: 4px 8px;
      font-size: 0.9rem;
      border-radius: 8px;
      max-width: 180px;
    }
    .donation-year-static strong { color: var(--text); }

    /* Hitvaduyot commitments inside the profile card */
    .commitments-controls {
      display: flex;
      align-items: center;
      gap: 8px;
      margin: 4px 0 8px;
      font-size: 0.85rem;
      color: var(--text-muted);
    }
    .commitments-controls label { font-weight: 600; }
    .commitments-year-select {
      padding: 4px 8px;
      font-size: 0.9rem;
      border-radius: 8px;
      max-width: 180px;
    }
    .commitments-list {
      display: flex;
      flex-direction: column;
      gap: 8px;
    }
    .commitment-card {
      background: rgba(212,175,55,0.06);
      border: 1px solid rgba(212,175,55,0.28);
      border-radius: 12px;
      padding: 8px 12px;
    }
    .commitment-head {
      display: flex;
      align-items: center;
      gap: 8px;
      flex-wrap: wrap;
    }
    .commitment-parsha {
      font-weight: 700;
      color: var(--text);
    }
    .commitment-locked-badge {
      font-size: 0.72rem;
      padding: 1px 8px;
      border-radius: 999px;
      background: rgba(0,0,0,0.06);
      color: var(--text-muted);
      font-weight: 600;
    }
    .commitment-meta {
      font-size: 0.82rem;
      color: var(--text-muted);
      margin-top: 2px;
    }
    .commitment-amount {
      display: inline-block;
      margin-top: 4px;
      font-weight: 600;
      color: var(--brand);
    }
    .donation-notes {
      font-size: 0.86rem;
      color: var(--text);
      background: rgba(0,0,0,0.03);
      padding: 6px 8px;
      border-radius: 8px;
      margin-top: 4px;
    }

    /* Payments list inside pledge card */
    .donation-payments {
      margin-top: 8px;
      border-top: 1px dashed var(--border);
      padding-top: 6px;
      display: flex;
      flex-direction: column;
      gap: 6px;
    }
    .payment-row {
      position: relative;
      background: rgba(61,153,112,0.04);
      border: 1px solid rgba(61,153,112,0.18);
      border-radius: 10px;
      padding: 6px 10px;
      padding-inline-start: 60px;
    }
    .payment-row-main {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: 8px;
      font-size: 0.88rem;
    }
    .payment-method-chip {
      background: #3D9970;
      color: #fff;
      font-size: 0.74rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .payment-amount { font-weight: 700; color: #1f6b4a; }
    .payment-date { color: var(--text-muted); font-size: 0.82rem; }
    .payment-receipt, .payment-notes { font-size: 0.8rem; color: var(--text-muted); margin-top: 2px; }
    .payment-actions {
      position: absolute;
      inset-inline-start: 4px;
      top: 50%;
      transform: translateY(-50%);
      display: flex;
      gap: 2px;
    }
    .payment-action-btn {
      background: transparent;
      border: 0;
      color: var(--text-muted);
      cursor: pointer;
      padding: 4px;
      border-radius: 6px;
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .payment-action-btn svg { width: 14px; height: 14px; display: block; }
    .payment-action-btn.payment-edit:hover { color: #6B1C2A; background: rgba(107,28,42,0.08); }
    .payment-action-btn.payment-delete:hover { color: #C0392B; background: rgba(192,57,43,0.08); }

    /* Forms (pledge + payment) */
    .donation-pledge-toggle, .donation-payment-toggle {
      margin-top: 8px;
      border: 1px dashed var(--border);
      border-radius: 10px;
      padding: 6px 10px;
      background: rgba(224,138,42,0.04);
    }
    .donation-pledge-toggle summary, .donation-payment-toggle summary {
      cursor: pointer;
      display: flex;
      align-items: center;
      gap: 6px;
      font-weight: 600;
      color: var(--brand);
      font-size: 0.92rem;
      padding: 2px 0;
    }
    .donation-pledge-toggle summary svg,
    .donation-payment-toggle summary svg { width: 14px; height: 14px; }
    .donation-pledge-form, .donation-payment-form {
      display: flex;
      flex-direction: column;
      gap: 8px;
      padding-top: 8px;
    }
    .donation-form-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    @media (max-width: 480px) { .donation-form-row { grid-template-columns: 1fr; } }

    .donation-pledge-form .btn,
    .donation-payment-form .btn,
    .donation-quick-modal .btn {
      width: 100%;
      min-height: 42px;
      padding: 10px 14px;
    }
    .donation-pledge-form .btn svg,
    .donation-payment-form .btn svg,
    .donation-quick-modal .btn svg {
      width: 18px;
      height: 18px;
      flex-shrink: 0;
    }

    .donation-record-payment-btn {
      width: 100%;
      min-height: 42px;
      margin-top: 8px;
    }
    .donation-record-payment-btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    .record-payment-context {
      padding: 8px 10px;
      border-radius: 8px;
      background: rgba(224,138,42,0.06);
      border: 1px solid var(--border);
    }

    .rp-amount-group .form-label {
      font-weight: 700;
      font-size: 0.95rem;
      color: var(--brand);
    }
    .rp-amount-input {
      font-size: 1.5rem;
      font-weight: 800;
      min-height: 56px;
      text-align: center;
      letter-spacing: 0.5px;
      border-width: 2px;
    }
    .rp-full-payment-btn {
      width: 100%;
      min-height: 46px;
      font-weight: 700;
    }

    .hebrew-date-hint {
      font-size: 0.8rem;
      color: var(--muted);
      padding: 4px 2px 0;
      min-height: 1em;
    }

    @keyframes donationCardJustUpdated {
      0%   { box-shadow: 0 0 0 0 rgba(61,153,112,0.55); background-color: rgba(61,153,112,0.12); }
      60%  { box-shadow: 0 0 0 8px rgba(61,153,112,0); background-color: rgba(61,153,112,0.06); }
      100% { box-shadow: 0 0 0 0 rgba(61,153,112,0); background-color: transparent; }
    }
    .donation-card-just-updated {
      animation: donationCardJustUpdated 1.6s ease-out 1;
    }

    /* Quick Donation Modal (floating) */
    .quick-donation-overlay {
      position: fixed;
      inset: 0;
      background: rgba(0,0,0,0.55);
      z-index: 5000;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 16px;
      /* No fade animation on overlay — starting transparent lets the page
         behind flash through and feels like background reloading. */
    }
    .quick-donation-modal {
      background: #fff;
      border-radius: 14px;
      width: 100%;
      max-width: 460px;
      max-height: 92vh;
      display: flex;
      flex-direction: column;
      box-shadow: 0 12px 40px rgba(0,0,0,0.35);
      overflow: hidden;
      animation: qdRise 0.12s ease-out;
      will-change: transform;
    }
    @keyframes qdRise { from { transform: translateY(10px); } to { transform: translateY(0); } }
    .quick-donation-head {
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      color: #fff;
      padding: 14px 16px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 12px;
    }
    .quick-donation-title { font-weight: 800; font-size: 1.02rem; }
    .quick-donation-member { font-size: 0.86rem; opacity: 0.9; margin-top: 2px; }
    .quick-donation-close {
      background: rgba(255,255,255,0.15);
      border: 0;
      color: #fff;
      width: 32px; height: 32px;
      border-radius: 50%;
      font-size: 1rem;
      cursor: pointer;
    }
    .quick-donation-close:hover { background: rgba(255,255,255,0.28); }
    .quick-donation-body {
      padding: 14px 16px;
      overflow-y: auto;
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .quick-donation-paynow {
      display: flex;
      align-items: center;
      gap: 8px;
      font-size: 0.92rem;
      color: var(--text);
      padding: 6px 2px;
    }
    .quick-donation-paynow input { width: 18px; height: 18px; accent-color: var(--brand); }
    .quick-donation-actions {
      display: flex;
      gap: 8px;
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      background: #fafafa;
    }
    .quick-donation-actions .btn { flex: 1; min-height: 44px; }
    .quick-donation-actions .btn svg { width: 18px; height: 18px; flex-shrink: 0; }

    /* =========================================
       NOTIFICATIONS — gabbai → worshippers
       ========================================= */
    .notifications-banner {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin: 0 0 14px;
    }
    .notifications-banner[data-empty="true"] { display: none; }
    .notifications-banner-item {
      position: relative;
      display: flex;
      align-items: flex-start;
      gap: 10px;
      padding: 12px 14px 12px 42px;
      background: var(--accent-light, rgba(224,138,42,0.14));
      border: 1px solid rgba(224,138,42,0.45);
      border-inline-start: 4px solid var(--accent, #E08A2A);
      border-radius: 12px;
      color: var(--text, #2D2424);
    }
    .notifications-banner-item.urgent {
      background: rgba(192,57,43,0.08);
      border-color: rgba(192,57,43,0.45);
      border-inline-start-color: var(--danger, #C0392B);
    }
    .notifications-banner-body { flex: 1; min-width: 0; }
    .notifications-banner-title {
      font-weight: 700;
      font-size: 1rem;
      margin-bottom: 4px;
    }
    .notifications-banner-text {
      font-size: 0.94rem;
      line-height: 1.5;
      word-break: break-word;
    }
    .notifications-banner-meta {
      font-size: 0.8rem;
      color: var(--text-muted, #8A7E78);
      margin-top: 6px;
    }
    .notifications-banner-urgent {
      display: inline-block;
      background: var(--danger, #C0392B);
      color: #fff;
      border-radius: 10px;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 2px 8px;
      margin-inline-end: 6px;
      vertical-align: middle;
    }
    .notifications-banner-close {
      position: absolute;
      top: 8px;
      inset-inline-end: 8px;
      width: 28px;
      height: 28px;
      border-radius: 50%;
      border: 0;
      background: rgba(0,0,0,0.08);
      color: inherit;
      font-size: 1.2rem;
      line-height: 1;
      cursor: pointer;
      display: inline-flex;
      align-items: center;
      justify-content: center;
    }
    .notifications-banner-close:hover { background: rgba(0,0,0,0.16); }

    /* Tab badge (unread count). Positioned absolutely so it overlays the
       label without affecting tab-button layout. */
    .tab-btn { position: relative; }
    .tab-badge {
      position: absolute;
      top: 2px;
      inset-inline-end: 4px;
      min-width: 18px;
      height: 18px;
      padding: 0 5px;
      border-radius: 9px;
      background: var(--danger, #C0392B);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 700;
      line-height: 18px;
      text-align: center;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }

    /* Composer tab: form row with two side-by-side columns */
    .form-row.form-row-inline {
      display: flex;
      gap: 12px;
      align-items: flex-start;
    }
    .form-row.form-row-inline .form-row-col { flex: 1; min-width: 0; }
    @media (max-width: 560px) {
      .form-row.form-row-inline { flex-direction: column; gap: 10px; }
    }

    .notifications-msg {
      padding: 8px 12px;
      border-radius: 8px;
      font-size: 0.9rem;
      margin: 8px 0;
    }
    .notifications-msg.ok {
      background: rgba(61,153,112,0.12);
      color: #1f6b4a;
      border: 1px solid rgba(61,153,112,0.4);
    }
    .notifications-msg.err {
      background: rgba(192,57,43,0.1);
      color: #8a1f15;
      border: 1px solid rgba(192,57,43,0.4);
    }

    .notifications-list {
      display: flex;
      flex-direction: column;
      gap: 10px;
    }
    .notifications-empty {
      color: var(--text-muted, #8A7E78);
      padding: 12px;
      text-align: center;
    }
    .notification-item {
      border: 1px solid var(--border, #E5DED6);
      border-inline-start: 4px solid var(--accent, #E08A2A);
      border-radius: 10px;
      padding: 12px 14px;
      background: #fff;
    }
    .notification-item.urgent {
      border-inline-start-color: var(--danger, #C0392B);
      background: rgba(192,57,43,0.04);
    }
    .notification-head {
      display: flex;
      justify-content: space-between;
      align-items: center;
      gap: 8px;
      margin-bottom: 4px;
    }
    .notification-scope {
      font-size: 0.82rem;
      color: var(--text-muted, #8A7E78);
      font-weight: 600;
    }
    .notification-badge.urgent {
      background: var(--danger, #C0392B);
      color: #fff;
      font-size: 0.72rem;
      font-weight: 700;
      padding: 2px 8px;
      border-radius: 10px;
    }
    .notification-title {
      font-size: 1rem;
      margin: 2px 0 6px;
      font-weight: 700;
    }
    .notification-body {
      font-size: 0.94rem;
      line-height: 1.5;
      color: var(--text, #2D2424);
      word-break: break-word;
    }
    .notification-meta {
      font-size: 0.8rem;
      color: var(--text-muted, #8A7E78);
      margin-top: 8px;
    }
    .notification-expires {
      font-size: 0.8rem;
      color: var(--text-muted, #8A7E78);
      margin-top: 2px;
    }
    .notification-actions {
      margin-top: 8px;
      display: flex;
      justify-content: flex-end;
    }

    /* Inside member profile card */
    .profile-notifications { display: flex; flex-direction: column; gap: 8px; }
    .profile-notifications-empty {
      color: var(--text-muted, #8A7E78);
      font-size: 0.9rem;
      padding: 6px 0;
    }
    .profile-notification-item {
      border: 1px solid var(--border, #E5DED6);
      border-inline-start: 3px solid var(--accent, #E08A2A);
      border-radius: 8px;
      padding: 8px 10px;
      background: #fff;
      position: relative;
    }
    .profile-notification-item.urgent {
      border-inline-start-color: var(--danger, #C0392B);
      background: rgba(192,57,43,0.04);
    }
    .profile-notification-badge {
      position: absolute;
      top: 6px;
      inset-inline-end: 8px;
      background: var(--danger, #C0392B);
      color: #fff;
      font-size: 0.68rem;
      font-weight: 700;
      padding: 1px 6px;
      border-radius: 8px;
    }
    .profile-notification-title { font-weight: 700; font-size: 0.95rem; margin-bottom: 2px; }
    .profile-notification-body { font-size: 0.9rem; line-height: 1.45; word-break: break-word; }
    .profile-notification-meta { font-size: 0.76rem; color: var(--text-muted, #8A7E78); margin-top: 4px; }
    .profile-notifications-actions { margin-top: 8px; }

    /* =========================================
       Broadcast to all members (WhatsApp)
       ========================================= */
    .bc-card { max-width: 620px; width: 100%; }
    .bc-card .profile-header {
      padding: 14px 18px 12px;
      text-align: center;
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      color: #fff;
      position: relative;
    }
    .bc-card .profile-header .am-header-title { font-size: 1.1rem; font-weight: 700; }
    .bc-card .profile-header .am-header-sub { font-size: 0.82rem; opacity: 0.9; margin-top: 2px; }
    .bc-card .am-close-btn {
      position: absolute; top: 8px; inset-inline-end: 10px;
      background: rgba(255,255,255,0.2); border: none; color: #fff;
      width: 30px; height: 30px; border-radius: 50%; cursor: pointer;
      font-size: 16px; line-height: 1;
    }
    .bc-card .am-close-btn:hover { background: rgba(255,255,255,0.32); }
    .bc-body { padding: 14px 18px 16px; display: grid; gap: 10px; }
    .bc-message { min-height: 120px; resize: vertical; font-size: 0.95rem; line-height: 1.5; }
    .bc-summary {
      display: flex; align-items: center; justify-content: space-between; gap: 10px;
      padding: 8px 10px; background: var(--surface); border: 1px solid var(--border);
      border-radius: 10px; font-size: 0.88rem; color: var(--text);
    }
    .bc-note {
      font-size: 0.82rem; color: var(--text-muted);
      background: rgba(200,155,60,0.1); border: 1px dashed rgba(200,155,60,0.4);
      padding: 8px 10px; border-radius: 8px;
    }
    .bc-list {
      max-height: 40vh; overflow-y: auto;
      border: 1px solid var(--border); border-radius: 10px;
      background: var(--surface);
    }
    .bc-empty { padding: 18px; text-align: center; color: var(--text-muted); }
    .bc-row {
      display: flex; align-items: center; gap: 8px;
      padding: 8px 10px; border-bottom: 1px solid var(--border);
      font-size: 0.9rem;
    }
    .bc-row:last-child { border-bottom: none; }
    .bc-row-dot { font-size: 0.85rem; }
    .bc-row-name { flex: 1; font-weight: 600; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .bc-row-phone { font-size: 0.82rem; color: var(--text-muted); font-variant-numeric: tabular-nums; }
    .bc-row-send { padding: 6px 10px; font-size: 0.82rem; min-height: 32px; }
    .bc-row-sent { opacity: 0.55; background: rgba(39,174,96,0.06); }
    .bc-foot {
      display: flex; gap: 10px; margin-top: 4px;
      padding-top: 10px; border-top: 1px solid var(--border);
    }
    .bc-foot .btn { flex: 1; }
    @media (max-width: 520px) {
      .bc-card { max-width: 100%; border-radius: 16px 16px 0 0; }
      .bc-body { padding: 10px 12px 12px; }
      .bc-row-phone { display: none; }
    }

    /* =========================================
       In-app confirm dialog (app-confirm-card)
       ========================================= */
    .app-confirm-card {
      max-width: 420px;
      width: calc(100% - 32px);
      margin: auto;
      background: var(--surface);
      border-radius: 16px;
      overflow: hidden;
      box-shadow: 0 24px 60px rgba(0,0,0,0.28);
    }
    .app-confirm-head {
      padding: 14px 18px;
      background: linear-gradient(135deg, var(--brand), var(--brand-dark));
      color: #fff;
    }
    .app-confirm-head.is-danger {
      background: linear-gradient(135deg, var(--danger), #8f1e1e);
    }
    .app-confirm-title {
      font-size: 1.05rem;
      font-weight: 700;
    }
    .app-confirm-body {
      padding: 16px 18px;
      font-size: 0.95rem;
      line-height: 1.55;
      color: var(--text);
      white-space: normal;
      max-height: 60vh;
      overflow-y: auto;
    }
    .app-confirm-foot {
      display: flex;
      gap: 8px;
      padding: 12px 16px;
      border-top: 1px solid var(--border);
      background: #fafafa;
    }
    .app-confirm-foot .btn { flex: 1; min-height: 44px; }
    @media (max-width: 520px) {
      .app-confirm-card { width: calc(100% - 24px); }
    }

    /* Pending self-registrations banner shown at the top of the Members tab */
    .pending-banner-slot:empty { display: none; }
    .pending-banner-slot { margin: 10px 0 6px; }
    .pending-banner {
      display: flex; align-items: center; gap: 10px;
      width: 100%; padding: 12px 14px;
      border-radius: 14px; border: 1px solid var(--border);
      background: var(--card); color: var(--text);
      font-family: inherit; font-size: 0.95rem; font-weight: 700;
      cursor: pointer; text-align: inherit;
      transition: background .15s, border-color .15s, box-shadow .15s;
    }
    .pending-banner:hover { border-color: var(--brand); background: #FAF4EC; }
    .pending-banner--idle { opacity: 0.85; font-weight: 600; }
    .pending-banner--has-count {
      opacity: 1;
      font-weight: 700;
      background: linear-gradient(180deg, #FAF4EC, #F3EDE6);
      border-color: rgba(107,28,42,.2);
      box-shadow: 0 2px 8px rgba(107,28,42,.08);
    }
    .pending-banner--active {
      background: linear-gradient(180deg, #FAF4EC, #F3EDE6);
      border-color: rgba(107,28,42,.2);
      box-shadow: 0 2px 8px rgba(107,28,42,.08);
    }
    .pending-banner__icon { font-size: 1.1rem; }
    .pending-banner__text { flex: 1; }
    .pending-banner__badge {
      display: inline-flex; align-items: center; justify-content: center;
      min-width: 28px; height: 28px; padding: 0 8px;
      border-radius: 999px; background: var(--brand); color: #fff;
      font-weight: 800; font-size: 0.88rem;
    }
    .pending-banner__chevron { color: var(--muted); font-weight: 700; }
    @media (max-width: 520px) {
      .pending-banner { padding: 10px 12px; font-size: 0.9rem; }
    }

    /* Reports tab */
    .reports-controls {
      display: flex;
      flex-direction: column;
      gap: 8px;
      margin-bottom: 14px;
    }
    .reports-controls .quick-chips { gap: 6px; flex-wrap: wrap; }
    .reports-custom-range {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 8px;
    }
    .reports-custom-range .form-label {
      display: flex;
      flex-direction: column;
      gap: 4px;
      font-size: 0.78rem;
      color: var(--text-muted);
    }
    .reports-range-label {
      font-size: 0.78rem;
      color: var(--text-muted);
      font-weight: 600;
    }
    .reports-kpi-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 8px;
      margin-bottom: 14px;
    }
    .reports-kpi-tile {
      display: flex;
      flex-direction: column;
      gap: 2px;
      padding: 12px 14px;
      border-radius: 12px;
      background: var(--brand-light);
      border: 1px solid var(--border);
    }
    .reports-kpi-label { font-size: 0.72rem; color: var(--text-muted); font-weight: 600; }
    .reports-kpi-value { font-size: 1.15rem; font-weight: 800; color: var(--brand); line-height: 1.15; }
    .reports-kpi-sub { font-size: 0.7rem; color: var(--text-muted); min-height: 0.9em; }
    .reports-kpi-tile.reports-kpi-paid .reports-kpi-value { color: #1e7a3a; }
    .reports-kpi-tile.reports-kpi-expenses .reports-kpi-value { color: #b45309; }
    .reports-kpi-tile.reports-kpi-balance .reports-kpi-value { color: #b45309; }
    .reports-kpi-tile.reports-kpi-positive .reports-kpi-value { color: #1e7a3a; }
    .reports-kpi-tile.reports-kpi-negative .reports-kpi-value { color: #b91c1c; }

    .report-section { margin-bottom: 18px; }
    .report-section-title {
      font-size: 0.95rem;
      font-weight: 700;
      color: var(--brand);
      margin: 0 0 8px 0;
    }
    .report-table {
      width: 100%;
      border-collapse: collapse;
      font-size: 0.85rem;
      background: var(--card);
      border: 1px solid var(--border);
      border-radius: 10px;
      overflow: hidden;
    }
    .report-table thead th {
      background: var(--brand-light);
      color: var(--brand);
      font-weight: 700;
      font-size: 0.78rem;
      text-align: right;
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
    }
    .report-table tbody td {
      padding: 8px 10px;
      border-bottom: 1px solid var(--border);
      color: var(--text);
    }
    .report-table tbody tr:last-child td { border-bottom: none; }
    .report-table tbody tr:nth-child(even) td { background: rgba(0,0,0,.015); }
    .report-table th.num,
    .report-table td.num { text-align: center; font-variant-numeric: tabular-nums; }
    .report-table-empty {
      text-align: center !important;
      color: var(--text-muted);
      font-size: 0.82rem;
      padding: 14px 10px !important;
      font-style: italic;
    }

    .reports-toolbar {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: 8px;
      flex-wrap: wrap;
    }
    .reports-toolbar .reports-actions {
      display: inline-flex;
      gap: 6px;
    }
    .reports-toolbar .btn-sm {
      padding: 6px 12px;
      font-size: 0.82rem;
      border-radius: 10px;
    }

    /* Sub-tab chip row inside the reports page (סיכום | כספים | עליות …) */
    .reports-subtabs { margin-top: 4px; }
    .reports-subtabs .chip { font-size: 0.82rem; }

    /* Printable report header is hidden on screen; revealed only in print mode */
    .report-print-only { display: none; }

    @media print {
      /* Clean background */
      @page { size: A4; margin: 14mm 12mm; }
      html, body { background: #fff !important; }

      body.report-print-mode header,
      body.report-print-mode .tabs,
      body.report-print-mode .bottom-nav,
      body.report-print-mode .tab-share-btn,
      body.report-print-mode #quickDonationOverlay,
      body.report-print-mode .global-search-bar,
      body.report-print-mode .memorial-bar,
      body.report-print-mode .pending-banner {
        display: none !important;
      }
      body.report-print-mode .tab-panel:not(#reports) { display: none !important; }
      body.report-print-mode #reports { display: block !important; padding: 0; margin: 0; }
      body.report-print-mode .card {
        border: none !important;
        box-shadow: none !important;
        padding: 0 !important;
        background: #fff !important;
      }

      /* Hide interactive controls in print */
      body.report-print-mode .reports-subtabs,
      body.report-print-mode .reports-controls .quick-chips,
      body.report-print-mode .reports-controls .reports-custom-range,
      body.report-print-mode .reports-toolbar .reports-actions {
        display: none !important;
      }

      /* Show the printable header */
      body.report-print-mode .report-print-only { display: block !important; }
      .report-print-header {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: 12px;
        padding-bottom: 10px;
        margin-bottom: 14px;
        border-bottom: 2px solid #6B1C2A;
      }
      .report-print-name { font-size: 1.2rem; font-weight: 800; color: #6B1C2A; }
      .report-print-sub { font-size: 0.9rem; color: #555; }
      .report-print-meta { font-size: 0.82rem; color: #333; text-align: left; }
      .report-print-meta strong { color: #6B1C2A; }

      /* KPIs print as light tiles */
      body.report-print-mode .reports-kpi-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: 6px;
      }
      body.report-print-mode .reports-kpi-tile {
        background: #fff !important;
        border: 1px solid #ccc !important;
        break-inside: avoid;
        page-break-inside: avoid;
      }

      body.report-print-mode .report-section {
        break-inside: avoid;
        page-break-inside: avoid;
        margin-bottom: 14px;
      }
      body.report-print-mode .report-table {
        border: 1px solid #888 !important;
      }
      body.report-print-mode .report-table thead th {
        background: #f0e9e0 !important;
        color: #6B1C2A !important;
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
      }
      body.report-print-mode .report-section-title {
        color: #6B1C2A !important;
      }
    }

    /* ───── Desktop sidebar (≥1025px) ───── */
    /* Hidden by default; only revealed at desktop widths so the existing
       top-tabs (901–1024px) and mobile bottom-nav (≤900px) keep working. */
    .desktop-sidebar { display: none; }

    @media (min-width: 1025px) {
      /* Sidebar is pinned to the viewport's inline-start edge (the right side
         in RTL). It spans full viewport height with no rounded corners or
         offsets so it reads as a true app-shell rail. */
      .desktop-sidebar {
        display: flex;
        flex-direction: column;
        position: fixed;
        top: 0;
        bottom: 0;
        inset-inline-start: 0;
        width: var(--ds-w, 240px);
        background: linear-gradient(180deg, var(--brand) 0%, var(--brand-dark) 100%);
        color: rgba(255,255,255,.85);
        padding: 16px 10px 14px;
        box-shadow: var(--shadow-md);
        overflow-y: auto;
        overflow-x: hidden;
        transition: width .2s ease;
        z-index: 50;
      }

      /* Body shifts content away from the fixed sidebar.
         padding-inline-start in RTL = padding-right, which is exactly where
         the sidebar lives. The 20px keeps the existing breathing room. */
      body {
        --ds-w: 240px;
        padding-inline-start: calc(var(--ds-w) + 20px);
      }
      body.sidebar-collapsed { --ds-w: 68px; }

      /* Hide the legacy top-tabs only at desktop. */
      header .tabs { display: none !important; }

      .ds-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        padding: 4px 6px 10px;
        border-bottom: 1px solid rgba(255,255,255,.10);
        margin-bottom: 8px;
      }
      .ds-brand {
        display: inline-flex;
        align-items: center;
        gap: 8px;
        min-width: 0;
        overflow: hidden;
      }
      .ds-brand img {
        width: 32px; height: 32px;
        border-radius: 8px;
        object-fit: cover;
        flex-shrink: 0;
      }
      .ds-brand-title {
        font-weight: 700;
        font-size: 0.92rem;
        color: #fff;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      body.sidebar-collapsed .ds-brand-title { display: none; }
      body.sidebar-collapsed .ds-head { justify-content: center; }

      .ds-toggle {
        background: rgba(255,255,255,.08);
        border: 1px solid rgba(255,255,255,.10);
        color: #fff;
        width: 32px; height: 32px;
        border-radius: 8px;
        cursor: pointer;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding: 0;
        flex-shrink: 0;
        transition: background .15s ease;
      }
      .ds-toggle:hover { background: rgba(255,255,255,.18); }
      .ds-toggle svg { width: 16px; height: 16px; }
      /* Chevron points right by default; flip when collapsed (RTL-aware via scaleX). */
      body.sidebar-collapsed .ds-toggle svg { transform: scaleX(-1); }

      .ds-nav {
        display: flex;
        flex-direction: column;
        gap: 2px;
      }
      .ds-section { margin-top: 16px; }
      .ds-section:first-child { margin-top: 4px; }
      .ds-heading {
        font-size: 0.72rem;
        font-weight: 800;
        color: var(--accent);
        letter-spacing: 1.6px;
        padding: 8px 12px 6px;
        text-transform: uppercase;
        display: flex;
        align-items: center;
        gap: 8px;
      }
      .ds-heading::before {
        content: "";
        width: 14px;
        height: 2px;
        background: var(--accent);
        border-radius: 1px;
        flex-shrink: 0;
        opacity: .85;
      }
      body.sidebar-collapsed .ds-heading {
        justify-content: center;
        font-size: 0;
        padding: 8px 0 4px;
        gap: 0;
      }
      body.sidebar-collapsed .ds-heading::before {
        width: 18px;
        height: 2px;
        opacity: .55;
      }

      /* Override the base .tab-btn look only inside the sidebar. */
      .desktop-sidebar .tab-btn.ds-item {
        position: relative;
        width: 100%;
        justify-content: flex-start;
        padding: 9px 12px;
        gap: 10px;
        border-radius: 10px;
        background: transparent;
        border: 1px solid transparent;
        color: rgba(255,255,255,.85);
        font-size: 0.93rem;
        font-weight: 500;
        margin: 1px 0;
        text-align: start;
        box-shadow: none;
      }
      .desktop-sidebar .tab-btn.ds-item:hover,
      .desktop-sidebar .tab-btn.ds-item:focus-visible {
        background: rgba(255,255,255,.10);
        color: #fff;
        outline: none;
      }
      .desktop-sidebar .tab-btn.ds-item[aria-selected="true"] {
        background: #fff;
        color: var(--brand);
        border-color: #fff;
        font-weight: 700;
        box-shadow: 0 4px 14px rgba(0,0,0,.18);
      }
      .desktop-sidebar .tab-btn.ds-item[aria-selected="true"] .tab-icon-svg {
        stroke: var(--brand);
      }
      .desktop-sidebar .tab-icon-svg {
        width: 18px; height: 18px;
        margin: 0;
        flex-shrink: 0;
      }

      body.sidebar-collapsed .desktop-sidebar .tab-label { display: none; }
      body.sidebar-collapsed .desktop-sidebar .tab-btn.ds-item {
        justify-content: center;
        padding: 10px 0;
      }

      /* Badges: text count when expanded; small dot when collapsed. */
      .desktop-sidebar .tab-badge {
        position: absolute;
        inset-inline-end: 8px;
        top: 50%;
        transform: translateY(-50%);
        background: var(--danger, #C0392B);
        color: #fff;
        min-width: 18px;
        height: 18px;
        padding: 0 5px;
        border-radius: 9px;
        font-size: 0.72rem;
        font-weight: 700;
        line-height: 18px;
        text-align: center;
      }
      body.sidebar-collapsed .desktop-sidebar .tab-badge {
        inset-inline-end: 6px;
        top: 6px;
        transform: none;
        min-width: 8px;
        height: 8px;
        padding: 0;
        font-size: 0;
        line-height: 0;
        border: 2px solid var(--brand);
      }

      /* Scrollbar polish for sidebar */
      .desktop-sidebar::-webkit-scrollbar { width: 6px; }
      .desktop-sidebar::-webkit-scrollbar-thumb {
        background: rgba(255,255,255,.18);
        border-radius: 3px;
      }
      .desktop-sidebar::-webkit-scrollbar-track { background: transparent; }
    }