.view-switch.is-hint { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 32%, transparent); animation: viewHintPulse 1.6s ease-in-out infinite; }

.app-card-pager.is-hint { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 32%, transparent); animation: viewHintPulse 1.6s ease-in-out infinite; border-radius: var(--radius-card); }

.mc-idcard-avatar-btn.is-hint { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 32%, transparent); animation: viewHintPulse 1.6s ease-in-out infinite; border-radius: 50%; }

.app-search.is-hint,
.app-search-mobile.is-hint { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 32%, transparent); animation: viewHintPulse 1.6s ease-in-out infinite; border-radius: 20px; }

.app-topnav-recent.is-hint { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 32%, transparent); animation: viewHintPulse 1.6s ease-in-out infinite; border-radius: var(--radius-sm); }

.game-tabs[data-section-tabs].is-hint { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 32%, transparent); animation: viewHintPulse 1.6s ease-in-out infinite; border-radius: var(--radius-sm); }
@keyframes viewHintPulse {
    0%, 100% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--color-accent) 30%, transparent); }
    50%      { box-shadow: 0 0 0 5px color-mix(in srgb, var(--color-accent) 12%, transparent); }
}
.view-hint-pop {
    position: absolute; bottom: calc(100% + 10px); top: auto; right: 0; z-index: 60;
    max-width: calc(100vw - 24px); width: max-content;
    display: flex; align-items: center; gap: 10px;
    padding: 9px 12px; border-radius: var(--radius-sm);
    background: var(--color-bg-card); color: var(--color-text);
    border: 1px solid var(--color-border);
    box-shadow: 0 8px 24px rgba(0,0,0,.16);
    font-size: 13px; line-height: 1.4;
    opacity: 0; transform: translateY(4px); pointer-events: none;
    transition: opacity .2s, transform .2s;
}
.view-hint-pop.is-show { opacity: 1; transform: translateY(0); pointer-events: auto; }
.view-hint-pop__text { white-space: normal; }
.view-hint-pop__close {
    flex-shrink: 0; border: none; background: var(--color-accent); color: var(--color-text-invert);
    padding: 4px 10px; border-radius: var(--radius-sm); font-size: 12px; cursor: pointer;
}
[data-theme="dark"] .view-hint-pop__close { color: var(--color-accent-ink); }
.view-hint-pop__close:hover { filter: brightness(1.06); }

.view-hint-pop__arrow {
    position: absolute; bottom: -5px; right: 14px; width: 10px; height: 10px;
    background: var(--color-bg-card); border-right: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border);
    transform: rotate(45deg);
}

.view-hint-pop--left { right: auto; left: 0; }
.view-hint-pop--left .view-hint-pop__arrow { right: auto; left: 14px; }

.view-hint-pop--center .view-hint-pop__arrow { right: auto; left: 50%; margin-left: -5px; }

.view-hint-pop--bottom { bottom: auto; top: calc(100% + 10px); transform: translateY(-4px); }
.view-hint-pop--bottom.is-show { transform: translateY(0); }
.view-hint-pop--bottom .view-hint-pop__arrow {
    bottom: auto; top: -5px;
    border-right: none; border-bottom: none;
    border-left: 1px solid var(--color-border); border-top: 1px solid var(--color-border);
}