.gb-data-state {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 12px 20px 0;
  padding: 11px 14px;
  color: #5B6B78;
  background: #F7FAFC;
  border: 1px solid #E3E9EE;
  border-radius: 12px;
  font-family: "GotoBada Sans", system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.45;
}
.gb-data-state[hidden] { display: none !important; }
.gb-data-state__dot {
  width: 8px;
  height: 8px;
  flex: 0 0 auto;
  border-radius: 50%;
  background: #8A98A3;
}
.gb-data-state__copy {
  display: flex;
  min-width: 0;
  flex: 1;
  flex-wrap: wrap;
  gap: 3px 8px;
}
.gb-data-state__copy b { color: #12212B; font-weight: 700; }
.gb-data-state__copy span { overflow-wrap: anywhere; }
.gb-data-state button {
  min-height: 36px;
  flex: 0 0 auto;
  padding: 0 12px;
  color: #0E3A53;
  background: #fff;
  border: 1px solid #CFDDE6;
  border-radius: 9px;
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.gb-data-state button:focus-visible {
  outline: 2px solid #1A7FA8;
  outline-offset: 2px;
}
.gb-data-state[data-kind="loading"] .gb-data-state__dot {
  background: #1A7FA8;
  animation: gb-state-pulse 1.2s ease-in-out infinite;
}
.gb-data-state[data-kind="stale"],
.gb-data-state[data-kind="partial"] {
  color: #7A4E06;
  background: #FFFDF8;
  border-color: #F2E6CE;
}
.gb-data-state[data-kind="stale"] .gb-data-state__dot,
.gb-data-state[data-kind="partial"] .gb-data-state__dot { background: #E0A03A; }
.gb-data-state[data-kind="stale"] .gb-data-state__copy b,
.gb-data-state[data-kind="partial"] .gb-data-state__copy b { color: #7A4E06; }
.gb-data-state[data-kind="error"] {
  color: #8F2E28;
  background: #FDECEA;
  border-color: #F4C7C3;
}
.gb-data-state[data-kind="error"] .gb-data-state__dot { background: #C4453B; }
.gb-data-state[data-kind="error"] .gb-data-state__copy b { color: #8F2E28; }
@keyframes gb-state-pulse {
  0%, 100% { opacity: .45; }
  50% { opacity: 1; }
}
@media (min-width: 1024px) {
  .gb-data-state { margin-inline: 48px; }
}
@media (max-width: 640px) {
  .gb-data-state {
    align-items: flex-start;
    margin: 8px 12px 0;
    padding: 10px 12px;
    font-size: 13px;
  }
  .gb-data-state__dot { margin-top: 5px; }
  .gb-data-state button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .gb-data-state[data-kind="loading"] .gb-data-state__dot { animation: none; }
}