/* Higher Self - build 1322. Pagina "Eu" / "Me" (js/99f-me.js).
   Sus: avatarul ghidului, numele, Calea vietii si rotita spre Profil.
   Apoi progresul in 4 casute, "Spatiul tau" in grila de placute (aceleasi .hzTile ca Scurtaturile) si Setarile. */
#s-me{padding-top:6px}
.meHead{display:flex; align-items:center; gap:14px; margin:6px 0 18px}
.meAv{flex:0 0 64px; width:64px; height:64px; border-radius:50%; background:#1d2236 center 18%/cover no-repeat;
  box-shadow:0 0 0 2.5px var(--fvPillFill,#aa8fc8), 0 8px 20px rgba(0,0,0,.35)}
.meWho{flex:1; min-width:0}
.meWho h1{margin:0; font-family:var(--font-title); font-size:26px; line-height:1.1; color:var(--ink,#f5efe4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.meWho p{margin:4px 0 0; font-size:13px; color:rgba(245,239,228,.72)}
.meGear{flex:0 0 44px; width:44px; height:44px; border-radius:50%; border:0; padding:0 !important; display:flex; align-items:center; justify-content:center;
  background:var(--fvPillFill,#aa8fc8); color:#1d1630; cursor:pointer; -webkit-tap-highlight-color:transparent; transition:transform .16s ease}
.meGear svg{width:22px; height:22px}
.meGear:active{transform:scale(.94)}
.meStats{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:0 0 4px}
.meSt{display:flex; flex-direction:column; align-items:flex-start; gap:2px; text-align:left; min-height:84px; border-radius:18px; cursor:pointer;
  padding:13px 14px !important; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:var(--ink,#f5efe4);
  -webkit-tap-highlight-color:transparent; transition:transform .16s ease, background-color .2s ease}
.meSt:active{transform:scale(.97); background:rgba(255,255,255,.1)}
.meSt b{font-family:var(--font-title); font-size:27px; line-height:1; font-weight:700; color:var(--fvPillFill,#aa8fc8)}
.meSt span{font-size:12.5px; font-weight:600; line-height:1.25; margin-top:4px}
.meSt small{font-size:11px; color:rgba(245,239,228,.6)}
/* "Spatiul tau": grila de 2, nu carusel */
.hubShort.meGrid{display:grid; grid-template-columns:1fr 1fr; gap:10px; overflow:visible; margin:0 0 4px; padding:0; scroll-snap-type:none; touch-action:auto}
.hubShort.meGrid .hzTile{width:100%; height:156px; flex:none; scroll-snap-align:none; touch-action:manipulation}
.meRows{display:flex; flex-direction:column; gap:10px; margin:0 0 8px}
.meRow{display:flex; align-items:center; gap:12px; width:100%; text-align:left; border-radius:18px; cursor:pointer;
  padding:14px 16px !important; border:1px solid rgba(255,255,255,.12); background:rgba(255,255,255,.07); color:var(--ink,#f5efe4);
  -webkit-tap-highlight-color:transparent; transition:transform .16s ease}
.meRow:active{transform:scale(.98)}
.meRow span{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px}
.meRow b{font-size:14.5px; font-weight:700}
.meRow small{font-size:12px; color:rgba(245,239,228,.62)}
.meRow i{flex:0 0 auto; width:20px; height:20px; opacity:.7}
.meRow i svg{width:20px; height:20px; display:block}
.meWho .hl{color:var(--fvPillFill,#aa8fc8) !important; background:none !important}