/* Learning Path XP previews share the actual gold coin CSS used beside the kid avatar.
   No spendable currency is created, and animations respect reduced-motion settings. */
.hm-learning-xp-preview{box-sizing:border-box;position:relative;z-index:5;width:min(100%,330px);margin:8px auto 10px;padding:14px 12px;border:2px solid #6558e8;border-radius:18px;background:#fffaF0;color:#30304d;text-align:center;box-shadow:0 9px 26px #33267b28;animation:hm-xp-card-enter .38s both}
.hm-learning-xp-kicker{margin:0 0 6px!important;font-size:.8rem;font-weight:800;color:#5142a7}
.hm-learning-xp-reward{display:flex;justify-content:center;align-items:center;gap:10px;margin:6px 0}
.hm-learning-xp-reward .hm-kid-avatar-gold-coin{flex:0 0 32px;width:32px;height:32px;animation:hm-xp-coin-spring .65s .1s both}
.hm-learning-xp-reward .hm-kid-avatar-gold-coin::after{font-size:17px}
.hm-learning-xp-amount{color:#6b4300;font-weight:950;font-size:1.65rem;line-height:1.15;animation:hm-xp-number-pop .55s .15s both}
.hm-learning-xp-detail{margin:8px 0!important;font-size:.84rem;line-height:1.4;font-weight:700}
.hm-learning-xp-note{margin:5px 0 10px!important;font-size:.72rem;line-height:1.4;color:#635d72}
.hm-learning-xp-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:7px}
.hm-learning-xp-actions button{font:inherit;font-weight:800;font-size:.79rem;border-radius:12px;min-height:42px;padding:8px 10px;cursor:pointer}
.hm-learning-xp-start{background:#6558e8;color:#fff;border:2px solid #6558e8}
.hm-learning-xp-close{background:#fff;color:#453689;border:2px solid #ab9fe9}
.hm-learning-xp-actions button:focus-visible{outline:3px solid #128878;outline-offset:3px}
@keyframes hm-xp-card-enter{from{opacity:0;transform:translateY(9px) scale(.96)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes hm-xp-coin-spring{0%{transform:rotate(-25deg) scale(.55)}60%{transform:rotate(11deg) scale(1.27)}100%{transform:rotate(0) scale(1)}}
@keyframes hm-xp-number-pop{0%{opacity:0;transform:scale(.7)}65%{opacity:1;transform:scale(1.13)}100%{transform:scale(1)}}
@media (max-width:420px){.hm-learning-xp-preview{padding:12px 9px}.hm-learning-xp-amount{font-size:1.4rem}}
@media (prefers-reduced-motion:reduce){.hm-learning-xp-preview,.hm-learning-xp-preview *{animation:none!important;transition:none!important}}

/* The same CSS-drawn coin as the kid avatar; also works on pages without the avatar widget. */
.hm-learning-xp-reward .hm-kid-avatar-gold-coin{display:inline-grid;place-items:center;box-sizing:border-box;border:2px solid #b9790e;border-radius:50%;background:radial-gradient(circle at 30% 22%,#fff6a2 0%,#ffdc56 40%,#f2ab13 78%,#c3800a 100%);box-shadow:inset 0 0 0 1px #ffeb91,0 1px 1px rgba(95,58,6,.22)}
.hm-learning-xp-reward .hm-kid-avatar-gold-coin::after{content:'★';font-weight:900;line-height:1;color:#a76408;text-shadow:0 1px 0 #ffe98b}