@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+SC:wght@400;500;700&display=swap');

body {
  font-family: 'Noto Sans SC', system-ui, sans-serif;
}

.calendar-day {
  height: 108px;
  transition: all 0.2s;
}

.calendar-day:hover {
  background-color: #1f2937;
  transform: scale(1.02);
}

.calendar-day.other-month {
  opacity: 0.4;
  cursor: default;
}

.calendar-day.today {
  box-shadow: 0 0 0 3px #10b981 inset;
}

.toast {
  animation: toastIn 0.3s ease forwards, toastOut 0.3s ease 3.2s forwards;
}

@keyframes toastIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes toastOut {
  to {
    opacity: 0;
    transform: translateY(20px);
  }
}

.heatmap-grid {
  display: grid;
  grid-template-rows: repeat(7, 1fr);
  grid-auto-flow: column;
  gap: 3px;
  padding: 10px;
  height: 128px;
  min-width: 100%;
}

.heatmap-cell {
  width: 12px;
  height: 12px;
  border-radius: 2px;
  background-color: #18181b;
  position: relative;
}

.heatmap-cell:hover::after {
  content: attr(data-date);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  background: #000;
  color: #fff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 10px;
  white-space: nowrap;
  z-index: 10;
  margin-bottom: 5px;
  pointer-events: none;
}

.level-0 {
  background-color: #18181b;
}

.level-1 {
  background-color: #064e3b;
}

.level-2 {
  background-color: #059669;
}

.level-3 {
  background-color: #10b981;
}

.level-4 {
  background-color: #34d399;
}

.auth-panel {
  box-shadow: 0 20px 80px rgba(0, 0, 0, 0.35);
}

.input-disabled {
  opacity: 0.5;
  cursor: not-allowed;
}