.native-date-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.visual-calendar {
  margin: 12px 0 18px;
  padding: 14px;
  border: 1px solid #d9e3ea;
  border-radius: 18px;
  background: #f9fcff;
}

.calendar-label-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 14px;
}

.date-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 34px;
  padding: 0 12px;
  border-radius: 999px;
  background: #e9f7f3;
  border: 1px solid #a7d4ca;
  color: #0f544a;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
}

.calendar-topbar {
  display: grid;
  grid-template-columns: 38px 1fr 38px;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

.calendar-month {
  text-align: center;
  font-size: 17px;
  text-transform: lowercase;
}

.calendar-nav {
  width: 38px;
  min-width: 38px;
  min-height: 38px;
  border-radius: 999px;
  border: 1px solid #c8d8d0;
  padding: 0;
  font-size: 24px;
  line-height: 1;
  background: #fff;
  color: #146c5f;
}

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

.calendar-weekdays {
  margin-bottom: 8px;
}

.calendar-weekdays span {
  text-align: center;
  font-size: 12px;
  text-transform: lowercase;
  font-weight: 700;
  color: #64748b;
}

.calendar-day {
  width: 100%;
  min-width: 36px;
  max-width: 44px;
  aspect-ratio: 1;
  min-height: 36px;
  margin: 0 auto;
  border-radius: 999px;
  border: 1px solid #d5e1e8;
  background: #fff;
  color: #17202a;
  font-size: 14px;
  font-weight: 700;
  padding: 0;
}

.calendar-day:hover:not(:disabled) {
  border-color: #146c5f;
  background: #eef8f5;
}

.calendar-day.is-today {
  border-color: #146c5f;
  color: #0f544a;
}

.calendar-day.is-selected {
  background: #2563eb;
  color: #fff;
  border-color: #2563eb;
}

.calendar-day.is-out-month {
  opacity: .45;
}

.calendar-day.is-disabled {
  background: #f2f6f8;
  color: #9aa8b8;
  border-color: #e2e8f0;
  cursor: not-allowed;
}

.calendar-day.is-out-month.is-disabled {
  opacity: .35;
}

@media (max-width: 760px) {
  .visual-calendar { padding: 12px; }
  .calendar-weekdays,
  .calendar-grid { gap: 4px; }
  .calendar-day { min-width: 34px; min-height: 34px; font-size: 13px; }
}

@media (prefers-color-scheme: dark) {
  .visual-calendar {
    background: #121d20;
    border-color: #2d3b3e;
  }

  .calendar-label-row { color: #edf5f3; }

  .date-badge {
    background: #173430;
    color: #b2f0df;
    border-color: #2f665d;
  }

  .calendar-month,
  .calendar-weekdays span { color: #b4c6c4; }

  .calendar-nav {
    background: #10191b;
    color: #9be4d1;
    border-color: #2d3b3e;
  }

  .calendar-day {
    background: #10191b;
    border-color: #2d3b3e;
    color: #edf5f3;
  }

  .calendar-day:hover:not(:disabled) {
    background: #173430;
    border-color: #46b39e;
  }

  .calendar-day.is-selected {
    background: #1d4ed8;
    border-color: #3b82f6;
    color: #fff;
  }

  .calendar-day.is-disabled {
    background: #0f1517;
    border-color: #243335;
    color: #4f5f61;
  }
}