/* PWERP 手机端兼容公共样式 */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; overflow-x: hidden; }
img, video, canvas { max-width: 100%; height: auto; }
header, .toolbar {
  position: sticky; top: 0; z-index: 20;
}
input, button, select, textarea {
  font-size: 16px; /* iOS 防缩放 */
  max-width: 100%;
  min-height: 40px;
}
button, a.btn {
  touch-action: manipulation;
}
pre { max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.row, .actions, header {
  display: flex; flex-wrap: wrap; gap: .5rem; align-items: center;
}
@media (max-width: 720px) {
  header { padding: .75rem .85rem !important; gap: .5rem !important; }
  header strong { width: 100%; }
  main { padding: 0 .75rem 1.5rem !important; margin: .75rem auto !important; }
  section, .card {
    padding: .85rem !important;
    border-radius: 10px !important;
  }
  .row > div, .row > label { flex: 1 1 100%; }
  input, select, button { width: 100%; }
  header input, header button, header select { width: auto; flex: 1 1 auto; min-width: 0; }
  header a { margin-right: .4rem; }
  table { display: block; overflow-x: auto; width: 100%; }
  .grid-2, main.grid, main[style*="grid"] {
    grid-template-columns: 1fr !important;
  }
}
@media (max-width: 420px) {
  body { font-size: 15px; }
  h1 { font-size: 1.35rem; }
  h2 { font-size: 1.05rem; }
}