.reminders-app {
  min-height: 100vh;
  background: radial-gradient(circle at top left, #143238 0%, #0f2226 45%, #0a1518 100%);
}

.reminders-main {
  max-width: 860px;
  margin: 0 auto;
  padding: 20px 14px 32px;
  display: grid;
  gap: 14px;
}

.reminders-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.reminders-header-row h1 {
  margin: 0;
}

.reminders-list-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 10px;
}

.reminders-list-header h2,
.reminders-notify-card h2,
.reminders-create-card h2 {
  margin: 0 0 8px;
}

.reminders-sections {
  display: grid;
  gap: 16px;
}

.reminder-item {
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  padding: 10px;
  background: rgba(8, 16, 18, 0.6);
}

.reminder-item h4 {
  margin: 0 0 4px;
}

.reminder-meta {
  font-size: 0.9rem;
  opacity: 0.9;
}

.reminder-notes {
  margin-top: 8px;
  opacity: 0.9;
  white-space: pre-wrap;
}

.reminder-actions {
  margin-top: 10px;
}

.debug-output {
  padding: 12px;
  border-radius: 10px;
  background: rgba(8, 16, 18, 0.75);
  border: 1px solid rgba(255, 255, 255, 0.12);
  max-height: 55vh;
  overflow: auto;
}

@media (max-width: 780px) {
  .reminders-header-row {
    flex-direction: column;
  }
}