/**
 * Code Kids — PWA Diagnostic Button
 */
.pwa-diagnostic-button {
  position: fixed;
  right: max(10px, env(safe-area-inset-right));
  bottom: max(10px, env(safe-area-inset-bottom));
  z-index: 120;
  min-height: 40px;
  padding: 8px 12px;
  border: 1px solid rgba(99, 102, 241, 0.28);
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.94);
  color: #312e81;
  box-shadow: 0 5px 18px rgba(15, 23, 42, 0.14);
  font: 700 0.78rem/1 system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  cursor: pointer;
  touch-action: manipulation;
}

.pwa-diagnostic-button:active {
  transform: translateY(1px);
}

@media (orientation: landscape) and (max-height: 520px) {
  .pwa-diagnostic-button {
    right: max(6px, env(safe-area-inset-right));
    bottom: max(6px, env(safe-area-inset-bottom));
    min-height: 34px;
    padding: 6px 9px;
    font-size: 0.68rem;
  }
}