.sv-counter { box-sizing: border-box; width: calc(100% - 24px); max-width: 1160px; margin: 20px auto; padding: 14px 16px; border: 1px solid #cbd9e5; border-radius: 5px; background: #f7fafc; color: #244565; font-family: Arial,sans-serif; text-align: left; }
.sv-counter *, .sv-counter *::before, .sv-counter *::after { box-sizing: border-box; }
.sv-counter .sv-counter__heading { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.sv-counter h2 { margin: 0; padding: 0; font-size: 16px; line-height: 22px; color: #244565; }
.sv-counter h3 { margin: 0 0 6px; padding: 0; font-size: 13px; line-height: 20px; color: #244565; }
.sv-counter__legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; }
.sv-counter__legend > span { display: inline-flex; align-items: center; gap: 5px; }
.sv-counter__legend i { width: 9px; height: 9px; display: inline-block; border-radius: 2px; }
.sv-counter .sv-counter__kind-1 { background: #2e9b57; }
.sv-counter .sv-counter__kind-2 { background: #2879c4; }
.sv-counter__graphs { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 24px; margin-top: 12px; }
.sv-counter .sv-counter__days { display: grid; grid-template-columns: repeat(7,minmax(0,1fr)); gap: 6px; list-style: none; padding: 0; margin: 0; }
.sv-counter .sv-counter__days > li { display: block; min-width: 0; margin: 0; padding: 0; list-style: none; text-align: center; background: none; }
.sv-counter__pair { display: flex; gap: 3px; }
.sv-counter__column { flex: 1 1 0; min-width: 0; }
.sv-counter__value { display: flex; align-items: flex-end; justify-content: center; min-height: 28px; font-size: 10px; line-height: 12px; overflow-wrap: anywhere; }
.sv-counter__track { height: 45px; display: flex; align-items: flex-end; justify-content: center; border-bottom: 1px solid #cbd9e5; }
.sv-counter__bar { display: block; width: 65%; max-width: 14px; border-radius: 2px 2px 0 0; }
.sv-counter__date { display: block; margin-top: 5px; font-size: 10px; line-height: 14px; }
.sv-counter__details { margin-top: 10px; font-size: 11px; }
.sv-counter__details summary { cursor: pointer; color: #326699; }
.sv-counter__scroll { max-width: 100%; overflow-x: auto; margin: 8px 0; }
.sv-counter table { width: 100%; border-collapse: collapse; font-size: 11px; }
.sv-counter th, .sv-counter td { padding: 5px; border: 1px solid #cbd9e5; text-align: center; color: #244565; background: transparent; }
.sv-counter p.sv-counter__note { margin: 8px 0 0; font-size: 11px; line-height: 16px; color: #526777; }
@media(max-width: 700px) { .sv-counter__graphs { grid-template-columns: minmax(0,1fr); gap: 16px; } .sv-counter { padding: 12px 8px; } }

/* A native disclosure keeps statistics collapsed without requiring JavaScript. */
.sv-counter-panel { display: block; width: calc(100% - 24px); max-width: 1160px; margin: 12px auto; padding: 0; border: 0; }
.sv-counter-panel > summary.sv-counter-badge { display: block; list-style: none; width: 80px; height: 60px; padding: 0; margin: 0 0 0 auto; border: 0; background: transparent; cursor: pointer; line-height: 0; }
.sv-counter-panel > summary.sv-counter-badge::-webkit-details-marker { display: none; }
.sv-counter-panel > summary.sv-counter-badge::marker { content: ''; }
.sv-counter-badge svg { display: block; width: 80px; height: 60px; max-width: none; }
.sv-counter-badge:focus-visible { outline: 2px solid #2879c4; outline-offset: 3px; border-radius: 3px; }
.sv-counter-panel > .sv-counter { width: 100%; margin: 10px 0 0; }
.sv-counter-panel:not([open]) > .sv-counter { display: none; }