/* NOTES / EMPTY / SKELETON */
.note{display:flex;gap:10px;align-items:flex-start;border-radius:12px;padding:12px 14px;font-size:13.1px}
.note.ok{background:var(--ok-soft);color:var(--ok)}
.note.bad{background:var(--bad-soft);color:var(--bad)}
.note.warn{background:var(--warn-soft);color:var(--warn)}
.note.acc{background:var(--accent-soft);color:var(--accent-ink2)}
.note a{color:inherit;font-weight:700;text-decoration:underline}
.note .ic{margin-top:2px}
.empty{text-align:center;padding:34px 18px;color:var(--sub)}
.empty .ico{width:48px;height:48px;border-radius:999px;background:var(--surface2);color:var(--dim);
  display:grid;place-items:center;margin:0 auto 14px}
.empty b{display:block;font-family:var(--fh);font-size:15.3px;color:var(--ink);margin-bottom:6px}
.skel{background:linear-gradient(90deg,var(--surface2) 25%,var(--line) 37%,var(--surface2) 63%);
  background-size:400% 100%;animation:sk 1.3s linear infinite;border-radius:8px}
@keyframes sk{from{background-position:100% 0}to{background-position:0 0}}
.spin{width:18px;height:18px;border-radius:999px;border:2px solid color-mix(in oklab,currentColor 30%,transparent);
  border-top-color:currentColor;animation:sp .7s linear infinite}
@keyframes sp{to{transform:rotate(360deg)}}