#opo-recognition-host{position:fixed;right:max(20px,env(safe-area-inset-right));bottom:max(20px,env(safe-area-inset-bottom));z-index:11990;width:min(350px,calc(100vw - 32px));pointer-events:none;font-family:inherit}
.opo-recognition{box-sizing:border-box;width:100%;display:flex;align-items:center;gap:12px;padding:14px;border:1px solid #d4af3766;border-left:3px solid #d4af37;border-radius:14px;background:linear-gradient(135deg,#12313c,#0b2430);color:#f3f7f6;box-shadow:0 12px 30px #03182066;pointer-events:auto;text-align:left;cursor:pointer;animation:opo-recognition-in .3s ease-out;min-height:88px}
.opo-recognition:focus-visible{outline:3px solid #e8c35a;outline-offset:3px}.opo-recognition-icon{display:grid;place-items:center;flex:0 0 44px;height:44px;border-radius:12px;background:#d4af3726;color:#e8c35a;font-size:26px}.opo-recognition-icon svg{width:27px;height:27px}.opo-recognition-copy{min-width:0;display:grid;gap:4px}.opo-recognition-title{font-size:11px;font-weight:800;letter-spacing:.045em;color:#e8c35a}.opo-recognition-name{font-size:14px;line-height:1.3;font-weight:650;overflow-wrap:anywhere}.opo-recognition-xp{font-size:12px;color:#b9de99}.opo-recognition-dismiss{margin-left:auto;color:#b4c3c8;font-size:20px;align-self:flex-start}.opo-recognition-out{animation:opo-recognition-out .2s ease-in forwards}
[data-student-theme="light"] .opo-recognition{background:#fff;color:#12313c;box-shadow:0 8px 20px #12313c26}[data-student-theme="light"] .opo-recognition-title{color:#816211}[data-student-theme="light"] .opo-recognition-xp{color:#39651b}
@keyframes opo-recognition-in{from{opacity:0;transform:translateX(110%)}to{opacity:1;transform:none}}@keyframes opo-recognition-out{to{opacity:0;transform:translateY(12px)}}
@media(max-width:640px){#opo-recognition-host{right:auto;left:50%;transform:translateX(-50%);bottom:var(--opo-recognition-bottom,calc(92px + env(safe-area-inset-bottom)));width:min(350px,calc(100vw - 28px))}.opo-recognition{animation-name:opo-recognition-mobile-in;padding:12px;min-height:82px}@keyframes opo-recognition-mobile-in{from{opacity:0;transform:translateY(100%)}to{opacity:1;transform:none}}}
@media(prefers-reduced-motion:reduce){.opo-recognition,.opo-recognition-out{animation:none!important;transition:none!important}}