/* 精简的复选框样式 */
.cyber-checkbox {
  --checkbox-size: 24px;
  --checkbox-color: #8B7EF8; /* 使用与auth.html中相同的紫色 */
  --checkbox-check-color: #ffffff;
  position: relative;
  display: inline-block;
  cursor: pointer;
  user-select: none;
}

.cyber-checkbox input {
  display: none;
}

.cyber-checkbox__mark {
  position: relative;
  display: inline-block;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  min-width: var(--checkbox-size); /* 防止宽度变化 */
  min-height: var(--checkbox-size); /* 防止高度变化 */
}

.cyber-checkbox__box {
  position: absolute;
  inset: 0;
  border: 2px solid var(--checkbox-color);
  border-radius: 4px;
  background: transparent;
  transition: all 0.2s ease;
}

.cyber-checkbox__check {
  position: absolute;
  inset: 0;
  padding: 2px;
  stroke: var(--checkbox-check-color);
  stroke-width: 2px;
  stroke-linecap: round;
  stroke-linejoin: round;
  fill: none;
  transform: scale(0);
  transition: transform 0.2s ease;
}

/* 悬停效果 */
.cyber-checkbox:hover .cyber-checkbox__box {
  border-color: var(--checkbox-color);
  box-shadow: 0 0 0 2px rgba(139, 126, 248, 0.2);
}

/* 选中状态 */
.cyber-checkbox input:checked + .cyber-checkbox__mark .cyber-checkbox__box {
  background: var(--checkbox-color);
  border-color: var(--checkbox-color);
}

.cyber-checkbox input:checked + .cyber-checkbox__mark .cyber-checkbox__check {
  transform: scale(1);
}

/* 加载动画 - 在勾选状态上添加旋转效果 */
@keyframes checkbox-loading {
  0% {
    transform: rotate(0deg);
    opacity: 0.8;
  }
  50% {
    opacity: 0.5;
  }
  100% {
    transform: rotate(360deg);
    opacity: 0.8;
  }
}

.cyber-checkbox.loading::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  border: 2px solid transparent;
  border-top-color: var(--checkbox-color);
  border-radius: 50%;
  animation: checkbox-loading 0.5s linear infinite;
  pointer-events: none; /* 确保不会干扰点击事件 */
}

/* 禁用状态 - 勾选后不可取消 */
.cyber-checkbox input:disabled + .cyber-checkbox__mark {
  opacity: 0.9;
  cursor: default;
}

.cyber-checkbox input:disabled:checked + .cyber-checkbox__mark .cyber-checkbox__box {
  background: var(--checkbox-color);
  border-color: var(--checkbox-color);
}

/* 活动状态 */
.cyber-checkbox:active .cyber-checkbox__box {
  transform: scale(0.9);
}

/* 粒子效果 */
.cyber-checkbox__particles {
  position: absolute;
  inset: -50%;
  pointer-events: none;
}

.cyber-checkbox__particles div {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--checkbox-color);
  opacity: 0;
}

/* 粒子动画 - 简化版 */
@keyframes particle-animation {
  0% {
    transform: translate(0, 0) scale(0);
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    transform: translate(var(--x, 20px), var(--y, 20px)) scale(1);
    opacity: 0;
  }
}

.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-1 {
  --x: -20px;
  --y: -20px;
  animation: particle-animation 0.4s ease-out forwards;
}

.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-2 {
  --x: 20px;
  --y: -20px;
  animation: particle-animation 0.4s ease-out forwards 0.1s;
}

.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-3 {
  --x: 20px;
  --y: 20px;
  animation: particle-animation 0.4s ease-out forwards 0.15s;
}

.cyber-checkbox input:checked + .cyber-checkbox__mark .particle-4 {
  --x: -20px;
  --y: 20px;
  animation: particle-animation 0.4s ease-out forwards 0.05s;
}