:root {
  --brand-600: #2563eb;
  --brand-700: #1d4ed8;
  --ink-950: #111827;
  --ink-700: #344054;
  --ink-500: #667085;
  --line: #e3e8ef;
  --surface: #ffffff;
  --canvas: #f4f7fb;
  --success: #16845b;
  --radius: 8px;
  font-family: "Segoe UI", "Microsoft YaHei", system-ui, sans-serif;
}

* { box-sizing: border-box; }
body { margin: 0; color: var(--ink-950); background: var(--canvas); }
button, input { font: inherit; }
button { color: inherit; }
.app-shell { min-height: 100dvh; display: grid; grid-template-columns: 268px minmax(0, 1fr); }
.sidebar { position: sticky; top: 0; height: 100dvh; padding: 28px 18px 20px; display: flex; flex-direction: column; background: #fff; border-right: 1px solid var(--line); z-index: 20; }
.sidebar nav { cursor: grab; touch-action: none; }
.sidebar.is-dragging { cursor: grabbing; user-select: none; }
.brand-row { display: flex; align-items: center; gap: 12px; padding: 0 8px; }
.brand-mark { width: 38px; height: 38px; display: grid; place-items: center; color: white; background: #2990ff; border-radius: 8px; font-weight: 700; }
.brand-row strong { display: block; font-size: 17px; }
.brand-row span { display: block; margin-top: 2px; color: var(--ink-500); font-size: 11px; }
.icon-button { border: 0; background: transparent; cursor: pointer; }
.close-nav { display: none; margin-left: auto; font-size: 24px; }
.search-box { height: 42px; margin: 28px 4px 26px; padding: 0 12px; display: flex; align-items: center; gap: 9px; border: 1px solid var(--line); border-radius: var(--radius); background: #fafbfd; }
.search-box:focus-within { border-color: var(--brand-600); box-shadow: 0 0 0 3px #2563eb1a; }
.search-box input { min-width: 0; flex: 1; border: 0; outline: 0; background: transparent; font-size: 14px; }
kbd { padding: 2px 5px; color: var(--ink-500); border: 1px solid var(--line); border-radius: 4px; background: #fff; font-size: 10px; }
.nav-label { margin: 18px 10px 8px; color: #98a2b3; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.nav-item { width: 100%; height: 44px; padding: 0 12px; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 10px; border: 0; border-radius: var(--radius); background: transparent; text-align: left; cursor: pointer; }
.nav-item:hover { background: #f7f8fa; }
.nav-item.active { color: var(--brand-700); background: #edf4ff; font-weight: 650; }
.nav-item small { color: #98a2b3; font-size: 11px; }
.nav-icon { width: 18px; height: 18px; display: grid; place-items: center; border: 0; border-radius: 0; font-size: 0; }
.nav-icon img { width: 18px; height: 18px; display: block; object-fit: contain; filter: grayscale(1) brightness(.48); }
.nav-item.active .nav-icon img { filter: invert(48%) sepia(98%) saturate(3267%) hue-rotate(193deg) brightness(102%) contrast(101%); }
.color-icon { background: linear-gradient(135deg, #2563eb 50%, transparent 50%); }
.button-icon { height: 10px; border-radius: 3px; }
.tag-icon { border-radius: 9px 3px 3px 9px; }
.input-icon { height: 12px; border-radius: 3px; }
.radius-icon { border-radius: 1px 8px 1px 1px; }
.switch-icon { position: relative; height: 12px; border-radius: 8px; }.switch-icon::after { content: ""; position: absolute; top: 2px; right: 2px; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.sidebar-footer { margin-top: auto; padding: 14px 10px 0; display: flex; gap: 10px; align-items: center; border-top: 1px solid var(--line); }
.sidebar-footer .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--success); }
.sidebar-footer strong, .sidebar-footer span { display: block; font-size: 12px; }
.sidebar-footer span { margin-top: 2px; color: var(--ink-500); }
.workspace { min-width: 0; }
.topbar { height: 66px; padding: 0 34px; display: flex; align-items: center; justify-content: space-between; background: #ffffffd9; border-bottom: 1px solid var(--line); backdrop-filter: blur(14px); }
.breadcrumb { display: flex; align-items: center; gap: 10px; font-size: 13px; }
.breadcrumb span, .breadcrumb b { color: #98a2b3; font-weight: 500; }
.top-actions { display: flex; gap: 10px; align-items: center; }
.global-theme-switch { padding: 3px; }
.version { color: var(--ink-500); font: 12px ui-monospace, Consolas, monospace; }
.secondary-button, .copy-button { height: 34px; padding: 0 14px; border: 1px solid var(--line); border-radius: 6px; background: #fff; font-size: 12px; font-weight: 650; cursor: pointer; }
.copy-button { color: #fff; border-color: var(--brand-600); background: var(--brand-600); }
.secondary-button:active, .copy-button:active { transform: translateY(1px); }
.menu-button { display: none; font-size: 20px; }
.content { width: calc(100% - 64px); margin: 0 32px; padding: 34px 0 70px; }
.page-heading { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: 32px; margin-bottom: 26px; }
.eyebrow { margin: 0 0 9px; color: var(--brand-700); font-size: 11px; font-weight: 800; letter-spacing: 0; }
h1 { margin: 0; font-size: clamp(30px, 4vw, 44px); line-height: 1.15; letter-spacing: 0; }
.page-heading p:last-child { max-width: 620px; margin: 12px 0 0; color: var(--ink-500); font-size: 14px; line-height: 1.7; }
.heading-meta { padding-left: 24px; border-left: 1px solid var(--line); }
.heading-meta span, .heading-meta strong { display: block; font-size: 12px; }
.heading-meta span { margin-bottom: 6px; color: var(--ink-500); }
.heading-meta i { display: inline-block; width: 7px; height: 7px; margin-right: 6px; border-radius: 50%; background: var(--success); }
.preview-section, .code-section { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 12px 30px #243b5310; }
.code-section { margin-top: 20px; }
.section-toolbar, .code-header { min-height: 64px; padding: 0 18px 0 22px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.section-toolbar > div:first-child, .code-header > div:first-child { display: flex; align-items: center; gap: 10px; }
.section-index { color: #98a2b3; font: 11px ui-monospace, Consolas, monospace; }
h2 { margin: 0; font-size: 14px; }
.segmented, .code-tabs { display: flex; padding: 3px; background: #f2f4f7; border-radius: 6px; }
.segmented button, .code-tabs button { height: 27px; padding: 0 12px; border: 0; border-radius: 4px; color: var(--ink-500); background: transparent; font-size: 11px; cursor: pointer; }
.segmented button.selected, .code-tabs button.active { color: var(--ink-950); background: #fff; box-shadow: 0 1px 3px #10182814; font-weight: 650; }
.preview-canvas { min-height: 350px; padding: 24px; display: grid; place-items: center; background-color: #f8fafc; background-image: linear-gradient(#e8edf3 1px, transparent 1px), linear-gradient(90deg, #e8edf3 1px, transparent 1px); background-size: 24px 24px; transition: background .2s; }
.preview-canvas.dark { background-color: #171b24; background-image: linear-gradient(#2b303b 1px, transparent 1px), linear-gradient(90deg, #2b303b 1px, transparent 1px); }
#componentPreview { width: 100%; display: grid; place-items: center; }
.color-token-board { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; font-family: "Source Han Sans CN", "思源黑体 CN", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
.color-token-group { min-width: 0; padding: 16px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; }
.color-token-group.wide { grid-column: span 2; }
.color-token-head { margin-bottom: 14px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.color-token-head h3 { margin: 0; color: #222; font-size: 14px; font-weight: 700; line-height: 22px; }
.color-token-head p { margin: 2px 0 0; color: #999; font-size: 12px; font-weight: 400; line-height: 18px; }
.color-token-head > span { flex: 0 0 auto; color: #999; font-size: 12px; line-height: 18px; }
.color-token-list { display: grid; gap: 8px; }
.color-token-group.wide .color-token-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.color-token-row { width: 100%; min-width: 0; height: 42px; padding: 0 10px; display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; align-items: center; gap: 6px; color: var(--token-ink); border-radius: 4px; background: var(--token-color); box-shadow: inset 0 0 0 1px #0000000a; }
.color-token-row strong { font: 500 11px/16px ui-monospace, Consolas, monospace; letter-spacing: 0; }
.color-token-row span { min-width: 0; overflow-wrap: anywhere; font-size: 12px; line-height: 16px; }
.color-token-row small { font-size: 10px; line-height: 14px; white-space: nowrap; opacity: .82; }
.color-token-row[data-color-token="white"] { box-shadow: inset 0 0 0 1px #d9d9d9; }
body.theme-dark #componentPreview .color-token-group { border-color: #343c48; background: #1d232d; }
body.theme-dark #componentPreview .color-token-head h3 { color: #f3f4f6; }
body.theme-dark #componentPreview .color-token-head p,
body.theme-dark #componentPreview .color-token-head > span { color: #9ca3af; }
@media (max-width: 1180px) {
  .color-token-board { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .color-token-group.wide { grid-column: span 2; }
}
.color-preview { width: 100%; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); overflow: hidden; border-radius: var(--radius); box-shadow: 0 18px 45px #1b2d451a; }
.swatch { min-height: 112px; padding: 18px; display: flex; flex-direction: column; justify-content: flex-end; color: #fff; background: var(--swatch); }
.swatch span { font-size: 12px; opacity: .8; }.swatch strong { margin-top: 5px; font: 13px ui-monospace, Consolas, monospace; }
.swatch.light { color: #222; border: 1px solid #e8e8e8; }
.swatch-main { background: var(--brand-600); }.swatch-dark { background: var(--ink-950); }.swatch-soft { color: var(--ink-950); background: var(--canvas); }.swatch-success { background: var(--success); }
.button-preview { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }.demo-button { min-width: 112px; height: 42px; padding: 0 18px; border-radius: 6px; font-weight: 650; }.demo-primary { color: #fff; border: 1px solid #2563eb; background: #2563eb; }.demo-secondary { color: #172033; border: 1px solid #d6dce5; background: #fff; }.demo-disabled { color: #98a2b3; border: 1px solid #e5e7eb; background: #f2f4f7; }
.tag-preview { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }.demo-tag { padding: 7px 11px; border-radius: 6px; color: #344054; background: #fff; border: 1px solid #d6dce5; font-size: 13px; }.demo-tag.blue { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }.demo-tag.green { color: #14704c; background: #ecfdf3; border-color: #a6f4c5; }
.type-preview { width: min(620px, 100%); padding: 30px; border: 1px solid var(--line); border-radius: var(--radius); background: #fff; }.type-preview h3 { margin: 0 0 12px; font-size: 32px; }.type-preview p { margin: 0; color: var(--ink-500); line-height: 1.7; }
.font-specimen { box-sizing: border-box; width: 100%; display: grid; gap: 16px; font-family: "Source Han Sans CN", "思源黑体 CN", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
.font-panel { position: relative; box-sizing: border-box; width: 100%; padding: 24px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; }
.font-panel-header { margin: 0 0 18px; padding: 0 0 14px; border-bottom: 1px solid #e8e8e8; }
.font-panel-header h3 { margin: 0; color: #222; font-size: 22px; font-weight: 700; line-height: 30px; }
.font-panel-header p { margin: 5px 0 0; color: #999; font-size: 12px; font-weight: 400; line-height: 18px; }
.font-scale-list { display: grid; gap: 16px; }
.font-scale-row { display: grid; grid-template-columns: 160px minmax(0, 1fr); align-items: start; gap: 20px; }
.font-scale-row > span { padding-top: 2px; color: #333; font-size: 14px; font-weight: 400; line-height: 22px; }
.font-sample { color: #333; }
.font-sample strong, .font-sample span { display: block; font-weight: 400; white-space: nowrap; }
.font-sample strong { font-weight: 700; }
.text-title-sample { font-size: 18px; line-height: 26px; }.text-subtitle-sample { font-size: 16px; line-height: 24px; }.text-body-sample { font-size: 14px; line-height: 22px; }.text-note-sample { font-size: 12px; line-height: 18px; }.text-special-sample { font-size: 10px; line-height: 14px; }
.font-color-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.font-color-column { display: grid; align-content: start; gap: 16px; padding: 0 16px; border-left: 1px solid #d9d9d9; }
.font-color-column:first-child { padding-left: 0; border-left: 0; }
.font-color-item { display: grid; grid-template-columns: 150px minmax(0, 1fr); align-items: center; color: #333; }
.font-color-item > span { white-space: nowrap; }
.font-color-title { font-size: 18px; font-weight: 700; line-height: 26px; }
.font-color-subtitle { font-size: 16px; font-weight: 700; line-height: 24px; }
.font-color-body { font-size: 14px; font-weight: 400; line-height: 22px; }
.font-color-item del { color: #666; text-decoration-thickness: 1px; }.font-color-item u { color: #999; text-underline-offset: 2px; }
.special-grid { display: grid; grid-template-columns: 1.15fr .95fr .95fr 1.35fr; }
.special-column { min-width: 0; padding: 0 16px; border-left: 1px solid #d9d9d9; }
.special-column:first-child { padding-left: 0; border-left: 0; }.special-column:last-child { padding-right: 0; }
.special-column h4 { margin: 0 0 4px; color: #333; font-size: 16px; font-weight: 400; line-height: 24px; }.special-column.emphasized h4 { font-weight: 900; }.special-column p { margin: 0 0 12px; color: #666; font-size: 14px; font-weight: 400; line-height: 22px; white-space: nowrap; }.special-column p:last-child { margin-bottom: 0; }.special-column .hint { color: #999; font-size: 12px; line-height: 18px; }
@media (max-width: 1100px) { .font-color-grid, .special-grid { grid-template-columns: 1fr 1fr; gap: 24px 0; }.font-color-column:nth-child(3), .special-column:nth-child(3) { border-left: 0; }.font-scale-row { grid-template-columns: 150px minmax(0, 1fr); } }
@media (max-width: 680px) { .font-panel { padding: 18px; }.font-scale-row { grid-template-columns: 1fr; gap: 6px; }.font-color-grid, .special-grid { grid-template-columns: 1fr; }.font-color-column, .special-column { padding: 16px 0 0; border-top: 1px solid #e8e8e8; border-left: 0; } }
.radius-preview { width: 100%; display: grid; grid-template-columns: repeat(3, minmax(0, 300px)); justify-content: center; align-items: start; gap: 20px; font-family: "Source Han Sans CN", "思源黑体 CN", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
.radius-card { width: 100%; min-width: 0; aspect-ratio: 1; padding: var(--radius-content-top) 0 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; overflow: hidden; color: #222; background: #c2c2c2; border-radius: var(--demo-radius); text-align: center; }
.radius-card strong { width: min(var(--radius-title-width), 100%); display: block; color: #222; font-size: 40px; font-weight: 900; line-height: 49px; }
.radius-card strong span, .radius-card strong b, .radius-card p span { display: block; }
.radius-card strong span, .radius-card strong b { white-space: nowrap; }
.radius-card strong b { font: inherit; }
.radius-card p { width: min(var(--radius-copy-width), 100%); margin: var(--radius-copy-gap) 0 0; color: #222; font-size: 14px; font-weight: 400; line-height: 49px; }
@media (max-width: 1100px) { .radius-preview { grid-template-columns: repeat(2, minmax(0, 300px)); } }
@media (max-width: 950px) { .radius-preview { grid-template-columns: minmax(0, 300px); } }
.shadow-lab { width: 100%; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; font-family: "Source Han Sans CN", "思源黑体 CN", "Source Han Sans SC", "Microsoft YaHei", sans-serif; }
.shadow-card { min-width: 0; min-height: 220px; aspect-ratio: 1; padding: 24px; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; color: #222; border-radius: 12px; background: #f7f8fa; box-shadow: var(--shadow-value); text-align: center; }
.shadow-card strong { display: block; font-size: 18px; font-weight: 700; line-height: 26px; }
.shadow-card span { display: block; margin-top: 12px; color: #666; font: 11px/18px ui-monospace, Consolas, monospace; overflow-wrap: anywhere; }
@media (max-width: 1100px) { .shadow-lab { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) { .shadow-lab { grid-template-columns: 1fr; }.shadow-card { min-height: 200px; aspect-ratio: auto; } }
.tag-lab { width: 100%; display: grid; gap: 18px; font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
.tag-configurator { padding: 18px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; }
.tag-control label { display: block; margin-bottom: 6px; color: #666; font-size: 11px; }.tag-control select { width: 100%; height: 34px; padding: 0 9px; border: 1px solid #d9d9d9; border-radius: 6px; color: #333; background: #fff; outline: 0; }.tag-control select:focus { border-color: #2990ff; box-shadow: 0 0 0 3px #2990ff1a; }
.tag-live-preview { min-height: 82px; padding: 20px; display: flex; align-items: center; justify-content: center; border: 1px dashed #d9d9d9; border-radius: 8px; background: #fafafa; }
.figma-tag { height: 22px; padding: 2px 8px; display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 0; border-radius: var(--tag-radius, 4px); color: var(--tag-color); background: var(--tag-bg); font: 400 12px/18px "Source Han Sans CN", "思源黑体 CN", "Source Han Sans SC", "Microsoft YaHei", sans-serif; white-space: nowrap; }
.figma-tag.bordered { padding: 1px 7px; border: 1px solid var(--tag-border, var(--tag-color)); }.figma-tag.common-tag { width: var(--tag-width); padding: 0 8px; line-height: 22px; }.figma-tag.common-tag.bordered { padding: 0 8px; border: 0; box-shadow: inset 0 0 0 1px var(--tag-border); }.tag-asset-icon { width: 12px; height: 12px; display: block; flex: 0 0 12px; object-fit: contain; }
.tag-spec-group { padding: 20px; display: grid; gap: 16px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; }.tag-spec-head { margin: 0; display: flex; align-items: center; justify-content: space-between; }.tag-spec-head h3 { margin: 0; font-size: 14px; }.tag-spec-head span { color: #999; font-size: 10px; }
.tag-matrix { display: grid; grid-template-columns: 64px repeat(4, minmax(70px, 1fr)); gap: 12px 14px; align-items: center; }.tag-matrix-label { color: #666; font-size: 11px; }.tag-cell { min-height: 24px; display: flex; justify-content: center; align-items: center; }.tag-cell.empty { color: #999; font-size: 12px; }.tag-column-label { color: #999; font-size: 10px; line-height: 16px; text-align: center; }.tag-column-label.default-level { color: #2990ff; font-weight: 600; }
.common-tag-row { min-height: 38px; padding: 8px 0; display: flex; flex-wrap: wrap; align-items: center; gap: 14px; }
.button-lab { width: 100%; display: grid; gap: 18px; font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
.button-live-preview { min-height: 94px; padding: 20px; display: flex; align-items: center; justify-content: center; border: 1px dashed #d9d9d9; border-radius: 8px; background: #fafafa; }
.variant-code { min-height: 42px; margin: 0; padding: 12px 14px; display: flex; align-items: center; overflow-x: auto; color: #d9e1ec; border-radius: 6px; background: #111722; font: 11px/1.6 ui-monospace, Consolas, monospace; white-space: pre-wrap; }
.lan-button { height: var(--button-height); padding: 0 var(--button-px); display: inline-flex; align-items: center; justify-content: center; gap: 4px; border: 1px solid var(--button-border, transparent); border-radius: var(--button-radius); color: var(--button-text); background: var(--button-bg); font: 400 var(--button-font-size, 14px)/var(--button-line-height, 22px) "Source Han Sans CN", "思源黑体 CN", "Source Han Sans SC", "Microsoft YaHei", sans-serif; text-align: center; vertical-align: middle; white-space: nowrap; }
.lan-button { padding-top: max(0px, calc(var(--button-py) - 1px)); padding-bottom: max(0px, calc(var(--button-py) - 1px)); }
.lan-button:not([style*="--button-border:transparent"]) { padding-left: max(0px, calc(var(--button-px) - 1px)); padding-right: max(0px, calc(var(--button-px) - 1px)); }
.lan-button[style*="--button-border:transparent"] { padding-top: var(--button-py); padding-bottom: var(--button-py); border-width: 0; }
.lan-button.dashed { border-style: dashed; }.lan-button.text-only { border-color: transparent; }.lan-button .button-symbol { position: relative; width: 14px; height: 14px; }.lan-button .button-symbol::before, .lan-button .button-symbol::after { content: ""; position: absolute; left: 3px; top: 6.5px; width: 8px; height: 1px; border-radius: 1px; background: currentColor; }.lan-button .button-symbol::after { transform: rotate(90deg); }.lan-button .chevron { position: relative; width: 14px; height: 14px; }.lan-button .chevron::after { content: ""; position: absolute; left: 3.5px; top: 3px; width: 6px; height: 6px; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: rotate(45deg); }.lan-button.state-active .chevron::after { top: 5px; transform: rotate(225deg); }
.lan-button .spinner { position: relative; width: 14px; height: 14px; animation: button-spin .8s linear infinite; }.lan-button .spinner::after { content: ""; position: absolute; inset: 1px; border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; } @keyframes button-spin { to { transform: rotate(360deg); } }
.lan-button .asset-mask-icon { width: 14px; height: 14px; flex: 0 0 14px; background: currentColor; -webkit-mask: var(--icon-url) center / 12px 12px no-repeat; mask: var(--icon-url) center / 12px 12px no-repeat; }.lan-button .asset-mask-icon.spinner::after { display: none; }
.lan-button .button-asset-icon { width: 14px; height: 14px; display: block; flex: 0 0 14px; object-fit: contain; }.lan-button .button-arrow { filter: brightness(.67); transform: rotate(90deg); }.lan-button .button-arrow.arrow-up { transform: rotate(-90deg); }.lan-button.button-dropdown.state-hover .button-arrow { filter: brightness(0) saturate(100%) invert(51%) sepia(97%) saturate(2435%) hue-rotate(190deg) brightness(101%) contrast(101%); }.lan-button.button-dropdown.state-active .button-arrow { filter: brightness(0) saturate(100%) invert(42%) sepia(86%) saturate(1281%) hue-rotate(178deg) brightness(83%) contrast(96%); }.lan-button .button-asset-icon.spinner { animation: button-spin .8s linear infinite; }.lan-button.button-addDashed .button-asset-icon,.lan-button.text-style-icon .button-asset-icon { filter: brightness(0) saturate(100%) invert(51%) sepia(97%) saturate(2435%) hue-rotate(190deg) brightness(101%) contrast(101%); }.lan-button.button-addDashed.state-active .button-asset-icon,.lan-button.text-style-icon.state-active .button-asset-icon { filter: brightness(0) saturate(100%) invert(42%) sepia(86%) saturate(1281%) hue-rotate(178deg) brightness(83%) contrast(96%); }.lan-button.button-addDashed.state-disabled .button-asset-icon,.lan-button.state-loading:not(.button-primary) .button-asset-icon { filter: brightness(0) saturate(100%) invert(83%) sepia(13%) saturate(1392%) hue-rotate(180deg) brightness(104%) contrast(101%); }.lan-button.button-primary.state-loading .button-asset-icon { filter: brightness(0) invert(1); }
.button-matrix { display: grid; grid-template-columns: 76px repeat(6, minmax(104px, 1fr)); gap: 14px 10px; align-items: center; }.button-matrix-label { color: #666; font-size: 11px; }.button-matrix-state { color: #999; font-size: 10px; text-align: center; }.button-cell { min-height: 34px; display: flex; align-items: center; justify-content: center; }.button-cell.empty { color: #999; font-size: 12px; }
.button-mobile-variants { display: none; }.button-mobile-group { min-width: 0; padding: 14px; display: grid; gap: 12px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; }.button-mobile-group strong { color: #333; font-size: 12px; }.button-mobile-group div { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.text-button-overview { padding: 16px; display: grid; gap: 18px; border: 1px solid #eee; border-radius: 6px; background: #fafafa; }.text-button-row { display: flex; align-items: center; flex-wrap: wrap; gap: 12px; }.text-button-row + .text-button-row { padding-top: 2px; }.text-button-label { width: 58px; flex: 0 0 58px; color: #999; font-size: 10px; }
@media (max-width: 1100px) { .button-matrix { display: none; }.button-mobile-variants { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } }
@media (max-width: 680px) { .button-mobile-variants { grid-template-columns: 1fr; }.text-button-row { align-items: flex-start; }.text-button-label { width: 100%; flex-basis: 100%; } }
.switch-lab { width: 100%; display: grid; gap: 18px; font-family: "Source Han Sans SC", "Noto Sans CJK SC", "Microsoft YaHei", sans-serif; }
.lan-switch-wrap { display: inline-flex; align-items: center; gap: var(--switch-label-gap, 8px); }
.lan-switch { position: relative; width: var(--switch-width); height: var(--switch-height); padding: 0; flex: 0 0 auto; border: 0; border-radius: 100px; background: var(--switch-bg); cursor: pointer; transition: background-color .16s ease; }
.lan-switch-knob { position: absolute; top: 2px; left: var(--knob-left); width: var(--knob-size); height: var(--knob-size); border-radius: 50%; background: #fff; transition: left .16s ease; }
.lan-switch-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: var(--text-align); padding: 0 var(--switch-text-pad); color: #fff; font-size: var(--switch-font); line-height: var(--switch-line-height); }
.lan-switch-label { color: #333; font-size: var(--label-font); line-height: var(--label-line-height, 22px); }.lan-switch:disabled { cursor: not-allowed; }.button-live-preview .lan-switch[data-state="default"]:not(:disabled):hover { background: #4BA2FF; }.button-live-preview .lan-switch[data-state="default"]:not(:disabled):active { background: #2279D6; }
.switch-matrix { display: grid; grid-template-columns: 72px repeat(4, minmax(90px, 1fr)); gap: 16px 12px; align-items: center; }.switch-cell { min-height: 34px; display: flex; align-items: center; justify-content: center; }.switch-matrix-label { color: #666; font-size: 11px; }.switch-state-label { color: #999; font-size: 10px; text-align: center; }
.icon-lab { width: 100%; display: grid; gap: 18px; }.icon-live-preview { min-height: 110px; display: grid; place-items: center; border: 1px dashed #d9d9d9; border-radius: 8px; background: #fafafa; }.ds-icon { position: relative; width: var(--icon-size); height: var(--icon-size); display: inline-block; color: var(--icon-color); }
.ds-icon::before, .ds-icon::after { content: ""; position: absolute; box-sizing: border-box; }.ds-icon-add::before, .ds-icon-minus::before { left: 16.67%; right: 16.67%; top: calc(50% - .5px); height: 1px; border-radius: 1px; background: currentColor; }.ds-icon-add::after { top: 16.67%; bottom: 16.67%; left: calc(50% - .5px); width: 1px; border-radius: 1px; background: currentColor; }.ds-icon-down::before, .ds-icon-up::before { left: 25%; top: 20%; width: 50%; height: 50%; border-right: 1.25px solid currentColor; border-bottom: 1.25px solid currentColor; transform: rotate(45deg); }.ds-icon-up::before { top: 35%; transform: rotate(225deg); }.ds-icon-loading { border: 1px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: button-spin .8s linear infinite; }.ds-icon-close::before, .ds-icon-close::after { left: 12%; top: calc(50% - .5px); width: 76%; height: 1px; background: currentColor; transform: rotate(45deg); }.ds-icon-close::after { transform: rotate(-45deg); }
.ds-icon-info, .ds-icon-block, .ds-icon-check, .ds-icon-edit, .ds-icon-delete, .ds-icon-more { border: 1px solid currentColor; border-radius: 50%; }.ds-icon-info::before { content: "i"; inset: 0; display: grid; place-items: center; font: 700 70%/1 Arial; }.ds-icon-block::before { left: 18%; top: calc(50% - .5px); width: 64%; height: 1px; background: currentColor; }.ds-icon-check::before { left: 24%; top: 25%; width: 45%; height: 28%; border-left: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(-45deg); }.ds-icon-edit { border-radius: 3px; }.ds-icon-edit::before { left: 22%; top: 20%; width: 55%; height: 18%; background: currentColor; transform: rotate(-45deg); }.ds-icon-delete { border: 0; border-radius: 0; }.ds-icon-delete::before { left: 25%; top: 27%; width: 50%; height: 58%; border: 1px solid currentColor; border-radius: 1px; }.ds-icon-delete::after { left: 20%; top: 16%; width: 60%; height: 1px; background: currentColor; }.ds-icon-more { border: 0; }.ds-icon-more::before { left: 10%; top: 45%; width: 18%; height: 18%; border-radius: 50%; background: currentColor; box-shadow: calc(var(--icon-size) * .31) 0 currentColor, calc(var(--icon-size) * .62) 0 currentColor; }
.icon-state-grid { display: grid; grid-template-columns: 90px repeat(3, 1fr); gap: 14px; align-items: center; }.icon-state-cell { min-height: 42px; display: grid; place-items: center; }.icon-state-label { color: #666; font-size: 11px; }
.icon-library-toolbar { display: grid; grid-template-columns: minmax(240px, 1fr) 180px; gap: 12px; }.icon-search span, .icon-library-toolbar label > span { display: block; margin-bottom: 6px; color: #666; font-size: 11px; }.icon-search input, .icon-library-toolbar select { width: 100%; height: 36px; padding: 0 10px; border: 1px solid #d9d9d9; border-radius: 6px; background: #fff; outline: 0; }.icon-search input:focus { border-color: #2990ff; box-shadow: 0 0 0 3px #2990ff1a; }
.icon-selected-preview { min-height: 132px; padding: 16px 20px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; border: 1px dashed #d9d9d9; border-radius: 8px; background: #fafafa; }.icon-selected-preview > div:last-child { min-width: 0; text-align: center; }.icon-selected-preview strong, .icon-selected-preview span { display: block; }.icon-selected-preview strong { font-size: 12px; line-height: 18px; }.icon-selected-preview span { margin-top: 1px; color: #999; font-size: 9px; line-height: 14px; }.asset-icon { display: block; object-fit: contain; }.asset-icon-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: 8px; }.asset-icon-item { position: relative; min-width: 0; height: 80px; padding: 10px 6px 24px; display: grid; place-items: center; border: 1px solid #e8e8e8; border-radius: 6px; background: #fff; cursor: pointer; }.asset-icon-item[hidden] { display: none; }.asset-icon-item:hover { border-color: #4ba2ff; background: #f7fbff; }.asset-icon-item.selected { border-color: #2990ff; background: #eef7ff; }.asset-icon-item span { position: absolute; right: 6px; bottom: 6px; left: 6px; overflow: hidden; color: #666; font-size: 9px; line-height: 12px; text-align: center; text-overflow: ellipsis; white-space: nowrap; }
.common-icon-live { width: 48px; height: 48px; padding: 0; display: grid; place-items: center; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.sidebar-asset-grid { grid-template-columns: repeat(auto-fill, minmax(154px, 1fr)); }.sidebar-asset-grid .asset-icon-item { height: 82px; }
.sidebar-icon-library .icon-selected-preview, .sidebar-icon-library .sidebar-asset-grid .asset-icon-item { border-color: #30343b; background: #111318; }.sidebar-icon-library .sidebar-asset-grid .asset-icon-item:hover { border-color: #4ba2ff; background: #1b2028; }.sidebar-icon-library .sidebar-asset-grid .asset-icon-item.selected { border-color: #2990ff; background: #172436; }.sidebar-icon-library .sidebar-asset-grid .asset-icon-item span { color: #d8dce3; }
.filter-icon::before { content: ''; width: 10px; height: 10px; display: block; border: 1.5px solid currentColor; clip-path: polygon(0 0,100% 0,62% 45%,62% 100%,38% 83%,38% 45%); }
.filter-lab { width: 100%; display: grid; gap: 16px; }.filter-live { min-height: 330px; padding: 28px; display: grid; place-items: center; overflow: auto; border: 1px dashed #d9d9d9; border-radius: 8px; background: #f7f7f7; }.lan-filter-panel { box-sizing: border-box; padding: 16px; color: #333; border-radius: 6px; background: #fff; box-shadow: 0 6px 8px #00000014; font-family: "Source Han Sans CN","思源黑体 CN","Microsoft YaHei",sans-serif; }.lan-filter-panel.custom { width: 707px; height: 275px; }.lan-filter-panel.default { width: 588px; height: 231px; }.lan-filter-head { height: 24px; display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }.lan-filter-head h4 { margin: 0; font-size: 16px; line-height: 23px; }.lan-filter-head-actions { display: flex; align-items: center; gap: 8px; color: #666; font-size: 14px; }.lan-filter-chip { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; gap: 4px; border: 1px solid #d9d9d9; border-radius: 4px; color: #333; background: #fff; font-size: 12px; }.lan-filter-rows { display: grid; gap: 12px; }.lan-filter-row { height: 32px; display: flex; align-items: center; gap: 8px; }.lan-filter-control { box-sizing: border-box; height: 32px; padding: 5px 12px; display: flex; align-items: center; justify-content: space-between; overflow: hidden; border: 1px solid var(--filter-border,#d9d9d9); border-radius: 4px; color: var(--filter-color,#999); background: var(--filter-bg,#fff); font-size: 14px; line-height: 22px; white-space: nowrap; }.lan-filter-field { width: 180px; }.lan-filter-operator { width: 100px; color: #333; }.lan-filter-value { width: 280px; }.lan-filter-panel.default .lan-filter-field { background: #f7f7f7; color: #333; }.lan-filter-panel.default .lan-filter-operator { width: 80px; background: #f7f7f7; }.lan-filter-chevron { width: 8px; height: 8px; flex: 0 0 auto; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translateY(-2px); }.lan-filter-calendar { width: 16px; height: 16px; display: inline-grid; place-items: center; margin-right: 8px; color: #666; font-size: 13px; }.lan-filter-actions { margin-left: auto; display: flex; align-items: center; gap: 8px; color: #666; font-size: 14px; }.lan-filter-check { width: 16px; height: 16px; border: 1px solid #d9d9d9; border-radius: 4px; }.lan-filter-divider { width: 1px; height: 16px; background: #d9d9d9; }.filter-delete-state-icon{position:relative;width:22px;height:22px;display:block}.filter-delete-state-icon img{position:absolute;inset:0;width:22px;height:22px;display:block}.filter-delete-state-icon .is-hover,.filter-delete-state-icon .is-active{display:none}.lan-filter-delete:hover .is-default{display:none}.lan-filter-delete:hover .is-hover{display:block}.lan-filter-delete:active .is-hover{display:none}.lan-filter-delete:active .is-active{display:block}.lan-filter-delete { width: 22px; height: 22px; display: grid; place-items: center; border: 0; color: #666; background: transparent; font-size: 18px; }.lan-filter-add { height: 32px; margin-top: 12px; display: flex; align-items: center; justify-content: center; border: 1px dashed #2990ff; border-radius: 6px; color: #2990ff; background: #fff; font-size: 14px; }.filter-state-hover { --filter-border:#4ba2ff; --filter-color:#333; }.filter-state-active { --filter-border:#2279d6; --filter-color:#333; }.filter-state-disabled { --filter-bg:#f7f7f7; --filter-color:#bfbfbf; }.filter-state-custom { --filter-color:#333; }.filter-token { height: 24px; padding: 0 8px; display: inline-flex; align-items: center; border: 1px solid #d9d9d9; border-radius: 4px; background: #f7f7f7; color: #333; font-size: 12px; }.filter-variant-matrix { display: grid; grid-template-columns: 92px repeat(5,minmax(120px,1fr)); gap: 10px; align-items: center; overflow-x: auto; }.filter-variant-cell { min-width: 120px; padding: 16px 8px; display: grid; place-items: center; border: 1px solid #eee; border-radius: 6px; background: #fafafa; }
.filter-variant-matrix { grid-template-columns: 92px repeat(5,minmax(176px,1fr)); }.filter-variant-cell { min-width: 176px; }.filter-variant-cell .lan-filter-value { width: 100%; }
.filter-trigger { box-sizing: border-box; height: 32px; padding: 8px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid #d9d9d9; border-radius: 4px; color: #666; background: #fff; font: 14px/22px "Source Han Sans CN","思源黑体 CN",sans-serif; white-space: nowrap; }.filter-trigger > span { flex: 0 0 auto; white-space: nowrap; }.filter-trigger-icon { width: 32px; }.filter-trigger-condition { width: 114px; padding: 5px 8px; color: #333; }.filter-trigger-hover { border-color: #4ba2ff; color: #4ba2ff; }.filter-trigger-active { border-color: #2279d6; color: #2279d6; }
.filter-svg { display: block; flex: 0 0 auto; object-fit: contain; }.lan-filter-arrow { width: 12px; height: 12px; transform: rotate(90deg); }.lan-filter-arrow.arrow-up { transform: rotate(-90deg); }.filter-value-copy { min-width: 0; display: flex; align-items: center; gap: 8px; overflow: hidden; }.lan-filter-head { margin-bottom: 11px; }.lan-filter-add { box-sizing: border-box; width: 100%; margin-top: 12px; gap: 4px; }.lan-filter-chip { gap: 4px; }.lan-filter-delete { padding: 0; }.filter-token { box-sizing: border-box; gap: 4px; }.filter-multiple { position: relative; padding: 0; display: block; }.filter-multiple .filter-token { position: absolute; top: 4px; height: 24px; }.filter-multiple .filter-token-selected { width: 56px; padding: 0 6px; justify-content: center; }.filter-multiple .filter-token-selected:nth-child(1) { left: 11px; }.filter-multiple .filter-token-selected:nth-child(2) { left: 75px; }.filter-multiple .filter-token-selected:nth-child(3) { left: 139px; }.filter-multiple .filter-token-count { left: 203px; width: 40px; padding: 0 8px; justify-content: center; }.filter-multiple > .lan-filter-arrow { position: absolute; left: 255px; top: 9px; }.filter-add-icon { filter: brightness(0) saturate(100%) invert(51%) sepia(97%) saturate(2435%) hue-rotate(190deg) brightness(101%) contrast(101%); }.filter-trigger-hover > .filter-svg:first-child { filter: brightness(0) saturate(100%) invert(55%) sepia(95%) saturate(1617%) hue-rotate(185deg) brightness(102%) contrast(101%); }.filter-trigger-active > .filter-svg:first-child { filter: brightness(0) saturate(100%) invert(42%) sepia(86%) saturate(1281%) hue-rotate(178deg) brightness(83%) contrast(96%); }
.lan-filter-panel { position: relative; }.lan-filter-panel.organization { width: 588px; height: 231px; }.lan-filter-panel.organization .lan-filter-field { background: #f7f7f7; color: #333; }.lan-filter-panel.organization .lan-filter-operator { width: 80px; background: #f7f7f7; }.organization-live { min-height: 540px; align-items: start; padding-top: 36px; }.org-selected { position: relative; justify-content: space-between; }.org-delete-token { width: 68px; height: 22px; padding: 0 8px; justify-content: center; }.org-dropdown { position: absolute; z-index: 3; top: 129px; right: 20px; width: 274px; height: 300px; overflow: hidden; border-radius: 4px; background: #fff; box-shadow: 0 4px 10px #00000014; }.org-option-head { box-sizing: border-box; height: 39px; padding: 8px; display: flex; align-items: center; gap: 4px; border-bottom: 1px dashed #d9d9d9; color: #333; font-size: 14px; }.org-switch { width: 32px; height: 16px; padding: 2px; display: block; box-sizing: border-box; border-radius: 11px; background: #1990ff; }.org-switch b { width: 12px; height: 12px; display: block; margin-left: 16px; border-radius: 50%; background: #fff; }.org-tree { padding: 7px 4px 4px; display: grid; gap: 4px; }.org-tree-item { box-sizing: border-box; height: 30px; padding-left: calc(4px + var(--org-level) * 24px); padding-right: 4px; display: flex; align-items: center; gap: 4px; color: #666; font-size: 14px; }.org-tree-item.active { color: #333; background: #0000000a; }.org-tree-item > .lan-filter-arrow { margin-left: auto; }.org-check { width: 16px; height: 16px; display: grid; place-items: center; flex: 0 0 auto; border-radius: 4px; color: #fff; background: #b6d9ff; font-size: 11px; font-style: normal; }.org-tree-item:first-child .org-check { background: #2990ff; }.org-scroll { position: absolute; top: 50px; right: 2px; width: 4px; height: 67px; border-radius: 2px; background: #0000004d; }.org-scroll b { display: none; }
.organization-selector-preview { min-height: 356px; }.organization-selector-preview .org-dropdown { position: relative; top: auto; right: auto; }.organization-state-pair { display: grid; grid-template-columns: repeat(2,274px); justify-content: center; gap: 32px; overflow-x: auto; }.organization-state-pair > div { display: grid; gap: 8px; }.organization-state-pair .org-dropdown { position: relative; top: auto; right: auto; }.org-switch.off { background: #bfbfbf; }.org-switch.off b { margin-left: 0; }.org-check.checked { background: #2990ff; }.org-check.disabled { background: #b6d9ff; }.org-check.unchecked { box-sizing: border-box; border: 1px solid #d9d9d9; background: #fff; }.org-dropdown::before,.org-dropdown::after { content: ''; position: absolute; z-index: 0; width: 1px; background: #e8e8e8; }.org-dropdown::before { left: 39px; top: 145px; bottom: 0; }.org-dropdown::after { left: 63px; top: 213px; bottom: 17px; }.org-option-head,.org-tree { position: relative; z-index: 1; }.org-tree-item { position: relative; z-index: 1; }
@media (max-width: 900px) { .lan-filter-panel.custom,.lan-filter-panel.default { width: 650px; }.filter-live { place-items: start; }.filter-variant-matrix { grid-template-columns: 82px repeat(5,176px); } }
.empty-icon::before { content: ''; width: 11px; height: 8px; display: block; border: 1.5px solid currentColor; border-radius: 1px; }.empty-state-lab { width: 100%; display: grid; gap: 16px; }.empty-state-live { min-height: 300px; display: grid; place-items: center; border: 1px dashed #d9d9d9; border-radius: 8px; background: #f7f7f7; }.empty-state-art { width: 216px; height: 216px; display: block; object-fit: contain; }.empty-state-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(236px,1fr)); gap: 12px; }.empty-state-card { min-width: 0; padding: 12px; display: grid; justify-items: center; gap: 8px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; }.empty-state-card strong { color: #333; font-size: 13px; }.empty-state-card code { box-sizing: border-box; width: 100%; padding: 8px; overflow: hidden; border-radius: 4px; color: #d8e7ff; background: #111827; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; }.empty-composite { width: 216px; display: flex; flex-direction: column; align-items: center; }.empty-composite-copy { width: 216px; margin: 0; color: #999; font: 400 16px/24px "Source Han Sans CN","思源黑体 CN",sans-serif; text-align: center; }.empty-composite-action { height: 32px; margin-top: 24px; padding: 5px 16px; border: 0; border-radius: 6px; color: #fff; background: #2990ff; font: 400 14px/22px "Source Han Sans CN","思源黑体 CN",sans-serif; }.empty-composite-stage { min-height: 380px; display: grid; place-items: center; border: 1px dashed #d9d9d9; border-radius: 8px; background: #f7f7f7; }
.common-asset-matrix { display: grid; grid-template-columns: 90px repeat(3, minmax(80px, 1fr)); gap: 14px; align-items: center; }
.input-preview label { display: block; margin-bottom: 7px; font-size: 12px; font-weight: 650; }.input-preview input { width: min(360px, 70vw); height: 44px; padding: 0 13px; border: 1px solid #cfd6df; border-radius: 6px; outline: 0; background: #fff; }.input-preview input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #2563eb1a; }
.code-actions { display: flex; align-items: center; gap: 12px; }
pre { min-height: 210px; margin: 0; padding: 26px; overflow: auto; color: #d9e1ec; background: #111722; font: 13px/1.75 ui-monospace, SFMono-Regular, Consolas, monospace; tab-size: 2; }
.token { color: #76a9fa; }.value { color: #86d7b6; }.comment { color: #778294; }
.toast { position: fixed; right: 24px; bottom: 24px; padding: 11px 16px; color: #fff; border-radius: 6px; background: #111827; font-size: 12px; opacity: 0; transform: translateY(8px); pointer-events: none; transition: .2s; }.toast.show { opacity: 1; transform: none; }
.mobile-backdrop { display: none; }

/* 浅色 / 深色为整个组件库的全局主题，不改变组件自身的语义状态色�?*/
body,
.sidebar,
.topbar,
.preview-section,
.code-section,
.section-toolbar,
.code-header,
.search-box,
.secondary-button,
.segmented,
.segmented button { transition: color .2s, background-color .2s, border-color .2s; }
body.theme-dark {
  --ink-950: #f5f7fa;
  --ink-700: #d0d5dd;
  --ink-500: #98a2b3;
  --line: #303743;
  --surface: #191e27;
  --canvas: #11151c;
  color-scheme: dark;
  background: var(--canvas);
}
body.theme-dark .sidebar { background: #151a22; }
body.theme-dark .topbar { background: #151a22e8; }
body.theme-dark .search-box,
body.theme-dark .secondary-button { color: #e4e7ec; background: #1d232d; }
body.theme-dark .search-box input { color: #f5f7fa; }
body.theme-dark .search-box input::placeholder { color: #98a2b3; }
body.theme-dark kbd { color: #98a2b3; border-color: #3a424f; background: #242b36; }
body.theme-dark .nav-item:hover { background: #202731; }
body.theme-dark .nav-item.active { color: #69b0ff; background: #172b43; }
body.theme-dark .nav-icon img { filter: grayscale(1) brightness(1.7); }
body.theme-dark .nav-item.active .nav-icon img { filter: invert(64%) sepia(93%) saturate(1482%) hue-rotate(186deg) brightness(103%) contrast(101%); }
body.theme-dark .preview-section,
body.theme-dark .code-section { box-shadow: 0 12px 30px #00000033; }
body.theme-dark .segmented,
body.theme-dark .code-tabs { background: #252c37; }
body.theme-dark .segmented button,
body.theme-dark .code-tabs button { color: #98a2b3; }
body.theme-dark .segmented button.selected,
body.theme-dark .code-tabs button.active { color: #f5f7fa; background: #3a4350; box-shadow: 0 1px 3px #0000004d; }
body.theme-dark .component-summary button { color: #cbd5e1; border-color: #3a424f; background: #1d232d; }
body.theme-dark .preview-canvas { color: #f5f7fa; }
body.theme-dark .heading-meta { border-color: var(--line); }
body.theme-dark #componentPreview :where(
  .font-panel,
  .tag-configurator,
  .tag-spec-group,
  .button-live-preview,
  .icon-live-preview,
  .icon-selected-preview,
  .asset-icon-item,
  .filter-live,
  .empty-state-live,
  .empty-state-card,
  .empty-composite-stage,
  .dd-card,
  .di-gallery-card,
  .orgx-card,
  .cc-section,
  .cc-card,
  .cc-playground,
  .cc-group-playground
) {
  border-color: #343c48;
  background-color: #1d232d;
}
body.theme-dark #componentPreview :where(
  .tag-live-preview,
  .variant-preview,
  .filter-variant-cell,
  .cc-demo,
  .cc-live-demo,
  .cc-group-live
) {
  border-color: #343c48;
  background-color: #171c24;
}
body.theme-dark #componentPreview :where(
  .font-panel-header,
  .font-color-column,
  .special-column,
  .tag-spec-head
) { border-color: #343c48; }
/* 所有组件页面共用同一套深色中性表面，语义色组件不在此覆盖�?*/
body.theme-dark #componentPreview :where(
  .type-preview,
  .font-panel,
  .tag-configurator,
  .tag-spec-group,
  .button-live-preview,
  .tag-live-preview,
  .icon-live-preview,
  .icon-selected-preview,
  .asset-icon-item,
  .filter-live,
  .filter-variant-cell,
  .empty-state-live,
  .empty-state-card,
  .empty-composite-stage,
  .data-input-stage,
  .di-gallery-card,
  .dropdown-live,
  .dd-card,
  .orgx-card,
  .cc-playground,
  .cc-section,
  .cc-card,
  .card-playground,
  .card-variant,
  .steps-playground,
  .steps-variant
) {
  border-color: #343c48 !important;
  background-color: #1d232d !important;
}
body.theme-dark #componentPreview :where(
  .button-live-preview,
  .tag-live-preview,
  .icon-live-preview,
  .filter-live,
  .filter-variant-cell,
  .empty-state-live,
  .empty-composite-stage,
  .data-input-stage,
  .card-live,
  .card-stage,
  .steps-live,
  .steps-stage,
  .cc-demo,
  .cc-live-demo
) { background-color: #171c24 !important; }
body.theme-dark #componentPreview .modern-select-trigger {
  color: #e4e7ec;
  border-color: #46505e;
  background: #252c37;
}
body.theme-dark #componentPreview .modern-select-menu {
  border-color: #343c48;
  background: #252c37;
}
body.theme-dark #componentPreview .modern-select-option { color: #cbd5e1; }
body.theme-dark #componentPreview .modern-select-option:hover,
body.theme-dark #componentPreview .modern-select-option:focus { color: #fff; background: #303844; }
body.theme-dark #componentPreview .modern-select-option.selected { color: #69b0ff; background: #172b43; }

@media (max-width: 760px) {
  .code-actions { gap: 7px; }.copy-button { padding: 0 9px; }
  .app-shell { display: block; }.sidebar { position: fixed; left: 0; transform: translateX(-100%); width: min(84vw, 300px); transition: transform .2s; }.sidebar.open { transform: none; }.close-nav, .menu-button { display: block; }.mobile-backdrop.show { position: fixed; inset: 0; z-index: 10; display: block; background: #10182866; }.topbar { padding: 0 16px; }.topbar .breadcrumb { flex: 1; margin-left: 8px; }.version, .secondary-button { display: none; }.content { width: calc(100% - 28px); margin: 0 14px; padding: 32px 0 46px; }.page-heading { align-items: start; }.heading-meta { display: none; }.section-toolbar, .code-header { align-items: center; gap: 12px; }.code-header { padding-top: 12px; padding-bottom: 12px; }.preview-canvas { min-height: 330px; padding: 28px 18px; }.color-token-board { grid-template-columns: 1fr; }.color-token-group.wide { grid-column: auto; }.color-token-group.wide .color-token-list { grid-template-columns: 1fr; }.color-preview { grid-template-columns: repeat(2, 1fr); }.swatch { min-height: 104px; }.code-tabs button { padding: 0 8px; }
}


@media (max-width: 620px) {
  .font-panel { padding: 18px; }.font-scale-row { grid-template-columns: 1fr; gap: 4px; }.font-color-grid, .special-grid { grid-template-columns: 1fr; gap: 14px; }.font-color-column, .special-column { padding: 14px 0 0; border-left: 0; border-top: 1px solid #e8e8e8; }.font-color-column:first-child, .special-column:first-child { padding-top: 0; border-top: 0; }.radius-preview { grid-template-columns: minmax(0, 300px); justify-content: center; }.tag-configurator { grid-template-columns: 1fr; }.tag-matrix { grid-template-columns: 48px repeat(4, minmax(52px, 1fr)); gap: 10px 4px; }.button-matrix { grid-template-columns: 70px repeat(2, 1fr); }.button-matrix-state:nth-of-type(n+4), .button-cell.button-hide-mobile { display: none; }.switch-matrix { grid-template-columns: 58px repeat(2, 1fr); }.switch-state-label:nth-of-type(n+4), .switch-cell.switch-hide-mobile { display: none; }
}

.data-input-lab{width:100%;display:grid;gap:16px}.data-input-stage{min-height:180px;padding:24px;display:grid;place-items:center;overflow:auto;border:1px dashed #d9d9d9;border-radius:8px;background:#f7f7f7}.di-field{width:var(--di-width,310px);display:flex;flex-direction:column;align-items:flex-start;gap:4px;font-family:"Source Han Sans CN","思源黑体 CN",sans-serif}.di-label{width:100%;color:#333;font-size:14px;line-height:22px}.di-label i{color:#e44144;font-style:normal}.di-control{box-sizing:border-box;width:100%;height:32px;padding:5px 12px;display:flex;align-items:center;justify-content:space-between;gap:8px;border:1px solid var(--di-border,#d9d9d9);border-radius:4px;color:var(--di-color,#999);background:var(--di-bg,#fff);font-size:14px;line-height:22px}.di-state-hover{--di-border:#4ba2ff}.di-state-active,.di-state-expanded{--di-border:#2990ff;--di-color:#333}.di-state-error{--di-border:#e44144;--di-color:#333}.di-state-disabled{--di-bg:#f7f7f7;--di-color:#bfbfbf}.di-error{margin:-2px 0 0;color:#e44144;font-size:12px;line-height:18px}.di-icon{width:var(--di-icon-size,12px);height:var(--di-icon-size,12px);display:block;flex:0 0 auto;object-fit:contain}.di-multiline{height:86px;padding:12px;align-items:flex-start;position:relative}.di-count{position:absolute;right:12px;bottom:8px;color:#999;font-size:12px;line-height:18px}.di-search{--di-width:288px}.di-search .di-control{justify-content:flex-start}.di-actions{display:flex;align-items:center;gap:8px}.di-actions i{width:22px;height:22px;display:grid;place-items:center}.di-actions b{width:1px;height:14px;background:#d9d9d9}.di-prefix{box-sizing:border-box;width:74px;height:32px;margin:-5px 0 -5px -12px;padding:5px 12px;display:flex;align-items:center;justify-content:space-between;border-right:1px solid #d9d9d9;color:#333}.di-prefix-copy{margin-right:auto}.di-dropdown{position:relative}.di-options{position:absolute;z-index:3;left:0;right:0;top:62px;padding:4px;border-radius:4px;background:#fff;box-shadow:0 4px 10px #00000014}.di-options div{height:32px;padding:5px 8px;box-sizing:border-box;color:#333;font-size:14px;line-height:22px}.di-rich{--di-width:648px}.di-richbox{width:648px;height:412px;box-sizing:border-box;border:1px solid #d9d9d9;border-radius:4px;background:#fff}.di-toolbar{height:48px;padding:12px;box-sizing:border-box;display:flex;align-items:center;gap:12px;background:#f7f7f7;font-size:18px}.di-toolbar>*{width:24px;height:24px;display:grid;place-items:center;color:#333}.di-editor{padding:12px;color:#999;font-size:14px;line-height:22px}.di-matrix{display:grid;grid-template-columns:90px repeat(5,390px);gap:10px;align-items:center;overflow-x:auto}.di-matrix>span{text-align:center;color:#999;font-size:10px}.di-matrix>strong{color:#666;font-size:11px}.di-matrix>div{box-sizing:border-box;width:390px;min-height:102px;padding:12px;display:grid;place-items:center;border:1px solid #eee;border-radius:6px;background:#fafafa}.di-matrix>div .di-field{max-width:366px}
.di-matrix{grid-template-columns:90px repeat(5,392px)}.di-matrix>div{width:392px}.di-prefix .di-icon{transform:rotate(90deg)}.di-multiline-large{height:160px}.di-help{margin:-2px 0 0;color:#999;font-size:12px;line-height:18px}.di-tag-control{position:relative;padding:5px 12px;gap:8px}.di-selected-tag{height:24px;padding:0 8px;display:inline-flex;align-items:center;gap:4px;box-sizing:border-box;border:1px solid #d9d9d9;border-radius:4px;background:#f7f7f7;color:#333;font-size:12px;line-height:22px;white-space:nowrap}.di-selected-tag.small{padding:0 8px}.di-tag-control>.di-icon{margin-left:auto}.di-option-copy{display:flex;align-items:center;gap:8px;color:#333}.di-prefix.fixed{width:81px;flex:0 0 81px;justify-content:flex-start;white-space:nowrap}.di-prefix.fixed+span{white-space:nowrap}.di-segmented{--di-width:471px;gap:2px}.di-segment-row{display:flex;align-items:center;gap:8px}.di-region{width:180px}.di-address{width:283px;justify-content:flex-start}.di-region>.di-icon,.di-tag-control>.di-icon,.di-dropdown>.di-control>.di-icon{transform:rotate(90deg)}.di-account-up .di-icon{transform:rotate(-90deg)}.di-account-expanded{position:relative;width:366px;height:304px}.di-account-pop{position:absolute;left:0;top:60px;width:366px;height:244px;padding:8px;box-sizing:border-box;border-radius:6px;background:#fff;box-shadow:0 6px 16px #00000014}.di-account-row{position:relative;width:350px;height:60px;padding:8px;box-sizing:border-box;border-radius:4px;color:#333}.di-account-row:first-child{background:#0000000a}.di-bank{position:absolute;left:8px;top:8px;width:44px;height:44px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#2990ff;font-size:14px;font-style:normal}.di-account-row strong{position:absolute;left:60px;top:8px;font-size:14px;line-height:22px}.di-account-row>span{position:absolute;left:120px;top:34px;color:#999;font-size:12px;line-height:18px}.di-account-row em{position:absolute;left:60px;top:34px;height:18px;padding:0 4px;border-radius:2px;font-size:12px;line-height:18px;font-style:normal}.di-account-row em.blue{color:#2990ff;background:#dfeeff}.di-account-row em.orange{color:#f0aa32;background:#fdf2e0}.di-account-row>b{position:absolute;right:8px;top:8px;color:#666}.di-account-empty{position:absolute;z-index:2;left:72px;top:80px;width:216px;display:flex;flex-direction:column;align-items:center;color:#999;font-size:16px;line-height:24px;text-align:center}.di-account-empty.payment-empty{left:75px;top:88px}.di-account-empty img{width:120px;height:120px;display:block;object-fit:contain}.di-account-empty span{width:216px;white-space:nowrap}.di-account-footer{position:absolute;z-index:3;left:0;bottom:0;width:366px;height:44px;padding:8px;box-sizing:border-box;display:flex;align-items:center;background:#fff;box-shadow:0 -1px 4px #0000000a}.di-account-footer button{height:28px;display:flex;align-items:center;justify-content:center;gap:4px;border:1px dashed #2990ff;border-radius:4px;color:#2990ff;background:#fff;font:14px/22px "Source Han Sans CN","思源黑体 CN",sans-serif}.di-account-footer:not(.payments) button{width:350px}.di-account-footer.payments{gap:16px}.di-account-footer.payments button{position:relative;width:106px;border:0;padding:3px 0;color:#333}.di-account-footer.payments button+button:before{content:"";position:absolute;left:-8px;top:0;width:1px;height:28px;background:#e8e8e8}.di-pay-icon{width:14px;height:14px;display:grid;place-items:center;border-radius:3px;color:#fff;font-size:9px;line-height:14px}.di-pay-icon.alipay{background:#2990ff}.di-pay-icon.wechat{background:#20b657}
.di-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,620px),1fr));gap:14px}.di-gallery-card{min-width:0;padding:16px;display:grid;gap:12px;border:1px solid #e8e8e8;border-radius:8px;background:#fff}.di-gallery-head{display:flex;align-items:center;justify-content:space-between}.di-gallery-head strong{font-size:14px;color:#333}.di-gallery-head span{font-size:10px;color:#999}.di-gallery-preview{min-height:120px;padding:18px;display:grid;place-items:center;border-radius:6px;background:#fafafa;overflow:visible}.di-gallery-card code,.di-state-card code{box-sizing:border-box;width:100%;padding:8px 10px;overflow:hidden;border-radius:4px;color:#d8e7ff;background:#111827;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.di-state-groups{display:grid;gap:16px}.di-state-group{padding:16px;border:1px solid #e8e8e8;border-radius:8px;background:#fff}.di-state-group h4{margin:0 0 12px;color:#333;font-size:14px}.di-state-list{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,420px),1fr));gap:10px}.di-state-card{min-width:0;padding:12px;display:grid;gap:10px;align-content:start;border:1px solid #eee;border-radius:6px;background:#fafafa}.di-state-card>span{color:#999;font-size:10px;text-align:left}.di-state-card>div{min-height:82px;display:grid;place-items:center}.di-state-card .di-field{max-width:100%}
/* Figma 3203:4381 account/payment exact overrides */
.di-account-row+.di-account-row{margin-top:2px}
.di-bank{display:block;background:none;border-radius:0;object-fit:contain}
.di-account-row strong{font-weight:500}
.di-account-row>span:not(.di-account-actions){position:absolute;left:120px;top:34px;color:#999;font-size:12px;line-height:18px}
.di-account-row>.di-account-actions{position:absolute;left:282px;top:8px;width:60px;height:22px;display:flex;align-items:center;gap:8px;color:inherit;font-size:inherit;line-height:normal}
.di-account-actions img{width:22px;height:22px;display:block}
.di-account-actions i{width:1px;height:14px;background:#d9d9d9}
.di-account-footer{border-radius:0 0 6px 6px;box-shadow:0 -1px 0 #00000014}
.di-account-footer button>img{width:14px;height:14px;display:block}
.di-account-footer.payments{padding:4px 8px;gap:16px}
.di-account-footer.payments button{width:106px;height:36px;padding:7px 0;color:#333;background:#0000000a}
.di-account-footer.payments button:first-child{color:#2990ff}
.di-account-footer.payments button:not(:first-child){font-family:Inter,"Source Han Sans CN","思源黑体 CN",sans-serif}
.di-account-footer.payments button:not(:first-child)>img{width:16px;height:16px}
.di-account-footer.payments button+button:before{left:-8px;top:11px;width:1px;height:14px;background:#d9d9d9}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; } }

/* 通用组件 �?Figma canvas 2072:3553 */
.cc-lab{--p:#2990ff;--ph:#4ba2ff;--pa:#2279d6;--err:#e44144;--ok:#5ab333;--warn:#f0aa32;--line:#e8e8e8;width:100%;display:grid;gap:20px;font-family:"Source Han Sans CN","思源黑体 CN","Microsoft YaHei",sans-serif}.cc-section{padding:16px;border:1px solid #e8e8e8;border-radius:8px;background:#fff}.cc-section-head,.cc-card>header{display:flex;align-items:center;justify-content:space-between}.cc-section-head{padding-bottom:12px;border-bottom:1px solid #e8e8e8}.cc-section-head h3{margin:0;color:#222;font-size:16px;line-height:24px}.cc-section-head span,.cc-card>header span{color:#999;font-size:11px}.cc-grid{padding-top:14px;display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px}.cc-card{min-width:0;padding:12px;display:grid;gap:10px;border:1px solid #e8e8e8;border-radius:6px;background:#fff}.cc-card>header strong{color:#333;font-size:13px}.cc-demo{min-height:92px;padding:14px;display:grid;place-items:center;overflow:auto;border-radius:4px;background:#fafafa}.cc-card code{box-sizing:border-box;width:100%;padding:8px 10px;overflow:hidden;border-radius:4px;color:#d8e7ff;background:#111827;font-size:10px;text-overflow:ellipsis;white-space:nowrap}.cc-icon{display:block;object-fit:contain}.cc-dot{width:6px;height:6px;border:1px solid #fff;border-radius:50%;background:var(--p)}.cc-dot.error{background:var(--err)}.cc-dot.warning{background:var(--warn)}.cc-dot.success{background:var(--ok)}.cc-dot.disabled{background:#bfbfbf}.cc-badge-count{box-sizing:border-box;min-width:18px;height:18px;padding:0 5.5px;display:inline-flex;align-items:center;justify-content:center;border:1px solid #fff;border-radius:9px;color:#fff;background:var(--err);font-size:12px;line-height:18px}.cc-divider{width:14px;height:1px;background:#d9d9d9}.cc-divider.dashed{background:repeating-linear-gradient(90deg,#d9d9d9 0 3px,transparent 3px 5px)}.cc-divider.vertical{width:1px;height:14px}.cc-divider.vertical.dashed{background:repeating-linear-gradient(#d9d9d9 0 3px,transparent 3px 5px)}.cc-scroll{display:block;border-radius:2px;background:#0000004d}.cc-scroll.horizontal{height:4px}.cc-scroll.vertical{width:4px}.cc-scroll.horizontal.large{width:530px}.cc-scroll.vertical.large{height:530px}.cc-scroll.horizontal.small{width:62px}.cc-scroll.vertical.small{height:62px}.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:#ffffff99;box-shadow:0 4px 10px #00000014}.cc-float .cc-icon{transform:rotate(-90deg)}.cc-float.hover{background:#fff}.cc-float.active{background:#f7f7f7}.cc-tip{position:relative;padding:4px 8px;border-radius:4px;color:#fff;background:#333;font-size:14px;line-height:22px}.cc-tip.light{color:#333;background:#fff;box-shadow:0 4px 5px #00000014}.cc-tip:after{content:"";position:absolute;border:5px solid transparent}.cc-tip.�?after{left:50%;bottom:-10px;border-top-color:#333;transform:translateX(-50%)}.cc-tip.�?after{left:50%;top:-10px;border-bottom-color:#333;transform:translateX(-50%)}.cc-tip.�?after{right:-10px;top:50%;border-left-color:#333;transform:translateY(-50%)}.cc-tip.�?after{left:-10px;top:50%;border-right-color:#333;transform:translateY(-50%)}.cc-tip.light:after{filter:drop-shadow(0 2px 2px #0002)}.cc-alert{box-sizing:border-box;width:620px;min-height:38px;padding:8px 16px;display:flex;align-items:center;gap:4px;border-radius:4px;color:#333;font-size:14px;line-height:22px;background:#e9f3ff}.cc-alert.error{background:#fbe3e3}.cc-alert.success{background:#e6f4e0}.cc-alert.warning{background:#fdf2e0}.cc-alert.title{height:86px;align-items:flex-start;padding-top:11px}.cc-alert>div{flex:1;display:flex;gap:4px}.cc-alert.title>div{display:grid}.cc-alert.title b{font-weight:700}.cc-counter{height:22px;display:flex;gap:1px;align-items:center}.cc-counter button,.cc-counter span{box-sizing:border-box;height:22px;display:grid;place-items:center;border:0;background:#f7f8fa}.cc-counter button{width:22px;padding:4px}.cc-counter span{width:36px;color:#333;font-size:14px}.cc-counter button:first-child{border-radius:4px 0 0 4px}.cc-counter button:last-child{border-radius:0 4px 4px 0}.cc-tab{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.large{width:96px;height:48px;padding:12px 16px;font-size:16px;line-height:24px}.cc-tab.selected{color:var(--p);font-weight:700}.cc-tab.selected:after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;border-radius:2px 2px 0 0;background:var(--p)}.cc-tab.hover{color:var(--ph)}.cc-tab.active{color:var(--pa)}.cc-filter-switch{display:flex;align-items:center;gap:8px;color:#666;font-size:14px;line-height:22px;white-space:nowrap}.cc-filter-switch>i{width:1px;height:14px;background:#d9d9d9}.cc-filter-switch button{height:24px;padding:1px 8px;display:flex;align-items:center;gap:4px;border:0;border-radius:4px;color:#666;background:transparent}.cc-filter-switch button.hover{background:#0000000a}.cc-filter-switch button.active{color:var(--pa);background:#0000000a}.cc-choice{display:inline-flex;align-items:center;gap:8px;color:#666;font-size:14px;line-height:22px}.cc-radio,.cc-checkbox{box-sizing:border-box;width:16px;height:16px;display:grid;place-items:center;border:1px solid #d9d9d9;background:#fff}.cc-radio{border-radius:50%}.cc-radio.checked{border:4px solid var(--p)}.cc-checkbox{border-radius:4px;color:#fff;font:11px/14px Arial}.cc-checkbox.checked,.cc-checkbox.half{border-color:var(--p);background:var(--p)}.cc-radio.disabled,.cc-checkbox.disabled{opacity:.45}.cc-breadcrumb{display:flex;align-items:center;gap:8px;color:#999;font-size:12px;line-height:18px}.cc-breadcrumb.large{font-size:14px;line-height:22px}.cc-breadcrumb span:last-child{color:#666}.cc-breadcrumb.hover span:first-child{color:var(--ph)}.cc-breadcrumb.active span:first-child{color:var(--pa)}.cc-notice{box-sizing:border-box;width:360px;height:38px;padding:8px 12px;border-radius:6px;color:#666;background:#edf0f4;font-size:14px;line-height:22px}.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-rating{height:22px;display:flex;align-items:center;gap:8px}.cc-rating span{width:22px;color:#d9d9d9;font-size:22px;line-height:22px}.cc-rating span.on{color:#f0aa32}.cc-rating span.half{background:linear-gradient(90deg,#f0aa32 50%,#d9d9d9 50%);-webkit-background-clip:text;color:transparent}.cc-rating b{color:#666;font-size:14px;font-weight:400}.cc-pagination{height:32px;display:flex;align-items:center;gap:8px}.cc-pagination.small{height:24px;gap:6px}.cc-pagination button{box-sizing:border-box;width:32px;height:32px;border:1px solid #d9d9d9;border-radius:4px;color:#666;background:#fff}.cc-pagination.small button{width:24px;height:24px}.cc-pagination button.on{color:#fff;border-color:var(--p);background:var(--p)}.cc-avatar-name{height:22px;padding-right:8px;display:flex;align-items:center;gap:4px;border-radius:11px;color:#333;background:#0000000a;box-shadow:0 4px 10px #00000014;font-size:14px}.cc-avatar-name i,.cc-avatar-group i,.cc-avatar-group b,.cc-avatar{width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:#fff;background:#2990ff;font-size:11px;font-style:normal}.cc-avatar-group{display:flex}.cc-avatar-group>*+*{margin-left:-5px;border:1px solid #fff}.cc-avatar-group b{background:#999;font-weight:400}.cc-avatar.male{background:#2990ff}.cc-avatar.female{background:#f08ca0}@media(max-width:760px){.cc-grid{grid-template-columns:1fr}.cc-alert{transform:scale(.72);transform-origin:center}.cc-scroll.horizontal.large{width:280px}.cc-scroll.vertical.large{height:280px}}

/* Dropdown selector �?Figma 2170:771. All arrows use 线性图�?箭头.svg. */
.dropdown-lab{--dd-text:#666;--dd-title:#333;--dd-muted:#999;--dd-disabled:#bfbfbf;--dd-primary:#2990ff;--dd-active:#2279d6;--dd-hover-bg:#0000000a;--dd-line:#e8e8e8;--dd-search:#f0aa32}
.dropdown-lab .dd-icon{width:var(--dd-icon-size);height:var(--dd-icon-size);display:block;flex:0 0 auto;background-color:currentColor;object-fit:initial;-webkit-mask:var(--dd-icon-url) center/contain no-repeat;mask:var(--dd-icon-url) center/contain no-repeat}
.dropdown-lab .dd-check{color:var(--dd-primary)}
.dropdown-lab .dd-cascade.single .dd-cascade-item.selected{color:var(--dd-primary)}
.dropdown-lab .dd-cascade.multi .dd-cascade-item.selected,.dropdown-lab .dd-cascade.radio .dd-cascade-item.selected{color:var(--dd-title)}
.dropdown-lab .dd-tree-row.active{color:var(--dd-primary);background:var(--dd-hover-bg)}
.dropdown-lab img.dd-icon{width:auto;height:auto;display:block;flex:0 0 auto;background:none;-webkit-mask:none;mask:none;object-fit:contain}
.dropdown-lab .dd-item.selected .dd-icon,.dropdown-lab .dd-item.active .dd-icon,.dropdown-lab .dd-check,.dropdown-lab .dd-cascade.single .dd-cascade-item.selected .dd-icon,.dropdown-lab .dd-tree-row.active .dd-icon{filter:brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(2578%) hue-rotate(193deg) brightness(102%) contrast(101%)}
.dropdown-lab .dd-item.disabled .dd-icon{filter:opacity(.45)}
.dd-multilevel{position:relative;width:264px;height:162px}.dd-level{position:absolute;padding:2px;box-sizing:border-box;display:flex;flex-direction:column;gap:2px;border-radius:4px;background:#fff;box-shadow:0 4px 10px #00000014}.dd-level-1{left:0;top:0;width:92px;height:130px}.dd-level-2{left:94px;top:64px;width:92px;height:98px}.dd-level-3{left:188px;top:64px;width:76px;height:34px}.dd-level-item{box-sizing:border-box;width:100%;height:30px;padding:4px 8px;display:flex;align-items:center;gap:4px;border-radius:2px;color:#666;font-size:14px;line-height:22px;white-space:nowrap}.dd-level-item span{flex:1}.dd-level-item.hover{color:#333;background:#0000000a}.dd-level-item.selected{color:#2990ff;background:#2990ff14}.dd-level-item.selected .dd-icon{filter:brightness(0) saturate(100%) invert(48%) sepia(99%) saturate(2578%) hue-rotate(193deg) brightness(102%) contrast(101%)}
.dd-table-wrap{position:relative;width:220px;height:386px}.dd-table-trigger{position:absolute;left:0;top:0;width:22px;height:22px;display:grid;place-items:center;border-radius:4px;background:#0000000a}.dd-table-panel{position:absolute;left:0;top:24px;width:220px;height:362px;border-radius:6px;background:#fff;box-shadow:0 6px 16px #00000014}.dd-table-list{position:absolute;left:4px;right:4px;top:8px;bottom:44px;display:flex;flex-direction:column;gap:2px;overflow:hidden}.dd-table-row{box-sizing:border-box;width:100%;height:30px;padding:4px 8px;display:flex;align-items:center;gap:8px;flex:0 0 auto;border-radius:4px;color:#666;font-size:14px;line-height:22px}.dd-table-row.hover{color:#333;background:#0000000a}.dd-table-row span{flex:1}.dd-table-row b{width:22px;height:22px;display:grid;place-items:center;border-radius:4px;background:#0000000a}.dd-table-scroll{position:absolute;right:4px;top:125px;width:4px;height:168px;background:#f2f2f2}.dd-table-scroll i{display:block;width:4px;height:84px;margin-top:42px;border-radius:2px;background:#0000004d}.dd-table-footer{position:absolute;left:0;right:0;bottom:0;height:36px;padding:4px 12px;display:flex;justify-content:flex-end;gap:12px;border-radius:0 0 6px 6px;background:#fff;box-shadow:0 -1px 0 #00000014}.dd-table-footer button{box-sizing:border-box;width:44px;height:28px;border:1px solid #d9d9d9;border-radius:4px;color:#333;background:#fff;font-size:14px;line-height:22px}.dd-table-footer button:last-child{color:#fff;border-color:#2990ff;background:#2990ff}
.dd-data-panel{position:relative;width:220px;height:240px;border-radius:6px;background:#fff;box-shadow:0 6px 8px #00000014}.dd-data-list{position:absolute;left:4px;right:4px;top:8px;height:190px;display:flex;flex-direction:column;gap:2px;overflow:hidden}.dd-data-row{box-sizing:border-box;height:30px;padding:4px 8px;flex:0 0 auto;border-radius:4px;color:#666;font-size:14px;line-height:22px;white-space:nowrap}.dd-data-row.hover{color:#333;background:#0000000a}.dd-data-scroll{position:absolute;right:0;top:37px;width:4px;height:162px;background:#f2f2f2}.dd-data-scroll i{display:block;width:4px;height:73px;margin-top:50px;border-radius:2px;background:#0000004d}.dd-data-panel footer{position:absolute;left:0;right:0;bottom:0;height:34px;padding:6px 12px;display:flex;align-items:center;justify-content:flex-end;border-radius:0 0 6px 6px;background:#fff;box-shadow:0 -1px 0 #00000014;font-size:12px;line-height:22px}.dd-data-panel footer span{color:#999}.dd-data-panel footer b{margin:0 4px;color:#333}
.dd-arrow-right{transform:rotate(0deg)}.dd-arrow-down{transform:rotate(90deg)}.dd-arrow-left{transform:rotate(180deg)}.dd-arrow-up{transform:rotate(-90deg)}
.dd-cascade{gap:16px!important}
.dropdown-lab{width:100%;display:grid;gap:16px;font-family:"Source Han Sans CN","思源黑体 CN",sans-serif}.dd-live{min-height:260px;padding:24px;display:grid;place-items:center;border:1px dashed #d9d9d9;border-radius:8px;background:#f7f7f7}.dd-icon{display:block;flex:0 0 auto;object-fit:contain}.dd-panel{box-sizing:border-box;padding:4px;display:flex;flex-direction:column;align-items:stretch;gap:4px;border-radius:6px;background:#fff;box-shadow:0 6px 8px #00000014}.dd-panel.dd-large{width:310px;height:208px}.dd-panel.dd-small{width:max-content;min-width:48px;height:auto;gap:2px}.dd-item{box-sizing:border-box;height:30px;padding:4px 8px;display:flex;align-items:center;gap:8px;border-radius:4px;color:#666;font-size:14px;line-height:22px;white-space:nowrap}.dd-large .dd-item span{flex:1}.dd-item.hover{color:#333;background:#0000000a}.dd-item.active{color:#2279d6;background:#0000000a}.dd-item.selected{color:#2990ff}.dd-item.disabled{color:#bfbfbf}.dd-small .dd-item{padding:4px 8px}.dd-search-panel{width:310px;height:210px;gap:2px}.dd-search-item{box-sizing:border-box;height:32px;padding:5px 8px;display:flex;align-items:center;gap:8px;border-radius:4px;color:#666;font-size:14px;line-height:22px;white-space:nowrap}.dd-search-item span{flex:1}.dd-search-item.hover{background:#0000000a}.dd-search-item mark{color:#f0aa32;background:transparent}.dd-cascade{width:436px;height:210px;padding:4px;box-sizing:border-box;display:flex;gap:8px;border-radius:6px;background:#fff;box-shadow:0 6px 8px #00000014}.dd-cascade-col{width:132px;display:flex;flex-direction:column;gap:2px;border-right:1px solid #e8e8e8}.dd-cascade-col:last-child{border-right:0}.dd-cascade-item{box-sizing:border-box;width:132px;height:32px;padding:5px 8px;display:flex;align-items:center;gap:8px;border-radius:4px;color:#666;font-size:14px;line-height:22px}.dd-cascade-item span{flex:1;white-space:nowrap}.dd-cascade-item.selected,.dd-cascade-item.hover,.dd-cascade-item.active{background:#0000000a}.dd-cascade-item.active{color:#2279d6}.dd-checkbox,.dd-radio{box-sizing:border-box;width:16px;height:16px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #d9d9d9;border-radius:4px;color:#fff;font-size:11px;font-style:normal;line-height:14px}.dd-radio{border-radius:50%}.dd-checkbox.checked{border-color:#2990ff;background:#2990ff}.dd-radio.checked{border:4px solid #2990ff}.dd-tree{box-sizing:border-box;width:310px;height:312px;padding:4px;display:flex;flex-direction:column;gap:2px;border-radius:6px;background:#fff;box-shadow:0 6px 8px #00000014}.dd-tree-row{box-sizing:border-box;height:32px;padding:5px 8px 5px calc(8px + var(--level)*20px);display:flex;align-items:center;gap:8px;border-radius:4px;color:#666;font-size:14px;line-height:22px}.dd-tree-row span{flex:1}.dd-tree-row.hover{background:#0000000a}.dd-gallery{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:14px}.dd-card{min-width:0;padding:16px;display:grid;gap:12px;align-content:start;border:1px solid #e8e8e8;border-radius:8px;background:#fff}.dd-card header{display:flex;justify-content:space-between;align-items:center}.dd-card header strong{color:#333;font-size:14px}.dd-card header span{color:#999;font-size:11px}.dd-card-preview{min-height:250px;padding:18px;display:grid;place-items:center;overflow:visible;border-radius:6px;background:#fafafa}.dd-card code{box-sizing:border-box;width:100%;padding:8px 10px;overflow:hidden;border-radius:4px;color:#d8e7ff;background:#111827;font-size:10px;text-overflow:ellipsis;white-space:nowrap}@media(max-width:720px){.dd-cascade{transform:scale(.78);transform-origin:center}.dd-gallery{grid-template-columns:1fr}}

/* Spacing corrections from Figma */
.filter-multiple .filter-token-selected{padding:0 8px}.filter-multiple .filter-token-selected:nth-child(1){left:8px}.filter-multiple .filter-token-selected:nth-child(2){left:72px}.filter-multiple .filter-token-selected:nth-child(3){left:136px}.filter-multiple .filter-token-count{left:200px}.filter-multiple>.lan-filter-arrow{left:260px;top:10px}
.dd-table-wrap{height:394px}.dd-table-panel{height:370px}.dd-table-list{left:4px;right:4px;top:8px;bottom:44px}.dd-table-scroll{top:125px;height:168px}.dd-table-footer{padding:4px 12px;gap:12px}

/* Organization selector �?Figma 3096:9490 */
.orgx-lab{width:100%;display:grid;gap:16px;font-family:"Source Han Sans CN","思源黑体 CN",sans-serif}.orgx-live{min-height:630px;padding:28px;display:grid;place-items:center;border:1px dashed #d9d9d9;border-radius:8px;background:#f7f7f7}.orgx-dialog{position:relative;width:745px;height:566px;overflow:hidden;border-radius:8px;background:#fff;box-shadow:0 4px 10px #00000014}.orgx-dialog>header{box-sizing:border-box;height:56px;padding:16px 24px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e8e8}.orgx-dialog>header strong{color:#222;font-size:16px;line-height:24px;font-weight:700}.orgx-dialog>header button{width:22px;height:22px;padding:0;border:0;color:#666;background:transparent;font-size:28px;line-height:20px}.orgx-dialog>main{position:absolute;left:4px;right:4px;top:60px;height:450px;display:grid;grid-template-columns:483px 254px;gap:4px}.orgx-left,.orgx-right{position:relative;overflow:hidden;border:1px solid #e8e8e8;border-radius:4px}.orgx-search-row{box-sizing:border-box;height:52px;padding:8px;display:flex;gap:8px;border-bottom:1px solid #e8e8e8}.orgx-search{box-sizing:border-box;height:32px;padding:5px 12px;display:flex;align-items:center;gap:8px;flex:1;border:1px solid #d9d9d9;border-radius:4px;color:#999;font-size:14px;line-height:22px}.orgx-type{box-sizing:border-box;width:124px;height:32px;padding:5px 8px;display:flex;align-items:center;gap:4px;border:1px solid #d9d9d9;border-radius:4px;color:#666;background:#fff;font-size:14px}.orgx-type .down{margin-left:auto;transform:rotate(90deg)}.orgx-summary{box-sizing:border-box;height:52px;padding:12px 8px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e8e8e8;color:#999;font-size:14px;line-height:22px}.orgx-summary b{margin:0 2px;color:#333}.orgx-summary button{border:0;color:#e44144;background:transparent;font-size:14px}.orgx-tree{position:absolute;left:4px;right:4px;top:52px;bottom:0;padding-top:4px;overflow:hidden}.orgx-row{position:relative;z-index:1;box-sizing:border-box;width:100%;height:30px;padding:4px 8px 4px calc(4px + var(--orgx-level)*24px);display:flex;align-items:center;gap:4px;border-radius:4px;color:#666;font-size:14px;line-height:22px}.orgx-row.active{color:#333;background:#0000000a}.orgx-row span{white-space:nowrap}.orgx-row small{color:#999;font-size:12px}.orgx-check{box-sizing:border-box;width:16px;height:16px;display:grid;place-items:center;flex:0 0 auto;border:1px solid #d9d9d9;border-radius:4px;color:#fff;font-size:11px;font-style:normal}.orgx-check.checked{border-color:#2990ff;background:#2990ff}.orgx-icon{display:block;flex:0 0 auto;object-fit:contain}.orgx-row-arrow{margin-left:auto;transform:rotate(90deg)}.orgx-line{position:absolute;z-index:0;top:98px;width:1px;background:#e8e8e8}.orgx-line.l1{left:35px;height:276px}.orgx-line.l2{left:59px;height:172px}.orgx-line.l3{left:83px;height:104px}.orgx-selected-list{padding:4px 8px;display:grid;gap:4px}.orgx-selected-list>div{height:30px;padding:4px;display:flex;align-items:center;gap:4px;color:#666;font-size:14px;line-height:22px}.orgx-empty{height:398px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;color:#999;font-size:16px;line-height:24px}.orgx-empty img{width:120px;height:120px;object-fit:contain}.orgx-dialog>footer{position:absolute;left:0;right:0;bottom:0;height:48px;padding:8px 24px;display:flex;align-items:center;justify-content:flex-end;gap:16px;border-top:1px solid #e8e8e8;background:#fff}.orgx-dialog>footer button{box-sizing:border-box;width:60px;height:32px;border:1px solid #d9d9d9;border-radius:4px;color:#333;background:#fff;font-size:14px;line-height:22px}.orgx-dialog>footer button:last-child{color:#fff;border-color:#2990ff;background:#2990ff}.orgx-gallery{display:grid;grid-template-columns:1fr;gap:14px}.orgx-card{min-width:0;padding:16px;display:grid;gap:12px;border:1px solid #e8e8e8;border-radius:8px;background:#fff}.orgx-card>header{display:flex;align-items:center;justify-content:space-between}.orgx-card>header strong{color:#333;font-size:14px}.orgx-card>header span{color:#999;font-size:11px}.orgx-card-preview{min-height:610px;padding:18px;display:grid;place-items:center;border-radius:6px;background:#fafafa}.orgx-card code{box-sizing:border-box;width:100%;padding:8px 10px;overflow:hidden;border-radius:4px;color:#d8e7ff;background:#111827;font-size:10px;text-overflow:ellipsis;white-space:nowrap}@media(max-width:980px){.orgx-dialog{transform:scale(.82);transform-origin:center}.orgx-live,.orgx-card-preview{min-height:520px}}
.orgx-dialog>header button{font-size:0;background:transparent url("assets/icons-common/常用图标=关闭, 状�?正常.svg") center/22px 22px no-repeat}.orgx-tree.flat .orgx-line{display:none}.orgx-tree.flat .orgx-row{padding-left:4px}.orgx-tree.flat .orgx-row-arrow{display:none}
.orgx-check{padding:0;font-family:Arial,sans-serif;line-height:14px;text-align:center}.orgx-row{align-items:center}.orgx-row>.orgx-check{margin-top:0}
.orgx-tree:not(.flat) .orgx-line.l1{left:36px;top:49px;height:330px}.orgx-tree:not(.flat) .orgx-line.l2{left:60px;top:109px;height:210px}.orgx-tree:not(.flat) .orgx-line.l3{left:84px;top:169px;height:120px}.orgx-tree:not(.flat)::after{content:"";position:absolute;z-index:0;left:108px;top:199px;width:1px;height:60px;background:#e8e8e8}
.orgx-search-results{position:absolute;left:4px;right:4px;top:56px;display:grid;gap:2px}.orgx-result-row{box-sizing:border-box;height:30px;padding:4px 8px;display:flex;align-items:center;gap:4px;border-radius:4px;color:#666;font-size:14px;line-height:22px}.orgx-result-row.active{color:#333;background:#0000000a}.orgx-result-row span{white-space:nowrap}.orgx-result-row small{margin-left:auto;color:#999;font-size:12px}.orgx-search-empty{position:absolute;left:0;right:0;top:52px;bottom:0;display:flex;flex-direction:column;align-items:center;justify-content:center;color:#999;font-size:16px;line-height:24px}.orgx-search-empty img{width:120px;height:120px;object-fit:contain}
.orgx-dialog>main{grid-template-columns:483px 250px}.orgx-summary{height:48px}.orgx-selected-list{padding-top:4px}.orgx-check{margin-right:4px}.orgx-tree:not(.flat) .orgx-line.l1{left:20px}.orgx-tree:not(.flat) .orgx-line.l2{left:44px}.orgx-tree:not(.flat) .orgx-line.l3{left:68px}.orgx-tree:not(.flat)::after{left:92px}.orgx-line,.orgx-tree:not(.flat)::after{background:#e8e8e8}
.orgx-all .orgx-check.checked,.orgx-withAllAll .orgx-check.checked{border-color:#b6d9ff;background:#b6d9ff}.orgx-all .orgx-row.active,.orgx-withAllAll .orgx-row.active{color:#333;background:#0000000a}
.orgx-live,.orgx-card-preview{background:#fff}.orgx-row .orgx-icon,.orgx-selected-list .orgx-icon,.orgx-result-row .orgx-icon{width:22px!important;height:22px!important}.orgx-search .orgx-icon{width:16px!important;height:16px!important}.orgx-type .orgx-icon{width:14px!important;height:14px!important}.orgx-type .orgx-icon:last-child{width:12px!important;height:12px!important}.orgx-tree:not(.flat) .orgx-line.l1{left:36px}.orgx-tree:not(.flat) .orgx-line.l2{left:60px}.orgx-tree:not(.flat) .orgx-line.l3{left:84px}.orgx-tree:not(.flat)::after{left:108px}.orgx-row[class*="level-"]::before{content:"";position:absolute;z-index:-1;top:15px;height:1px;background:#e8e8e8}.orgx-row.level-1::before{left:12px;width:8px}.orgx-row.level-2::before{left:36px;width:8px}.orgx-row.level-3::before{left:60px;width:8px}.orgx-row.level-4::before{left:84px;width:8px}.orgx-row.level-0::before{display:none}

/* 深色主题只同步三类页面的展示底板，组件本体继续使用设计稿原色�?*/
body.theme-dark #componentPreview :where(
  .data-input-stage,
  .di-gallery-card,
  .di-gallery-preview,
  .di-state-group,
  .di-state-card,
  .dd-live,
  .dd-card,
  .dd-card-preview,
  .orgx-live,
  .orgx-card,
  .orgx-card-preview
) {
  border-color: #343c48 !important;
  background-color: #171c24 !important;
}

/* 通用组件最终布局：小变量横向自适应，宽变量纵向，页面无横向滚动 */
.cc-lab{overflow-x:hidden}.cc-section{overflow:hidden}.cc-grid{grid-template-columns:repeat(auto-fit,minmax(238px,1fr))!important;align-items:stretch}.cc-section-wide .cc-grid{grid-template-columns:minmax(0,1fr)!important}.cc-card{box-sizing:border-box;width:100%;min-width:0}.cc-card-wide{grid-column:1/-1}.cc-demo{box-sizing:border-box;width:100%;min-width:0;overflow:hidden!important}.cc-card code{white-space:pre-wrap;overflow-wrap:anywhere;word-break:break-word}.cc-playground{box-sizing:border-box;padding:16px;overflow:hidden;border:1px solid #d9d9d9;border-radius:8px;background:#fff}.cc-controls{padding:16px 0;display:grid;grid-template-columns:repeat(2,minmax(0,220px));gap:12px}.cc-controls label{display:grid;gap:6px;color:#666;font-size:12px}.cc-controls select{box-sizing:border-box;width:100%;height:32px;padding:5px 28px 5px 12px;border:1px solid #d9d9d9;border-radius:4px;color:#333;background:#fff;font:400 14px/22px "Source Han Sans CN","思源黑体 CN",sans-serif}.cc-live{min-width:0}.cc-live-demo{box-sizing:border-box;width:100%;min-height:150px;padding:28px;display:grid;place-items:center;overflow:hidden;border-radius:6px;background:#fafafa}.cc-live-demo+.variant-code{box-sizing:border-box;width:100%;margin-top:12px;white-space:pre-wrap;overflow-wrap:anywhere}.cc-demo button,.cc-demo label,.cc-live-demo button,.cc-live-demo label{cursor:pointer}.cc-float:hover{background:#fff}.cc-float:active{background:#f7f7f7}.cc-tab:hover{color:#4ba2ff}.cc-tab:active{color:#2279d6}.cc-radio:not(.disabled):hover{border-color:#4ba2ff}.cc-checkbox:not(.disabled):hover{border-color:#4ba2ff}.cc-pagination button:hover{color:#4ba2ff;border-color:#4ba2ff}.cc-pagination button:active{color:#2279d6;border-color:#2279d6}.cc-time-switch button:hover,.cc-floating-switch button:hover{color:#4ba2ff}.cc-segment-control button:hover{color:#4ba2ff}.cc-alert{width:min(620px,100%)}.cc-notice{width:min(360px,100%)}.cc-filter-switch{max-width:100%;flex-wrap:wrap;justify-content:center}.cc-pagination{max-width:100%;flex-wrap:wrap;justify-content:center;height:auto}.cc-scroll.horizontal.large{width:min(530px,100%)}@media(max-width:760px){.cc-grid{grid-template-columns:minmax(0,1fr)!important}.cc-controls{grid-template-columns:1fr}.cc-live-demo{padding:18px}.cc-alert{transform:none}.cc-card-wide{grid-column:auto}}

/* 通用组件纵向变量总览：禁止横向滚�?*/
.cc-lab,.cc-section,.cc-grid,.cc-card,.cc-demo{min-width:0;max-width:100%}.cc-grid{grid-template-columns:minmax(0,1fr)!important}.cc-demo{box-sizing:border-box;width:100%;min-height:110px;padding:20px;overflow:hidden!important}.cc-card code{white-space:pre-wrap;overflow-wrap:anywhere;text-overflow:clip}.cc-badge-text{position:relative;display:inline-flex;align-items:center;color:#333;line-height:1.55}.cc-badge-text.size-12{font-size:12px;line-height:18px}.cc-badge-text.size-14{font-size:14px;line-height:22px}.cc-badge-text.size-16{font-size:16px;line-height:24px}.cc-badge-text>i{position:absolute;right:-9px;top:-4px}.cc-badge-text>.cc-badge-count{right:-19px;top:-8px}.cc-badge-icon{position:relative;width:var(--cc-icon);height:var(--cc-icon);display:inline-grid;place-items:center}.cc-badge-icon>i{position:absolute;right:-5px;top:-5px}.cc-badge-icon>.cc-badge-count{right:-15px;top:-8px}.cc-badge-avatar{position:relative;width:var(--cc-avatar);height:var(--cc-avatar);display:inline-block}.cc-badge-avatar>i{display:block;width:100%;height:100%;border-radius:4px;background:#d9d9d9}.cc-badge-avatar.round>i{border-radius:50%}.cc-badge-avatar>b{position:absolute;right:-3px;top:-3px}.cc-badge-avatar>.cc-badge-count{right:-10px;top:-8px}.cc-corner-badge{position:relative;width:42px;height:42px;display:block;overflow:hidden}.cc-corner-badge:before{content:"";position:absolute;inset:0;background:linear-gradient(135deg,var(--corner) 0 50%,transparent 50%)}.cc-corner-badge b{position:absolute;left:2px;top:7px;color:#fff;font-size:8px;line-height:10px;font-weight:400;transform:rotate(-45deg)}.cc-corner-badge.blue{--corner:#2990ff}.cc-corner-badge.green{--corner:#5ab333}.cc-corner-badge.yellow{--corner:#f0aa32}.cc-corner-badge.red{--corner:#e44144}.cc-time-switch,.cc-view-switch,.cc-list-switch,.cc-floating-switch,.cc-segment-control{display:inline-flex;align-items:center}.cc-time-switch{height:30px;padding:2px;border-radius:4px;background:#f7f8fa}.cc-time-switch button{box-sizing:border-box;min-width:46px;height:26px;padding:2px 12px;border:0;border-radius:3px;color:#666;background:transparent;font-size:14px;line-height:22px}.cc-time-switch.custom button{min-width:32px}.cc-time-switch button.on{color:#2990ff;background:#fff;box-shadow:0 1px 4px #00000014}.cc-view-switch,.cc-list-switch{height:32px;border:1px solid #d9d9d9;border-radius:4px;background:#fff}.cc-view-switch button,.cc-list-switch button{box-sizing:border-box;height:30px;padding:4px 12px;display:flex;align-items:center;gap:4px;border:0;border-right:1px solid #e8e8e8;color:#666;background:transparent;font-size:14px;line-height:22px}.cc-view-switch button:last-child,.cc-list-switch button:last-child{border-right:0}.cc-view-switch button:last-child,.cc-view-switch.left button:first-child,.cc-list-switch button:last-child,.cc-list-switch.left button:first-child{color:#2990ff;background:#2990ff0f}.cc-view-switch.left button:last-child,.cc-list-switch.left button:last-child{color:#666;background:transparent}.cc-view-switch.hover button:last-child,.cc-view-switch.left.hover button:first-child,.cc-list-switch.hover button:last-child,.cc-list-switch.left.hover button:first-child{color:#4ba2ff}.cc-view-switch.active button:last-child,.cc-view-switch.left.active button:first-child,.cc-list-switch.active button:last-child,.cc-list-switch.left.active button:first-child{color:#2279d6}.cc-floating-switch{box-sizing:border-box;min-height:38px;padding:4px;border:1px solid #e8e8e8;border-radius:19px;background:#ffffff99;box-shadow:0 4px 10px #00000014}.cc-floating-switch button{height:28px;padding:3px 12px;border:0;border-radius:14px;color:#666;background:transparent;font-size:14px;line-height:22px}.cc-floating-switch button.on{color:#2990ff;background:#fff;box-shadow:0 1px 4px #00000014}.cc-segment-control{height:32px}.cc-segment-control button{box-sizing:border-box;width:66px;height:32px;border:1px solid #d9d9d9;border-right:0;color:#666;background:#fff;font-size:14px}.cc-segment-control button:first-child{border-radius:4px 0 0 4px}.cc-segment-control button:last-child{border-right:1px solid #d9d9d9;border-radius:0 4px 4px 0}.cc-segment-control button.on{position:relative;color:#2990ff;border-color:#2990ff;background:#2990ff0f}.cc-segment-control button.on+button{border-left-color:#2990ff}.cc-alert{max-width:100%}.cc-scroll.horizontal.large{max-width:100%}@media(max-width:760px){.cc-demo{padding:14px}.cc-alert{width:100%;transform:none}.cc-filter-switch{flex-wrap:wrap;justify-content:center}.cc-scroll.horizontal.large{width:100%}}