html body .qnotes{display:grid;gap:var(--space-4);padding:var(--space-5);background:var(--surface-card);border:1px solid var(--color-border);border-radius:var(--radius-panel)}html body .qnotes .qnotes__head{display:flex;align-items:center;gap:var(--space-3)}html body .qnotes .qnotes__head-main{display:flex;align-items:center;gap:var(--space-2);min-width:0;flex:1}html body .qnotes .qnotes__icon{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-sm);height:var(--control-h-sm);flex:none;color:var(--color-brand);background:var(--color-brand-soft);border-radius:var(--radius-control)}html body .qnotes .qnotes__title{margin:0;color:var(--color-text-primary);font-size:var(--fs-h3);font-weight:var(--fw-semibold);line-height:1.3;white-space:nowrap}html body .qnotes .qnotes__count{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);color:var(--color-brand);background:var(--color-brand-soft);border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:var(--fw-semibold);white-space:nowrap}html body .qnotes .qnotes__action{display:flex;align-items:center;gap:var(--space-2);margin:0 0 0 auto;flex:none}html body .qnotes .qnotes__workspace{display:flex;align-items:center;gap:var(--space-2);margin:0;font-size:var(--fs-sm)}html body .qnotes .qnotes__workspace-label{white-space:nowrap}html body .qnotes .qnotes__workspace-label,html body .qnotes .qnotes__workspace-name{color:var(--color-text-muted);font-size:var(--fs-caption)}html body .qnotes .qnotes__desc{margin:0;color:var(--color-text-secondary);font-size:var(--fs-sm)}html body .qnotes .qnotes__empty{display:grid;justify-items:center;gap:var(--space-2);padding:var(--space-6) var(--space-4);text-align:center}html body .qnotes .qnotes__empty-icon{display:inline-flex;align-items:center;justify-content:center;width:var(--control-h-lg);height:var(--control-h-lg);color:var(--color-brand);background:var(--color-brand-soft);border-radius:var(--radius-control)}html body .qnotes .qnotes__empty-title{margin:0;color:var(--color-text-primary);font-size:var(--fs-body);font-weight:var(--fw-semibold)}html body .qnotes .qnotes__empty-text{max-width:32rem;margin:0;color:var(--color-text-secondary);font-size:var(--fs-sm)}html body .qnotes .qnotes__empty-action{margin-top:var(--space-2)}html body .qnotes .qnotes__editor{display:grid;gap:var(--space-3);padding:var(--space-4);background:var(--surface-inset);border:1px solid var(--color-border);border-radius:var(--radius-control)}html body .qnotes .qnotes__toolbar{padding-bottom:var(--space-3);border-bottom:1px solid var(--color-border-soft)}html body .qnotes .qnotes__toolbar,html body .qnotes .qnotes__toolbar-group{display:flex;align-items:center;gap:var(--space-1)}html body .qnotes .qnotes__toolbar-sep{align-self:stretch;width:1px;margin:0 var(--space-1);background:var(--color-border-soft)}html body .qnotes .qnotes__toolbar-spacer{flex:1}html body .qnotes .qnotes__tool{display:inline-flex;align-items:center;justify-content:center;min-width:var(--control-h-sm);min-height:var(--control-h-sm);padding:0;color:var(--color-text-secondary);background:transparent;border:0;border-radius:var(--radius-control);cursor:pointer;transition:color var(--duration-fast),background-color var(--duration-fast)}html body .qnotes .qnotes__tool:hover{color:var(--color-text-primary);background:color-mix(in srgb,var(--color-text-primary) 8%,transparent)}html body .qnotes .qnotes__tool--active{color:var(--color-brand);background:var(--color-brand-soft)}html body .qnotes .qnotes__icon-btn:focus-visible,html body .qnotes .qnotes__tag-remove:focus-visible,html body .qnotes .qnotes__tool:focus-visible{outline:2px solid var(--color-brand);outline-offset:2px}html body .qnotes .qnotes__field{position:relative;display:grid}html body .qnotes .qnotes__textarea{width:100%;min-height:8rem;padding:var(--space-3);color:var(--color-text-primary);background:var(--surface-card);border:1px solid var(--color-border);border-radius:var(--radius-control);font:inherit;font-size:var(--fs-body);resize:vertical}html body .qnotes .qnotes__textarea::placeholder{color:var(--color-text-muted)}html body .qnotes .qnotes__textarea:focus{outline:2px solid var(--color-brand);outline-offset:2px;border-color:var(--color-brand)}html body .qnotes .qnotes__textarea--invalid{border-color:var(--color-red-muted)}html body .qnotes .qnotes__counter{position:absolute;right:var(--space-2);bottom:var(--space-2);color:var(--color-text-muted);font-size:var(--fs-caption)}html body .qnotes .qnotes__error{padding:var(--space-3);background:var(--color-red-soft);border:1px solid var(--color-red-muted);border-radius:var(--radius-control)}html body .qnotes .qnotes__error p{margin:0;color:var(--color-red);font-size:var(--fs-sm)}html body .qnotes .qnotes__tags{display:grid;gap:var(--space-2)}html body .qnotes .qnotes__tags-row{display:flex;align-items:center;gap:var(--space-2)}html body .qnotes .qnotes__tags-label{display:inline-flex;align-items:center;gap:var(--space-1);flex:none;color:var(--color-text-secondary);font-size:var(--fs-sm)}html body .qnotes .qnotes__tag-input{flex:1;min-width:0;min-height:var(--control-h-md);padding:var(--space-2) var(--space-3);color:var(--color-text-primary);background:var(--surface-card);border:1px solid var(--color-border);border-radius:var(--radius-control);font:inherit;font-size:var(--fs-sm)}html body .qnotes .qnotes__tag-input::placeholder{color:var(--color-text-muted)}html body .qnotes .qnotes__tag-list{display:flex;flex-wrap:wrap;gap:var(--space-1)}html body .qnotes .qnotes__tag{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-2);color:var(--color-brand);background:var(--color-brand-soft);border-radius:var(--radius-pill);font-size:var(--fs-caption);font-weight:var(--fw-medium)}html body .qnotes .qnotes__tag-remove{display:inline-flex;align-items:center;justify-content:center;padding:0;color:inherit;background:transparent;border:0;border-radius:var(--radius-pill);cursor:pointer}html body .qnotes .qnotes__foot{display:flex;align-items:center;gap:var(--space-3);padding-top:var(--space-3);border-top:1px solid var(--color-border-soft)}html body .qnotes .qnotes__hint{margin:0;min-width:0;flex:1;color:var(--color-text-muted);font-size:var(--fs-caption)}html body .qnotes .qnotes__foot-actions{display:flex;align-items:center;gap:var(--space-2);margin:0 0 0 auto;flex:none}html body .qnotes .qnotes__list{display:grid;gap:var(--space-3);margin:0;padding:0;list-style:none}html body .qnotes .qnotes__note{display:grid;gap:var(--space-3);padding:var(--space-4);background:var(--surface-card);border:1px solid var(--color-border);border-radius:var(--radius-control)}html body .qnotes .qnotes__note-top{display:flex;align-items:flex-start;gap:var(--space-2)}html body .qnotes .qnotes__author{display:flex;align-items:center;gap:var(--space-2);min-width:0;flex:1}html body .qnotes .qnotes__author-copy{min-width:0}html body .qnotes .qnotes__author-name{overflow:hidden;margin:0;color:var(--color-text-primary);font-size:var(--fs-sm);font-weight:var(--fw-medium);text-overflow:ellipsis;white-space:nowrap}html body .qnotes .qnotes__author-you{color:var(--color-text-muted);font-size:var(--fs-caption);font-weight:var(--fw-regular)}html body .qnotes .qnotes__note-time{display:flex;align-items:center;gap:var(--space-1);margin:0;min-width:0;flex:1;color:var(--color-text-muted);font-size:var(--fs-caption)}html body .qnotes .qnotes__note-actions{display:flex;align-items:center;gap:var(--space-1);flex:none}html body .qnotes .qnotes__privacy{display:inline-flex;align-items:center;margin-right:var(--space-1);color:var(--color-text-muted)}html body .qnotes .qnotes__privacy--private{color:var(--color-brand)}html body .qnotes .qnotes__icon-btn{display:inline-flex;align-items:center;justify-content:center;min-width:var(--control-h-md);min-height:var(--control-h-md);padding:0;color:var(--color-text-muted);background:transparent;border:0;border-radius:var(--radius-control);cursor:pointer;transition:color var(--duration-fast),background-color var(--duration-fast)}html body .qnotes .qnotes__icon-btn:hover{color:var(--color-text-primary);background:color-mix(in srgb,var(--color-text-primary) 8%,transparent)}html body .qnotes .qnotes__icon-btn:disabled{opacity:.5;cursor:not-allowed}html body .qnotes .qnotes__icon-btn--confirm{color:var(--color-red);background:var(--color-red-soft)}html body .qnotes .qnotes__note-body{min-width:0;color:var(--color-text-primary);font-size:var(--fs-body);line-height:1.6;overflow-wrap:anywhere}html body .qnotes .qnotes__chips{display:flex;align-items:center;gap:var(--space-2);padding-top:var(--space-3);border-top:1px solid var(--color-border-soft)}html body .qnotes .qnotes__chips-label{display:inline-flex;flex:none;color:var(--color-text-muted)}html body .qnotes .qnotes__note-tags{display:flex;flex-wrap:wrap;gap:var(--space-1)}html body .qnotes .qnotes__chip{display:inline-flex;align-items:center;padding:var(--space-1) var(--space-2);color:var(--color-text-secondary);background:var(--color-slate-100);border-radius:var(--radius-pill);font-size:var(--fs-caption)}html body .qnotes .qnotes__confirm{display:grid;gap:var(--space-2);padding:var(--space-3);background:var(--color-red-soft);border:1px solid var(--color-red-muted);border-radius:var(--radius-control)}html body .qnotes .qnotes__confirm p{margin:0;color:var(--color-red);font-size:var(--fs-sm)}html body .qnotes .qnotes__confirm-actions{display:flex;gap:var(--space-2)}html body .qnotes .qnotes__tip{padding:var(--space-3);background:var(--color-brand-soft);border:1px solid var(--color-brand-muted);border-radius:var(--radius-control)}html body .qnotes .qnotes__tip p{margin:0;color:var(--color-brand);font-size:var(--fs-caption)}html body .qnotes .qnotes__skeleton{display:grid;gap:var(--space-3)}html body .qnotes .qnotes__skeleton-bar{height:.75rem;background:var(--color-slate-100);border-radius:var(--radius-pill)}html body .qnotes .qnotes__skeleton-bar--short{width:25%}html body .qnotes .qnotes__skeleton-bar--mid{width:75%}html body .qnotes .qnotes__skeleton-bar--half{width:50%}@media (max-width:639px){html body .qnotes{padding:var(--space-4)}html body .qnotes .qnotes__head{flex-wrap:wrap}html body .qnotes .qnotes__action{width:100%;margin:0}html body .qnotes .qnotes__action>*{flex:1}html body .qnotes .qnotes__workspace{width:100%}html body .qnotes .qnotes__workspace .input-field{flex:1;min-width:0}html body .qnotes .qnotes__foot{flex-wrap:wrap}html body .qnotes .qnotes__foot-actions{width:100%;margin:0}html body .qnotes .qnotes__foot-actions>*{flex:1}}@media (prefers-reduced-motion:reduce){html body .qnotes .qnotes__icon-btn,html body .qnotes .qnotes__tool{transition:none}}