/* =====================================================================
   Zawj & Zawja — Theme
   Palette: Emerald green · White · Gold. Elegant, Islamic, premium.
   ===================================================================== */
:root{
  --green-900:#0b3d2e; --green-800:#0f5132; --green-700:#13684a;
  --green-600:#178060; --green-500:#1f9d6b; --green-400:#39b483;
  --gold-600:#b8860b; --gold-500:#d4af37; --gold-400:#e6c656;
  --ink:#102a22; --muted:#6b7d76; --line:#e6ede9;
  --bg:#f6faf8; --card:#ffffff; --white:#ffffff;
  --danger:#c0392b;
  --shadow-sm:0 1px 3px rgba(11,61,46,.06),0 1px 2px rgba(11,61,46,.04);
  --shadow:0 12px 32px rgba(11,61,46,.10),0 4px 8px rgba(11,61,46,.05);
  --shadow-lg:0 28px 60px rgba(11,61,46,.16),0 10px 20px rgba(11,61,46,.08);
  --radius:18px; --radius-sm:12px; --radius-lg:26px;
  --grad:linear-gradient(135deg,var(--green-700),var(--green-500));
  --grad-gold:linear-gradient(135deg,var(--gold-600),var(--gold-400));
  --grad-cream:linear-gradient(135deg,#fdf7e6,#f3e8c6);
  --font:'Inter',system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --font-head:'Poppins','Inter',system-ui,sans-serif;
  --font-arabic:'Amiri',Georgia,'Times New Roman',serif;
  /* gold arabesque side motif used on ornate buttons & dividers */
  --arabesque:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='44' viewBox='0 0 22 44'%3E%3Cg fill='none' stroke='%23d4af37' stroke-width='1.3'%3E%3Cpath d='M11 1 L21 11 L11 21 L1 11 Z'/%3E%3Cpath d='M11 23 L21 33 L11 43 L1 33 Z'/%3E%3Ccircle cx='11' cy='11' r='2.4'/%3E%3Ccircle cx='11' cy='33' r='2.4'/%3E%3C/g%3E%3C/svg%3E");
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{
  font-family:var(--font);background:var(--bg);color:var(--ink);
  line-height:1.55;min-height:100vh;-webkit-font-smoothing:antialiased;
  padding-bottom:env(safe-area-inset-bottom);
  -webkit-tap-highlight-color:transparent;       /* no grey flash on tap */
  overscroll-behavior-y:contain;                  /* no pull-to-refresh bounce */
}
/* ---- native-app feel ---- */
.btn,.icon-btn,.round-btn,.tabbar a,.sidenav a,.app-header,.tabbar,.brand,.period-toggle button,.deck-actions{
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
}
a,button,.round-btn,.icon-btn,.tabbar a{touch-action:manipulation}  /* removes 300ms tap delay */
.app-main,.thread .body,.conv-list,.deck{-webkit-overflow-scrolling:touch}
.swipe-card,.swipe-card .img{-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
img{-webkit-user-drag:none;user-drag:none}
/* keep real content selectable */
.bubble,.attr b,.card p,.biography,textarea,input{-webkit-user-select:text;user-select:text}

/* When installed (standalone PWA): respect the notch, hide the install button */
@media (display-mode: standalone), (display-mode: fullscreen){
  .app-header,.topbar{padding-top:env(safe-area-inset-top)}
  #installBtn{display:none !important}
}
h1,h2,h3,h4,.brand{font-family:var(--font-head);letter-spacing:-.01em}
a{color:var(--green-600);text-decoration:none}
img{max-width:100%;display:block}
.container{width:min(1140px,92%);margin-inline:auto}
.text-gold{color:var(--gold-600)}
.muted{color:var(--muted)}
.center{text-align:center}
.hidden{display:none!important}

/* ---- Buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  border:none;cursor:pointer;font-weight:600;font-size:.95rem;
  padding:.8rem 1.4rem;border-radius:999px;transition:.2s transform,.2s box-shadow,.2s opacity;
  font-family:inherit;
}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--grad);color:#fff;box-shadow:0 8px 20px rgba(23,128,96,.28)}
.btn-primary:hover{box-shadow:0 10px 26px rgba(23,128,96,.4)}
.btn-gold{background:var(--grad-gold);color:#3a2e05}
.btn-ghost{background:#fff;border:1.5px solid var(--line);color:var(--ink)}
.btn-ghost:hover{border-color:var(--green-400)}
.btn-block{width:100%}
.btn-lg{padding:1rem 1.8rem;font-size:1.05rem}
.btn-sm{padding:.5rem .9rem;font-size:.85rem}
.btn-danger{background:#fff;border:1.5px solid #f0caca;color:var(--danger)}

/* ===== Ornate arabesque pill buttons (Islamic action menu) ===== */
.action-menu{display:flex;flex-direction:column;gap:.85rem;max-width:460px;margin:0 auto}
.btn-ornate{
  position:relative;display:flex;align-items:center;gap:.9rem;width:100%;
  padding:.95rem 1.3rem;border:none;border-radius:999px;cursor:pointer;
  font-family:var(--font-head);font-weight:600;font-size:1.02rem;text-align:left;
  color:#fff;background:linear-gradient(135deg,var(--green-700),var(--green-500));
  box-shadow:0 10px 24px rgba(15,81,50,.26),inset 0 0 0 2px rgba(212,175,55,.55);
  overflow:hidden;transition:transform .2s ease,box-shadow .2s ease;isolation:isolate;
}
.btn-ornate:hover{transform:translateY(-2px);box-shadow:0 16px 32px rgba(15,81,50,.32),inset 0 0 0 2px rgba(212,175,55,.8)}
.btn-ornate:active{transform:translateY(0)}
.btn-ornate::before,.btn-ornate::after{content:"";position:absolute;top:0;bottom:0;width:40px;
  background-image:var(--arabesque);background-size:auto 64%;background-repeat:repeat-y;background-position:center;opacity:.5;z-index:-1}
.btn-ornate::before{left:6px}
.btn-ornate::after{right:6px;transform:scaleX(-1)}
.btn-ornate .o-ico{width:38px;height:38px;border-radius:50%;display:grid;place-items:center;flex-shrink:0;
  background:rgba(255,255,255,.2);font-size:1.05rem;box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.35)}
.btn-ornate .o-label{flex:1;text-align:center;padding-right:34px}
.btn-ornate--gold{background:linear-gradient(135deg,var(--gold-600),var(--gold-400));color:#3a2e05}
.btn-ornate--gold .o-ico{background:rgba(58,46,5,.14);box-shadow:inset 0 0 0 1.5px rgba(58,46,5,.2)}
.btn-ornate--cream{background:var(--grad-cream);color:var(--green-900);
  box-shadow:0 10px 24px rgba(180,150,60,.18),inset 0 0 0 2px rgba(212,175,55,.6)}
.btn-ornate--cream .o-ico{background:rgba(15,81,50,.08)}
.btn-ornate--danger{background:linear-gradient(135deg,#fff,#fdece9);color:var(--danger);
  box-shadow:0 10px 24px rgba(192,57,43,.12),inset 0 0 0 2px rgba(212,175,55,.45)}
.btn-ornate--danger .o-ico{background:rgba(192,57,43,.1)}

/* gold ornamental divider */
.ornament{display:flex;align-items:center;justify-content:center;gap:1rem;margin:1.5rem 0;color:var(--gold-500)}
.ornament::before,.ornament::after{content:"";height:1px;flex:1;max-width:120px;
  background:linear-gradient(90deg,transparent,var(--gold-500))}
.ornament::after{background:linear-gradient(90deg,var(--gold-500),transparent)}
.ornament i{font-size:1.1rem}

/* ---- Cards ---- */
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.5rem}
.card-flat{background:#fff;border:1px solid var(--line);border-radius:var(--radius)}

/* ---- Forms ---- */
.field{margin-bottom:1rem}
.field label{display:block;font-weight:600;font-size:.88rem;margin-bottom:.4rem;color:var(--green-800)}
.input,select,textarea{
  width:100%;padding:.8rem 1rem;border:1.5px solid var(--line);border-radius:var(--radius-sm);
  font-family:inherit;font-size:.95rem;background:#fff;color:var(--ink);transition:.15s border-color;
}
.input:focus,select:focus,textarea:focus{outline:none;border-color:var(--green-500);box-shadow:0 0 0 3px rgba(31,157,107,.12)}
textarea{resize:vertical;min-height:90px}
/* password field with show/hide toggle */
.pw-field{position:relative}
.pw-field .input{padding-right:46px}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);width:34px;height:34px;
  display:grid;place-items:center;background:none;border:none;cursor:pointer;border-radius:9px;color:var(--muted);font-size:1.05rem;line-height:1}
.pw-toggle:hover{background:#f1f6f3;color:var(--green-700)}
.pw-toggle::before{content:"👁"}
.pw-toggle.is-showing::before{content:"🙈"}

.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
@media(max-width:560px){.grid-2{grid-template-columns:1fr}}

/* ---- Alerts ---- */
.alert{padding:.85rem 1.1rem;border-radius:var(--radius-sm);margin-bottom:1rem;font-size:.92rem;font-weight:500}
.alert-success{background:#e7f6ee;color:var(--green-800);border:1px solid #bfe6d2}
.alert-error{background:#fdecea;color:var(--danger);border:1px solid #f5c6c0}

/* ---- Badges ---- */
.badge{display:inline-flex;align-items:center;gap:.3rem;font-size:.72rem;font-weight:700;padding:.2rem .6rem;border-radius:999px}
.badge-verified{background:#e7f0ff;color:#1a56db}
.badge-gold{background:#fbf3d5;color:var(--gold-600)}
.badge-platinum{background:#ece9f6;color:#5b3fb0}
.badge-online{background:#e7f6ee;color:var(--green-700)}
.dot-online{width:9px;height:9px;border-radius:50%;background:#22c55e;display:inline-block;box-shadow:0 0 0 2px #fff}

/* =====================  PUBLIC / MARKETING  ===================== */
.topbar{position:sticky;top:0;z-index:40;background:rgba(255,255,255,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}
.topbar .inner{display:flex;align-items:center;justify-content:space-between;height:66px}
.brand{display:flex;align-items:center;gap:.6rem;font-weight:800;font-size:1.25rem;color:var(--green-800)}
.brand .logo{width:38px;height:38px;border-radius:11px;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:800}
.brand .brand-mark{width:42px;height:42px;border-radius:11px;object-fit:cover;box-shadow:0 2px 8px rgba(11,61,46,.18);background:#cdbb86}
.brand small{color:var(--gold-600)}
.nav-collapse{display:flex;align-items:center;gap:1.8rem}
.nav-links{display:flex;gap:1.6rem;align-items:center}
.nav-links a{color:var(--ink);font-weight:500}
.nav-links a:hover{color:var(--green-600)}
.nav-auth{display:flex;gap:.6rem}
/* hamburger */
.nav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:44px;height:44px;
  background:#f1f6f3;border:1px solid var(--line);border-radius:12px;cursor:pointer;padding:0}
.nav-toggle span{display:block;width:20px;height:2px;background:var(--green-800);margin:0 auto;border-radius:2px;transition:.25s}
.nav-toggle[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav-toggle[aria-expanded="true"] span:nth-child(2){opacity:0}
.nav-toggle[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

@media(max-width:860px){
  .topbar .inner{position:relative}
  .nav-toggle{display:flex}
  .nav-collapse{position:absolute;top:calc(100% + 1px);left:0;right:0;flex-direction:column;align-items:stretch;gap:0;
    background:#fff;border-bottom:1px solid var(--line);box-shadow:var(--shadow);
    padding:.6rem 5%;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:max-height .3s ease,opacity .2s ease}
  .nav-collapse.open{max-height:70vh;opacity:1;visibility:visible;padding-top:.8rem;padding-bottom:1rem}
  .nav-links{flex-direction:column;align-items:stretch;gap:0;width:100%}
  .nav-links a{padding:.85rem .2rem;border-bottom:1px solid var(--line);font-size:1.02rem}
  .nav-auth{flex-direction:column;gap:.6rem;margin-top:.9rem;width:100%}
  .nav-auth .btn{width:100%;padding:.85rem 1rem;font-size:1rem}
}

.hero{position:relative;background:var(--grad);color:#fff;overflow:hidden;padding:5rem 0 6rem}
.hero::after{content:"";position:absolute;inset:0;background:
  radial-gradient(circle at 80% 10%,rgba(212,175,55,.25),transparent 40%);}
.hero .container{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:2rem;align-items:center}
.hero h1{font-size:clamp(2.1rem,5vw,3.4rem);line-height:1.1;margin-bottom:1rem;font-weight:800}
.hero p{font-size:1.1rem;opacity:.95;margin-bottom:1.8rem;max-width:520px}
.hero .cta-row{display:flex;gap:.8rem;flex-wrap:wrap}
.hero-art{display:grid;gap:1rem;grid-template-columns:1fr 1fr}
.hero-art .mini{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.25);border-radius:var(--radius);padding:1rem;backdrop-filter:blur(4px)}
.hero-art .mini b{font-size:1.6rem;color:var(--gold-400)}
@media(max-width:860px){.hero .container{grid-template-columns:1fr}.hero-art{display:none}}

/* ---- photo hero (landing) ---- */
.hero--photo{position:relative;color:#fff;overflow:hidden;padding:6rem 0 7rem}
.hero-bg{position:absolute;inset:0;z-index:0}
.hero-slide{position:absolute;inset:0;background-size:cover;background-position:center;opacity:0;transform:scale(1.06);transition:opacity 1.3s ease,transform 6s ease}
.hero-slide.active{opacity:1;transform:scale(1)}
.hero-shade{position:absolute;inset:0;z-index:1;background:linear-gradient(115deg,rgba(8,35,26,.95) 0%,rgba(15,81,50,.82) 45%,rgba(15,81,50,.45) 100%)}
.hero-shade::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 88% 12%,rgba(212,175,55,.32),transparent 42%)}
.hero-dots{position:absolute;bottom:1.5rem;left:50%;transform:translateX(-50%);z-index:3;display:flex;gap:.5rem}
.hero-dots button{width:9px;height:9px;border-radius:50%;border:none;background:rgba(255,255,255,.45);cursor:pointer;padding:0;transition:.3s}
.hero-dots button.active{background:var(--gold-400);width:26px;border-radius:5px}
.hero--photo .container{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:2.5rem;align-items:center}
.hero--photo h1{font-size:clamp(2.2rem,5.2vw,3.6rem);line-height:1.08;margin-bottom:1.1rem;font-weight:800;letter-spacing:-.5px}
.hero--photo p{font-size:1.12rem;opacity:.95;margin-bottom:1.8rem;max-width:520px}
.hero-badge{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.14);border:1px solid rgba(212,175,55,.5);color:#fff;padding:.4rem 1rem;border-radius:999px;font-size:.85rem;font-weight:600;margin-bottom:1.3rem;backdrop-filter:blur(6px)}
.hero-card{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.22);border-radius:24px;padding:1.4rem;backdrop-filter:blur(10px);box-shadow:0 20px 50px rgba(0,0,0,.25)}
.hero-card .photo-stack{display:grid;grid-template-columns:1fr 1fr;gap:.7rem}
.hero-card .photo-stack img{width:100%;height:130px;object-fit:cover;border-radius:14px}
.hero-card .photo-stack img.tall{grid-row:span 2;height:auto;min-height:200px}
.hero-card .mini-stats{display:flex;justify-content:space-around;margin-top:1rem;text-align:center}
.hero-card .mini-stats b{display:block;font-size:1.4rem;color:var(--gold-400)}
.hero-card .mini-stats span{font-size:.72rem;opacity:.9}
.hero-trust{display:flex;gap:1.2rem;align-items:center;margin-top:1.6rem;font-size:.85rem;opacity:.9}
.hero-trust .av{display:flex}
.hero-trust .av img{width:34px;height:34px;border-radius:50%;border:2px solid #fff;object-fit:cover;margin-left:-10px}
.hero-trust .av img:first-child{margin-left:0}
@media(max-width:860px){.hero--photo .container{grid-template-columns:1fr}.hero-card{display:none}}

/* ---- photo collage ---- */
.collage{display:grid;grid-template-columns:repeat(4,1fr);grid-auto-rows:150px;gap:.9rem}
.collage figure{position:relative;border-radius:18px;overflow:hidden;margin:0}
.collage figure img{width:100%;height:100%;object-fit:cover;transition:.4s transform}
.collage figure:hover img{transform:scale(1.06)}
.collage figure figcaption{position:absolute;left:0;right:0;bottom:0;padding:.8rem;color:#fff;font-weight:600;font-size:.9rem;background:linear-gradient(transparent,rgba(8,35,26,.82))}
.collage .w2{grid-column:span 2}.collage .h2{grid-row:span 2}
@media(max-width:860px){.collage{grid-template-columns:repeat(2,1fr);grid-auto-rows:130px}.collage .w2{grid-column:span 2}.collage .h2{grid-row:span 1}}

/* ---- split photo section ---- */
.split{display:grid;grid-template-columns:1fr 1fr;gap:2.5rem;align-items:center}
.split.reverse .split-media{order:2}
.split-media img{width:100%;border-radius:22px;box-shadow:var(--shadow)}
.split h2{text-align:left}
@media(max-width:760px){.split{grid-template-columns:1fr}.split.reverse .split-media{order:0}}

/* ---- testimonials ---- */
.testi-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem}
.testi{background:#fff;border:1px solid var(--line);border-radius:18px;padding:1.6rem;position:relative}
.testi .stars{color:var(--gold-500);margin-bottom:.6rem}
.testi p{color:var(--ink);font-style:italic;margin-bottom:1rem}
.testi .who{display:flex;align-items:center;gap:.7rem}
.testi .who .ava{width:44px;height:44px;border-radius:50%;background:var(--grad);display:grid;place-items:center;color:#fff;font-weight:700}
@media(max-width:860px){.testi-grid{grid-template-columns:1fr}}

.stat-strip{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:-3rem;position:relative;z-index:5}
.stat-strip .stat{background:#fff;border-radius:var(--radius);box-shadow:var(--shadow);padding:1.3rem 2rem;text-align:center;min-width:150px}
.stat-strip .stat b{display:block;font-size:1.9rem;color:var(--green-700)}
.stat-strip .stat span{color:var(--muted);font-size:.85rem}

.section{padding:4rem 0}
.section h2{font-size:clamp(1.6rem,3vw,2.3rem);text-align:center;margin-bottom:.5rem;color:var(--green-800)}
.section .lead{text-align:center;color:var(--muted);max-width:600px;margin:0 auto 2.5rem}
.features{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem}
.feature{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:1.6rem;transition:.2s}
.feature:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.feature .ico{width:52px;height:52px;border-radius:14px;background:#e7f6ee;display:grid;place-items:center;font-size:1.5rem;margin-bottom:1rem}
.feature h3{margin-bottom:.4rem;color:var(--green-800)}
.feature p{color:var(--muted);font-size:.92rem}
@media(max-width:860px){.features{grid-template-columns:1fr}}

.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;counter-reset:step}
.step{text-align:center;padding:1.2rem}
.step .n{width:54px;height:54px;border-radius:50%;background:var(--grad-gold);color:#3a2e05;display:grid;place-items:center;font-weight:800;font-size:1.3rem;margin:0 auto 1rem}
@media(max-width:860px){.steps{grid-template-columns:1fr}}

.cta-band{background:var(--green-800);color:#fff;border-radius:var(--radius);padding:3rem;text-align:center;background-image:var(--grad)}
.cta-band h2{color:#fff}
footer.site{background:var(--green-900);color:#cfe6dc;padding:3rem 0 2rem;margin-top:3rem}
footer.site a{color:#cfe6dc}
footer.site .cols{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:2rem}
footer.site h4{color:#fff;margin-bottom:.8rem}
footer.site .bottom{border-top:1px solid rgba(255,255,255,.12);margin-top:2rem;padding-top:1.2rem;font-size:.85rem;opacity:.8}
@media(max-width:860px){footer.site .cols{grid-template-columns:1fr 1fr}}

/* =====================  APP SHELL  ===================== */
.app-header{position:sticky;top:0;z-index:40;background:#fff;border-bottom:1px solid var(--line)}
.app-header .inner{display:flex;align-items:center;justify-content:space-between;height:60px}
.app-header .actions{display:flex;align-items:center;gap:1rem}
.icon-btn{position:relative;width:42px;height:42px;border-radius:50%;display:grid;place-items:center;background:#f1f6f3;border:none;cursor:pointer;font-size:1.1rem;color:var(--green-800)}
.icon-btn .count{position:absolute;top:-2px;right:-2px;background:var(--danger);color:#fff;font-size:.65rem;min-width:18px;height:18px;border-radius:9px;display:grid;place-items:center;padding:0 4px;font-weight:700}
.app-main{padding:1.4rem 0 6rem;min-height:60vh}

/* bottom nav (mobile app feel) */
.tabbar{position:fixed;bottom:0;left:0;right:0;z-index:50;background:#fff;border-top:1px solid var(--line);
  display:flex;justify-content:space-around;padding:.4rem 0 calc(.4rem + env(safe-area-inset-bottom))}
.tabbar a{display:flex;flex-direction:column;align-items:center;gap:.15rem;font-size:.68rem;color:var(--muted);padding:.3rem .6rem;border-radius:12px}
.tabbar a .ti{font-size:1.35rem}
.tabbar a.active{color:var(--green-600)}
@media(min-width:861px){.tabbar{display:none}.app-main{padding-bottom:2rem}}

/* desktop side nav */
.app-layout{display:grid;grid-template-columns:240px 1fr;gap:1.6rem}
.sidenav{position:sticky;top:80px;height:max-content}
.sidenav a{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;border-radius:12px;color:var(--ink);font-weight:500;margin-bottom:.2rem}
.sidenav a.active,.sidenav a:hover{background:#e7f6ee;color:var(--green-700)}
@media(max-width:860px){.app-layout{grid-template-columns:1fr}.sidenav{display:none}}

/* ---- profile cards / grid ---- */
.people-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:1rem}
.pcard{background:#fff;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow);position:relative;transition:.2s}
.pcard:hover{transform:translateY(-4px)}
.pcard .photo{aspect-ratio:3/4;background:#e9efec center/cover no-repeat;position:relative}
.pcard .photo .ov{position:absolute;left:0;right:0;bottom:0;padding:.7rem;background:linear-gradient(transparent,rgba(11,61,46,.85));color:#fff}
.pcard .photo .ov b{font-size:1rem}
.pcard .photo.blurred{filter:blur(11px)}
.pcard .tags{position:absolute;top:.6rem;left:.6rem;display:flex;gap:.3rem;flex-wrap:wrap}

/* ---- swipe deck ---- */
.deck{max-width:420px;margin:0 auto;position:relative;height:560px}
.swipe-card{position:absolute;inset:0;background:#fff;border-radius:24px;overflow:hidden;box-shadow:var(--shadow);
  display:flex;flex-direction:column;will-change:transform;user-select:none}
.swipe-card .img{flex:1;background:#e9efec center/cover no-repeat;position:relative}
.swipe-card .info{position:absolute;bottom:0;left:0;right:0;padding:1.3rem;background:linear-gradient(transparent,rgba(11,61,46,.92));color:#fff}
.swipe-card .info h3{font-size:1.5rem;display:flex;align-items:center;gap:.4rem}
.swipe-card .info p{opacity:.9}
.swipe-card .stamp{position:absolute;top:32px;padding:.4rem 1rem;border:4px solid;border-radius:12px;font-weight:800;font-size:1.5rem;text-transform:uppercase;opacity:0;transition:.1s}
.stamp.like{left:24px;color:#22c55e;border-color:#22c55e;transform:rotate(-18deg)}
.stamp.nope{right:24px;color:#ef4444;border-color:#ef4444;transform:rotate(18deg)}
.deck-actions{display:flex;justify-content:center;gap:1.1rem;margin-top:1.4rem}
.round-btn{width:62px;height:62px;border-radius:50%;border:none;background:#fff;box-shadow:var(--shadow);cursor:pointer;font-size:1.5rem;display:grid;place-items:center;transition:.15s}
.round-btn:hover{transform:scale(1.08)}
.round-btn.pass{color:#ef4444}.round-btn.like{color:#22c55e}
.round-btn.super{color:#3b82f6}.round-btn.boost{color:var(--gold-600)}
.round-btn.big{width:72px;height:72px;font-size:1.8rem}

/* ---- profile page ---- */
.profile-hero{display:grid;grid-template-columns:340px 1fr;gap:1.6rem}
@media(max-width:760px){.profile-hero{grid-template-columns:1fr}}
.gallery{display:grid;gap:.6rem}
.gallery .main{aspect-ratio:3/4;border-radius:var(--radius);background:#e9efec center/cover no-repeat}
.gallery .thumbs{display:flex;gap:.5rem}
.gallery .thumbs img{width:70px;height:70px;border-radius:12px;object-fit:cover;cursor:pointer;border:2px solid transparent;transition:.15s}
.gallery .thumbs img:hover{border-color:var(--green-400)}
.gallery .thumbs img.active{border-color:var(--green-600);box-shadow:0 0 0 2px rgba(23,128,96,.25)}
.gallery .main{cursor:pointer}
.attr-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.8rem;margin-top:1rem}
.attr{background:#f6faf8;border-radius:12px;padding:.7rem .9rem}
.attr span{display:block;font-size:.72rem;color:var(--muted);text-transform:uppercase;letter-spacing:.03em}
.attr b{font-weight:600}
.compat{display:flex;align-items:center;gap:.8rem;background:#e7f6ee;border-radius:14px;padding:1rem;margin-top:1rem}
.compat .ring{--p:70;width:60px;height:60px;border-radius:50%;background:conic-gradient(var(--green-500) calc(var(--p)*1%),#d6e8df 0);display:grid;place-items:center}
.compat .ring b{background:#fff;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;color:var(--green-700)}

/* ---- meter ---- */
.meter{height:9px;background:#e6ede9;border-radius:999px;overflow:hidden}
.meter > i{display:block;height:100%;background:var(--grad);border-radius:999px}

/* ---- chat ---- */
.chat-wrap{display:grid;grid-template-columns:320px 1fr;gap:1rem;height:calc(100vh - 160px)}
@media(max-width:860px){.chat-wrap{grid-template-columns:1fr}}
.conv-list{background:#fff;border-radius:var(--radius);overflow-y:auto;border:1px solid var(--line)}
.conv{display:flex;gap:.7rem;padding:.8rem 1rem;border-bottom:1px solid var(--line);align-items:center;cursor:pointer}
.conv:hover{background:#f6faf8}
.conv img{width:48px;height:48px;border-radius:50%;object-fit:cover}
.conv .meta{flex:1;min-width:0}
.conv .meta p{font-size:.82rem;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.conv .unread{background:var(--green-500);color:#fff;font-size:.7rem;min-width:20px;height:20px;border-radius:10px;display:grid;place-items:center;padding:0 5px}
.thread{background:#fff;border-radius:var(--radius);display:flex;flex-direction:column;border:1px solid var(--line)}
.thread .head{display:flex;align-items:center;gap:.7rem;padding:.9rem 1rem;border-bottom:1px solid var(--line)}
.thread .head img{width:42px;height:42px;border-radius:50%;object-fit:cover}
.thread .body{flex:1;overflow-y:auto;padding:1.2rem;display:flex;flex-direction:column;gap:.5rem;background:#f6faf8}
.bubble{max-width:74%;padding:.6rem .9rem;border-radius:16px;font-size:.93rem;position:relative}
.bubble.me{align-self:flex-end;background:var(--grad);color:#fff;border-bottom-right-radius:4px}
.bubble.them{align-self:flex-start;background:#fff;border:1px solid var(--line);border-bottom-left-radius:4px}
.bubble time{display:block;font-size:.65rem;opacity:.65;margin-top:.2rem}
.thread .composer{display:flex;gap:.6rem;padding:.8rem;border-top:1px solid var(--line)}
.thread .composer input{flex:1}

/* ---- plans ---- */
.plan-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;align-items:start}
@media(max-width:860px){.plan-grid{grid-template-columns:1fr}}
.plan{background:#fff;border:2px solid var(--line);border-radius:var(--radius);padding:1.8rem;position:relative}
.plan.featured{border-color:var(--gold-500);box-shadow:0 14px 40px rgba(212,175,55,.18)}
.plan.featured::before{content:"Most Popular";position:absolute;top:-13px;left:50%;transform:translateX(-50%);background:var(--grad-gold);color:#3a2e05;font-size:.72rem;font-weight:800;padding:.25rem .9rem;border-radius:999px}
.plan h3{font-size:1.4rem;color:var(--green-800)}
.plan .price{font-size:2.4rem;font-weight:800;color:var(--green-700);margin:.4rem 0}
.plan ul{list-style:none;margin:1rem 0;display:grid;gap:.55rem}
.plan ul li{padding-left:1.6rem;position:relative;font-size:.92rem}
.plan ul li::before{content:"✓";position:absolute;left:0;color:var(--green-500);font-weight:800}
.period-toggle{display:flex;gap:.4rem;justify-content:center;margin-bottom:2rem;flex-wrap:wrap}
.period-toggle button{padding:.5rem 1.1rem;border-radius:999px;border:1.5px solid var(--line);background:#fff;cursor:pointer;font-weight:600}
.period-toggle button.active{background:var(--green-700);color:#fff;border-color:var(--green-700)}

/* ---- admin ---- */
.metric-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.6rem}
@media(max-width:860px){.metric-grid{grid-template-columns:repeat(2,1fr)}}
.metric{background:#fff;border-radius:var(--radius);padding:1.2rem;border:1px solid var(--line)}
.metric b{font-size:1.8rem;color:var(--green-700);display:block}
.metric span{color:var(--muted);font-size:.82rem}
table.tbl{width:100%;border-collapse:collapse;background:#fff;border-radius:var(--radius);overflow:hidden}
table.tbl th,table.tbl td{padding:.75rem 1rem;text-align:left;border-bottom:1px solid var(--line);font-size:.9rem}
table.tbl th{background:#f1f6f3;color:var(--green-800);font-size:.78rem;text-transform:uppercase;letter-spacing:.03em}

/* ---- scroll reveal ---- */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
.reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s}

/* ---- skeleton ---- */
.skel{background:linear-gradient(90deg,#eef3f0 25%,#e3ebe7 37%,#eef3f0 63%);background-size:400% 100%;animation:sk 1.4s ease infinite;border-radius:8px}
@keyframes sk{0%{background-position:100% 50%}100%{background-position:0 50%}}

/* ---- toast ---- */
#toast-wrap{position:fixed;bottom:90px;left:50%;transform:translateX(-50%);z-index:100;display:flex;flex-direction:column;gap:.5rem;width:min(420px,90%)}
.toast{background:var(--ink);color:#fff;padding:.85rem 1.1rem;border-radius:14px;box-shadow:var(--shadow);font-size:.9rem;animation:pop .25s ease}
.toast.match{background:var(--grad)}
@keyframes pop{from{transform:translateY(12px);opacity:0}}

/* ---- WebRTC call overlay ---- */
.call-overlay{position:fixed;inset:0;z-index:120;background:#08231a;display:none}
.call-overlay.show{display:block}
.call-stage{position:relative;width:100%;height:100%}
.call-stage #remoteVideo{width:100%;height:100%;object-fit:cover;background:#08231a}
.call-local{position:absolute;top:18px;right:18px;width:120px;height:160px;border-radius:14px;overflow:hidden;border:2px solid rgba(255,255,255,.4);box-shadow:var(--shadow);background:#0b3d2e}
.call-local video{width:100%;height:100%;object-fit:cover}
.call-local.audio-only{display:none}
.call-status{position:absolute;top:24px;left:50%;transform:translateX(-50%);color:#fff;background:rgba(0,0,0,.35);padding:.4rem 1rem;border-radius:999px;font-size:.9rem}
.call-incoming{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.6rem;color:#fff;text-align:center}
.call-incoming .call-avatar{width:120px;height:120px;border-radius:50%;background:#0b3d2e center/cover no-repeat;border:3px solid var(--gold-400);margin-bottom:.4rem;animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(212,175,55,.5)}50%{box-shadow:0 0 0 18px rgba(212,175,55,0)}}
.call-actions,.call-controls{display:flex;gap:1.5rem;justify-content:center}
.call-controls{position:absolute;bottom:40px;left:0;right:0}
.call-incoming .call-actions{margin-top:1rem}

/* ---- GIF picker ---- */
.gif-picker{position:fixed;bottom:80px;left:50%;transform:translateX(-50%);z-index:60;background:#fff;border-radius:16px;box-shadow:var(--shadow);padding:1rem;width:min(380px,92%);border:1px solid var(--line)}
.gif-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:.5rem;margin-bottom:.5rem}
.gif-item{padding:.8rem .4rem;border:1px solid var(--line);border-radius:12px;background:#f6faf8;cursor:pointer;font-size:.85rem}
.gif-item:hover{background:#e7f6ee}

/* ---- chat media bubbles ---- */
.bubble img.chat-img{max-width:200px;border-radius:12px;display:block}
.bubble audio{height:38px;max-width:230px}
.bubble .react{position:absolute;bottom:-10px;right:6px;background:#fff;border:1px solid var(--line);border-radius:999px;padding:0 .35rem;font-size:.8rem;box-shadow:var(--shadow)}
.bubble{cursor:default}
.rec-indicator{display:flex;align-items:center;gap:.4rem;color:var(--danger);font-weight:600}
.rec-dot{width:10px;height:10px;border-radius:50%;background:var(--danger);animation:blink 1s infinite}
@keyframes blink{50%{opacity:.3}}

/* match modal */
.modal-back{position:fixed;inset:0;background:rgba(11,61,46,.6);z-index:90;display:none;place-items:center;backdrop-filter:blur(3px)}
.modal-back.show{display:grid}
.modal{background:#fff;border-radius:24px;padding:2.2rem;text-align:center;width:min(380px,90%);animation:pop .3s ease}
.modal h2{color:var(--green-700);font-size:2rem;background:var(--grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent}