/* 完全移除 html/body 全局样式，避免干扰 */ 
 /* 简化容器：仅包裹元素，无背景/阴影/圆角等视觉样式 */ 
 .todo-list {
  width: 100%; /* 占据整个表格单元格宽度 */
  margin: 0; /* 取消外边距 */
  padding: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%; /* 占据整个表格单元格高度 */
}
 /* 核心：调整复选框容器，仅展示复选框 */ 
.todo {
  display: block;
  position: relative;
  padding: 0; /* 清空原有内边距 */
  margin: 0; /* 取消间距，确保居中 */
  cursor: pointer;
  width: 25px; /* 复选框宽度（匹配SVG尺寸） */
  height: 25px; /* 复选框高度 */
  border: none; /* 移除底部边框 */
}
/* 当复选框禁用时，容器也显示禁用状态 */
.todo input:disabled {
  cursor: not-allowed;
}
.todo input:disabled + .todo__icon {
  stroke: #ccc;
}
 /* 隐藏原生复选框（核心不变） */ 
 .todo__state { 
   position: absolute; 
   top: 0; 
   left: 0; 
   opacity: 0; 
   width: 100%; 
   height: 100%; 
   cursor: pointer; 
 } 
 /* 禁用状态样式 */ 
 .todo__state:disabled ~ .todo__icon { 
   stroke: #ccc; 
   cursor: not-allowed; 
 } 
 .todo__state:disabled ~ .todo__icon .todo__check { 
   stroke: #ccc; 
 } 
 .todo__state:disabled ~ .todo__icon .todo__circle { 
   stroke: #ccc; 
 } 
 .todo__state:disabled + .todo__icon { 
   stroke: #ccc; 
 }
 /* 移除文本相关样式（不需要文本） */ 
 .todo__text { 
   display: none; 
 } 
 /* SVG动效容器：固定尺寸，覆盖整个复选框 */ 
 .todo__icon { 
   position: absolute; 
   top: 0; 
   left: 0; 
   width: 100%; 
   height: 100%; 
   margin: 0; 
   fill: none; 
   stroke: #111; 
   stroke-width: 1.5; 
   stroke-linejoin: round; 
   stroke-linecap: round; 
 } 
 /* 以下动效核心样式完全保留，不改动 */ 
 .todo__box, 
 .todo__check { 
   transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1); 
 } 
 .todo__circle { 
   stroke: #111; 
   stroke-dasharray: 1 6; 
   stroke-width: 0; 
   transform-origin: 15px 15px; 
   transform: scale(0.7) rotate(0deg); 
   animation: none 0.8s linear; 
 } 
 @keyframes explode { 
   30% { 
     stroke-width: 3; 
     stroke-opacity: 1; 
     transform: scale(1.4) rotate(40deg); 
   } 
   100% { 
     stroke-width: 0; 
     stroke-opacity: 0; 
     transform: scale(1.8) rotate(60deg); 
   } 
 } 
  
 .todo__box {
  stroke-dasharray: 104, 104;
  stroke-dashoffset: 0;
  transition-delay: 0.16s;
} 
 .todo__check { 
   stroke: #111; 
   stroke-dasharray: 20, 20; 
   stroke-dashoffset: 20; 
   transition-duration: 0.32s; 
   stroke-width: 2; 
 } 
 .todo__circle { 
   animation-delay: 0.56s; 
   animation-duration: 0.56s; 
 } 
  
 .todo__state:checked ~ .todo__icon .todo__box {
  stroke-dashoffset: 104;
  transition-delay: 0s;
} 
 .todo__state:checked ~ .todo__icon .todo__check { 
   stroke-dashoffset: 0; 
   transition-delay: 0.48s; 
 } 
 .todo__state:checked ~ .todo__icon .todo__circle { 
   animation-name: explode; 
 } 
 /* 兼容-webkit-前缀（可选，适配旧浏览器） */ 
 .todo__box,
.todo__check {
  transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1);
  -webkit-transition: stroke-dashoffset 0.8s cubic-bezier(0.9, 0, 0.5, 1);
} 
 .todo__circle {
  transform-origin: 15px 15px;
  transform: scale(0.3) rotate(0deg);
  animation: none 0.8s linear;
  -webkit-transform-origin: 15px 15px;
  -webkit-transform: scale(0.3) rotate(0deg);
  -webkit-animation: none 0.8s linear;
} 
 @keyframes explode {
  30% {
    stroke-width: 3;
    stroke-opacity: 1;
    transform: scale(1.4) rotate(40deg);
  }
  100% {
    stroke-width: 0;
    stroke-opacity: 0;
    transform: scale(1.8) rotate(60deg);
  }
}

@-webkit-keyframes explode {
  30% {
    stroke-width: 3;
    stroke-opacity: 1;
    -webkit-transform: scale(1.4) rotate(40deg);
  }
  100% {
    stroke-width: 0; 
    stroke-opacity: 0;
    -webkit-transform: scale(1.8) rotate(60deg);
  }
} 
 .todo__box {
  transition-delay: 0.16s;
  -webkit-transition-delay: 0.16s;
}
.todo__check {
  transition-duration: 0.32s;
  -webkit-transition-duration: 0.32s;
}
.todo__circle {
  animation-delay: 0.56s;
  animation-duration: 0.56s;
  -webkit-animation-delay: 0.56s;
  -webkit-animation-duration: 0.56s;
}

.todo__state:checked ~ .todo__icon .todo__box {
  transition-delay: 0s;
  -webkit-transition-delay: 0s;
}
.todo__state:checked ~ .todo__icon .todo__check {
  transition-delay: 0.48s;
  -webkit-transition-delay: 0.48s;
}
.todo__state:checked ~ .todo__icon .todo__circle {
  animation-name: explode;
  -webkit-animation-name: explode;
}