.mcal { max-width: 640px; margin: auto; }
.mcal-top, .mcal-event-meta, .mcal-tools, .mcal-legend, .mcal-event-actions { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.mcal-top { margin-bottom: 16px; }
.mcal-top h2 { margin: 0 0 5px; font-size: 23px; }
.mcal-top p { margin: 0; color: var(--muted); font-size: 13px; }
.mcal-card { padding: 14px 10px; border: 1px solid var(--border); border-radius: 20px; background: var(--surface, #fff); box-shadow: 0 5px 20px #173b6408; }
.mcal-month-nav { display: grid; grid-template-columns: 44px minmax(0, 1fr) 44px; align-items: center; gap: 6px; }
.mcal-month-nav h3 { text-align: center; font-size: 18px; text-transform: capitalize; margin: 0; }
.mcal-month-nav .btn { padding: 0; font-size: 28px; }
.mcal-tools { justify-content: center; margin: 10px 0 14px; }
.mcal-tools .btn { font-size: 13px; }
.mcal-week, .mcal-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; text-align: center; }
.mcal-week { color: var(--muted); font-size: 12px; margin-bottom: 6px; }
.mcal-week span:nth-child(n+6) { color: #b34e42; }
.mcal-days button { border: 0; background: transparent; color: var(--text); border-radius: 12px; min-width: 0; height: 48px; padding: 6px 0 4px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; font: inherit; cursor: pointer; }
.mcal-days button[aria-current] { box-shadow: inset 0 0 0 1px #2d7897; font-weight: 700; }
.mcal-days button[aria-pressed=true] { color: white; background: #173b64; }
.mcal-days button:focus-visible { outline: 2px solid #3185b7; outline-offset: 1px; }
.mcal-dots { display: flex; gap: 3px; min-height: 5px; }
.mcal-task-dot, .mcal-meeting-dot { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: #2286bc; }
.mcal-meeting-dot { background: #dd8a35; }
.mcal-days button[aria-pressed=true] .mcal-task-dot { background: #82d2ff; }
.mcal-days button[aria-pressed=true] .mcal-meeting-dot { background: #ffd094; }
.mcal-legend { justify-content: center; font-size: 12px; color: var(--muted); margin-top: 16px; }
.mcal-legend span { display: flex; gap: 6px; align-items: center; }
.mcal-count { color: var(--muted); font-size: 13px; margin: 14px 0 6px; }
.mcal-status { color: var(--muted); font-size: 12px; overflow-wrap: anywhere; min-height: 18px; }
.mcal-filters { display: flex; gap: 6px; margin: 16px 0; }
.mcal-filters .btn { flex: 1; padding: 8px 4px; font-size: 13px; }
.mcal-filters [aria-pressed=true] { background: #e0edf7; border-color: #adc9df; color: #173b64; }
.mcal-selected { font-size: 18px; text-transform: capitalize; margin: 18px 0 12px; }
.mcal-agenda-list { display: grid; gap: 10px; }
.mcal-event { display: block; padding: 15px; border: 1px solid var(--border); border-left: 4px solid #2286bc; border-radius: 14px; background: var(--surface, #fff); color: var(--text); text-decoration: none; overflow-wrap: anywhere; }
.mcal-meeting { border-left-color: #dd8a35; }
.mcal-event-meta { flex-wrap: wrap; color: var(--muted); font-size: 12px; }
.mcal-event h3 { font-size: 16px; margin: 9px 0; }
.mcal-event p { font-size: 14px; margin: 6px 0; }
.mcal-event small { color: var(--muted); }
.mcal-event .mcal-overdue { color: #b32638; }
.mcal-event .mcal-time { font-weight: 600; }
.mcal-event summary { padding: 10px 0; cursor: pointer; font-size: 14px; }
.mcal-agenda { white-space: pre-wrap; }
.mcal-event-actions { justify-content: flex-start; flex-wrap: wrap; margin-top: 12px; }
.mcal-event-actions .btn { font-size: 13px; }
.mcal-empty { text-align: center; padding: 24px 12px; border: 1px dashed var(--border); border-radius: 14px; color: var(--muted); }