/* 后台有自定义样式颜色值等的修改，每个变量已经规定，否则不能再后台修改、只定义一次，无重复。此注释永久保留。 */

/* ============================================================
 * hint.css — 首次引导气泡（全站通用组件）
 * ------------------------------------------------------------
 * main.js showHintOnce() 注入：高亮目标元素 + 气泡提示，看过后（localStorage 标记）不再弹。
 * 三类引导共用同一套：视图切换 / 首页分页栏 / 个人中心头像修改。
 *
 * ⚠️ 必须**全局加载**（base.html 顶层，绝不放进 $__no_list_css 条件块）：
 *    头像引导出现在「会员中心」，而该页会跳过 list/grid/toolbar.css。样式若留在
 *    toolbar.css，会员中心页气泡会完全失去样式（裸 HTML 直接塞进头像按钮）。
 * ============================================================ */

/* 高亮目标：脉冲圈（三类引导共用同一 keyframes） */
.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; }
/* 首页分页栏（.is-hint 注入 .app-card-pager，气泡挂其父节点 .app-card-pager-row） */
.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: 10px; }
/* 个人中心头像按钮（#mc-avatar-btn 注入 .is-hint） */
.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%; }
@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: 10px;
    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: 8px; 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; }
/* 居中修饰：气泡水平居中（JS 用 left:50% + 负 margin 定位），箭头移到正中（分页栏用） */
.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);
}