:root {
  --jpstraffic-status-bg: rgba(15, 49, 87, 0.97);
  --jpstraffic-status-border: rgba(255, 255, 255, 0.28);
  --jpstraffic-status-text: #fff;
  --jpstraffic-status-accent: #c92f3a;
}

#jpstraffic-pwa-status {
  align-items: center;
  background: var(--jpstraffic-status-bg);
  border: 1px solid var(--jpstraffic-status-border);
  border-radius: 10px;
  bottom: calc(12px + env(safe-area-inset-bottom));
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  color: var(--jpstraffic-status-text);
  display: none;
  font: 600 14px/1.35 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  gap: 10px;
  left: 50%;
  max-width: min(460px, calc(100vw - 24px));
  padding: 10px 12px;
  position: fixed;
  transform: translateX(-50%);
  width: max-content;
  z-index: 2147483647;
}

#jpstraffic-pwa-status[data-visible="true"] { display: flex; }
#jpstraffic-pwa-status[data-kind="error"] { background: rgba(130, 27, 36, 0.98); }

#jpstraffic-pwa-status button {
  appearance: none;
  background: var(--jpstraffic-status-accent);
  border: 1px solid #fff;
  border-radius: 7px;
  color: #fff;
  cursor: pointer;
  flex: 0 0 auto;
  font: inherit;
  padding: 7px 10px;
}

#jpstraffic-pwa-status button:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: no-preference) {
  #jpstraffic-pwa-status[data-visible="true"] { animation: jpstraffic-status-in 160ms ease-out; }

  @keyframes jpstraffic-status-in {
    from { opacity: 0; transform: translate(-50%, 8px); }
    to { opacity: 1; transform: translate(-50%, 0); }
  }
}