/* Note — sticky notes, Frutiger Aero */
.app.note { flex-direction: row; }
.app.note .note-side { width: 240px; flex: none; display: flex; flex-direction: column; border-right: 1px solid rgba(0,60,150,0.2); background: linear-gradient(180deg, rgba(255,255,255,0.55), rgba(215,236,255,0.4)); }
.app.note .note-side-head { padding: 10px; border-bottom: 1px solid rgba(0,60,150,0.15); }
.app.note .note-list { flex: 1; overflow: auto; padding: 8px; display: flex; flex-direction: column; gap: 6px; }
.app.note .note-item { padding: 8px 10px; border-radius: 10px; cursor: pointer; border: 1px solid rgba(255,255,255,0.9); box-shadow: 0 3px 8px rgba(0,40,120,0.15); display: flex; flex-direction: column; gap: 2px; }
.app.note .note-item b { font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app.note .note-item span { font-size: 0.75rem; opacity: 0.75; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app.note .note-item small { font-size: 0.68rem; opacity: 0.6; }
.app.note .note-item.on { outline: 2px solid #3aa0ff; box-shadow: 0 0 0 4px rgba(120,200,255,0.45); }
.app.note .note-item.yellow, .app.note .note-paper.yellow { background: linear-gradient(180deg, #fff9c4, #ffe97a); }
.app.note .note-item.green,  .app.note .note-paper.green  { background: linear-gradient(180deg, #e8ffc4, #b9f26e); }
.app.note .note-item.blue,   .app.note .note-paper.blue   { background: linear-gradient(180deg, #e3f5ff, #a9dcff); }
.app.note .note-item.pink,   .app.note .note-paper.pink   { background: linear-gradient(180deg, #ffe4f1, #ffb3d6); }
.app.note .note-editor { flex: 1; min-width: 0; padding: 14px; display: flex; }
.app.note .note-paper { flex: 1; display: flex; flex-direction: column; border-radius: 6px 6px 14px 6px; box-shadow: 0 10px 24px rgba(0,40,120,0.25), 0 1px 0 rgba(255,255,255,0.8) inset; padding: 14px 16px; color: #3a3000; position: relative; }
.app.note .note-paper::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 38%; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.45), rgba(255,255,255,0)); pointer-events: none; }
.app.note .note-paper[hidden], .app.note .note-empty[hidden] { display: none; }
.app.note .note-head { display: flex; gap: 8px; align-items: center; position: relative; }
.app.note .note-title { flex: 1; border: 0; background: transparent; font: 700 1.25rem var(--font); color: inherit; outline: none; border-bottom: 1px dashed rgba(0,0,0,0.2); padding: 2px 0; }
.app.note .note-text { flex: 1; margin-top: 8px; border: 0; background: transparent; resize: none; outline: none; font: 500 1rem/1.55 var(--font); color: inherit; position: relative; }
.app.note .note-foot { display: flex; justify-content: space-between; font-size: 0.72rem; opacity: 0.7; margin-top: 6px; }
.app.note .note-empty { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; opacity: 0.75; }
.app.note .note-empty img { width: 80px; height: 80px; object-fit: contain; }