[data-persistence-status]{
  display:inline-flex;align-items:center;gap:7px;max-width:260px;padding:6px 10px;border-radius:999px;
  font-size:12px;font-weight:800;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  border:1px solid #e2e8f0;background:#f8fafc;color:#64748b;
}
[data-persistence-status]::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
[data-persistence-status][data-tone="ok"]{color:#137844;background:#eff9f3;border-color:#d4eadc}
[data-persistence-status][data-tone="pending"]{color:#2f6feb;background:#edf4ff;border-color:#d6e4fb}
[data-persistence-status][data-tone="warning"]{color:#9a6700;background:#fff8e6;border-color:#eedfac}
[data-persistence-status][data-tone="error"]{color:#b84432;background:#fff4f1;border-color:#efdad4}
[data-persistence-status][data-tone="neutral"]{color:#64748b;background:#f8fafc;border-color:#e2e8f0}
@media(max-width:780px){[data-persistence-status]{max-width:185px;padding:5px 8px;font-size:11px}}
@media(max-width:480px){[data-persistence-status]{max-width:150px}}