.spinner-container{justify-content:center;align-items:center;width:100%;height:100%;display:flex;position:relative}.spinner-container.small{width:auto;height:auto;display:inline-flex}.spinner{background:conic-gradient(#ffffffe6 0%,#fffc 15%,#ffffffb3 25%,#fff9 35%,#ffffff80 45%,#fff6 55%,#ffffff4d 65%,#fff3 75%,#ffffff1a 85% 95%,#70707000 100%);border-radius:50%;flex-shrink:0;width:60px;height:60px;animation:.5s linear infinite spin;-webkit-mask:radial-gradient(#0000 18px,#000 19px 40px,#0000 41px);mask:radial-gradient(#0000 18px,#000 19px 40px,#0000 41px)}.spinner-small{width:15px!important;height:15px!important;-webkit-mask:radial-gradient(#0000 4px,#000 5px 10px,#0000 11px)!important;mask:radial-gradient(#0000 4px,#000 5px 10px,#0000 11px)!important}@keyframes spin{to{transform:rotate(-360deg)}}
.header{justify-content:space-between;align-items:center;width:100%;display:flex}.header .header-left{flex-direction:column;display:flex}.header .header-left .greeting{color:#e1e5ee;font-size:15px;line-height:15px}.header .header-left .name{color:#fff;font-size:20px;font-weight:600}.header .header-right{align-items:center;gap:12px;display:flex}.header .header-right .badge{cursor:pointer;background:#0a0a0a;border:none;border-radius:10px;align-items:center;gap:8px;padding:8px 12px;transition:transform .2s,background .2s;display:flex}.header .header-right .badge:hover{background:#1a1a1a;transform:translateY(-1px)}.header .header-right .badge:active{transform:translateY(0)}.header .header-right .badge.streak-badge{cursor:default}.header .header-right .badge.streak-badge:hover{background:#0a0a0a;transform:none}.header .header-right .badge .count{color:#fff;font-size:14px;font-weight:600}.header .header-right .avatar{border-radius:9999px;outline:1.66px solid #191919;width:48px;height:48px}