.mini-month-card {
  display: grid;
  gap: 12px;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 14px;
  background: #fff;
}

.mini-month-card header {
  display: grid;
  gap: 10px;
}

.mini-month-nav {
  display: grid;
  grid-template-columns: 24px 24px minmax(0, 1fr) 24px 24px;
  gap: 2px;
  align-items: center;
}

.mini-month-nav strong {
  min-width: 0;
  text-align: center;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.82rem;
}

.mini-month-nav button {
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border: 1px solid var(--border);
  border-radius: 999px;
  background: #fff;
  color: var(--primary);
  font-size: 0.9rem;
  font-weight: 900;
}

.mini-month-nav button:hover {
  background: var(--panel-soft);
  border-color: rgba(15, 118, 110, 0.24);
}

.mini-month-weekdays,
.mini-month-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 5px;
}

.mini-month-weekdays {
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 800;
  text-align: center;
}

.mini-month-grid button {
  min-width: 0;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  font-weight: 800;
}

.mini-month-grid button:hover {
  background: #f8faf9;
  color: var(--primary);
}

.mini-month-grid button.active {
  background: var(--panel-soft);
  color: var(--primary);
}

.mini-month-grid button.is-outside {
  color: rgba(17, 24, 39, 0.36);
}