.notes-grid{display:flex;flex-wrap:wrap;gap:18px;align-items:flex-start}
.note-card{position:relative;background:linear-gradient(180deg,#fff9e2,#fff2c0);border:1px solid #ecd99b;border-radius:14px;box-shadow:0 12px 26px rgba(150,120,40,.16),0 2px 6px rgba(150,120,40,.08);padding:14px 16px;display:flex;flex-direction:column;gap:10px;width:300px;height:260px;min-width:240px;max-width:100%;resize:both;overflow:auto;transition:box-shadow .2s,transform .2s}
.note-card:hover{box-shadow:0 16px 34px rgba(150,120,40,.22);transform:translateY(-2px)}
.note-head{display:flex;align-items:center;gap:8px}
.note-title{flex:1;min-width:0;border:0;background:transparent;font-weight:700;font-size:16px;color:#333;outline:0;padding:3px 0;border-bottom:1px dashed transparent;cursor:text;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.5}
.note-title:empty::before{content:attr(data-placeholder);color:#c4a95f;font-weight:400;pointer-events:none}
.note-title:focus{border-bottom-color:#d8bf6d;overflow:visible;white-space:normal;overflow-wrap:break-word;word-break:break-word}
.note-readonly .note-title{cursor:default}
.note-delete{width:26px;height:26px;flex:none;border:0;border-radius:8px;background:rgba(180,140,40,.16);color:#9c7418;font-size:16px;line-height:1;cursor:pointer}
.note-delete:hover{background:rgba(190,90,50,.18);color:#b05030}
.note-content{flex:1;min-height:0;border:0;background:transparent;outline:0;line-height:1.6;color:var(--note-color,#333);padding:2px 0;font-family:inherit;cursor:text;word-break:break-word;white-space:pre-wrap;overflow-y:auto}
.note-content:empty::before{content:attr(data-placeholder);color:#c4a95f;pointer-events:none}
.note-content:focus{background:rgba(255,255,255,.25);border-radius:6px}
.note-foot{display:flex;align-items:center;gap:8px;border-top:1px dashed rgba(180,140,40,.4);padding-top:9px;flex-wrap:wrap}
.note-color{width:32px;height:28px;border:1px solid #e2cf93;border-radius:7px;padding:2px;background:#fff;cursor:pointer}
.note-size{border:1px solid #e2cf93;border-radius:7px;background:#fff;padding:3px 6px;font-size:12px;color:#6d5a24;cursor:pointer}
.note-align{display:flex;gap:4px}
.note-align-btn{width:24px;height:24px;border:1px solid #e2cf93;border-radius:6px;background:#fff;color:#6d5a24;font-size:11px;line-height:1;cursor:pointer;padding:0}
.note-align-btn:hover{background:#f7efd8;border-color:#d8bf6d}
.note-align-btn:active{background:#efdfae}
.note-status{margin-left:auto;font-size:11px;color:#9c7418;opacity:0;transition:opacity .3s;white-space:nowrap}
.note-status.show{opacity:1}
.notes-empty{flex:1 1 100%;padding:60px 20px;text-align:center}
@media(max-width:640px){.note-card{width:100%;resize:vertical}}
.notes-filter{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap;background:#fff;border:1px solid #e3eae5;border-radius:14px;padding:14px 18px;margin-bottom:18px;box-shadow:0 4px 14px rgba(25,61,44,.05)}
.notes-filter label{display:grid;gap:6px;font-size:12px;color:#5f7c6c;font-weight:600;letter-spacing:.3px}
.notes-filter select,.notes-filter input[type=date]{height:40px;border:1.5px solid #d8e3dc;border-radius:10px;padding:0 12px;font-size:13px;color:#2f3f37;background:#fff;outline:0;transition:border-color .15s,box-shadow .15s;min-width:140px}
.notes-filter select:focus,.notes-filter input[type=date]:focus{border-color:#16815a;box-shadow:0 0 0 3px rgba(22,129,90,.10)}
.notes-filter .btn{height:40px;padding:0 18px;border-radius:10px;font-size:13px;margin:0}
.notes-filter #notes-reset{background:#f2f6f3;border:1.5px solid #d8e3dc;color:#5f7c6c}
.notes-filter #notes-reset:hover{background:#e6efe9;border-color:#b9cec2}
.note-author{font-size:11px;color:#a07820;background:rgba(180,140,40,.12);border-radius:6px;padding:3px 7px;white-space:nowrap;flex:none}
.note-readonly{background:linear-gradient(180deg,#f6f8f6,#eef2ee);border-color:#d6ded9;box-shadow:0 8px 18px rgba(60,80,70,.10)}
.note-readonly .note-title{opacity:.85;cursor:default}
.note-readonly .note-content{color:var(--note-color,#333)}
.note-foot-readonly span{font-size:11px;color:#7b8a81}
.note-delete[hidden]{display:none}
.notes-search-label{flex:1;min-width:250px}
.notes-search-label input{width:100%;height:40px;border:1.5px solid #d8e3dc;border-radius:10px;padding:0 12px 0 38px;font-size:13px;color:#2f3f37;background:#f8fbf9 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ca39a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='m21 21-4.3-4.3'/%3E%3C/svg%3E") 12px center/16px 16px no-repeat;outline:0;transition:border-color .15s,box-shadow .15s,background-color .15s}
.notes-search-label input:focus{border-color:#16815a;background-color:#fff;box-shadow:0 0 0 3px rgba(22,129,90,.10)}
.notes-search-label input::placeholder{color:#9aaea3}
.notes-admin-controls{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap}
.notes-admin-controls[hidden]{display:none}
.notes-admin-controls>span{color:#8ca39a;font-weight:700;padding-bottom:10px;white-space:nowrap}
.notes-sections{display:flex;flex-direction:column;gap:24px;padding:4px 0 30px}
.notes-section-title{display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;color:#5f7c6c;margin-bottom:12px}
.notes-section-title span{background:#eaf3ee;color:#176b49;border-radius:10px;padding:2px 9px;font-size:11px;font-weight:600}
.notes-section-others{border-top:2px dashed #d9c887;padding-top:22px}
.notes-section-others .notes-section-title{color:#a07820}
.notes-section-others .notes-section-title span{background:#f7efd8;color:#9c7418}
.notes-toolbar-hint{color:#7b8780;font-size:12px}.notes-filter label input[type=date]{height:40px;border:1.5px solid #d8e3dc;border-radius:10px;padding:0 12px;font-size:13px;background:#fff;outline:0;transition:border-color .15s,box-shadow .15s}.notes-filter input[type=date]:focus{border-color:#16815a;box-shadow:0 0 0 3px rgba(22,129,90,.10)}