.jawnosc-hello {
    padding: .75rem 1rem;
    border: 1px solid #e5e7eb;
    border-radius: .5rem;
    display: inline-block;
  }

  .jawnosc { font-size: 14px; line-height: 1.5; }
.jawnosc-compact .jawnosc-row { margin-bottom: .5rem; }
.jawnosc-label { color: #555; margin-right: .5rem; display: inline-block; min-width: 110px; }
.jawnosc-value { display: inline-block; }
.jawnosc-sub { color: #777; font-size: 12px; }
.jawnosc-date { color: #999; }

.jawnosc-badge { display: inline-block; margin-left: .5rem; padding: 2px 6px; border-radius: 9999px; font-size: 11px; background: #eef7ee; border: 1px solid #b8e0b8; }
.jawnosc-badge--min { color: #1a7f37; }

.jawnosc-table-wrap { overflow-x: auto; }
.jawnosc-table { width: 100%; border-collapse: collapse; }
.jawnosc-table th, .jawnosc-table td { padding: .5rem .6rem; border-bottom: 1px solid #eee; text-align: left; white-space: nowrap; }
.jawnosc-table-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-weight: 600; }
.jawnosc-window { color: #666; font-weight: 400; }

.jawnosc-chart-wrap { max-width: 100%; }
.jawnosc-chart-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: .5rem; font-weight: 600; }
.jawnosc-chart-legend { margin-top: .25rem; font-size: 12px; color: #555; display: flex; gap: 12px; align-items: center; }
.jawnosc-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; background: #555; }
.jawnosc-dot.sqm { background: #2f7de1; }
.jawnosc-dot.total { background: #e12f5b; }