/* =========================================================
   FACELOV UI V3.0.0 — SIMPLE SYSTEM TYPOGRAPHY + RESPONSIVE UI
   ========================================================= */

:root{
  --fl-ui-font:
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif;
}

/* Simple, predictable system typography. */
html,
body,
button,
input,
textarea,
select{
  font-family:var(--fl-ui-font)!important;
  font-synthesis:none;
  text-rendering:optimizeLegibility;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

.fl-v220-app,
.fl-v220-app button,
.fl-v220-app input,
.fl-v220-app textarea,
.fl-v220-app select,
.flp-page,
.flp-page button,
.flp-page input,
.flp-page textarea,
.flp-page select{
  font-family:var(--fl-ui-font)!important;
}

/* No decorative/condensed text treatment in normal UI. */
.fl-v220-app :where(
  h1,h2,h3,h4,h5,h6,
  p,span,small,strong,b,
  button,input,textarea,select,label,a
),
.flp-page :where(
  h1,h2,h3,h4,h5,h6,
  p,span,small,strong,b,
  button,input,textarea,select,label,a
){
  letter-spacing:0!important;
  font-style:normal;
}

/* Facebook-like weight scale: 400/500/600/700 instead of 850/900/950. */
.fl-v220-app :where(h1,h2,h3,h4,h5,h6),
.flp-page :where(h1,h2,h3,h4,h5,h6){
  font-weight:700!important;
}

.fl-v220-app :where(strong,b),
.flp-page :where(strong,b){
  font-weight:600!important;
}

.fl-v220-app :where(button),
.flp-page :where(button){
  font-weight:600!important;
}

.fl-v220-app :where(input,textarea,select),
.flp-page :where(input,textarea,select){
  font-weight:400!important;
}

/* Keep Facelov logo recognizable. */
.fl-v220-logo,
.fl-v220-logo b,
.flp-logo,
.flp-logo b,
.flp-cover__brand strong{
  font-weight:800!important;
}

.fl-v220-logo,
.flp-logo{
  letter-spacing:-1.2px!important;
}

/* -------- FEED: balanced desktop / laptop widths -------- */

html body .fl-v220-app .fl-v220-topbar__inner{
  width:100%!important;
  max-width:1500px!important;
  padding-left:clamp(12px,1.8vw,24px)!important;
  padding-right:clamp(12px,1.8vw,24px)!important;
  grid-template-columns:
    minmax(250px,1fr)
    minmax(390px,600px)
    minmax(250px,1fr)!important;
  gap:clamp(10px,1.4vw,20px)!important;
}

html body .fl-v220-app .fl-v220-layout{
  width:100%!important;
  max-width:1460px!important;
  margin:0 auto!important;
  padding:
    clamp(14px,1.7vw,22px)
    clamp(12px,1.8vw,24px)
    80px!important;
  grid-template-columns:
    clamp(215px,18vw,260px)
    minmax(520px,680px)
    clamp(250px,21vw,310px)!important;
  gap:clamp(14px,1.6vw,24px)!important;
  justify-content:center!important;
}

html body .fl-v220-app .fl-v220-main{
  width:100%!important;
  min-width:0!important;
  max-width:680px!important;
  margin:0 auto!important;
}

html body .fl-v220-app :where(
  .fl-v220-composer,
  .fl-v220-post,
  .fl-v220-empty,
  .fl-v220-side-card,
  .fl-v220-directory
){
  border-radius:12px!important;
  box-shadow:0 1px 4px rgba(25,31,45,.08)!important;
}

html body .fl-v220-app .fl-v220-post__body{
  font-size:14px!important;
  line-height:1.45!important;
}

html body .fl-v220-app .fl-v220-person__copy strong,
html body .fl-v220-app .fl-v220-account strong,
html body .fl-v220-app .fl-v220-post strong{
  font-weight:600!important;
}

html body .fl-v220-app .fl-v220-menu a,
html body .fl-v220-app .fl-v220-mini-btn,
html body .fl-v220-app .fl-post-launch-action{
  font-weight:600!important;
}

/* -------- PROFILE: Facebook-like centered hero -------- */

html body .flp-page .flp-topbar__inner{
  width:100%!important;
  max-width:1500px!important;
  padding-left:clamp(12px,1.8vw,24px)!important;
  padding-right:clamp(12px,1.8vw,24px)!important;
  grid-template-columns:
    minmax(250px,1fr)
    minmax(390px,560px)
    minmax(250px,1fr)!important;
  gap:clamp(10px,1.4vw,20px)!important;
}

html body .flp-page .flp-shell{
  width:calc(100% - clamp(24px,5vw,72px))!important;
  max-width:1120px!important;
  margin-left:auto!important;
  margin-right:auto!important;
}

html body .flp-page .flp-cover{
  height:clamp(230px,23vw,310px)!important;
  border-radius:0 0 10px 10px!important;
}

html body .flp-page .flp-identity{
  min-height:145px!important;
}

html body .flp-page .flp-person h1{
  font-size:clamp(26px,2.35vw,32px)!important;
  line-height:1.12!important;
  font-weight:700!important;
}

html body .flp-page .flp-person__meta,
html body .flp-page .flp-counts{
  font-size:12px!important;
  font-weight:400!important;
}

html body .flp-page .flp-tabs button{
  font-size:12px!important;
  font-weight:600!important;
}

html body .flp-page .flp-grid{
  grid-template-columns:minmax(300px,350px) minmax(0,1fr)!important;
  gap:16px!important;
}

html body .flp-page .flp-card{
  border-radius:10px!important;
  box-shadow:0 1px 4px rgba(25,31,45,.08)!important;
}

html body .flp-page .flp-card__head h2{
  font-size:17px!important;
  font-weight:700!important;
}

html body .flp-page .flp-action{
  font-size:12px!important;
  font-weight:600!important;
}

/* Common modal typography. */
html body :where(
  .fl-post-modal-shell,
  .fl-msg-shell,
  .flp-modal-shell
),
html body :where(
  .fl-post-modal-shell *,
  .fl-msg-shell *,
  .flp-modal-shell *
){
  font-family:var(--fl-ui-font)!important;
}

html body :where(
  .fl-post-modal-shell h1,
  .fl-post-modal-shell h2,
  .fl-post-modal-shell h3,
  .fl-msg-shell h1,
  .fl-msg-shell h2,
  .fl-msg-shell h3,
  .flp-modal-shell h1,
  .flp-modal-shell h2,
  .flp-modal-shell h3
){
  letter-spacing:0!important;
  font-weight:700!important;
}

/* -------- Responsive breakpoints -------- */

@media(max-width:1220px){
  html body .fl-v220-app .fl-v220-layout{
    grid-template-columns:
      clamp(205px,20vw,235px)
      minmax(500px,680px)!important;
    max-width:980px!important;
  }

  html body .fl-v220-app .fl-v220-rightbar{
    display:none!important;
  }

  html body .fl-v220-app .fl-v220-topbar__inner,
  html body .flp-page .flp-topbar__inner{
    grid-template-columns:
      minmax(235px,1fr)
      minmax(360px,560px)
      minmax(190px,1fr)!important;
  }
}

@media(max-width:940px){
  html body .fl-v220-app .fl-v220-layout{
    display:block!important;
    max-width:720px!important;
    padding-left:12px!important;
    padding-right:12px!important;
  }

  html body .fl-v220-app .fl-v220-leftbar{
    display:none!important;
  }

  html body .fl-v220-app .fl-v220-main{
    max-width:680px!important;
  }

  html body .flp-page .flp-shell{
    width:calc(100% - 24px)!important;
  }

  html body .flp-page .flp-grid{
    grid-template-columns:1fr!important;
  }

  html body .flp-page .flp-column--side{
    order:2;
  }
}

@media(max-width:840px){
  html body .fl-v220-app .fl-v220-topbar__inner,
  html body .flp-page .flp-topbar__inner{
    grid-template-columns:minmax(0,1fr) auto!important;
  }

  html body .flp-page .flp-cover{
    height:clamp(210px,42vw,270px)!important;
  }
}

@media(max-width:600px){
  html body .flp-page .flp-shell{
    width:100%!important;
  }

  html body .flp-page .flp-cover{
    height:220px!important;
    border-radius:0!important;
  }

  html body .flp-page .flp-card{
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
  }

  html body .fl-v220-app .fl-v220-layout{
    padding-left:0!important;
    padding-right:0!important;
  }

  html body .fl-v220-app :where(
    .fl-v220-composer,
    .fl-v220-post,
    .fl-v220-empty,
    .fl-v220-directory
  ){
    border-left:0!important;
    border-right:0!important;
    border-radius:0!important;
  }
}