/* 单色图标：共用遮罩渲染。组件只调整尺寸、颜色与动画。 */
.ui-icon, .arcade-icon { display: inline-block; flex-shrink: 0; background: currentColor; mask-position: center; mask-size: contain; mask-repeat: no-repeat; }
.ui-icon { width: 16px; height: 16px; flex-basis: 16px; vertical-align: middle; }
.arcade-icon { width: 17px; height: 17px; }
.ui-icon-refresh, .icon-refresh { mask-image: url("../images/refresh-cw.svg"); }
.ui-icon-help { mask-image: url("../images/circle-help.svg"); }
.ui-icon-close, .icon-close { mask-image: url("../images/x.svg"); }
.ui-icon-pin, .home-arcade-empty-pin { mask-image: url("../images/map-pin.svg"); }
.ui-icon-search, .icon-search { mask-image: url("../images/search.svg"); }
.icon-locate { mask-image: url("../images/locate-fixed.svg"); }
.icon-back { mask-image: url("../images/arrow-left.svg"); }
.icon-star { mask-image: url("../images/star.svg"); }
.icon-minus { mask-image: url("../images/minus.svg"); }
.icon-plus { mask-image: url("../images/plus.svg"); }
.icon-navigation { mask-image: url("../images/navigation.svg"); }
.icon-expand, .arcade-arrow, .home-widget-arrow, .home-widget-footer-arrow,
.home-widget-links a::after, .home-entry-arrow, .mai-platform-arrow, .docs-nav-arrow { mask-image: url("../images/arrow-up-right.svg"); }
.docs-nav-arrow-back { mask-image: url("../images/arrow-left.svg"); }
.home-qq-icon, .ui-icon-qq { mask-image: url("../images/qq.svg"); }
/* These decorative aliases keep their component-specific size and paint. */
.home-arcade-empty-pin, .arcade-arrow, .home-widget-arrow, .home-widget-footer-arrow,
.home-widget-links a::after, .home-entry-arrow, .mai-platform-arrow, .docs-nav-arrow,
.home-qq-icon { mask-position: center; mask-size: contain; mask-repeat: no-repeat; }
@media (forced-colors: active) { .ui-icon, .arcade-icon { background: CanvasText; } }

/* Shared icon motion. Request rotation continues from the current hover angle. */
.ui-refresh-button :is(.ui-icon-refresh, .icon-refresh, .ui-refresh-icon) { transition: transform .18s ease; }
.ui-refresh-button:not(.is-refreshing):is(:hover, :focus-visible):not(:disabled) :is(.ui-icon-refresh, .icon-refresh, .ui-refresh-icon) { transform: rotate(65deg) scale(.94); }
.ui-refresh-button.is-refreshing :is(.ui-icon-refresh, .icon-refresh, .ui-refresh-icon) { animation: ui-refresh-spin .8s linear infinite; }
@keyframes ui-refresh-spin { from { transform: rotate(var(--ui-refresh-start, 0deg)) scale(var(--ui-refresh-scale, 1)); } to { transform: rotate(calc(var(--ui-refresh-start, 0deg) + 360deg)) scale(var(--ui-refresh-scale, 1)); } }
@media (prefers-reduced-motion: reduce) {
.ui-refresh-button :is(.ui-icon-refresh, .icon-refresh, .ui-refresh-icon) { transition: none; }
.ui-refresh-button:not(.is-refreshing):is(:hover, :focus-visible):not(:disabled) :is(.ui-icon-refresh, .icon-refresh, .ui-refresh-icon) { transform: none; }
.ui-refresh-button.is-refreshing :is(.ui-icon-refresh, .icon-refresh, .ui-refresh-icon) { animation: none; }
}