/* iBlogger v40 — final approved mobile blogger-card system.
   381–720px keeps the pixel-refined 430px geometry.
   320–380px uses the same design proportionally, without depending on legacy card styles.
   Desktop remains untouched. */
@media (min-width:381px) and (max-width:720px){
  body.creator-directory-page[data-creator-directory="blogger"] .creator-directory-grid,
  body.home-page.v4-page .v4-entity-grid{
    width:359px!important;
    max-width:calc(100vw - 36px)!important;
    margin-inline:auto!important;
    gap:14px!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"],
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]{
    position:relative!important;
    display:block!important;
    width:359px!important;
    max-width:100%!important;
    height:238px!important;
    min-height:238px!important;
    aspect-ratio:auto!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #e8ebf3!important;
    border-radius:15px!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(34,42,80,.075)!important;
    overflow:hidden!important;
    isolation:isolate!important;
    transform:none!important;
    direction:rtl!important;
  }
  html[data-theme="dark"] body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"],
  html[data-theme="dark"] body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]{
    background:var(--ui-surface,#15192b)!important;
    border-color:var(--ui-line,#2b3146)!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"]::after,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]::after{
    content:""!important;
    position:absolute!important;
    left:19px!important;
    right:12px!important;
    top:178px!important;
    bottom:auto!important;
    width:auto!important;
    height:1px!important;
    background:#e9ecf3!important;
    opacity:1!important;
    pointer-events:none!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"]::after{background:var(--ui-line,#30364a)!important}

  .creator-card[data-entity-type="blogger"] .creator-card-body{display:contents!important}
  .creator-card[data-entity-type="blogger"] .creator-type-chip,
  .creator-card[data-entity-type="blogger"] .creator-platform-chip,
  .creator-card[data-entity-type="blogger"] .creator-card-bio,
  .creator-card[data-entity-type="blogger"] .creator-card-view{display:none!important}

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-media,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-media{
    position:absolute!important;
    top:16px!important;
    right:12px!important;
    left:auto!important;
    width:117px!important;
    height:145px!important;
    min-width:117px!important;
    min-height:145px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:9px!important;
    overflow:hidden!important;
    background:#f3f4f8!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-media::after{display:none!important}
  .creator-card[data-entity-type="blogger"] .creator-card-media img{
    width:100%!important;
    height:100%!important;
    object-fit:cover!important;
    object-position:center!important;
    border-radius:inherit!important;
    transform:none!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity{
    position:absolute!important;
    top:20px!important;
    left:20px!important;
    right:auto!important;
    width:196px!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;
    padding:0!important;
    color:#151b36!important;
    text-align:left!important;
    direction:rtl!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-identity{color:var(--ui-ink,#f4f6ff)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-identity h3{
    margin:0 0 5px!important;
    color:inherit!important;
    font-size:20px!important;
    font-weight:900!important;
    line-height:24px!important;
    letter-spacing:-.4px!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-identity p{
    margin:0!important;
    color:#8d94aa!important;
    font-size:10px!important;
    font-weight:500!important;
    line-height:14px!important;
    direction:ltr!important;
    text-align:left!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags{
    position:absolute!important;
    top:79px!important;
    left:20px!important;
    right:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:196px!important;
    min-height:27px!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    direction:ltr!important;
    text-align:left!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-tags > span{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    width:auto!important;
    max-width:100%!important;
    min-height:27px!important;
    height:27px!important;
    margin:0!important;
    padding:4px 10px!important;
    border:1px solid #e2e5ef!important;
    border-radius:9px!important;
    background:#f7f5ff!important;
    color:#373d59!important;
    font-size:10px!important;
    font-weight:700!important;
    line-height:17px!important;
    direction:rtl!important;
    white-space:nowrap!important;
    overflow:hidden!important;
    text-overflow:ellipsis!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-tags > span{
    background:color-mix(in srgb,var(--ui-surface-2,#23283b) 88%,#6d5ee8 12%)!important;
    border-color:var(--ui-line,#343a50)!important;
    color:var(--ui-ink,#f2f4fb)!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-tags .home-text-icon{display:none!important}
  .creator-card[data-entity-type="blogger"] .creator-card-tags > span::before{
    width:13px!important;height:13px!important;flex:0 0 13px!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics{
    position:absolute!important;
    top:122px!important;
    left:19px!important;
    right:auto!important;
    display:grid!important;
    grid-template-columns:repeat(3,1fr)!important;
    width:196px!important;
    height:48px!important;
    min-height:48px!important;
    margin:0!important;
    padding:0!important;
    gap:0!important;
    border:1px solid #e3e7ef!important;
    border-radius:10px!important;
    background:#fff!important;
    box-shadow:0 2px 8px rgba(38,45,86,.025)!important;
    overflow:hidden!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-metrics{
    background:var(--ui-surface,#15192b)!important;
    border-color:var(--ui-line,#32384c)!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-metrics > div{
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    min-width:0!important;
    padding:3px 2px!important;
    border-left:1px solid #e6e9f2!important;
    text-align:center!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-metrics > div{border-color:var(--ui-line,#32384c)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics > div:last-child{border-left:0!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics strong{
    display:inline-flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:4px!important;
    margin:0!important;
    color:#18203d!important;
    font-size:12px!important;
    font-weight:900!important;
    line-height:14px!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-metrics strong{color:var(--ui-ink,#f4f6ff)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics strong::before{width:13px!important;height:13px!important;flex-basis:13px!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics span{
    display:block!important;
    margin:2px 0 0!important;
    color:#878fa7!important;
    font-size:9px!important;
    font-weight:600!important;
    line-height:11px!important;
    white-space:nowrap!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating{
    position:absolute!important;
    top:188px!important;
    left:28px!important;
    right:auto!important;
    display:flex!important;
    align-items:center!important;
    justify-content:flex-start!important;
    width:176px!important;
    height:33px!important;
    min-height:33px!important;
    margin:0!important;
    padding:0!important;
    gap:5px!important;
    border:0!important;
    background:transparent!important;
    direction:ltr!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-rating strong{
    order:1!important;
    flex:0 0 auto!important;
    margin:0 8px 0 0!important;
    color:#16203d!important;
    font-size:13px!important;
    font-weight:900!important;
    line-height:16px!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-rating strong{color:var(--ui-ink,#f4f6ff)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-card-stars{
    order:2!important;
    display:inline-flex!important;
    align-items:center!important;
    gap:0!important;
    flex:0 0 auto!important;
    color:#d99b00!important;
    font-size:16px!important;
    line-height:16px!important;
    white-space:nowrap!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-rating-count-desktop{display:none!important}
  .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-rating-count-mobile{
    order:3!important;
    display:inline!important;
    flex:0 0 auto!important;
    margin:0 0 0 7px!important;
    color:#8a91a7!important;
    font-size:10px!important;
    font-weight:500!important;
    line-height:14px!important;
    white-space:nowrap!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions{
    position:absolute!important;
    top:188px!important;
    right:12px!important;
    left:auto!important;
    display:block!important;
    width:130px!important;
    height:33px!important;
    min-height:33px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary{
    display:inline-flex!important;
    flex-direction:row-reverse!important;
    align-items:center!important;
    justify-content:center!important;
    gap:6px!important;
    width:130px!important;
    height:33px!important;
    min-height:33px!important;
    margin:0!important;
    padding:5px 8px!important;
    border:1px solid #6455ea!important;
    border-radius:9px!important;
    background:#6455ea!important;
    color:#fff!important;
    box-shadow:0 5px 14px rgba(100,85,234,.22)!important;
    font-size:11px!important;
    font-weight:800!important;
    line-height:16px!important;
    white-space:nowrap!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary{
    background:#6455ea!important;
    color:#fff!important;
    border-color:#6455ea!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary::after{
    width:17px!important;height:17px!important;flex:0 0 17px!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-action-label-desktop{display:none!important}
  .creator-card[data-entity-type="blogger"] .creator-action-label-mobile{display:inline!important}
}

/* Proportional fallback on phones narrower than the 430px reference viewport. */
@media (max-width:380px){
  body.creator-directory-page[data-creator-directory="blogger"] .creator-directory-grid,
  body.home-page.v4-page .v4-entity-grid{width:calc(100vw - 36px)!important;max-width:none!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"],
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]{
    width:100%!important;
    height:auto!important;
    aspect-ratio:359/238!important;
  }
  /* Preserve the same spatial ratios below 381px. */
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-media,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-media{
    top:6.72%!important;right:3.34%!important;width:32.59%!important;height:60.92%!important;min-width:0!important;min-height:0!important
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity{top:8.4%!important;left:5.57%!important;width:54.6%!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags{top:33.2%!important;left:5.57%!important;width:54.6%!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics{top:51.26%!important;left:5.29%!important;width:54.6%!important;height:20.17%!important;min-height:0!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"]::after,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]::after{top:74.79%!important;left:5.29%!important;right:3.34%!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating{top:78.99%!important;left:7.8%!important;width:49%!important;height:13.87%!important;min-height:0!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions{top:78.99%!important;right:3.34%!important;width:36.21%!important;height:13.87%!important;min-height:0!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary{width:100%!important;height:100%!important;min-height:0!important}
  .creator-card[data-entity-type="blogger"] .creator-card-identity h3{font-size:clamp(16px,4.65vw,20px)!important;line-height:1.2!important}
  .creator-card[data-entity-type="blogger"] .creator-card-identity p{font-size:clamp(8px,2.32vw,10px)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-tags > span{height:auto!important;min-height:24px!important;font-size:clamp(8px,2.32vw,10px)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics strong{font-size:clamp(9px,2.79vw,12px)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics span{font-size:clamp(7px,2.09vw,9px)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-rating strong{font-size:clamp(10px,3.02vw,13px)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-card-stars{font-size:clamp(12px,3.72vw,16px)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-rating-count-mobile{font-size:clamp(8px,2.32vw,10px)!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary{font-size:clamp(9px,2.55vw,11px)!important}
}

/* Final pixel alignment corrections against the approved 430px reference. */
@media (min-width:381px) and (max-width:720px){
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-media,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-media{
    inset:auto 11px auto auto!important;
    top:15px!important;
    align-self:auto!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity{
    inset:20px auto auto 20px!important;
    align-self:auto!important;
    place-self:auto!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags{
    inset:77px auto auto 20px!important;
    align-self:auto!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics{
    inset:121px auto auto 19px!important;
    align-self:auto!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating{
    inset:186px auto auto 28px!important;
    align-self:auto!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions{
    inset:185px 11px auto auto!important;
    align-self:auto!important;
  }
}

/* Typography/controls: use the same specificity as legacy mobile rules so the reference sizes win. */
@media (min-width:381px) and (max-width:720px){
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity h3,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity h3{
    font-size:20px!important;line-height:24px!important;font-weight:900!important;margin:0 0 5px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity p,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity p{
    font-size:10px!important;line-height:14px!important;font-weight:500!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags > span,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags > span{
    font-size:10px!important;line-height:17px!important;font-weight:700!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics strong,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics strong{
    font-size:12px!important;line-height:14px!important;font-weight:900!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics span,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics span{
    font-size:9px!important;line-height:11px!important;font-weight:600!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions{
    width:132px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary{
    width:132px!important;
  }
}
@media (min-width:381px) and (max-width:720px){
  body.creator-directory-page[data-creator-directory="blogger"] .creator-directory-grid,
  body.home-page.v4-page .v4-entity-grid{gap:13px!important}
}

/* Micro-alignment pass from direct pixel comparison with the approved reference. */
@media (min-width:381px) and (max-width:720px){
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity{
    inset:21px auto auto 19px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity h3,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity h3{
    transform:scale(1.012,.85)!important;
    transform-origin:left top!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity p,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity p{
    font-size:11.5px!important;
    letter-spacing:0!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags > span,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags > span{
    padding-inline:12.5px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics{
    top:120px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"]::after,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]::after{
    top:177px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating{
    top:184px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating strong,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating strong{
    font-size:12px!important;
  }
}

/* Pixel comparison finalizer — 430px approved reference. */
@media (min-width:381px) and (max-width:720px){
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity{
    inset:21px auto auto 20px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity p,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity p{
    transform:translateX(1px)!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags{
    top:77px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags > span,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags > span{
    height:25px!important;
    min-height:25px!important;
    padding:1px 8px 6px 9px!important;
    font-size:10.2px!important;
    letter-spacing:.05px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating{
    top:184px!important;
    gap:5px!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating strong,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating strong{
    margin-right:3px!important;
    transform:translateY(-1px) scale(1,.89)!important;
    transform-origin:left center!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-card-stars,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-card-stars{
    font-size:17.5px!important;
    line-height:17.5px!important;
  }
}


/* v39: self-contained proportional rendering for 320–380px phones.
   This block intentionally repeats the required card geometry so legacy mobile CSS cannot restore the old design. */
@media (max-width:380px){
  body.creator-directory-page[data-creator-directory="blogger"] .creator-directory-grid,
  body.home-page.v4-page .v4-entity-grid{
    width:calc(100vw - 36px)!important;
    max-width:359px!important;
    margin-inline:auto!important;
    gap:13px!important;
    container-type:inline-size!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"],
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]{
    position:relative!important;
    display:block!important;
    width:100%!important;
    max-width:100%!important;
    height:auto!important;
    min-height:0!important;
    aspect-ratio:359/238!important;
    margin:0!important;
    padding:0!important;
    border:1px solid #e8ebf3!important;
    border-radius:clamp(12px,4.18cqw,15px)!important;
    background:#fff!important;
    box-shadow:0 8px 24px rgba(34,42,80,.075)!important;
    overflow:hidden!important;
    isolation:isolate!important;
    transform:none!important;
    direction:rtl!important;
  }
  html[data-theme="dark"] body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"],
  html[data-theme="dark"] body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]{
    background:var(--ui-surface,#15192b)!important;
    border-color:var(--ui-line,#2b3146)!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"]::after,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"]::after{
    content:""!important;
    position:absolute!important;
    left:5.292cqw!important;
    right:3.343cqw!important;
    top:49.304cqw!important;
    bottom:auto!important;
    width:auto!important;
    height:1px!important;
    background:#e9ecf3!important;
    opacity:1!important;
    pointer-events:none!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"]::after{background:var(--ui-line,#30364a)!important}

  .creator-card[data-entity-type="blogger"] .creator-card-body{display:contents!important}
  .creator-card[data-entity-type="blogger"] .creator-type-chip,
  .creator-card[data-entity-type="blogger"] .creator-platform-chip,
  .creator-card[data-entity-type="blogger"] .creator-card-bio,
  .creator-card[data-entity-type="blogger"] .creator-card-view{display:none!important}

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-media,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-media{
    position:absolute!important;
    top:4.178cqw!important;
    right:3.064cqw!important;
    left:auto!important;
    width:32.591cqw!important;
    height:40.390cqw!important;
    min-width:0!important;
    min-height:0!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-radius:clamp(7px,2.507cqw,9px)!important;
    overflow:hidden!important;
    background:#f3f4f8!important;
    box-shadow:none!important;
    transform:none!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-media::after{display:none!important}
  .creator-card[data-entity-type="blogger"] .creator-card-media img{
    width:100%!important;height:100%!important;object-fit:cover!important;object-position:center!important;
    border-radius:inherit!important;transform:none!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity{
    position:absolute!important;
    top:5.850cqw!important;
    left:5.571cqw!important;
    right:auto!important;
    width:54.596cqw!important;
    min-width:0!important;
    height:auto!important;
    margin:0!important;padding:0!important;
    color:#151b36!important;text-align:left!important;direction:rtl!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-identity{color:var(--ui-ink,#f4f6ff)!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity h3,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity h3{
    margin:0 0 clamp(3px,1.393cqw,5px)!important;
    color:inherit!important;
    font-size:clamp(16px,5.571cqw,20px)!important;
    font-weight:900!important;
    line-height:1.2!important;
    letter-spacing:-.4px!important;
    text-align:left!important;
    white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    transform:scale(1.012,.85)!important;transform-origin:left top!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-identity p,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-identity p{
    margin:0!important;color:#8d94aa!important;
    font-size:clamp(9.5px,3.203cqw,11.5px)!important;font-weight:500!important;line-height:1.22!important;
    direction:ltr!important;text-align:left!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
    transform:translateX(1px)!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags{
    position:absolute!important;top:21.448cqw!important;left:5.571cqw!important;right:auto!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:54.596cqw!important;min-height:0!important;margin:0!important;padding:0!important;gap:0!important;
    direction:ltr!important;text-align:left!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-tags > span,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-tags > span{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:5px!important;
    width:auto!important;max-width:100%!important;height:6.964cqw!important;min-height:22px!important;
    margin:0!important;padding:1px clamp(7px,2.228cqw,8px) clamp(4px,1.671cqw,6px) clamp(8px,2.507cqw,9px)!important;
    border:1px solid #e2e5ef!important;border-radius:clamp(7px,2.507cqw,9px)!important;
    background:#f7f5ff!important;color:#373d59!important;
    font-size:clamp(8.5px,2.841cqw,10.2px)!important;font-weight:700!important;line-height:1.6!important;
    direction:rtl!important;white-space:nowrap!important;overflow:hidden!important;text-overflow:ellipsis!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-tags > span{
    background:color-mix(in srgb,var(--ui-surface-2,#23283b) 88%,#6d5ee8 12%)!important;
    border-color:var(--ui-line,#343a50)!important;color:var(--ui-ink,#f2f4fb)!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-tags .home-text-icon{display:none!important}
  .creator-card[data-entity-type="blogger"] .creator-card-tags > span::before{
    width:clamp(11px,3.621cqw,13px)!important;height:clamp(11px,3.621cqw,13px)!important;flex:0 0 clamp(11px,3.621cqw,13px)!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics{
    position:absolute!important;top:33.426cqw!important;left:5.292cqw!important;right:auto!important;
    display:grid!important;grid-template-columns:repeat(3,1fr)!important;
    width:54.596cqw!important;height:13.370cqw!important;min-height:0!important;
    margin:0!important;padding:0!important;gap:0!important;
    border:1px solid #e3e7ef!important;border-radius:clamp(8px,2.786cqw,10px)!important;
    background:#fff!important;box-shadow:0 2px 8px rgba(38,45,86,.025)!important;overflow:hidden!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-metrics{background:var(--ui-surface,#15192b)!important;border-color:var(--ui-line,#32384c)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics > div{
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;min-width:0!important;
    padding:2px 1px!important;border-left:1px solid #e6e9f2!important;text-align:center!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-metrics > div{border-color:var(--ui-line,#32384c)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics > div:last-child{border-left:0!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics strong,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics strong{
    display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:3px!important;margin:0!important;
    color:#18203d!important;font-size:clamp(10px,3.343cqw,12px)!important;font-weight:900!important;line-height:1.15!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-metrics strong{color:var(--ui-ink,#f4f6ff)!important}
  .creator-card[data-entity-type="blogger"] .creator-card-metrics strong::before{width:clamp(11px,3.621cqw,13px)!important;height:clamp(11px,3.621cqw,13px)!important;flex-basis:clamp(11px,3.621cqw,13px)!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-metrics span,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-metrics span{
    display:block!important;margin:2px 0 0!important;color:#878fa7!important;
    font-size:clamp(7.5px,2.507cqw,9px)!important;font-weight:600!important;line-height:1.2!important;white-space:nowrap!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating{
    position:absolute!important;top:51.253cqw!important;left:7.799cqw!important;right:auto!important;
    display:flex!important;align-items:center!important;justify-content:flex-start!important;
    width:49.025cqw!important;height:9.192cqw!important;min-height:0!important;
    margin:0!important;padding:0!important;gap:clamp(3px,1.393cqw,5px)!important;border:0!important;background:transparent!important;direction:ltr!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating strong,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating strong{
    order:1!important;flex:0 0 auto!important;margin:0 clamp(2px,.836cqw,3px) 0 0!important;
    color:#16203d!important;font-size:clamp(10.5px,3.343cqw,12px)!important;font-weight:900!important;line-height:1.2!important;
    transform:translateY(-1px) scale(1,.89)!important;transform-origin:left center!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-rating strong{color:var(--ui-ink,#f4f6ff)!important}
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-card-stars,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-card-stars{
    order:2!important;display:inline-flex!important;align-items:center!important;gap:0!important;flex:0 0 auto!important;
    color:#d99b00!important;font-size:clamp(14px,4.875cqw,17.5px)!important;line-height:1!important;white-space:nowrap!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-rating-count-desktop{display:none!important}
  .creator-card[data-entity-type="blogger"] .creator-card-rating .creator-rating-count-mobile{
    order:3!important;display:inline!important;flex:0 0 auto!important;margin:0 0 0 clamp(4px,1.95cqw,7px)!important;
    color:#8a91a7!important;font-size:clamp(8px,2.786cqw,10px)!important;font-weight:500!important;line-height:1.2!important;white-space:nowrap!important;
  }

  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions{
    position:absolute!important;top:51.532cqw!important;right:3.064cqw!important;left:auto!important;
    display:block!important;width:36.769cqw!important;height:9.192cqw!important;min-height:0!important;
    margin:0!important;padding:0!important;border:0!important;
  }
  body.creator-directory-page[data-creator-directory="blogger"] .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary,
  body.home-page.v4-page .v4-entity-grid .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary{
    display:inline-flex!important;flex-direction:row-reverse!important;align-items:center!important;justify-content:center!important;
    gap:clamp(4px,1.671cqw,6px)!important;width:100%!important;height:100%!important;min-height:0!important;
    margin:0!important;padding:clamp(3px,1.393cqw,5px) clamp(6px,2.228cqw,8px)!important;
    border:1px solid #6455ea!important;border-radius:clamp(7px,2.507cqw,9px)!important;
    background:#6455ea!important;color:#fff!important;box-shadow:0 5px 14px rgba(100,85,234,.22)!important;
    font-size:clamp(9px,3.064cqw,11px)!important;font-weight:800!important;line-height:1.2!important;white-space:nowrap!important;
  }
  html[data-theme="dark"] .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary{background:#6455ea!important;color:#fff!important;border-color:#6455ea!important}
  .creator-card[data-entity-type="blogger"] .creator-card-actions .creator-primary::after{
    width:clamp(14px,4.735cqw,17px)!important;height:clamp(14px,4.735cqw,17px)!important;flex:0 0 clamp(14px,4.735cqw,17px)!important;
  }
  .creator-card[data-entity-type="blogger"] .creator-action-label-desktop{display:none!important}
  .creator-card[data-entity-type="blogger"] .creator-action-label-mobile{display:inline!important}
}
