.form {
  display: grid;
  gap: 12px;
  margin-top: 14px;
}

.form-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}

.field {
  display: grid;
  gap: 6px;
}

label {
  font-size: 13px;
  color: var(--muted);
}

input,
select,
textarea {
  width: 100%;
  padding: 12px 12px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--surface) 80%, transparent);
  color: var(--text);
  outline: none;
  min-height: 46px;
}

textarea {
  min-height: 96px;
  resize: vertical;
}

input::placeholder,
textarea::placeholder {
  color: color-mix(in oklab, var(--muted) 70%, transparent);
}

.help {
  font-size: 12px;
  color: var(--muted-2);
}

.error {
  font-size: 12px;
  color: #ffb4b4;
  display: none;
}

.field[data-error="1"] .error {
  display: block;
}

.field[data-error="1"] input,
.field[data-error="1"] select,
.field[data-error="1"] textarea {
  border-color: rgba(255, 120, 120, 0.7);
}

.actions-row {
  display: grid;
  gap: 10px;
  margin-top: 6px;
}

.toast {
  position: fixed;
  left: 50%;
  bottom: calc(env(safe-area-inset-bottom) + 92px);
  transform: translateX(-50%);
  padding: 12px 14px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: color-mix(in oklab, var(--bg) 80%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  color: var(--text);
  box-shadow: var(--shadow);
  display: none;
  z-index: 50;
  max-width: min(560px, calc(100vw - 24px));
}

.toast.show {
  display: block;
}

@media (min-width: 720px) {
  .form-grid.two {
    grid-template-columns: 1fr 1fr;
  }
  .actions-row {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}
input[type="date"],
input[type="time"] {
  cursor: pointer;
  touch-action: manipulation;
}