.note-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  align-items: start;
}

.note-card {
  min-height: 210px;
  padding: 21px;
  border: 1px solid rgba(33, 29, 22, .08);
  border-radius: 17px;
  background: var(--note-color, #fff4bf);
  box-shadow: 0 10px 30px rgba(31, 26, 18, .06);
  transition: transform .2s, box-shadow .2s;
}

.note-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px rgba(31, 26, 18, .11); }
.note-head { display: flex; align-items: start; gap: 10px; }
.note-head h3 { flex: 1; margin: 0; font: 500 23px/1.2 Georgia, serif; overflow-wrap: anywhere; }
.pin-mark { color: #8f7624; font-size: 12px; }
.note-content { margin: 18px 0 24px; color: #4e493f; white-space: pre-wrap; overflow-wrap: anywhere; font-size: 14px; line-height: 1.6; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 8; overflow: hidden; }
.note-foot { display: flex; align-items: center; margin-top: auto; color: rgba(42, 37, 29, .5); font-size: 10px; }
.note-actions { display: flex; gap: 3px; margin-left: auto; }
.note-actions button { width: 30px; height: 30px; border: 0; border-radius: 8px; background: rgba(255, 255, 255, .35); color: #625c52; cursor: pointer; }
.note-actions button:hover { background: rgba(255, 255, 255, .7); }
.note-form textarea { min-height: 190px; }

@media (max-width: 800px) {
  .note-grid { grid-template-columns: 1fr; }
}