/* Account initials, matching the compact reference badge. */
.ui-profile > summary {
  min-width: 56px;
  min-height: 56px;
  justify-content: center;
  background: var(--ui-surface);
}
.ui-profile > summary:focus-visible {
  outline: 2px solid var(--ui-blue);
  outline-offset: 3px;
}
.account-avatar {
  display: inline-grid;
  place-items: center;
  vertical-align: middle;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  border: 1px solid #2871a1;
  background: #135581;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: .02em;
  user-select: none;
}
.account-avatar.avatar-art {
  background-color: #174c74;
  background-image: url('avatars/penguin-gallery.png');
  background-size: 768% 512%;
  background-repeat: no-repeat;
  border-color: #77bce7;
}
.account-avatar.avatar-large { width: 88px; height: 88px; flex-basis: 88px; font-size: 24px; }
.avatar-current { display: flex; align-items: center; gap: 18px; margin: 22px 0 30px; }
.avatar-current > div { min-width: 0; }
.avatar-current strong { font-size: 20px; overflow-wrap: anywhere; }
.avatar-current p { margin: 3px 0!important; font-size: 12px!important; }
.avatar-fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.avatar-fieldset legend { font-weight: 650; margin-bottom: 14px; }
.avatar-grid { display: grid; grid-template-columns: repeat(5,minmax(0,1fr)); gap: 12px; }
.security-cover .avatar-choice { margin: 0; position: relative; cursor: pointer; min-width: 0; }
.avatar-choice-body { position: relative; display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 14px 6px 10px; border: 1px solid #9bb9cf50; border-radius: 15px; background: #102a42c9; height: 100%; }
.avatar-choice:hover .avatar-choice-body { background: #193e5b; border-color: #8bc7eb; }
.security-cover .avatar-choice input[type=radio] { position: absolute; width: 1px!important; height: 1px!important; opacity: 0; margin: 0; padding: 0; }
.avatar-choice input:checked + .avatar-choice-body { border: 2px solid #ffcc00; background: #21445b; padding: 13px 5px 9px; }
.avatar-choice input:focus-visible + .avatar-choice-body { outline: 3px solid #8ed3ff; outline-offset: 3px; }
.avatar-choice .avatar-gallery-portrait { width: 82px; height: 82px; flex-basis: 82px; font-size: 22px; max-width: 100%; }
.avatar-choice-name { color: #e9f2fa; font-size: 12px; line-height: 1.3; text-align: center; overflow-wrap: anywhere; }
.avatar-choice-check { position: absolute; right: 7px; top: 5px; color: #ffcc00; visibility: hidden; font-size: 16px; }
.avatar-choice input:checked + .avatar-choice-body .avatar-choice-check { visibility: visible; }
.security-cover .avatar-form { margin: 0; }
.security-cover .avatar-note { font-size: 12px!important; margin: 18px 0!important; }
.avatar-save { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.security-cover .avatar-save button { width: auto; min-width: 180px; margin: 0; }
.avatar-save a { font-size: 13px; }
@media(min-width:801px) {
  .security-cover.screen-avatar .security-layout { grid-template-columns: 250px minmax(0,1fr); max-width: 1500px; }
  .security-cover.screen-avatar .security-layout::before { left: 250px; }
  .security-cover.screen-avatar .security-story { padding: 32px 20px; }
  .security-cover.screen-avatar .security-brand { width: 210px; }
  .security-cover.screen-avatar .security-intro { display: none; }
  .security-cover.screen-avatar main { max-width: 1050px; width: calc(100% - 48px); margin: 28px 24px; padding: 30px; }
}
@media(max-width:1100px) { .avatar-grid { grid-template-columns: repeat(4,minmax(0,1fr)); } }
@media(max-width:800px) { .avatar-grid { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; } .security-cover.screen-avatar main { max-width: 620px; padding: 25px 18px; } .avatar-choice .avatar-gallery-portrait { width: 72px; height: 72px; flex-basis: 72px; } }
@media(max-width:380px) { .avatar-grid { grid-template-columns: repeat(2,minmax(0,1fr)); } }
@media (max-width: 600px) {
  .ui-profile > summary { min-width: 48px; min-height: 48px; padding: 4px; }
}

.avatar-art.penguin-01 { background-position: 4.01198% 2.18447%; }
.avatar-art.penguin-02 { background-position: 27.00599% 2.18447%; }
.avatar-art.penguin-03 { background-position: 50.00000% 2.18447%; }
.avatar-art.penguin-04 { background-position: 72.99401% 2.18447%; }
.avatar-art.penguin-05 { background-position: 95.98802% 2.18447%; }
.avatar-art.penguin-06 { background-position: 4.01198% 32.76699%; }
.avatar-art.penguin-07 { background-position: 27.00599% 32.76699%; }
.avatar-art.penguin-08 { background-position: 50.00000% 32.76699%; }
.avatar-art.penguin-09 { background-position: 72.99401% 32.76699%; }
.avatar-art.penguin-10 { background-position: 95.98802% 32.76699%; }
.avatar-art.penguin-11 { background-position: 4.01198% 63.10680%; }
.avatar-art.penguin-12 { background-position: 27.00599% 63.10680%; }
.avatar-art.penguin-13 { background-position: 50.00000% 63.10680%; }
.avatar-art.penguin-14 { background-position: 72.99401% 63.10680%; }
.avatar-art.penguin-15 { background-position: 95.98802% 63.10680%; }
.avatar-art.penguin-16 { background-position: 4.01198% 93.44660%; }
.avatar-art.penguin-17 { background-position: 27.00599% 93.44660%; }
.avatar-art.penguin-18 { background-position: 50.00000% 93.44660%; }
.avatar-art.penguin-19 { background-position: 72.99401% 93.44660%; }
.avatar-art.penguin-20 { background-position: 95.98802% 93.44660%; }