/* ── Design tokens ── */
    :root {
      --cal-bg:         #f7f5f0;
      --cal-surface:    #ffffff;
      --cal-border:     #e2ddd6;
      --cal-text:       #1a1814;
      --cal-muted:      #9b9590;
      --cal-accent:     #b85c38;
      --cal-today-bg:   #b85c38;
      --cal-today-fg:   #ffffff;
      --cal-other-bg:   #f0ede8;
      --cal-header-bg:  #1a1814;
      --cal-header-fg:  #f7f5f0;
      --cal-shadow:     0 4px 24px rgba(26,24,20,.10);
      --cal-radius:     14px;
    }

    /* ════════════ CARD ════════════ */
    .calendar-card {
      background: var(--cal-surface);
      border: 1.5px solid var(--cal-border);
      border-radius: var(--cal-radius);
      box-shadow: var(--cal-shadow);
      overflow: hidden;
      max-width: 860px;
      margin: 15px auto;
    }

    /* ════════════ HEADER ════════════ */
    .cal-header {
      background: var(--cal-header-bg);
      color: var(--cal-header-fg);
      padding: .85rem 1rem;
      display: flex;
      align-items: center;
      gap: .5rem;
      flex-wrap: wrap;
    }
    .cal-header .month-title {
      font-family: 'DM Serif Display', serif;
      font-size: 1.45rem;
      letter-spacing: -.4px;
      white-space: nowrap;
      line-height: 1;
    }
    .nav-btn {
      background: rgba(255,255,255,.12);
      border: 1.5px solid rgba(255,255,255,.20);
      color: var(--cal-header-fg);
      border-radius: 8px;
      width: 38px; height: 38px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer;
      transition: background .15s;
      flex-shrink: 0;
      -webkit-tap-highlight-color: transparent;
    }
    .nav-btn:hover, .nav-btn:active { background: rgba(255,255,255,.25); }
    .cal-header select {
      background: rgba(255,255,255,.10);
      border: 1.5px solid rgba(255,255,255,.20);
      color: var(--cal-header-fg);
      border-radius: 8px;
      padding: .32rem .5rem;
      font-size: .82rem;
      font-family: inherit;
      cursor: pointer;
      appearance: none; -webkit-appearance: none;
      min-width: 0;
    }
    .cal-header select option { background: #1a1814; color: #f7f5f0; }
    .today-pill {
      background: var(--cal-accent);
      color: #fff; border: none;
      border-radius: 20px;
      padding: .28rem .85rem;
      font-size: .76rem; font-weight: 600; letter-spacing: .3px;
      cursor: pointer;
      transition: opacity .15s;
      white-space: nowrap;
      -webkit-tap-highlight-color: transparent;
    }
    .today-pill:hover { opacity: .85; }
    .h-spacer { flex: 1 1 0; min-width: 4px; }

    /* ════════════ DOW ROW ════════════ */
    .cal-dow {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
      background: var(--cal-other-bg);
      border-bottom: 1.5px solid var(--cal-border);
    }
    .cal-dow > div {
      text-align: center;
      padding: .45rem 0;
      font-size: .68rem; font-weight: 600;
      letter-spacing: .7px; text-transform: uppercase;
      color: var(--cal-muted);
    }

    /* ════════════ GRID ════════════ */
    .cal-grid {
      display: grid;
      grid-template-columns: repeat(7, 1fr);
    }
    .cal-cell {
      border-right: 1px solid var(--cal-border);
      border-bottom: 1px solid var(--cal-border);
      min-height: 90px;
      padding: .4rem .45rem .35rem;
      position: relative;
      cursor: pointer;
      -webkit-tap-highlight-color: transparent;
      transition: background .1s;
    }
    .cal-cell:nth-child(7n) { border-right: none; }
    .cal-cell:hover { background: #faf8f5; }
    .cal-cell.other-month { background: var(--cal-other-bg); }
    .cal-cell.other-month:hover { background: #ebe8e2; }
    .cal-cell.other-month .day-num { color: var(--cal-muted); }
    .cal-cell.today { background: #fff8f5; }
    .cal-cell.today .day-num {
      background: var(--cal-today-bg);
      color: var(--cal-today-fg);
      border-radius: 50%;
      font-weight: 700;
    }
    .day-num {
      font-size: .78rem; font-weight: 500;
      color: var(--cal-text);
      width: 24px; height: 24px;
      display: flex; align-items: center; justify-content: center;
      margin-bottom: .2rem; flex-shrink: 0;
    }

    /* ── Event pills (desktop) ── */
    .event-pill {
      display: block;
      border-radius: 4px;
      padding: .16rem .4rem;
      font-size: .65rem; font-weight: 500;
      margin-bottom: 2px;
      white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
      cursor: pointer; border: none; text-align: left; width: 100%;
      transition: filter .12s; line-height: 1.4;
    }
    .event-pill:hover { filter: brightness(.88); }
    .event-primary   { background: #dbeafe; color: #1e40af; }
    .event-success   { background: #dcfce7; color: #166534; }
    .event-danger    { background: #fee2e2; color: #991b1b; }
    .event-warning   { background: #fef9c3; color: #854d0e; }
    .event-secondary { background: #f1f5f9; color: #475569; }

    .more-badge {
      font-size: .6rem; color: var(--cal-muted); font-weight: 600; cursor: pointer;
    }
    .more-badge:hover { color: var(--cal-accent); }

    /* ── Dot indicators (mobile) ── */
    .dot-row {
      display: none;
      flex-wrap: wrap; gap: 2px; margin-top: 3px;
    }
    .event-dot { width: 6px; height: 6px; border-radius: 50%; flex-shrink: 0; }
    .dot-primary   { background: #3b82f6; }
    .dot-success   { background: #22c55e; }
    .dot-danger    { background: #ef4444; }
    .dot-warning   { background: #eab308; }
    .dot-secondary { background: #94a3b8; }

    /* ════════════ FOOTER ════════════ */
    .cal-footer {
      border-top: 1.5px solid var(--cal-border);
      padding: .6rem 1rem;
      font-size: .72rem; color: var(--cal-muted);
      display: flex; align-items: center; gap: .75rem; flex-wrap: wrap;
    }
    .legend-dot {
      width: 8px; height: 8px; border-radius: 50%;
      display: inline-block; margin-right: 3px;
    }
    #eventCount { font-style: italic; margin-left: auto; }

    /* ════════════ MODAL ════════════ */
    .modal-content {
      border-radius: 12px;
      border: 1.5px solid var(--cal-border);
      box-shadow: 0 8px 40px rgba(0,0,0,.14);
    }
    .modal-header { border-bottom: 1.5px solid var(--cal-border); padding: .75rem 1rem; }
    .modal-body   { padding: .5rem 1rem .9rem; }

    .event-detail-color {
      width: 11px; height: 11px; border-radius: 50%;
      display: inline-block; flex-shrink: 0; margin-top: 2px;
    }
    .ev-item {
      display: flex; align-items: flex-start; gap: .55rem;
      padding: .6rem 0; border-bottom: 1px solid var(--cal-border);
    }
    .ev-item:last-child { border-bottom: none; }
    .ev-title { font-size: .84rem; font-weight: 600; }
    .ev-time  { font-size: .72rem; color: var(--cal-muted); }

    /* ── Swipe flash ── */
    @keyframes flashLeft  { 0%{opacity:1} 40%{opacity:.4;transform:translateX(-8px)} 100%{opacity:1;transform:none} }
    @keyframes flashRight { 0%{opacity:1} 40%{opacity:.4;transform:translateX(8px)}  100%{opacity:1;transform:none} }
    .swipe-left  { animation: flashLeft  .22s ease; }
    .swipe-right { animation: flashRight .22s ease; }

    /* ════════════ MOBILE ≤ 640px ════════════ */
    @media (max-width: 640px) {
      body { padding: .4rem .2rem 2rem; }

      .cal-header { padding: .65rem .75rem; gap: .38rem; }
      .cal-header .month-title { font-size: 1rem; }
      .cal-header select { font-size: .72rem; padding: .26rem .36rem; }
      .nav-btn { width: 32px; height: 32px; font-size: .85rem; }
      .today-pill { font-size: .68rem; padding: .22rem .6rem; }

      /* Compact cells */
      .cal-cell {
        min-height: 54px;
        padding: .28rem .18rem .22rem;
      }
      .day-num { font-size: .7rem; width: 20px; height: 20px; }

      /* Switch to dot mode */
      .event-pill  { display: none !important; }
      .more-badge  { display: none !important; }
      .dot-row     { display: flex !important; }

      /* Footer: hide legend labels */
      .legend-item { display: none; }
      #eventCount  { margin-left: 0; }

      /* Bottom sheet modal */
      .modal-dialog {
        margin: 0 !important;
        position: fixed;
        bottom: 0; left: 0; right: 0;
        max-width: 100% !important;
        width: 100%;
      }
      .modal-content {
        border-radius: 18px 18px 0 0 !important;
        border-bottom: none;
      }
      .modal-content::before {
        content: '';
        display: block;
        width: 40px; height: 4px;
        background: var(--cal-border);
        border-radius: 2px;
        margin: .6rem auto 0;
      }
      .modal.fade   .modal-dialog { transform: translateY(100%); transition: transform .28s ease; }
      .modal.show   .modal-dialog { transform: translateY(0); }
    }

    /* ════════════ TABLET 641–768px ════════════ */
    @media (min-width: 641px) and (max-width: 768px) {
      .cal-cell { min-height: 74px; padding: .35rem .35rem .3rem; }
      .event-pill { font-size: .61rem; padding: .13rem .3rem; }
    }