html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  overscroll-behavior-y: none;
  touch-action: manipulation;
}

button,
input,
select,
textarea {
  font-size: 16px;
}

input,
select,
textarea {
  min-height: 48px;
}

textarea {
  resize: vertical;
}

button,
.primary-btn,
.secondary-btn,
.danger-btn {
  min-height: 48px;
  touch-action: manipulation;
}

.card,
.metric-card,
.list-item {
  overflow-wrap: anywhere;
}

.bottom-nav {
  padding-bottom: max(10px, env(safe-area-inset-bottom));
}

.bottom-nav button {
  min-height: 58px;
}

.screen {
  padding-bottom: 18px;
}

.action-row {
  gap: 10px;
}

.device-grid {
  display: grid;
  gap: 12px;
}

.device-row {
  display: grid;
  gap: 4px;
  padding: 13px 14px;
  border-radius: var(--radius-md);
  background: rgba(248, 250, 252, 0.76);
  border: 1px solid var(--border);
}

.device-row strong {
  font-size: 0.88rem;
}

.device-row span {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.35;
}

.device-status-good {
  color: var(--success);
  font-weight: 900;
}

.device-status-warn {
  color: var(--warning);
  font-weight: 900;
}

.mobile-test-card {
  border-color: rgba(15, 23, 42, 0.12);
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.04), rgba(56, 189, 248, 0.08)),
    var(--surface);
}

.safe-area-note {
  color: var(--muted);
  font-size: 0.84rem;
  line-height: 1.45;
}

@media (display-mode: standalone) {
  .app-header {
    padding-top: max(18px, env(safe-area-inset-top));
  }
}

@media (max-width: 520px) {
  .app-shell {
    padding-left: 13px;
    padding-right: 13px;
  }

  .app-header {
    padding-inline: 2px;
  }

  .app-header h1 {
    max-width: 230px;
  }

  .status-pill {
    min-height: 34px;
    padding: 0 10px;
  }

  .screen-header h2 {
    font-size: clamp(1.7rem, 9vw, 2.35rem);
  }

  .grid-2 {
    grid-template-columns: 1fr;
  }

  .metric-card {
    min-height: 116px;
  }

  .metric-value {
    font-size: clamp(1.8rem, 10vw, 2.55rem);
  }

  .action-row {
    grid-template-columns: 1fr;
  }

  .action-row button,
  .action-row .primary-btn,
  .action-row .secondary-btn,
  .action-row .danger-btn {
    width: 100%;
  }

  .bottom-nav {
    left: 10px;
    right: 10px;
    bottom: 8px;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    border-radius: 24px;
  }

  .bottom-nav button {
    padding: 8px 4px;
  }

  .bottom-nav button span {
    font-size: 1.08rem;
  }

  .bottom-nav button small {
    font-size: 0.66rem;
  }

  .list-item {
    gap: 6px;
  }

  .concept-config-form .grid-2 {
    grid-template-columns: 1fr;
  }

  .pwa-update-banner {
    bottom: calc(92px + env(safe-area-inset-bottom));
  }
}

@media (max-width: 370px) {
  .bottom-nav button small {
    display: none;
  }

  .bottom-nav button {
    min-height: 52px;
  }

  .app-header h1 {
    font-size: 1.35rem;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}