/* ============================================
   模块④ 随笔 / 她的空间 —— 自己的样式（跟 base.css 分开）
   ============================================ */

.notes {
  display: flex; flex-direction: column; gap: 24px;
  max-width: 720px;
}

.notes-head { display: flex; flex-direction: column; gap: 8px; }
.notes-title {
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(26px, 4vw, 36px);
  letter-spacing: .04em;
}
.notes-sub { color: var(--muted); font-size: 14px; }

.notes-form {
  display: flex; flex-direction: column; gap: 12px;
  padding: 18px;
  border: 1px solid var(--smoked-edge);
  border-radius: var(--radius-card);
  background: var(--smoked-fill);
  box-shadow: var(--smoked-shadow);
}
.notes-input {
  width: 100%;
  min-height: 84px;
  padding: 12px 14px;
  resize: vertical;
  background: rgb(238 233 224 / 4%);
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  color: var(--text);
  font: inherit; font-size: 15px; line-height: 1.6;
}
.notes-input:focus { border-color: var(--signal); }
.notes-input::placeholder { color: var(--dim); }

.notes-form-row { display: flex; gap: 10px; justify-content: flex-end; }
.notes-send {
  min-height: 40px; padding: 0 24px;
  background: var(--signal); color: var(--bg);
  border-radius: var(--pill);
  font-size: 14px; letter-spacing: .15em; text-indent: .15em;
  transition: background .2s, transform .15s;
}
.notes-send:hover { background: #e6d4ae; }
.notes-send:active { transform: translateY(1px); }
.notes-export {
  min-height: 40px; padding: 0 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--pill);
  color: var(--muted); font-size: 13px;
  transition: color .2s, border-color .2s;
}
.notes-export:hover { color: var(--text); border-color: var(--signal); }

.notes-list { display: flex; flex-direction: column; gap: 14px; list-style: none; }
.note {
  position: relative;
  padding: 16px 46px 16px 18px;
  border: 1px solid var(--smoked-edge);
  border-radius: var(--radius-card);
  background: var(--smoked-fill);
  box-shadow: var(--smoked-shadow);
}
.note-time {
  display: block;
  font-family: var(--font-mono);
  font-size: 10.5px; letter-spacing: .12em;
  color: var(--signal);
  margin-bottom: 8px;
}
.note-text { font-size: 15px; line-height: 1.75; white-space: pre-line; }
.note-del {
  position: absolute; top: 12px; right: 12px;
  width: 26px; height: 26px; border-radius: 50%;
  color: var(--dim); font-size: 16px; line-height: 1;
  display: grid; place-items: center;
  transition: color .2s, background .2s;
}
.note-del:hover { color: #ffb3a4; background: rgb(255 179 164 / 10%); }
.notes-empty { color: var(--dim); font-size: 14px; }

.notes-caveat {
  font-family: var(--font-mono);
  font-size: 11px; letter-spacing: .04em;
  color: var(--dim);
  line-height: 1.8;
}