:root{
  --fgp-bg:#fff;
  --fgp-text:#111111;
  --fgp-muted:#737373;
  --fgp-soft:#f5f5f5;
  --fgp-line:#ececec;
  --fgp-primary:#111111;
  --fgp-radius:30px;
}

.fgp-shell,
.fgp-shell *{box-sizing:border-box}

.fgp-shell{
  width:100%;
  min-height:100svh;
  background:var(--fgp-bg);
  color:var(--fgp-text);
  font-family:Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  padding:22px;
  display:flex;
  justify-content:center;
}

.fgp-card{
  width:100%;
  max-width:520px;
  position:relative;
  display:flex;
  flex-direction:column;
  gap:22px;
}

.fgp-back{
  position:absolute;
  top:14px;
  left:14px;
  z-index:2;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  text-decoration:none;
  color:#111;
  background:rgba(255,255,255,.88);
  border-radius:999px;
  backdrop-filter:blur(12px);
  box-shadow:0 10px 30px rgba(0,0,0,.08);
  font-size:22px;
  line-height:1;
}

.fgp-photo-wrap{
  width:100%;
  aspect-ratio:1/1;
  border-radius:34px;
  overflow:hidden;
  background:var(--fgp-soft);
}

.fgp-photo{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}

.fgp-content{
  padding:0 4px 96px;
}

.fgp-activity{
  margin:0 0 10px;
  color:var(--fgp-muted);
  font-size:14px;
  font-weight:400;
}

.fgp-name{
  margin:0;
  font-size:34px;
  line-height:1.05;
  letter-spacing:-.035em;
  font-weight:520;
}

.fgp-description{
  margin:18px 0 0;
  font-size:16px;
  line-height:1.55;
  color:#262626;
  font-weight:400;
}

.fgp-muted{color:var(--fgp-muted)}

.fgp-actions{
  position:fixed;
  left:50%;
  bottom:18px;
  transform:translateX(-50%);
  width:min(520px, calc(100vw - 32px));
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  padding:10px;
  background:rgba(255,255,255,.88);
  backdrop-filter:blur(18px);
  border-radius:24px;
  box-shadow:0 18px 50px rgba(0,0,0,.10);
  z-index:20;
}

.fgp-btn,
.fgp-bp-friend-button a,
.fgp-bp-friend-button button{
  min-height:50px;
  display:flex!important;
  align-items:center;
  justify-content:center;
  text-align:center;
  border:0!important;
  outline:0!important;
  border-radius:18px!important;
  padding:0 16px!important;
  text-decoration:none!important;
  font-size:14px!important;
  font-weight:500!important;
  line-height:1.1!important;
  cursor:pointer;
  box-shadow:none!important;
}

.fgp-btn-primary{
  background:#111!important;
  color:#fff!important;
}

.fgp-btn-secondary,
.fgp-bp-friend-button a,
.fgp-bp-friend-button button{
  background:#f2f2f2!important;
  color:#111!important;
}

.fgp-bp-friend-button,
.fgp-bp-friend-button div{
  width:100%;
  margin:0!important;
  padding:0!important;
}

.fgp-empty{
  width:100%;
  max-width:520px;
  margin-top:80px;
  padding:28px;
  background:#f7f7f7;
  border-radius:26px;
  text-align:center;
  color:#555;
}

@media (min-width:760px){
  .fgp-shell{padding:40px}
  .fgp-card{max-width:560px}
  .fgp-actions{width:min(560px, calc(100vw - 80px))}
}

@media (max-width:420px){
  .fgp-shell{padding:16px}
  .fgp-photo-wrap{border-radius:28px}
  .fgp-name{font-size:30px}
  .fgp-description{font-size:15px}
  .fgp-actions{width:calc(100vw - 24px); bottom:12px; grid-template-columns:1fr; border-radius:22px}
  .fgp-content{padding-bottom:146px}
}
