:root{--mid:#080D2A;--ink:#11162F;--snow:#FAFAFD;--soft:#F5EEFA;--pink:#F72B91;--violet:#8B24E8;--coral:#FF5A67;--grad:linear-gradient(135deg,var(--coral),var(--pink) 52%,var(--violet));--muted:#6f758d}*{box-sizing:border-box}html{font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--snow)}body{margin:0;background:radial-gradient(circle at 10% 0,rgba(247,43,145,.10),transparent 25rem),radial-gradient(circle at 90% 8%,rgba(139,36,232,.10),transparent 26rem),var(--snow);min-height:100vh}a{text-decoration:none;color:inherit}.shell{width:min(1100px,calc(100% - 34px));margin:auto}header{position:sticky;top:0;z-index:10;background:rgba(250,250,253,.88);backdrop-filter:blur(16px);border-bottom:1px solid rgba(17,22,47,.06)}.nav{height:72px;display:flex;justify-content:space-between;align-items:center}.nav nav{display:flex;gap:20px;align-items:center}.brand{font-size:1.45rem;font-weight:900;letter-spacing:-.04em;display:flex;gap:9px;align-items:center}.brand b{display:grid;place-items:center;width:34px;height:34px;border-radius:12px;background:var(--grad);color:#fff}.btn{display:inline-flex;justify-content:center;align-items:center;border:0;border-radius:999px;padding:14px 20px;background:var(--grad);color:#fff;font-weight:850;cursor:pointer;box-shadow:0 12px 28px rgba(247,43,145,.22)}.small{padding:10px 15px}.ghost{background:#fff;color:var(--ink);box-shadow:none;border:1px solid #e3e4ec}.hero{padding:85px 0;display:grid;grid-template-columns:1.08fr .92fr;gap:52px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:.13em;font-size:.76rem;color:var(--pink);font-weight:900}h1,h2{letter-spacing:-.05em}h1{font-size:clamp(3.3rem,8vw,6.3rem);line-height:.92;margin:12px 0 24px}h2{font-size:2rem;margin:8px 0 16px}.grad{background:var(--grad);-webkit-background-clip:text;background-clip:text;color:transparent}.lead{font-size:1.15rem;line-height:1.7;color:#5f657c}.actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px}.trust{color:var(--muted);display:flex;gap:15px;flex-wrap:wrap;margin-top:22px}.card{background:rgba(255,255,255,.9);border:1px solid rgba(17,22,47,.07);border-radius:28px;box-shadow:0 22px 58px rgba(17,22,47,.10);padding:26px}.demo{transform:rotate(2deg)}.demo-photo{aspect-ratio:4/5;border-radius:22px;background:linear-gradient(150deg,#ffcadf,#caafff 60%,#8d73e8);display:flex;align-items:end;padding:22px;color:#fff;font-size:1.8rem;font-weight:900}.badges{display:flex;gap:8px;flex-wrap:wrap;margin-top:14px}.badge{padding:8px 11px;border-radius:999px;background:var(--soft);font-size:.85rem;font-weight:750}.auth{padding:60px 0;display:grid;place-items:center}.auth .card{width:min(580px,100%)}.auth h1{font-size:2.7rem;line-height:1;margin-bottom:10px}.row{display:grid;gap:7px;margin:17px 0}.row label{font-weight:800}.row input,.row select,.row textarea{width:100%;padding:14px 15px;border:1px solid #dadce7;border-radius:15px;background:#fff;color:var(--ink);font:inherit}.checks{display:flex;gap:10px;align-items:flex-start;color:#5c6279;font-size:.93rem}.errors{background:#fff0f3;border:1px solid #ffc4d2;color:#8f1d3a;padding:14px 16px;border-radius:15px}.progress{height:8px;background:#ececf4;border-radius:99px;overflow:hidden;margin:20px 0 28px}.progress span{display:block;height:100%;background:var(--grad)}.chips{display:flex;gap:9px;flex-wrap:wrap}.chip input{position:absolute;opacity:0}.chip span{display:inline-flex;padding:10px 13px;border:1px solid #dddfea;border-radius:999px;background:#fff;font-weight:750;cursor:pointer}.chip input:checked+span{background:var(--soft);border-color:#c795eb;color:#6b1daf}.dash{padding:50px 0}.empty{padding:60px 25px;text-align:center;background:linear-gradient(135deg,rgba(255,90,103,.08),rgba(139,36,232,.08));border:1px dashed rgba(139,36,232,.3);border-radius:28px}.muted{color:var(--muted)}footer{margin-top:70px;border-top:1px solid rgba(17,22,47,.06);padding:28px 0}.foot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;color:var(--muted)}@media(max-width:760px){.hero{grid-template-columns:1fr;padding-top:55px}.nav nav>a:not(.btn){display:none}h1{font-size:3.5rem}}


/* ZAYLU Brand Assets – Update 0.2 */
.brand-image{display:flex;align-items:center;height:52px;width:158px;overflow:hidden}
.brand-image img{display:block;width:158px;height:auto;mix-blend-mode:multiply}
.footer-brand{display:flex;align-items:center;width:132px;height:42px;overflow:hidden}
.footer-brand img{display:block;width:132px;height:auto;mix-blend-mode:multiply}
.hero-brand{position:relative;overflow:hidden}
.hero-brand::before{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 82% 40%,rgba(139,36,232,.16),transparent 25rem),
  radial-gradient(circle at 70% 65%,rgba(247,43,145,.13),transparent 23rem);pointer-events:none}
.hero-brand .hero{position:relative;z-index:1}
.hero-copy{max-width:650px}
.hero-brand-card{min-height:455px;border-radius:34px;background:
  radial-gradient(circle at 50% 45%,rgba(139,36,232,.20),transparent 45%),
  linear-gradient(145deg,#080D2A,#111638 62%,#17103b);
  box-shadow:0 28px 75px rgba(8,13,42,.22);display:flex;flex-direction:column;
  justify-content:center;align-items:center;padding:42px 34px;overflow:hidden}
.hero-brand-logo{width:min(100%,620px);height:auto;display:block;filter:drop-shadow(0 18px 30px rgba(0,0,0,.22))}
.hero-brand-line{margin-top:18px;color:#fff;font-weight:800;letter-spacing:.08em;text-transform:uppercase;font-size:.78rem}
.hero-brand-line span{color:var(--pink);margin-right:7px}
.logo-strip{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:-24px;position:relative;z-index:2}
.logo-strip>div{background:#fff;border:1px solid rgba(17,22,47,.07);box-shadow:0 16px 40px rgba(17,22,47,.07);border-radius:20px;padding:18px 20px}
.logo-strip strong,.logo-strip span{display:block}.logo-strip strong{font-size:.95rem}.logo-strip span{margin-top:4px;color:var(--muted);font-size:.84rem}
@media(max-width:760px){
  .brand-image{width:116px;height:42px}.brand-image img{width:116px}
  .hero-brand-card{min-height:330px;padding:28px 18px}
  .hero-brand-logo{width:100%}
  .logo-strip{grid-template-columns:1fr;margin-top:-8px}
}


/* ==========================================================
   ZAYLU 0.3 – Dating Core + Xarandor
   ========================================================== */

.desktop-nav{display:flex;gap:20px;align-items:center}
.mobile-app-nav{display:none}

.zaylu-footer{align-items:center}
.footer-zaylu{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.xarandor-owner{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:.82rem}
.xarandor-owner img{width:28px;height:28px;object-fit:contain}
.xarandor-owner strong{color:var(--ink);font-size:.88rem}

.notice{padding:13px 16px;border-radius:15px;margin:18px 0}
.notice.success{background:#eefaf3;border:1px solid #ccefd9;color:#17643a}

.profile-head,.discover-heading{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;margin-bottom:26px}
.profile-head h2,.discover-heading h2{font-size:clamp(2rem,4vw,3rem);margin-bottom:6px}
.profile-layout{display:grid;grid-template-columns:1.35fr .65fr;gap:22px}
.section-title{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.section-title h2{margin-bottom:0}
.photo-counter{display:inline-flex;align-items:center;justify-content:center;padding:8px 11px;border-radius:999px;background:var(--soft);font-size:.82rem;font-weight:850}
.photo-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:22px}
.photo-item{position:relative;overflow:hidden;border-radius:20px;background:#ececf4;aspect-ratio:4/5}
.photo-item img{width:100%;height:100%;object-fit:cover;display:block}
.photo-item.primary{outline:3px solid var(--pink);outline-offset:-3px}
.primary-label{position:absolute;top:10px;left:10px;padding:7px 10px;border-radius:999px;background:rgba(8,13,42,.82);color:#fff;font-size:.72rem;font-weight:900;backdrop-filter:blur(8px)}
.photo-actions{position:absolute;left:8px;right:8px;bottom:8px;display:flex;gap:6px;flex-wrap:wrap}
.photo-actions form{margin:0}
.mini-button{border:0;border-radius:999px;padding:7px 9px;background:rgba(255,255,255,.92);font-size:.7rem;font-weight:850;color:var(--ink);cursor:pointer}
.mini-button.danger{color:#a52043}
.photo-empty{min-height:230px;margin-top:20px;border:1px dashed #d8d9e5;border-radius:20px;display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;padding:28px}
.photo-empty span{font-size:2.3rem}.photo-empty strong{font-size:1.1rem;margin-top:8px}.photo-empty p{color:var(--muted);max-width:330px}
.photo-upload{margin-top:18px;display:grid;gap:12px}
.upload-zone{display:grid;gap:4px;border:1px dashed #c9cbe0;border-radius:18px;padding:18px;background:linear-gradient(135deg,rgba(247,43,145,.04),rgba(139,36,232,.05));cursor:pointer}
.upload-zone span{color:var(--muted);font-size:.82rem}
.upload-zone input{margin-top:10px}
.profile-bio{line-height:1.7}
.profile-tip{margin-top:24px;padding:16px;border-radius:17px;background:var(--soft)}
.profile-tip p{margin-bottom:0;color:var(--muted);line-height:1.55}

.discover-page{padding:42px 0 65px}
.match-link{font-weight:850;color:var(--pink)}
.swipe-stage{width:min(520px,100%);margin:0 auto;perspective:1000px}
.swipe-card{position:relative;background:#fff;border-radius:32px;box-shadow:0 28px 70px rgba(17,22,47,.16);overflow:hidden;touch-action:pan-y;user-select:none;cursor:grab;will-change:transform}
.swipe-card.dragging{cursor:grabbing}
.discover-photo{position:relative;aspect-ratio:4/5;background:#e9e8f3;overflow:hidden}
.discover-photo>img{width:100%;height:100%;object-fit:cover;display:block;pointer-events:none}
.discover-placeholder{height:100%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:linear-gradient(145deg,#f7d6e9,#d9c5ff);color:#fff}
.discover-placeholder span{font-size:6rem;font-weight:900;text-shadow:0 8px 30px rgba(60,25,100,.15)}
.discover-placeholder small{font-weight:800}
.discover-photo-gradient{position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(8,13,42,.82))}
.discover-person{position:absolute;left:24px;right:24px;bottom:21px;color:#fff}
.discover-person h1{font-size:2.5rem;margin:0 0 4px;line-height:1}
.discover-person p{margin:0;opacity:.92;font-weight:650}
.discover-details{padding:20px 22px 24px}
.discover-bio{font-size:1rem;line-height:1.62;margin:12px 0}
.common-pill{display:inline-flex;padding:8px 11px;border-radius:999px;background:linear-gradient(135deg,rgba(255,90,103,.10),rgba(139,36,232,.10));font-size:.82rem;font-weight:850;color:#6b246f}
.swipe-actions{display:flex;justify-content:center;gap:30px;margin-top:22px}
.swipe-actions form{margin:0}
.swipe-button{width:68px;height:68px;border-radius:50%;border:0;background:#fff;box-shadow:0 12px 35px rgba(17,22,47,.15);font-size:2rem;font-weight:900;cursor:pointer;transition:transform .15s ease}
.swipe-button:hover{transform:translateY(-3px) scale(1.03)}
.swipe-button.pass{color:#657087}.swipe-button.like{color:var(--pink)}
.swipe-hint{text-align:center;color:var(--muted);font-size:.82rem}
.swipe-stamp{position:absolute;z-index:5;top:38px;padding:9px 14px;border:4px solid;border-radius:10px;font-size:1.45rem;font-weight:1000;letter-spacing:.04em;opacity:0;pointer-events:none}
.swipe-stamp-pass{right:22px;color:#747b90;transform:rotate(10deg)}
.swipe-stamp-like{left:22px;color:var(--pink);transform:rotate(-10deg)}
.swipe-card.drag-pass .swipe-stamp-pass,.swipe-card.drag-like .swipe-stamp-like{opacity:1}
.match-celebration{display:grid;grid-template-columns:auto 1fr;gap:22px;align-items:center;margin:0 auto 26px;width:min(720px,100%);padding:22px 25px;border-radius:26px;background:linear-gradient(135deg,#080D2A,#1c1248);color:#fff;box-shadow:0 20px 55px rgba(8,13,42,.22)}
.match-celebration h2{margin:3px 0 7px}.match-celebration p{margin-top:0;color:#dad8ec}.match-hearts{font-size:2.4rem;color:var(--pink);white-space:nowrap}
.discover-empty{width:min(680px,100%);margin:auto}.empty-icon{font-size:3rem}

.matches-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.match-card{background:#fff;border:1px solid rgba(17,22,47,.07);border-radius:24px;overflow:hidden;box-shadow:0 18px 46px rgba(17,22,47,.09)}
.match-photo{position:relative;aspect-ratio:1/1;background:#ececf4}
.match-photo img{width:100%;height:100%;object-fit:cover}
.match-placeholder{height:100%;display:grid;place-items:center;background:linear-gradient(145deg,#ffd3e5,#d5baff);font-size:4rem;font-weight:900;color:#fff}
.match-heart{position:absolute;right:12px;bottom:12px;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:var(--grad);color:#fff;box-shadow:0 8px 22px rgba(247,43,145,.30)}
.match-info{padding:18px}.match-info h3{font-size:1.25rem;margin:0 0 5px}.match-info p{margin:0 0 8px;color:var(--muted)}.match-info small{display:block;color:var(--muted);margin-bottom:14px}
.match-chat-disabled{width:100%;opacity:.65;cursor:not-allowed}

@media(max-width:900px){
  .profile-layout{grid-template-columns:1fr}
  .matches-grid{grid-template-columns:repeat(2,1fr)}
}

@media(max-width:760px){
  body:has(.mobile-app-nav){padding-bottom:78px}
  .desktop-nav a:not(.btn){display:none}
  .mobile-app-nav{position:fixed;display:grid;grid-template-columns:repeat(3,1fr);left:12px;right:12px;bottom:12px;z-index:50;background:rgba(8,13,42,.94);backdrop-filter:blur(16px);border:1px solid rgba(255,255,255,.10);border-radius:22px;padding:9px;box-shadow:0 18px 45px rgba(8,13,42,.28)}
  .mobile-app-nav a{display:flex;flex-direction:column;align-items:center;gap:2px;color:#fff;font-size:1.2rem}
  .mobile-app-nav small{font-size:.67rem;font-weight:750;color:#d9d8e8}
  .zaylu-footer{align-items:flex-start;flex-direction:column}
  .profile-head,.discover-heading{align-items:flex-start;flex-direction:column}
  .photo-grid{grid-template-columns:repeat(2,1fr)}
  .matches-grid{grid-template-columns:1fr}
  .match-celebration{grid-template-columns:1fr;text-align:center}
  .match-hearts{display:none}
}

@media(max-width:420px){
  .photo-grid{gap:8px}
  .discover-person h1{font-size:2.1rem}
  .swipe-button{width:62px;height:62px}
}


/* ==========================================================
   ZAYLU 0.4 – Public landing page photography
   ========================================================== */

.public-hero{
  position:relative;
  min-height:680px;
  display:flex;
  align-items:center;
  overflow:hidden;
  background:#080D2A;
}
.public-hero::before{
  content:"";
  position:absolute;
  inset:0;
  background:
    linear-gradient(90deg,rgba(8,13,42,.93) 0%,rgba(8,13,42,.83) 35%,rgba(8,13,42,.34) 64%,rgba(8,13,42,.14) 100%),
    url('/assets/img/zaylu-hero-couple.jpg') center/cover no-repeat;
}
.public-hero::after{
  content:"";
  position:absolute;
  inset:auto 0 0;
  height:180px;
  background:linear-gradient(transparent,rgba(8,13,42,.55));
  pointer-events:none;
}
.public-hero-inner{
  position:relative;
  z-index:2;
  width:min(1120px,calc(100% - 36px));
  margin:auto;
  padding:92px 0;
}
.public-hero-copy{
  width:min(620px,100%);
  color:#fff;
}
.public-hero-copy .eyebrow{color:#ff7aae}
.public-hero-copy h1{
  font-size:clamp(3.8rem,8vw,7.2rem);
  line-height:.9;
  margin:10px 0 22px;
}
.public-hero-copy .lead{color:rgba(255,255,255,.84)}
.public-hero-copy .trust{color:rgba(255,255,255,.72)}
.public-hero-copy .ghost{
  background:rgba(255,255,255,.11);
  border-color:rgba(255,255,255,.22);
  color:#fff;
  backdrop-filter:blur(10px);
}
.public-hero-owner{
  margin-top:22px;
  display:flex;
  align-items:center;
  gap:8px;
  color:rgba(255,255,255,.58);
  font-size:.78rem;
}
.public-hero-owner img{
  width:24px;
  height:24px;
  object-fit:contain;
  filter:brightness(0) invert(1);
  opacity:.75;
}

.story-section{
  padding:88px 0;
}
.story-wrap{
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:42px;
  align-items:center;
}
.story-photo{
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 28px 75px rgba(17,22,47,.14);
  min-height:520px;
}
.story-photo img{
  width:100%;
  height:100%;
  min-height:520px;
  object-fit:cover;
  display:block;
}
.story-copy h2{
  font-size:clamp(2.5rem,5vw,4.4rem);
  line-height:.98;
  margin:10px 0 20px;
}
.story-copy p{
  color:#61667d;
  font-size:1.08rem;
  line-height:1.75;
}
.story-points{
  display:grid;
  gap:12px;
  margin-top:24px;
}
.story-point{
  display:flex;
  gap:12px;
  align-items:flex-start;
  padding:15px 17px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  border-radius:18px;
  box-shadow:0 10px 26px rgba(17,22,47,.05);
}
.story-point strong{
  display:block;
  margin-bottom:2px;
}
.story-point span{
  color:#6e7388;
  font-size:.92rem;
}
.story-point-icon{
  width:34px;
  height:34px;
  border-radius:12px;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,#ff5a67,#f72b91 52%,#8b24e8);
  color:#fff;
  flex:0 0 auto;
}

.public-feature-section{
  padding:74px 0;
}
.public-feature-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.public-feature-card{
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  border-radius:24px;
  padding:26px;
  box-shadow:0 18px 50px rgba(17,22,47,.07);
}
.public-feature-card .feature-icon{
  font-size:1.8rem;
  margin-bottom:12px;
}
.public-feature-card h3{margin:0 0 8px}
.public-feature-card p{
  margin:0;
  color:#666b80;
  line-height:1.6;
}

.public-final-cta{
  margin:40px auto 20px;
  padding:52px 34px;
  border-radius:34px;
  text-align:center;
  background:
    radial-gradient(circle at 20% 20%,rgba(247,43,145,.22),transparent 20rem),
    radial-gradient(circle at 85% 40%,rgba(139,36,232,.25),transparent 22rem),
    #080D2A;
  color:#fff;
}
.public-final-cta h2{
  font-size:clamp(2.4rem,5vw,4.5rem);
  margin-bottom:12px;
}
.public-final-cta p{
  color:rgba(255,255,255,.74);
  max-width:660px;
  margin:0 auto 24px;
  line-height:1.7;
}

@media(max-width:850px){
  .public-hero{
    min-height:720px;
    align-items:flex-end;
  }
  .public-hero::before{
    background:
      linear-gradient(0deg,rgba(8,13,42,.98) 0%,rgba(8,13,42,.78) 45%,rgba(8,13,42,.18) 100%),
      url('/assets/img/zaylu-hero-couple.jpg') 58% center/cover no-repeat;
  }
  .public-hero-inner{padding:320px 0 62px}
  .story-wrap{grid-template-columns:1fr}
  .story-photo,.story-photo img{min-height:420px}
  .public-feature-grid{grid-template-columns:1fr}
}


/* ==========================================================
   ZAYLU 0.4.1 – Public landing page redesign
   ========================================================== */

body.public-home{
  background:
    radial-gradient(circle at 8% 0%,rgba(247,43,145,.09),transparent 26rem),
    radial-gradient(circle at 96% 16%,rgba(139,36,232,.10),transparent 30rem),
    #fbfbfd;
}

.home-hero{
  padding:54px 0 44px;
}

.home-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,.9fr) minmax(480px,1.1fr);
  gap:58px;
  align-items:center;
}

.home-hero-copy{
  padding:30px 0;
}

.home-kicker{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:9px 13px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(17,22,47,.08);
  box-shadow:0 10px 28px rgba(17,22,47,.05);
  color:#6d2a74;
  font-weight:850;
  font-size:.8rem;
}

.home-kicker::before{
  content:"♥";
  color:var(--pink);
}

.home-hero-copy h1{
  font-size:clamp(4rem,7.4vw,7.4rem);
  line-height:.88;
  margin:22px 0 24px;
  letter-spacing:-.07em;
}

.home-hero-copy h1 .soft-line{
  display:block;
  color:#73788d;
  font-size:.43em;
  letter-spacing:-.04em;
  margin-bottom:.22em;
}

.home-hero-copy .lead{
  max-width:600px;
  font-size:1.12rem;
}

.home-hero-copy .actions{
  margin-top:30px;
}

.home-trust{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:24px;
}

.home-trust span{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  color:#666c81;
  font-size:.8rem;
  font-weight:750;
}

.home-hero-visual{
  position:relative;
}

.home-photo-frame{
  position:relative;
  border-radius:36px;
  overflow:hidden;
  background:#eeeef5;
  box-shadow:0 35px 90px rgba(17,22,47,.14);
  border:1px solid rgba(17,22,47,.06);
}

.home-photo-frame img{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:auto;
  object-fit:contain;
}

.home-photo-frame::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:inherit;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.32);
  pointer-events:none;
}

.home-floating-card{
  position:absolute;
  left:-28px;
  bottom:28px;
  width:min(300px,72%);
  padding:17px 18px;
  border-radius:22px;
  background:rgba(255,255,255,.92);
  backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.72);
  box-shadow:0 18px 48px rgba(17,22,47,.14);
}

.home-floating-card strong{
  display:block;
  font-size:1rem;
  margin-bottom:4px;
}

.home-floating-card span{
  color:#70758a;
  font-size:.82rem;
  line-height:1.45;
}

.home-floating-pill{
  position:absolute;
  right:18px;
  top:18px;
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border-radius:999px;
  color:#fff;
  background:rgba(8,13,42,.78);
  backdrop-filter:blur(12px);
  font-weight:800;
  font-size:.76rem;
}

.home-mini-nav{
  padding:12px 0 52px;
}

.home-mini-strip{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.home-mini-card{
  display:flex;
  align-items:flex-start;
  gap:13px;
  padding:20px;
  border-radius:23px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 14px 40px rgba(17,22,47,.05);
}

.home-mini-icon{
  width:42px;
  height:42px;
  flex:0 0 auto;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,90,103,.13),rgba(247,43,145,.13),rgba(139,36,232,.14));
  color:var(--pink);
  font-size:1.25rem;
}

.home-mini-card strong{
  display:block;
  margin:1px 0 4px;
}

.home-mini-card span{
  color:#71768a;
  font-size:.84rem;
  line-height:1.45;
}

.home-social-section{
  padding:76px 0 82px;
}

.home-social-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:52px;
  align-items:center;
}

.home-social-photo{
  border-radius:32px;
  overflow:hidden;
  box-shadow:0 28px 70px rgba(17,22,47,.12);
  background:#eeeef5;
}

.home-social-photo img{
  display:block;
  width:100%;
  height:auto;
  object-fit:contain;
}

.home-social-copy h2{
  font-size:clamp(2.7rem,5vw,4.8rem);
  line-height:.96;
  margin:10px 0 18px;
}

.home-social-copy>p{
  color:#656a7e;
  font-size:1.05rem;
  line-height:1.72;
}

.home-social-list{
  display:grid;
  gap:12px;
  margin-top:25px;
}

.home-social-item{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:13px;
  align-items:start;
}

.home-social-item b{
  width:42px;
  height:42px;
  border-radius:14px;
  display:grid;
  place-items:center;
  background:var(--grad);
  color:#fff;
}

.home-social-item strong{
  display:block;
  margin-bottom:3px;
}

.home-social-item span{
  color:#74798c;
  font-size:.9rem;
  line-height:1.45;
}

.home-free-section{
  padding:76px 0;
}

.home-free-box{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:1fr auto;
  gap:38px;
  align-items:center;
  padding:44px 46px;
  border-radius:34px;
  background:#080D2A;
  color:#fff;
  box-shadow:0 28px 75px rgba(8,13,42,.18);
}

.home-free-box::before{
  content:"";
  position:absolute;
  width:420px;
  height:420px;
  border-radius:50%;
  right:-130px;
  top:-190px;
  background:radial-gradient(circle,rgba(247,43,145,.32),transparent 67%);
}

.home-free-box::after{
  content:"";
  position:absolute;
  width:330px;
  height:330px;
  border-radius:50%;
  left:38%;
  bottom:-230px;
  background:radial-gradient(circle,rgba(139,36,232,.34),transparent 68%);
}

.home-free-content,.home-free-actions{
  position:relative;
  z-index:1;
}

.home-free-content h2{
  font-size:clamp(2.4rem,4.5vw,4.2rem);
  line-height:.96;
  margin:8px 0 14px;
}

.home-free-content p{
  margin:0;
  max-width:700px;
  color:rgba(255,255,255,.72);
  line-height:1.68;
}

.home-free-actions{
  display:flex;
  flex-direction:column;
  gap:10px;
  min-width:200px;
}

.home-xarandor{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  padding:8px 0 42px;
  color:#8a8fa0;
  font-size:.78rem;
}

.home-xarandor strong{
  color:#4f556a;
}

@media(max-width:980px){
  .home-hero-grid{
    grid-template-columns:1fr;
    gap:28px;
  }
  .home-hero-copy{
    padding-bottom:0;
  }
  .home-hero-visual{
    width:100%;
  }
  .home-floating-card{
    left:16px;
  }
  .home-social-grid{
    grid-template-columns:1fr;
  }
  .home-mini-strip{
    grid-template-columns:1fr;
  }
  .home-free-box{
    grid-template-columns:1fr;
  }
  .home-free-actions{
    min-width:0;
    align-items:flex-start;
  }
}

@media(max-width:640px){
  .home-hero{
    padding-top:32px;
  }
  .home-hero-copy h1{
    font-size:clamp(3.4rem,18vw,5rem);
  }
  .home-photo-frame{
    border-radius:26px;
  }
  .home-floating-card{
    position:relative;
    left:auto;
    bottom:auto;
    margin:-18px 14px 0;
    width:auto;
  }
  .home-floating-pill{
    top:12px;
    right:12px;
  }
  .home-social-section{
    padding-top:56px;
  }
  .home-social-photo{
    border-radius:24px;
  }
  .home-free-box{
    padding:32px 24px;
    border-radius:27px;
  }
}


/* ==========================================================
   ZAYLU 0.5 – Chat, Activity & Safety
   ========================================================== */

.nav-with-badge{position:relative}
.nav-with-badge b{
  position:absolute;
  top:-9px;
  right:-14px;
  min-width:19px;
  height:19px;
  padding:0 5px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--grad);
  color:#fff;
  font-size:.64rem;
  line-height:1;
  box-shadow:0 5px 14px rgba(247,43,145,.25);
}
.mobile-five{grid-template-columns:repeat(5,1fr)}
.mobile-badge-link{position:relative}
.mobile-badge-link>b{
  position:absolute;
  top:1px;
  left:calc(50% + 7px);
  min-width:17px;
  height:17px;
  padding:0 4px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--pink);
  color:#fff;
  font-size:.58rem;
}

.notice.error{background:#fff0f3;border:1px solid #ffc6d3;color:#92203c}
.match-unread{
  position:absolute;
  top:12px;
  left:12px;
  min-width:30px;
  height:30px;
  border-radius:999px;
  display:grid;
  place-items:center;
  padding:0 8px;
  background:var(--pink);
  color:#fff;
  font-size:.75rem;
  font-weight:900;
  box-shadow:0 8px 20px rgba(247,43,145,.27);
}
.match-card-actions{display:flex;gap:8px;align-items:center}
.match-card-actions .btn{flex:1;padding:11px 13px}
.text-action{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f2f2f7;
  font-weight:900;
  letter-spacing:.08em;
}

.thread-list{
  display:grid;
  gap:10px;
  max-width:820px;
}
.thread-card{
  position:relative;
  display:grid;
  grid-template-columns:62px 1fr auto;
  gap:14px;
  align-items:center;
  padding:13px 15px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 10px 30px rgba(17,22,47,.05);
  transition:transform .14s ease,box-shadow .14s ease;
}
.thread-card:hover{
  transform:translateY(-1px);
  box-shadow:0 14px 34px rgba(17,22,47,.08);
}
.thread-avatar{
  width:62px;
  height:62px;
  border-radius:20px;
  overflow:hidden;
  background:linear-gradient(145deg,#ffd6e8,#d9c5ff);
}
.thread-avatar img{width:100%;height:100%;object-fit:cover}
.thread-avatar span{height:100%;display:grid;place-items:center;color:#fff;font-size:1.65rem;font-weight:900}
.thread-main{min-width:0}
.thread-topline{display:flex;justify-content:space-between;gap:16px;align-items:center}
.thread-topline strong{font-size:1rem}
.thread-topline time{font-size:.72rem;color:var(--muted);white-space:nowrap}
.thread-main p{
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  color:#73788b;
  margin:5px 0 0;
  font-size:.9rem;
}
.thread-unread{
  min-width:27px;
  height:27px;
  padding:0 7px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--grad);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
}

.chat-shell{
  width:min(920px,calc(100% - 24px));
  margin:28px auto 48px;
}
.chat-card{
  height:min(760px,calc(100vh - 150px));
  min-height:560px;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  border:1px solid rgba(17,22,47,.08);
  box-shadow:0 28px 75px rgba(17,22,47,.12);
}
.chat-header{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  gap:12px;
  align-items:center;
  padding:14px 16px;
  border-bottom:1px solid rgba(17,22,47,.07);
}
.chat-back,.chat-safety{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f4f4f8;
  font-weight:900;
}
.chat-person{display:flex;align-items:center;gap:11px;min-width:0}
.chat-person strong,.chat-person small{display:block}
.chat-person small{
  color:var(--muted);
  font-size:.74rem;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.chat-avatar{
  width:46px;
  height:46px;
  border-radius:15px;
  overflow:hidden;
  flex:0 0 auto;
  background:linear-gradient(145deg,#ffd6e8,#d9c5ff);
}
.chat-avatar img{width:100%;height:100%;object-fit:cover}
.chat-avatar span{height:100%;display:grid;place-items:center;color:#fff;font-weight:900}
.chat-match-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:9px 14px;
  background:linear-gradient(135deg,rgba(255,90,103,.07),rgba(139,36,232,.07));
  color:#71758a;
  font-size:.76rem;
  text-align:center;
}
.chat-match-note span{color:var(--pink)}
.chat-errors{
  padding:10px 16px;
  background:#fff0f3;
  color:#92203c;
  font-size:.86rem;
}
.chat-feed{
  min-height:0;
  overflow-y:auto;
  padding:22px 22px 15px;
  display:flex;
  flex-direction:column;
  gap:8px;
  background:
    radial-gradient(circle at 15% 10%,rgba(247,43,145,.035),transparent 18rem),
    #fafafd;
  scroll-behavior:smooth;
}
.chat-empty{
  margin:auto;
  display:flex;
  flex-direction:column;
  text-align:center;
  color:var(--muted);
}
.chat-empty strong{font-size:1.15rem;color:var(--ink);margin-bottom:4px}
.bubble-row{display:flex}
.bubble-row.mine{justify-content:flex-end}
.bubble-row.theirs{justify-content:flex-start}
.chat-bubble{
  max-width:min(72%,620px);
  padding:10px 13px 7px;
  border-radius:18px;
  line-height:1.48;
  overflow-wrap:anywhere;
}
.mine .chat-bubble{
  color:#fff;
  background:linear-gradient(135deg,#f72b91,#8b24e8);
  border-bottom-right-radius:6px;
}
.theirs .chat-bubble{
  color:var(--ink);
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 5px 18px rgba(17,22,47,.045);
  border-bottom-left-radius:6px;
}
.chat-bubble small{
  display:block;
  margin-top:4px;
  text-align:right;
  font-size:.64rem;
  opacity:.67;
}
.chat-compose{
  display:grid;
  grid-template-columns:1fr 46px;
  align-items:end;
  gap:10px;
  padding:12px 14px;
  border-top:1px solid rgba(17,22,47,.07);
  background:#fff;
}
.chat-compose textarea{
  width:100%;
  min-height:46px;
  max-height:130px;
  resize:none;
  padding:12px 15px;
  border:1px solid #dedfea;
  border-radius:18px;
  font:inherit;
  line-height:1.4;
  outline:none;
}
.chat-compose textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(247,43,145,.08);
}
.chat-compose button{
  width:46px;
  height:46px;
  border:0;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  font-size:1.2rem;
  cursor:pointer;
  box-shadow:0 9px 22px rgba(247,43,145,.22);
}

.notification-list{
  display:grid;
  gap:9px;
  max-width:820px;
}
.notification-card{
  position:relative;
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:13px;
  align-items:center;
  padding:14px 15px;
  border-radius:19px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
}
.notification-card.new{
  background:linear-gradient(135deg,rgba(255,255,255,1),rgba(247,43,145,.035));
}
.notification-icon{
  width:52px;
  height:52px;
  border-radius:17px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(135deg,rgba(255,90,103,.13),rgba(139,36,232,.13));
  color:var(--pink);
  font-size:1.2rem;
  font-weight:900;
}
.notification-icon img{width:100%;height:100%;object-fit:cover}
.notification-copy strong{display:block}
.notification-copy p{margin:3px 0;color:#6c7185;font-size:.88rem}
.notification-copy small{color:#999dad;font-size:.72rem}
.notification-card>i{
  width:9px;
  height:9px;
  border-radius:50%;
  background:var(--pink);
}

.safety-page{
  padding:42px 0 64px;
  width:min(760px,calc(100% - 36px));
}
.safety-card{padding:28px}
.safety-back{display:inline-flex;margin-bottom:22px;color:var(--muted);font-weight:750}
.safety-person{
  display:grid;
  grid-template-columns:78px 1fr;
  gap:17px;
  align-items:center;
  padding-bottom:24px;
  border-bottom:1px solid rgba(17,22,47,.07);
}
.safety-person h1{font-size:2.2rem;margin:2px 0 4px}
.safety-person p{margin:0;color:var(--muted)}
.safety-avatar{
  width:78px;
  height:78px;
  border-radius:24px;
  overflow:hidden;
  background:linear-gradient(145deg,#ffd6e8,#d9c5ff);
}
.safety-avatar img{width:100%;height:100%;object-fit:cover}
.safety-avatar span{height:100%;display:grid;place-items:center;color:#fff;font-size:2rem;font-weight:900}
.safety-section{padding:26px 0 4px}
.safety-section h2{font-size:1.45rem;margin-bottom:7px}
.safety-section>p{color:#6d7286;line-height:1.6}
.report-form{display:grid;gap:14px;margin-top:18px}
.report-form label{display:grid;gap:7px;font-weight:750}
.report-form label small{font-weight:500;color:var(--muted)}
.report-form select,.report-form textarea{
  width:100%;
  border:1px solid #dcddea;
  border-radius:15px;
  padding:12px 14px;
  font:inherit;
  background:#fff;
}
.report-success{
  margin-top:22px;
  padding:15px 17px;
  border-radius:16px;
  background:#eefaf3;
  border:1px solid #ccefd9;
  color:#17643a;
}
.report-success p{margin:4px 0 0}
.danger-zone{
  border-top:1px solid rgba(17,22,47,.07);
  margin-top:22px;
}
.danger-button{
  border:0;
  border-radius:999px;
  padding:12px 17px;
  background:#fff0f3;
  color:#a01f43;
  font-weight:850;
  cursor:pointer;
}

@media(max-width:760px){
  .chat-shell{
    width:100%;
    margin:0;
  }
  .chat-card{
    height:calc(100vh - 76px);
    min-height:0;
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }
  .chat-feed{padding:16px 12px 12px}
  .chat-bubble{max-width:84%}
  .thread-card{grid-template-columns:54px 1fr auto;padding:11px}
  .thread-avatar{width:54px;height:54px;border-radius:17px}
  .thread-topline time{display:none}
  .mobile-app-nav.mobile-five small{font-size:.58rem}
  .safety-page{width:min(100% - 22px,760px);padding-top:18px}
  .safety-card{padding:20px}
}


/* ==========================================================
   ZAYLU 0.6 – Profile editing, settings & admin
   ========================================================== */

.admin-nav-link{
  color:var(--violet)!important;
  font-weight:850;
}
.profile-head-actions{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
  justify-content:flex-end;
}
.edit-page{
  padding:46px 0 70px;
}
.edit-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:26px;
}
.edit-head h1{
  font-size:clamp(2.7rem,5vw,4.5rem);
  margin:5px 0 8px;
}
.edit-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.edit-wide{grid-column:1/-1}
.settings-section{
  padding:26px;
}
.settings-section h2{
  font-size:1.6rem;
  margin:5px 0 20px;
}
.field{
  display:grid;
  gap:7px;
  margin-bottom:16px;
  font-weight:750;
}
.field small{
  color:var(--muted);
  font-weight:500;
}
.field input,.field textarea,.field select{
  width:100%;
  border:1px solid #dbdce9;
  border-radius:15px;
  padding:12px 14px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  outline:none;
}
.field input:focus,.field textarea:focus,.field select:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(247,43,145,.08);
}
.triple-fields{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.interest-chips{
  margin-top:14px;
}
.edit-save{
  display:flex;
  justify-content:flex-end;
}
.settings-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:20px;
}
.settings-wide{grid-column:1/-1}
.settings-form{
  display:grid;
  gap:14px;
}
.toggle-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:16px;
  align-items:center;
  padding:14px 0;
  border-bottom:1px solid rgba(17,22,47,.07);
}
.toggle-row strong,.toggle-row span{display:block}
.toggle-row span{
  color:var(--muted);
  font-size:.84rem;
  margin-top:3px;
}
.toggle-row input{
  appearance:none;
  width:48px;
  height:28px;
  border-radius:999px;
  background:#d9dbe5;
  position:relative;
  cursor:pointer;
  transition:.18s ease;
}
.toggle-row input::after{
  content:"";
  position:absolute;
  width:22px;
  height:22px;
  top:3px;
  left:3px;
  border-radius:50%;
  background:#fff;
  box-shadow:0 3px 10px rgba(17,22,47,.18);
  transition:.18s ease;
}
.toggle-row input:checked{
  background:linear-gradient(135deg,var(--pink),var(--violet));
}
.toggle-row input:checked::after{
  transform:translateX(20px);
}

/* Admin */
.admin-shell{
  width:min(1440px,calc(100% - 28px));
  margin:24px auto 56px;
  display:grid;
  grid-template-columns:230px 1fr;
  gap:22px;
  align-items:start;
}
.admin-sidebar{
  position:sticky;
  top:94px;
  padding:18px;
  border-radius:24px;
  background:#080D2A;
  color:#fff;
  box-shadow:0 18px 50px rgba(8,13,42,.16);
}
.admin-brand{
  display:flex;
  align-items:center;
  gap:11px;
  padding:5px 5px 18px;
  border-bottom:1px solid rgba(255,255,255,.09);
}
.admin-brand>span{
  width:38px;height:38px;border-radius:13px;display:grid;place-items:center;
  background:var(--grad);font-weight:900;
}
.admin-brand strong,.admin-brand small{display:block}
.admin-brand small{color:#9ea3b8;font-size:.7rem;margin-top:2px}
.admin-sidebar nav{
  display:grid;
  gap:4px;
  margin-top:14px;
}
.admin-sidebar nav a{
  padding:11px 12px;
  border-radius:13px;
  color:#cfd2df;
  font-size:.88rem;
  font-weight:750;
}
.admin-sidebar nav a:hover,.admin-sidebar nav a.active{
  color:#fff;
  background:rgba(255,255,255,.09);
}
.admin-content{min-width:0}
.admin-page-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin:5px 0 22px;
}
.admin-page-head h1{
  font-size:clamp(2.2rem,4vw,3.4rem);
  margin:5px 0 6px;
}
.admin-page-head p{margin:0;color:var(--muted)}
.admin-stat-grid{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  gap:12px;
  margin-bottom:20px;
}
.admin-stat{
  padding:18px;
  border-radius:19px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 10px 30px rgba(17,22,47,.05);
}
.admin-stat span,.admin-stat strong{display:block}
.admin-stat span{color:var(--muted);font-size:.78rem;font-weight:750}
.admin-stat strong{font-size:2rem;margin-top:5px}
.admin-stat.alert strong{color:var(--pink)}
.admin-dashboard-grid{
  display:grid;
  grid-template-columns:1.35fr .65fr;
  gap:18px;
}
.admin-panel{
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  border-radius:22px;
  padding:20px;
  box-shadow:0 12px 38px rgba(17,22,47,.055);
  margin-bottom:18px;
}
.admin-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-bottom:14px;
}
.admin-panel-head h2{margin:0;font-size:1.25rem}
.admin-panel-head a{font-size:.82rem;color:var(--pink);font-weight:800}
.admin-table-wrap{overflow:auto}
.admin-table{
  width:100%;
  border-collapse:collapse;
  font-size:.84rem;
}
.admin-table th{
  text-align:left;
  padding:10px 9px;
  color:#7b8092;
  font-size:.7rem;
  text-transform:uppercase;
  letter-spacing:.06em;
  border-bottom:1px solid #ececf2;
}
.admin-table td{
  padding:12px 9px;
  border-bottom:1px solid #f0f0f4;
  vertical-align:middle;
}
.admin-table td small{display:block;color:var(--muted);margin-top:2px}
.status{
  display:inline-flex;
  padding:6px 9px;
  border-radius:999px;
  font-size:.68rem;
  font-weight:850;
  text-transform:uppercase;
  letter-spacing:.03em;
}
.status-active,.status-closed{background:#eaf8ef;color:#19633a}
.status-suspended,.status-reviewed{background:#fff5df;color:#8b6216}
.status-banned,.status-open{background:#fff0f3;color:#a02145}
.admin-report-list{display:grid;gap:8px}
.admin-report-list a{
  display:block;
  padding:12px 13px;
  border-radius:14px;
  background:#f7f7fa;
}
.admin-report-list strong,.admin-report-list span{display:block}
.admin-report-list span{color:var(--muted);font-size:.76rem;margin-top:3px}
.admin-empty{
  padding:26px;
  border-radius:16px;
  background:#f7f7fa;
  color:var(--muted);
  text-align:center;
}
.admin-filter{
  display:grid;
  grid-template-columns:1fr 180px auto;
  gap:10px;
  margin-bottom:16px;
}
.admin-filter input,.admin-filter select{
  border:1px solid #dcddea;
  border-radius:14px;
  padding:11px 13px;
  background:#fff;
  font:inherit;
}
.admin-user-grid{
  display:grid;
  grid-template-columns:1fr 300px;
  gap:18px;
}
.admin-profile-photos{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:8px;
}
.admin-profile-photos img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:14px;
}
.admin-profile-copy{margin-top:20px}
.admin-profile-copy h2{margin-bottom:8px}
.admin-profile-copy p{color:#666b7e;line-height:1.6}
.admin-profile-copy dl{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:9px;
  margin:18px 0 0;
}
.admin-profile-copy dl div{
  padding:12px;
  border-radius:13px;
  background:#f7f7fa;
}
.admin-profile-copy dt{font-size:.68rem;color:var(--muted);text-transform:uppercase;font-weight:800}
.admin-profile-copy dd{margin:4px 0 0;font-weight:750}
.admin-actions-panel form{margin:9px 0}
.admin-action{
  width:100%;
  border:0;
  border-radius:13px;
  padding:11px 13px;
  font-weight:850;
  cursor:pointer;
}
.admin-action.good{background:#eaf8ef;color:#19633a}
.admin-action.warn{background:#fff5df;color:#8b6216}
.admin-action.danger{background:#fff0f3;color:#a02145}
.admin-tabs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.admin-tabs a{
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid #e2e2eb;
  font-size:.8rem;
  font-weight:800;
}
.admin-tabs a.active{
  background:#080D2A;
  color:#fff;
  border-color:#080D2A;
}
.admin-report-cards{display:grid;gap:13px}
.admin-report-card{
  padding:20px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 10px 30px rgba(17,22,47,.05);
}
.admin-report-card.focus{
  outline:3px solid rgba(247,43,145,.25);
}
.admin-report-top{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:16px;
}
.admin-report-top h2{margin:8px 0 0;font-size:1.35rem}
.admin-report-top time{color:var(--muted);font-size:.75rem}
.admin-report-meta{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin:16px 0;
}
.admin-report-meta div{
  padding:12px;
  background:#f7f7fa;
  border-radius:13px;
}
.admin-report-meta span,.admin-report-meta strong{display:block}
.admin-report-meta span{font-size:.68rem;color:var(--muted);margin-bottom:3px}
.admin-report-details{
  padding:14px;
  border-radius:14px;
  background:#fff8fa;
  color:#6d4a57;
  line-height:1.55;
}
.admin-report-actions{
  display:flex;
  gap:9px;
  margin-top:14px;
}
.admin-report-actions form{flex:1}

@media(max-width:1050px){
  .admin-stat-grid{grid-template-columns:repeat(3,1fr)}
  .admin-dashboard-grid{grid-template-columns:1fr}
  .admin-user-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .edit-grid,.settings-grid{grid-template-columns:1fr}
  .edit-wide,.settings-wide{grid-column:auto}
  .admin-shell{grid-template-columns:1fr}
  .admin-sidebar{position:static}
  .admin-sidebar nav{grid-template-columns:repeat(4,1fr)}
  .admin-sidebar nav a{text-align:center;padding:9px 5px}
  .admin-sidebar nav a:last-child{display:none}
  .admin-stat-grid{grid-template-columns:repeat(2,1fr)}
  .admin-profile-photos{grid-template-columns:repeat(3,1fr)}
}
@media(max-width:620px){
  .edit-head,.admin-page-head{align-items:flex-start;flex-direction:column}
  .profile-head-actions{justify-content:flex-start}
  .triple-fields{grid-template-columns:1fr}
  .admin-filter{grid-template-columns:1fr}
  .admin-sidebar nav{grid-template-columns:repeat(2,1fr)}
  .admin-stat-grid{grid-template-columns:1fr 1fr}
  .admin-profile-photos{grid-template-columns:repeat(2,1fr)}
  .admin-profile-copy dl{grid-template-columns:1fr}
  .admin-report-meta{grid-template-columns:1fr}
  .admin-report-actions{flex-direction:column}
}


/* ==========================================================
   ZAYLU 0.7 – Account, e-mail verification & privacy
   ========================================================== */

.auth-inline-link{
  display:flex;
  justify-content:flex-end;
  margin:-4px 0 14px;
}
.auth-inline-link a{
  color:var(--violet);
  font-size:.84rem;
  font-weight:800;
}
.auth-foot{
  margin-top:18px;
}
.verify-card{
  text-align:center;
}
.verify-icon{
  width:70px;
  height:70px;
  border-radius:24px;
  display:grid;
  place-items:center;
  margin:0 auto 20px;
  background:linear-gradient(135deg,rgba(255,90,103,.13),rgba(139,36,232,.14));
  color:var(--pink);
  font-size:2rem;
  font-weight:900;
}
.verify-icon.success{
  background:#eaf8ef;
  color:#19633a;
}
.verify-help{
  margin-top:18px;
  font-size:.8rem;
}
.account-settings-actions{
  display:grid;
  gap:0;
  margin-top:6px;
  border-top:1px solid rgba(17,22,47,.07);
}
.account-setting-row{
  display:grid;
  grid-template-columns:1fr auto;
  gap:20px;
  align-items:center;
  padding:18px 0;
  border-bottom:1px solid rgba(17,22,47,.07);
}
.account-setting-row strong,.account-setting-row span{
  display:block;
}
.account-setting-row span{
  margin-top:4px;
  color:var(--muted);
  font-size:.86rem;
}
.account-setting-row.danger strong{
  color:#9c2040;
}
.danger-link-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:11px 15px;
  border-radius:999px;
  background:#fff0f3;
  color:#9c2040;
  font-weight:850;
}
.danger-account-page{
  padding:46px 0 70px;
  width:min(760px,calc(100% - 36px));
}
.danger-account-card{
  padding:32px;
}
.danger-account-card h1{
  font-size:clamp(2.7rem,6vw,4.6rem);
  margin:8px 0 16px;
}
.danger-account-icon{
  width:66px;
  height:66px;
  display:grid;
  place-items:center;
  border-radius:22px;
  background:#fff0f3;
  color:#9c2040;
  font-size:2rem;
  font-weight:1000;
  margin:8px 0 20px;
}
.delete-warning{
  display:grid;
  gap:5px;
  padding:17px;
  margin:24px 0;
  border-radius:17px;
  background:#f7f7fa;
}
.delete-warning span{
  color:var(--muted);
  font-size:.88rem;
}
.delete-warning a{
  color:var(--violet);
  font-weight:850;
  margin-top:4px;
}
.delete-account-form{
  margin-top:22px;
}
.delete-account-button{
  width:100%;
  border:0;
  border-radius:999px;
  padding:14px 18px;
  background:#9d2142;
  color:#fff;
  font-weight:900;
  cursor:pointer;
}
.delete-account-button:hover{
  background:#861a36;
}

@media(max-width:640px){
  .account-setting-row{
    grid-template-columns:1fr;
  }
  .account-setting-row .btn,
  .danger-link-button{
    justify-self:start;
  }
  .danger-account-card{
    padding:22px;
  }
}


/* ==========================================================
   ZAYLU 0.8 – Social Feed
   ========================================================== */

.social-feed-page{
  padding:32px 0 70px;
}
.feed-top{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:18px;
  margin-bottom:20px;
}
.feed-top h1{
  font-size:clamp(2.2rem,4vw,3.5rem);
  margin:4px 0 0;
}
.activity-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:10px 14px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(17,22,47,.08);
  color:var(--violet);
  font-size:.82rem;
  font-weight:850;
}
.feed-layout{
  display:grid;
  grid-template-columns:210px minmax(0,680px) 230px;
  justify-content:center;
  gap:22px;
  align-items:start;
}
.feed-side{
  position:sticky;
  top:92px;
  display:grid;
  gap:13px;
}
.feed-me-card,.feed-info-card,.feed-shortcuts{
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  border-radius:22px;
  box-shadow:0 11px 34px rgba(17,22,47,.05);
}
.feed-me-card{
  display:flex;
  flex-direction:column;
  align-items:center;
  padding:22px 15px;
  text-align:center;
}
.feed-me-card strong{margin-top:10px}
.feed-me-card>span{color:var(--muted);font-size:.78rem;margin-top:3px}
.feed-shortcuts{
  display:grid;
  padding:8px;
}
.feed-shortcuts a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:14px;
  font-size:.86rem;
  font-weight:750;
}
.feed-shortcuts a:hover{
  background:#f6f3fa;
}
.feed-shortcuts a span{
  width:24px;
  text-align:center;
  color:var(--pink);
  font-size:1.05rem;
}
.feed-info-card{
  padding:18px;
}
.feed-info-card h3{margin:5px 0 8px}
.feed-info-card p{
  margin:0;
  color:var(--muted);
  line-height:1.55;
  font-size:.85rem;
}
.feed-xarandor{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  color:#9a9dad;
  font-size:.72rem;
  padding:8px;
}
.feed-xarandor strong{color:#6c7184}
.feed-center{min-width:0}
.feed-avatar{
  width:46px;
  height:46px;
  border-radius:15px;
  flex:0 0 auto;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#ffd6e8,#d8c3ff);
  color:#fff;
  font-weight:900;
}
.feed-avatar.large{width:74px;height:74px;border-radius:24px;font-size:1.8rem}
.feed-avatar.mini{width:34px;height:34px;border-radius:11px;font-size:.8rem}
.feed-avatar img{width:100%;height:100%;object-fit:cover}
.composer{
  padding:18px;
  margin-bottom:16px;
}
.composer-head{
  display:flex;
  gap:12px;
  align-items:center;
  margin-bottom:14px;
}
.composer-head strong,.composer-head span{display:block}
.composer-head span{
  color:var(--muted);
  margin-top:3px;
  font-size:.79rem;
}
.composer textarea{
  width:100%;
  min-height:90px;
  max-height:240px;
  resize:none;
  border:0;
  outline:0;
  border-radius:17px;
  background:#f7f7fa;
  padding:14px 15px;
  color:var(--ink);
  font:inherit;
  line-height:1.55;
}
.post-preview{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:7px;
  margin-top:10px;
}
.post-preview:empty{display:none}
.post-preview img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:13px;
}
.composer-actions{
  display:flex;
  gap:10px;
  align-items:center;
  margin-top:12px;
}
.composer-photo{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border-radius:999px;
  background:#f5eef9;
  color:#6f2877;
  font-size:.82rem;
  font-weight:850;
  cursor:pointer;
}
.composer-photo input{display:none}
.composer-limit{
  color:var(--muted);
  font-size:.72rem;
}
.composer-actions .btn{margin-left:auto}
.post-list{
  display:grid;
  gap:16px;
}
.social-post{
  padding:0;
  overflow:hidden;
  scroll-margin-top:96px;
}
.post-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 17px 12px;
}
.post-author{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.post-author strong,.post-author span{display:block}
.post-author strong{font-size:.95rem}
.post-author span{
  color:var(--muted);
  font-size:.72rem;
  margin-top:2px;
}
.post-menu{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:#f5f5f8;
  color:#71768a;
  font-weight:900;
  letter-spacing:.08em;
  cursor:pointer;
}
.post-body{
  padding:3px 18px 16px;
  line-height:1.65;
  font-size:.98rem;
  overflow-wrap:anywhere;
}
.post-media{
  display:grid;
  gap:3px;
  background:#ececf2;
  overflow:hidden;
}
.post-media a{
  min-width:0;
  min-height:0;
}
.post-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.post-media-1{grid-template-columns:1fr}
.post-media-1 a{max-height:700px}
.post-media-1 img{max-height:700px;object-fit:contain;background:#101323}
.post-media-2{grid-template-columns:1fr 1fr}
.post-media-2 a{aspect-ratio:1/1}
.post-media-3{
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:1fr 1fr;
  height:520px;
}
.post-media-3 a:first-child{grid-row:1/3}
.post-media-4{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  height:520px;
}
.post-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:10px 17px;
  color:var(--muted);
  font-size:.75rem;
  border-bottom:1px solid rgba(17,22,47,.06);
}
.post-actions{
  display:grid;
  grid-template-columns:repeat(5,1fr);
  padding:5px 8px;
  border-bottom:1px solid rgba(17,22,47,.06);
}
.post-actions form{margin:0}
.reaction-button,.comment-jump{
  width:100%;
  min-height:43px;
  border:0;
  border-radius:12px;
  background:transparent;
  color:#72778a;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  cursor:pointer;
  font-weight:750;
}
.reaction-button:hover,.comment-jump:hover{
  background:#f7f4fa;
}
.reaction-button.active{
  background:linear-gradient(135deg,rgba(247,43,145,.08),rgba(139,36,232,.08));
  color:var(--pink);
}
.reaction-button span{font-size:1.1rem}
.reaction-button small,.comment-jump small{font-size:.68rem}
.comments{
  padding:11px 15px 15px;
  background:#fcfcfd;
}
.comment-list{
  display:grid;
  gap:9px;
  margin-bottom:11px;
}
.comment{
  display:flex;
  align-items:flex-start;
  gap:8px;
}
.comment-bubble{
  min-width:0;
  max-width:88%;
  padding:9px 11px;
  border-radius:15px;
  background:#f1f1f6;
}
.comment-bubble>div{
  display:flex;
  gap:10px;
  justify-content:space-between;
}
.comment-bubble strong{font-size:.78rem}
.comment-bubble time{
  color:#999dac;
  font-size:.62rem;
  white-space:nowrap;
}
.comment-bubble p{
  margin:3px 0 0;
  font-size:.84rem;
  line-height:1.48;
  overflow-wrap:anywhere;
}
.comment-form{
  display:grid;
  grid-template-columns:1fr 38px;
  gap:7px;
}
.comment-form input{
  width:100%;
  border:1px solid #e0e0e9;
  border-radius:999px;
  padding:10px 13px;
  background:#fff;
  outline:none;
  font:inherit;
  font-size:.84rem;
}
.comment-form input:focus{
  border-color:var(--pink);
}
.comment-form button{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  cursor:pointer;
}
.feed-empty{margin-top:16px}

/* Member profile */
.member-profile-page{
  padding:42px 0 70px;
}
.member-cover{
  display:grid;
  grid-template-columns:320px 1fr;
  gap:34px;
  align-items:center;
  padding:30px;
  border-radius:32px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 20px 60px rgba(17,22,47,.08);
}
.member-main-photo{
  aspect-ratio:4/5;
  border-radius:26px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#ffd6e8,#d8c3ff);
  color:#fff;
  font-size:5rem;
  font-weight:900;
}
.member-main-photo img{width:100%;height:100%;object-fit:cover}
.member-profile-copy h1{
  font-size:clamp(2.8rem,6vw,5rem);
  line-height:.95;
  margin:7px 0 9px;
}
.member-location{color:var(--muted);font-weight:750}
.member-bio{
  max-width:650px;
  line-height:1.7;
  color:#555b70;
}
.member-actions{
  display:flex;
  gap:9px;
  flex-wrap:wrap;
  margin-top:23px;
}
.member-section{
  padding:56px 0 0;
}
.member-section h2{
  font-size:clamp(2rem,4vw,3.1rem);
  margin:5px 0 20px;
}
.member-photo-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:10px;
}
.member-photo-grid img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  border-radius:20px;
}
.profile-feed-section{
  margin-top:22px;
  padding:24px;
}
.profile-post-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:12px;
  margin-top:18px;
}
.profile-post-card{
  overflow:hidden;
  border-radius:18px;
  background:#f8f8fb;
  border:1px solid rgba(17,22,47,.06);
}
.profile-post-card>img{
  width:100%;
  aspect-ratio:1/1;
  object-fit:cover;
  display:block;
}
.profile-post-card>div{
  padding:12px;
}
.profile-post-card p{
  margin:0 0 8px;
  color:#51566a;
  font-size:.84rem;
  line-height:1.45;
}
.profile-post-card span{
  color:var(--muted);
  font-size:.68rem;
}
.profile-post-empty{
  margin-top:18px;
  padding:28px;
  border-radius:18px;
  background:#f7f7fa;
  display:flex;
  align-items:flex-start;
  flex-direction:column;
  gap:5px;
}
.profile-post-empty span{
  color:var(--muted);
  margin-bottom:10px;
}

@media(max-width:1120px){
  .feed-layout{
    grid-template-columns:190px minmax(0,680px);
  }
  .feed-side-right{display:none}
}
@media(max-width:850px){
  .feed-layout{
    grid-template-columns:1fr;
  }
  .feed-side-left{display:none}
  .feed-center{
    width:min(680px,100%);
    margin:auto;
  }
  .member-cover{
    grid-template-columns:240px 1fr;
  }
}
@media(max-width:680px){
  .social-feed-page{
    padding:18px 0 38px;
  }
  .feed-top{
    padding:0 4px;
    align-items:center;
  }
  .activity-button{
    width:40px;
    height:40px;
    overflow:hidden;
    padding:0;
    justify-content:center;
    font-size:0;
  }
  .activity-button::before{
    content:"●";
    font-size:1rem;
  }
  .composer,.social-post{
    border-radius:20px;
  }
  .composer-head span{display:none}
  .post-actions{
    grid-template-columns:repeat(5,1fr);
  }
  .reaction-button small,.comment-jump small{display:none}
  .reaction-button span{font-size:1.18rem}
  .post-media-3,.post-media-4{height:390px}
  .member-cover{
    grid-template-columns:1fr;
    padding:18px;
  }
  .member-main-photo{
    width:min(100%,360px);
    margin:auto;
  }
  .member-photo-grid,.profile-post-grid{
    grid-template-columns:repeat(2,1fr);
  }
}
@media(max-width:420px){
  .post-head,.post-body{padding-left:13px;padding-right:13px}
  .comments{padding-left:10px;padding-right:10px}
  .post-media-3,.post-media-4{height:320px}
  .post-preview{grid-template-columns:repeat(2,1fr)}
}


/* ==========================================================
   ZAYLU 0.9 – World, Friends & multi-role connections
   ========================================================== */

.feed-tabs{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  width:min(680px,100%);
  margin:0 auto 18px;
}
.feed-tabs a{
  display:grid;
  grid-template-columns:42px 1fr;
  column-gap:11px;
  align-items:center;
  padding:14px 16px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 10px 30px rgba(17,22,47,.045);
}
.feed-tabs a>span{
  grid-row:1/3;
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:#f5eef9;
  font-size:1.15rem;
}
.feed-tabs a strong{font-size:.94rem}
.feed-tabs a small{color:var(--muted);font-size:.7rem;margin-top:1px}
.feed-tabs a.active{
  border-color:rgba(247,43,145,.25);
  background:linear-gradient(135deg,rgba(255,255,255,1),rgba(247,43,145,.035));
  box-shadow:0 13px 34px rgba(247,43,145,.07);
}
.composer-audience{
  display:flex;
  align-items:center;
  gap:7px;
  padding:5px 7px 5px 10px;
  border-radius:999px;
  background:#f4f4f8;
  font-size:.72rem;
  color:var(--muted);
}
.composer-audience select{
  border:0;
  outline:0;
  background:transparent;
  color:var(--ink);
  font:inherit;
  font-weight:800;
  cursor:pointer;
}

/* Connections */
.connections-page{
  padding:42px 0 72px;
}
.connections-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:26px;
}
.connections-head h1{
  font-size:clamp(2.8rem,5.5vw,5.2rem);
  line-height:.94;
  margin:6px 0 12px;
  max-width:850px;
}
.connection-manager{
  padding:26px;
  margin-bottom:40px;
}
.connection-person{
  display:flex;
  gap:15px;
  align-items:center;
  padding-bottom:22px;
  border-bottom:1px solid rgba(17,22,47,.07);
}
.connection-person h2{
  margin:3px 0 4px;
  font-size:1.8rem;
}
.connection-person>div>span{color:var(--muted)}
.connection-avatar{
  width:68px;
  height:68px;
  flex:0 0 auto;
  border-radius:21px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#ffd6e8,#d7c1ff);
  color:#fff;
  font-size:1.5rem;
  font-weight:900;
}
.connection-avatar.small{width:52px;height:52px;border-radius:17px;font-size:1rem}
.connection-avatar img{width:100%;height:100%;object-fit:cover}
.role-state-list{
  display:grid;
  gap:9px;
  padding:20px 0 4px;
}
.role-state{
  display:flex;
  align-items:center;
  gap:10px;
  min-height:58px;
  padding:10px 12px;
  border-radius:16px;
  background:#f8f8fb;
  flex-wrap:wrap;
}
.role-name{
  display:flex;
  align-items:center;
  gap:7px;
  min-width:170px;
}
.role-name>span{font-size:1.15rem}
.role-status{
  color:var(--muted);
  font-size:.78rem;
}
.role-status.pending{color:#8a6216}
.role-inline-form{
  display:flex;
  align-items:end;
  gap:8px;
  flex:1;
  flex-wrap:wrap;
}
.role-inline-form label{
  display:grid;
  gap:3px;
}
.role-inline-form label>span{
  font-size:.64rem;
  color:var(--muted);
  font-weight:750;
}
.role-inline-form select,.role-inline-form input,
.role-response select{
  border:1px solid #ddddea;
  border-radius:10px;
  background:#fff;
  padding:7px 8px;
  font:inherit;
  font-size:.75rem;
}
.role-response{
  display:flex;
  gap:7px;
  align-items:center;
  margin-left:auto;
}
.role-request-form{
  padding-top:25px;
  margin-top:18px;
  border-top:1px solid rgba(17,22,47,.07);
}
.connection-role-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:9px;
  margin-top:16px;
}
.connection-role-option{
  position:relative;
  min-height:96px;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:4px;
  padding:12px 8px;
  border:1px solid #e0e0e9;
  border-radius:17px;
  background:#fff;
  text-align:center;
  cursor:pointer;
}
.connection-role-option input{
  position:absolute;
  opacity:0;
}
.connection-role-option:has(input:checked){
  border-color:var(--pink);
  background:linear-gradient(135deg,rgba(255,90,103,.06),rgba(139,36,232,.07));
  box-shadow:0 0 0 3px rgba(247,43,145,.07);
}
.connection-role-option.disabled{
  opacity:.55;
  cursor:not-allowed;
}
.role-icon{font-size:1.4rem}
.connection-role-option strong{font-size:.8rem}
.connection-role-option small{font-size:.62rem;color:var(--muted)}
.role-request-options{
  display:grid;
  grid-template-columns:1fr 1fr auto;
  gap:12px;
  align-items:end;
  margin-top:16px;
}
.role-request-options .field{margin:0}
.connection-privacy-note{
  color:var(--muted);
  font-size:.75rem;
  line-height:1.5;
  margin:13px 0 0;
}
.connections-section{
  margin-top:42px;
}
.connections-section.compact{margin-top:32px}
.connections-section>h2,.connections-section-head h2{
  font-size:clamp(2rem,4vw,3rem);
  margin:5px 0 18px;
}
.connections-section-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:15px;
}
.connections-section-head>span{
  color:var(--muted);
  font-size:.8rem;
  margin-bottom:22px;
}
.connection-request-list,.connection-cards{
  display:grid;
  gap:11px;
}
.connection-request-card{
  display:grid;
  grid-template-columns:52px 1fr auto;
  gap:12px;
  align-items:center;
  padding:13px;
  border-radius:19px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
}
.connection-request-card strong,.connection-request-card span{display:block}
.connection-request-card span{font-size:.76rem;color:var(--muted);margin-top:3px}
.connection-card{
  display:grid;
  grid-template-columns:68px 1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:21px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 10px 30px rgba(17,22,47,.045);
}
.connection-card-copy>a>strong{font-size:1rem}
.connection-card-copy>span{display:block;color:var(--muted);font-size:.75rem;margin-top:2px}
.connection-role-badges{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:8px;
}
.connection-role-badges span,
.profile-connection-summary span{
  padding:6px 8px;
  border-radius:999px;
  background:#f5eef9;
  color:#682a70;
  font-size:.68rem;
  font-weight:800;
}
.connection-manage{
  padding:9px 11px;
  border-radius:999px;
  background:#f5f5f8;
  font-size:.74rem;
  font-weight:800;
}
.outgoing-role-list{
  display:flex;
  flex-wrap:wrap;
  gap:7px;
}
.outgoing-role-list a{
  padding:8px 10px;
  border-radius:999px;
  background:#fff5df;
  color:#7f5c1d;
  font-size:.75rem;
  font-weight:800;
}

/* Profile relationships */
.profile-connection-summary{
  margin:18px 0 0;
  padding:13px 14px;
  border-radius:16px;
  background:#f8f4fb;
}
.profile-connection-summary>strong{
  display:block;
  font-size:.76rem;
  margin-bottom:7px;
}
.profile-connection-summary>div{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
}
.profile-connection-summary span.pending{
  background:#fff5df;
  color:#7f5c1d;
}
.profile-relationship-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:18px;
}
.profile-relationship{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:11px;
  align-items:center;
  padding:13px;
  border-radius:17px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
}
.relationship-icon{
  width:44px;
  height:44px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,90,103,.10),rgba(139,36,232,.12));
  font-size:1.15rem;
}
.profile-relationship strong,.profile-relationship small{display:block}
.profile-relationship strong{font-size:.82rem}
.profile-relationship small{color:var(--muted);font-size:.68rem;margin-top:3px}

@media(max-width:900px){
  .connection-role-grid{grid-template-columns:repeat(3,1fr)}
  .role-request-options{grid-template-columns:1fr 1fr}
  .role-request-options .btn{grid-column:1/-1;justify-self:start}
}
@media(max-width:680px){
  .feed-tabs{gap:7px}
  .feed-tabs a{
    grid-template-columns:34px 1fr;
    padding:11px;
  }
  .feed-tabs a>span{
    width:34px;height:34px;border-radius:11px;
  }
  .feed-tabs a small{display:none}
  .composer-actions{flex-wrap:wrap}
  .composer-audience{order:1}
  .composer-photo{order:2}
  .composer-limit{display:none}
  .composer-actions .btn{order:3}
  .connections-head{align-items:flex-start;flex-direction:column}
  .connection-manager{padding:18px}
  .connection-role-grid{grid-template-columns:repeat(2,1fr)}
  .role-request-options{grid-template-columns:1fr}
  .role-request-options .btn{grid-column:auto}
  .role-state{align-items:flex-start}
  .role-inline-form,.role-response{width:100%;margin-left:0}
  .connection-request-card,.connection-card{
    grid-template-columns:52px 1fr;
  }
  .connection-manage,.connection-request-card .btn{
    grid-column:2;
    justify-self:start;
  }
  .profile-relationship-list{grid-template-columns:1fr}
}


/* ==========================================================
   ZAYLU 0.9.1 – Public posts, Friends as filter only
   ========================================================== */

.composer-audience{display:none!important}

.feed-tabs a:first-child>span{
  background:linear-gradient(135deg,rgba(255,90,103,.08),rgba(139,36,232,.10));
}
.feed-tabs a:last-child>span{
  background:linear-gradient(135deg,rgba(139,36,232,.09),rgba(247,43,145,.08));
}

.personal-feed-note{
  color:var(--muted);
  font-size:.78rem;
}


/* ==========================================================
   ZAYLU 1.0 – Messenger & Online status
   ========================================================== */

.messenger-home{
  padding:38px 0 72px;
  max-width:980px;
}
.messenger-page-head{
  display:flex;
  justify-content:space-between;
  gap:20px;
  align-items:flex-end;
  margin-bottom:23px;
}
.messenger-page-head h1{
  font-size:clamp(2.8rem,5vw,4.8rem);
  margin:5px 0 8px;
}
.online-panel{
  padding:18px;
  border-radius:24px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 12px 38px rgba(17,22,47,.055);
  margin-bottom:20px;
}
.online-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:15px;
  margin-bottom:15px;
}
.online-panel-head strong,.online-panel-head span{display:block}
.online-panel-head>div>span{
  color:var(--muted);
  font-size:.76rem;
  margin-top:2px;
}
.online-count{
  color:#24824b;
  background:#edf9f2;
  border-radius:999px;
  padding:7px 10px;
  font-size:.7rem;
  font-weight:850;
}
.online-list{
  display:flex;
  gap:14px;
  overflow-x:auto;
  padding:2px 2px 8px;
  scrollbar-width:thin;
}
.online-person{
  width:76px;
  flex:0 0 76px;
  text-align:center;
}
.online-person .messenger-avatar{
  margin:auto;
}
.online-person strong{
  display:block;
  margin-top:7px;
  font-size:.72rem;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}
.online-empty{
  color:var(--muted);
  font-size:.84rem;
  padding:10px 2px;
}
.messenger-avatar{
  position:relative;
  width:54px;
  height:54px;
  flex:0 0 auto;
  border-radius:18px;
  overflow:visible;
  display:grid;
  place-items:center;
  background:linear-gradient(145deg,#ffd6e8,#d7c1ff);
  color:#fff;
  font-weight:900;
}
.messenger-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:18px;
}
.messenger-avatar>span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
}
.messenger-avatar.online>i{
  position:absolute;
  right:-2px;
  bottom:-2px;
  width:15px;
  height:15px;
  border-radius:50%;
  background:#31b567;
  border:3px solid #fff;
}
.conversation-section{
  margin-top:26px;
}
.conversation-section-head h2{
  font-size:2rem;
  margin:4px 0 14px;
}
.conversation-list{
  display:grid;
  gap:9px;
}
.conversation-card{
  display:grid;
  grid-template-columns:54px 1fr auto;
  gap:13px;
  align-items:center;
  padding:13px 15px;
  border-radius:20px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 9px 27px rgba(17,22,47,.04);
  transition:transform .14s ease,box-shadow .14s ease;
}
.conversation-card:hover{
  transform:translateY(-1px);
  box-shadow:0 13px 32px rgba(17,22,47,.07);
}
.conversation-copy{min-width:0}
.conversation-title{
  display:flex;
  justify-content:space-between;
  gap:13px;
  align-items:center;
}
.conversation-title time{
  color:var(--muted);
  font-size:.68rem;
  white-space:nowrap;
}
.conversation-copy p{
  margin:4px 0 2px;
  color:#73788b;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
  font-size:.84rem;
}
.conversation-copy small{
  color:#9a9eae;
  font-size:.66rem;
}
.conversation-copy small.is-online,
.is-online{
  color:#25824b!important;
  font-weight:800;
}
.conversation-unread{
  min-width:28px;
  height:28px;
  padding:0 7px;
  border-radius:999px;
  display:grid;
  place-items:center;
  background:var(--grad);
  color:#fff;
  font-size:.72rem;
  font-weight:900;
}

/* Messenger chat */
.messenger-chat-shell{
  width:min(940px,calc(100% - 24px));
  margin:26px auto 50px;
}
.messenger-chat{
  height:min(780px,calc(100vh - 145px));
  min-height:580px;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  overflow:hidden;
  border-radius:30px;
  background:#fff;
  border:1px solid rgba(17,22,47,.08);
  box-shadow:0 28px 75px rgba(17,22,47,.12);
}
.messenger-chat-header{
  display:grid;
  grid-template-columns:42px 1fr 42px;
  align-items:center;
  gap:12px;
  padding:13px 16px;
  border-bottom:1px solid rgba(17,22,47,.07);
}
.messenger-chat-person{
  display:flex;
  align-items:center;
  gap:11px;
  min-width:0;
}
.messenger-chat-person strong,
.messenger-chat-person small{display:block}
.messenger-chat-person small{
  margin-top:2px;
  font-size:.72rem;
  color:var(--muted);
}
.messenger-context-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;
  padding:8px 13px;
  background:linear-gradient(135deg,rgba(255,90,103,.06),rgba(139,36,232,.06));
  color:#777b8d;
  font-size:.72rem;
  text-align:center;
}
.messenger-context-note span{color:var(--pink)}
.connection-message-cta{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin:18px 0 2px;
  padding:13px 14px;
  border-radius:17px;
  background:linear-gradient(135deg,rgba(255,90,103,.06),rgba(139,36,232,.07));
}
.connection-message-cta>span{
  font-size:.82rem;
  color:#666b7e;
}
.connection-card-actions{
  display:flex;
  gap:7px;
  align-items:center;
}
.connection-card-actions>a:first-child{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f5eef9;
}

@media(max-width:680px){
  .messenger-home{padding-top:20px}
  .messenger-page-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .messenger-chat-shell{
    width:100%;
    margin:0;
  }
  .messenger-chat{
    height:calc(100vh - 76px);
    min-height:0;
    border-radius:0;
    border-left:0;
    border-right:0;
    box-shadow:none;
  }
  .conversation-card{
    padding:11px;
  }
  .conversation-title time{display:none}
  .connection-message-cta{
    align-items:flex-start;
    flex-direction:column;
  }
  .connection-card-actions{
    grid-column:2;
    justify-self:start;
  }
}


/* ==========================================================
   ZAYLU 1.1 – People finder, feed comfort & moderation
   ========================================================== */

/* People */
.people-page{
  padding:42px 0 72px;
}
.people-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:22px;
  margin-bottom:22px;
}
.people-head h1{
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:.95;
  margin:5px 0 10px;
}
.people-search{
  display:grid;
  grid-template-columns:1.3fr 1fr auto;
  gap:12px;
  align-items:end;
  padding:18px;
}
.people-search label{
  display:grid;
  gap:6px;
}
.people-search label>span{
  font-size:.72rem;
  color:var(--muted);
  font-weight:800;
}
.people-search label small{font-weight:500}
.people-search input{
  width:100%;
  border:1px solid #dcddea;
  border-radius:14px;
  padding:11px 13px;
  background:#fff;
  font:inherit;
  outline:none;
}
.people-search input:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(247,43,145,.07);
}
.people-result-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:14px;
  margin:34px 0 16px;
}
.people-result-head h2{
  font-size:clamp(2rem,4vw,3rem);
  margin:4px 0 0;
}
.people-result-head>span{
  color:var(--muted);
  font-size:.78rem;
  margin-bottom:6px;
}
.people-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}
.person-card{
  display:grid;
  grid-template-columns:140px 1fr;
  min-width:0;
  overflow:hidden;
  border-radius:23px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 11px 34px rgba(17,22,47,.045);
}
.person-photo{
  position:relative;
  min-height:230px;
  display:grid;
  place-items:center;
  overflow:hidden;
  background:linear-gradient(145deg,#ffd6e8,#d8c3ff);
  color:#fff;
  font-size:3rem;
  font-weight:900;
}
.person-photo img{width:100%;height:100%;object-fit:cover}
.person-photo i{
  position:absolute;
  right:10px;
  bottom:10px;
  width:17px;
  height:17px;
  border-radius:50%;
  background:#31b567;
  border:3px solid #fff;
}
.person-copy{
  min-width:0;
  padding:16px;
  display:flex;
  flex-direction:column;
}
.person-copy h3{
  margin:0;
  font-size:1.2rem;
}
.person-copy>p{
  margin:4px 0 0;
  color:var(--muted);
  font-size:.78rem;
}
.person-statuses{
  display:flex;
  flex-wrap:wrap;
  gap:5px;
  margin-top:10px;
}
.person-statuses span{
  padding:5px 7px;
  border-radius:999px;
  background:#f5f3f8;
  color:#6f7180;
  font-size:.64rem;
  font-weight:800;
}
.person-statuses span.online{
  background:#edf9f2;
  color:#24824b;
}
.person-common{
  margin-top:13px;
}
.person-common>strong{
  display:block;
  font-size:.72rem;
}
.person-common>div{
  display:flex;
  flex-wrap:wrap;
  gap:4px;
  margin-top:6px;
}
.person-common span{
  padding:5px 7px;
  border-radius:999px;
  background:#f8eef7;
  color:#71326e;
  font-size:.62rem;
}
.person-actions{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-top:auto;
  padding-top:15px;
}
.person-actions .btn{
  padding:9px 11px;
  font-size:.72rem;
}

/* Post menus/edit */
.post-owner-menu{
  position:relative;
}
.post-menu-popover{
  position:absolute;
  z-index:25;
  top:43px;
  right:0;
  width:210px;
  display:none;
  padding:6px;
  border-radius:15px;
  background:#fff;
  border:1px solid rgba(17,22,47,.09);
  box-shadow:0 16px 45px rgba(17,22,47,.15);
}
.post-menu-popover.open{display:grid}
.post-menu-popover>a,
.post-menu-popover>button,
.post-menu-popover form>button{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:flex-start;
  border:0;
  background:transparent;
  padding:10px 11px;
  border-radius:10px;
  color:var(--ink);
  font:inherit;
  font-size:.78rem;
  font-weight:750;
  cursor:pointer;
}
.post-menu-popover>a:hover,
.post-menu-popover>button:hover,
.post-menu-popover form>button:hover{
  background:#f6f5f8;
}
.post-menu-popover .danger{color:#a02145}
.post-edit-form{
  margin:0 16px 15px;
  padding:13px;
  border-radius:16px;
  background:#f7f7fa;
}
.post-edit-form textarea{
  width:100%;
  border:1px solid #ddddea;
  border-radius:13px;
  padding:11px 12px;
  resize:vertical;
  font:inherit;
  outline:none;
}
.post-edit-form>div{
  display:flex;
  justify-content:flex-end;
  gap:7px;
  margin-top:9px;
}
.post-edited{
  padding:0 18px 8px;
  color:#9b9ead;
  font-size:.65rem;
  font-style:italic;
}
.comment-top>span{
  display:flex;
  align-items:center;
  gap:5px;
}
.comment-mini-form{display:inline}
.comment-mini-form button,
.comment-report{
  width:21px;
  height:21px;
  border:0;
  border-radius:50%;
  display:grid;
  place-items:center;
  background:transparent;
  color:#999dac;
  font-size:.72rem;
  cursor:pointer;
}
.comment-mini-form button:hover,
.comment-report:hover{
  background:#e4e4ea;
  color:#5f6374;
}

/* Lightbox */
body.lightbox-open{overflow:hidden}
.zaylu-lightbox[hidden]{display:none}
.zaylu-lightbox{
  position:fixed;
  z-index:9999;
  inset:0;
  display:grid;
  grid-template-columns:70px minmax(0,1fr) 70px;
  align-items:center;
  background:rgba(5,8,24,.94);
  backdrop-filter:blur(12px);
}
.zaylu-lightbox figure{
  width:min(1100px,100%);
  height:min(86vh,900px);
  margin:auto;
  display:grid;
  grid-template-rows:1fr auto;
  place-items:center;
}
.zaylu-lightbox img{
  max-width:100%;
  max-height:100%;
  object-fit:contain;
  border-radius:12px;
  box-shadow:0 24px 80px rgba(0,0,0,.35);
}
.zaylu-lightbox figcaption{
  color:#c8cad5;
  font-size:.75rem;
  margin-top:11px;
}
.lightbox-close,
.lightbox-prev,
.lightbox-next{
  border:0;
  cursor:pointer;
  color:#fff;
  background:rgba(255,255,255,.08);
  backdrop-filter:blur(8px);
}
.lightbox-close{
  position:absolute;
  top:18px;
  right:20px;
  width:44px;
  height:44px;
  border-radius:50%;
  font-size:1.65rem;
}
.lightbox-prev,.lightbox-next{
  width:52px;
  height:70px;
  margin:auto;
  border-radius:18px;
  font-size:2rem;
}

/* Content report */
.report-content-page{
  padding:44px 0 72px;
  width:min(760px,calc(100% - 36px));
}
.report-content-card{padding:30px}
.report-content-card h1{
  font-size:clamp(2.6rem,5vw,4.4rem);
  margin:6px 0 12px;
}
.reported-preview{
  margin:22px 0;
  padding:16px;
  border-radius:17px;
  background:#f7f7fa;
}
.reported-preview p{
  margin:5px 0 0;
  color:#616679;
  line-height:1.55;
}
.report-after-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:18px;
}

/* Admin content moderation */
.admin-report-filters{
  display:flex;
  justify-content:space-between;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:16px;
}
.admin-content-type{
  display:inline-flex;
  margin-left:5px;
  padding:6px 9px;
  border-radius:999px;
  background:#f0eef8;
  color:#674f84;
  font-size:.68rem;
  font-weight:850;
  text-transform:uppercase;
}
.admin-content-preview{
  padding:14px;
  margin:14px 0;
  border-radius:14px;
  background:#f7f7fa;
}
.admin-content-preview strong,
.admin-content-preview small{display:block}
.admin-content-preview p{
  margin:6px 0;
  line-height:1.55;
  color:#555a6c;
}
.admin-content-preview small{color:var(--muted)}

@media(max-width:900px){
  .people-grid{grid-template-columns:1fr}
}
@media(max-width:680px){
  .people-head{align-items:flex-start;flex-direction:column}
  .people-search{grid-template-columns:1fr}
  .person-card{grid-template-columns:105px 1fr}
  .person-photo{min-height:210px}
  .zaylu-lightbox{
    grid-template-columns:48px minmax(0,1fr) 48px;
  }
  .lightbox-prev,.lightbox-next{
    width:40px;
    height:58px;
    border-radius:14px;
  }
  .report-content-card{padding:21px}
}
@media(max-width:480px){
  .person-card{grid-template-columns:1fr}
  .person-photo{
    min-height:0;
    aspect-ratio:16/10;
  }
}


/* ==========================================================
   ZAYLU 1.2 – Personal feeds, suggestions & messenger search
   ========================================================== */

.personal-feed-section{
  width:min(760px,100%);
  margin-left:auto;
  margin-right:auto;
}
.personal-feed-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:14px;
  margin-bottom:18px;
}
.personal-feed-head>span{
  color:var(--muted);
  font-size:.72rem;
  margin-bottom:7px;
}
.personal-feed-list{
  display:grid;
  gap:16px;
}
.personal-feed-post{
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 11px 34px rgba(17,22,47,.045);
}
.personal-feed-post-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:15px 16px 12px;
}
.personal-feed-author{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}
.personal-feed-author strong,
.personal-feed-author span{
  display:block;
}
.personal-feed-author span{
  color:var(--muted);
  font-size:.7rem;
  margin-top:2px;
}
.personal-feed-open{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:#f5f5f8;
  color:#6d7182;
  font-weight:900;
}
.personal-feed-body{
  padding:4px 16px 15px;
  line-height:1.62;
}
.personal-feed-media{
  display:grid;
  gap:3px;
  background:#ececf2;
  overflow:hidden;
}
.personal-feed-media a{
  min-width:0;
  min-height:0;
}
.personal-feed-media img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.personal-feed-media-1{
  grid-template-columns:1fr;
}
.personal-feed-media-1 a{
  max-height:650px;
}
.personal-feed-media-1 img{
  max-height:650px;
  object-fit:contain;
  background:#101323;
}
.personal-feed-media-2{
  grid-template-columns:1fr 1fr;
}
.personal-feed-media-2 a{
  aspect-ratio:1/1;
}
.personal-feed-media-3{
  grid-template-columns:1.1fr .9fr;
  grid-template-rows:1fr 1fr;
  height:480px;
}
.personal-feed-media-3 a:first-child{
  grid-row:1/3;
}
.personal-feed-media-4{
  grid-template-columns:1fr 1fr;
  grid-template-rows:1fr 1fr;
  height:480px;
}
.personal-feed-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  padding:11px 16px;
  color:var(--muted);
  font-size:.72rem;
  border-top:1px solid rgba(17,22,47,.06);
}
.profile-feed-full{
  width:min(780px,100%);
  margin-left:auto;
  margin-right:auto;
}
.own-personal-feed{
  margin-top:18px;
}

/* Feed people suggestions */
.feed-suggestions-card{
  padding:15px;
}
.feed-suggestions-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}
.feed-suggestions-head a{
  color:var(--violet);
  font-size:.7rem;
  font-weight:850;
}
.feed-suggestion-list{
  display:grid;
  gap:9px;
}
.feed-suggestion-person{
  display:grid;
  grid-template-columns:34px 1fr;
  gap:9px;
  align-items:center;
  padding:6px 0;
}
.feed-suggestion-person strong,
.feed-suggestion-person span{
  display:block;
}
.feed-suggestion-person strong{
  font-size:.76rem;
}
.feed-suggestion-person span{
  margin-top:2px;
  color:var(--muted);
  font-size:.62rem;
}

/* Messenger search */
.messenger-search-wrap{
  margin:0 0 12px;
}
.messenger-search-wrap input{
  width:100%;
  border:1px solid #dcdeea;
  border-radius:999px;
  padding:11px 15px;
  background:#fff;
  font:inherit;
  outline:none;
}
.messenger-search-wrap input:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(247,43,145,.07);
}

@media(max-width:680px){
  .personal-feed-section,
  .profile-feed-full{
    width:100%;
  }
  .personal-feed-media-3,
  .personal-feed-media-4{
    height:350px;
  }
}


/* ==========================================================
   ZAYLU 1.3 – Profile prompts, pinned posts & mutual friends
   ========================================================== */

.prompt-editor-page{
  padding:42px 0 74px;
  max-width:920px;
}
.prompt-editor-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:24px;
  margin-bottom:24px;
}
.prompt-editor-head h1{
  font-size:clamp(2.8rem,5vw,5rem);
  line-height:.95;
  margin:6px 0 10px;
}
.prompt-editor-form{
  display:grid;
  gap:14px;
}
.prompt-editor-card{
  position:relative;
  display:grid;
  grid-template-columns:1fr 1.35fr;
  gap:18px;
  padding:22px;
  overflow:hidden;
}
.prompt-slot{
  position:absolute;
  right:15px;
  top:10px;
  color:#ecebf1;
  font-size:3.2rem;
  font-weight:1000;
  letter-spacing:-.08em;
  pointer-events:none;
}
.prompt-editor-card label{
  display:grid;
  gap:7px;
  align-content:start;
  position:relative;
  z-index:1;
}
.prompt-editor-card label>span{
  color:var(--muted);
  font-size:.72rem;
  font-weight:850;
}
.prompt-editor-card select,
.prompt-editor-card textarea{
  width:100%;
  border:1px solid #ddddea;
  border-radius:15px;
  padding:11px 13px;
  background:#fff;
  color:var(--ink);
  font:inherit;
  outline:none;
}
.prompt-editor-card textarea{
  min-height:105px;
  resize:vertical;
  line-height:1.5;
}
.prompt-editor-card select:focus,
.prompt-editor-card textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(247,43,145,.07);
}
.prompt-editor-card small{
  color:var(--muted);
  font-size:.65rem;
  justify-self:end;
}
.prompt-editor-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:6px;
}
.prompt-editor-actions>span{
  color:var(--muted);
  font-size:.78rem;
}

.profile-prompt-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:11px;
  margin-top:18px;
}
.profile-prompt-card{
  min-height:170px;
  padding:18px;
  border-radius:20px;
  display:flex;
  flex-direction:column;
  justify-content:space-between;
  gap:18px;
  background:
    radial-gradient(circle at 100% 0%,rgba(247,43,145,.08),transparent 36%),
    linear-gradient(145deg,#fbf9fc,#f5f1fa);
  border:1px solid rgba(17,22,47,.06);
}
.profile-prompt-card>span{
  color:#7d7184;
  font-size:.76rem;
  line-height:1.4;
  font-weight:750;
}
.profile-prompt-card>strong{
  color:var(--ink);
  font-size:1.05rem;
  line-height:1.5;
  overflow-wrap:anywhere;
}
.public-prompts .profile-prompt-card{
  background:
    radial-gradient(circle at 100% 0%,rgba(255,90,103,.09),transparent 38%),
    #fff;
  box-shadow:0 10px 28px rgba(17,22,47,.04);
}

.mutual-friend-list{
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}
.mutual-friend-card{
  min-width:120px;
  display:flex;
  align-items:center;
  gap:9px;
  padding:10px 12px;
  border-radius:17px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 8px 24px rgba(17,22,47,.035);
}
.mutual-friend-card strong{
  font-size:.78rem;
}
.mutual-friend-card .feed-avatar{
  width:38px;
  height:38px;
  border-radius:12px;
}

.personal-feed-head-actions{
  display:flex;
  align-items:center;
  gap:6px;
}
.pinned-badge{
  display:inline-flex;
  align-items:center;
  padding:6px 8px;
  border-radius:999px;
  background:#fff4d9;
  color:#7a5d18;
  font-size:.64rem;
  font-weight:850;
  white-space:nowrap;
}
.pin-button{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:#f5f5f8;
  cursor:pointer;
  opacity:.65;
}
.pin-button:hover,
.pin-button.active{
  opacity:1;
  background:#fff4d9;
}

@media(max-width:800px){
  .profile-prompt-grid{
    grid-template-columns:1fr;
  }
  .prompt-editor-card{
    grid-template-columns:1fr;
  }
}
@media(max-width:680px){
  .prompt-editor-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .prompt-editor-actions{
    align-items:flex-start;
    flex-direction:column;
  }
  .pinned-badge{
    display:none;
  }
}


/* ==========================================================
   ZAYLU 1.4 – Handles, mentions & post pages
   ========================================================== */

.username-input-wrap{
  display:grid;
  grid-template-columns:auto 1fr;
  align-items:center;
  overflow:hidden;
  border:1px solid #ddddea;
  border-radius:14px;
  background:#fff;
}
.username-input-wrap>span{
  padding-left:12px;
  color:var(--violet);
  font-weight:900;
}
.username-input-wrap input{
  border:0!important;
  box-shadow:none!important;
  padding-left:4px!important;
}
.member-handle,
.person-handle{
  color:var(--violet);
  font-size:.78rem;
  font-weight:800;
}
.member-handle{
  margin:5px 0 0;
}
.person-handle{
  display:block;
  margin-top:4px;
}
.mention-link{
  color:var(--violet);
  font-weight:850;
  text-decoration:none;
}
.mention-link:hover{
  text-decoration:underline;
}
.post-permalink-row{
  display:flex;
  justify-content:flex-end;
  padding:0 17px 8px;
}
.post-permalink-row a{
  color:#8a8e9f;
  font-size:.68rem;
  font-weight:750;
}
.post-permalink-row a:hover{
  color:var(--violet);
}

/* Post detail */
.post-detail-page{
  width:min(760px,calc(100% - 32px));
  padding:34px 0 72px;
}
.post-detail-top{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
  color:var(--muted);
  font-size:.75rem;
}
.post-detail-top a{
  color:var(--violet);
  font-weight:850;
}
.post-detail-card{
  overflow:hidden;
}
.post-detail-card .post-body{
  font-size:1.02rem;
}
.post-detail-comment-form{
  margin-bottom:14px;
}
.post-detail-comments{
  margin-top:8px;
}
.post-share-card{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:16px;
  margin-top:14px;
  padding:16px 18px;
}
.post-share-card strong,
.post-share-card span{
  display:block;
}
.post-share-card span{
  color:var(--muted);
  font-size:.75rem;
  margin-top:3px;
}
.post-share-card button{
  border:0;
  border-radius:999px;
  padding:10px 13px;
  background:#f5eef9;
  color:#702b78;
  font:inherit;
  font-size:.75rem;
  font-weight:850;
  cursor:pointer;
}

@media(max-width:680px){
  .post-share-card{
    align-items:flex-start;
    flex-direction:column;
  }
}


/* ==========================================================
   ZAYLU 1.5 – Explore, hashtags & saved posts
   ========================================================== */

.hashtag-link{
  color:#c22679;
  font-weight:850;
  text-decoration:none;
}
.hashtag-link:hover{text-decoration:underline}

.feed-discover-card{
  display:grid;
  grid-template-columns:42px 1fr;
  gap:10px;
  align-items:center;
}
.feed-discover-card>span{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:linear-gradient(135deg,rgba(255,90,103,.10),rgba(139,36,232,.12));
  color:var(--violet);
  font-size:1.25rem;
  font-weight:1000;
}
.feed-discover-card strong{display:block}
.feed-discover-card p{margin:3px 0 0!important}

/* Explore */
.explore-page{
  padding:42px 0 76px;
  max-width:1080px;
}
.explore-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:22px;
}
.explore-head h1{
  font-size:clamp(3rem,5.5vw,5.4rem);
  line-height:.94;
  margin:5px 0 10px;
}
.explore-search{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:10px;
  align-items:center;
  padding:10px 11px 10px 16px;
}
.explore-search>span{
  color:var(--muted);
  font-size:1.2rem;
}
.explore-search input{
  min-width:0;
  border:0;
  outline:0;
  background:transparent;
  padding:10px 4px;
  font:inherit;
  font-size:.95rem;
}
.trend-section{
  margin-top:32px;
}
.trend-section-head,
.explore-results-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:15px;
  margin-bottom:14px;
}
.trend-section-head h2,
.explore-results-head h2,
.explore-people h2{
  margin:4px 0 0;
  font-size:clamp(1.9rem,3.5vw,2.8rem);
}
.trend-section-head>a{
  color:var(--violet);
  font-size:.75rem;
  font-weight:850;
}
.trend-cloud{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
}
.trend-cloud a{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:9px 12px;
  border-radius:999px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  font-size:.78rem;
  font-weight:850;
}
.trend-cloud a span{
  color:var(--muted);
  font-size:.66rem;
}
.trend-cloud a.active{
  color:#fff;
  background:var(--grad);
  border-color:transparent;
}
.trend-cloud a.active span{color:#fff}
.explore-people{
  margin-top:34px;
}
.explore-people-list{
  display:flex;
  gap:10px;
  overflow-x:auto;
  padding:14px 2px 8px;
}
.explore-person{
  min-width:220px;
  display:grid;
  grid-template-columns:46px 1fr;
  gap:10px;
  align-items:center;
  padding:12px;
  border-radius:17px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
}
.explore-person strong,
.explore-person span{display:block}
.explore-person span{
  margin-top:3px;
  color:var(--muted);
  font-size:.66rem;
}
.explore-results{
  margin-top:42px;
}
.explore-results-head>span{
  margin-bottom:5px;
  color:var(--muted);
  font-size:.74rem;
}
.explore-post-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:13px;
}
.explore-post-card{
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 10px 30px rgba(17,22,47,.04);
}
.explore-post-cover{
  display:block;
  aspect-ratio:16/10;
  overflow:hidden;
  background:#11152a;
}
.explore-post-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.explore-post-copy{padding:14px}
.explore-post-author{
  display:flex;
  align-items:center;
  gap:9px;
}
.explore-post-author strong,
.explore-post-author span{display:block}
.explore-post-author strong{font-size:.79rem}
.explore-post-author span{
  color:var(--muted);
  font-size:.63rem;
  margin-top:2px;
}
.explore-post-copy>p{
  margin:13px 0;
  line-height:1.55;
  color:#4e5367;
  font-size:.86rem;
}
.explore-post-meta{
  display:flex;
  align-items:center;
  gap:10px;
  color:var(--muted);
  font-size:.68rem;
}
.explore-post-meta a{
  margin-left:auto;
  color:var(--violet);
  font-weight:850;
}

/* Saved */
.saved-page{
  max-width:940px;
  padding:42px 0 76px;
}
.saved-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:24px;
}
.saved-head h1{
  font-size:clamp(3rem,5vw,5rem);
  margin:5px 0 9px;
}
.saved-grid{
  display:grid;
  gap:14px;
}
.saved-post{
  display:grid;
  grid-template-columns:240px 1fr;
  overflow:hidden;
}
.saved-cover{
  min-height:225px;
  background:#11152a;
}
.saved-cover img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.saved-copy{
  padding:17px;
  display:flex;
  flex-direction:column;
}
.saved-author{
  display:flex;
  align-items:center;
  gap:9px;
}
.saved-author strong,
.saved-author span{display:block}
.saved-author span{
  color:var(--muted);
  font-size:.66rem;
  margin-top:2px;
}
.saved-copy>p{
  margin:15px 0;
  line-height:1.58;
}
.saved-meta{
  display:flex;
  justify-content:space-between;
  gap:12px;
  margin-top:auto;
  color:var(--muted);
  font-size:.68rem;
}
.saved-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:13px;
}
.post-detail-tools{
  display:flex;
  justify-content:flex-end;
  margin-top:12px;
}
.post-save-main{
  border:0;
  border-radius:999px;
  padding:10px 13px;
  background:#f5f4f8;
  color:#646878;
  font:inherit;
  font-size:.75rem;
  font-weight:850;
  cursor:pointer;
}
.post-save-main.active{
  background:#fff3cf;
  color:#785814;
}

@media(max-width:760px){
  .explore-head,
  .saved-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .explore-post-grid{grid-template-columns:1fr}
  .saved-post{grid-template-columns:1fr}
  .saved-cover{
    min-height:0;
    aspect-ratio:16/10;
  }
}
@media(max-width:560px){
  .explore-search{
    grid-template-columns:auto 1fr;
  }
  .explore-search .btn{
    grid-column:1/-1;
  }
}


/* ==========================================================
   ZAYLU 1.6 – Replies, comment reactions & reposts
   ========================================================== */

.share-action{
  text-decoration:none;
}
.shared-post-card{
  display:grid;
  grid-template-columns:minmax(150px,220px) 1fr;
  overflow:hidden;
  margin:8px 16px 15px;
  border:1px solid rgba(17,22,47,.10);
  border-radius:18px;
  background:#fafafd;
}
.shared-post-card>img{
  width:100%;
  height:100%;
  min-height:150px;
  object-fit:cover;
  background:#11152a;
}
.shared-post-card-copy{
  min-width:0;
  padding:14px;
}
.shared-post-card-author{
  display:flex;
  align-items:center;
  gap:9px;
}
.shared-post-card-author strong,
.shared-post-card-author span{
  display:block;
}
.shared-post-card-author strong{
  font-size:.78rem;
}
.shared-post-card-author span{
  margin-top:2px;
  color:var(--muted);
  font-size:.64rem;
}
.shared-post-card-copy>p{
  margin:12px 0 0;
  color:#515669;
  line-height:1.5;
  font-size:.82rem;
}
.shared-post-card.compact{
  grid-template-columns:120px 1fr;
}
.shared-post-card.compact>img{
  min-height:115px;
}
.shared-post-card.profile-share{
  margin:0 15px 14px;
}
.shared-post-card.profile-share .shared-post-card-copy>strong{
  font-size:.76rem;
}
.shared-post-missing{
  margin:8px 16px 15px;
  padding:14px;
  border-radius:15px;
  background:#f5f5f8;
  color:var(--muted);
  font-size:.76rem;
}

/* Share composer */
.share-page{
  max-width:850px;
  padding:42px 0 76px;
}
.share-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:20px;
  margin-bottom:22px;
}
.share-head h1{
  font-size:clamp(3rem,5vw,5rem);
  line-height:.95;
  margin:5px 0 10px;
}
.share-form{
  padding:22px;
}
.share-form>label{
  display:grid;
  gap:7px;
}
.share-form>label>span{
  font-size:.75rem;
  color:var(--muted);
  font-weight:800;
}
.share-form textarea{
  width:100%;
  min-height:110px;
  border:1px solid #ddddea;
  border-radius:16px;
  padding:13px;
  resize:vertical;
  font:inherit;
  outline:none;
}
.share-form textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(247,43,145,.07);
}
.shared-post-preview{
  overflow:hidden;
  margin-top:16px;
  border:1px solid rgba(17,22,47,.09);
  border-radius:19px;
  background:#fafafd;
}
.shared-post-author{
  display:flex;
  align-items:center;
  gap:9px;
  padding:13px;
}
.shared-post-author strong,
.shared-post-author span{
  display:block;
}
.shared-post-author span{
  color:var(--muted);
  font-size:.66rem;
  margin-top:2px;
}
.shared-post-cover{
  width:100%;
  max-height:430px;
  display:block;
  object-fit:cover;
}
.shared-post-preview>p{
  padding:14px;
  margin:0;
  line-height:1.55;
}
.share-form-actions{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:14px;
  margin-top:16px;
}
.share-form-actions>span{
  color:var(--muted);
  font-size:.76rem;
}

/* Comment threads */
.comment.comment-reply{
  margin-left:42px;
  position:relative;
}
.comment.comment-reply:before{
  content:"↳";
  position:absolute;
  left:-26px;
  top:11px;
  color:#a1a4b0;
  font-size:.8rem;
}
.comment-stack{
  min-width:0;
  flex:1;
}
.comment-social-actions{
  display:flex;
  align-items:center;
  gap:5px;
  padding:4px 7px 0;
}
.comment-social-actions form{
  margin:0;
}
.comment-social-actions button{
  border:0;
  background:transparent;
  color:#8b8f9f;
  padding:4px 6px;
  border-radius:999px;
  font:inherit;
  font-size:.68rem;
  font-weight:800;
  cursor:pointer;
}
.comment-social-actions button:hover,
.comment-social-actions button.active{
  background:#f4eef8;
  color:#762c79;
}
.comment-reply-form[hidden]{
  display:none!important;
}
.comment-reply-form{
  display:grid;
  grid-template-columns:1fr auto;
  gap:7px;
  margin:7px 0 4px;
}
.comment-reply-form input{
  min-width:0;
  border:1px solid #ddddea;
  border-radius:999px;
  padding:9px 12px;
  font:inherit;
  outline:none;
}
.comment-reply-form button{
  width:38px;
  height:38px;
  border:0;
  border-radius:50%;
  background:var(--grad);
  color:#fff;
  cursor:pointer;
}
.feed-comment-actions{
  display:flex;
  gap:10px;
  margin-top:5px;
}
.feed-comment-actions a{
  color:#8a8e9d;
  font-size:.64rem;
  font-weight:750;
}
.feed-comment-actions a:hover{
  color:var(--violet);
}
.post-detail-tools{
  gap:8px;
  flex-wrap:wrap;
}
.post-detail-tools>a{
  text-decoration:none;
}
.explore-shared-note,
.saved-shared-note{
  display:inline-flex;
  margin:0 0 12px;
  color:var(--violet);
  font-size:.7rem;
  font-weight:800;
}

@media(max-width:680px){
  .shared-post-card,
  .shared-post-card.compact{
    grid-template-columns:1fr;
  }
  .shared-post-card>img,
  .shared-post-card.compact>img{
    max-height:260px;
    min-height:0;
    aspect-ratio:16/10;
  }
  .share-head,
  .share-form-actions{
    align-items:flex-start;
    flex-direction:column;
  }
  .comment.comment-reply{
    margin-left:25px;
  }
}


/* ==========================================================
   ZAYLU 1.7 – Stories
   ========================================================== */

.stories-strip{
  width:min(100%,980px);
  margin:0 auto 18px;
  padding:14px 15px 12px;
}
.stories-strip-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:11px;
}
.stories-strip-head strong{
  font-size:.86rem;
}
.stories-strip-head a{
  color:var(--violet);
  font-size:.7rem;
  font-weight:850;
}
.stories-row{
  display:flex;
  gap:13px;
  overflow-x:auto;
  padding:2px 2px 8px;
  scrollbar-width:thin;
}
.story-bubble{
  width:76px;
  flex:0 0 76px;
  text-align:center;
}
.story-ring{
  position:relative;
  width:66px;
  height:66px;
  margin:auto;
  padding:3px;
  border-radius:50%;
  background:#dedee7;
}
.story-bubble.unseen .story-ring,
.story-bubble.my-story.has-story .story-ring{
  background:linear-gradient(135deg,#FF5A67,#F72B91,#8B24E8);
}
.story-bubble.seen .story-ring{
  background:#d9dae3;
}
.story-avatar{
  width:100%;
  height:100%;
  overflow:hidden;
  display:grid;
  place-items:center;
  border:3px solid #fff;
  border-radius:50%;
  background:linear-gradient(145deg,#ffd6e8,#d7c1ff);
  color:#fff;
  font-weight:900;
}
.story-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-ring>i{
  position:absolute;
  right:-1px;
  bottom:-1px;
  width:23px;
  height:23px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:var(--grad);
  border:3px solid #fff;
  color:#fff;
  font-style:normal;
  font-size:.8rem;
  font-weight:900;
}
.story-bubble strong,
.story-bubble small{
  display:block;
  overflow:hidden;
  white-space:nowrap;
  text-overflow:ellipsis;
}
.story-bubble strong{
  margin-top:7px;
  font-size:.68rem;
}
.story-bubble small{
  margin-top:2px;
  color:var(--muted);
  font-size:.58rem;
}
.story-bubble.unseen small{
  color:var(--pink);
  font-weight:850;
}

/* Story creator */
.create-story-page{
  max-width:960px;
  padding:42px 0 76px;
}
.create-story-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:22px;
}
.create-story-head h1{
  font-size:clamp(3rem,5vw,5rem);
  line-height:.95;
  margin:5px 0 10px;
}
.create-story-head-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.story-composer{
  display:grid;
  grid-template-columns:minmax(280px,390px) 1fr;
  gap:24px;
  padding:22px;
}
.story-preview{
  position:relative;
  min-height:570px;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:28px;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,90,103,.55),transparent 32%),
    radial-gradient(circle at 85% 20%,rgba(139,36,232,.48),transparent 35%),
    linear-gradient(160deg,#11152d,#24144b 65%,#7e226f);
  box-shadow:0 20px 55px rgba(17,22,47,.14);
}
.story-preview>img{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-preview:after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to top,rgba(5,7,18,.55),transparent 55%);
  pointer-events:none;
}
.story-preview-placeholder{
  position:relative;
  z-index:2;
  display:grid;
  justify-items:center;
  gap:6px;
  color:#fff;
  text-align:center;
}
.story-preview-placeholder>span{
  width:56px;
  height:56px;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:rgba(255,255,255,.15);
  font-size:1.6rem;
}
.story-preview-placeholder small{
  opacity:.72;
}
.story-preview-text{
  position:absolute;
  z-index:3;
  left:20px;
  right:20px;
  bottom:24px;
  color:#fff;
  font-size:1.12rem;
  line-height:1.45;
  font-weight:800;
  text-shadow:0 2px 12px rgba(0,0,0,.35);
  white-space:pre-wrap;
  overflow-wrap:anywhere;
}
.story-composer-fields{
  display:flex;
  flex-direction:column;
  gap:15px;
}
.story-file{
  display:block;
}
.story-file>span{
  display:inline-flex;
  padding:10px 13px;
  border-radius:999px;
  background:#f5eef9;
  color:#702b78;
  font-size:.78rem;
  font-weight:850;
  cursor:pointer;
}
.story-file input{
  display:none;
}
.story-composer-fields>label:not(.story-file){
  display:grid;
  gap:7px;
}
.story-composer-fields>label>span{
  color:var(--muted);
  font-size:.75rem;
  font-weight:850;
}
.story-composer textarea{
  width:100%;
  min-height:140px;
  border:1px solid #ddddea;
  border-radius:16px;
  padding:13px;
  resize:vertical;
  font:inherit;
  outline:none;
}
.story-composer textarea:focus{
  border-color:var(--pink);
  box-shadow:0 0 0 4px rgba(247,43,145,.07);
}
.story-composer label>small{
  color:var(--muted);
  font-size:.66rem;
}
.story-public-note{
  display:grid;
  grid-template-columns:38px 1fr;
  gap:10px;
  padding:13px;
  border-radius:16px;
  background:#f7f7fa;
}
.story-public-note>span{
  width:38px;
  height:38px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:#fff;
}
.story-public-note strong,
.story-public-note p{
  display:block;
}
.story-public-note p{
  margin:3px 0 0;
  color:var(--muted);
  font-size:.72rem;
  line-height:1.45;
}
.story-submit{
  align-self:flex-start;
  margin-top:auto;
}

/* Story viewer */
.story-viewer-page{
  min-height:calc(100vh - 110px);
  padding:18px;
  display:grid;
  place-items:center;
  background:#080b1c;
}
.story-viewer-shell{
  position:relative;
  width:min(470px,100%);
  height:min(820px,calc(100vh - 145px));
  min-height:610px;
  overflow:hidden;
  display:grid;
  grid-template-rows:auto auto 1fr auto;
  border-radius:28px;
  background:#11152c;
  box-shadow:0 32px 100px rgba(0,0,0,.45);
}
.story-progress{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(10px,1fr));
  gap:4px;
  padding:10px 11px 0;
}
.story-progress span{
  height:3px;
  border-radius:999px;
  background:rgba(255,255,255,.24);
}
.story-progress span.done,
.story-progress span.active{
  background:#fff;
}
.story-viewer-head{
  display:grid;
  grid-template-columns:36px 1fr 36px;
  gap:9px;
  align-items:center;
  padding:10px 12px;
  color:#fff;
}
.story-close,
.story-delete{
  width:36px;
  height:36px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.08);
  color:#fff;
  font:inherit;
  font-weight:900;
  cursor:pointer;
}
.story-owner{
  display:flex;
  align-items:center;
  gap:9px;
  min-width:0;
  color:#fff;
}
.story-owner-avatar{
  width:40px;
  height:40px;
  flex:0 0 auto;
  overflow:hidden;
  display:grid;
  place-items:center;
  border-radius:50%;
  background:linear-gradient(145deg,#ffd6e8,#d7c1ff);
  font-weight:900;
}
.story-owner-avatar img{
  width:100%;
  height:100%;
  object-fit:cover;
}
.story-owner strong,
.story-owner span{
  display:block;
}
.story-owner strong{
  font-size:.78rem;
}
.story-owner span{
  margin-top:2px;
  color:rgba(255,255,255,.65);
  font-size:.63rem;
}
.story-stage{
  position:relative;
  min-height:0;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:
    radial-gradient(circle at 15% 10%,rgba(255,90,103,.5),transparent 32%),
    radial-gradient(circle at 85% 18%,rgba(139,36,232,.5),transparent 35%),
    linear-gradient(160deg,#11152d,#251649 65%,#762167);
}
.story-stage>img{
  width:100%;
  height:100%;
  object-fit:contain;
  background:#080b18;
}
.story-caption{
  position:absolute;
  z-index:2;
  left:18px;
  right:18px;
  bottom:22px;
  padding:13px 14px;
  border-radius:16px;
  background:rgba(5,7,18,.48);
  backdrop-filter:blur(10px);
  color:#fff;
  line-height:1.5;
  font-size:.95rem;
  font-weight:750;
  overflow-wrap:anywhere;
}
.story-stage.text-only .story-caption{
  position:static;
  width:min(88%,390px);
  background:transparent;
  backdrop-filter:none;
  text-align:center;
  font-size:clamp(1.35rem,4vw,2rem);
  line-height:1.35;
}
.story-stage .mention-link,
.story-stage .hashtag-link{
  color:#fff;
  text-decoration:underline;
}
.story-nav{
  position:absolute;
  z-index:4;
  top:0;
  bottom:0;
  width:48px;
  display:grid;
  place-items:center;
  color:rgba(255,255,255,.75);
  font-size:2.2rem;
}
.story-nav-prev{left:0}
.story-nav-next{right:0}
.story-viewer-footer{
  min-height:60px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 13px;
  color:#fff;
}
.story-viewer-footer a,
.story-viewers-toggle{
  border:0;
  border-radius:999px;
  padding:9px 11px;
  background:rgba(255,255,255,.08);
  color:#fff;
  font:inherit;
  font-size:.7rem;
  font-weight:800;
  cursor:pointer;
}
.story-viewers-panel[hidden]{
  display:none!important;
}
.story-viewers-panel{
  position:absolute;
  z-index:20;
  inset:0;
  display:flex;
  flex-direction:column;
  justify-content:flex-end;
  background:rgba(3,5,14,.55);
  opacity:0;
  transition:opacity .18s ease;
}
.story-viewers-panel.open{
  opacity:1;
}
.story-viewers-panel-head,
.story-viewer-list,
.story-no-viewers{
  background:#fff;
}
.story-viewers-panel-head{
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  padding:16px 18px 12px;
  border-radius:24px 24px 0 0;
}
.story-viewers-panel-head strong,
.story-viewers-panel-head span{
  display:block;
}
.story-viewers-panel-head span{
  color:var(--muted);
  font-size:.68rem;
  margin-top:2px;
}
.story-viewers-panel-head button{
  width:34px;
  height:34px;
  border:0;
  border-radius:50%;
  background:#f2f2f6;
  cursor:pointer;
  font-size:1.2rem;
}
.story-viewer-list{
  max-height:45vh;
  overflow:auto;
  padding:0 12px 18px;
}
.story-viewer-list>a{
  display:grid;
  grid-template-columns:44px 1fr;
  gap:10px;
  align-items:center;
  padding:9px 6px;
}
.story-viewer-list strong,
.story-viewer-list span{
  display:block;
}
.story-viewer-list span{
  color:var(--muted);
  font-size:.65rem;
  margin-top:2px;
}
.story-no-viewers{
  padding:10px 18px 24px;
  color:var(--muted);
  font-size:.76rem;
}

@media(max-width:760px){
  .create-story-head{
    align-items:flex-start;
    flex-direction:column;
  }
  .story-composer{
    grid-template-columns:1fr;
  }
  .story-preview{
    min-height:0;
    aspect-ratio:9/14;
    max-height:620px;
  }
}
@media(max-width:560px){
  .story-viewer-page{
    padding:0;
  }
  .story-viewer-shell{
    width:100%;
    height:calc(100vh - 76px);
    min-height:0;
    border-radius:0;
  }
}


/* ==========================================================
   ZAYLU 1.8 – Story reactions, archive & profile rings
   ========================================================== */

.story-reactions{
  display:flex;
  align-items:center;
  gap:4px;
}
.story-reactions form{margin:0}
.story-reactions button{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border:0;
  border-radius:50%;
  background:rgba(255,255,255,.07);
  color:#fff;
  font-size:.95rem;
  cursor:pointer;
  transition:transform .12s ease,background .12s ease;
}
.story-reactions button:hover{
  transform:scale(1.08);
  background:rgba(255,255,255,.14);
}
.story-reactions button.active{
  background:rgba(247,43,145,.28);
  box-shadow:0 0 0 2px rgba(247,43,145,.28);
}

.story-archive-page{
  max-width:1040px;
  padding:42px 0 76px;
}
.story-archive-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  gap:20px;
  margin-bottom:20px;
}
.story-archive-head h1{
  font-size:clamp(3rem,5vw,5rem);
  line-height:.95;
  margin:5px 0 10px;
}
.story-archive-tabs{
  display:flex;
  gap:7px;
  flex-wrap:wrap;
  margin-bottom:20px;
}
.story-archive-tabs a{
  padding:8px 12px;
  border-radius:999px;
  background:#fff;
  color:#75798a;
  border:1px solid rgba(17,22,47,.07);
  font-size:.74rem;
  font-weight:850;
}
.story-archive-tabs a.active{
  background:var(--grad);
  color:#fff;
  border-color:transparent;
}
.story-archive-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:13px;
}
.story-archive-card{
  overflow:hidden;
  border-radius:22px;
  background:#fff;
  border:1px solid rgba(17,22,47,.07);
  box-shadow:0 10px 32px rgba(17,22,47,.04);
}
.story-archive-visual{
  position:relative;
  display:block;
  aspect-ratio:9/13;
  overflow:hidden;
  background:
    radial-gradient(circle at 20% 10%,rgba(255,90,103,.55),transparent 32%),
    radial-gradient(circle at 85% 20%,rgba(139,36,232,.5),transparent 35%),
    linear-gradient(160deg,#11152d,#251649 65%,#762167);
}
.story-archive-visual img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
}
.story-archive-text{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  padding:24px;
  color:#fff;
  text-align:center;
  font-size:1.15rem;
  line-height:1.45;
  font-weight:850;
}
.story-archive-state{
  position:absolute;
  top:10px;
  right:10px;
  padding:6px 8px;
  border-radius:999px;
  backdrop-filter:blur(8px);
  color:#fff;
  font-size:.62rem;
  font-weight:850;
}
.story-archive-state.active{background:rgba(37,130,75,.76)}
.story-archive-state.expired{background:rgba(8,13,42,.66)}
.story-archive-copy{padding:14px}
.story-archive-copy strong,
.story-archive-copy>span{display:block}
.story-archive-copy>span{
  margin-top:4px;
  color:var(--muted);
  font-size:.68rem;
}
.story-archive-copy>p{
  margin:10px 0;
  color:#555a6c;
  font-size:.78rem;
  line-height:1.5;
}
.story-archive-copy>a{
  display:inline-flex;
  margin-top:10px;
  color:var(--violet);
  font-size:.72rem;
  font-weight:850;
}
.story-archive-private{
  margin-top:10px!important;
  color:#878b9c!important;
}

/* Public profile story ring */
.member-main-photo.has-active-story{
  padding:4px;
  background:linear-gradient(135deg,#FF5A67,#F72B91,#8B24E8);
}
.member-main-photo.has-active-story .profile-story-ring{
  width:100%;
  height:100%;
  display:block;
  overflow:hidden;
  padding:3px;
  border-radius:inherit;
  background:#fff;
}
.member-main-photo.has-active-story .profile-story-ring img,
.member-main-photo.has-active-story .profile-story-ring>span{
  width:100%;
  height:100%;
  display:grid;
  place-items:center;
  object-fit:cover;
  border-radius:inherit;
}
.story-profile-btn{
  background:linear-gradient(135deg,rgba(255,90,103,.10),rgba(139,36,232,.12))!important;
  color:#74256f!important;
  border-color:rgba(139,36,232,.14)!important;
}

@media(max-width:850px){
  .story-archive-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:680px){
  .story-archive-head{
    align-items:flex-start;
    flex-direction:column;
  }
}
@media(max-width:500px){
  .story-archive-grid{grid-template-columns:1fr}
}