.notes-page { max-width: 980px; margin: 0 auto; padding: 36px 24px 64px; }
.notes-heading { display: flex; justify-content: space-between; gap: 24px; align-items: end; margin-bottom: 24px; }
.notes-heading > div > span { color: var(--accent, #d6a84b); font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.notes-heading h1 { margin: 6px 0; }
.notes-heading p { margin: 0; color: var(--text-muted, #9aa0aa); }
.notes-paper { padding: 24px; border: 1px solid var(--border, #30343b); border-radius: 12px; background: var(--surface, #16191f); }
.notes-paper label { display: block; margin-bottom: 10px; font-weight: 700; }
.notes-paper textarea { box-sizing: border-box; width: 100%; min-height: 55vh; resize: vertical; padding: 18px; border: 1px solid var(--border, #30343b); border-radius: 8px; background: var(--background, #0f1115); color: inherit; font: 1rem/1.65 inherit; }
.notes-paper textarea:focus { outline: 2px solid var(--accent, #d6a84b); outline-offset: 2px; }
.notes-paper footer { display: flex; justify-content: space-between; gap: 16px; margin-top: 10px; color: var(--text-muted, #9aa0aa); font-size: .85rem; }
.notes-status-error { color: #e97878; }
@media (max-width: 600px) { .notes-page { padding: 24px 14px 48px; } .notes-heading { align-items: stretch; flex-direction: column; } .notes-heading button { width: 100%; } .notes-paper { padding: 16px; } }