#portrait{cursor:pointer;border-radius:9px;outline-offset:3px}
#avatarPicker{box-sizing:border-box;width:min(820px,calc(100vw - 24px));max-width:820px;max-height:calc(100dvh - 24px);padding:0;color:#e6eff3;background:#0e1b27;border:1px solid #49606d;border-radius:18px;box-shadow:0 24px 100px #000b;overflow:auto;font:14px/1.45 Tahoma,Arial,sans-serif}
#avatarPicker::backdrop{background:#030b14cf;backdrop-filter:blur(5px)}
#avatarPicker *{box-sizing:border-box}#avatarPicker header{display:flex;align-items:flex-start;justify-content:space-between;padding:22px 24px 14px;border-bottom:1px solid #2b414f;background:linear-gradient(120deg,#213447,#10202c)}
#avatarPicker h2{font-size:25px;line-height:1.25;margin:5px 0;color:#f3e0b9}#avatarPicker p{margin:6px 0;color:#9fb6c5}#avatarPicker h3{font-size:13px;color:#d4e3e9;margin:0 0 9px}.avatar-eyebrow{font-size:10px;letter-spacing:3px;color:#d7b976}
#avatarPicker button{font:inherit;color:#c7d7e1;background:#142837;border:1px solid #354e60;border-radius:8px;min-height:44px;cursor:pointer;touch-action:manipulation}
#avatarPicker button:hover{border-color:#a6dcd9;background:#1b3747}#avatarPicker button:focus-visible,.avatar-open:focus-visible{outline:2px solid #9aeee2;outline-offset:2px}#avatarPicker button[aria-pressed=true]{border-color:#efd28b;background:#384139;box-shadow:inset 0 0 0 1px #efd28b66;color:#fff1cc}#avatarPicker button:disabled{opacity:.45;cursor:not-allowed}
#avatarPicker [data-avatar-close]{width:44px;flex-shrink:0;font-size:26px;line-height:1}
.avatar-class-tabs{display:flex;gap:6px;padding:12px 24px;overflow-x:auto;scrollbar-width:thin}.avatar-class-tabs button{white-space:nowrap;padding:8px 12px;font-size:12px!important}.avatar-class-tabs span{color:#8ee7ca}
.avatar-body{display:grid;grid-template-columns:250px minmax(0,1fr);gap:24px;padding:8px 24px 20px}.avatar-showcase{display:flex;flex-direction:column;text-align:center;align-items:center}.avatar-showcase canvas{display:block;width:100%;height:auto;border:1px solid #425967;border-radius:12px;background:#142535;image-rendering:pixelated}.avatar-showcase strong{margin-top:10px;font-size:17px;color:#f0daab}.avatar-showcase small{color:#94c4bd;font-size:11px;margin-top:3px}.avatar-showcase p{font-size:11px!important;line-height:1.6}
.avatar-angle-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:8px;margin-bottom:16px}.avatar-angle-grid button{padding:4px;overflow:hidden}.avatar-angle-grid canvas{width:100%;height:auto;display:block;border-radius:5px;image-rendering:pixelated}.avatar-angle-grid span{display:block;font-size:10px;padding:5px 0}.avatar-backgrounds{display:flex;gap:8px;flex-wrap:wrap}.avatar-backgrounds button{padding:8px 12px;font-size:12px!important}.avatar-backgrounds button:before{content:'';display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--avatar-swatch);margin-right:7px}
#avatarPicker footer{display:flex;gap:14px;align-items:center;justify-content:space-between;border-top:1px solid #2b414f;padding:14px 24px;background:#101f2a}#avatarPicker footer small{font-size:11px;color:#8da8b9;max-width:340px}#avatarPicker .avatar-apply{background:#d9bd7c;color:#16232c;border-color:#f0d997;font-weight:bold;padding:10px 20px;flex-shrink:0}.avatar-open{min-height:44px;margin:8px 0}
@media(max-width:600px){#avatarPicker{width:calc(100vw - 16px);max-height:calc(100dvh - 16px);border-radius:12px}#avatarPicker header{padding:15px 14px 10px}#avatarPicker h2{font-size:21px}.avatar-class-tabs{padding:10px 14px}.avatar-body{grid-template-columns:1fr;gap:16px;padding:4px 14px 14px}.avatar-showcase{display:grid;grid-template-columns:120px 1fr;column-gap:14px;text-align:left;align-items:center}.avatar-showcase canvas{width:120px;grid-row:1/4}.avatar-showcase strong{font-size:16px;margin:0}.avatar-showcase small{margin:0}.avatar-showcase p{margin:0!important}.avatar-angle-grid{gap:6px}.avatar-angle-grid span{font-size:10px}#avatarPicker footer{padding:12px 14px;gap:10px}#avatarPicker footer small{font-size:10px}#avatarPicker .avatar-apply{font-size:12px;padding:10px 12px}}
@media(max-height:500px) and (min-width:601px){.avatar-body{grid-template-columns:160px 1fr}.avatar-class-tabs{padding-top:6px;padding-bottom:6px}.avatar-angle-grid{grid-template-columns:repeat(8,minmax(0,1fr))}#avatarPicker header{padding:10px 18px}}

.avatar-mode-tabs{display:flex;gap:8px;padding:0 24px 16px}.avatar-mode-tabs button{flex:1;padding:10px 12px}.avatar-face-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}.avatar-face-grid button{padding:5px;overflow:hidden}.avatar-face-grid canvas{display:block;width:100%;height:auto;border-radius:5px;image-rendering:auto}.avatar-face-grid span{display:block;padding:6px;font-size:12px}.avatar-face-mode .avatar-showcase canvas{image-rendering:auto}.avatar-face-mode .avatar-showcase{align-self:start}
@media(max-width:600px){.avatar-mode-tabs{padding:0 14px 12px;gap:6px}.avatar-mode-tabs button{font-size:12px!important}.avatar-face-grid{gap:8px}.avatar-face-grid span{padding:4px}}

.avatar-face-grid{max-width:280px;width:100%;margin-inline:auto}#avatarPicker .avatar-face-grid button{line-height:1.35}#avatarPicker header{padding:16px 24px 10px}#avatarPicker header p{font-size:12px}.avatar-face-mode .avatar-options h3{text-align:center}@media(max-width:600px){.avatar-face-grid{max-width:350px}#avatarPicker header{padding:14px 14px 10px}}

#avatarPicker footer{position:sticky;bottom:0;z-index:2}.avatar-face-grid{max-width:260px}@media(max-width:600px){.avatar-face-grid{max-width:350px}}

/* Fourteen choices keep the selected portrait visible without enlarging the dialog. */
.avatar-face-grid{grid-template-columns:repeat(4,minmax(0,1fr));max-width:none;gap:7px}.avatar-face-grid span{font-size:10px;padding:4px 1px}.avatar-face-mode .avatar-showcase{position:sticky;top:12px}@media(max-width:600px){.avatar-face-grid{grid-template-columns:repeat(3,minmax(0,1fr));max-width:none}.avatar-face-mode .avatar-showcase{position:static}}