html {
  -webkit-text-size-adjust: 100%;
  touch-action: manipulation;
}

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

button {
  -webkit-tap-highlight-color: transparent;
}

#app {
  min-height: 100dvh;
}

@media (max-width: 600px) {
  body {
    background: #fff;
  }

  #app {
    width: 100%;
    box-shadow: none;
  }

  header {
    height: auto;
    min-height: 72px;
    padding: 10px 14px;
    padding-top: max(10px, env(safe-area-inset-top));
  }

  header h1 {
    font-size: 26px;
  }

  header p {
    font-size: 13px;
  }

  .back,
  .settings {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
  }

  main {
    padding: 16px 14px calc(28px + env(safe-area-inset-bottom));
  }

  .fit-card {
    padding: 15px;
  }

  .fit-card .ico {
    font-size: 31px;
  }

  .tools {
    gap: 10px;
  }

  .tool-card {
    min-height: 112px;
    padding: 12px;
  }

  .photo-preview {
    height: min(42vh, 280px);
  }

  .primary,
  .outline {
    min-height: 50px;
  }

  .field-row {
    flex-wrap: wrap;
  }

  .field-row label {
    flex-basis: 100%;
  }

  .field-row input,
  .field-row select {
    width: calc(100% - 38px);
    text-align: left;
  }

  .segments {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .seg,
  .seg:first-child,
  .seg:last-child {
    min-height: 44px;
    border-radius: 9px;
  }

  .chip {
    min-height: 42px;
  }

  .form-grid,
  .actions {
    grid-template-columns: 1fr;
  }

  .select-empty {
    min-height: calc(100dvh - 130px);
  }

  #toast {
    bottom: calc(18px + env(safe-area-inset-bottom));
    max-width: calc(100% - 28px);
    white-space: normal;
    text-align: center;
  }

  .compare {
    font-size: 14px;
  }
}