.homework-countdown {
  /* 布局与盒模型 */
  display: flex;
  flex-direction: column;
  margin-top: 0.75rem;
  padding: 0.9rem 1.2rem; /* 两侧 padding 稍微加宽一点，让呼吸感更好 */
  border-radius: 0.8rem;
  
  /* 视觉外观 */
  border: 1px solid color-mix(in srgb, var(--md-default-fg-color) 10%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--md-accent-fg-color) 10%, transparent), transparent 55%),
    color-mix(in srgb, var(--md-default-bg-color) 92%, var(--md-accent-fg-color) 8%);
  
  /* 过渡动画：当状态变为过期时，有一个平滑的渐变过渡 */
  transition: all 0.3s ease-in-out;
}

.homework-countdown__label {
  /* 排版 */
  font-size: 0.8rem;
  line-height: 1.2;
  color: var(--md-default-fg-color--light);
}

.homework-countdown__value {
  /* 布局 */
  margin-top: 0.35rem; /* 间距微调，让标题和数值层级更分明 */
  
  /* 排版 */
  font-size: 1.05rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums; /* 配合 JS 的补零逻辑，完美实现等宽数字跳动 */
  letter-spacing: 0.02em; /* 数字稍微拉开一点间距，提升辨识度 */
  color: var(--md-default-fg-color);
}

/* 过期状态 */
.homework-countdown--expired {
  border-color: color-mix(in srgb, var(--md-typeset-a-color) 20%, transparent);
  background:
    linear-gradient(135deg, color-mix(in srgb, var(--md-typeset-a-color) 12%, transparent), transparent 55%),
    color-mix(in srgb, var(--md-default-bg-color) 94%, var(--md-typeset-a-color) 6%);
  
  /* 过期后整体透明度微微降低，视觉上降低优先级 */
  opacity: 0.85; 
}