.notes{background-color:var(--color-surface);border-radius:var(--radius-lg);padding:var(--space-lg);box-shadow:var(--shadow-sm);margin-top:var(--space-lg)}.notes__header{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--space-lg);gap:var(--space-md)}.notes__title{font-size:var(--font-size-xl);font-weight:600;color:var(--color-text)}.notes__add-btn{display:flex;align-items:center;gap:var(--space-sm);padding:var(--space-sm) var(--space-md);background-color:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-md);font-size:var(--font-size-sm);font-weight:500;transition:background-color var(--transition-fast);box-shadow:var(--shadow-sm)}.notes__add-btn:hover{background-color:var(--color-primary-hover)}.notes__add-btn:active{transform:scale(.98)}.notes__add-icon{width:20px;height:20px}.notes__list{display:flex;flex-direction:column;gap:0;max-height:500px;overflow-y:auto;padding-right:var(--space-xs)}.notes__empty{display:flex;flex-direction:column;align-items:center;text-align:center;padding:var(--space-2xl) var(--space-lg);color:var(--color-text-muted)}.notes__empty-icon{width:48px;height:48px;margin-bottom:var(--space-md);color:var(--color-text-muted)}.notes__empty-text{font-size:var(--font-size-base);max-width:300px;line-height:1.6}.note-item{display:flex;gap:var(--space-md);position:relative;animation:noteSlideIn .3s ease}@keyframes noteSlideIn{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.note-item__timeline{display:flex;flex-direction:column;align-items:center;flex-shrink:0;width:24px;padding-top:6px}.note-item__dot{width:12px;height:12px;border-radius:var(--radius-full);background-color:var(--color-primary);border:3px solid var(--color-surface);box-shadow:0 0 0 2px var(--color-primary);position:relative;z-index:2}.note-item__line{width:2px;flex:1;background-color:var(--color-border);margin-top:-2px;min-height:40px}.note-item:last-child .note-item__line{display:none}.note-item__content-wrapper{flex:1;padding-bottom:var(--space-lg)}.note-item__header{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-md);margin-bottom:var(--space-sm)}.note-item__time{display:flex;flex-direction:column;gap:var(--space-xs)}.note-item__hour-mark{font-size:var(--font-size-sm);font-weight:600;color:var(--color-primary)}.note-item__date{font-size:var(--font-size-xs);color:var(--color-text);font-weight:500}.note-item__timestamp{font-size:var(--font-size-xs);color:var(--color-text-muted)}.note-item__text{font-size:var(--font-size-base);color:var(--color-text);line-height:1.6;white-space:pre-wrap;word-wrap:break-word}.note-item__delete{width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-sm);color:var(--color-text-muted);transition:all var(--transition-fast);flex-shrink:0;opacity:.6}.note-item__delete:hover{background-color:var(--color-error-light);color:var(--color-error);opacity:1}.note-item__delete:active{transform:scale(.95)}.modal__textarea{width:100%;padding:var(--space-md);border:1px solid var(--color-border);border-radius:var(--radius-md);background-color:var(--color-bg);color:var(--color-text);font-size:var(--font-size-base);line-height:1.6;resize:vertical;margin-top:var(--space-md);transition:border-color var(--transition-fast)}.modal__textarea:focus{outline:0;border-color:var(--color-primary)}.modal__char-count{text-align:right;font-size:var(--font-size-xs);color:var(--color-text-muted);margin-top:var(--space-xs)}@media (max-width:480px){.notes{padding:var(--space-md)}.notes__add-btn span{display:none}.notes__add-btn{width:40px;height:40px;padding:0;justify-content:center}.notes__list{max-height:400px}.note-item__timeline{width:20px}.note-item__dot{width:10px;height:10px}}.notes__list::-webkit-scrollbar{width:6px}.notes__list::-webkit-scrollbar-track{background:0 0}.notes__list::-webkit-scrollbar-thumb{background:var(--color-border);border-radius:var(--radius-full)}.notes__list::-webkit-scrollbar-thumb:hover{background:var(--color-text-muted)}.note-media-buttons{display:flex;gap:var(--space-md);margin-top:var(--space-md);justify-content:center}.note-media-btn{padding:var(--space-sm) var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:var(--font-size-sm);color:var(--color-text);transition:all var(--transition-fast);cursor:pointer}.note-media-btn--icon{position:relative;width:52px;height:52px;padding:0;display:flex;align-items:center;justify-content:center;border-radius:var(--radius-lg)}.note-media-btn--icon svg{width:24px;height:24px}.note-media-btn--icon:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary);transform:scale(1.05)}.note-media-btn--icon:active:not(:disabled){transform:scale(.95)}.note-media-btn--active{background-color:var(--color-success);color:var(--color-text-inverse);border-color:var(--color-success)}.note-media-btn--active:hover:not(:disabled){background-color:var(--color-success);border-color:var(--color-success)}.note-media-btn__badge{position:absolute;top:-4px;right:-4px;min-width:18px;height:18px;padding:0 4px;background-color:var(--color-primary);color:var(--color-text-inverse);border-radius:var(--radius-full);font-size:var(--font-size-xs);font-weight:600;display:flex;align-items:center;justify-content:center}.note-media-btn__check{position:absolute;bottom:-2px;right:-2px;width:16px;height:16px;background-color:var(--color-success);color:var(--color-text-inverse);border-radius:var(--radius-full);font-size:10px;display:flex;align-items:center;justify-content:center}.note-media-btn:hover:not(:disabled){background-color:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary)}.note-media-btn:disabled{opacity:.5;cursor:not-allowed}.note-media-preview{margin-top:var(--space-md)}.note-media-preview__images{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:var(--space-sm);margin-bottom:var(--space-sm)}.note-media-preview__item{position:relative;aspect-ratio:1;border-radius:var(--radius-sm);overflow:hidden;background-color:var(--color-surface);border:1px solid var(--color-border)}.note-media-preview__item img{width:100%;height:100%;object-fit:cover}.note-media-preview__remove{position:absolute;top:var(--space-xs);right:var(--space-xs);width:20px;height:20px;padding:0;display:flex;align-items:center;justify-content:center;background-color:rgba(0,0,0,.7);color:var(--color-text-inverse);border-radius:var(--radius-full);font-size:var(--font-size-lg);line-height:1;cursor:pointer;transition:background-color var(--transition-fast)}.note-media-preview__remove:hover{background-color:var(--color-error)}.note-media-preview__attachment{display:flex;align-items:center;justify-content:space-between;padding:var(--space-sm) var(--space-md);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);margin-bottom:var(--space-sm);font-size:var(--font-size-sm)}.note-media-preview__remove-btn{padding:var(--space-xs) var(--space-sm);background-color:transparent;color:var(--color-error);font-size:var(--font-size-xs);cursor:pointer;transition:color var(--transition-fast)}.note-media-preview__remove-btn:hover{color:var(--color-error);text-decoration:underline}.note-item__media-indicators{display:flex;gap:var(--space-xs);margin-top:var(--space-sm);flex-wrap:wrap}.note-item__media-btn{padding:var(--space-xs) var(--space-sm);background-color:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-sm);font-size:var(--font-size-xs);color:var(--color-text);cursor:pointer;transition:all var(--transition-fast)}.note-item__media-btn:hover{background-color:var(--color-primary);color:var(--color-text-inverse);border-color:var(--color-primary);transform:scale(1.05)}.media-preview-modal{display:flex;flex-direction:column;gap:var(--space-md);max-height:60vh;overflow-y:auto}.media-preview-modal__images{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:var(--space-sm)}.media-preview-modal__image{width:100%;border-radius:var(--radius-md);object-fit:cover;background-color:var(--color-surface)}.media-preview-modal__audio,.media-preview-modal__video{width:100%}.media-preview-modal__audio-player,.media-preview-modal__video-player{width:100%;border-radius:var(--radius-md);background-color:var(--color-surface)}.media-preview-modal__video-player{max-height:400px}@media (max-width:480px){.note-media-buttons{gap:var(--space-xs)}.note-media-btn{padding:var(--space-xs) var(--space-sm);font-size:var(--font-size-xs)}.note-media-preview__images{grid-template-columns:repeat(auto-fill,minmax(60px,1fr))}.media-preview-modal__images{grid-template-columns:1fr}}