:root{
  --cb-border:        #e5e7eb;
  --cb-bg:            #ffffff;     /* 容器底色（修复黑圈） */
  --cb-card:          #ffffff;
  --cb-fg:            #111827;
  --cb-muted:         #6b7280;
  --cb-accent:        #2563eb;
  --cb-radius:        12px;
  --cb-shadow:        0 2px 8px rgba(0,0,0,.08);

  /* 覆盖层渐变（浅色/深色任选其一） */
  --cb-overlay-grad:       linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.85) 85%, rgba(255,255,255,.95) 100%);
  --cb-overlay-grad-dark:  linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(15,23,42,.65) 85%, rgba(15,23,42,.85) 100%);
}

.codebox{
  border-radius: var(--cb-radius);
  background: var(--cb-card);
  box-shadow: var(--cb-shadow);
  margin: 1.25rem 0;
  overflow: hidden;
}
.codebox__toggle{ position: absolute; opacity: 0; pointer-events: none; }

.codebox__header{
  display: flex; align-items: center; justify-content: space-between; gap: .5rem;
  padding: .3rem .6rem;
  border-bottom: 1px solid var(--cb-border);
  background: color-mix(in oklab, var(--cb-card) 85%, #f3f4f6 15%);
}
.codebox__summary{ display:inline-flex; align-items:center; gap:.5rem; cursor:pointer; user-select:none; }
.codebox__meta{ font-size:.85rem; color:var(--cb-muted); font-weight:600; max-width:36ch; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.codebox__meta::before{ content: "</>"; display:inline-block; width:1em; height:1em; border-radius:4px; margin-right: .7rem; }

.codebox__chevron{
  --s: 8px; width:var(--s); height:var(--s);
  border-right:2px solid var(--cb-muted); border-bottom:2px solid var(--cb-muted);
  transform: rotate(45deg);
  transition: transform .2s ease, border-color .2s ease;
}
.codebox__toggle:checked ~ .codebox__header .codebox__chevron{
  transform: rotate(-135deg); border-color: var(--cb-accent);
}

.codebox__copy{
  appearance:none; border:0px solid var(--cb-border); background:transparent;
  color:var(--cb-muted); font-size:.75rem; padding:.1rem .6rem; border-radius:8px; cursor:pointer;
  transition: color .15s ease, border-color .15s ease, background-color .15s ease;
}
.codebox__copy:hover{
  color:var(--cb-accent);
  border-color: color-mix(in oklab, var(--cb-accent) 50%, var(--cb-border) 50%);
  background: color-mix(in oklab, var(--cb-accent) 10%, #ffffff 90%);
}

/* 主体 */
.codebox__body{ position:relative; overflow:hidden; transition:max-height .3s ease; background:var(--cb-bg); }

/* 折叠时限制高度；展开时无限制 */
.codebox__toggle:not(:checked) ~ .codebox__body{ max-height: var(--codebox-collapsed-h, 160px); }
.codebox__toggle:checked ~ .codebox__body{ max-height: none; }

/* 代码内容：仅它在折叠 hover 时模糊 */
.codebox__content{ position: relative; z-index: 0; }
.codebox:hover .codebox__toggle:not(:checked) ~ .codebox__body .codebox__content{
  filter: blur(1.2px);
}

/* 代码区兜底：背景透明，避免黑圈 */
.codebox__body pre{
  margin:0; padding:.85rem 1rem;
  background: transparent !important;
  color:#0f172a; /* 视主题调 */
  overflow:auto; font-size:.9rem; line-height:1.55;
}

/* 覆盖层：默认隐藏；仅“收起时”显示 */
.codebox__overlay{
  display: none;
  pointer-events: none;               /* 允许点击穿透到 label */
  position:absolute; inset:0;
  opacity: 1; transition: opacity .2s ease;
  z-index: 1;
}
.codebox__toggle:not(:checked) ~ .codebox__body .codebox__overlay{ display: block; }

/* 渐变背景（可换为 --cb-overlay-grad-dark） */
.codebox__overlay::before{
  content:""; position:absolute; inset:0; background: var(--cb-overlay-grad);
}

/* 提示文字：可点击（label），确保在最上层且不被模糊影响 */
.codebox__overlay-text{
  pointer-events: auto;               /* 让文字可点，切换 checkbox */
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  font-size:.75rem; color:var(--cb-muted);
  background: color-mix(in oklab, #ffffff 85%, var(--cb-card) 15%);
  border:1px solid var(--cb-border); padding:.25rem .6rem; border-radius:999px;
  white-space:nowrap; backdrop-filter: blur(2px);
  z-index: 2;
}

/* 减少动画偏好 */
@media (prefers-reduced-motion: reduce){
  .codebox__body, .codebox__overlay, .codebox__chevron { transition: none !important; }
}