/* Cosmetics use existing surfaces, type, spacing and avatar shapes. */
.profile-insignias { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0; width: fit-content; max-width: 100%; min-width: 0; padding: .125rem .2rem; background: var(--surface-1); border-radius: .5rem; }
.profile-insignias:empty { display: none; }
.profile-insignia { display: inline-flex; position: relative; }
.profile-insignia button { display: grid; place-items: center; position: relative; width: 1.5rem; height: 1.5rem; min-width: 0; padding: .125rem; border: 0; border-radius: .25rem; background: transparent; color: var(--fg); cursor: pointer; }
.profile-insignia button:hover { background: var(--surface-3); }
.profile-insignia button:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.profile-insignia img { display: block; width: 1.25rem; height: 1.25rem; object-fit: contain; background: transparent; pointer-events: none; }
.profile-insignia button::after { content: attr(data-label); display: none; position: absolute; z-index: var(--z-tooltip, 70); bottom: calc(100% + var(--sp-1)); left: 0; width: max-content; max-width: min(18rem, 65vw); white-space: normal; text-align: left; overflow-wrap: anywhere; padding: var(--sp-1) var(--sp-2); background: var(--surface-2); color: var(--fg); border: 1px solid var(--line); font: var(--text-xs) var(--font-ui); pointer-events: none; }
.profile-insignia button:focus-visible::after, .profile-insignia button[data-label-open]::after { display: block; }
@media (hover: hover) { .profile-insignia button:hover::after { display: block; } }
.profile-editor { height: var(--pe-viewport, 100dvh); top: var(--pe-top, 0px); bottom: auto; }
.profile-editor .modal-box { width: min(64rem, 100%); max-height: calc(var(--pe-viewport, 100dvh) - var(--sp-8)); padding: 0; display: flex; flex-direction: column; gap: 0; overflow: hidden; }
.pe-heading { padding: var(--sp-6) var(--sp-8) var(--sp-5); border-bottom: 1px solid var(--line); flex-shrink: 0; }
.pe-eyebrow { color: var(--fg-3); font-size: var(--text-xs); margin-bottom: var(--sp-2); }
.pe-heading h3 { font-size: var(--text-xl); margin-bottom: var(--sp-2); padding-right: var(--sp-8); }
.pe-body { min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
.profile-editor fieldset { min-width: 0; margin: 0; padding: var(--sp-6) var(--sp-8); border: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(15rem, 20rem); align-items: start; gap: var(--sp-8); }
.pe-edit-fields { display: flex; flex-direction: column; gap: var(--sp-5); min-width: 0; }
.pe-edit-fields section > label, .pe-edit-fields h4 { display: block; margin-bottom: var(--sp-3); font-size: var(--text-sm); font-weight: 600; }
.pe-name-section input { width: 100%; }
.pe-field-caption { display: flex; align-items: start; gap: var(--sp-3); justify-content: space-between; margin-top: var(--sp-2); }
.pe-field-caption span { flex-shrink: 0; }
.pe-counter { text-align: right; margin-top: var(--sp-1); }
.pe-guest-note { padding: var(--sp-3); border: 1px solid var(--line); background: var(--surface-sunk); }
.pe-footer { padding: var(--sp-4) var(--sp-8); background: var(--surface-2); border-top: 1px solid var(--line); display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-3); flex-shrink: 0; }
.pe-footer .pe-status { flex: 1 1 12rem; }
.pe-footer .modal-actions { margin: 0; margin-left: auto; }
.profile-editor legend { font-weight: 600; color: var(--fg); margin-bottom: var(--sp-2); }
.profile-editor .pe-section { padding-top: var(--sp-5); border-top: 1px solid var(--line); }
.profile-editor .pe-photo { display: flex; align-items: center; flex-wrap: wrap; gap: var(--sp-4); }
.profile-crop { width: 6rem; height: 6rem; flex-shrink: 0; overflow: hidden; position: relative; background: var(--surface-sunk); border: 1px solid var(--line); }
.profile-crop img { position: absolute; max-width: none; object-fit: fill; }
.pe-photo-tools { display: flex; flex-wrap: wrap; gap: var(--sp-2); align-items: center; min-width: 0; flex: 1; }
.pe-photo-tools p { flex-basis: 100%; }
.pe-crop-controls { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: var(--sp-3); }
.pe-crop-controls label { display: flex; flex-direction: column; gap: var(--sp-1); color: var(--fg-2); font-size: var(--text-xs); }
.pe-crop-controls input { width: 100%; min-width: 0; }
.pe-preview-column { position: sticky; top: var(--sp-6); min-width: 0; }
.pe-preview-label { font-size: var(--text-xs); color: var(--fg-3); font-weight: 400; margin-bottom: var(--sp-3); }
.pe-preview { background: var(--surface-sunk); border: 1px solid var(--line); min-width: 0; overflow: hidden; }
.pe-preview-banner { height: 5.5rem; background: var(--surface-2); border-top: 3px solid var(--brand, #5865f2); display: flex; justify-content: flex-end; align-items: flex-start; padding: var(--sp-3); }
.pe-preview-content { padding: 0 var(--sp-5) var(--sp-6); }
.pe-preview .profile-crop { width: 5rem; height: 5rem; margin-top: -2rem; margin-bottom: var(--sp-4); border: 4px solid var(--surface-sunk); outline: 1px solid var(--line); }
.pe-preview-meta { min-width: 0; display: flex; flex-direction: column; gap: var(--sp-1); }
.pe-preview-meta b { font-size: var(--text-xl); line-height: var(--leading-tight); overflow-wrap: anywhere; }
.pe-preview-identity { display: flex; align-items: center; flex-wrap: wrap; gap: .35rem; }
.pe-preview-meta .profile-insignias { margin: 0; }
.pe-preview-about:has(.profile-bio:not([hidden])) { margin-top: var(--sp-4); padding-top: var(--sp-4); border-top: 1px solid var(--line); }
.pe-preview-about h5 { margin: 0 0 var(--sp-2); font-size: var(--text-xs); font-weight: 600; }
.pe-preview-note { margin-top: var(--sp-3); }
.profile-bio { white-space: pre-wrap; overflow-wrap: anywhere; font-size: var(--text-sm); color: var(--fg-2); }
.profile-editor textarea { display: block; width: 100%; min-height: 5rem; resize: vertical; }
.avatar-zoom .modal-box { width: min(36rem,100%); max-height: calc(100dvh - var(--sp-8)); overflow-y: auto; }
.avatar-zoom img { width: 100%; max-height: 65dvh; object-fit: contain; background: var(--surface-sunk); }
.peer-avatar-btn, .pp-avatar-link { padding: 0; border: 0; background: transparent; color: inherit; cursor: pointer; }
.peer-avatar-btn { z-index: 1; }
.peer-avatar-btn:focus-visible, .pp-avatar-link:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.profile-pop { overflow: hidden; max-height: var(--pp-max-h, calc(100dvh - var(--sp-6))); }
.profile-pop > .pp-scroll { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; overscroll-behavior: contain; margin: 0; }
.pp-scroll > :last-child { margin-bottom: var(--sp-3); }
.pp-bio { margin: var(--sp-2) var(--sp-4) 0; }
.pp-state { margin: var(--sp-2) var(--sp-4) 0; color: var(--fg-3); font-size: var(--text-xs); }
.profile-pop .pp-close { z-index: 1; }
@media (max-width: 63.999rem) { .profile-pop { bottom: var(--pp-bottom,0px); } }
.pe-badge-list { display: flex; flex-direction: column; gap: var(--sp-2); margin: 0; padding: 0; list-style: none; }
.pe-badges-heading { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-3); }
.pe-edit-fields .pe-badges-heading h4 { margin-bottom: 0; }
.pe-badges-section > .hint { margin-top: var(--sp-2); }
.pe-add-badge { margin: var(--sp-3) 0; }
.pe-add-badge > span { font-size: 1.15rem; line-height: 1; }
.pe-badge-guidance { margin-top: var(--sp-3); padding: var(--sp-3); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-md); font-size: var(--text-sm); }
.pe-badge-guidance strong { display: block; margin-bottom: var(--sp-1); color: var(--fg); }
.pe-badge-guidance p { margin: 0; color: var(--fg-2); }
.pe-badge-empty { padding: var(--sp-3); border: 1px dashed var(--line); border-radius: var(--r-md); }
.pe-badge-row { display: grid; grid-template-columns: 2rem minmax(0,1fr) auto; align-items: center; gap: var(--sp-2); padding: var(--sp-2); background: var(--surface-sunk); border: 1px solid var(--line); border-radius: var(--r-md); }
.pe-badge-row > img { width: 2rem; height: 2rem; object-fit: contain; }
.pe-badge-actions { display: flex; gap: var(--sp-1); }
.pe-badge-actions .btn { min-width: 1.875rem; }
.pe-badge-actions .pe-badge-remove { color: var(--danger); }
.pe-badge-row input { width: 100%; min-width: 0; }
.pe-badge-rules { margin-top: var(--sp-3); }
.pe-badge-rules p + p { margin-top: var(--sp-2); }
.pe-badge-feedback { margin-top: var(--sp-2); overflow-wrap: anywhere; }
.pe-badge-feedback:empty { display: none; }
.pe-badge-feedback[data-tone="error"] { color: var(--danger); }
.pe-badge-feedback[data-tone="success"] { color: var(--fg-2); }
.pe-status { min-height: 1.5em; font-size: var(--text-sm); color: var(--fg-2); }
.pe-status[data-tone="error"] { color: var(--danger); }
.pe-status[data-tone="success"] { color: var(--ok); }
.pe-upload-label { position: relative; }
.pe-upload-label input[type=file] { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; clip-path: inset(50%); overflow: hidden; }
.pe-upload-label:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; }
.public-profile .public-profile-card { width:min(22rem,100%);max-height:calc(100dvh - 2rem);padding:0;gap:0;overflow:hidden;background:var(--surface-sunk); }
.public-profile-scroll { overflow-y:auto;min-height:0;overscroll-behavior:contain; }
.public-profile-banner { height:5rem;background:var(--surface-2); }
.public-profile-content { padding:0 1.25rem 1.25rem; }
.public-profile-avatar { display:block;position:relative;width:5.75rem;height:5.75rem;border:5px solid var(--surface-sunk);border-radius:50%;padding:0;margin-top:-2rem;margin-bottom:.8rem;background:var(--surface-sunk);cursor:pointer; }
.public-profile-avatar img { width:100%;height:100%;object-fit:cover;border-radius:50%; }
.public-profile-avatar:focus-visible { outline:2px solid var(--accent);outline-offset:2px; }
.public-profile-content h3 { font-size:1.4rem;overflow-wrap:anywhere;margin:0 0 .35rem; }
.public-profile-identity { display:flex;align-items:center;flex-wrap:wrap;gap:.35rem;color:var(--fg-3);font-size:.75rem; }
.public-profile-state { color:var(--ok);font-size:.75rem;margin:.8rem 0 0; }
.public-profile-content section { margin-top:1.2rem;padding-top:1rem;border-top:1px solid var(--line); }
.public-profile-content h4 { font-size:.75rem;margin:0 0 .5rem; }
.public-profile-metric { display:flex;align-items:center;gap:.75rem;margin:1.1rem 0 0;padding:.9rem;background:var(--surface-1);border-radius:.6rem;color:var(--accent); }
.public-profile-metric > div { display:flex;flex-direction:column;gap:.25rem; }
.public-profile-metric span:not(.ico) { font-size:.6875rem;color:var(--fg-3); }
.public-profile-metric b { font-size:1rem;color:var(--fg);font-variant-numeric:tabular-nums; }
#publicProfileEdit { margin-top:1rem; }
@media (max-width: 52rem) {
  .profile-editor fieldset { grid-template-columns: minmax(0, 1fr); }
  .pe-preview-column { position: static; }
  .pe-preview-column .pe-preview { max-width: 24rem; }
}
@media (max-width: 36rem) {
  .profile-editor .modal-box { max-height: calc(var(--pe-viewport, 100dvh) - var(--sp-4)); }
  .pe-heading { padding: var(--sp-4); }
  .pe-heading h3 { font-size: var(--text-lg); }
  .profile-editor fieldset { padding: var(--sp-4); gap: var(--sp-6); }
  .pe-footer { padding: var(--sp-3) var(--sp-4); gap: var(--sp-2); }
  .pe-footer .pe-status:empty { display: none; }
  .pe-footer .modal-actions { width: 100%; }
  .pe-badge-row { grid-template-columns: 2rem minmax(0,1fr); }
  .pe-badge-actions { grid-column: 2; justify-content: flex-end; }
  .pe-crop-controls { grid-template-columns: 1fr; }
  .profile-editor .modal-actions > .btn { flex: 1; }
}
@media (pointer: coarse) { .pe-badge-actions .btn { min-height: var(--control-h-lg); min-width: var(--control-h-lg); } .profile-insignia button { height: 2rem; } }