.card-lab { width: 100%; display: grid; gap: 20px; font-family: "Source Han Sans CN", "思源黑体 CN", "Microsoft YaHei", sans-serif; }
.card-playground { padding: 20px; display: grid; gap: 16px; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; }
.card-playground-head { display: grid; gap: 2px; }
.card-playground-head h3 { margin: 0; font-size: 14px; line-height: 22px; }
.card-playground-head span { color: #999; font-size: 11px; }
.card-control { width: min(100%, 360px); display: grid; gap: 8px; }
.card-control label { color: #666; font-size: 12px; line-height: 18px; }
.card-live { min-height: 368px; padding: 20px; display: grid; place-items: center; border: 1px dashed #d9d9d9; border-radius: 6px; background: #f7f7f7; }
.card-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(390px, 1fr)); gap: 16px; }
.card-variant { min-width: 0; overflow: hidden; border: 1px solid #e8e8e8; border-radius: 8px; background: #fff; }
.card-variant > header { height: 44px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid #e8e8e8; font-size: 12px; }
.card-variant > header span { color: #999; }
.card-stage { min-height: 372px; padding: 20px 12px; display: grid; place-items: center; background: #f7f7f7; }
.lan-card,.lan-card * { box-sizing: border-box; }
.lan-card { position: relative; width: 360px; overflow: hidden; color: #000; border-radius: 6px; background: #fff; font-weight: 400; }
.lan-card.basic,.lan-card.edit,.lan-card.tagged { height: 176px; padding: 12px; }
.lan-card h3 { height: 24px; margin: 0; display: flex; align-items: center; font-size: 16px; font-weight: 400; line-height: 28px; }
.lan-card p { margin: 0; font-size: 14px; line-height: 28px; }
.lan-card header { height: 24px; display: flex; align-items: center; justify-content: space-between; }
.lan-card-head-actions { height: 22px; display: flex; align-items: center; gap: 8px; }
.lan-card-head-actions > i,.lan-card-actions > i { width: 0; height: 16px; flex: 0 0 0; border-left: 1px solid #ebebeb; }
.lan-card-icon-button { width: 22px; height: 22px; padding: 0; display: grid; flex: 0 0 22px; place-items: center; border: 0; border-radius: 4px; background: transparent; cursor: pointer; }
.lan-card-icon { position: relative; width: 22px; height: 22px; display: block; }
.lan-card-icon img { position: absolute; inset: 0; width: 22px; height: 22px; display: block; }
.lan-card-icon .is-hover,.lan-card-icon .is-pressed { display: none; }
.lan-card-icon-button:hover .is-normal,.lan-card-icon-button:focus-visible .is-normal { display: none; }
.lan-card-icon-button:hover .is-hover,.lan-card-icon-button:focus-visible .is-hover { display: block; }
.lan-card-icon-button:active .is-hover { display: none; }
.lan-card-icon-button:active .is-pressed { display: block; }
.lan-card-icon-button:focus-visible { outline: 2px solid #2990ff; outline-offset: 1px; }
.lan-card-line { width: 100%; height: 1px; margin: 8px 0 7px; background: #ebebeb; }
.lan-card-tag { height: 22px; padding: 2px 8px; display: inline-flex; align-items: center; border-radius: 4px; color: #f0aa32; background: #fef7eb; font-size: 12px; line-height: 18px; }
.lan-card-content { box-sizing: border-box; width: 100%; padding: 12px; }
.lan-card-actions { position: absolute; left: 0; right: 0; bottom: 0; height: 46px; padding: 12px 49px; display: flex; align-items: center; gap: 49px; box-shadow: 0 -1px 0 #00000014; background: #fff; }
.image-basic,.image-title { height: 222px; }
.image-basic { padding: 12px 12px 58px; }
.lan-card-cover { width: 336px; display: block; object-fit: cover; border-radius: 6px; }
.image-basic .lan-card-cover { height: 152px; }
.image-title .lan-card-content { height: 176px; }
.image-title .lan-card-cover { height: 112px; }
.image-custom { height: 328px; }
.image-custom .lan-card-content { height: 282px; }
.image-custom .lan-card-cover { height: 98px; margin-bottom: 8px; }
.card-code { min-height: 46px; padding: 8px 10px; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: #d9e1ec; background: #111722; }
.card-code code { min-width: 0; overflow: hidden; font: 11px/18px ui-monospace, Consolas, monospace; text-overflow: ellipsis; white-space: nowrap; }
.card-code button { height: 26px; padding: 0 10px; flex: 0 0 auto; border: 1px solid #4b5565; border-radius: 4px; color: #d9e1ec; background: #202838; font-size: 11px; }
body.theme-dark .card-playground,body.theme-dark .card-variant { border-color: #343c48; background: #1d232d; }
body.theme-dark .card-live,body.theme-dark .card-stage { border-color: #343c48; background: #171c24; }
body.theme-dark .card-control label { color: #98a2b3; }
body.theme-dark .card-control .modern-select-trigger { color: #e4e7ec; border-color: #46505e; background: #252c37; }
body.theme-dark .card-control .modern-select-menu { border-color: #343c48; background: #252c37; }
body.theme-dark .card-control .modern-select-option { color: #cbd5e1; }
body.theme-dark .card-control .modern-select-option:hover,body.theme-dark .card-control .modern-select-option:focus { color: #fff; background: #303844; }
body.theme-dark .card-control .modern-select-option.selected { color: #69b0ff; background: #172b43; }
@media (max-width: 760px) { .card-gallery { grid-template-columns: 1fr; }.card-stage,.card-live { overflow: hidden; padding-inline: 4px; }.lan-card { transform: scale(.88); }.card-control { width: 100%; } }