/* Basic reset and typographic tweaks */
:root{
  --max-width: 1100px;
  --accent: #0d6efd;
  --muted: #6c757d;
}

body{
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
  background: #f7f7fb;
  color: #222;
}

.grey{
  color: rgb(122, 122, 122);
}

.site-header a{ color: var(--muted); text-decoration: none }

.profile-grid{
  display: grid;
  grid-template-columns: 260px 1fr 260px;
  gap: 20px;
  max-width: var(--max-width);
  margin: 0 auto;
}

.profile-card{
  background: #fff;
  padding: 20px;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(20,20,40,0.04);
}

.avatar{
  width: 150px;
  height: 150px;
  object-fit: cover;
  border-radius: 50%;
  border: 4px solid #fff;
  box-shadow: 0 4px 10px rgba(20,20,40,0.08);
}

.avatar-wrap{ display:flex; flex-direction:column; align-items:center }

.name{ font-size: 1.2rem; margin-top: 10px }
.bio{ color: var(--muted); font-size: 0.95rem }

.stats .number{ font-weight:700 }
.stats .label{ color: var(--muted); font-size: 0.85rem }

  .feed{ /* feed area wrapper - uses card and flow layout */
    padding: 0 4px;
  }

.suggestions .card{ background: #fff; border-radius: 10px; padding: 12px; box-shadow: 0 1px 4px rgba(20,20,40,0.04) }

.post .card-body{ padding: 12px }
.post-actions .btn{ padding:0 6px }

/* Responsive rules */
@media (max-width: 992px){
  .profile-grid{ grid-template-columns: 1fr; padding: 0 12px }
  .suggestions{ order: 3 }
  .profile-card{ order: 1 }
  .feed{ order: 2 }
}

/* Small utilities */
.btn-link{ color: var(--muted); text-decoration: none }

/* make the posts area look a bit nicer */
  .posts{ display:flex; flex-direction:column; }

/* focus states */
.avatar:focus, .avatar:active{ outline: none }

/* file input label style */
.upload-btn{ cursor: pointer }

/* ensure main container spacing */
main.container{ max-width: var(--max-width) }