:root { --navy: #0d3b57; --sun: #f4a259; --sand: #f7f3ea; --ink: #14222e; --muted: #56697a; font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--sand); color: var(--ink); line-height: 1.55; }
header { background: var(--navy); color: #fff; display: flex; align-items: center; gap: 14px; padding: 14px 20px; }
header img { width: 44px; height: 44px; }
header div { display: flex; flex-direction: column; }
header span { color: #9fc9e0; font-size: .9rem; }
main { max-width: 720px; margin: 0 auto; padding: 28px 20px 40px; }
form { background: #fff; border-radius: 16px; padding: 22px; box-shadow: 0 6px 24px rgba(13,59,87,.08); }
form h1 { font-size: 1.35rem; margin: 0 0 14px; }
label { display: block; font-weight: 600; margin-bottom: 12px; }
input, textarea { display: block; width: 100%; margin-top: 6px; padding: 10px 12px; font: inherit; border: 1px solid #cfd9e0; border-radius: 10px; }
button { background: var(--sun); color: var(--ink); border: 0; border-radius: 999px; padding: 11px 22px; font: inherit; font-weight: 700; cursor: pointer; }
.note { color: var(--muted); font-size: .85rem; margin: 12px 0 0; }
.error { background: #fde8e4; color: #8a2a17; padding: 10px 12px; border-radius: 10px; }
h2 { margin: 32px 0 12px; font-size: 1.15rem; color: var(--muted); }
.entries { list-style: none; padding: 0; margin: 0; }
.entries li { background: #fff; border-radius: 14px; padding: 14px 18px; margin-bottom: 10px; }
.entries .who { font-weight: 700; }
.entries time { font-weight: 400; color: var(--muted); font-size: .85rem; margin-left: 8px; }
.entries p { margin: 4px 0 0; white-space: pre-wrap; }
.entries .empty { color: var(--muted); text-align: center; }
footer { text-align: center; color: var(--muted); font-size: .85rem; padding: 20px; }