/* Figma 2072:3553 final detail pass for shared components. */
.cc-state-icon {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  display: block;
  flex: 0 0 16px;
  border: 0;
  border-radius: 0;
  object-fit: contain;
  filter: none !important;
}
.cc-alert > .cc-state-icon,
.cc-notice-action > .cc-state-icon {
  width: 16px !important;
  height: 16px !important;
  flex: 0 0 16px !important;
  filter: none !important;
}
.cc-state-icon.success { color: #5ab333; }
.cc-state-icon.warning { color: #f0aa32; }
.cc-state-icon.error { color: #e44144; }
.cc-state-icon.info { color: #2990ff; }

/* Global alert: 620×38 / 620×86, 16px icon and 16px side padding. */
.cc-alert {
  box-sizing: border-box;
  width: 620px;
  max-width: 100%;
  height: 38px;
  min-height: 38px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  color: #333;
  font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif;
}
.cc-alert.info { background: #dfeeff; }
.cc-alert.success { background: #e6f4e0; }
.cc-alert.warning { background: #fdf2e0; }
.cc-alert.error { background: #fbe3e3; }
.cc-alert > .cc-state-icon { margin: 0; align-self: center; }
.cc-alert > div { min-width: 0; flex: 1; display: flex; align-items: center; gap: 0; }
.cc-alert > div > b:empty { display: none; }
.cc-alert > div > b { color: #333; font-weight: 700; }
.cc-alert > div > span { color: #333; }
.cc-alert > img:last-child {
  width: 12px !important;
  height: 12px !important;
  flex: 0 0 12px;
  margin: 0;
  object-fit: contain;
}
.cc-alert.title {
  height: 86px;
  min-height: 86px;
  padding: 8px 16px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
}
.cc-alert > .cc-alert-title-row { width: 100%; height: 22px; min-height: 22px; display: flex !important; flex: 0 0 22px !important; flex-direction: row !important; align-items: center !important; grid-template-columns: none !important; gap: 6px; }
.cc-alert > .cc-alert-title-row > .cc-state-icon { flex: 0 0 16px; }
.cc-alert > .cc-alert-title-row > b { min-width: 0; flex: 1; color: #333; font: 500 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; }
.cc-alert > .cc-alert-title-row > .cc-alert-close { width: 16px; height: 16px; padding: 2px; flex: 0 0 16px; }
.cc-alert-description { width: 100%; color: #666; font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; }

/* Checkbox: exact 16px states. */
.cc-checkbox {
  box-sizing: border-box;
  width: 16px;
  height: 16px;
  padding: 0;
  display: inline-grid;
  place-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #fff;
  background: #fff;
  font: 700 11px/14px Arial, sans-serif;
}
.cc-checkbox:hover { border-color: #4ba2ff; }
.cc-checkbox.checked,
.cc-checkbox.half { border-color: #2990ff; background: #2990ff; }
.cc-checkbox.checked:hover,
.cc-checkbox.half:hover { border-color: #4ba2ff; background: #4ba2ff; }
.cc-checkbox.disabled { border-color: #d9d9d9; background: #f7f7f7; color: #bfbfbf; opacity: 1; }
.cc-checkbox.checked.disabled,
.cc-checkbox.half.disabled { border-color: #b6d9ff; background: #b6d9ff; color: #fff; }
.cc-choice { gap: 4px; color: #666; font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; }

/* Pagination: 486×24 / 612×32, no overlap or extra total label. */
.cc-pagination,
.cc-pagination.small {
  box-sizing: border-box;
  max-width: 100%;
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: flex-start;
  color: #333;
  white-space: nowrap;
}
.cc-pagination { width: 612px; height: 32px; gap: 8px; font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif; }
.cc-pagination.small { width: 486px; height: 24px; gap: 6px; font: 400 12px/17px "Source Han Sans CN", "思源黑体 CN", sans-serif; }
.cc-pagination button {
  box-sizing: border-box;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #333;
  background-color: #fff;
  font: inherit;
}
.cc-pagination.small button { width: 24px; height: 24px; flex-basis: 24px; }
.cc-pagination button.on { color: #fff; border-color: #2990ff; background: #2990ff; }
.cc-pagination button.prev,
.cc-pagination button.next {
  color: transparent;
  background-color: #fff;
  background-image: url("assets/icons/线性图标=箭头.svg");
  background-position: center;
  background-size: 12px 12px;
  background-repeat: no-repeat;
}
.cc-pagination button.prev { transform: rotate(180deg); }
.cc-pagination > span { flex: 0 0 auto; }
.cc-page-size {
  box-sizing: border-box;
  width: 92px;
  height: 32px;
  padding: 5px 26px 5px 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  background: #fff url("assets/icons/线性图标=箭头.svg") calc(100% - 8px) center/12px 12px no-repeat;
}
.small .cc-page-size { width: 80px; height: 24px; padding: 3px 22px 3px 6px; background-size: 10px 10px; }
.cc-page-go { color: #333; }
.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;
}
.small .cc-page-jump i { width: 24px; height: 24px; }

/* Notice: 38px high, basic 12px padding, action 16px padding / 4px gap. */
.cc-notice {
  box-sizing: border-box;
  width: 360px;
  max-width: 100%;
  height: 38px;
  padding: 8px 12px;
  border-radius: 6px;
  color: #666;
  background: #edf0f4;
  font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif;
}
.cc-notice.info { color: #333; background: #dfeeff; }
.cc-notice.success { color: #333; background: #e6f4e0; }
.cc-notice.warning { color: #333; background: #fdf2e0; }
.cc-notice.error { color: #333; background: #fbe3e3; }
.cc-notice-action {
  width: min(660px, 100%) !important;
  max-width: 660px !important;
  max-width: 100%;
  height: 38px;
  padding: 8px 16px;
  display: flex;
  align-items: center;
  gap: 4px;
}
.cc-notice-action.info { color: #1990ff; background: #e9f3ff; }
.cc-notice-action.success { color: #5ab333; background: #e6f4e0; }
.cc-notice-action.warning { color: #f0aa32; background: #fdf2e0; }
.cc-notice-action.error { color: #e44144; background: #fbe3e3; }
.cc-notice-action > .cc-state-icon { margin: 0; }
.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;
  min-width: 72px;
  padding: 1px 8px;
  flex: 0 0 auto;
  border: 1px solid currentColor;
  border-radius: 11px;
  color: inherit;
  background: color-mix(in srgb, currentColor 7%, transparent);
  font: 400 12px/18px "Source Han Sans CN", "思源黑体 CN", sans-serif;
}
.cc-card:has(.cc-notice-action) { grid-column: 1 / -1 !important; }
.cc-card:has(.cc-notice-action) .cc-demo { min-height: 92px; }

/* Counter: exact base / input / white variants. */
.cc-counter { width: 82px; height: 22px; gap: 1px; }
.cc-counter button { width: 22px; height: 22px; padding: 4px; display: grid; place-items: center; overflow: visible; border: 0; border-radius: 4px; background: transparent; }
.cc-counter button .cc-icon { width: 14px; height: 14px; max-width: 14px; transform: none; filter: brightness(0) saturate(100%) invert(38%) sepia(0%) saturate(0%) hue-rotate(166deg) brightness(96%) contrast(88%); }
.cc-counter span { width: 36px; height: 22px; display: grid; place-items: center; color: #333; background: transparent; font: 400 12px/17px "Source Han Sans CN", "思源黑体 CN", sans-serif; font-style: normal; letter-spacing: 0; }
.cc-counter.add-hover button:last-child,
.cc-counter.subtract-hover button:first-child { background: rgba(0,0,0,.04); }
.cc-counter.add-active button:last-child,
.cc-counter.subtract-active button:first-child { background: rgba(0,0,0,.04); }
.cc-counter.add-active button:last-child .cc-icon,
.cc-counter.subtract-active button:first-child .cc-icon { filter: brightness(0) saturate(100%) invert(42%) sepia(86%) saturate(1281%) hue-rotate(178deg) brightness(83%) contrast(96%); }

/* Badge icon/avatar: exact 6px dot and 18px counter; avatar reuses the common male avatar. */
.cc-badge-icon { position: relative; width: var(--cc-icon); height: var(--cc-icon); display: inline-block; }
.cc-badge-icon > .cc-icon { width: var(--cc-icon); height: var(--cc-icon); display: block; }
.cc-badge-icon > .cc-dot { position: absolute; width: 6px; height: 6px; right: -4px; top: -3px; }
.cc-badge-icon > .cc-badge-count { position: absolute; right: -10px; top: -9px; width: 18px; min-width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 1px solid #fff; border-radius: 9px; font: 400 12px/18px "Source Han Sans CN", "思源黑体 CN", sans-serif; font-style: normal; }
.cc-badge-avatar { position: relative; width: var(--cc-avatar); height: var(--cc-avatar); display: inline-block; }
.cc-badge-avatar > .cc-avatar-token,
.cc-badge-avatar > .cc-avatar-token > img { width: var(--cc-avatar); height: var(--cc-avatar); display: block; }
.cc-badge-avatar > .cc-avatar-token { border-radius: 4px; overflow: hidden; }
.cc-badge-avatar.round > .cc-avatar-token { border-radius: 50%; }
.cc-badge-avatar > .cc-avatar-token > em { line-height: var(--cc-avatar); font-style: normal; }
.cc-badge-avatar > .cc-avatar-token > em {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: #fff;
  font-family: "Source Han Sans CN", "思源黑体 CN", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1;
  font-style: normal;
  letter-spacing: 0;
  text-align: center;
}
.cc-badge-avatar[style*="32px"] > .cc-avatar-token > em { font-size: 10px; }
.cc-badge-avatar > .cc-dot { position: absolute; width: 6px; height: 6px; right: -2px; top: -2px; }
.cc-badge-avatar > .cc-badge-count { position: absolute; right: -8px; top: -8px; width: 18px; min-width: 18px; height: 18px; padding: 0; display: grid; place-items: center; border: 1px solid #fff; border-radius: 9px; font: 400 12px/18px "Source Han Sans CN", "思源黑体 CN", sans-serif; font-style: normal; }
.cc-counter-input {
  box-sizing: border-box;
  width: 92px;
  height: 32px;
  padding-left: 12px;
  display: flex;
  align-items: center;
  gap: 8px;
  border: 1px solid #d9d9d9;
  border-radius: 4px;
  color: #999;
  background: #fff;
  font: 400 14px/22px Inter,"Source Han Sans CN",sans-serif;
  overflow: hidden;
}
.cc-counter-input.active { border-color: #2279d6; }
.cc-counter-input.hover { border-color: #2990ff; }
.cc-counter-input > span { width: 42px; flex: 0 0 42px; }
.cc-counter-input > i { width: 1px; height: 14px; flex: 0 0 1px; background: #e8e8e8; }
.cc-counter-input > button { width: 14px; height: 14px; flex: 0 0 14px; padding: 0; overflow: visible; border: 0; background: transparent; }
.cc-counter-input > button .cc-icon { width: 27px; height: 27px; max-width: none; transform: translate(-6.5px,-6.5px); }
.cc-counter-white { width: 104px; height: 32px; grid-template-columns: 32px 40px 32px; }
.cc-counter-white.small { width: 84px; height: 24px; grid-template-columns: 24px 36px 24px; }
.cc-counter-white button { padding: 0; overflow: hidden; }
.cc-counter-white button .cc-icon { width: 27px; height: 27px; max-width: none; margin: auto; }
.cc-counter-white.small button .cc-icon { transform: scale(.82); }
.cc-counter-white span { color: #333; font: 400 14px/22px "Source Han Sans CN",sans-serif; }
.cc-counter-white.small span { font-size: 12px; line-height: 17px; }

/* Floating button: 28px, 16px icon, badge positions from Figma. */
.cc-float {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 6px;
  display: grid;
  place-items: center;
  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 > .cc-icon { width: 16px; height: 16px; transform: rotate(-90deg); }
.cc-float > .cc-dot { left: 25px; right: auto; top: -3px; }
.cc-float > .cc-badge-count { left: 18px; right: auto; top: -8px; }
.cc-float-expanded {
  box-sizing: border-box;
  width: 28px;
  height: 172px;
  padding: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.cc-float-expanded button {
  box-sizing: border-box;
  width: 28px;
  height: 28px;
  padding: 6px;
  display: grid;
  place-items: center;
  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 .cc-icon { width: 16px !important; height: 16px !important; object-fit: contain; }
.cc-badge-count,
.cc-float-badge {
  font-family: "Source Han Sans CN", "思源黑体 CN", sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 18px;
  font-style: normal;
  letter-spacing: 0;
}
.cc-float > .cc-float-badge,
.cc-float-expanded button > .cc-float-badge {
  box-sizing: border-box;
  position: absolute;
  left: 18px;
  right: auto !important;
  top: -8px;
  width: 18px;
  min-width: 18px;
  height: 18px;
  padding: 0;
  display: grid;
  place-items: center;
  border: 1px solid #fff;
  border-radius: 9px;
  color: #fff;
  background: #e44144;
}
.cc-float-expanded button > .cc-float-badge-double {
  width: 25px;
  min-width: 25px;
  padding: 0 5.5px;
}
.cc-float-expanded button { position: relative; }
.cc-float-expanded button > .cc-dot { position: absolute; left: 25px; right: auto; top: -3px; }
.cc-float > .cc-icon,
.cc-float-expanded button > .cc-icon { width: 16px; height: 16px; display: block; object-fit: contain; }
.cc-float-expanded button:nth-child(-n+2) > .cc-icon { filter: brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(2578%) hue-rotate(193deg) brightness(102%) contrast(101%); }
.cc-float.hover > .cc-icon,
.cc-float:hover > .cc-icon { filter: brightness(0) saturate(100%) invert(55%) sepia(95%) saturate(1617%) hue-rotate(185deg) brightness(102%) contrast(101%); }
.cc-float.active > .cc-icon,
.cc-float:active > .cc-icon { filter: brightness(0) saturate(100%) invert(42%) sepia(86%) saturate(1281%) hue-rotate(178deg) brightness(83%) contrast(96%); }

/* Figma 2072:3696: large scrollbars have a 5% track and 30% thumb. */
.cc-scroll {
  box-sizing: border-box;
  position: relative;
  display: block;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(0,0,0,.05);
}
.cc-scroll > b { position: absolute; display: block; border-radius: 4px; background: rgba(0,0,0,.30); }
.cc-scroll.horizontal.large { width: 530px; height: 4px; }
.cc-scroll.horizontal.large > b { left: 141px; top: 0; width: 248px; height: 4px; }
.cc-scroll.horizontal.large.hover { height: 8px; }
.cc-scroll.horizontal.large.hover > b { height: 8px; }
.cc-scroll.vertical.large { width: 4px; height: 530px; }
.cc-scroll.vertical.large > b { left: 0; top: 141px; width: 4px; height: 248px; }
.cc-scroll.vertical.large.hover { width: 8px; }
.cc-scroll.vertical.large.hover > b { width: 8px; }
.cc-scroll.horizontal.small { width: 62px; height: 4px; background: transparent; }
.cc-scroll.horizontal.small > b { inset: 0; }
.cc-scroll.vertical.small { width: 4px; height: 62px; background: transparent; }
.cc-scroll.vertical.small > b { inset: 0; }

/* Tooltip typography and light titled variants from Figma 2085:855. */
.cc-tip-title.light em { color: rgba(51,51,51,.8); line-height: 22px; }
.cc-tip-title:not(.light) em { color: rgba(255,255,255,.8); line-height: 18px; }

/* Figma 3253:7810: background assets and the 282 x 336 profile card. */
.cc-avatar-background { width: 22px; height: 22px; display: block; overflow: hidden; border-radius: 50%; }
.cc-avatar-background > img { width: 22px; height: 22px; display: block; }
.cc-profile-card {
  box-sizing: border-box;
  width: 282px;
  height: 336px;
  padding: 4px;
  overflow: hidden;
  border-radius: 6px;
  color: #333;
  background: #fff;
  box-shadow: 0 4px 10px rgba(0,0,0,.08);
  font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif;
}
.cc-profile-card > header { box-sizing: border-box; height: 76px; padding: 10px 12px; display: flex; align-items: center; gap: 12px; border-radius: 4px; color: #fff; background: #2990ff; }
.cc-profile-card > header .cc-avatar-token { width: 44px; height: 44px; flex-basis: 44px; }
.cc-profile-card > header .cc-avatar-token > img { width: 44px; height: 44px; }
.cc-profile-card > header .cc-avatar-token > em { font-size: 12px; line-height: 44px; }
.cc-profile-card > header div { display: grid; gap: 2px; text-align: left; }
.cc-profile-card > header strong { font-size: 16px; line-height: 24px; }
.cc-profile-card > header span { color: rgba(255,255,255,.8); }
.cc-profile-card dl { margin: 0; padding: 12px; display: grid; grid-template-columns: 1fr; gap: 0; text-align: left; }
.cc-profile-card dt { height: 22px; color: #999; }
.cc-profile-card dd { height: 30px; margin: 0; color: #333; }
.cc-card[data-cc-group="头像"][data-cc-name="名片"] { grid-column: span 2; }
.cc-card[data-cc-group="头像"][data-cc-name="名片"] .cc-demo { min-height: 364px; overflow: visible !important; }
.cc-alert-close { width: 22px; height: 22px; padding: 5px; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.cc-alert-close:hover { background: rgba(0,0,0,.04); }
.cc-alert-close .cc-icon { width: 12px; height: 12px; }
@media (max-width: 620px) {
  .cc-card[data-cc-group="头像"][data-cc-name="名片"] { grid-column: auto; }
  .cc-profile-card { max-width: 100%; }
}

/* Pointer states are interactions on the component, not separate runtime components. */
.cc-float,
.cc-counter button,
.cc-tab,
.cc-tab-custom button,
.cc-filter-switch button,
.cc-breadcrumb span,
.cc-view-switch button,
.cc-list-switch button,
.cc-time-switch button,
.cc-floating-switch button,
.cc-segment-control button,
.cc-radio,
.cc-checkbox,
.cc-rating span,
.cc-alert-close { transition: color .12s ease, border-color .12s ease, background-color .12s ease; }

.cc-float:hover { background: #fff; }
.cc-float:active { background: #f7f7f7; }
.cc-counter button:hover { background: rgba(0,0,0,.04); }
.cc-counter button:active { background: rgba(0,0,0,.08); }
.cc-tab:hover,
.cc-tab-custom button:hover { color: #4ba2ff; }
.cc-tab:active,
.cc-tab-custom button:active { color: #2279d6; }
.cc-filter-switch button:hover { color: #333; background: rgba(0,0,0,.04); }
.cc-filter-switch button:active { color: #2279d6; background: rgba(0,0,0,.04); }
.cc-breadcrumb span:not(:last-child):hover { color: #4ba2ff; }
.cc-breadcrumb span:not(:last-child):active { color: #2279d6; }
.cc-radio:not(.disabled):hover,
.cc-checkbox:not(.disabled):hover { border-color: #4ba2ff; }
.cc-radio:not(.disabled):active { border-color: #2279d6; }
.cc-checkbox.checked:not(.disabled):active,
.cc-checkbox.half:not(.disabled):active { border-color: #2279d6; background: #2279d6; }
.cc-view-switch button:hover,
.cc-list-switch button:hover,
.cc-time-switch button:hover,
.cc-floating-switch button:hover,
.cc-segment-control button:hover { color: #4ba2ff; background-color: rgba(0,0,0,.04); }
.cc-view-switch button:active,
.cc-list-switch button:active,
.cc-time-switch button:active,
.cc-floating-switch button:active,
.cc-segment-control button:active { color: #2279d6; background-color: rgba(0,0,0,.04); }
.cc-rating span { cursor: pointer; }
.cc-rating span:hover { color: #f0aa32; transform: scale(1.06); }
.cc-alert-close:hover { color: #333; background: rgba(0,0,0,.04); }
.cc-alert-close:active { color: #2279d6; background: rgba(0,0,0,.04); }

/* Figma 2091:427: List switch is 看板 / 列表, 30px high with a 1px selected outline. */
.cc-list-switch {
  box-sizing: border-box;
  height: 30px;
  display: inline-flex;
  align-items: stretch;
  overflow: visible;
  border: 0;
  border-radius: 4px;
  background: transparent;
}
.cc-list-switch button {
  box-sizing: border-box;
  height: 30px;
  margin: 0;
  padding: 3px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  border: 1px solid #e8e8e8;
  border-radius: 0;
  color: #666;
  background: #fff;
  font: 400 14px/22px "Source Han Sans CN", "思源黑体 CN", sans-serif;
  font-style: normal;
  white-space: nowrap;
}
.cc-list-switch button:first-child { border-radius: 4px 0 0 4px; }
.cc-list-switch button:last-child { margin-left: -1px; border-right: 1px solid #e8e8e8 !important; border-radius: 0 4px 4px 0; }
.cc-list-switch button .cc-icon { width: 14px; height: 14px; display: block; }
.cc-list-switch.select-left button:last-child,
.cc-list-switch.select-right button:first-child {
  z-index: 0;
  border-color: #e8e8e8;
  color: #666;
  background: #fff;
}
.cc-list-switch.select-left button:last-child .cc-icon,
.cc-list-switch.select-right button:first-child .cc-icon {
  filter: none;
}
.cc-list-switch.select-left button:first-child,
.cc-list-switch.select-right button:last-child {
  position: relative;
  z-index: 1;
  border-color: #2990ff;
  color: #2990ff;
  background: #ddedff;
}
.cc-list-switch.select-right button:last-child { border-right-color: #2990ff !important; }
.cc-list-switch.select-left button:first-child .cc-icon,
.cc-list-switch.select-right button:last-child .cc-icon {
  filter: brightness(0) saturate(100%) invert(49%) sepia(91%) saturate(2542%) hue-rotate(193deg) brightness(102%) contrast(101%);
}
.cc-list-switch.hover-right button:last-child,
.cc-list-switch.hover-left button:first-child { color: #4ba2ff; background: #fff; }
.cc-list-switch.active-right button:last-child,
.cc-list-switch.active-left button:first-child { position: relative; z-index: 2; border-color: #2279d6; color: #2279d6; background: #fff; }
.cc-list-switch.active-right button:last-child { border-right-color: #2279d6 !important; }
.cc-list-switch.hover-right button:last-child .cc-icon,
.cc-list-switch.hover-left button:first-child .cc-icon { filter: brightness(0) saturate(100%) invert(55%) sepia(95%) saturate(1617%) hue-rotate(185deg) brightness(102%) contrast(101%); }
.cc-list-switch.active-right button:last-child .cc-icon,
.cc-list-switch.active-left button:first-child .cc-icon { filter: brightness(0) saturate(100%) invert(42%) sepia(86%) saturate(1281%) hue-rotate(178deg) brightness(83%) contrast(96%); }

/* Figma 3386:12419: exact 42px triangular badge and 10px Source Han Sans label. */
.cc-corner-badge {
  position: relative;
  width: 42px;
  height: 42px;
  display: block;
  overflow: hidden;
  background: transparent;
}
.cc-corner-badge::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--corner);
  clip-path: polygon(0 0, 100% 0, 0 100%);
}
.cc-corner-badge b {
  position: absolute;
  left: -5px;
  top: -5px;
  width: 40px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font: 400 10px/28px "Source Han Sans CN", "思源黑体 CN", sans-serif;
  font-style: normal;
  letter-spacing: 0;
  white-space: nowrap;
  transform: rotate(-45deg);
  transform-origin: center;
}
.cc-corner-badge.blue { --corner: #2990ff; }
.cc-corner-badge.green { --corner: #5ab333; }
.cc-corner-badge.yellow { --corner: #f0aa32; }
.cc-corner-badge.red { --corner: #e44144; }

/* Figma 3386:12419 presents all four 42px variants as one compact horizontal set. */
.cc-section[data-component-ref="3386:12419"] .cc-group-playground { padding: 12px 14px; }
.cc-section[data-component-ref="3386:12419"] .cc-group-live .cc-live-demo {
  min-height: 82px;
  padding: 20px;
  overflow: visible;
}
.cc-corner-set {
  box-sizing: border-box;
  display: flex !important;
  align-items: flex-start !important;
  justify-content: center !important;
  gap: 12px;
}
.cc-corner-set-item {
  position: relative;
  width: 42px;
  height: 42px;
  flex: 0 0 42px;
}
.cc-section[data-component-ref="3386:12419"] > .cc-grid {
  grid-template-columns: repeat(4, minmax(160px, 1fr));
  gap: 12px;
}
.cc-section[data-component-ref="3386:12419"] .cc-card .cc-demo {
  min-height: 82px;
  padding: 20px;
}
@media (max-width: 980px) {
  .cc-section[data-component-ref="3386:12419"] > .cc-grid { grid-template-columns: repeat(2, minmax(160px, 1fr)); }
}