body { font-family: system-ui, -apple-system, BlinkMacSystemFont, sans-serif; margin: 10px; background: #f8f9fa; }
    h1 { text-align: center; color: #333; margin: 15px 0 10px; }

    #calendar { 
      max-width: 1100px; 
      margin: 0 auto; 
      background: white; 
      border-radius: 12px; 
      box-shadow: 0 4px 20px rgba(0,0,0,0.1); 
      padding: 8px;
    }

    .controls {
      max-width: 1100px;
      margin: 0 auto 12px;
      display: flex;
      flex-wrap: wrap;
      gap: 12px;
      justify-content: center;
      align-items: center;
    }

    .view-toggle button, .filter-select, button {
      padding: 10px 18px;
      border: none;
      border-radius: 8px;
      cursor: pointer;
      font-size: 1em;
    }
    .view-toggle button.active {
      background: #e91e63;
      color: white;
    }

    .filter-select {
      min-width: 220px;
      background: white;
      border: 1px solid #ddd;
    }

    /* Gray out other months */
    .fc .fc-daygrid-day.fc-day-other {
      background-color: #f0f0f0 !important;
    }

    .fc-event.birthday {
      //background-color: #ff69b4 !important;
      //color: white !important;
      //border: none;
    }
    .fc-event.birthday .fc-event-title {
      font-weight: bold;
    }

    @media (min-width: 769px) {
      .fc-daygrid-event { padding: 6px 8px !important; }
      .fc-event-title { white-space: pre-wrap !important; line-height: 1.25 !important; }
    }

    .modal { 
      display: none; position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
      background: white; padding: 22px; border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,0.3);
      z-index: 1000; max-width: 92%; width: 92%; max-height: 85vh; overflow-y: auto;
    }
    .overlay { display: none; position: fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.7); z-index:999; }

    ul { list-style: none; padding: 0; }
    li { padding: 12px 0; border-bottom: 1px solid #eee; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; }
    .order-btn {
      padding: 9px 16px; 
      border: none; 
      border-radius: 8px; 
      font-size: 0.95em;
    }
    .order-btn.active { 
      background: #e91e63; 
      color: white; 
    }
    .order-btn.past { 
      background: #999; 
      color: #ddd; 
      cursor: not-allowed;
      pointer-events: none;
    }