.achv{position:relative;overflow:hidden;isolation:isolate;border-radius:var(--radius-panel);background:var(--achv-surface, var(--color-bg-surface));box-shadow:inset 0 0 0 1px var(--achv-ring, transparent),var(--elevation-card);transition:transform .28s cubic-bezier(.16,1,.3,1),box-shadow .28s cubic-bezier(.16,1,.3,1)}.achv--unlocked:hover{transform:translateY(-2px);box-shadow:inset 0 0 0 1px var(--achv-ring, transparent),var(--elevation-card-hover)}.achv-medallion{position:relative;display:flex;align-items:center;justify-content:center;width:3.25rem;height:3.25rem;flex-shrink:0;border-radius:var(--radius-icon);color:var(--achv-medallion-ink, var(--color-text-on-navy));background:var(--achv-medallion, var(--color-brand-600));transition:background .15s cubic-bezier(.4,0,.2,1)}.achv--legendary .achv-medallion,.achv--mythic .achv-medallion{box-shadow:0 0 0 2px var(--achv-ring-gap, var(--color-bg-surface)),0 0 0 3.5px var(--color-accent-yellow)}.achv-chip{display:inline-flex;align-items:center;gap:.3rem;padding:.2rem .6rem;border-radius:var(--radius-pill);font-size:var(--text-label);line-height:var(--text-label--line-height);font-weight:800;letter-spacing:var(--text-label--letter-spacing);text-transform:uppercase;background:var(--achv-chip-bg);color:var(--achv-chip-text)}.achv-grad-text{color:var(--achv-chip-text)}.achv-reward{display:inline-flex;align-items:center;gap:.3rem;padding:.22rem .6rem;border-radius:var(--radius-pill);font-size:var(--text-small);line-height:var(--text-small--line-height);font-weight:900;font-variant-numeric:tabular-nums}.achv-reward--xp{background:var(--color-brand-50);color:var(--color-brand-800)}.achv-reward--coin{background:var(--color-warning-fill);color:var(--color-warning-fg)}.achv--locked .achv-reward{opacity:.6}.achv-progress{height:.375rem;border-radius:var(--radius-pill);overflow:hidden;background:var(--achv-track, var(--color-bar-track))}.achv-progress>span{display:block;height:100%;border-radius:inherit;background:var(--gradient-bar-horizontal);transition:width .6s cubic-bezier(.16,1,.3,1)}.achv--locked{border:1px dashed var(--color-border-default);background:var(--color-bg-subtle);box-shadow:none}.achv--locked .achv-medallion{background:var(--color-bg-tertiary);color:var(--color-text-muted);box-shadow:none}.achv--locked .achv-chip{opacity:.8}.achv-lock{position:absolute;right:-.3rem;bottom:-.3rem;display:flex;align-items:center;justify-content:center;width:1.35rem;height:1.35rem;border-radius:var(--radius-pill);background:var(--color-bg-surface);color:var(--color-text-muted);box-shadow:var(--elevation-card)}.achv--common{--achv-surface: var(--color-bg-surface);--achv-ring: var(--color-border-subtle);--achv-medallion: var(--color-bg-tertiary);--achv-medallion-ink: var(--color-text-secondary);--achv-chip-bg: var(--color-bg-subtle);--achv-chip-text: var(--color-text-tertiary)}.achv--rare{--achv-surface: var(--color-bg-surface);--achv-ring: var(--color-brand-100);--achv-medallion: var(--color-brand-300);--achv-medallion-ink: var(--color-white);--achv-chip-bg: var(--color-brand-50);--achv-chip-text: var(--color-brand-800)}.achv--epic{--achv-surface: var(--color-bg-surface);--achv-ring: var(--color-brand-200);--achv-medallion: var(--color-brand-600);--achv-medallion-ink: var(--color-white);--achv-chip-bg: var(--color-brand-50);--achv-chip-text: var(--color-brand-800)}.achv--legendary{--achv-surface: var(--color-bg-surface);--achv-ring: var(--color-brand-300);--achv-medallion: var(--color-brand-800);--achv-medallion-ink: var(--color-white);--achv-ring-gap: var(--color-bg-surface);--achv-chip-bg: var(--color-warning-fill);--achv-chip-text: var(--color-warning-fg)}.achv--mythic{--achv-surface: var(--color-bg-surface);--achv-ring: var(--color-accent-yellow);--achv-medallion: var(--color-accent-yellow);--achv-medallion-ink: var(--color-brand-950);--achv-ring-gap: var(--color-bg-surface);--achv-chip-bg: var(--color-warning-fill);--achv-chip-text: var(--color-warning-fg)}.achv--mythic.achv--unlocked{box-shadow:inset 0 0 0 1px var(--achv-ring),var(--elevation-gold)}.dark-mode .achv--locked{--achv-track: rgb(255 255 255 / .08)}.achv-xpbar{position:relative;overflow:hidden;border-radius:var(--radius-pill)}.achv-xpbar>.fill{display:block;height:100%;border-radius:inherit;background:var(--gradient-bar-horizontal);transition:width .7s cubic-bezier(.16,1,.3,1)}.achv-dot{width:.5rem;height:.5rem;border-radius:var(--radius-pill);background:var(--achv-medallion, var(--color-brand-600))}.achv-toast{position:relative;overflow:hidden;border-radius:var(--radius-panel);background:var(--achv-surface, var(--color-bg-surface));box-shadow:inset 0 0 0 1px var(--achv-ring, transparent),var(--elevation-modal)}.achv-toast--mythic{box-shadow:inset 0 0 0 1px var(--color-accent-yellow),var(--elevation-modal)}.achv-toast .achv-medallion{width:3.5rem;height:3.5rem;border-radius:var(--radius-icon)}.achv-rays{display:none}.achv-toast-timer{position:absolute;left:0;bottom:0;height:2px;background:var(--color-brand-600);animation:achv-timer linear forwards}@keyframes achv-timer{0%{width:100%}to{width:0%}}@media (prefers-reduced-motion: reduce){.achv,.achv *,.achv-toast,.achv-toast-timer{animation:none!important;transition:none!important}.achv--unlocked:hover{transform:none}}