* { box-sizing: border-box; margin: 0; }

body {
  font-family: -apple-system, "SF Pro Rounded", system-ui, sans-serif;
  background: #eaf5ea;
  color: #2d3a2d;
  min-height: 100vh;
  padding-bottom: env(safe-area-inset-bottom);
}

header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(12px + env(safe-area-inset-top)) 20px 12px;
}

h1 { font-size: 1.6rem; }

.icon-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 4px;
}

main { padding: 0 16px 32px; max-width: 480px; margin: 0 auto; }

#plant-list { list-style: none; padding: 0; }

.plant-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: #ffffff;
  border-radius: 20px;
  padding: 12px 14px;
  margin-bottom: 12px;
  box-shadow: 0 2px 8px rgba(45, 58, 45, 0.06);
}

.plant-photo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  background: #d8ecd8;
  border: 3px solid #d8ecd8;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  cursor: pointer;
}

.plant-card.due .plant-photo { border-color: #f4b942; }

.plant-info { flex: 1; min-width: 0; }
.plant-name { font-weight: 600; font-size: 1.05rem; }
.plant-due { font-size: 0.85rem; color: #6b7d6b; }
.plant-card.due .plant-due { color: #c07a00; font-weight: 600; }

.water-btn {
  background: #cfe8f7;
  border: none;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}
.water-btn:active { transform: scale(0.92); }

.snooze-btn {
  background: #eef3ee;
  border: none;
  border-radius: 14px;
  padding: 10px 14px;
  font-size: 1.2rem;
  cursor: pointer;
  flex-shrink: 0;
}
.snooze-btn:active { transform: scale(0.92); }

.big-btn {
  display: block;
  width: 100%;
  background: #5c9e5c;
  color: white;
  border: none;
  border-radius: 20px;
  padding: 14px;
  font-size: 1.05rem;
  font-weight: 600;
  cursor: pointer;
  margin-top: 8px;
}

.empty { text-align: center; color: #6b7d6b; padding: 32px 0; }

dialog {
  border: none;
  border-radius: 24px;
  padding: 24px;
  width: min(92vw, 400px);
  margin: auto;
}
dialog::backdrop { background: rgba(45, 58, 45, 0.35); }

dialog h2 { margin-bottom: 16px; }

dialog form label {
  display: block;
  margin-bottom: 14px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #4a5c4a;
}

dialog input[type="text"],
dialog input[type="password"],
dialog input[type="date"],
dialog input[type="number"] {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1.5px solid #d8ecd8;
  border-radius: 12px;
  font-size: 1rem;
  background: #f7fbf7;
}
dialog input[type="number"] { width: 80px; display: inline-block; }
.inline { display: block; margin-top: 4px; font-weight: 400; }

.photo-label {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 96px;
  height: 96px;
  border-radius: 50%;
  background: #d8ecd8;
  margin: 0 auto 16px;
  cursor: pointer;
  overflow: hidden;
  text-align: center;
  font-size: 0.8rem;
  color: #4a5c4a;
}
.photo-label img { width: 100%; height: 100%; object-fit: cover; }

.dialog-buttons { display: flex; gap: 8px; margin-top: 20px; }
.spacer { flex: 1; }

.dialog-buttons button {
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  background: #eef3ee;
}
.dialog-buttons .primary, #enable-notifs-btn { background: #5c9e5c; color: white; }
.dialog-buttons .danger { background: #f7dede; color: #a33; }

#enable-notifs-btn, #test-push-btn {
  border: none;
  border-radius: 12px;
  padding: 10px 16px;
  font-size: 0.95rem;
  cursor: pointer;
  margin-bottom: 16px;
}
#test-push-btn { background: #cfe8f7; margin-left: 8px; }

.hint { font-size: 0.8rem; color: #6b7d6b; margin-bottom: 10px; }
.hint code { background: #eef3ee; padding: 1px 4px; border-radius: 4px; }