/* Meu perfil (index.html, viewProfile). Vidro sobre o fundo do tema: preto absoluto no escuro,
   branco no claro. O laranja da marca vem de --primary (#E94E1B). */

.pf{max-width:880px}
.pf-card{display:flex;flex-direction:column;gap:0;padding:0;border:1px solid hsl(var(--fg)/.13);border-radius:20px;overflow:hidden;
  box-shadow:0 24px 60px -30px hsl(var(--primary)/.35)}
.pf-card>section{padding:24px 28px;border-bottom:1px solid hsl(var(--fg)/.08)}

/* bloco de cima: foto à esquerda, nome e botões à direita */
.pf-top{display:flex;align-items:center;gap:24px;background:radial-gradient(120% 140% at 0% 0%,hsl(var(--primary)/.16),transparent 60%)}
.pf-photo{position:relative;flex-shrink:0}
.pf-photo .avatar.pf-av{width:104px;height:104px;font-size:34px;border-radius:50%;box-shadow:0 0 0 3px hsl(var(--bg)),0 0 0 5px hsl(var(--primary)),0 12px 32px -12px hsl(var(--primary)/.7)}
.pf-photo .avatar.pf-av img{width:100%;height:100%;object-fit:cover;border-radius:50%}
.pf-busy{position:absolute;inset:0;border-radius:50%;background:hsl(var(--bg)/.55);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
.pf-busy::after{content:"";position:absolute;inset:36px;border-radius:50%;border:3px solid hsl(var(--fg)/.25);border-top-color:hsl(var(--primary));animation:pfSpin .8s linear infinite}
.pf-busy[hidden]{display:none}
@keyframes pfSpin{to{transform:rotate(360deg)}}
.pf-id{min-width:0;display:flex;flex-direction:column;gap:6px}
.pf-name{font-size:22px;font-weight:900;line-height:1.15;overflow-wrap:anywhere}
.pf-photo-act{margin-top:6px}

.pf-sec h2{margin:0 0 4px;font-size:15px}
.pf-sec>.xs{margin:0 0 14px}
.pf-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px 20px}
.pf-grid .field{margin:0}
.pf-card input[readonly]{opacity:.65;cursor:default}

/* senha com botão de mostrar */
.pf-pw{position:relative}
.pf-pw .input{padding-right:48px;width:100%}
.pf-pw .icon-btn{position:absolute;right:4px;top:50%;transform:translateY(-50%)}
.pf-pw .icon-btn[aria-pressed="true"]{color:hsl(var(--primary))}

/* medidor de força: quatro barras que acendem em laranja */
.pf-meter{display:grid;grid-template-columns:repeat(4,1fr);gap:4px;margin:8px 0 4px}
.pf-meter i{height:4px;border-radius:2px;background:hsl(var(--fg)/.12);transition:background .2s}
.pf-meter[data-n="1"] i:nth-child(-n+1),.pf-meter[data-n="2"] i:nth-child(-n+2),.pf-meter[data-n="3"] i:nth-child(-n+3),.pf-meter[data-n="4"] i{background:hsl(var(--primary))}
.pf-meter[data-n="1"] i:nth-child(-n+1){background:hsl(var(--fg)/.5)}

.pf-card>.err{margin:0;padding:12px 28px 0}
.pf-foot{display:flex;align-items:center;justify-content:flex-end;gap:16px;padding:18px 28px;background:hsl(var(--fg)/.03)}
.pf-foot .xs{margin-right:auto}

@media(max-width:639px){
  .pf-card>section,.pf-foot{padding:20px 16px}
  .pf-card>.err{padding:12px 16px 0}
  .pf-top{flex-direction:column;align-items:flex-start;gap:16px}
  .pf-grid{grid-template-columns:minmax(0,1fr)}
  .pf-foot{flex-direction:column-reverse;align-items:stretch}
  .pf-foot .btn{width:100%;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.pf-busy::after{animation-duration:2s}}