body {
  font-family: "Segoe UI", sans-serif;
  padding: 2rem;
  max-width: 750px;
  margin: auto;
  background-color: #e6f1f8;
  color: #333;
}
h1 {
  text-align: center;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}
.intro {
  text-align: center;
  font-size: 1.1rem;
  margin-bottom: 1rem;
}
#messaggio {
  text-align: center;
  font-style: italic;
  font-size: 1.05rem;
  margin-bottom: 0.75rem;
  color: #2c3e50;
}
.filters {
  text-align: center;
  margin-bottom: 2rem;
}
.toggle-container {
  text-align: center;
  margin: 1.5rem 0;
}
.entry {
  margin-bottom: 1rem;
  padding: 1rem;
  border-left: 4px solid #3498db;
  background: white;
  box-shadow: 0 1px 2px rgba(0,0,0,0.05);
  border-radius: 6px;
}
.entry.today {
  border-left-color: #5dade2;
  background-color: #d6eaf8;
}
.entry h3 {
  margin: 0 0 0.3rem;
  font-size: 1.05rem;
}
.meta {
  font-size: 0.85rem;
  color: #666;
}
.hidden {
  display: none;
}
.month {
  margin-bottom: 1.5rem;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: white;
  box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.month-header {
  padding: 0.8rem 1rem;
  background: #3498db;
  color: white;
  cursor: pointer;
  border-radius: 6px 6px 0 0;
  font-weight: bold;
}
.month .days {
  display: none;
  padding: 1rem;
}
.highlight {
  outline: 3px solid #5dade2;
  outline-offset: 4px;
}
.top-link {
  text-align: center;
  margin: 3rem 0 1rem;
}
.top-link a {
  text-decoration: none;
  font-size: 1rem;
  color: #2c3e50;
}
@media (max-width: 600px) {
  .filters label {
    display: block;
    margin: 0.5rem 0;
  }
  .entry {
    padding: 0.8rem;
  }
}

/* === Pastel animated background (gentle & slow) === */
body {
  min-height: 100vh;
  background:
    linear-gradient(120deg, #f3f7ff, #fdefff, #f2fff6, #ffd6d6, #dfffe2, #d6ebff, #f0e0ff, #ffe9d6, #fff6cc),
    linear-gradient(300deg, rgba(255, 223, 239, .55), rgba(230, 240, 255, .55), rgba(242, 255, 246, .55), rgba(255, 214, 214, .50), rgba(223, 255, 226, .50), rgba(214, 235, 255, .50), rgba(240, 224, 255, .50), rgba(255, 233, 214, .50), rgba(255, 246, 204, .45));
  background-size: 400% 400%, 500% 500%;
  animation: pastelBreath1 3s ease-in-out infinite, pastelBreath2 3s ease-in-out infinite;
}

  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* === Hug button & feedback === */
.hug-actions { flex-direction: column; align-items: center; justify-content:center;  display:flex; align-items:center; gap:.75rem; flex-wrap:wrap;    margin: 0.25rem 0 1.4rem; }
.hug-btn {
  border: 0;
  padding: .65rem 1rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .2s ease, opacity .2s ease;
  background: linear-gradient(135deg, #ffd9e6, #e6f0ff);
}
.hug-btn:hover { transform: translateY(-1px); box-shadow: 0 10px 28px rgba(0,0,0,.12); }
.hug-btn:active { transform: translateY(0); opacity:.9; }
.hug-feedback {
  min-height: 1.4rem;
  font-style: italic;
  opacity: 0;
  transition: opacity .25s ease;
 margin-top: .45rem; }

/* === Flying hearts === */
.heart {
  position: fixed;
  left: 0; top: 0;
  pointer-events: none;
  font-size: 22px;
  will-change: transform, opacity;
  animation: floatUp 1800ms ease-in forwards;
  text-shadow: 0 3px 10px rgba(0,0,0,.1);
}
@keyframes floatUp {
  0%   { transform: translate(var(--x,0px), var(--y,0px)) scale(0.9) rotate(0deg); opacity: .95; }
  60%  { transform: translate(calc(var(--x,0px) + 8px), calc(var(--y,0px) - 80px)) scale(1.05) rotate(8deg); opacity: .9; }
  100% { transform: translate(calc(var(--x,0px) + 12px), calc(var(--y,0px) - 140px)) scale(1) rotate(14deg); opacity: 0; }
}

/* Slight polish for top-link visibility on pastel bg */
.top-link a { background: rgba(255,255,255,.6); padding:.3rem .6rem; border-radius: 999px; }

#sendHugBtn, .hug-actions { flex-direction: column; align-items: center; text-align: center;    margin: 0.25rem 0 1.4rem; }

.hug-actions { flex-direction: column; align-items: center; justify-content: center;    margin: 0.25rem 0 1.4rem; }

.hug-btn { text-transform: uppercase; letter-spacing: .4px; }

.hug-feedback {  text-align: center;  margin-top: .45rem; }


.read-messages {
  display: flex;
  justify-content: center;
  margin: 0.5rem 0 1.25rem;
}

.read-btn {
  border: 0;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  background: linear-gradient(135deg, #ffd9e6, #e6f0ff);
  box-shadow: 0 6px 20px rgba(0,0,0,.08);
  transition: transform .08s ease, box-shadow .18s ease, opacity .18s ease;
}

.read-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 10px 26px rgba(0,0,0,.14);
}

.read-btn:active {
  transform: translateY(0);
  opacity: .9;
}