@media (max-width: 900px) {
  .container {
    width: min(100%, 100%);
    padding: 26px 18px;
  }

  .user-grid,
  .date-config-grid {
    grid-template-columns: 1fr;
  }

  .calendar-header,
  .calendar-status-row,
  .terms-dialog-head,
  .terms-dialog-actions,
  .date-config-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .hero-actions {
    justify-content: stretch;
  }

  .hero-action-btn {
    width: 100%;
    min-width: 0;
  }

  .calendar-nav {
    width: 100%;
  }

  .calendar-nav-btn,
  .terms-link-btn {
    flex: 1 1 auto;
  }
}

@media (max-width: 640px) {
  body {
    padding: 10px;
  }

  .container {
    width: min(100%, calc(100vw - 20px));
    border-radius: 18px;
    padding: 20px 12px;
  }

  h1 {
    font-size: 30px;
  }

  .panel {
    padding: 16px;
    border-radius: 16px;
  }

  .calendar-grid {
    gap: 6px;
  }

  .calendar-day {
    min-height: 88px;
    padding: 8px;
    border-radius: 12px;
  }

  .calendar-day-number {
    font-size: 16px;
  }

  .calendar-room-state,
  .calendar-day-note {
    font-size: 11px;
  }

  .terms-dialog,
  .manual-dialog {
    width: calc(100vw - 12px);
  }

  .terms-dialog-body,
  .terms-dialog-head,
  .terms-dialog-actions,
  .manual-dialog-body {
    padding: 14px;
  }

  .manual-embed-wrap,
  .manual-pdf-frame,
  .terms-iframe {
    min-height: 56vh;
    height: 56vh;
  }
}