/* Figma 2085:855：白色文字气泡的指向箭头与气泡背景保持一致。 */
.cc-tip.light.上::after { border-top-color: #fff; }
.cc-tip.light.下::after { border-bottom-color: #fff; }
.cc-tip.light.左::after { border-left-color: #fff; }
.cc-tip.light.右::after { border-right-color: #fff; }

/* Figma 3253:7810 — 头像使用压缩包提供的原始 22×22px 男女渐变背景。 */
.cc-avatar,
.cc-avatar-name > img,
.cc-avatar-photo > img,
.cc-avatar-group > img {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  display: block;
  flex: 0 0 22px;
  border: .5px solid rgba(255, 255, 255, .8);
  border-radius: 50%;
  object-fit: cover;
}
.cc-avatar-name > i { display: none; }
.cc-avatar-name {
  box-sizing: border-box;
  min-width: 62px;
  height: 22px;
  padding: 0 8px 0 0;
  gap: 4px;
  color: #333;
  font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif;
}
.cc-avatar-hover { background: rgba(0, 0, 0, .04); }
.cc-avatar-active { color: #2279d6; background: rgba(41, 144, 255, .08); }
.cc-avatar-group { height: 22px; align-items: center; }
.cc-avatar-group > img + img,
.cc-avatar-group > b { margin-left: -6px; }
.cc-avatar-group > b {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  display: grid;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 50%;
  color: #666;
  background: #edf0f4;
  font: 400 10px/20px "Source Han Sans CN", "思源黑体 CN", sans-serif;
}
.cc-avatar-group-hover { padding: 2px 6px; border-radius: 13px; background: rgba(0, 0, 0, .04); }
.cc-avatar-delete { display: inline-flex; align-items: center; gap: 8px; }
.cc-avatar-delete > button {
  box-sizing: border-box;
  width: 22px;
  height: 22px;
  padding: 5px;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 4px;
  background: rgba(0, 0, 0, .04);
}

/* 指定通用组件采用横向变量排布；空间不足时换行，不产生横向滚动。 */
.cc-section:has(.cc-card[data-cc-group="徽标点"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="徽标数量"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="徽章文本"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="徽章图标"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="徽章化身"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="三角徽标"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="分割线"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="悬浮按钮"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="文字气泡"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="计数器"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="Tab切换"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="单选"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="多选"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(168px, 1fr)) !important;
  align-items: stretch;
}

/* 第二批横向变量组 */
.cc-section:has(.cc-card[data-cc-group="面包屑"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="星级"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="头像"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="分段控件"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="悬浮切换"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="列表切换"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="视图切换"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="时间维度切换"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)) !important;
  align-items: stretch;
}
.cc-section:has(.cc-card[data-cc-group="面包屑"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="星级"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
}
.cc-section:has(.cc-card[data-cc-group="头像"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="分段控件"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="悬浮切换"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="时间维度切换"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}
.cc-section:has(.cc-card[data-cc-group="滚动条"]) .cc-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
}
.cc-section:has(.cc-card[data-cc-group="滚动条"]) .cc-card-wide {
  grid-column: 1 / -1;
}
.cc-section:has(.cc-card[data-cc-group="滚动条"]) .cc-card-compact {
  grid-column: auto;
}
.cc-section:has(.cc-card[data-cc-group="文字气泡"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
}
.cc-section:has(.cc-card[data-cc-group="文字气泡-黑色"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="文字气泡-白色"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)) !important;
  align-items: stretch;
}
.cc-section:has(.cc-card[data-cc-group="Tab切换"]) .cc-grid,
.cc-section:has(.cc-card[data-cc-group="计数器"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)) !important;
}
.cc-section .cc-grid,
.cc-section .cc-card,
.cc-section .cc-demo {
  min-width: 0;
  overflow-x: hidden;
}
@media (max-width: 620px) {
  .cc-section:has(.cc-card[data-cc-group]) .cc-grid {
    grid-template-columns: 1fr !important;
  }
}

/* 宽组件横向变量组：保持内容完整，空间不足自动换行。 */
.cc-section:has(.cc-card[data-cc-group="筛选切换"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 430px), 1fr)) !important;
}
.cc-section:has(.cc-card[data-cc-group="分页器"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 500px), 1fr)) !important;
}
.cc-section:has(.cc-card[data-cc-group="说明"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)) !important;
}
.cc-section:has(.cc-card[data-cc-group="全局提醒"]) .cc-grid {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 560px), 1fr)) !important;
}
.cc-section:has(.cc-card[data-cc-group="筛选切换"]) .cc-card-wide,
.cc-section:has(.cc-card[data-cc-group="分页器"]) .cc-card-wide,
.cc-section:has(.cc-card[data-cc-group="说明"]) .cc-card-wide,
.cc-section:has(.cc-card[data-cc-group="全局提醒"]) .cc-card-wide {
  grid-column: auto;
}
.cc-section:has(.cc-card[data-cc-group="筛选切换"]) .cc-demo,
.cc-section:has(.cc-card[data-cc-group="分页器"]) .cc-demo,
.cc-section:has(.cc-card[data-cc-group="说明"]) .cc-demo,
.cc-section:has(.cc-card[data-cc-group="全局提醒"]) .cc-demo {
  width: 100%;
  min-width: 0;
  overflow-x: hidden !important;
}
.cc-section:has(.cc-card[data-cc-group="全局提醒"]) .cc-alert,
.cc-section:has(.cc-card[data-cc-group="说明"]) .cc-notice {
  width: 100%;
  max-width: 620px;
}

/* Figma 2086:2969 — 计数器 */
.cc-counter { width: 82px; height: 22px; gap: 1px; }
.cc-counter button { width: 22px; height: 22px; padding: 4px; background: #f7f8fa; }
.cc-counter button:first-child { border-radius: 4px 0 0 4px; }
.cc-counter button:last-child { border-radius: 0 4px 4px 0; }
.cc-counter span { width: 36px; height: 22px; color: #333; background: #f7f8fa; font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; }
.cc-counter .cc-icon { width: 22px; height: 22px; max-width: none; }

/* Figma 3096:970 — 分页器，小 486×24px，大 612×32px。 */
.cc-pagination { box-sizing: border-box; width: 612px; max-width: 100%; height: 32px; gap: 8px; flex-wrap: nowrap; justify-content: flex-start; color: #666; font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; }
.cc-pagination.small { width: 486px; height: 24px; gap: 6px; font-size: 12px; line-height: 18px; }
.cc-pagination button { flex: 0 0 32px; width: 32px; height: 32px; padding: 0; border-color: #d9d9d9; border-radius: 4px; }
.cc-pagination.small button { flex-basis: 24px; width: 24px; height: 24px; }
.cc-pagination button.on { color: #fff; border-color: #2990ff; background: #2990ff; }
.cc-page-total, .cc-page-size, .cc-page-jump { flex: 0 0 auto; white-space: nowrap; }
.cc-page-size { box-sizing: border-box; height: 32px; padding: 5px 8px; border: 1px solid #d9d9d9; border-radius: 4px; }
.cc-pagination.small .cc-page-size { height: 24px; padding: 2px 6px; }
.cc-page-jump { display: inline-flex; align-items: center; gap: 4px; }
.cc-page-jump i { box-sizing: border-box; width: 32px; height: 32px; display: grid; place-items: center; border: 1px solid #d9d9d9; border-radius: 4px; color: #333; background: #fff; font-style: normal; }
.cc-pagination.small .cc-page-jump i { width: 24px; height: 24px; }
.cc-pagination.small { gap: 4px; }
.cc-pagination.small .cc-page-total { width: 44px; }
.cc-pagination.small .cc-page-size { width: 62px; padding: 2px 4px; text-align: center; }
.cc-pagination.small .cc-page-jump { width: 76px; gap: 3px; }
.cc-pagination:not(.small) .cc-page-total { width: 50px; }
.cc-pagination:not(.small) .cc-page-size { width: 72px; padding: 5px 6px; text-align: center; }
.cc-pagination:not(.small) .cc-page-jump { width: 88px; }

/* Figma 3253:7810 — 默认头像展示姓名最后两个字。 */
.cc-avatar-token { position: relative; box-sizing: border-box; width: 22px; height: 22px; display: inline-grid; flex: 0 0 22px; place-items: center; border-radius: 50%; overflow: hidden; }
.cc-avatar-token > img { position: absolute; inset: 0; width: 22px; height: 22px; display: block; }
.cc-avatar-token > em { position: relative; z-index: 1; color: #fff; font: 400 8px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; font-style: normal; letter-spacing: -.5px; }
.cc-avatar-name > .cc-avatar-token { margin: 0; }
.cc-avatar-group > .cc-avatar-token + .cc-avatar-token, .cc-avatar-group > .cc-avatar-token + b { margin-left: -6px; border: 1px solid #fff; }

/* Figma 2088:454 — 视图切换 152×32px。 */
.cc-view-switch { box-sizing: border-box; width: 152px; height: 32px; border: 0; border-radius: 4px; overflow: hidden; }
.cc-view-switch button { box-sizing: border-box; width: 76px; height: 32px; padding: 5px 24px; justify-content: center; border: 0; color: #666; background: #fff; font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; white-space: nowrap; }
.cc-view-switch:not(.left) button:first-child, .cc-view-switch.left button:last-child { color: #fff; background: #2990ff; }
.cc-view-switch:not(.left) button:last-child, .cc-view-switch.left button:first-child { color: #666; background: #fff; }
.cc-view-switch.hover:not(.left) button:last-child, .cc-view-switch.left.hover button:first-child { color: #4ba2ff; background: #fff; }
.cc-view-switch.active:not(.left) button:last-child, .cc-view-switch.left.active button:first-child { color: #2279d6; background: #fff; }

/* Figma 2091:628 — 悬浮切换。 */
.cc-floating-switch { box-sizing: border-box; min-width: 157px; height: 38px; min-height: 38px; padding: 4px; border: 1px solid #e8e8e8; border-radius: 4px; background: rgba(255,255,255,.6); box-shadow: 0 4px 10px rgba(0,0,0,.08); }
.cc-floating-switch.custom { min-width: 140px; }
.cc-floating-switch button { box-sizing:border-box; height: 30px; padding: 4px 8px; border-radius: 4px; color: #666; font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; }
.cc-floating-switch button.on { color: #2990ff; background: #ddedff; box-shadow: none; }
.cc-floating-switch button.hover { color: #4ba2ff; }
.cc-floating-switch button.active { color: #2279d6; }

/* 缺失变量的原始尺寸与状态 */
.cc-tip.上左::after{left:12px;bottom:-10px;border-top-color:#333}.cc-tip.上右::after{right:12px;bottom:-10px;border-top-color:#333}.cc-tip.下左::after{left:12px;top:-10px;border-bottom-color:#333}.cc-tip.下右::after{right:12px;top:-10px;border-bottom-color:#333}.cc-tip.左上::after{right:-10px;top:7px;border-left-color:#333}.cc-tip.左下::after{right:-10px;bottom:7px;border-left-color:#333}.cc-tip.右上::after{left:-10px;top:7px;border-right-color:#333}.cc-tip.右下::after{left:-10px;bottom:7px;border-right-color:#333}.cc-tip.light.上左::after,.cc-tip.light.上右::after{border-top-color:#fff}.cc-tip.light.下左::after,.cc-tip.light.下右::after{border-bottom-color:#fff}.cc-tip.light.左上::after,.cc-tip.light.左下::after{border-left-color:#fff}.cc-tip.light.右上::after,.cc-tip.light.右下::after{border-right-color:#fff}.cc-tip-title{min-width:88px;min-height:54px;padding:5px 8px;display:grid;align-content:center;gap:0}.cc-tip-title b{font-size:14px;line-height:22px}.cc-tip-title em{color:#fff;font-size:12px;line-height:18px;font-style:normal}.cc-float{position:relative}.cc-float>i{position:absolute;right:-5px;top:-5px}.cc-float>.cc-badge-count{right:-10px;top:-8px}.cc-float-expanded{box-sizing:border-box;width:28px;height:172px;padding:4px 3px;display:flex;flex-direction:column;align-items:center;gap:8px;border:1px solid #e8e8e8;border-radius:19px;background:rgba(255,255,255,.6);box-shadow:0 4px 10px rgba(0,0,0,.08)}.cc-float-expanded button{box-sizing:border-box;width:22px;height:22px;padding:3px;display:grid;place-items:center;border:0;border-radius:11px;background:transparent}.cc-counter-input{box-sizing:border-box;width:92px;height:32px;padding-left:12px;display:grid;grid-template-columns:1fr 22px 22px;align-items:center;border:1px solid #d9d9d9;border-radius:4px;color:#999;background:#fff;font-size:14px;line-height:22px;overflow:hidden}.cc-counter-input.active{border-color:#2279d6;color:#333}.cc-counter-input.hover{border-color:#2990ff;color:#333}.cc-counter-input button{width:22px;height:30px;padding:0;border:0;border-left:1px solid #e8e8e8;color:#666;background:#fff}.cc-counter-white{box-sizing:border-box;width:104px;height:32px;display:grid;grid-template-columns:32px 40px 32px;border:1px solid #d9d9d9;border-radius:4px;background:#fff;overflow:hidden}.cc-counter-white.small{width:84px;height:24px;grid-template-columns:24px 36px 24px}.cc-counter-white>*{display:grid;place-items:center;border:0;border-right:1px solid #e8e8e8;color:#666;background:#fff;font-size:14px}.cc-counter-white>*:last-child{border-right:0}.cc-tab-custom{width:320px;height:38px;display:flex;border-bottom:1px solid #e8e8e8}.cc-tab-custom.large{width:384px;height:48px}.cc-tab-custom button{position:relative;box-sizing:border-box;width:80px;height:38px;padding:8px 12px;border:0;color:#666;background:transparent;font-size:14px;line-height:22px}.cc-tab-custom.large button{width:96px;height:48px;padding:12px 16px;font-size:16px;line-height:24px}.cc-tab-custom button.selected{color:#2990ff;font-weight:700}.cc-tab-custom button.selected::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:#2990ff}.cc-notice-action{width:min(660px,100%);height:38px;padding:8px 16px;display:flex;align-items:center;gap:4px}.cc-notice-action>span{min-width:0;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.cc-notice-action>button{box-sizing:border-box;height:22px;padding:1px 8px;border:1px solid currentColor;border-radius:11px;color:inherit;background:transparent;font-size:12px;line-height:18px}