input[type="checkbox"],
input[type="radio"] {
  appearance: none;
  -webkit-appearance: none;

  width: 16px;
  height: 16px;

  background-color: #d9d9d9;
  border: none;

  cursor: pointer;
  position: relative;

  transition:
    background-color 0.15s ease,
    transform 0.1s ease;
}

/* hover 效果 */
input[type="checkbox"]:hover,
input[type="radio"]:hover {
  filter: brightness(1.05);
}

/* 点击缩放动画 */
input[type="checkbox"]:active,
input[type="radio"]:active {
  transform: scale(0.9);
}

/* 选中状态 */
input[type="checkbox"]:checked,
input[type="radio"]:checked {
  background-color: #174e80;
}

/* ===== checkbox：白色对勾 ===== */
input[type="checkbox"] {
  border-radius: 3px;
}

input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;

  left: 6px;
  top: 3px;

  width: 4px;
  height: 8px;

  border: solid #ffffff;
  border-width: 0 2px 2px 0;

  transform: rotate(45deg);
}

/* ===== radio：白色圆点 ===== */
input[type="radio"] {
  border-radius: 50%;
}

input[type="radio"]:checked::after {
  content: "";
  position: absolute;

  width: 8px;
  height: 8px;

  background-color: #ffffff;
  border-radius: 50%;

  top: 50%;
  left: 50%;

  transform: translate(-50%, -50%);
}

/* input[type="text"],
textarea {
  width: 100%;
  font-size: 20px;

  border-radius: 10px;
  border: 1px solid #d9d9d9;

  padding: 10px 12px;
  outline: none;

  background-color: #fff;

  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease;
} */

/* placeholder 样式 */
/* input[type="text"]::placeholder,
textarea::placeholder {
  color: #d9d9d9;
  font-size: 20px;
} */

/* hover 状态 */
/* input[type="text"]:hover,
textarea:hover {
  border-color: #174e80;
} */

/* focus / active 状态 */
/* input[type="text"]:focus,
textarea:focus {
  border-color: #174e80;
  box-shadow: 0 0 0 3px rgba(23, 78, 128, 0.15);
} */