:root{
  --bg:#0b0f1d;
  --fg:#eaf1ff;
  --mut:rgba(234,241,255,.72);
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--fg);font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial}
a{color:inherit;text-decoration:none}
body{overflow-x:hidden}

/* Tiles width (home) */
:root{ --tileW: 100vw; }
/* HOME full-bleed strips */
.homeWrap{padding:10px 0 64px}
.strip{
  position:relative;
  height:90px;
  width:100vw;
  margin-left:calc(50% - 50vw);
  overflow:hidden;
  border-top:1px solid rgba(255,255,255,.08);
  border-bottom:1px solid rgba(255,255,255,.08);
  background:#070a12;
}

.stripLabel{
  position:absolute; left:10px; bottom:10px; z-index:6;
  padding:8px 10px 7px; border-radius:16px;
  background:linear-gradient(to top, rgba(0,0,0,.78), rgba(0,0,0,.12));
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  max-width:calc(100% - 20px);
  pointer-events:none;
}
.stripLabel .n{font-weight:1000;font-size:12px;line-height:1.05;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stripLabel .d{font-size:10px;color:rgba(255,255,255,.82);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.marquee{height:90px; --dur:22s}
.track{
  display:flex;
  width:max-content;
  height:90px;
  animation: scroll var(--dur) linear infinite;
  will-change: transform;
}
.inner{display:flex; gap:0; height:90px}
.item{
  position:relative;
  flex:0 0 100vw;
  width:100vw;
  height:90px;
  display:block;
  border-radius:0;
  overflow:hidden;
}


.item .fill{display:none}
.item img{position:relative;width:100%;height:100%;object-fit:cover;object-position:center;display:block;background:#000}

@keyframes scroll{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(calc(-1 * var(--loopW, 50%)),0,0)}
}

/* ADMIN FAB */
.adminFab{
  position:fixed; right:12px; bottom:12px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter: blur(10px);
  padding:10px 12px;
  border-radius:16px;
  font-weight:900;
}

/* PROFILE */
.pWrap{max-width:980px;margin:0 auto;padding:14px 14px 80px}
.back{display:inline-block;margin:4px 0 10px;color:var(--mut);font-weight:800}

.slider{
  opacity:0;
  width:min(560px, 100%);
  /* fallback (JS will set exact height per image) */
  aspect-ratio:4/5;
  height:auto;
  margin:0 auto;
  position:relative;
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  background:#000;
  max-height:78vh;
  transition: height .2s ease;
  
}
@media (max-width: 520px){
  .slider{ aspect-ratio:9/16; }
}

.slide{position:relative}
.slideBg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  filter: blur(12px) brightness(.62);
  transform: scale(1.08);
  opacity:.95;
  pointer-events:none;
}
.slideMain{
  position:relative;
  z-index:1;
}

.slides{display:flex;height:100%;transition:none; position:relative; z-index:1; will-change:transform}
.slide{flex:0 0 100%;height:100%}
.slide img{
  width:100%;
  height:100%;
  object-fit:contain; /* show full content */
  object-position:center;
  display:block;
  background:transparent;
}

.nav{
  z-index:2;
  position:absolute; top:50%; transform:translateY(-50%);
  width:40px;height:40px;border-radius:14px;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(0,0,0,.35);
  color:var(--fg); font-size:22px; font-weight:900;
}
.nav.prev{left:10px}
.nav.next{right:10px}

.dots{
  z-index:2;
  position:absolute; left:50%; bottom:10px; transform:translateX(-50%);
  display:flex; gap:6px;
}
.dot{
  width:8px;height:8px;border-radius:999px;
  border:0; background:rgba(255,255,255,.35);
}
.dot.on{background:rgba(255,255,255,.95)}

.pCard{
  margin-top:14px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.04);
  border-radius:22px;
  padding:14px;
}
.pTitle{font-weight:1000;font-size:18px}
.pSub{color:var(--mut);font-weight:800}
.pMeta{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.chip{font-size:12px;border:1px solid rgba(255,255,255,.12);background:rgba(0,0,0,.20);padding:8px 10px;border-radius:999px}
.pDesc{margin-top:10px;color:rgba(234,241,255,.86);line-height:1.7;font-size:13px}
.waBtn{
  margin-top:12px;
  display:flex;justify-content:center;align-items:center;
  height:44px;border-radius:16px;
  background:linear-gradient(135deg, rgba(57,217,138,.92), rgba(57,217,138,.72));
  color:#071018;font-weight:1000;
}

/* Static "Track2" rows (2 columns) under first 5 moving strips */
.staticGrid{
  width:100vw;
  margin-left:calc(50% - 50vw);
}
.staticRow{
  display:flex;
  width:100%;
  height:90px;
  gap:4px; /* tiny separation between the 2 tracks */
  padding:0; /* wall-to-wall */
  box-sizing:border-box;
  background:transparent;
}
.staticTrack{
  position:relative;
  flex:1;
  height:90px;
  display:block;
  overflow:hidden;
  border-radius:0;
  border:1px solid rgba(255,255,255,.10);
  background:#070a12;
}
.staticTrack img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
  background:#000;
}
.staticLabel{
  position:absolute;
  left:50%;
  bottom:6px;
  transform:translateX(-50%);
  z-index:3;
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:0;
  background:transparent;
  border:0;
  backdrop-filter:none;
  max-width:calc(100% - 16px);
  white-space:nowrap;
  pointer-events:none;
}
.staticLabel .n,
.staticLabel .d{
  font-weight:1000;
  font-size:13.5px;
  line-height:1;
  color:#46ff7a;
  overflow:hidden;
  text-overflow:ellipsis;
  text-shadow:0 1px 10px rgba(0,0,0,.75);
  -webkit-text-stroke:0.55px rgba(0,0,0,.45);
}
.staticLabel .d{font-weight:900;opacity:.95}
.staticTrack--empty{background:#070a12}

/* Mobile: keep 2 columns, just shrink text/padding */
@media (max-width: 520px){
  .staticRow{gap:3px;padding:0}
  .staticLabel{bottom:5px;gap:6px}
  .staticLabel .n, .staticLabel .d{font-size:12px}
}
  .staticTrack{border-radius:14px}
  .staticLabel{bottom:5px}
  .staticLabel .n{font-size:11px}
  .staticLabel .d{font-size:9px}
}
  .staticLabel .n{font-size:11px}
  .staticLabel .d{font-size:9px}
}

  .staticLabel .n{font-size:11px}
  .staticLabel .d{font-size:9px}
}


.slider{ transition: height .25s ease;}
.slides{position:relative;z-index:1}




/* ===== Profile Pink Theme (scoped) ===== */
body.profile{
  /* Modern pastel pink atmosphere */
  background:
    radial-gradient(1000px 600px at 18% 10%, rgba(255, 220, 240, .55), transparent 62%),
    radial-gradient(960px 600px at 86% 24%, rgba(255, 195, 230, .38), transparent 58%),
    radial-gradient(1000px 600px at 55% 96%, rgba(245, 220, 255, .22), transparent 60%),
    var(--bg);
  position:relative;
  overflow-x:hidden;
}
body.profile::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  /* very subtle mist */
  background:
    radial-gradient(1200px 760px at 50% 0%, rgba(255, 245, 250, .10), transparent 65%),
    radial-gradient(900px 600px at 10% 70%, rgba(255, 210, 235, .08), transparent 62%);
  opacity:.8;
  z-index:0;
}
body.profile main,
body.profile .container,
body.profile .wrap,
body.profile .page{
  position:relative;
  z-index:1;
}

body.profile .pCard{
  border-color: rgba(255, 170, 215, .24);
  background: linear-gradient(180deg, rgba(255, 190, 225, .10), rgba(255,255,255,.04));
}
body.profile .pTitle{
  display:flex;
  align-items:center;
  gap:8px;
}
body.profile .pTitle .kiss{
  font-size:18px;
  filter: drop-shadow(0 8px 20px rgba(255, 120, 190, .28));
}
body.profile .pSub{
  color: rgba(255, 235, 245, .85);
}
body.profile .chip{
  border-color: rgba(255, 170, 215, .24);
  background: rgba(255, 190, 225, .10);
  color: rgba(255, 245, 250, .92);
}

/* WhatsApp button back to original green */
body.profile .waBtn{
  background: linear-gradient(135deg, #22c55e, #16a34a);
  color:#06170c;
  box-shadow: 0 10px 28px rgba(34, 197, 94, .18);
}
body.profile .waBtn:hover{ filter: brightness(1.03); }


.slider.isReady{opacity:1; transition:opacity .18s ease}

.slider.isReady .slides{transition:transform .35s ease}



body.profile::after{
  content:"💋   💋   💋   💋   💋   💋   💋   💋\A\A💋   💋   💋   💋   💋   💋   💋   💋\A\A💋   💋   💋   💋   💋   💋   💋   💋\A\A💋   💋   💋   💋   💋   💋   💋   💋\A\A💋   💋   💋   💋   💋   💋   💋   💋";
  position:fixed;
  inset:-70px;
  pointer-events:none;
  white-space:pre;
  font-size:16px;
  line-height:2.8;
  letter-spacing:30px;
  opacity:.075;
  transform: rotate(-10deg);
  mix-blend-mode: normal;
  filter: blur(.2px);
  z-index:0;
}

body.profile .waIco{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:28px;
  height:28px;
  margin-right:10px;
  border-radius:10px;
  background: rgba(0,0,0,.14);
  vertical-align:middle;
}
body.profile .waSvg{ width:18px; height:18px; display:block; }
body.profile .waTxt{ vertical-align:middle; }