body {
  font-family: system-ui, sans-serif;
  background: #f4f6f8;
  margin: 0;
  padding: 40px;
}

.container {
  max-width: 700px;
  margin: auto;
}

h1 {
  margin-bottom: 20px;
}

.controls {
  display: flex;
  gap: 10px;
  margin-bottom: 20px;
}

input {
  padding: 10px;
  flex: 1;
  width: 100%;
}

textarea {
  width: 100%;
  padding: 10px;
  margin-bottom: 10px;
  resize: vertical;
}

button {
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: #333;
  color: white;
  cursor: pointer;
}

.notes {
  list-style: none;
  padding: 0;
}

.note {
  background: white;
  padding: 14px;
  margin-bottom: 12px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.note-title {
  font-weight: bold;
  margin-bottom: 10px;
}

.note-author {
  font-weight: 500;
  margin-bottom: 10px;
}

.note-actions {
  margin-top: 20px;
  display: flex;
  gap: 8px;
}

.formatDate {
  margin-top: 10px;
}

/* edit mode */

.title-edit-input,
.author-edit-input,
.body-edit-input {
  width: 100%;
  padding: 10px;
  border: 2px solid #add8e6;
  border-radius: 6px;
  font-size: 14px;
  margin-bottom: 10px;
  transition: all 0.2s ease;
}

.title-edit-input:focus,
.author-edit-input:focus,
.body-edit-input:focus {
  outline: none;
  border-color: #4f8cff;
  box-shadow: 0 0 0 2px rgba(79, 140, 255, 0.15);
}

.note-editing {
  background: #fdfefe;
  /* border: 2px solid #4f8cff;    */
  padding: 16px;
  border-radius: 8px;
}

.pinned {
  border-left: 4px solid gold;
}

[data-action="save"] {
  background: #2ecc71;
}
button[data-action="save"]:hover {
  background: #27ae60;
}
button[data-action="cancel"] {
  background: #e74c3c;
}
button[data-action="cancel"]:hover {
  background: #c0392b;
}

#error-message {
  color: #b00020;
  /* background: #ffe6; */
  padding: 8px 12px;
  border-radius: 6px;
  margin-bottom: 10px;
  font-size: 14px;
}

.empty-message {
  text-align: center;
  padding: 50px 20px;
  margin: 40px auto;
  max-width: 420px;

  background: #fafafa;
  border: 2px dashed #e2e2e2;
  border-radius: 14px;

  color: #555;
}

.empty-icon {
  font-size: 40px;
  margin-bottom: 10px;
  opacity: 0.7;
}

.empty-message h3 {
  font-size: 1.3rem;
  margin-bottom: 6px;
  font-weight: 600;
}

.empty-message p {
  font-size: 0.95rem;
  color: #888;
}