#studentAvatarButton { display:flex; flex-shrink:0; align-items:center; justify-content:center; padding:0; border:0; border-radius:50%; background:transparent; cursor:pointer; }
#studentAvatarButton:focus-visible { outline:3px solid #fff; outline-offset:3px; }
#studentAvatarButton:disabled { cursor:default; }
#studentAvatarButton #userAvatar { border-color:var(--student-avatar-frame-color,#d2e4ff); transition:transform 180ms ease,box-shadow 180ms ease; }
#studentAvatarButton:not(:disabled):focus-visible #userAvatar { transform:translateY(-2px) rotate(-3deg); box-shadow:0 4px 12px #30486c24; }
@media(hover:hover) { #studentAvatarButton:not(:disabled):hover #userAvatar { transform:translateY(-2px) rotate(-3deg); box-shadow:0 4px 12px #30486c24; } }
@media(prefers-reduced-motion:reduce) { #studentAvatarButton #userAvatar { transition:none; } #studentAvatarButton:not(:disabled):is(:hover,:focus-visible) #userAvatar { transform:none; } }
.student-avatar-dialog { box-sizing:border-box; width:min(480px,calc(100vw - 32px)); max-height:calc(100dvh - 32px); margin:auto; padding:24px; border:1px solid #d8dfe8; border-radius:20px; background:#fff; color:#202938; box-shadow:0 24px 80px #122c3040; overflow:auto; font:16px/1.5 'Nunito',sans-serif; }
.student-avatar-dialog::backdrop { background:#102f376b; }
.student-avatar-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.student-avatar-dialog h2 { margin:0; font-size:24px; font-weight:800; }
.student-avatar-frame { box-sizing:border-box; width:168px; height:168px; border-radius:50%; margin:0 auto 20px; background:#eaf1fb; border:2px solid #d2e4ff; overflow:hidden; touch-action:none; }
.student-avatar-frame.editable { cursor:grab; }
.student-avatar-frame.editable:active { cursor:grabbing; }
.student-avatar-frame img, .student-avatar-frame canvas { display:block; width:100%; height:100%; object-fit:cover; pointer-events:none; }
.student-avatar-dialog [data-crop-controls] { margin-bottom:18px; }
.student-avatar-dialog [data-crop-controls] label { display:flex; justify-content:space-between; }
.student-avatar-dialog [data-zoom] { accent-color:#253d5a; }
.student-avatar-dialog [data-crop-controls] p { margin:2px 0 0; }
.student-avatar-dialog label { display:block; margin-bottom:8px; font-weight:700; }
.student-avatar-dialog input { box-sizing:border-box; display:block; width:100%; min-height:44px; font:inherit; overflow:hidden; }
.student-avatar-dialog input::file-selector-button { min-height:44px; margin-right:8px; border:1px solid #c8d4e3; border-radius:10px; padding:8px 12px; background:#eff4fb; color:#253d5a; font:inherit; cursor:pointer; }
.student-avatar-dialog p { margin:12px 0 20px; color:#526076; font-size:14px; }
.student-avatar-actions { display:flex; flex-wrap:wrap; gap:10px; }
.student-avatar-dialog button { min-height:44px; padding:9px 12px; border:1px solid #c8d4e3; border-radius:10px; background:#fff; color:#253d5a; cursor:pointer; font:700 14px/1.4 'Nunito',sans-serif; }
.student-avatar-dialog button[data-save] { background:#253d5a; border-color:#253d5a; color:#fff; }
.student-avatar-dialog button:disabled { opacity:.55; cursor:default; }
.student-avatar-dialog :focus-visible { outline:3px solid #608aba; outline-offset:3px; }
.student-avatar-dialog .error { color:#a21930; }
.student-avatar-dialog [data-status] { min-height:24px; margin-bottom:0; }
.student-avatar-colors { min-width:0; margin:0 0 20px; padding:0; border:0; }
.student-avatar-colors legend { margin-bottom:8px; font-weight:700; }
.student-avatar-swatches { display:flex; flex-wrap:wrap; gap:4px; }
.student-avatar-dialog [data-frame-color] { position:relative; flex:0 0 40px; width:40px; height:40px; min-height:40px; padding:6px; border:2px solid transparent; border-radius:50%; background:transparent; }
.student-avatar-dialog [data-frame-color]::before { content:''; display:block; width:24px; height:24px; border-radius:50%; background:var(--swatch-color); }
.student-avatar-dialog [data-frame-color][aria-pressed="true"] { border-color:#43597b; }
.student-avatar-dialog [data-frame-color][aria-pressed="true"]::after { content:''; position:absolute; width:8px; height:4px; top:15px; left:14px; border-left:2px solid #1f2f48; border-bottom:2px solid #1f2f48; transform:rotate(-45deg); }
.student-avatar-dialog .student-avatar-custom-color { display:inline-flex; align-items:center; gap:10px; margin:8px 0 0; font-size:14px; font-weight:400; cursor:pointer; }
.student-avatar-dialog [data-color] { display:block; width:40px; min-width:40px; height:40px; min-height:40px; padding:3px; border:1px solid #c8d4e3; border-radius:10px; background:#fff; cursor:pointer; }
.student-avatar-dialog [hidden] { display:none!important; }
@media(max-width:360px) { .student-avatar-dialog { padding:18px; } .student-avatar-dialog h2 { font-size:22px; } .student-avatar-frame { width:144px; height:144px; } }