/* Scoped examples; skeleton contrast uses existing neutral tokens. */
.feedback-spec h5{font-size:14px;font-weight:600;margin:0 0 16px;color:var(--ui-body)}
.skeleton-content{border:1px solid var(--ui-border);padding:16px;margin-top:16px;background:var(--ui-white);min-height:320px;box-sizing:border-box}
.demo-area .skeleton-content .el-skeleton{margin-top:0}
.skeleton-layout{display:grid;gap:16px}
.demo-area .skeleton-content .el-skeleton__item{display:block;background:var(--ui-border);border-radius:0;height:14px}
.demo-area .skeleton-content .skeleton-title{height:20px;width:32%;min-width:120px;margin:0 0 8px}
.skeleton-field-row{display:grid;grid-template-columns:72px minmax(0,240px);gap:12px;align-items:center;min-height:21px}
.skeleton-table{margin-top:8px;border-top:1px solid var(--ui-divider)}
.skeleton-table-row{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:24px;min-height:44px;align-items:center;border-bottom:1px solid var(--ui-divider)}
.skeleton-table-row .el-skeleton__item{width:75%}
.skeleton-loaded>p{margin:0 0 16px;min-height:21px}
.skeleton-loaded th,.skeleton-loaded td{height:44px;box-sizing:border-box}
.demo-area .skeleton-content .el-skeleton.is-animated .el-skeleton__item{background:linear-gradient(90deg,var(--ui-border) 25%,var(--ui-divider) 37%,var(--ui-border) 63%);background-size:400% 100%;animation:el-skeleton-loading 2.2s ease infinite}
@media(prefers-reduced-motion:reduce){.demo-area .skeleton-content .el-skeleton.is-animated .el-skeleton__item{animation:none;background:var(--ui-border)}}

.local-backtop-stage{position:relative;margin-top:12px}
.local-backtop-stage .backtop-scroll{height:180px;padding:12px 68px 12px 12px;overflow:auto;scroll-behavior:smooth}
.local-backtop-button{position:absolute;right:22px;bottom:16px;width:32px;height:32px;min-width:32px;min-height:32px;padding:0;display:flex;align-items:center;justify-content:center;border:1px solid var(--ui-border);border-radius:4px;background:var(--ui-white);color:var(--ui-action);font-size:16px;line-height:16px;box-shadow:none}
.local-backtop-button i{font-size:16px;line-height:16px}
.local-backtop-button:hover{background:var(--ui-selected)}
.local-backtop-button:focus-visible{outline:2px solid var(--ui-action)!important;outline-offset:2px}
@media(prefers-reduced-motion:reduce){.local-backtop-stage .backtop-scroll{scroll-behavior:auto}}

/* 独立滚动示例：原生容器与自定义容器均使用单套6px滚动条。 */
.demo-area .infinite-box,.local-backtop-stage .backtop-scroll{scrollbar-width:auto;scrollbar-color:auto;overscroll-behavior:contain}
.demo-area .infinite-box::-webkit-scrollbar,.local-backtop-stage .backtop-scroll::-webkit-scrollbar{width:6px;height:6px}
.demo-area .infinite-box::-webkit-scrollbar-track,.local-backtop-stage .backtop-scroll::-webkit-scrollbar-track{background:var(--ui-subtle)}
.demo-area .infinite-box::-webkit-scrollbar-thumb,.local-backtop-stage .backtop-scroll::-webkit-scrollbar-thumb{background:var(--ui-border);border-radius:4px}
.demo-area .infinite-box::-webkit-scrollbar-thumb:hover,.local-backtop-stage .backtop-scroll::-webkit-scrollbar-thumb:hover{background:var(--ui-help)}
.demo-area .scrollbar-sample{height:140px;padding:0;background:var(--ui-white)}
.demo-area .scrollbar-sample .el-scrollbar__wrap{height:100%;max-height:none;margin:0!important;overflow:auto;scrollbar-width:none;overscroll-behavior:contain}
.demo-area .scrollbar-sample .el-scrollbar__wrap::-webkit-scrollbar{display:none;width:0;height:0}
.demo-area .scrollbar-sample .el-scrollbar__view{padding:12px 20px 12px 12px;min-width:0;overflow-wrap:anywhere}
.demo-area .scrollbar-sample>.el-scrollbar__bar.is-vertical{width:6px;right:0;top:0;bottom:0;opacity:1;background:var(--ui-subtle)}
.demo-area .scrollbar-sample>.el-scrollbar__bar.is-horizontal{display:none}
.demo-area .scrollbar-sample .el-scrollbar__thumb{background:var(--ui-border);border-radius:4px;opacity:1}
.demo-area .scrollbar-sample .el-scrollbar__thumb:hover{background:var(--ui-help)}
@supports not selector(::-webkit-scrollbar){.demo-area .infinite-box,.local-backtop-stage .backtop-scroll{scrollbar-width:thin;scrollbar-color:var(--ui-border) var(--ui-subtle)}}

.local-confirm-question{display:flex;align-items:flex-start;gap:8px;font-size:14px;line-height:21px;color:var(--ui-body)}.local-confirm-question i{color:var(--ui-danger);line-height:21px}.local-confirm-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:16px}.local-confirm-actions .el-button+.el-button{margin-left:0}

/* Lightweight column reset confirmation uses the same type scale as its business example. */
.local-column-reset-panel .help{font-size:12px!important;font-weight:400!important;line-height:18px!important;color:var(--ui-help)!important}
.local-column-reset-panel .el-button,.local-column-reset-panel .el-button>span{font-size:14px!important;font-weight:400!important;line-height:21px!important}
.local-column-reset-panel .el-button{display:inline-flex;align-items:center;justify-content:center;height:32px;padding:0 16px!important}
.local-column-reset-panel .el-button:not(.el-button--primary){color:var(--ui-body)!important}

/* 2026-09-16: result title and detail follow their declared reading roles. */
.demo-area .feedback-spec .el-result__title p{font-size:14px;font-weight:600;line-height:21px;color:var(--ui-body)!important}
.demo-area .feedback-spec .el-result__subtitle p{font-size:14px;font-weight:400;line-height:21px;color:var(--ui-body)!important}