* { box-sizing: border-box; }
:root { --turq: #0fb5ae; --turq-dark: #087f8c; --sand: #f6e3b4; --sand-light: #fff6dc; --coral: #ff7e5f; --palm: #2e8b57; }
body { margin: 0; font-family: "Trebuchet MS", "Segoe UI", system-ui, sans-serif; color: #0b4f5a;
  background: linear-gradient(180deg, #7fe0dc 0, #bdf0ea 160px, var(--sand-light) 260px, var(--sand) 100%) fixed; min-height: 100vh; }
main { max-width: 720px; margin: 0 auto; padding: 16px; }
main::before, main::after { content: "🌴"; position: fixed; bottom: 0; font-size: 72px; opacity: .85; pointer-events: none; z-index: 0; }
main::before { left: 4px; }
main::after { right: 4px; transform: scaleX(-1); }
main > * { position: relative; z-index: 1; }
h1, h2 { margin: 0 0 12px; color: var(--turq-dark); }
form, .note, header { background: rgba(255, 250, 235, .95); border: 2px solid var(--turq); border-radius: 16px; padding: 16px; margin-bottom: 12px; box-shadow: 0 3px 8px rgba(8,127,140,.2); }
header { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; background: linear-gradient(90deg, var(--turq), #5fd6cc); border-color: var(--turq-dark); }
header h1 { color: #fff; margin: 0; text-shadow: 1px 1px 0 var(--turq-dark); }
.top-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.note-count { margin: 0; padding: 6px 14px; border-radius: 999px; background: var(--sand); color: var(--turq-dark); font-weight: bold; border: 2px solid var(--sand-light); }
label { display: block; margin-bottom: 10px; font-size: 14px; }
input, textarea { display: block; width: 100%; margin-top: 4px; padding: 8px; font: inherit; border: 2px solid #8fd8d2; border-radius: 10px; background: #fffdf5; }
input:focus, textarea:focus { outline: 2px solid var(--coral); }
textarea { min-height: 120px; resize: vertical; }
button { padding: 8px 14px; font: inherit; border: 0; border-radius: 999px; background: var(--turq-dark); color: #fff; cursor: pointer; margin-right: 6px; }
button:hover { background: var(--turq); }
button.secondary { background: #c9a566; }
button.danger { background: var(--coral); }
.error { color: #b00020; margin: 0 0 10px; }
.note { border-left: 8px solid var(--sand); }
.note p { white-space: pre-wrap; overflow-wrap: anywhere; }