/* Tela "Quem está lendo?" */
body[data-view="profiles"] { background: radial-gradient(90% 70% at 50% 0%, #241013, var(--bg) 70%); }

.view-profiles { min-height: 100vh; display: grid; place-items: center; padding: 6rem 1rem 3rem; }
.profiles-wrap { display: flex; flex-direction: column; align-items: center; gap: 2.2rem; text-align: center; }
.profiles-wrap h1 { font-size: clamp(2rem, 5vw, 3.4rem); font-weight: 500; }
.profile-list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(.8rem, 2.5vw, 2rem); }
.profile { display: flex; flex-direction: column; align-items: center; gap: .8rem; color: var(--muted); width: clamp(96px, 14vw, 150px); }
.p-av {
  position: relative; width: 100%; aspect-ratio: 1; border-radius: 6px; display: grid; place-items: center; font-size: clamp(2.6rem, 6vw, 4.6rem);
  border: 3px solid transparent; transition: border-color .15s, transform .15s; background: linear-gradient(135deg, #e4202c, #7b0b12);
}
.profile:nth-child(5n+2) .p-av { background: linear-gradient(135deg, #2f80ed, #12306b); }
.profile:nth-child(5n+3) .p-av { background: linear-gradient(135deg, #f2994a, #8a3d06); }
.profile:nth-child(5n+4) .p-av { background: linear-gradient(135deg, #27ae60, #0d4a28); }
.profile:nth-child(5n+5) .p-av { background: linear-gradient(135deg, #9b51e0, #38155f); }
.profile:hover .p-av, .profile:focus-visible .p-av { border-color: #fff; }
.profile:hover { color: #fff; }
.profile.editing .p-av::after { content: ""; position: absolute; inset: 0; background: rgba(0, 0, 0, .5); border-radius: 3px; }
.p-edit { position: absolute; z-index: 2; font-style: normal; font-size: 2rem; color: #fff; }
.profile.add .p-av { background: transparent; border: 2px dashed #5a5a5a; color: #7a7a7a; font-size: 3.4rem; }
.profile.add:hover .p-av { border-color: #fff; color: #fff; }
.p-name { font-size: 1.05rem; }

.profiles-card { width: min(520px, 92vw); text-align: left; display: grid; gap: 1.2rem; }
.profiles-card h1 { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 500; }
.form { display: grid; gap: 1.1rem; }
.form label { display: grid; gap: .45rem; color: var(--muted); font-size: .9rem; }
.avatar-pick { display: flex; flex-wrap: wrap; gap: .5rem; }
.av { width: 52px; height: 52px; border-radius: 8px; font-size: 1.7rem; background: var(--card); border: 2px solid transparent; }
.av:hover { background: #3a3a3a; }
.av.on { border-color: #fff; background: #3a3a3a; }
.form-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; margin-top: .4rem; }