/* Front-end banner */
.kls-banner{
  display:flex;justify-content:space-between;gap:14px;
  padding:12px 14px;border-radius:12px;
  border:1px solid rgba(0,0,0,.12);
  background:rgba(255,255,255,.92);
  align-items:center;max-width:1100px
}
.kls-left{display:flex;gap:14px;align-items:center;min-width:240px}
.kls-status{font-weight:700;letter-spacing:.5px;padding:6px 10px;border-radius:999px;border:1px solid rgba(0,0,0,.12)}
.kls-teams{display:flex;flex-direction:column;gap:6px}
.kls-team{display:flex;justify-content:space-between;gap:14px;font-weight:600}
.kls-team-name{opacity:.92}
.kls-score{font-variant-numeric:tabular-nums}
.kls-right{display:flex;flex-direction:column;gap:8px;min-width:200px;align-items:flex-end}
.kls-metric{display:flex;gap:10px;align-items:baseline}
.kls-label{font-size:12px;opacity:.75}
.kls-value{font-weight:800;font-variant-numeric:tabular-nums}
.kls-updated{font-size:12px;opacity:.7}
.kls-banner--not-live .kls-status{opacity:.7}
.kls-banner--error{border-color:rgba(200,0,0,.35)}
.kls-banner--error .kls-status{border-color:rgba(200,0,0,.35)}
@media (max-width:700px){
  .kls-banner{flex-direction:column;align-items:stretch}
  .kls-right{align-items:flex-start;min-width:auto}
}