html[data-theme="dark"] body.dashboard-page .calendar-month-panel {
  border-color: var(--line);
  background:
    linear-gradient(180deg, rgba(112, 161, 255, 0.09), transparent 112px),
    var(--surface);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-head {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] body.dashboard-page :is(
  .calendar-month-title h2,
  .calendar-month-label,
  .calendar-month-date
) {
  color: var(--text);
}

html[data-theme="dark"] body.dashboard-page :is(
  .calendar-month-title span,
  .calendar-month-status,
  .calendar-month-weekdays span,
  .calendar-month-weekdays span:nth-last-child(-n + 2)
) {
  color: var(--muted);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-nav button {
  border-color: var(--line);
  color: var(--muted);
  background: var(--surface-2);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-nav button:hover:not(:disabled),
html[data-theme="dark"] body.dashboard-page .calendar-month-nav button:focus-visible {
  border-color: var(--line-strong);
  color: var(--accent-2);
  background: var(--surface-3);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-weekdays {
  border-bottom-color: var(--line);
  background: var(--surface-2);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-week {
  border-bottom-color: var(--line);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-day {
  border-right-color: var(--line);
  background: var(--surface);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-day.is-weekend {
  background: rgba(112, 161, 255, 0.08);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-day.is-outside {
  background: var(--surface-2);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-day.is-outside .calendar-month-date {
  color: var(--soft);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-day.is-today {
  background: rgba(112, 161, 255, 0.13);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-day.is-today .calendar-month-date {
  color: #101722;
  background: var(--accent);
  box-shadow: 0 0 0 3px rgba(112, 161, 255, 0.18);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-event {
  border-color: rgba(112, 161, 255, 0.62);
  color: #b8d0ff;
  background: rgba(112, 161, 255, 0.2);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-event[data-tone="1"] {
  border-color: rgba(99, 212, 155, 0.62);
  color: #9ae8bd;
  background: rgba(99, 212, 155, 0.16);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-event[data-tone="2"] {
  border-color: rgba(190, 163, 255, 0.58);
  color: #d5c4ff;
  background: rgba(174, 139, 255, 0.16);
}

html[data-theme="dark"] body.dashboard-page .calendar-month-empty {
  color: var(--muted);
}