#avatar-dialog{width:min(600px,calc(100vw - 24px));max-height:94dvh;padding:0;border:4px solid #347bb2;border-radius:22px;background:#fff5dc;color:#584936;box-shadow:0 6px 0 #24577b,6px 14px 26px #43290b55;overflow:auto}.avatar-heading{display:flex;gap:12px;align-items:center;justify-content:space-between;padding:20px 24px 10px}.avatar-heading .eyebrow{font-size:9px;margin:0 0 5px}.avatar-heading h2{font:29px/1.2 Toy,sans-serif;color:#b94539;margin:0}.avatar-heading button{flex-shrink:0;font:12px DM,sans-serif;padding:7px 9px} .avatar-modes{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:4px 20px 10px;padding:4px;background:#eddcb6;border-radius:12px}.avatar-modes button{min-width:0;min-height:34px;padding:7px 10px;border:1px solid transparent;border-radius:8px;font:700 12px/1.3 DM,sans-serif;background:none;color:#675239;box-shadow:none;white-space:normal}.avatar-modes button[aria-selected=true]{color:#fff9e9;background:#347bb2;border-color:#24577b}.avatar-family-nav{display:grid;grid-template-columns:34px minmax(0,1fr) 34px;gap:8px;align-items:center;padding:0 20px 10px;border-bottom:1px solid #d9be8b}.avatar-family-nav>button{width:34px;min-height:34px;padding:0;background:#fff9e9;color:#347bb2;border:1px solid #af8b58;border-radius:10px;box-shadow:0 2px 0 #c8aa79;font:26px/1 DM,sans-serif}.avatar-family-picker{min-width:0}.avatar-family-picker select{width:100%;max-width:100%;min-height:34px;margin:0;padding:5px 22px 5px 8px;border:1px solid #ba9a68;border-radius:8px;background:#fff9e9;color:#695033;font:700 12px/1.3 DM,sans-serif;text-overflow:ellipsis}
.avatar-body{padding:16px 24px;min-height:200px}.avatar-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;max-width:420px;margin:0 auto}.avatar-grid .avatar-choice{position:relative;display:block;width:100%;aspect-ratio:1;padding:4px;margin:0;border:2px solid #cfb17b;border-radius:13px;background:#fffaf0;box-shadow:0 3px 0 #b79563;overflow:hidden}.avatar-grid img{display:block;width:100%;height:100%;object-fit:cover;border-radius:8px}.avatar-grid .avatar-choice[aria-pressed=true]{border:4px solid #347bb2;padding:2px;box-shadow:0 3px 0 #24577b}.avatar-grid .avatar-choice[aria-pressed=true]::after{content:'✓';position:absolute;bottom:2px;right:2px;padding:2px 5px;border-radius:8px;background:#347bb2;color:#fff;font:700 16px DM,sans-serif}.avatar-footer{position:sticky;bottom:0;display:flex;gap:12px;align-items:center;flex-wrap:wrap;padding:12px 20px;background:#fff5dc;border-top:2px solid #d9be8b;box-shadow:0 -4px 10px #5e432514}.avatar-preview{display:flex;gap:8px;align-items:center;min-width:0;flex:1}.avatar-preview img{width:48px;height:48px;object-fit:cover;border:2px solid #af8854;border-radius:11px;background:#fffaf0}.avatar-preview p{font:14px/1.3 Hand,sans-serif;margin:0;overflow-wrap:anywhere}#avatar-save{margin-left:auto;padding:10px 14px;background:#347bb2;color:#fffaf0;border:2px solid #24577b;border-radius:10px;box-shadow:0 3px 0 #24577b;font:16px Toy,sans-serif}#avatar-feedback{flex:0 0 100%;font:12px/1.4 DM,sans-serif;color:#9e352d;margin:0;order:-1}#avatar-feedback:empty{display:none}#avatar-custom>label{font:16px Toy,sans-serif}#avatar-file{max-width:100%;font:12px DM,sans-serif}.avatar-help{font:12px/1.5 DM,sans-serif;color:#715c43;margin:8px 0}#avatar-crop-controls{text-align:center}#avatar-crop{display:block;width:min(300px,100%);height:auto;aspect-ratio:1;margin:14px auto 8px;border:3px solid #347bb2;border-radius:10px;touch-action:none;cursor:grab;background:#fffaf0}#avatar-crop:active{cursor:grabbing}.avatar-zoom-row{display:flex;align-items:center;justify-content:center;gap:8px;max-width:390px;margin:8px auto;font:12px DM,sans-serif}.avatar-zoom-row button{width:31px;min-height:31px;padding:2px;font:20px DM,sans-serif;border-radius:8px}.avatar-zoom-row input{flex:1;min-width:30px;margin:0;padding:0;accent-color:#347bb2}.avatar-zoom-row output{font-variant-numeric:tabular-nums;min-width:40px}#avatar-recenter{padding:5px 12px;font:12px DM,sans-serif}#avatar-dialog :focus-visible{outline:3px solid #d19a28;outline-offset:3px}
@media(max-width:599px){.avatar-heading{padding:16px 14px 8px}.avatar-heading h2{font-size:23px}.avatar-heading .eyebrow{font-size:8px}.avatar-heading button{font-size:10px}.avatar-modes{margin-inline:12px}.avatar-family-nav{padding-inline:12px;gap:6px}.avatar-modes button{font-size:11px}.avatar-body{padding:12px}.avatar-grid{gap:6px}.avatar-grid .avatar-choice{border-radius:9px;padding:2px}.avatar-grid .avatar-choice[aria-pressed=true]{padding:0;border-width:3px}.avatar-footer{gap:8px;padding:10px}.avatar-preview img{width:40px;height:40px}.avatar-preview p{font-size:12px}#avatar-save{font-size:13px;padding:8px}#avatar-crop{max-width:250px}.avatar-zoom-row{gap:5px}.avatar-zoom-row label{font-size:11px}}
@media(prefers-reduced-motion:reduce){#avatar-dialog *{transition:none!important}}
.avatar-picture{display:block;width:100%;height:100%;border-radius:8px;background-repeat:no-repeat}
@media(max-width:420px){.avatar-footer .avatar-preview{flex:0 0 40px}.avatar-preview p{display:none}#avatar-save{max-width:calc(100% - 55px);font-size:12px}}

@media(min-width:380px) and (max-width:599px){.avatar-grid{grid-template-columns:repeat(6,minmax(0,1fr))}}