* {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--color-surface-page);
  color: var(--color-text);
  font-family: Arial, Helvetica, sans-serif;
  line-height: 1.5;
}

a {
  color: var(--color-brand);
  text-decoration: none;
}

label {
  display: block;
  margin-bottom: 0.25rem;
  font-weight: 700;
}

input,
select,
textarea {
  width: 100%;
  border: 1px solid var(--color-border);
  border-radius: 6px;
  background-color: var(--color-surface);
  color: var(--color-text);
  padding: 0.6rem;
  font: inherit;
}

input:focus,
select:focus,
textarea:focus {
  outline: 2px solid color-mix(in srgb, var(--color-focus) 24%, transparent);
  border-color: var(--color-focus);
}

select {
  appearance: none;
  padding-right: 2.25rem;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--color-text-muted) 50%),
    linear-gradient(135deg, var(--color-text-muted) 50%, transparent 50%);
  background-position:
    calc(100% - 1.05rem) 50%,
    calc(100% - 0.75rem) 50%;
  background-size:
    0.35rem 0.35rem,
    0.35rem 0.35rem;
  background-repeat: no-repeat;
}

select:hover {
  border-color: color-mix(in srgb, var(--color-brand) 45%, var(--color-border));
}

select:disabled {
  background-color: var(--color-surface-disabled);
  color: var(--color-text-muted);
  cursor: not-allowed;
}

textarea {
  resize: vertical;
}