:root{
  --bg:#ffffff; --bg-soft:#f7f8fa; --line:#e8e9ee;
  --text:#1f2937; --muted:#6b7280;
  --accent:#0b6efd; --accent-ink:#ffffff;
  --danger:#ef4444; --ok:#16a34a;
  --radius:14px; --shadow:0 8px 28px rgba(0,0,0,.06);
}




/* ===== Top actions ===== */
.notes-actions{
  display:flex; gap:10px; align-items:center; justify-content:center;
  padding:8px 12px 16px;
}
.btn{
  border:1px solid var(--line); background:#fff; color:#111827;
  padding:10px 14px; border-radius:12px; cursor:pointer;
  display:inline-flex; align-items:center; gap:10px;
  transition:box-shadow .12s ease, transform .08s ease, border-color .12s ease, background .12s ease;
  font-weight:600;
}
.btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.btn:disabled{ opacity:.5; cursor:not-allowed; }
.btn-primary{ background:var(--accent); color:var(--accent-ink); border-color:var(--accent); }
.btn-primary:hover{ filter:brightness(0.98); }
.btn-neutral{ background:#fff; color:#111827; border-color:var(--line); }

/* ===== list wrapper ===== */
.notes-wrap{ width:100%; margin:0 auto; max-width:1100px; }
.notes-table{ width:100%; border-collapse:separate; border-spacing:0; }
.notes-table td{ border:none; padding:8px 12px; }

/* ===== card ===== */
.note-card{
  background:#fff; border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow);
  padding:14px; display:flex; flex-direction:column; gap:10px;
}

.note-card__head{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding-bottom:6px; border-bottom:1px dashed var(--line);
}
.note-card__meta{ color:var(--muted); font-size:12px; display:flex; gap:6px; align-items:center; }
.note-card__stamp{ white-space:nowrap; }
.note-card__sep{ color:#c0c4cc; }
.note-card__user{ font-weight:600; color:#374151; }

.note-card__actions{ display:flex; gap:8px; align-items:center; }

/* ícones redondos */
.icon-btn{
  width:38px; height:38px; display:inline-flex; align-items:center; justify-content:center;
  border-radius:12px; border:1px solid var(--line); background:#fff; color:#111827;
  transition:box-shadow .12s ease, transform .08s ease, border-color .12s ease, background .12s ease, color .12s ease;
  cursor:pointer;
}
.icon-btn:hover{ box-shadow:var(--shadow); transform:translateY(-1px); }
.icon-btn:disabled{ opacity:.5; cursor:not-allowed; }
.icon-btn--danger{ color:#b91c1c; border-color:#f2cccc; background:#fff7f7; }
.icon-btn--danger:hover{ border-color:#ef9a9a; background:#fff2f2; }

/* corpo da anotação */
.note-card__body{
  color:#111827; line-height:1.55;
  overflow-wrap:anywhere; word-break:break-word;
}
.note-card__body .label{ color:#374151; font-weight:700; }

/* rodapé / anexos */
.note-card__foot{
  display:flex; flex-direction:column; gap:8px; padding-top:6px; border-top:1px dashed var(--line);
}
.link{
  border:none; background:transparent; padding:0; color:#0b6efd; cursor:pointer;
  display:inline-flex; align-items:center; gap:8px; font-weight:600;
}
.link:hover{ text-decoration:underline; }
.note-card__attachments{ padding:6px 0 2px; }

/* modal legado */
.box3{
  position:fixed; inset:auto 16px 16px auto; max-width:min(760px,92vw);
  max-height:80vh; overflow:auto; display:none; z-index:120; margin:0;
  background:#fff; color:var(--text); border:1px solid var(--line);
  border-radius:12px; box-shadow:var(--shadow);
}

/* responsivo */
@media (max-width: 720px){
  .notes-actions{ flex-wrap:wrap; }
  .note-card{ padding:12px; }
}