.detailed-calendar-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:18px;
  align-items:stretch;
}
.month-detail-card{
  min-width:0;
  height:100%;
  display:flex;
  flex-direction:column;
  background:var(--surface,#fff);
  border:1px solid var(--line,#dfe4ea);
  border-radius:10px;
  padding:18px;
  box-shadow:var(--shadow,0 6px 18px rgba(24,39,75,.06));
}
.month-detail-header{margin-bottom:16px}
.month-detail-header h2{margin:0;font-size:20px;line-height:1.2}
.month-weekdays,.month-days{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
}
.month-weekdays{margin-bottom:6px}
.month-weekdays span{
  min-width:0;
  padding:4px 0;
  color:var(--muted,#5e6b7a);
  font-size:11px;
  font-weight:600;
  text-align:center;
}
.month-days{
  gap:4px;
  grid-template-rows:repeat(6,36px);
  min-height:236px;
}
.calendar-day,.calendar-empty{
  min-width:0;
  width:100%;
  height:36px;
}
.calendar-day{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  border-radius:6px;
  font-size:13px;
  font-weight:600;
}
.calendar-day.is-weekend{
  background:var(--soft,#eef3f8);
  color:var(--muted,#5e6b7a);
}
.calendar-day.is-holiday{
  background:var(--primary,#245f9e);
  color:#fff;
}
.day-moon-marker{
  position:absolute;
  right:2px;
  bottom:2px;
  line-height:0;
}
.day-moon-marker .moon-icon{width:7px;height:7px;border-width:1px}
.moon-icon{
  --moon-dark:#172033;
  position:relative;
  display:inline-block;
  flex:0 0 auto;
  width:16px;
  height:16px;
  border:1px solid #8b96a5;
  border-radius:50%;
  overflow:hidden;
  background:#fff;
}
.moon-icon-new{background:var(--moon-dark);border-color:var(--moon-dark)}
.moon-icon-full{background:#fff;border-color:var(--moon-dark)}
.moon-icon-first{
  background:linear-gradient(90deg,var(--moon-dark) 0 50%,#fff 50% 100%);
  border-color:var(--moon-dark)
}
.moon-icon-last{
  background:linear-gradient(90deg,#fff 0 50%,var(--moon-dark) 50% 100%);
  border-color:var(--moon-dark)
}
.month-detail-section{
  border-top:1px solid var(--line,#dfe4ea);
  margin-top:16px;
  padding-top:14px;
}
.month-detail-label{
  margin-bottom:10px;
  color:var(--muted,#5e6b7a);
  font-size:11px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
}
.moon-section{min-height:118px}
.moon-phase-list{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  gap:9px 12px;
}
.moon-phase-item{
  min-width:0;
  display:flex;
  align-items:center;
  gap:8px;
}
.moon-phase-item>div{
  min-width:0;
  display:flex;
  flex-direction:column;
}
.moon-phase-item strong{
  overflow:hidden;
  font-size:12px;
  line-height:1.25;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.moon-phase-item span:not(.moon-icon){
  color:var(--muted,#5e6b7a);
  font-size:11px;
}
.holidays-section{flex:1 1 auto}
.month-holiday-list{display:grid;gap:4px}
.month-holiday-item{
  min-width:0;
  display:grid;
  grid-template-columns:32px minmax(0,1fr);
  gap:9px;
  align-items:start;
  padding:7px 0;
}
.month-holiday-item+.month-holiday-item{
  border-top:1px solid var(--line,#dfe4ea)
}
.month-holiday-date{
  color:var(--primary,#245f9e);
  font-size:13px;
  font-weight:700;
}
.month-holiday-copy{
  min-width:0;
  display:flex;
  flex-direction:column;
  gap:1px;
}
.month-holiday-copy strong{
  font-size:13px;
  line-height:1.3;
  overflow-wrap:anywhere;
}
.month-holiday-copy span{
  color:var(--muted,#5e6b7a);
  font-size:11px;
}
.month-empty-note,.calendar-data-note{
  color:var(--muted,#5e6b7a);
  font-size:12px;
  line-height:1.5;
}
.month-empty-note{margin:0}
.calendar-data-note{margin-top:18px}
.calendar-location-panel{margin:22px 0 26px;padding:18px}
.calendar-location-panel .filters{align-items:end}

@media(max-width:980px){
  .detailed-calendar-grid{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:14px;
  }
}
@media(max-width:640px){
  .detailed-calendar-grid{
    grid-template-columns:1fr;
    gap:12px;
  }
  .month-detail-card{padding:16px}
  .month-detail-header h2{font-size:19px!important}
  .month-days{
    grid-template-rows:repeat(6,40px);
    min-height:260px;
  }
  .calendar-day,.calendar-empty{height:40px}
  .calendar-day{font-size:12px}
  .moon-phase-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  .moon-phase-item strong{font-size:11px}
  .moon-section{min-height:116px}
  .calendar-location-panel{padding:16px!important}
}
@media(max-width:360px){
  .moon-phase-list{grid-template-columns:1fr}
  .moon-section{min-height:auto}
}