/* Sexiloka · Perfiles públicos 3.0
   Usa la paleta global de /css/sexiloka-ui.css.
   Magenta = marca/acción. Dorado queda reservado a anuncios Exclusivos. */

body.sx-profiles-page,
body.sx-profile-public-page{
  background:
    radial-gradient(circle at 92% 8%, rgba(194,24,91,.055), transparent 28rem),
    var(--sx-bg);
}

/* ===== LISTADO ===== */
.sxp-hero{
  position:relative;
  overflow:hidden;
  padding:48px 0 34px;
  color:#fff;
  background:
    radial-gradient(circle at 88% 0%, rgba(194,24,91,.28), transparent 28rem),
    radial-gradient(circle at 20% 130%, rgba(143,41,89,.20), transparent 25rem),
    linear-gradient(145deg,#23232a 0%,#18181d 58%,#21191f 100%);
}
.sxp-hero::after{
  content:"";
  position:absolute;
  inset:auto -8% -90px auto;
  width:310px;
  height:310px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 0 0 38px rgba(255,255,255,.018),0 0 0 80px rgba(255,255,255,.012);
  pointer-events:none;
}
.sxp-hero__inner{position:relative;z-index:1}
.sxp-kicker{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:6px 10px;
  border:1px solid rgba(255,255,255,.12);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#f3d8e3;
  font-size:.75rem;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.06em;
}
.sxp-hero h1{
  max-width:780px;
  margin:14px 0 8px;
  font-size:clamp(2.15rem,5vw,3.55rem);
  line-height:1.02;
  letter-spacing:-.045em;
}
.sxp-hero p{
  max-width:720px;
  margin:0;
  color:#d4d1d6;
  font-size:clamp(.98rem,2vw,1.08rem);
}
.sxp-main{padding:26px 0 72px}
.sxp-toolbar{display:flex;align-items:flex-start;gap:14px;margin-bottom:17px}
.sxp-filterbox{
  flex:1;
  overflow:hidden;
  padding:15px;
  border:1px solid var(--sx-border);
  border-radius:20px;
  background:rgba(255,255,255,.96);
  box-shadow:0 10px 32px rgba(22,22,30,.065);
}
.sxp-filter-primary{
  display:grid;
  grid-template-columns:minmax(210px,1.2fr) minmax(155px,.75fr) minmax(155px,.75fr) auto;
  gap:9px;
  align-items:center;
}
.sxp-filter-primary :is(input,select),
.sxp-filter-advanced :is(input,select){
  min-height:44px;
  border-radius:11px;
}
.sxp-filter-primary .btn{min-height:44px;padding-inline:18px}
.sxp-filter-more{
  margin-top:10px;
  border-top:1px solid #eee7eb;
  padding-top:10px;
}
.sxp-filter-more summary{
  display:inline-flex;
  align-items:center;
  gap:7px;
  cursor:pointer;
  list-style:none;
  color:#6b5d66;
  font-size:.78rem;
  font-weight:800;
  user-select:none;
}
.sxp-filter-more summary::-webkit-details-marker{display:none}
.sxp-filter-more summary::before{content:"＋";color:var(--sx-brand);font-size:1rem}
.sxp-filter-more[open] summary::before{content:"−"}
.sxp-filter-advanced{
  display:grid;
  grid-template-columns:repeat(4,minmax(150px,1fr));
  gap:9px;
  margin-top:11px;
  align-items:center;
}
.sxp-video-check{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:44px;
  padding:0 12px;
  border:1px solid #c8c8d2;
  border-radius:11px;
  background:#fff;
  color:#514950;
  font-size:.82rem;
  white-space:nowrap;
}
.sxp-video-check input{width:17px;height:17px}
.sxp-filter-actions{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.sxp-manage-link{
  min-height:44px;
  white-space:nowrap;
  border-radius:12px!important;
}
.sxp-active{
  display:flex;
  align-items:center;
  gap:7px;
  flex-wrap:wrap;
  margin:0 0 18px;
}
.sxp-active>strong{font-size:.76rem;color:var(--sx-muted)}
.sxp-active>span{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:0 9px;
  border:1px solid #efd6e1;
  border-radius:999px;
  background:var(--sx-brand-soft);
  color:#84224f;
  font-size:.7rem;
  font-weight:760;
}
.sxp-result-count{margin-left:auto;color:var(--sx-muted);font-size:.77rem}
.sxp-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:17px}
.sxp-card{
  position:relative;
  overflow:hidden;
  display:flex;
  flex-direction:column;
  min-width:0;
  border:1px solid var(--sx-border);
  border-radius:20px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 7px 22px rgba(22,22,30,.065);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.sxp-card:hover{
  transform:translateY(-3px);
  border-color:#dac8d1;
  box-shadow:0 16px 38px rgba(22,22,30,.12);
  color:inherit;
}
.sxp-card__visual{
  position:relative;
  aspect-ratio:4/5;
  overflow:hidden;
  background:#171318;
}
.sxp-card__visual::after{
  content:"";
  position:absolute;
  inset:34% 0 0;
  background:linear-gradient(180deg,transparent 0%,rgba(12,9,12,.16) 25%,rgba(12,9,12,.86) 100%);
  pointer-events:none;
}
.sxp-card__visual img,
.sxp-card__visual video{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  transition:transform .35s ease;
}
.sxp-card:hover .sxp-card__visual img,
.sxp-card:hover .sxp-card__visual video{transform:scale(1.025)}
.sxp-card__visual video{pointer-events:none}
.sxp-card__video{
  position:absolute;
  z-index:3;
  top:10px;
  right:10px;
  display:inline-flex;
  align-items:center;
  gap:5px;
  min-height:28px;
  padding:0 9px;
  border:1px solid rgba(255,255,255,.18);
  border-radius:999px;
  background:rgba(21,17,21,.7);
  color:#fff;
  font-size:.66rem;
  font-weight:850;
  backdrop-filter:blur(7px);
}
.sxp-card__identity{
  position:absolute;
  z-index:3;
  left:14px;
  right:14px;
  bottom:13px;
  color:#fff;
}
.sxp-card__identity h2{
  margin:0 0 3px;
  color:#fff;
  font-size:clamp(1.08rem,2vw,1.28rem);
  line-height:1.15;
  font-weight:820;
  letter-spacing:-.025em;
  text-shadow:0 2px 16px rgba(0,0,0,.28);
}
.sxp-card__place{
  display:block;
  overflow:hidden;
  color:#eee8ec;
  font-size:.76rem;
  line-height:1.35;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.sxp-card__footer{
  display:flex;
  align-items:center;
  gap:6px;
  min-height:52px;
  padding:10px 12px;
  overflow:hidden;
  border-top:1px solid #f0ebee;
  background:#fff;
}
.sxp-chip{
  display:inline-flex;
  align-items:center;
  min-height:27px;
  padding:0 8px;
  border-radius:999px;
  background:#f7f3f5;
  color:#61545c;
  font-size:.67rem;
  font-weight:760;
  white-space:nowrap;
}
.sxp-chip--brand{background:var(--sx-brand-soft);color:#8b2554}
.sxp-chip--dark{background:#272128;color:#fff}
.sxp-card__arrow{
  margin-left:auto;
  color:#9c8e97;
  font-size:1.05rem;
  line-height:1;
}
.sxp-empty{
  padding:44px 24px;
  text-align:center;
  border:1px dashed #d8d1d9;
  border-radius:20px;
  background:#fff;
  color:var(--sx-muted);
}
.sxp-pagination{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:6px;
  flex-wrap:wrap;
  margin-top:28px;
}
.sxp-pagination :is(a,span){
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:40px;
  height:40px;
  padding:0 10px;
  border:1px solid var(--sx-border);
  border-radius:10px;
  background:#fff;
  color:#544a51;
  text-decoration:none;
  font-size:.81rem;
  font-weight:760;
}
.sxp-pagination a:hover{border-color:#d5a7bb;color:var(--sx-brand-dark)}
.sxp-pagination .is-current{border-color:var(--sx-brand);background:var(--sx-brand);color:#fff}
.sxp-pagination .is-disabled{opacity:.42}
.sxp-pagination .is-gap{min-width:26px;padding:0;border-color:transparent;background:transparent}

/* ===== PERFIL INDIVIDUAL ===== */
.sp3-shell{padding:26px 0 76px}
.sp3-back{
  display:inline-flex;
  align-items:center;
  gap:7px;
  margin-bottom:16px;
  color:#72666e!important;
  text-decoration:none;
  font-size:.84rem;
  font-weight:700;
}
.sp3-back:hover{color:var(--sx-brand-dark)!important}
.sp3-layout{display:grid;grid-template-columns:minmax(280px,430px) minmax(0,1fr);gap:24px;align-items:start}
.sp3-cover{
  position:sticky;
  top:88px;
  overflow:hidden;
  border-radius:24px;
  background:#151216;
  box-shadow:0 16px 42px rgba(22,22,30,.15);
}
.sp3-cover img,.sp3-cover video{display:block;width:100%;aspect-ratio:4/5;object-fit:cover;background:#111}
.sp3-cover video{pointer-events:none}
.sp3-cover__scrim{
  position:absolute;
  inset:auto 0 0;
  height:28%;
  background:linear-gradient(180deg,transparent,rgba(12,9,12,.62));
  pointer-events:none;
}
.sp3-cover__badge{
  position:absolute;
  z-index:2;
  left:13px;
  bottom:13px;
  padding:7px 10px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(20,16,20,.72);
  color:#fff;
  font-size:.7rem;
  font-weight:800;
  backdrop-filter:blur(7px);
}
.sp3-card{
  overflow:hidden;
  padding:28px;
  border:1px solid var(--sx-border);
  border-radius:24px;
  background:#fff;
  box-shadow:0 10px 30px rgba(22,22,30,.065);
}
.sp3-topline{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.sp3-type{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:0 9px;
  border-radius:999px;
  background:var(--sx-brand-soft);
  color:#8b2554;
  font-size:.69rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.sp3-approved{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  gap:5px;
  padding:0 9px;
  border:1px solid #d8e9df;
  border-radius:999px;
  background:#f1faf4;
  color:#276242;
  font-size:.69rem;
  font-weight:820;
}
.sp3-card h1{
  margin:12px 0 4px;
  font-size:clamp(2.15rem,5vw,3.35rem);
  line-height:1.02;
  letter-spacing:-.045em;
}
.sp3-meta{color:#756a72;font-size:.92rem}
.sp3-quick{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
  margin-top:14px;
}
.sp3-quick span{
  display:inline-flex;
  align-items:center;
  min-height:31px;
  padding:0 9px;
  border:1px solid #eee4e9;
  border-radius:999px;
  background:#fbf8fa;
  color:#5f535b;
  font-size:.72rem;
  font-weight:720;
}
.sp3-actions{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:20px;
  padding-top:19px;
  border-top:1px solid var(--sx-border);
}
.sp3-actions .btn{min-height:44px;border-radius:11px;font-weight:760}
.sp3-actions .sp3-primary{
  color:#fff;
  background:var(--sx-brand);
  border-color:var(--sx-brand);
  box-shadow:0 8px 22px rgba(194,24,91,.2);
}
.sp3-actions .sp3-primary:hover{color:#fff;background:var(--sx-brand-dark);border-color:var(--sx-brand-dark)}
.sp3-share{background:#fff;color:#564b52;border:1px solid #d9d0d5}
.sp3-share:hover{background:#f8f4f6;color:#332b30}
.sp3-share-status{
  flex-basis:100%;
  min-height:0;
  color:#6b6067;
  font-size:.73rem;
}
.sp3-share-status:empty{display:none}
.sp3-about{
  margin-top:23px;
  padding-top:21px;
  border-top:1px solid var(--sx-border);
}
.sp3-about h2,.sp3-section h2{margin:0 0 10px;font-size:1.08rem}
.sp3-about p{margin:0;white-space:pre-wrap;line-height:1.72;color:#4f474d}
.sp3-info-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px;margin-top:17px}
.sp3-info{
  padding:12px 13px;
  border:1px solid #eee6ea;
  border-radius:13px;
  background:#fcfafb;
}
.sp3-info small{
  display:block;
  color:#8a7d85;
  font-size:.65rem;
  font-weight:760;
  text-transform:uppercase;
  letter-spacing:.055em;
}
.sp3-info strong{display:block;margin-top:3px;font-size:.88rem;font-weight:770}
.sp3-tags{display:flex;flex-wrap:wrap;gap:7px;margin-top:9px}
.sp3-tags span{
  display:inline-flex;
  align-items:center;
  min-height:30px;
  padding:0 9px;
  border-radius:999px;
  background:#f8f1f5;
  color:#795269;
  font-size:.73rem;
  font-weight:690;
}
.sp3-stats{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  margin-top:20px;
  overflow:hidden;
  border:1px solid #ede5e9;
  border-radius:14px;
  background:#fbf9fa;
}
.sp3-stat{padding:11px;text-align:center;border-left:1px solid #ede5e9}
.sp3-stat:first-child{border-left:0}
.sp3-stat strong{display:block;font-size:1.02rem;color:#30282d}
.sp3-stat span{display:block;margin-top:1px;color:#867982;font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.045em}
.sp3-note{margin-top:14px;padding:12px 13px;border-radius:12px;background:#faf7f9;color:var(--sx-muted);font-size:.8rem}
.sp3-section{
  margin-top:21px;
  padding:21px;
  border:1px solid var(--sx-border);
  border-radius:20px;
  background:#fff;
  box-shadow:0 7px 22px rgba(22,22,30,.045);
}
.sp3-section-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin-bottom:13px;
}
.sp3-section-head h2{margin:0}
.sp3-section-head p{margin:3px 0 0;color:var(--sx-muted);font-size:.78rem}
.sp3-gallery{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  grid-auto-rows:118px;
  gap:8px;
}
.sp3-gallery .sp2-media{
  width:100%;
  height:100%;
  border-radius:13px;
}
.sp3-gallery .sp2-media:first-child{
  grid-column:span 2;
  grid-row:span 2;
}
.sp3-gallery .sp2-media img,
.sp3-gallery .sp2-media video{
  width:100%;
  height:100%;
  aspect-ratio:auto;
  object-fit:cover;
}
.sp3-gallery--videos{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:210px}
.sp3-gallery--videos .sp2-media:first-child{grid-column:auto;grid-row:auto}
.sp3-media-count{
  display:inline-flex;
  align-items:center;
  min-height:29px;
  padding:0 9px;
  border-radius:999px;
  background:#f6f2f4;
  color:#756971;
  font-size:.7rem;
  font-weight:760;
}
.sp3-comments .sp2-comment{
  padding:15px 0;
}
.sp3-comments .sp2-avatar{
  background:linear-gradient(145deg,#f8eaf1,#f1dfe8);
  color:#8f2959;
  border:1px solid #ead1dd;
}
.sp3-comments .sp2-reply{
  border-left-color:var(--sx-brand);
  background:#fcf3f7;
}
.sp3-comments .sp2-comment__top strong{color:#30272d}
.sp3-comments .sp2-comment__top small{white-space:nowrap}
.sp3-comment-user{
  display:inline-flex;
  margin-left:4px;
  padding:2px 6px;
  border-radius:999px;
  background:#f1eff1;
  color:#7d7379;
  font-size:.61rem;
  font-weight:700;
  vertical-align:middle;
}
.sp3-report{margin-top:14px}
.sp3-report summary{cursor:pointer;color:#8d6579;font-size:.74rem}
.sp3-report form{display:flex;gap:7px;margin-top:8px}

/* viewer existente, sólo armonización */
.sx-profile-public-page .sp2-viewer__counter{
  background:rgba(194,24,91,.78);
  color:#fff;
}
.sx-profile-public-page .sp2-viewer__nav:hover{background:rgba(194,24,91,.72)}

@media(max-width:1100px){
  .sxp-grid{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sxp-filter-primary{grid-template-columns:1fr 1fr 1fr}
  .sxp-filter-primary .btn{grid-column:1/-1}
}
@media(max-width:900px){
  .sp3-layout{grid-template-columns:1fr}
  .sp3-cover{position:relative;top:auto;max-width:500px;margin:0 auto}
  .sxp-filter-advanced{grid-template-columns:1fr 1fr}
}
@media(max-width:720px){
  .sxp-hero{padding:38px 0 28px}
  .sxp-main{padding-top:18px}
  .sxp-toolbar{flex-direction:column}
  .sxp-filterbox{width:100%;padding:12px;border-radius:16px}
  .sxp-manage-link{width:100%}
  .sxp-filter-primary{grid-template-columns:1fr 1fr}
  .sxp-filter-primary>:first-child{grid-column:1/-1}
  .sxp-filter-primary .btn{grid-column:1/-1}
  .sxp-filter-advanced{grid-template-columns:1fr}
  .sxp-result-count{width:100%;margin-left:0}
  .sxp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .sxp-card{border-radius:16px}
  .sxp-card__identity{left:11px;right:11px;bottom:10px}
  .sxp-card__footer{padding:8px;gap:5px;min-height:47px}
  .sxp-chip{font-size:.62rem;padding:0 7px}
  .sp3-shell{padding-top:18px}
  .sp3-card,.sp3-section{padding:16px;border-radius:18px}
  .sp3-cover{border-radius:19px}
  .sp3-actions>.btn,.sp3-actions>form{flex:1 1 150px}
  .sp3-actions>form .btn{width:100%}
  .sp3-gallery{grid-template-columns:repeat(2,minmax(0,1fr));grid-auto-rows:135px}
  .sp3-gallery .sp2-media:first-child{grid-column:span 2;grid-row:span 2}
  .sp3-gallery--videos{grid-template-columns:1fr;grid-auto-rows:220px}
  .sp3-gallery--videos .sp2-media:first-child{grid-column:auto;grid-row:auto}
}
@media(max-width:460px){
  .sxp-filter-primary{grid-template-columns:1fr}
  .sxp-filter-primary>:first-child{grid-column:auto}
  .sxp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
  .sxp-card__footer{min-height:44px}
  .sxp-chip:nth-of-type(n+3){display:none}
  .sxp-card__identity h2{font-size:1rem}
  .sxp-card__place{font-size:.69rem}
  .sp3-info-grid{grid-template-columns:1fr}
  .sp3-stats{grid-template-columns:repeat(3,minmax(0,1fr))}
  .sp3-stat{padding:9px 5px}
  .sp3-section-head{align-items:flex-start}
}
@media(prefers-reduced-motion:reduce){
  .sxp-card,.sxp-card__visual img,.sxp-card__visual video{transition:none!important}
}


/* ===== BARRA MOVIL DEL PERFIL ===== */
.sp3-mobile-bar{
  display:none;
}
@media(max-width:720px){
  .sx-profile-public-page{padding-bottom:calc(76px + env(safe-area-inset-bottom))}
  .sp3-mobile-bar{
    position:fixed;
    left:0;
    right:0;
    bottom:0;
    z-index:1150;
    display:flex;
    align-items:center;
    gap:8px;
    padding:10px max(10px,env(safe-area-inset-left)) calc(10px + env(safe-area-inset-bottom)) max(10px,env(safe-area-inset-right));
    border-top:1px solid rgba(33,27,32,.10);
    background:rgba(255,255,255,.94);
    box-shadow:0 -10px 30px rgba(22,22,30,.10);
    backdrop-filter:blur(14px);
  }
  .sp3-mobile-bar form{display:flex;flex:1;margin:0}
  .sp3-mobile-bar__button{
    flex:1;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:44px;
    padding:0 11px;
    border:1px solid #d9d0d5;
    border-radius:12px;
    background:#fff;
    color:#4d4249;
    font:inherit;
    font-size:.78rem;
    font-weight:800;
    text-decoration:none;
    white-space:nowrap;
  }
  .sp3-mobile-bar form .sp3-mobile-bar__button{width:100%}
  .sp3-mobile-bar__primary{
    border-color:var(--sx-brand);
    background:var(--sx-brand);
    color:#fff;
    box-shadow:0 7px 18px rgba(194,24,91,.18);
  }
}

/* ===== BANDEJA DE MENSAJES DE PERFILES ===== */
.spi3-hero{
  padding:34px 0 25px;
  background:
    radial-gradient(circle at 88% 0%,rgba(194,24,91,.20),transparent 25rem),
    linear-gradient(145deg,#23232a,#18181d 62%,#21191f);
  color:#fff;
}
.spi3-hero__inner{display:flex;align-items:flex-end;justify-content:space-between;gap:18px}
.spi3-kicker{
  display:inline-flex;
  padding:5px 9px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.07);
  color:#efd5e0;
  font-size:.69rem;
  font-weight:850;
  letter-spacing:.055em;
  text-transform:uppercase;
}
.spi3-hero h1{margin:10px 0 5px;font-size:clamp(1.8rem,4vw,2.55rem)}
.spi3-hero p{margin:0;color:#d3cdd1;max-width:650px;font-size:.9rem}
.spi3-unread-summary{
  flex:0 0 auto;
  display:inline-flex;
  align-items:center;
  gap:7px;
  min-height:38px;
  padding:0 12px;
  border:1px solid rgba(255,255,255,.13);
  border-radius:999px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font-size:.76rem;
  font-weight:780;
}
.spi3-unread-summary strong{
  display:inline-grid;
  place-items:center;
  min-width:22px;
  height:22px;
  padding:0 6px;
  border-radius:999px;
  background:var(--sx-brand);
  font-size:.7rem;
}
.spi3-shell{width:min(920px,calc(100% - 28px));margin:24px auto 72px}
.spi3-toolbar{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:15px;
}
.spi3-toolbar p{margin:0;color:var(--sx-muted);font-size:.82rem}
.spi3-list{display:grid;gap:10px}
.spi3-item{
  position:relative;
  display:grid;
  grid-template-columns:66px minmax(0,1fr) auto;
  gap:13px;
  align-items:center;
  min-height:92px;
  padding:12px 13px;
  overflow:hidden;
  border:1px solid var(--sx-border);
  border-radius:17px;
  background:#fff;
  color:inherit;
  text-decoration:none;
  box-shadow:0 5px 17px rgba(22,22,30,.045);
  transition:transform .16s ease,border-color .16s ease,box-shadow .16s ease;
}
.spi3-item:hover{
  transform:translateY(-1px);
  border-color:#dbc6d1;
  box-shadow:0 11px 27px rgba(22,22,30,.08);
  color:inherit;
}
.spi3-item.is-unread{
  border-color:#dda8c1;
  background:linear-gradient(135deg,#fff 0%,#fff7fb 100%);
}
.spi3-item.is-unread::before{
  content:"";
  position:absolute;
  inset:0 auto 0 0;
  width:4px;
  background:var(--sx-brand);
}
.spi3-item img{
  width:66px;
  height:76px;
  border-radius:12px;
  object-fit:cover;
  background:#eee;
}
.spi3-copy{min-width:0}
.spi3-copy__top{display:flex;align-items:center;gap:7px;min-width:0}
.spi3-copy__top strong{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.92rem;
}
.spi3-copy p{
  margin:4px 0 0;
  overflow:hidden;
  color:#6d6269;
  font-size:.81rem;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.spi3-copy small{display:block;margin-top:5px;color:#9a8e95;font-size:.68rem}
.spi3-side{display:flex;align-items:center;gap:8px}
.spi3-unread{
  display:inline-grid;
  place-items:center;
  min-width:24px;
  height:24px;
  padding:0 6px;
  border-radius:999px;
  background:var(--sx-brand);
  color:#fff;
  font-size:.67rem;
  font-weight:900;
}
.spi3-arrow{color:#a33a69;font-size:1.2rem}
.spi3-empty{
  padding:42px 22px;
  text-align:center;
  border:1px dashed #d8d1d9;
  border-radius:18px;
  background:#fff;
  color:var(--sx-muted);
}
@media(max-width:620px){
  .spi3-hero{padding:28px 0 22px}
  .spi3-hero__inner{align-items:flex-start;flex-direction:column}
  .spi3-unread-summary{min-height:34px}
  .spi3-shell{margin-top:18px}
  .spi3-toolbar{align-items:flex-start;flex-direction:column}
  .spi3-toolbar .btn{width:100%}
  .spi3-item{grid-template-columns:54px minmax(0,1fr) auto;min-height:78px;padding:10px}
  .spi3-item img{width:54px;height:62px;border-radius:10px}
}