:root{
            --accent:#FFCCC9; --ink:#0f172a; --muted:#64748b; --bg:#ffffff; --card:#ffffff; --ring:#e2e8f0;
            --radius:14px; --pageMax:1200px;
        }
        *{box-sizing:border-box}
        body{font-family:Inter,system-ui,Arial,sans-serif; color:var(--ink); margin:0; background:var(--bg);} 
        .container{max-width:var(--pageMax); margin:0 auto; padding:0 1rem;}

        .toolbar{display:flex; gap:.75rem; align-items:center; justify-content:space-between; padding:1rem 1.25rem; position:sticky; top:0; background:var(--bg); border-bottom:1px solid var(--ring); z-index:5}
        .title{display:flex; align-items:center; gap:.75rem; flex-wrap:wrap}
        .title h1{font-size:1.3rem; margin:0; font-weight:700}
        .btn{padding:.5rem .8rem; border:1px solid var(--ring); border-radius:10px; background:white; cursor:pointer; font-size:1rem}
        .btn:hover{filter:brightness(0.98)}
        .controls{display:flex; gap:.5rem; align-items:center;}

        select.filterSelect {
            padding: .4rem .7rem;
            border: 1px solid var(--ring);
            border-radius: 999px;
            background: white;
            color: var(--muted);
            font-size: 1rem;
            appearance: none;
            cursor: pointer;
            min-width: 110px;
        }

        .calendar-wrapper {
            padding: 1.5rem 1rem;
            max-width: 1100px;
            margin: 0 auto;
        }

        .calendar-grid {
            display: grid;
            grid-template-columns: repeat(7, 1fr);
            gap: 1px;
            background: var(--ring);
            border: 1px solid var(--ring);
            border-radius: var(--radius);
            overflow: hidden;
        }

        .day-header-cell {
            background: var(--bg);
            padding: 0.75rem;
            text-align: center;
            font-weight: 600;
            font-size: 0.85rem;
            color: var(--muted);
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        .calendar-day {
            background: var(--bg);
            min-height: 120px;
            padding: 0.5rem;
            position: relative;
        }

        .calendar-day.other-month {
            background: #fafafa;
            opacity: 0.6;
        }

        .calendar-day.today {
            background: rgba(255, 204, 201, 0.1);
        }

        .day-number {
            font-size: 0.9rem;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 0.5rem;
        }

        .calendar-day.today .day-number {
            background: var(--accent);
            color: white;
            width: 28px;
            height: 28px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .day-events {
            display: flex;
            flex-direction: column;
            gap: 0.25rem;
        }

        .event-pill {
            background: var(--card);
            border: 1px solid var(--ring);
            border-radius: 8px;
            padding: 0.4rem 0.5rem;
            font-size: 0.8rem;
            cursor: pointer;
            transition: all 0.2s;
            display: flex;
            flex-direction: column;
            gap: 0.15rem;
        }

        .event-pill:hover {
            border-color: var(--accent);
            transform: translateY(-1px);
            box-shadow: 0 2px 8px rgba(0,0,0,0.1);
        }

        .event-pill.filtered {
            display: none;
        }

        .event-pill-title {
            font-weight: 600;
            color: var(--ink);
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
        }

        .event-pill-time {
            color: var(--muted);
            font-size: 0.75rem;
        }

        .modal {
            display: none;
            position: fixed;
            z-index: 10; 
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0,0,0,0.5);
            justify-content: center;
            align-items: center;
            opacity: 0;
            transition: opacity 0.3s ease-in;
        }
        .modal.active {
            display: flex;
            opacity: 1;
        }
        .modal-content {
            background-color: var(--bg);
            padding: 2rem;
            border-radius: var(--radius);
            max-width: 500px;
            width: 90%;
            position: relative;
            transform: scale(0.9);
            opacity: 0;
            transition: transform 0.3s ease-in, opacity 0.3s ease-in;
        }
        .modal.active .modal-content {
            transform: scale(1);
            opacity: 1;
        }

        .close-btn {
            position: absolute;
            top: 1rem;
            right: 1.5rem;
            font-size: 2rem;
            cursor: pointer;
            color: var(--muted);
        }

        .modal-tags {
            display: flex;
            gap: 0.5rem;
            flex-wrap: wrap;
            margin: 0.5rem 0 1rem 0;
        }

        .tag {
            padding: 0.2rem 0.6rem;
            border: 1px solid var(--ring);
            border-radius: 999px;
            color: var(--muted);
            font-size: 0.85rem;
        }

        .modal-cta {
            display: inline-block;
            margin-top: 1rem;
            padding: .5rem 1rem;
            background: var(--accent);
            color: white;
            border-radius: 10px;
            text-decoration: none;
            font-weight: 600;
        }

        .add-to-cal-btn {
            display: inline-block;
            margin-top: 0.5rem;
            margin-left: 0.5rem;
            padding: 0.5rem 1rem;
            border: 1px solid var(--ring);
            border-radius: 10px;
            background: var(--bg);
            color: var(--muted);
            text-decoration: none;
            font-size: 0.9rem;
        }

        /* Mobile List View */
        .mobile-list-view {
            display: none;
        }

        .event-list-item {
            background: var(--card);
            border: 1px solid var(--ring);
            border-radius: var(--radius);
            padding: 1rem;
            margin-bottom: 0.75rem;
            cursor: pointer;
            transition: all 0.2s;
        }

        .event-list-item:hover {
            border-color: var(--accent);
            box-shadow: 0 2px 8px rgba(0,0,0,0.08);
        }

        .event-list-item.filtered {
            display: none;
        }

        .event-list-date {
            font-size: 0.85rem;
            color: var(--muted);
            font-weight: 600;
            margin-bottom: 0.5rem;
        }

        .event-list-title {
            font-size: 1rem;
            font-weight: 600;
            color: var(--ink);
            margin-bottom: 0.4rem;
        }

        .event-list-time {
            font-size: 0.9rem;
            color: var(--muted);
            margin-bottom: 0.5rem;
        }

        .event-list-tags {
            display: flex;
            gap: 0.4rem;
            flex-wrap: wrap;
        }

        .event-list-location {
            font-size: 0.85rem;
            color: var(--muted);
            margin-top: 0.4rem;
        }

        @media (max-width: 768px) {
            .title h1 {
                font-size: 1.1rem;
            }
            
            .calendar-wrapper {
                display: none;
            }
            
            .mobile-list-view {
                display: block;
                padding: 1rem;
                max-width: 600px;
                margin: 0 auto;
            }
            
            .mobile-list-empty {
                text-align: center;
                color: var(--muted);
                padding: 2rem;
                font-style: italic;
            }
        }

        /* --- Loading overlay --- */
.loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.9);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 50;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  opacity: 0;
  animation: fadeIn 0.3s ease forwards;
}
@keyframes fadeIn { to { opacity: 1; } }

.loading-spinner {
  width: 48px;
  height: 48px;
  border: 4px solid #e2e8f0;
  border-top-color: var(--accent, #FFCCC9);
  border-radius: 50%;
  animation: spin 1s linear infinite;
  margin-bottom: 1rem;
}

.loading-text {
  font-family: Inter, system-ui, Arial, sans-serif;
  font-size: 1rem;
  color: var(--muted, #64748b);
}

@keyframes spin {
  to { transform: rotate(360deg); }
}

.loading-overlay.hidden {
  opacity: 0;
  visibility: hidden;
}