.radio-input input[name="qradio"],
.radio-input input[name="qcheck"] {
  display: none;
}
.radio-input {
  display: flex;
  flex-direction: column;
  padding: 20px;
  background: #fff;
  color: #000;
  border-radius: 10px;
  box-shadow: 0px 87px 78px -39px rgba(0,0,0,0.4);
  width: 550px;
}
.info {
  margin-bottom: 14px;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap:12px;
}
.question {
  color: rgb(49, 49, 49);
  font-size: 1rem;
  line-height: 1.5rem;
  font-weight: 700;
  flex:1;
}
.steps {
  background-color: rgb(0, 0, 0);
  padding: 4px 8px;
  color: #fff;
  border-radius: 4px;
  font-size: 12px;
  line-height: 12px;
  font-weight: 600;
  white-space: nowrap;
}
.radio-input label {
  display: flex;
  background-color: #fff;
  padding: 14px;
  margin: 8px 0 0 0;
  font-size: 14px;
  font-weight: 500;
  border-radius: 10px;
  cursor: pointer;
  border: 1px solid rgba(187, 187, 187, 0.4);
  color: #000;
  transition: .3s ease;
}
.radio-input label:hover {
  background-color: rgba(24, 24, 24, 0.08);
  border: 1px solid #bbb;
}
.result {
  margin-top: 14px;
  font-weight: 600;
  font-size: 14px;
  display: none;
  transition: 0.3s;
}
.result.success {
  color: green;
}
.result.error {
  color: red;
}
/* 错误选项选中红色 */
.radio-input input:checked + label {
  border-color: red;
  color: red;
}
/* 正确选项选中绿色 */
.radio-input input.correct:checked + label {
  border-color: rgb(22, 245, 22);
  color: rgb(16, 184, 16);
}
/* 显示对错提示 */
.radio-input:has(input.correct:checked) .result.success {
  display: block;
}
.radio-input:has(input:not(.correct):checked) .result.error {
  display: block;
}

/* ========== 底部道路动画卡片 ========== */
.card {
  width: 500px;
  height: 120px;
  background: #353535;
  transform-style: preserve-3d;
  transform: perspective(30rem) rotateX(30deg) translateY(100px);
  position: relative;
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.card::before {
  content: "";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  width: 100%;
  height: 10px;
  background: linear-gradient(
    90deg,
    #fff 0%,
    #fff 70%,
    #353535 70%,
    #353535 100%
  );
  background-size: 120px;
  animation: animateRoad 0.5s linear infinite;
}
@keyframes animateRoad {
  0% {
    background-position: 0px;
  }
  100% {
    background-position: -120px;
  }
}
.card::after {
  content: "";
  width: 100%;
  height: 20px;
  position: absolute;
  bottom: -20px;
  background-color: #272727;
  transform-origin: top;
  transform: perspective(30rem) rotateX(-30deg);
  box-shadow: 0 10px 20px -2px #272727;
  border-bottom-left-radius: 6px;
  border-bottom-right-radius: 6px;
}
.shadow {
  color: #fff;
  padding: 10px;
  letter-spacing: 1px;
}
/* From Uiverse.io by arthur_6104 */ 
.box-button {
  cursor: pointer;
  border: 4px solid black;
  background-color: gray;
  padding-bottom: 10px;
  transition: 0.1s ease-in-out;
  user-select: none;
}

.button {
  background-color: #dddddd;
  border: 4px solid #fff;
  padding: 3px 8px;
}

.button span {
  font-size: 1.2em;
  letter-spacing: 1px;
}

.box-button:active {
  padding: 0;
  margin-bottom: 10px;
  transform: translateY(10px);
}

/* From Uiverse.io by cssbuttons-io */ 
/* 绿色确认按钮，独立类名，不会和其他按钮冲突 */
.confirm-green-btn {
  font-size: 12px;
  background-color: #008542;
  color: #fff;
  text-shadow: 0 2px 0 rgb(0 0 0 / 25%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  border: 0;
  z-index: 1;
  user-select: none;
  cursor: pointer;
  text-transform: uppercase;
  letter-spacing: 1px;
  white-space: unset;
  padding: 0.8rem 1.5rem;
  text-decoration: none;
  font-weight: 900;
  transition: all 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
}
.confirm-green-btn:before {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
  z-index: -1;
  background-color: #008542 !important;
  box-shadow: 0 -4px rgb(21 108 0 / 50%) inset,
    0 4px rgb(100 253 31 / 99%) inset, -4px 0 rgb(100 253 31 / 50%) inset,
    4px 0 rgb(21 108 0 / 50%) inset;
}
.confirm-green-btn:after {
  position: absolute;
  pointer-events: none;
  top: 0;
  left: 0;
  display: block;
  width: 100%;
  height: 100%;
  content: "";
  box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
  transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
}
.confirm-green-btn:hover:before {
  box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset,
    -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;
}
.confirm-green-btn:hover:after {
  box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
}
.confirm-green-btn:active {
  transform: translateY(4px);
}
.confirm-green-btn:active:after {
  box-shadow: 0 0px 0 0 rgb(0 0 0 / 15%);
}