.student-avatar{display:inline-block;flex-shrink:0;width:72px;height:72px;border-radius:18px;background-color:#e8f5f3;color:var(--teal);font-size:30px;font-weight:700;text-align:center;line-height:72px;vertical-align:middle}.student-avatar[class*="avatar-"]{background-color:#101a2b;background-size:contain;background-position:center;background-repeat:no-repeat}.student-identity{display:flex;align-items:center;gap:16px;min-width:0}.student-identity h1,.student-identity h3{margin:0;overflow-wrap:anywhere}.student-identity h1{font-size:clamp(25px,4vw,40px)}.student-identity>div{min-width:0}.avatar-change{display:inline-block;font-size:14px;font-weight:650;margin-top:6px;min-height:32px}.avatar-link{border-radius:18px}.avatar-link:focus-visible,.avatar-option:has(input:focus-visible){outline:3px solid var(--teal);outline-offset:4px}.avatar-page{max-width:960px}.avatar-card{padding:28px}.avatar-current{margin:24px 0}.avatar-current .student-avatar{width:96px;height:96px;line-height:96px}.avatar-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:12px;border:0;padding:0;margin:24px 0}.avatar-grid legend{font-weight:650;font-size:18px;margin-bottom:16px}.avatar-option{position:relative;display:flex;justify-content:center;align-items:center;padding:5px;border:2px solid transparent;border-radius:20px;cursor:pointer;min-height:82px}.avatar-option input{position:absolute;width:1px;height:1px;opacity:0}.avatar-option:has(input:checked){border-color:var(--teal);background:#def4ef;box-shadow:0 0 0 2px #def4ef}.avatar-option:has(input:checked):after{content:'✓';position:absolute;right:0;bottom:0;width:24px;height:24px;border-radius:50%;background:var(--teal);color:white;text-align:center;font-weight:700}.avatar-option:hover{border-color:#9cddd5}.avatar-actions{display:flex;gap:12px;flex-wrap:wrap;position:sticky;bottom:0;padding:16px 0;background:white;border-top:1px solid var(--line)}@media(max-width:600px){.avatar-card{padding:18px}.avatar-grid{grid-template-columns:repeat(auto-fill,minmax(68px,1fr));gap:8px}.avatar-option{padding:3px;min-height:72px}.avatar-option .student-avatar{width:62px;height:62px}.student-identity{gap:12px}.student-identity .student-avatar{width:64px;height:64px;line-height:64px}.avatar-actions .btn{flex:1;text-align:center}}
.student-avatar.avatar-1{background-image:url('assets/student-avatar-1.webp')}
.student-avatar.avatar-2{background-image:url('assets/student-avatar-2.webp')}
.student-avatar.avatar-3{background-image:url('assets/student-avatar-3.webp')}
.student-avatar.avatar-4{background-image:url('assets/student-avatar-4.webp')}
.student-avatar.avatar-5{background-image:url('assets/student-avatar-5.webp')}
.student-avatar.avatar-6{background-image:url('assets/student-avatar-6.webp')}
.student-avatar.avatar-7{background-image:url('assets/student-avatar-7.webp')}
.student-avatar.avatar-8{background-image:url('assets/student-avatar-8.webp')}
.student-avatar.avatar-9{background-image:url('assets/student-avatar-9.webp')}
.student-avatar.avatar-10{background-image:url('assets/student-avatar-10.webp')}
.student-avatar.avatar-11{background-image:url('assets/student-avatar-11.webp')}
.student-avatar.avatar-12{background-image:url('assets/student-avatar-12.webp')}
.student-avatar.avatar-13{background-image:url('assets/student-avatar-13.webp')}
.student-avatar.avatar-14{background-image:url('assets/student-avatar-14.webp')}
.student-avatar.avatar-15{background-image:url('assets/student-avatar-15.webp')}
.student-avatar.avatar-16{background-image:url('assets/student-avatar-16.webp')}
.student-avatar.avatar-17{background-image:url('assets/student-avatar-17.webp')}
.student-avatar.avatar-18{background-image:url('assets/student-avatar-18.webp')}
.student-avatar.avatar-19{background-image:url('assets/student-avatar-19.webp')}
.student-avatar.avatar-20{background-image:url('assets/student-avatar-20.webp')}
.student-avatar.avatar-21{background-image:url('assets/student-avatar-21.webp')}
.student-avatar.avatar-22{background-image:url('assets/student-avatar-22.webp')}
.student-avatar.avatar-23{background-image:url('assets/student-avatar-23.webp')}
.student-avatar.avatar-24{background-image:url('assets/student-avatar-24.webp')}
.student-avatar.avatar-25{background-image:url('assets/student-avatar-25.webp')}
.student-avatar.avatar-26{background-image:url('assets/student-avatar-26.webp')}
.student-avatar.avatar-27{background-image:url('assets/student-avatar-27.webp')}
.student-avatar.avatar-28{background-image:url('assets/student-avatar-28.webp')}
.student-avatar.avatar-29{background-image:url('assets/student-avatar-29.webp')}
.student-avatar.avatar-30{background-image:url('assets/student-avatar-30.webp')}
.student-avatar.avatar-31{background-image:url('assets/student-avatar-31.webp')}
.student-avatar.avatar-32{background-image:url('assets/student-avatar-32.webp')}
.student-avatar.avatar-33{background-image:url('assets/student-avatar-33.webp')}
.student-avatar.avatar-34{background-image:url('assets/student-avatar-34.webp')}
.student-avatar.avatar-35{background-image:url('assets/student-avatar-35.webp')}
.student-avatar.avatar-36{background-image:url('assets/student-avatar-36.webp')}
.student-avatar.avatar-37{background-image:url('assets/student-avatar-37.webp')}
.student-avatar.avatar-38{background-image:url('assets/student-avatar-38.webp')}
.student-avatar.avatar-39{background-image:url('assets/student-avatar-39.webp')}
.student-avatar.avatar-40{background-image:url('assets/student-avatar-40.webp')}
.student-avatar.avatar-41{background-image:url('assets/student-avatar-41.webp')}
.student-avatar.avatar-42{background-image:url('assets/student-avatar-42.webp')}
.student-avatar.avatar-43{background-image:url('assets/student-avatar-43.webp')}
.student-avatar.avatar-44{background-image:url('assets/student-avatar-44.webp')}
.student-avatar.avatar-45{background-image:url('assets/student-avatar-45.webp')}
.student-avatar.avatar-46{background-image:url('assets/student-avatar-46.webp')}
.student-avatar.avatar-47{background-image:url('assets/student-avatar-47.webp')}
.student-avatar.avatar-48{background-image:url('assets/student-avatar-48.webp')}
.student-avatar.avatar-49{background-image:url('assets/student-avatar-49.webp')}
.student-avatar.avatar-50{background-image:url('assets/student-avatar-50.webp')}
.student-avatar.avatar-51{background-image:url('assets/student-avatar-51.webp')}
.student-avatar.avatar-52{background-image:url('assets/student-avatar-52.webp')}
.student-avatar.avatar-53{background-image:url('assets/student-avatar-53.webp')}
.student-avatar.avatar-54{background-image:url('assets/student-avatar-54.webp')}
.student-avatar.avatar-55{background-image:url('assets/student-avatar-55.webp')}
.student-avatar.avatar-56{background-image:url('assets/student-avatar-56.webp')}
.student-avatar.avatar-57{background-image:url('assets/student-avatar-57.webp')}
.student-avatar.avatar-58{background-image:url('assets/student-avatar-58.webp')}
.student-avatar.avatar-59{background-image:url('assets/student-avatar-59.webp')}
.student-avatar.avatar-60{background-image:url('assets/student-avatar-60.webp')}
.student-avatar.avatar-61{background-image:url('assets/student-avatar-61.webp')}
.student-avatar.avatar-62{background-image:url('assets/student-avatar-62.webp')}
.student-avatar.avatar-63{background-image:url('assets/student-avatar-63.webp')}
.student-avatar.avatar-64{background-image:url('assets/student-avatar-64.webp')}
.student-avatar.avatar-65{background-image:url('assets/student-avatar-65.webp')}
.student-avatar.avatar-66{background-image:url('assets/student-avatar-66.webp')}
.student-avatar.avatar-67{background-image:url('assets/student-avatar-67.webp')}
.student-avatar.avatar-68{background-image:url('assets/student-avatar-68.webp')}
.student-avatar.avatar-69{background-image:url('assets/student-avatar-69.webp')}
.student-avatar.avatar-70{background-image:url('assets/student-avatar-70.webp')}
.student-avatar.avatar-71{background-image:url('assets/student-avatar-71.webp')}
.student-avatar.avatar-72{background-image:url('assets/student-avatar-72.webp')}
.student-avatar.avatar-73{background-image:url('assets/student-avatar-73.webp')}
.student-avatar.avatar-74{background-image:url('assets/student-avatar-74.webp')}
.student-avatar.avatar-75{background-image:url('assets/student-avatar-75.webp')}
.student-avatar.avatar-76{background-image:url('assets/student-avatar-76.webp')}
.student-avatar.avatar-77{background-image:url('assets/student-avatar-77.webp')}
.student-avatar.avatar-78{background-image:url('assets/student-avatar-78.webp')}
.student-avatar.avatar-79{background-image:url('assets/student-avatar-79.webp')}
.student-avatar.avatar-80{background-image:url('assets/student-avatar-80.webp')}