/* ============================================================
 * 电量状态徽章 .power-state-badge（原 style.css 内，2026-10-07 抽出为共享文件）
 * ------------------------------------------------------------
 * 为什么单独成文件：徽章在**前台与后台都要渲染**（前台：侧栏用户面板 /
 * 个人中心身份卡 / 签到横幅 / 发电档位卡；后台：用户列表「徽章」列），
 * 但后台只加载 admin.css + notice.css、**不加载 style.css**，
 * 导致后台徽章退化为无样式纯文字。抽到本文件后两边都能加载，
 * 样式定义**只有这一处**（统一设置，改一处全站生效）。
 *
 * 变量桥接：前台用 --color-* 色板，后台缺大部分语义色令牌，
 * 故每个 var() 都带「前台变量 → 后台变量 → 字面量」三级兜底
 * （与 notice.css 的变量桥接层同一思路），不写死任何前台专属颜色。
 *
 * 颜色由档位 class 决定：psb-none/low/mid/high/full/lifetime。
 * ============================================================ */

/* 「用户名旁的徽章」统一槽位：由 user_badge_html() 输出，内含一枚 .power-state-badge。
   自身只做内联 flex 容器，保证在 .user-name / .mc-idcard-name / .ci-banner-name
   等 flex 行里与直接放徽章表现一致；同时作为切换徽章后 JS 原地同步的锚点。 */
.user-badge-slot {
    display: inline-flex;
    align-items: center;
}

.power-state-badge {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 13px; font-weight: 700; line-height: 1;
    white-space: nowrap;
    padding: 4px 11px; border-radius: 9px;
    border: 1.5px solid currentColor;
    background: color-mix(in srgb, currentColor 10%, transparent);
}
.power-state-badge svg { flex-shrink: 0; }
.power-state-badge.psb-none   { color: var(--color-text-dim, var(--text-3, #9fadbc)); }
.power-state-badge.psb-low    { color: var(--color-danger, #e0464f); }
.power-state-badge.psb-mid    { color: var(--color-warning, #f59e0b); }
.power-state-badge.psb-high   { color: var(--color-accent, var(--brand, #638cff)); }
.power-state-badge.psb-full   { color: var(--color-success, #1f9d6b); }
/* 通用兜底：后台自定义徽章（系统无专属电量图标）统一走中性灰描边样式 */
.power-state-badge.psb-custom { color: var(--color-text-secondary, var(--text-2, #6b7a8c)); }
.power-state-badge.psb-lifetime {
    color: var(--color-lifetime-gold, #e8c46a);
    background: linear-gradient(135deg,
        var(--color-lifetime-bg, var(--color-bg-card, #ffffff)) 0%,
        var(--color-lifetime-bg-2, var(--color-bg-page-soft, #f3f6f8)) 100%);
    border-color: color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 80%, transparent);
    /* 文字金色发光 */
    text-shadow: 0 0 6px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 75%, transparent),
                 0 0 14px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 45%, transparent);
    /* 边框金色微光：静止时一层淡晕，psb-glow-pulse 动画让其缓慢呼吸 */
    box-shadow: 0 0 6px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 55%, transparent),
                0 0 16px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 30%, transparent);
    animation: psb-glow-pulse 2.8s ease-in-out infinite;
}
/* ∞ 图标同色发光，与文字一体 */
.power-state-badge.psb-lifetime svg {
    filter: drop-shadow(0 0 4px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 70%, transparent));
}
@keyframes psb-glow-pulse {
    0%, 100% {
        box-shadow: 0 0 5px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 45%, transparent),
                    0 0 12px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 22%, transparent);
    }
    50% {
        box-shadow: 0 0 10px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 80%, transparent),
                    0 0 26px color-mix(in srgb, var(--color-lifetime-gold, #e8c46a) 45%, transparent);
    }
}
/* 尊重系统「减少动态效果」设置：关掉呼吸动画，保留静态淡晕 */
@media (prefers-reduced-motion: reduce) {
    .power-state-badge.psb-lifetime { animation: none; }
}