:root{
  --bg1:#8A2BE2;
  --bg2:#FF4D8B;

  --card: rgba(14,10,28,.92);
  --card-soft: rgba(0,0,0,.16);
  --card-soft-2: rgba(255,255,255,.06);
  --stroke: rgba(255,255,255,.10);

  --text:#f7f1ff;
  --muted:#ffd7f0;

  --ok:#96ffda;
  --ok-strong:#19c37d;
  --warn:#ffe082;
  --danger:#ff6b6b;
  --danger-strong:#ff4d4f;

  --shadow-lg: 0 12px 30px rgba(0,0,0,.35);
  --shadow-md: 0 10px 24px rgba(0,0,0,.22);
  --radius-xl: 22px;
  --radius-lg: 18px;
  --radius-md: 16px;
  --radius-sm: 12px;

  --tap: 48px;
}

*{
  box-sizing:border-box;
  font-family: system-ui,-apple-system,BlinkMacSystemFont,sans-serif;
}

html{
  scroll-behavior:smooth;
}

body{
  margin:0;
  padding-bottom:88px;
  background: linear-gradient(135deg, var(--bg1), var(--bg2));
  color:var(--text);
}

img{
  max-width:100%;
}

button,
input,
textarea,
select{
  font:inherit;
}

.shell{
  max-width:1100px;
  margin:0 auto;
  padding:14px;
}

/* =========================
   TOP
========================= */

.topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:10px 6px 16px;
}

.brand{
  display:flex;
  align-items:center;
  gap:10px;
  min-width:0;
}

.logo{
  width:42px;
  height:42px;
  border-radius:50%;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(0,0,0,.22);
  border:1px solid var(--stroke);
  font-weight:800;
  box-shadow:0 0 10px rgba(255,255,255,.25);
  flex:0 0 auto;
}

.logo img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:50%;
}

.title{
  font-size:22px;
  font-weight:800;
  line-height:1;
}

.subtitle{
  font-size:12px;
  color:var(--muted);
  margin-top:4px;
  line-height:1.25;
}

.meBadge{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  border:1px solid var(--stroke);
  font-size:12px;
  white-space:nowrap;
}

/* =========================
   LAYOUT
========================= */

.panel{
  display:none;
}

.panel.active{
  display:block;
}

.card{
  background:var(--card);
  border:1px solid var(--stroke);
  border-radius:var(--radius-lg);
  padding:14px;
  box-shadow:var(--shadow-lg);
}

.grid2{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.grid3{
  display:grid;
  grid-template-columns:repeat(3, minmax(0, 1fr));
  gap:12px;
}

.stack{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.rowBetween{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.bs{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-bottom:12px;
}

.hidden{
  display:none !important;
}

.footer{
  margin-top:14px;
  padding:10px 6px;
  display:flex;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:10px;
}

/* =========================
   TYPO / HELPERS
========================= */

label{
  display:block;
  font-size:12px;
  color:var(--muted);
  margin:8px 0 4px;
}

.msg{
  margin-top:10px;
  font-size:13px;
  color:var(--warn);
  min-height:18px;
  line-height:1.35;
}

.muted{
  color:rgba(255,255,255,.75);
  font-size:13px;
  line-height:1.35;
}

.hint{
  margin-top:10px;
  padding:10px;
  border-radius:14px;
  background:rgba(0,0,0,.16);
  border:1px solid var(--stroke);
  color:rgba(255,255,255,.85);
  font-size:13px;
  opacity:.9;
  display:block;
  line-height:1.4;
}

.pill{
  padding:8px 12px;
  border-radius:999px;
  background:rgba(0,0,0,.18);
  border:1px solid var(--stroke);
  font-size:12px;
  color:var(--ok);
  white-space:nowrap;
}

/* =========================
   FORMS
========================= */

input,
textarea,
select{
  width:100%;
  min-height:46px;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(90,65,140,.7);
  background:rgba(0,0,0,.28);
  color:var(--text);
  outline:none;
}

input::placeholder,
textarea::placeholder{
  color:rgba(255,255,255,.48);
}

input:focus,
textarea:focus,
select:focus{
  border-color:rgba(255,255,255,.4);
  box-shadow:0 0 0 3px rgba(255,255,255,.06);
}

textarea{
  resize:vertical;
}

/* =========================
   BUTTONS
========================= */

button{
  min-height:var(--tap);
  border:none;
  border-radius:999px;
  padding:10px 14px;
  cursor:pointer;
  background:rgba(255,77,139,.95);
  color:#fff;
  font-weight:800;
  transition:transform .12s ease, opacity .15s ease, box-shadow .15s ease, background .15s ease;
}

button:hover{
  opacity:.96;
}

button:active{
  transform:translateY(1px);
}

button:disabled{
  opacity:.55;
  cursor:not-allowed;
}

.btnPrimary{
  background:rgba(255,77,139,.95);
}

.btnGhost{
  background:rgba(0,0,0,.18);
  border:1px solid var(--stroke);
}

.successBtn{
  background:linear-gradient(135deg, #16c47f, #22c55e);
  color:#fff;
}

.dangerBtn{
  background:linear-gradient(135deg, #ff5f6d, #ff3b30);
  color:#fff;
}

/* =========================
   PROFILE ACTIONS
========================= */

.profileDangerRow{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:10px;
}

.profileDangerRow button{
  width:100%;
}

.btnDeleteAccount{
  color:#fff;
  background:linear-gradient(135deg, rgba(255,95,109,.92), rgba(255,59,48,.92));
  border:1px solid rgba(255,255,255,.16);
  box-shadow:0 10px 24px rgba(255,59,48,.18);
}

.btnDeleteAccount:hover{
  box-shadow:0 12px 28px rgba(255,59,48,.24);
}


/* =========================
   GROUPS
========================= */

.groupCard{
  border:1px solid var(--stroke);
  border-radius:18px;
  padding:12px;
  background:rgba(0,0,0,.16);
}

.groupCard h3{
  margin:0 0 6px;
  line-height:1.2;
}

.groupCard .meta{
  font-size:12px;
  color:rgba(255,255,255,.75);
  margin-bottom:8px;
  line-height:1.35;
}

.actionsRow{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.actionsRow button{
  min-height:44px;
  padding:10px 14px;
}

.groupPreview{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center;
  border-radius:16px;
  margin-top:8px;
  border:1px solid rgba(255,255,255,.12);
  display:block;
  background:rgba(0,0,0,.22);
}

/* =========================
   CREATE GROUP CHIPS
========================= */

.chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:8px;
}

.chip{
  min-height:42px;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(0,0,0,.18);
  color:#fff;
  padding:10px 12px;
  border-radius:999px;
  cursor:pointer;
  font-size:14px;
}

.chip.active{
  border-color:rgba(255,255,255,.6);
  background:rgba(255,255,255,.18);
}

/* =========================
   PHOTOS / UPLOAD PRO
========================= */

.photos2{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
}

.photoSlot{
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid rgba(255,255,255,.12);
  border-radius:22px;
  padding:10px;
  background:
    radial-gradient(circle at top, rgba(255,77,139,.14), transparent 38%),
    rgba(0,0,0,.18);
  overflow:hidden;
}

.photoSlot .muted{
  margin-top:10px;
  font-size:14px;
  font-weight:800;
  text-align:center;
}

.photoSlot img{
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:18px;
  object-fit:cover;
  object-position:center;
  background:rgba(255,255,255,.06);
  display:block;
  border:1px solid rgba(255,255,255,.10);
}

.uploadNativeInput{
  display:none !important;
}

.profileUploadCard,
.uploadCard{
  margin-top:10px;
  min-height:116px;
  border-radius:18px;
  border:1px dashed rgba(255,255,255,.28);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(0,0,0,.18);
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:6px;
  text-align:center;
  cursor:pointer;
  transition:transform .14s ease, border-color .16s ease, background .16s ease, box-shadow .16s ease;
}

.profileUploadCard:hover,
.uploadCard:hover{
  transform:translateY(-1px);
  border-color:rgba(255,255,255,.48);
  background:
    linear-gradient(180deg, rgba(255,255,255,.12), rgba(255,255,255,.04)),
    rgba(0,0,0,.22);
  box-shadow:0 12px 26px rgba(0,0,0,.20);
}

.profileUploadCard:active,
.uploadCard:active{
  transform:scale(.99);
}

.uploadIcon{
  width:42px;
  height:42px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  background:linear-gradient(135deg, #8A2BE2, #FF4D8B);
  color:#fff;
  font-size:26px;
  font-weight:700;
  box-shadow:0 10px 24px rgba(255,77,139,.22);
}

.uploadTitle{
  font-size:14px;
  font-weight:900;
  color:#fff;
}

.uploadText{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.68);
}

.uploadPanel{
  margin-top:12px;
  padding:12px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
}

.uploadPanelHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.uploadPanelTitle{
  font-size:15px;
  font-weight:900;
  color:#fff;
}

.uploadPanelSub{
  margin-top:4px;
  font-size:12px;
  line-height:1.35;
  color:rgba(255,255,255,.70);
}

.uploadGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
}

.uploadCard input{
  display:none !important;
}

.groupPhotosPreview{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:10px;
  margin-top:10px;
}

.groupPhotoPreviewCard{
  min-width:0;
}

.uploadPreviewLabel{
  font-size:12px;
  font-weight:900;
  color:rgba(255,255,255,.82);
  margin-bottom:6px;
}

.groupPhotosManager{
  display:grid;
  grid-template-columns:1fr;
  gap:16px;
  margin-top:14px;
}

.groupPhotoManageSlot{
  margin-top:8px;
}

.groupUploadCard{
  min-height:96px;
  margin-top:10px;
}

.groupPhotoEmpty{
  width:100%;
  aspect-ratio:4 / 5;
  border-radius:16px;
  border:1px dashed rgba(255,255,255,.20);
  background:rgba(0,0,0,.18);
  display:flex;
  align-items:center;
  justify-content:center;
  color:rgba(255,255,255,.65);
  font-size:13px;
  font-weight:800;
}

@media(max-width: 640px){
  .photos2,
  .uploadGrid,
  .groupPhotosPreview{
    grid-template-columns:1fr;
  }
}

/* =========================
   PREMIUM / MINI CARDS
========================= */

.mini{
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:12px;
  background:rgba(0,0,0,.16);
}

.miniTitle{
  font-weight:800;
  margin-bottom:6px;
}

.miniBody{
  font-size:13px;
  color:rgba(255,255,255,.82);
  min-height:42px;
  line-height:1.4;
}

.miniActions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
  margin-top:10px;
}

.miniActions button{
  min-height:42px;
  padding:8px 12px;
}

/* =========================
   FILTERS
========================= */

.filtersCard{
  margin-bottom:12px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.12);
  backdrop-filter:blur(10px);
}

.filtersRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-wrap:wrap;
}

.filtersTitle{
  font-weight:700;
}

.toggleRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
}

.range{
  width:100%;
  margin-top:10px;
}

.rangeLegend{
  display:flex;
  justify-content:space-between;
  margin-top:6px;
  font-size:12px;
  opacity:.85;
}

.franceMsg{
  margin-top:10px;
  padding:10px 12px;
  border-radius:14px;
  background:rgba(0,0,0,0.25);
  border:1px solid rgba(255,255,255,0.12);
  font-weight:700;
}

/* =========================
   SWITCH
========================= */

.switch{
  position:relative;
  display:inline-block;
  width:48px;
  height:28px;
}

.switch input{
  opacity:0;
  width:0;
  height:0;
}

.switch .slider{
  position:absolute;
  cursor:pointer;
  inset:0;
  background:rgba(255,255,255,0.25);
  transition:.2s;
  border-radius:999px;
  border:1px solid rgba(255,255,255,0.25);
}

.switch .slider:before{
  position:absolute;
  content:"";
  height:22px;
  width:22px;
  left:3px;
  top:2px;
  background:white;
  transition:.2s;
  border-radius:999px;
}

.switch input:checked + .slider{
  background:rgba(255,255,255,0.45);
}

.switch input:checked + .slider:before{
  transform:translateX(20px);
}

/* =========================
   SWIPE
========================= */

.swipeTopbar{
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}

.swipeTopbarSide{
  display:flex;
  align-items:center;
}

.swipeTopbarSideRight{
  justify-content:flex-end;
}

.swipeGroupTitleTop{
  position:relative;
  text-align:center;
  font-size:22px;
  font-weight:900;
  color:#fff;
  padding:0 8px;
  overflow:visible;
  white-space:normal;
  text-overflow:unset;
  z-index:200;
}

.swipeTopTitleWrap{
  position:relative;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:2px;
}

.swipeTopTitleText{
  line-height:1.1;
}

.swipeGroupMenuWrap{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  z-index:300;
}

.swipeMenuTrigger{
  appearance:none;
  -webkit-appearance:none;
  min-width:auto;
  min-height:auto;
  width:auto;
  height:auto;
  margin:0;
  padding:0;
  border:none !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  outline:none;
  color:#fff;
  font-size:24px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
}

.swipeMenuTrigger:hover{
  background:transparent !important;
  box-shadow:none !important;
  opacity:.72;
  transform:none;
}

.swipeMenuTrigger:active{
  transform:none;
}

.swipeActionsMenu{
  position:absolute;
  top:32px;
  left:50%;
  transform:translateX(-50%);
  min-width:190px;
  padding:8px;
  border-radius:14px;
  background:#151515;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  z-index:9999;
}

.swipeActionsMenu button{
  width:100%;
  min-height:42px;
  border:none;
  background:transparent !important;
  color:#ff8c8c;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  box-shadow:none !important;
}

.swipeActionsMenu button:hover{
  background:rgba(255,255,255,.06) !important;
}
.swipeCard{
  margin-top:10px;
  border-radius:22px;
  border:1px solid transparent;
  background:transparent;
  padding:0;
  min-height:980px;
}
.swipeLikeQuotaBadge{
  width:100%;
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:13px;
  font-weight:900;
  text-align:center;
  box-shadow:0 8px 20px rgba(0,0,0,.16);
}

.swipeLikeQuotaBadge.is-empty{
  background:rgba(255,107,107,.14);
  border-color:rgba(255,107,107,.38);
  color:#ffb3b3;
}
.swipePhoto{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  object-position:center;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.12);
  display:block;
  background:rgba(0,0,0,.22);
}

.swipeActions{
  display:flex;
  justify-content:center;
  gap:12px;
  margin-top:14px;
}

.swipeActions button{
  min-width:56px;
  min-height:56px;
  padding:12px 16px;
  font-size:16px;

  background:linear-gradient(135deg, var(--bg1), var(--bg2));
  color:#fff;

  border:1px solid rgba(255,255,255,.12);

  box-shadow:0 12px 30px rgba(0,0,0,.18);
}

.swipeGestureLayer{
  width:100%;
  touch-action:pan-y;
  user-select:none;
}

.swipeGestureInner{
  will-change:transform;
  transform:translateZ(0);
  backface-visibility:hidden;
  transition:transform .24s ease;
}

.swipeGestureInner.like{
  filter:drop-shadow(0 0 18px rgba(150,255,218,.22));
}

.swipeGestureInner.dislike{
  filter:drop-shadow(0 0 18px rgba(255,140,140,.22));
}

.hingeCard{
  position:relative;
  width:calc(100% + 28px);
  margin-left:-14px;

  height:82vh;
  max-height:790px;
  min-height:640px;

  border-radius:22px;
  overflow:hidden;
  background:#000;
  border:none;

  contain: layout paint;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.hingeImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center center;
  display:block;
  background:#000;

  will-change: transform;
  transform: translateZ(0);
  backface-visibility: hidden;
}

.photoBars{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  gap:4px;
  z-index:4;
}

.photoBar{
  flex:1;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,0.28);
}

.photoBar.active{
  background:rgba(255,255,255,0.95);
}

.hingeSwipeBadge{
  position:absolute;
  top:56px;
  z-index:4;
  padding:8px 14px;
  border-radius:12px;
  font-size:28px;
  font-weight:900;
  letter-spacing:1px;
  opacity:0;
  pointer-events:none;
  border:3px solid;
  background:rgba(0,0,0,.18);
  transition:opacity .18s ease, transform .18s ease;
}

.hingeSwipeBadgeLike{
  left:16px;
  color:#96ffda;
  border-color:#96ffda;
  transform:rotate(-10deg);
}

.hingeSwipeBadgeNope{
  right:16px;
  color:#ff8c8c;
  border-color:#ff8c8c;
  transform:rotate(10deg);
}

.swipeInfoPanel{
  margin-top:14px;
  padding:18px 16px 18px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(22,12,38,.96), rgba(10,8,22,.96));
  border:1px solid rgba(255,255,255,.08);
}

.swipeInfoTitle{
  font-size:22px;
  font-weight:900;
  color:#fff;
  line-height:1.05;
}

.swipeInfoCity{
  margin-top:4px;
  font-size:14px;
  font-weight:600;
  color:rgba(255,255,255,.76);
}

.swipeInfoBio{
  margin-top:10px;
  font-size:15px;
  color:rgba(255,255,255,.92);
  line-height:1.45;
}

.swipeInfoSection{
  margin-top:14px;
}

.swipeShellCard{
  padding:12px;
}

.swipeHeader{
  display:flex;
  flex-direction:column;
  gap:10px;
  margin-bottom:12px;
}

.swipeActivePill{
  width:fit-content;
  max-width:100%;
}


/* =========================
   MEMBERS MINI
========================= */

.swipe-members-row{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.member-mini-btn{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  border-radius:50%;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
}

.member-mini-avatar{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.member-mini-fallback{
  font-size:14px;
  font-weight:800;
  color:#fff;
}

/* =========================
   MEMBER PROFILE MODAL
========================= */

.member-profile-modal{
  position:fixed;
  inset:0;
  z-index:22000;
  background:rgba(8,8,16,.82);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.member-profile-sheet{
  width:100%;
  max-height:92vh;
  overflow:auto;
  border-top-left-radius:24px;
  border-top-right-radius:24px;
  background:linear-gradient(180deg, #171025 0%, #24143b 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 -12px 40px rgba(0,0,0,.35);
}

.member-profile-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px 16px;
  position:sticky;
  top:0;
  background:rgba(20,12,34,.92);
  backdrop-filter:blur(10px);
}

.member-profile-title{
  font-weight:800;
  color:#fff;
}

.member-profile-spacer{
  width:92px;
}

.member-profile-content{
  padding:16px;
}

.member-profile-header{
  margin-bottom:14px;
}

.member-profile-name{
  font-size:22px;
  font-weight:900;
  color:#fff;
}

.member-profile-photo-label{
  margin:12px 0 8px;
  font-size:14px;
  font-weight:800;
  color:#fff;
}

.member-profile-photo{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  display:block;
  background:rgba(0,0,0,.22);
}

.member-profile-bio-title{
  font-size:14px;
  font-weight:800;
  color:#fff;
  margin-bottom:6px;
}

.member-profile-bio{
  color:rgba(255,255,255,.86);
  line-height:1.5;
}

/* =========================
   LOCATION
========================= */

.locationInlineRow{
  display:flex;
  align-items:center;
  gap:10px;
  margin-top:6px;
  margin-bottom:10px;
}

.locationValue{
  flex:1;
  min-height:44px;
  display:flex;
  align-items:center;
  padding:10px 12px;
  border-radius:12px;
  border:1px solid rgba(90,65,140,.7);
  background:rgba(0,0,0,.28);
  color:var(--text);
  font-size:14px;
}

.locationBtn{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:0;
}

.locationBtnIcon{
  width:32px;
  height:32px;
  object-fit:contain;
  display:block;
}

.location-modal{
  position:fixed;
  inset:0;
  z-index:32000;
  background:rgba(8,8,16,.84);
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.location-sheet{
  width:100%;
  max-height:94vh;
  overflow:auto;
  border-top-left-radius:24px;
  border-top-right-radius:24px;
  background:linear-gradient(180deg, #171025 0%, #24143b 100%);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:0 -12px 40px rgba(0,0,0,.35);
}

.location-topbar{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:calc(env(safe-area-inset-top) + 12px) 16px 12px 16px;
  position:sticky;
  top:0;
  background:rgba(20,12,34,.92);
  backdrop-filter:blur(10px);
  z-index:3;
}

.location-title{
  font-weight:800;
}

.location-content{
  padding:16px;
}

.locationSearchInput{
  margin-bottom:12px;
}

.locationMap{
  width:100%;
  height:420px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(0,0,0,.18);
}

.locationPickedBox{
  margin-top:12px;
  padding:12px;
  border-radius:14px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
}

/* =========================
   PHOTO CROPPER
========================= */

.photo-cropper-modal{
  position:fixed;
  inset:0;
  z-index:33000;
  background:rgba(10,10,20,0.96);
  display:flex;
  justify-content:center;
  align-items:stretch;
}

.photo-cropper-shell{
  width:100%;
  height:100%;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(circle at top, rgba(255,77,139,0.20), transparent 35%),
    linear-gradient(180deg, #12081f 0%, #1c1032 100%);
}

.photo-cropper-topbar{
  min-height:72px;
  padding:calc(env(safe-area-inset-top) + 10px) 16px 10px 16px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  flex-shrink:0;
}

.photo-cropper-title{
  color:#fff;
  font-size:16px;
  font-weight:800;
  text-align:center;
  flex:1;
}

.cropper-btn{
  border:none;
  border-radius:999px;
  padding:10px 16px;
  font-size:14px;
  font-weight:700;
  cursor:pointer;
  min-width:92px;
}

.cropper-btn-light{
  background:rgba(255,255,255,0.12);
  color:#fff;
  border:1px solid rgba(255,255,255,0.12);
}

.cropper-btn-primary{
  background:linear-gradient(135deg, #7b2cff, #ff4fd8);
  color:#fff;
  box-shadow:0 8px 24px rgba(123,44,255,0.28);
}

.photo-cropper-stage{
  flex:1;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  padding:10px 12px;
}

.photo-cropper-stage img{
  display:block;
  max-width:100%;
}

.photo-cropper-footer{
  padding:14px 18px calc(14px + env(safe-area-inset-bottom)) 18px;
  text-align:center;
  flex-shrink:0;
}

.photo-cropper-hint{
  margin:0;
  color:rgba(255,255,255,0.82);
  font-size:13px;
  line-height:1.4;
}

.cropper-container{
  touch-action:none;
}

.cropper-bg{
  background:transparent !important;
}

.cropper-view-box{
  outline:2px solid rgba(255,255,255,0.95);
  outline-color:rgba(255,255,255,0.95);
  border-radius:22px;
}

.cropper-face{
  background-color:rgba(255,255,255,0.04);
}

.cropper-line,
.cropper-point{
  background-color:#ffffff;
}

.cropper-point.point-se,
.cropper-point.point-sw,
.cropper-point.point-ne,
.cropper-point.point-nw{
  width:12px;
  height:12px;
  border-radius:50%;
}

.cropper-modal{
  background-color:rgba(0,0,0,0.45) !important;
}

/* =========================
   MATCHES
========================= */

.matchesShell{
  display:flex;
  gap:12px;
  height:calc(100vh - 160px);
}

.matchesSidebarCard{
  width:340px;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}

.matchesSidebarHeader{
  margin-bottom:10px;
}

.matchesSidebarTitleRow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.matchesSubhead{
  margin-top:6px;
  font-size:12px;
  opacity:.7;
}

.matchesSubheadLabel{
  font-weight:700;
}

.matchesCount{
  font-weight:800;
}

.matchesList{
  flex:1;
  overflow-y:auto;
  display:flex;
  flex-direction:column;
  gap:6px;
}

.yourTurnSection{
  margin-bottom:12px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.yourTurnHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  margin-bottom:8px;
}

.yourTurnTitle{
  font-weight:800;
}

.yourTurnCount{
  min-width:28px;
  height:28px;
  padding:0 10px;
  border-radius:999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.12);
  font-weight:800;
}

.yourTurnList{
  display:flex;
  flex-direction:column;
  gap:6px;
}

.matchItem{
  width:100%;
  border:none;
  background:transparent;
  padding:10px;
  border-radius:14px;
  transition:.2s;
}

.matchItem:hover{
  background:rgba(255,255,255,.05);
}

.matchItem.active{
  background:rgba(255,255,255,.08);
}

.chatSubtitle{
  font-size:12px;
  opacity:.7;
}

.matchesMobileShell{
  min-height:calc(100vh - 170px);
}

.matchesInboxView,
.matchConversationView{
  min-height:calc(100vh - 170px);
}

.matchConversationHeader{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding-bottom:12px;
  border-bottom:1px solid var(--stroke);
}

.matchBackBtn{
  min-width:44px;
  width:44px;
  height:44px;
  padding:0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
}

.matchConversationHeaderText{
  min-width:0;
  flex:1;
}

.matchConversationHeaderText h2{
  margin:0;
}

.chatComposer{
  border-top:1px solid var(--stroke);
  padding-top:10px;
}

.chatRow{
  display:flex;
  gap:8px;
  margin-top:10px;
}

.chatRow input{
  flex:1;
}

.chatBox{
  height:340px;
  overflow:auto;
  border:1px solid var(--stroke);
  border-radius:16px;
  padding:10px;
  background:rgba(0,0,0,.16);
  display:flex;
  flex-direction:column;
  gap:8px;
}

.matchConversationView .chatBox{
  height:calc(100vh - 340px);
  min-height:320px;
}

.bubble{
  max-width:78%;
  margin:0;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid var(--stroke);
  font-size:14px;
  line-height:1.4;
  word-break:break-word;
}

.bubble--me{
  align-self:flex-end;
  background:linear-gradient(135deg, #7c3aed, #a855f7);
}

.bubble--other{
  align-self:flex-start;
  background:rgba(255,255,255,.08);
}

.messageRow{
  display:flex;
  width:100%;
}

.messageRow--me{
  justify-content:flex-end;
}

.messageRow--other{
  justify-content:flex-start;
}

.messageRow .bubble{
  max-width:78%;
}

.messageSenderAvatarInline{
  width:22px;
  height:22px;
  min-width:22px;
  border-radius:50%;
  object-fit:cover;
  object-position:center;
  display:block;
  border:1px solid rgba(255,255,255,.28);
  pointer-events:none;
  user-select:none;
}

/* =========================
   MATCH PROFILE PANEL
========================= */

.matchViewTabs{
  display:flex;
  gap:8px;
  margin:8px 0 14px;
  padding:4px;

  width:fit-content;

  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.matchViewTab{
  flex:none;

  min-height:38px;
  padding:0 18px;

  border-radius:999px;
  background:transparent;
  color:rgba(255,255,255,.72);

  border:none;
  box-shadow:none;

  font-size:13px;
  font-weight:900;
}

.matchViewTab.active{
  background:linear-gradient(135deg, #ff4f9a, #ff5da8);
  color:#fff;
  box-shadow:0 6px 16px rgba(255,79,154,.22);
}

.matchProfilePanel{
  display:flex;
  flex-direction:column;
  gap:14px;
  padding-bottom:90px;
}

.matchProfileGroupBlock{
  border-radius:22px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  overflow:hidden;
}

.matchProfileSwipeCard{
  position:relative;
  width:100%;
  aspect-ratio:4 / 5;
  background:#000;
  border-radius:22px;
  overflow:hidden;
}

.matchProfileSwipeImg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
  display:block;
}

.matchProfilePhotoBars{
  position:absolute;
  top:12px;
  left:12px;
  right:12px;
  display:flex;
  gap:4px;
  z-index:3;
}

.matchProfilePhotoBar{
  flex:1;
  height:4px;
  border-radius:999px;
  background:rgba(255,255,255,.30);
}

.matchProfilePhotoBar.active{
  background:rgba(255,255,255,.95);
}

.matchProfileInfoPanel{
  margin-top:14px;
  padding:18px 16px;
  border-radius:22px;
  background:linear-gradient(180deg, rgba(22,12,38,.96), rgba(10,8,22,.96));
  border:1px solid rgba(255,255,255,.08);
}

.matchProfileGroupName{
  font-size:22px;
  font-weight:900;
  color:#fff;
  line-height:1.05;
}

.matchProfileGroupCity{
  margin-top:4px;
  font-size:14px;
  font-weight:700;
  color:rgba(255,255,255,.76);
}

.matchProfileGroupBio{
  margin-top:10px;
  font-size:15px;
  color:rgba(255,255,255,.92);
  line-height:1.45;
}

.matchProfileOutings{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.matchProfileOutingChip{
  padding:9px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.22);
  color:#fff;
  font-size:13px;
  font-weight:800;
}

.matchProfileMembersTitle{
  margin-top:16px;
  font-size:18px;
  font-weight:900;
  color:#fff;
}

.matchProfileMembersPreview{
  display:flex;
  align-items:center;
  gap:10px;
  flex-wrap:wrap;
  margin-top:10px;
}

.matchProfileMemberPreviewBtn{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  border-radius:50%;
  padding:0;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:none;
}

.matchProfileMemberPreviewBtn img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.matchProfileMemberPreviewFallback{
  font-size:14px;
  font-weight:900;
  color:#fff;
}

.matchProfileMemberHint{
  margin-top:10px;
  font-size:13px;
  color:rgba(255,255,255,.74);
}

.matchProfileMembersList{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:12px;
}

.matchProfileMemberCard{
  display:flex;
  gap:12px;
  padding:12px;
  border-radius:18px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.matchProfileMemberAvatar{
  width:58px;
  height:58px;
  min-width:58px;
  border-radius:18px;
  overflow:hidden;
  background:rgba(255,255,255,.08);
  display:flex;
  align-items:center;
  justify-content:center;
}

.matchProfileMemberAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.matchProfileMemberAvatar span{
  font-size:18px;
  font-weight:900;
  color:#fff;
}

.matchProfileMemberName{
  font-size:15px;
  font-weight:900;
}

.matchProfileMemberCity{
  margin-top:2px;
  font-size:12px;
  color:rgba(255,255,255,.68);
}

.matchProfileMemberBio{
  margin-top:4px;
  font-size:13px;
  color:rgba(255,255,255,.74);
  line-height:1.35;
}

/* =========================
   JOIN PAGE - LEGACY
========================= */

.joinGroupPage{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.joinGroupHero{
  padding:16px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.12);
  background:
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.03)),
    rgba(0,0,0,.16);
}

.joinGroupTitle{
  font-size:24px;
  font-weight:900;
  line-height:1.05;
  color:#fff;
}

.joinGroupSubtitle{
  margin-top:6px;
  font-size:14px;
  color:rgba(255,255,255,.78);
  font-weight:700;
}

.joinSectionHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.joinSectionHeader h3{
  margin:0;
  font-size:20px;
  font-weight:900;
}

.joinHostCard{
  padding:14px;
}

.joinHostTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.joinHostPreview{
  width:86px;
  min-width:86px;
  height:110px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
}

.joinHostPreview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.joinHostControls{
  margin-top:12px;
}

.joinHostControls select{
  margin-top:6px;
}

.joinHostActions{
  margin-top:12px;
  display:flex;
  gap:10px;
  flex-wrap:wrap;
}

.joinHostActions button{
  min-height:50px;
  padding:12px 18px;
  font-size:15px;
}

.joinPlaceholderPhoto{
  width:100%;
  height:100%;
  min-height:110px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:10px;
  text-align:center;
  color:rgba(255,255,255,.68);
  background:rgba(255,255,255,.05);
  font-size:13px;
  font-weight:700;
}

.joinPlaceholderPhoto.small{
  min-height:56px;
}

.joinGroupChatCard{
  padding:0;
  overflow:hidden;
}

.joinGroupChatHeader{
  padding:16px 16px 10px;
  border-bottom:1px solid rgba(255,255,255,.08);
}

.joinGroupChatHeader h3{
  margin:0;
  font-size:20px;
  font-weight:900;
}

.joinGroupChatBox{
  height:380px;
  overflow:auto;
  padding:14px;
  background:rgba(0,0,0,.14);
  display:flex;
  flex-direction:column;
  gap:10px;
}

.joinGroupComposer{
  padding:12px 14px 14px;
  border-top:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.03);
}

.joinGroupComposer .chatRow{
  margin-top:0;
}

.joinGroupComposer input{
  min-height:50px;
}

.joinGroupComposer button{
  min-width:108px;
  min-height:50px;
  font-size:15px;
}

.joinSystemBubble{
  align-self:center;
  width:min(100%, 520px);
  padding:12px 14px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.06);
  text-align:center;
}

.joinSystemText{
  font-size:14px;
  font-weight:800;
  line-height:1.45;
  color:#fff;
}

.joinRequestBubble{
  align-self:center;
  width:min(100%, 560px);
}

.joinRequestBubbleInner{
  padding:14px;
  border-radius:20px;
  border:2px solid rgba(255,255,255,.14);
  background:
    linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)),
    rgba(0,0,0,.24);
  box-shadow:var(--shadow-md);
}

.joinRequestBubbleText{
  font-size:16px;
  font-weight:900;
  line-height:1.4;
  color:#fff;
  text-align:center;
}

.joinRequestBubbleStatus{
  margin-top:8px;
  text-align:center;
  font-size:13px;
  color:rgba(255,255,255,.78);
  font-weight:800;
}

.joinRequestBubbleActions{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:10px;
  margin-top:12px;
}

.joinRequestBubbleActions button{
  min-height:52px;
  font-size:15px;
  font-weight:900;
}

.joinAcceptBtn{
  background:linear-gradient(135deg, #13c97b, #22c55e);
}

.joinRejectBtn{
  background:linear-gradient(135deg, #ff6b6b, #ff3b30);
}

.joinRequestsCard h3{
  margin:0 0 12px;
  font-size:19px;
  font-weight:900;
}

.joinRequestStatusList{
  display:flex;
  flex-direction:column;
  gap:10px;
}

.joinRequestStatusItem{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}

.joinRequestStatusPreview{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:14px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.joinRequestStatusPreview img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.joinRequestStatusContent{
  min-width:0;
  flex:1;
}

.joinRequestStatusTop{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  flex-wrap:wrap;
}

.joinStatusBadge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  font-size:12px;
  font-weight:900;
  color:#fff;
}

.status-pending{
  background:linear-gradient(135deg, #f59e0b, #fbbf24);
}

.status-accepted{
  background:linear-gradient(135deg, #10b981, #22c55e);
}

.status-rejected{
  background:linear-gradient(135deg, #ef4444, #ff5f6d);
}

.status-cancelled{
  background:linear-gradient(135deg, #6b7280, #9ca3af);
}

.joinDiscoverGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:12px;
}

.joinDiscoverCard{
  overflow:hidden;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(0,0,0,.20);
  box-shadow:var(--shadow-md);
}

.joinDiscoverPhotoWrap{
  width:100%;
  aspect-ratio:4 / 5;
  background:rgba(0,0,0,.22);
}

.joinDiscoverPhoto{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.joinDiscoverBody{
  padding:12px;
}

.joinDiscoverTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.joinDiscoverTop strong{
  font-size:17px;
  line-height:1.2;
}

.joinRequestBtn{
  width:100%;
  min-height:52px;
  margin-top:12px;
  font-size:15px;
  font-weight:900;
}

/* =========================
   JOIN PREMIUM D
========================= */

.joinPremiumShell{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.joinHeroCard{
  position:relative;
  overflow:hidden;
  padding:18px;
  background:
    radial-gradient(circle at top right, rgba(255,255,255,.16), transparent 28%),
    radial-gradient(circle at bottom left, rgba(138,43,226,.28), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.03)),
    rgba(14,10,28,.92);
}

.joinHeroCard::before{
  content:"";
  position:absolute;
  inset:auto -40px -50px auto;
  width:180px;
  height:180px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(255,77,139,.18), transparent 70%);
  pointer-events:none;
}

.joinHeroTop{
  position:relative;
  z-index:1;
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:14px;
}

.joinHeroEyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:11px;
  font-weight:900;
  letter-spacing:.06em;
  text-transform:uppercase;
}

.joinHeroTitle{
  margin:10px 0 0;
  font-size:30px;
  line-height:1.02;
  font-weight:900;
  color:#fff;
}

.joinHeroSubtitle{
  margin-top:10px;
  max-width:700px;
  color:rgba(255,255,255,.80);
  font-size:14px;
  line-height:1.5;
  font-weight:600;
}

.joinHeroStatus{
  flex:0 0 auto;
  display:flex;
  align-items:flex-start;
  justify-content:flex-end;
}

.joinPremiumLayout{
  display:flex;
  flex-direction:column;
  gap:14px;
}

.joinPremiumStatusCard,
.joinPremiumActionCard,
.joinPremiumRequestsCard,
.joinPremiumExploreCard,
.joinPremiumConversationCard{
  overflow:hidden;
}

.joinPremiumHeaderRow{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
  margin-bottom:12px;
}

.joinPremiumTitle{
  margin:0;
  font-size:22px;
  line-height:1.05;
  font-weight:900;
  color:#fff;
}

.joinPremiumSubtext{
  margin-top:6px;
  color:rgba(255,255,255,.76);
  font-size:13px;
  line-height:1.45;
}

.joinStatusPanel{
  display:grid;
  grid-template-columns:1.2fr .8fr;
  gap:14px;
}

.joinStatusMain{
  min-width:0;
}

.joinStatusLabel{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:34px;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  color:#fff;
  font-size:13px;
  font-weight:900;
}

.joinStatusMeta{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:10px;
  margin-top:14px;
}

.joinStatusMetric{
  padding:12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.joinStatusMetricLabel{
  font-size:11px;
  color:rgba(255,255,255,.62);
  text-transform:uppercase;
  letter-spacing:.05em;
  font-weight:800;
}

.joinStatusMetricValue{
  margin-top:6px;
  font-size:15px;
  color:#fff;
  font-weight:900;
  line-height:1.3;
}

.joinStatusPreview{
  display:flex;
  align-items:center;
  justify-content:center;
}

.joinStatusPhotoCard{
  width:100%;
  border-radius:20px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.joinStatusPhoto{
  width:100%;
  aspect-ratio:4 / 5;
  object-fit:cover;
  display:block;
}

.joinStatusPhotoFallback{
  width:100%;
  aspect-ratio:4 / 5;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:18px;
  color:rgba(255,255,255,.72);
  font-weight:800;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03));
}

.joinActionHero{
  display:grid;
  grid-template-columns:1fr auto;
  gap:14px;
  align-items:center;
  padding:14px;
  border-radius:20px;
  border:1px solid rgba(255,255,255,.10);
  background:
    radial-gradient(circle at top right, rgba(255,77,139,.18), transparent 30%),
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.16);
}

.joinActionHeroText{
  min-width:0;
}

.joinActionEyebrow{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.12);
  font-size:11px;
  font-weight:900;
  text-transform:uppercase;
  letter-spacing:.06em;
}

.joinActionTitle{
  margin:10px 0 0;
  font-size:22px;
  font-weight:900;
  line-height:1.08;
}

.joinActionDescription{
  margin-top:8px;
  color:rgba(255,255,255,.78);
  line-height:1.45;
  font-size:14px;
}

.joinActionButtons{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:14px;
}

.joinActionButtons button{
  min-height:50px;
  padding:12px 18px;
  font-size:15px;
}

.joinActionMedia{
  width:94px;
  min-width:94px;
  height:120px;
  border-radius:18px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.joinActionMedia img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.joinActionMediaFallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:12px;
  font-size:12px;
  font-weight:800;
  color:rgba(255,255,255,.72);
}

.joinCardSectionTitle{
  margin:0 0 10px;
  font-size:19px;
  font-weight:900;
  color:#fff;
}

.joinCardSectionSubtext{
  margin:0 0 12px;
  color:rgba(255,255,255,.72);
  line-height:1.45;
  font-size:13px;
}

.joinConversationShell{
  display:flex;
  flex-direction:column;
  gap:12px;
}

.joinConversationSummary{
  display:flex;
  align-items:center;
  gap:12px;
  padding:12px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,.08);
  background:rgba(255,255,255,.04);
}

.joinConversationSummaryPhoto{
  width:54px;
  min-width:54px;
  height:54px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.12);
  background:rgba(255,255,255,.05);
}

.joinConversationSummaryPhoto img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.joinConversationSummaryBody{
  min-width:0;
  flex:1;
}

.joinConversationSummaryTitle{
  font-size:16px;
  font-weight:900;
  color:#fff;
  line-height:1.2;
}

.joinConversationSummaryMeta{
  margin-top:4px;
  color:rgba(255,255,255,.70);
  font-size:13px;
}

.joinPremiumRequestsCard .joinRequestStatusItem{
  padding:12px;
}

.joinDiscoverGrid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:14px;
}

.joinDiscoverCard{
  overflow:hidden;
  border-radius:22px;
  border:1px solid rgba(255,255,255,.10);
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)),
    rgba(0,0,0,.20);
  box-shadow:var(--shadow-md);
  transition:transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

.joinDiscoverCard:hover{
  transform:translateY(-2px);
  border-color:rgba(255,255,255,.16);
  box-shadow:0 16px 32px rgba(0,0,0,.24);
}

.joinDiscoverPhotoWrap{
  width:100%;
  aspect-ratio:4 / 5;
  background:rgba(0,0,0,.22);
  position:relative;
  overflow:hidden;
}

.joinDiscoverPhoto{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.joinDiscoverPhotoWrap::after{
  content:"";
  position:absolute;
  inset:auto 0 0 0;
  height:40%;
  background:linear-gradient(180deg, transparent, rgba(0,0,0,.34));
  pointer-events:none;
}

.joinDiscoverBody{
  padding:14px;
}

.joinDiscoverTop{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom:6px;
}

.joinDiscoverTop strong{
  font-size:18px;
  line-height:1.2;
  font-weight:900;
}

.joinDiscoverMetaRow{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  margin-top:8px;
}

.joinMiniBadge{
  display:inline-flex;
  align-items:center;
  min-height:28px;
  padding:4px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.10);
  font-size:12px;
  font-weight:800;
  color:#fff;
}

.joinDiscoverBio{
  margin-top:10px;
  color:rgba(255,255,255,.78);
  font-size:13px;
  line-height:1.45;
  min-height:38px;
}

.joinRequestBtn{
  width:100%;
  min-height:52px;
  margin-top:12px;
  font-size:15px;
  font-weight:900;
}

.joinRequestIdentity{
  display:flex;
  align-items:center;
  gap:12px;
  margin-bottom:12px;
  padding:10px 12px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,.10);
  background:rgba(255,255,255,.05);
  cursor:pointer;
  transition:transform .12s ease, background .15s ease, border-color .15s ease;
}

.joinRequestIdentity:hover{
  background:rgba(255,255,255,.08);
  border-color:rgba(255,255,255,.16);
}

.joinRequestIdentity:active{
  transform:scale(.99);
}

.joinRequestIdentityAvatar{
  width:56px;
  height:56px;
  min-width:56px;
  border-radius:16px;
  overflow:hidden;
  border:1px solid rgba(255,255,255,.14);
  background:rgba(255,255,255,.06);
  display:flex;
  align-items:center;
  justify-content:center;
}

.joinRequestIdentityAvatar img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

.joinRequestIdentityFallback{
  width:100%;
  height:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:20px;
  font-weight:900;
  color:#fff;
  background:linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.04));
}

.joinRequestIdentityText{
  min-width:0;
  flex:1;
  display:flex;
  flex-direction:column;
  gap:4px;
}

.joinRequestIdentityName{
  font-size:15px;
  font-weight:900;
  color:#fff;
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

.joinRequestIdentityHint{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.72);
  line-height:1.2;
}

.joinRequestIdentityWrap{
  position:relative;
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:12px;
}

.joinRequestIdentityWrap .joinRequestIdentity{
  flex:1;
  margin-bottom:0;
}

.joinUserMenuWrap{
  position:relative;
  flex:0 0 auto;
  z-index:20;
}

.joinUserMenuTrigger{
  appearance:none;
  -webkit-appearance:none;
  width:auto;
  height:auto;
  min-width:auto;
  min-height:auto;
  margin:0;
  padding:0 4px;
  border:none !important;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  color:#fff;
  font-size:24px;
  font-weight:900;
  line-height:1;
  cursor:pointer;
}

.joinUserMenuTrigger:hover{
  background:transparent !important;
  box-shadow:none !important;
  opacity:.72;
  transform:none;
}

.joinUserMenuTrigger:active{
  transform:none;
}

.joinUserActionsMenu{
  position:absolute;
  top:30px;
  right:0;
  min-width:210px;
  padding:8px;
  border-radius:14px;
  background:#151515;
  border:1px solid rgba(255,255,255,.08);
  box-shadow:0 10px 30px rgba(0,0,0,.35);
  z-index:9999;
}

.joinUserActionsMenu button{
  width:100%;
  min-height:42px;
  border:none;
  background:transparent !important;
  text-align:left;
  padding:10px 12px;
  border-radius:10px;
  cursor:pointer;
  font-size:14px;
  font-weight:800;
  box-shadow:none !important;
}

.joinUserActionsMenu button:hover{
  background:rgba(255,255,255,.06) !important;
}

.joinUserReportBtn{
  color:#ffe082 !important;
}

.joinUserBlockBtn{
  color:#ff8c8c !important;
}

/* =========================
   MATCH / JOIN SPECIAL BUBBLES
========================= */

.joinSystemBubble,
.joinRequestBubble{
  margin-top:2px;
  margin-bottom:2px;
}

/* =========================
   RESPONSIVE
========================= */

@media(max-width: 900px){
  .grid3{
    grid-template-columns:1fr;
  }
}

@media(max-width: 820px){
  .grid2{
    grid-template-columns:1fr;
  }

  .joinStatusPanel{
    grid-template-columns:1fr;
  }

  .joinActionHero{
    grid-template-columns:1fr;
  }

  .joinActionMedia{
    width:100%;
    min-width:0;
    height:auto;
    aspect-ratio:4 / 3;
  }
}

@media(max-width: 768px){
  .matchesShell{
    flex-direction:column;
    height:auto;
  }

  .matchesSidebarCard{
    width:100%;
    height:40%;
  }

  .chatCard{
    height:60%;
  }

  .bubble{
  max-width:86%;
}

.messageRow .bubble{
  max-width:86%;
} 

  .matchesMobileShell{
    min-height:calc(100vh - 155px);
  }

  .matchesInboxView,
  .matchConversationView{
    min-height:calc(100vh - 155px);
    border-radius:18px;
  }

  .matchConversationView .chatBox{
    height:calc(100vh - 330px);
    min-height:300px;
  }

  .photo-cropper-shell{
    max-width:460px;
    margin:0 auto;
    box-shadow:0 0 40px rgba(0,0,0,.35);
  }
}

@media(max-width: 640px){
.tabs{
    width:100%;
    left:0;
    right:0;
    bottom:0;

    gap:0;

    padding:
        10px
        max(18px, env(safe-area-inset-right))
        calc(10px + var(--safe-bottom))
        max(18px, env(safe-area-inset-left));
}

  .tab{
    width:48px;
    height:48px;
    min-width:48px;
    min-height:48px;
  }

  .tabIcon{
    width:28px;
    height:28px;
  }

  .swipeTopbar{
    grid-template-columns:1fr;
    gap:8px;
  }

  .swipeTopbarSide,
  .swipeTopbarSideRight{
    justify-content:flex-start;
  }

.swipeGroupTitleTop{
  position:relative;
  text-align:center;
  font-size:24px;
  font-weight:950;
  color:#fff;
  padding:0;
  margin:0;
  overflow:visible;
  white-space:normal;
  text-overflow:unset;
  z-index:200;
}

  .swipeCard{
  min-height:860px;
  padding:8px;
  background:transparent;
  border-color:transparent;
} 

.hingeCard{
  height:72vh;
  min-height:560px;
  max-height:690px;
}

  .swipePhoto{
    aspect-ratio:4 / 5;
    border-radius:20px;
  }

  .groupPreview{
    aspect-ratio:4 / 5;
  }

  .locationMap{
    height:360px;
  }

  .profileDangerRow{
    grid-template-columns:1fr;
  }

  .joinHeroCard{
    padding:16px;
  }

  .joinHeroTop{
    flex-direction:column;
    align-items:flex-start;
  }

  .joinHeroTitle{
    font-size:26px;
  }

  .joinDiscoverGrid{
    grid-template-columns:1fr;
  }

  .joinHostTop{
    align-items:stretch;
  }

  .joinHostPreview{
    width:74px;
    min-width:74px;
    height:98px;
  }

  .joinGroupTitle{
    font-size:22px;
  }

  .joinRequestBubbleInner{
    padding:12px;
  }

  .joinRequestBubbleText{
    font-size:15px;
  }

  .joinRequestBubbleActions{
    grid-template-columns:1fr;
  }

  .joinGroupChatBox{
    height:320px;
    padding:12px;
  }

  .joinGroupComposer{
    padding:12px;
  }

  .joinGroupComposer .chatRow{
    flex-direction:column;
  }

  .joinGroupComposer button{
    width:100%;
  }

  .chatRow{
    flex-direction:row;
  }

  .joinStatusMeta{
    grid-template-columns:1fr;
  }

  .joinConversationSummary{
    align-items:flex-start;
  }

  .joinRequestIdentity{
    padding:10px;
    gap:10px;
  }

  .joinRequestIdentityAvatar{
    width:50px;
    height:50px;
    min-width:50px;
    border-radius:14px;
  }

  .joinRequestIdentityName{
    font-size:14px;
  }

  .joinRequestIdentityHint{
    font-size:11px;
  }

  .joinRequestIdentityWrap{
    gap:8px;
    align-items:flex-start;
  }

  .joinUserActionsMenu{
    right:0;
    min-width:200px;
  }

    .matchViewTabs{
    margin-top:6px;
  }

  .matchViewTab{
    min-height:42px;
    font-size:13px;
  }

  .matchProfileGroupName{
    font-size:21px;
  }

  .matchProfileInfoPanel{
    padding:16px 14px;
  }

  .matchProfileMemberAvatar{
    width:50px;
    height:50px;
    min-width:50px;
    border-radius:16px;
  }

  .matchProfileMemberPreviewBtn{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }
}
/* =========================================
   MATCH HEADER TABS FIX
========================================= */

.matchConversationTabs{
  display:flex;
  align-items:center;
  gap:6px;

  width:fit-content;

  margin:4px 0 12px;
  padding:4px;

  border-radius:999px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.matchConversationTab{
  flex:none;

  min-width:auto;
  min-height:34px;

  padding:0 14px;

  border:none;
  border-radius:999px;

  background:transparent;
  color:rgba(255,255,255,.72);

  font-size:12px;
  font-weight:900;

  box-shadow:none;
}

.matchConversationTab.active{
  background:linear-gradient(135deg, #ff4f9a, #ff5da8);
  color:#fff;

  box-shadow:0 6px 14px rgba(255,79,154,.20);
}

.photoTapZone{
  position:absolute;
  top:0;
  bottom:0;
  width:50%;
  z-index:6;
  border:none;
  background:transparent !important;
  box-shadow:none !important;
  padding:0;
  margin:0;
  min-height:0;
  border-radius:0;
}

.photoTapZoneLeft{
  left:0;
}

.photoTapZoneRight{
  right:0;
}

.photoTapZone:active,
.photoTapZone:hover{
  background:transparent !important;
  box-shadow:none !important;
  transform:none;
  opacity:1;
}

/* =========================
   AUTH FULLSCREEN / ONBOARDING
========================= */

body.authMode{
  padding-bottom:0;
  min-height:100vh;
  overflow-x:hidden;
}

body.appMode{
  padding-bottom:88px;
}

.authFullscreen{
  min-height:100vh;
  padding:0;
}

.authHero{
  min-height:100vh;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:22px;
  padding:24px 0 34px;
  animation:authFadeIn .45s ease both;
}

.authLogoWrap{
  text-align:center;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:8px;
}

.authLogo{
  width:86px;
  height:86px;
  border-radius:28px;
  overflow:hidden;
  display:grid;
  place-items:center;
  background:rgba(255,255,255,.92);
  box-shadow:0 18px 45px rgba(0,0,0,.26);
}

.authLogo img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.authLogoWrap h1{
  margin:10px 0 0;
  font-size:38px;
  font-weight:950;
  letter-spacing:-.04em;
  color:#fff;
}

.authLogoWrap p{
  margin:0;
  max-width:320px;
  color:rgba(255,255,255,.82);
  font-size:15px;
  font-weight:700;
  line-height:1.35;
}

.authCardsGrid{
  width:min(100%, 860px);
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px;
}

.authCard{
  padding:18px;
  border-radius:26px;
  background:
    radial-gradient(circle at top right, rgba(255,77,139,.20), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(14,10,28,.88);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.authCardHeader{
  margin-bottom:12px;
}

.authCardHeader h2{
  margin:0;
  font-size:24px;
  font-weight:950;
  letter-spacing:-.03em;
}

.authCardHeader p{
  margin:6px 0 0;
  color:rgba(255,255,255,.72);
  font-size:13px;
  line-height:1.35;
  font-weight:650;
}

.authPrimaryBtn{
  width:100%;
  min-height:56px;
  margin-top:14px;
  border-radius:18px;
  font-size:17px;
  font-weight:950;
  background:linear-gradient(135deg, #ff4f9a, #ff5da8);
  box-shadow:0 14px 34px rgba(255,79,154,.30);
}

.authSocialBox{
  margin-top:18px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.10);
}

.authSocialBox h3{
  margin:0 0 10px;
  font-size:16px;
  font-weight:950;
}

.authSocialBtn{
  width:100%;
  margin-top:10px;
  min-height:52px;
  border-radius:18px;
}

.authInviteCard{
  width:min(100%, 860px);
  margin:0 auto;
}

@keyframes authFadeIn{
  from{
    opacity:0;
    transform:translateY(12px);
  }
  to{
    opacity:1;
    transform:translateY(0);
  }
}

@media(max-width: 820px){
  .authCardsGrid{
    grid-template-columns:1fr;
    width:100%;
  }

  .authHero{
    justify-content:flex-start;
    padding-top:24px;
  }

  .authLogo{
    width:76px;
    height:76px;
    border-radius:24px;
  }

  .authLogoWrap h1{
    font-size:34px;
  }

  .authCard{
    border-radius:24px;
  }
}

body.authSuccessTransition .authHero{
  opacity:.35;
  transform:scale(.985);
  transition:opacity .18s ease, transform .18s ease;
}

/* =========================
   AUTH CHOICE PANELS
========================= */

.authEntryCard{
  width:min(100%, 860px);
  margin:0 auto;
  padding:20px;
  border-radius:28px;
  background:
    radial-gradient(circle at top right, rgba(255,77,139,.20), transparent 34%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    rgba(14,10,28,.88);
  border:1px solid rgba(255,255,255,.14);
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

.authEntryCard h2{
  margin:0;
  font-size:26px;
  font-weight:950;
  letter-spacing:-.03em;
}

.authEntryCard p{
  margin:8px 0 0;
  color:rgba(255,255,255,.74);
  font-size:14px;
  font-weight:650;
  line-height:1.35;
}

.authChoiceButtons{
  display:grid;
  gap:10px;
  margin-top:18px;
}

.authChoiceBtn{
  width:100%;
  min-height:54px;
  border-radius:18px;
  font-size:16px;
  font-weight:950;
}

.authChoiceButtons button.active{
  border-color:rgba(255,79,154,.75);
  box-shadow:0 0 0 1px rgba(255,79,154,.35), 0 14px 34px rgba(255,79,154,.18);
}

.authChoicePanel{
  grid-column:1 / -1;
  width:min(100%, 640px);
  margin:0 auto;
  opacity:0;
  transform:translateY(14px) scale(.985);
}

.authChoicePanel.authPanelOpen{
  opacity:1;
  transform:translateY(0) scale(1);
  transition:opacity .28s ease, transform .28s ease;
}

/* =========================
   BOONS PREMIUM OFFERS
========================= */

.profilePremiumHeader{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  margin-bottom:10px;
}

.profileTitleWithBadge{
  display:flex;
  align-items:center;
  gap:8px;
  min-width:0;
}

.profileTitleWithBadge h2{
  margin:0;
}

.profilePremiumBadge{
  width:24px;
  height:24px;
  object-fit:contain;
  display:block;
  flex:0 0 auto;
}

.boonsPremiumEntry{
  display:flex;
  align-items:center;
  gap:10px;

  padding:0;
  margin:0;

  background:none !important;
  border:none !important;
  box-shadow:none !important;

  color:#fff;
  cursor:pointer;

  flex-shrink:0;
}

.boonsPremiumEntry:hover{
  opacity:.92;
  transform:none;
}

.boonsPremiumEntry:active{
  transform:none;
}

.boonsPremiumEntryText{
  font-size:15px;
  font-weight:800;
  color:#fff;
  white-space:nowrap;
}

.boonsBoostIcon{
  width:42px;
  height:42px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:linear-gradient(135deg,#8A2BE2,#FF4D8B);
  border:1px solid rgba(255,255,255,.22);

  box-shadow:0 0 18px rgba(255,77,139,.42);

  font-size:22px;
  line-height:1;

  filter:drop-shadow(0 4px 8px rgba(0,0,0,.28));
}

.boons-offers-modal,
.boons-group-choice-modal{
  position:fixed;
  inset:0;
  z-index:30000;
  background:rgba(8,8,16,.88);
  display:flex;
  align-items:stretch;
  justify-content:center;
}

.boons-offers-sheet,
.boons-group-choice-sheet{
  width:100%;
  max-width:520px;
  height:100%;
  background:#f4f4f6;
  color:#161616;
  overflow:auto;
  box-shadow:0 -12px 40px rgba(0,0,0,.42);
}

.boons-offers-topbar,
.boons-group-choice-header{
  position:sticky;
  top:0;
  z-index:5;
  display:flex;
  align-items:center;
  gap:12px;
  padding:calc(env(safe-area-inset-top) + 14px) 16px 14px;
  background:#f4f4f6;
  border-bottom:1px solid rgba(0,0,0,.06);
}

.boons-offers-close{
  width:42px;
  height:42px;
  min-width:42px;
  min-height:42px;
  padding:0;
  border-radius:50%;
  background:#ffffff;
  color:#111;
  border:1px solid rgba(0,0,0,.08);
  box-shadow:0 6px 16px rgba(0,0,0,.08);
}

.boons-offers-title-block{
  min-width:0;
}

.boons-offers-title,
.boons-group-choice-title{
  font-size:22px;
  font-weight:950;
  line-height:1.05;
  color:#111;
}

.boons-offers-subtitle,
.boons-group-choice-subtitle{
  margin-top:4px;
  font-size:13px;
  font-weight:700;
  color:#666;
  line-height:1.3;
}

.boons-offers-content{
  padding:16px 14px calc(28px + env(safe-area-inset-bottom));
}

.boons-offers-section{
  margin-bottom:20px;
}

.boons-offers-section-title{
  margin:6px 0 14px;
  text-align:center;
  font-size:14px;
  font-weight:950;
  letter-spacing:.02em;
  color:#202020;
}

.boons-offers-divider{
  width:100%;
  height:1px;
  margin:22px 0 18px;
  background:rgba(0,0,0,.10);
}

.boons-offer-card{
  position:relative;
  width:100%;
  min-height:104px;
  margin:0 0 14px;
  padding:18px 16px 14px;
  border-radius:18px;
  background:#fff;
  color:#111;
  border:2px solid transparent;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:4px 12px;
  text-align:left;
}

.boons-offer-card-blue{
  border-color:#2f7bff;
  box-shadow:0 12px 28px rgba(47,123,255,.16);
}

.boons-offer-floating-badge{
  position:absolute;
  top:-11px;
  left:50%;
  transform:translateX(-50%);
  min-height:24px;
  padding:4px 12px;
  border-radius:999px;
  color:#fff;
  font-size:11px;
  font-weight:950;
  white-space:nowrap;
  box-shadow:0 8px 18px rgba(0,0,0,.12);
}

.boons-offer-badge-orange{
  background:#ff8a00;
}

.boons-offer-badge-blue{
  background:#2f7bff;
}

.boons-offer-badge-green{
  background:#19a463;
}

.boons-offer-name{
  font-size:20px;
  font-weight:950;
  color:#111;
}

.boons-offer-price{
  font-size:22px;
  font-weight:950;
  color:#111;
}

.boons-offer-main{
  font-size:15px;
  font-weight:850;
  color:#222;
}

.boons-offer-sub{
  font-size:13px;
  font-weight:800;
  color:#666;
}

.boons-plan-card,
.boons-premium-card{
  position:relative;
  padding:18px 14px 14px;
  border-radius:20px;
  background:#fff;
  color:#111;
  box-shadow:0 10px 26px rgba(0,0,0,.08);
}

.boons-plan-eyebrow,
.boons-premium-tag{
  width:max-content;
  margin:0 auto 8px;
  min-height:24px;
  padding:4px 12px;
  border-radius:999px;
  background:#111;
  color:#fff;
  font-size:11px;
  font-weight:950;
  letter-spacing:.02em;
}

.boons-premium-tag{
  background:#7c3aed;
}

.boons-plan-title{
  text-align:center;
  font-size:22px;
  font-weight:950;
  color:#111;
}

.boons-plan-subtitle{
  margin-top:4px;
  text-align:center;
  font-size:13px;
  font-weight:750;
  color:#666;
}

.boons-plan-option{
  position:relative;
  width:100%;
  min-height:78px;
  margin-top:14px;
  padding:14px;
  border-radius:16px;
  background:#fff;
  color:#111;
  border:2px solid rgba(0,0,0,.10);
  box-shadow:none;
  display:grid;
  grid-template-columns:1fr auto;
  gap:3px 10px;
  text-align:left;
  align-items:center;
}

.boons-plan-option-green{
  border-color:#19a463;
}

.boons-plan-period{
  font-size:17px;
  font-weight:950;
  color:#111;
}

.boons-plan-price{
  font-size:20px;
  font-weight:950;
  color:#111;
}

.boons-plan-note,
.boons-plan-monthly{
  font-size:13px;
  font-weight:800;
  color:#666;
}

.boons-plan-monthly{
  grid-column:1 / -1;
}

.boons-discount-badge{
  position:absolute;
  top:-11px;
  right:14px;
  min-height:24px;
  padding:4px 10px;
  border-radius:999px;
  background:#19a463;
  color:#fff;
  font-size:11px;
  font-weight:950;
}

.boons-premium-benefits{
  margin-top:14px;
  display:flex;
  flex-direction:column;
  gap:8px;
}

.boons-premium-benefit{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  min-height:42px;
  padding:10px 12px;
  border-radius:14px;
  background:#f3f3f5;
  color:#222;
  font-size:14px;
  font-weight:850;
}

.boons-premium-benefit strong{
  color:#19a463;
  font-size:18px;
}

.boons-saving-note{
  margin-top:14px;
  padding:12px 14px;
  border-radius:16px;
  background:#fff7d6;
  color:#423300;
  font-size:13px;
  line-height:1.35;
  font-weight:800;
}

/* =========================
   BOONS SUBSCRIPTION LEGAL
========================= */

.boons-subscription-legal{
  margin-top:22px;
  padding:0 6px calc(8px + env(safe-area-inset-bottom));
  text-align:center;
}

.boons-subscription-legal-divider{
  width:100%;
  height:1px;
  margin:0 0 18px;
  background:rgba(0,0,0,.10);
}

.boons-subscription-renewal{
  max-width:440px;
  margin:0 auto 18px;
  padding:0 8px;

  color:#888;
  font-size:11px;
  font-weight:550;
  line-height:1.55;
  letter-spacing:.005em;
}

.boons-subscription-legal-links{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  flex-wrap:wrap;

  padding:0 4px;
}

.boons-subscription-legal-link{
  appearance:none;
  -webkit-appearance:none;

  width:auto;
  min-width:0;
  min-height:32px;

  margin:0;
  padding:4px 2px;

  background:transparent !important;
  border:none !important;
  border-radius:0;
  box-shadow:none !important;

  color:#666;
  font-size:11px;
  font-weight:650;
  line-height:1.3;

  text-decoration:none;
  cursor:pointer;
}

.boons-subscription-legal-link:hover{
  background:transparent !important;
  color:#333;
  opacity:1;
  transform:none;
}

.boons-subscription-legal-link:active{
  background:transparent !important;
  color:#111;
  opacity:.7;
  transform:none;
}

.boons-subscription-legal-dot{
  color:#aaa;
  font-size:11px;
  line-height:1;
}

@media(max-width:640px){
  .boons-subscription-legal{
    margin-top:20px;
    padding-left:2px;
    padding-right:2px;
  }

  .boons-subscription-renewal{
    font-size:10.5px;
    line-height:1.5;
  }

  .boons-subscription-legal-links{
    gap:8px;
  }

  .boons-subscription-legal-link{
    font-size:10.5px;
  }
}

.boons-group-choice-sheet{
  height:auto;
  max-height:92vh;
  margin-top:auto;
  border-top-left-radius:26px;
  border-top-right-radius:26px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
}

.boons-group-choice-list{
  padding:14px;
  display:flex;
  flex-direction:column;
  gap:10px;
}

.boons-group-choice-item{
  width:100%;
  min-height:66px;
  padding:12px 14px;
  border-radius:16px;
  background:#fff;
  color:#111;
  border:2px solid transparent;
  box-shadow:0 8px 20px rgba(0,0,0,.06);
  text-align:left;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.boons-group-choice-item.active{
  border-color:#8A2BE2;
  box-shadow:0 10px 24px rgba(138,43,226,.14);
}

.boons-group-choice-name{
  font-size:15px;
  font-weight:950;
  color:#111;
}

.boons-group-choice-meta{
  margin-top:3px;
  font-size:12px;
  font-weight:750;
  color:#666;
}

.boons-confirm-offer-btn{
  width:calc(100% - 28px);
  margin:4px 14px 0;
  min-height:52px;
  border-radius:999px;
  background:linear-gradient(135deg, #8A2BE2, #FF4D8B);
  color:#fff;
  box-shadow:0 12px 26px rgba(255,77,139,.24);
}

#boonsOfferMsg{
  margin:10px 14px 0;
  color:#7c3aed;
}

@media(max-width: 640px){
  .boons-offers-sheet{
    max-width:none;
  }

  .boons-offers-content{
    padding-left:12px;
    padding-right:12px;
  }

  .boons-offer-card{
    min-height:100px;
  }

  .boons-offers-title{
    font-size:20px;
  }
}

/* =========================
   PROFILE HUB + EDITOR
========================= */


/* =========================
   PROFILE HUB
========================= */

#tab-profile{
  width:100%;
}

.profileHub{
  width:100%;
  max-width:520px;
  margin:0 auto;

  display:flex;
  flex-direction:column;
  align-items:center;

  padding:
    4px
    4px
    calc(30px + env(safe-area-inset-bottom));
}


/* =========================
   HUB TOPBAR
========================= */

.profileHubTopbar{
  width:100%;

  display:grid;
  grid-template-columns:52px 1fr 52px;
  align-items:center;

  margin-bottom:20px;
}

.profileHubTopSpacer{
  width:52px;
  height:52px;
}

.profileHubBrand{
  text-align:center;

  color:#fff;

  font-size:24px;
  font-weight:950;
  letter-spacing:-.035em;

  line-height:1;
}


/* Réglages en haut à droite */
.profileHubSettingsBtn{
  appearance:none;
  -webkit-appearance:none;

  width:48px;
  min-width:48px;
  height:48px;
  min-height:48px;

  margin:0 0 0 auto;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(0,0,0,.20) !important;

  border:1px solid rgba(255,255,255,.14);

  box-shadow:
    0 8px 22px rgba(0,0,0,.16),
    inset 0 1px 0 rgba(255,255,255,.06);

  color:#fff;

  font-size:21px;
  line-height:1;

  cursor:pointer;

  -webkit-tap-highlight-color:transparent;
}

.profileHubSettingsBtn:hover{
  background:rgba(255,255,255,.10) !important;
  opacity:1;
}

.profileHubSettingsBtn:active{
  transform:scale(.95);
}


/* =========================
   PROFILE IDENTITY
========================= */

/*
  Important :
  profileHubIdentity est un <button>.
  On neutralise donc complètement
  le style rose global des boutons.
*/
.profileHubIdentity{
  appearance:none;
  -webkit-appearance:none;

  width:100%;

  min-height:0;

  padding:0;
  margin:0;

  border:none !important;
  border-radius:0;

  background:transparent !important;

  box-shadow:none !important;

  color:#fff;

  display:flex;
  flex-direction:column;
  align-items:center;

  cursor:pointer;

  -webkit-tap-highlight-color:transparent;
}

.profileHubIdentity:hover{
  background:transparent !important;
  opacity:1;
  transform:none;
}

.profileHubIdentity:active{
  transform:none;
}


/* =========================
   AVATAR
========================= */

.profileHubAvatarWrap{
  position:relative;

  display:flex;
  align-items:center;
  justify-content:center;

  margin-top:2px;
}

.profileHubAvatarRing{
  position:relative;

  width:154px;
  height:154px;

  padding:5px;

  border-radius:50%;

  background:
    linear-gradient(
      135deg,
      rgba(138,43,226,1),
      rgba(255,77,139,1)
    );

  box-shadow:
    0 18px 40px rgba(0,0,0,.22),
    0 0 28px rgba(255,77,139,.16);
}

.profileHubAvatar{
  width:100%;
  height:100%;

  display:block;

  border-radius:50%;

  object-fit:cover;
  object-position:center;

  background:#171025;

  border:4px solid rgba(18,10,30,.96);

  user-select:none;
  -webkit-user-drag:none;
}

.profileHubAvatarFallback{
  position:absolute;
  inset:5px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  border:4px solid rgba(18,10,30,.96);

  background:
    radial-gradient(
      circle at 30% 20%,
      rgba(255,255,255,.16),
      transparent 35%
    ),
    linear-gradient(
      135deg,
      rgba(138,43,226,.88),
      rgba(255,77,139,.82)
    );

  color:#fff;

  font-size:48px;

  overflow:hidden;
}


/* =========================
   MODIFY PROFILE PILL
========================= */

.profileHubEditPill{
  min-height:39px;

  margin-top:-11px;

  padding:8px 13px;

  position:relative;
  z-index:3;

  display:flex;
  align-items:center;
  justify-content:center;
  gap:7px;

  border-radius:999px;

  background:rgba(21,14,33,.96);

  border:1px solid rgba(255,255,255,.14);

  box-shadow:
    0 9px 22px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.05);

  color:#fff;

  font-size:12px;
  font-weight:850;
  line-height:1;
}

.profileHubEditIcon{
  width:19px;
  height:19px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:rgba(255,255,255,.10);

  font-size:11px;
}

.profileHubEditChevron{
  margin-left:1px;

  color:rgba(255,255,255,.62);

  font-size:18px;
  font-weight:500;

  line-height:.8;
}


/* =========================
   NAME + AGE
========================= */

.profileHubIdentityName{
  margin-top:13px;

  color:#fff;

  font-size:23px;
  font-weight:950;

  letter-spacing:-.025em;
  line-height:1.15;

  text-align:center;
}


/* =========================
   PREMIUM ENTRY CARD
========================= */

.profileHubPremiumCard{
  appearance:none;
  -webkit-appearance:none;

  width:100%;

  min-height:94px;

  margin-top:28px;
  padding:16px;

  display:flex;
  align-items:center;
  gap:14px;

  text-align:left;

  border-radius:22px;

  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.10),
      rgba(255,255,255,.04)
    ),
    rgba(14,10,28,.90) !important;

  border:1px solid rgba(255,255,255,.13);

  box-shadow:
    0 16px 34px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);

  color:#fff;

  cursor:pointer;

  overflow:hidden;

  -webkit-tap-highlight-color:transparent;
}

.profileHubPremiumCard:hover{
  background:
    linear-gradient(
      135deg,
      rgba(255,255,255,.13),
      rgba(255,255,255,.05)
    ),
    rgba(14,10,28,.94) !important;

  opacity:1;
}

.profileHubPremiumCard:active{
  transform:scale(.985);
}

.profileHubPremiumIcon{
  width:52px;
  min-width:52px;
  height:52px;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:17px;

  background:
    linear-gradient(
      135deg,
      #8A2BE2,
      #FF4D8B
    );

  box-shadow:
    0 10px 24px rgba(255,77,139,.24);

  font-size:25px;
  line-height:1;
}

.profileHubPremiumContent{
  flex:1;
  min-width:0;
}

.profileHubPremiumTopline{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
}

.profileHubPremiumTitle{
  color:#fff;

  font-size:17px;
  font-weight:950;

  letter-spacing:-.015em;
}

.profileHubPremiumDescription{
  margin-top:5px;

  color:rgba(255,255,255,.67);

  font-size:12px;
  font-weight:650;

  line-height:1.4;
}

.profileHubPremiumArrow{
  flex:0 0 auto;

  color:rgba(255,255,255,.50);

  font-size:27px;
  font-weight:400;
  line-height:1;
}


/* Badge premium réel */
.profileHubPremiumBadge{
  width:27px;
  height:27px;

  margin-top:12px;

  object-fit:contain;

  filter:
    drop-shadow(0 0 8px rgba(255,215,0,.38));
}


/* =========================
   PROFILE EDITOR MODAL
========================= */

.profile-editor-modal{
  position:fixed;
  inset:0;

  z-index:30500;

  display:flex;
  align-items:stretch;
  justify-content:center;

  background:rgba(8,8,16,.88);
}


/* Page complète */
.profile-editor-sheet{
  width:100%;
  max-width:520px;
  height:100%;

  overflow-y:auto;
  overscroll-behavior:contain;

  background:#f4f4f6;

  color:#161616;

  box-shadow:0 -12px 40px rgba(0,0,0,.42);

  -webkit-overflow-scrolling:touch;
}


/* =========================
   EDITOR HEADER
========================= */

.profile-editor-topbar{
  position:sticky;
  top:0;
  z-index:20;

  min-height:74px;

  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;

  padding:
    calc(env(safe-area-inset-top) + 12px)
    16px
    12px;

  background:rgba(244,244,246,.96);

  border-bottom:1px solid rgba(0,0,0,.06);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}

.profile-editor-back{
  appearance:none;
  -webkit-appearance:none;

  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;

  margin:0;
  padding:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#fff !important;

  border:1px solid rgba(0,0,0,.08);

  box-shadow:0 6px 16px rgba(0,0,0,.08);

  color:#111;

  font-size:23px;
  font-weight:700;

  line-height:1;

  cursor:pointer;

  -webkit-tap-highlight-color:transparent;
}

.profile-editor-back:hover{
  background:#fff !important;
  opacity:.88;
  transform:none;
}

.profile-editor-back:active{
  transform:scale(.96);
}

.profile-editor-heading{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.profile-editor-title{
  color:#111;

  font-size:21px;
  font-weight:950;

  letter-spacing:-.02em;
  line-height:1.05;
}

.profile-editor-subtitle{
  margin-top:3px;

  color:#888;

  font-size:11px;
  font-weight:750;

  line-height:1.2;
}

.profile-editor-header-spacer{
  width:42px;
  height:42px;
}


/* =========================
   EDITOR CONTENT
========================= */

.profile-editor-content{
  width:100%;

  padding:
    16px
    14px
    calc(34px + env(safe-area-inset-bottom));

  display:flex;
  flex-direction:column;
  gap:14px;
}


/*
  On garde l'ancien contenu du profil,
  mais il adopte maintenant le thème
  clair du sous-écran.
*/
.profileEditorInfoCard,
.profileEditorPhotosCard{
  background:#fff;

  color:#181818;

  border:1px solid rgba(0,0,0,.05);

  box-shadow:
    0 8px 24px rgba(0,0,0,.055);

  border-radius:20px;
}

.profileEditorInfoCard h2,
.profileEditorPhotosCard h2{
  color:#161616;
}


/* Labels de l'éditeur */
.profile-editor-content label{
  color:#777;

  font-size:12px;
  font-weight:750;
}


/* Inputs de l'éditeur */
.profile-editor-content input,
.profile-editor-content textarea,
.profile-editor-content select{
  background:#f4f4f6;

  color:#181818;

  border:1px solid rgba(0,0,0,.09);

  box-shadow:none;
}

.profile-editor-content input::placeholder,
.profile-editor-content textarea::placeholder{
  color:#aaa;
}

.profile-editor-content input:focus,
.profile-editor-content textarea:focus,
.profile-editor-content select:focus{
  background:#fff;

  border-color:rgba(138,43,226,.46);

  box-shadow:
    0 0 0 3px rgba(138,43,226,.08);
}


/* Localisation dans l'éditeur */
.profile-editor-content .locationValue{
  background:#f4f4f6;

  color:#181818;

  border:1px solid rgba(0,0,0,.09);
}


/* Bouton localisation */
.profile-editor-content .locationBtn{
  background:
    linear-gradient(
      135deg,
      #8A2BE2,
      #FF4D8B
    ) !important;

  color:#fff;

  border:none;

  box-shadow:
    0 8px 18px rgba(255,77,139,.20);
}


/* Bouton enregistrer */
.profile-editor-content #btnSaveProfile{
  width:100%;

  margin-top:8px;

  min-height:50px;

  background:
    linear-gradient(
      135deg,
      #8A2BE2,
      #FF4D8B
    );

  color:#fff;

  box-shadow:
    0 10px 22px rgba(255,77,139,.20);
}


/* Message profil */
.profile-editor-content #pMsg{
  color:#7c3aed;
}


/* =========================
   PHOTOS IN EDITOR
========================= */

.profile-editor-content .photoSlot{
  background:#f7f7f8;

  border:1px solid rgba(0,0,0,.07);

  box-shadow:none;
}

.profile-editor-content .photoSlot img{
  border-color:rgba(0,0,0,.08);

  background:#ececef;
}

.profile-editor-content .profileUploadCard{
  background:#fff;

  border:1px dashed rgba(0,0,0,.20);

  box-shadow:none;
}

.profile-editor-content .profileUploadCard:hover{
  background:#fafafa;

  border-color:rgba(138,43,226,.38);

  box-shadow:none;
}

.profile-editor-content .uploadTitle{
  color:#181818;
}

.profile-editor-content .uploadText{
  color:#888;
}


/* =========================
   MOBILE PROFILE HUB
========================= */

@media(max-width:640px){

  .profileHub{
    max-width:none;

    padding-left:2px;
    padding-right:2px;
  }

  .profileHubTopbar{
    margin-bottom:18px;
  }

  .profileHubBrand{
    font-size:23px;
  }

  .profileHubAvatarRing{
    width:146px;
    height:146px;
  }

  .profileHubIdentityName{
    font-size:22px;
  }

  .profileHubPremiumCard{
    margin-top:25px;

    min-height:90px;

    padding:14px;
  }

  .profileHubPremiumIcon{
    width:48px;
    min-width:48px;
    height:48px;

    border-radius:15px;

    font-size:23px;
  }

  .profileHubPremiumTitle{
    font-size:16px;
  }

  .profileHubPremiumDescription{
    font-size:11.5px;
  }


  .profile-editor-sheet{
    max-width:none;
  }

  .profile-editor-content{
    padding-left:12px;
    padding-right:12px;
  }

  .profile-editor-topbar{
    padding-left:14px;
    padding-right:14px;
  }

  .profile-editor-title{
    font-size:20px;
  }
}

/* =========================
   PROFILE SETTINGS
========================= */

/* Petites actions à droite de la localisation */
.profileQuickActions{
  display:flex;
  align-items:center;
  gap:8px;
  flex-shrink:0;
}

/* Icône paramètres dans le profil */
.profileSettingsBtn{
  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;

  padding:0;

  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;

  color:#fff;
  font-size:20px;
  line-height:1;

  flex-shrink:0;
}

.profileSettingsBtn:hover{
  background:rgba(255,255,255,.10);
  opacity:1;
}

.profileSettingsBtn:active{
  transform:scale(.96);
}


/* =========================
   SETTINGS FULLSCREEN MODAL
========================= */

.profile-settings-modal{
  position:fixed;
  inset:0;

  z-index:31000;

  display:flex;
  align-items:stretch;
  justify-content:center;

  background:rgba(8,8,16,.88);
}


/* Page principale */
.profile-settings-sheet{
  width:100%;
  max-width:520px;
  height:100%;

  overflow-y:auto;
  overscroll-behavior:contain;

  background:#f4f4f6;
  color:#161616;

  box-shadow:0 -12px 40px rgba(0,0,0,.42);

  -webkit-overflow-scrolling:touch;
}


/* =========================
   HEADER
========================= */

.profile-settings-topbar{
  position:sticky;
  top:0;
  z-index:10;

  min-height:74px;

  display:grid;
  grid-template-columns:44px 1fr 44px;
  align-items:center;
  gap:10px;

  padding:
    calc(env(safe-area-inset-top) + 12px)
    16px
    12px;

  background:rgba(244,244,246,.96);

  border-bottom:1px solid rgba(0,0,0,.06);

  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}


/* Bouton retour */
.profile-settings-back{
  appearance:none;
  -webkit-appearance:none;

  width:42px;
  min-width:42px;
  height:42px;
  min-height:42px;

  padding:0;
  margin:0;

  display:flex;
  align-items:center;
  justify-content:center;

  border-radius:50%;

  background:#fff !important;
  color:#111;

  border:1px solid rgba(0,0,0,.08);

  box-shadow:0 6px 16px rgba(0,0,0,.08);

  font-size:23px;
  font-weight:700;
  line-height:1;

  cursor:pointer;
}

.profile-settings-back:hover{
  background:#fff !important;
  opacity:.88;
  transform:none;
}

.profile-settings-back:active{
  transform:scale(.96);
}


/* Titre central */
.profile-settings-heading{
  min-width:0;

  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;

  text-align:center;
}

.profile-settings-title{
  color:#111;

  font-size:21px;
  font-weight:950;
  letter-spacing:-.02em;
  line-height:1.05;
}

.profile-settings-subtitle{
  margin-top:3px;

  color:#888;

  font-size:11px;
  font-weight:750;
  line-height:1.2;
}

.profile-settings-header-spacer{
  width:42px;
  height:42px;
}


/* =========================
   CONTENT
========================= */

.profile-settings-content{
  width:100%;

  padding:
    18px
    14px
    calc(34px + env(safe-area-inset-bottom));
}


/* Une grande section */
.profile-settings-section{
  margin-bottom:26px;
}


/* Petit titre façon iOS / Hinge */
.profile-settings-section-title{
  margin:0 6px 8px;

  color:#797979;

  font-size:11px;
  font-weight:850;

  letter-spacing:.055em;
}


/* Carte blanche */
.profile-settings-card{
  width:100%;

  overflow:hidden;

  border-radius:18px;

  background:#fff;

  border:1px solid rgba(0,0,0,.045);

  box-shadow:0 6px 18px rgba(0,0,0,.045);
}


/* =========================
   GENERIC ROW
========================= */

.profile-settings-row{
  appearance:none;
  -webkit-appearance:none;

  width:100%;
  min-height:62px;

  margin:0;
  padding:13px 15px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;

  text-align:left;

  background:#fff !important;
  color:#111;

  border:none !important;
  border-radius:0;

  box-shadow:none !important;

  cursor:pointer;
}

.profile-settings-row:hover{
  background:#fafafa !important;
  opacity:1;
  transform:none;
}

.profile-settings-row:active{
  background:#f3f3f3 !important;
  transform:none;
}


/* Colonne texte */
.profile-settings-row-main{
  min-width:0;
  flex:1;

  display:flex;
  flex-direction:column;
  gap:3px;
}


/* Titre de ligne */
.profile-settings-row-title{
  color:#181818;

  font-size:15px;
  font-weight:750;

  line-height:1.25;
}


/* Description secondaire */
.profile-settings-row-description{
  color:#8b8b8f;

  font-size:11.5px;
  font-weight:550;

  line-height:1.35;
}


/* Chevron */
.profile-settings-chevron{
  flex:0 0 auto;

  color:#b1b1b5;

  font-size:24px;
  font-weight:400;

  line-height:1;
}


/* Séparateur interne */
.profile-settings-divider{
  height:1px;

  margin-left:15px;

  background:rgba(0,0,0,.075);
}


/* =========================
   EMAIL
========================= */

.profile-settings-email-row{
  min-height:78px;

  padding:12px 15px;

  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
}

.profile-settings-email-row .profile-settings-row-main{
  max-width:45%;
}


/* On neutralise les styles globaux des inputs */
.profile-settings-email-input{
  width:min(55%, 260px);
  min-height:42px;

  margin:0;

  padding:9px 11px;

  border-radius:12px;

  border:1px solid rgba(0,0,0,.09);

  background:#f4f4f6;

  color:#181818;

  box-shadow:none;

  outline:none;

  font-size:14px;
  font-weight:650;

  text-align:right;
}

.profile-settings-email-input::placeholder{
  color:#aaa;
}

.profile-settings-email-input:focus{
  border-color:rgba(138,43,226,.48);

  background:#fff;

  box-shadow:0 0 0 3px rgba(138,43,226,.08);
}


/* =========================
   LOGOUT
========================= */

.profile-settings-logout .profile-settings-row-title{
  color:#313131;
}


/* =========================
   DELETE ACCOUNT
========================= */

.profile-settings-danger-section{
  margin-top:6px;
}

.profile-settings-delete .profile-settings-row-title{
  color:#d92d20;
}

.profile-settings-delete .profile-settings-chevron{
  color:rgba(217,45,32,.42);
}

.profile-settings-delete:hover{
  background:#fffafa !important;
}

.profile-settings-delete:active{
  background:#fff4f4 !important;
}

.profile-settings-delete:disabled{
  opacity:.55;
}


/* Petite note sous la suppression */
.profile-settings-danger-hint{
  margin:8px 8px 0;

  color:#999;

  font-size:11px;
  font-weight:550;

  line-height:1.4;
}


/* Messages JS */
.profile-settings-message{
  min-height:18px;

  margin:0 6px;

  color:#7c3aed;

  font-size:12px;
  font-weight:700;

  line-height:1.4;
}


/* =========================
   MOBILE
========================= */

@media(max-width:640px){

  .profile-settings-sheet{
    max-width:none;
  }

  .profile-settings-content{
    padding-left:12px;
    padding-right:12px;
  }

  .profile-settings-topbar{
    padding-left:14px;
    padding-right:14px;
  }

  .profile-settings-title{
    font-size:20px;
  }

  .profile-settings-email-row{
    align-items:flex-start;
    flex-direction:column;
    gap:9px;
  }

  .profile-settings-email-row .profile-settings-row-main{
    max-width:none;
    width:100%;
  }

  .profile-settings-email-input{
    width:100%;
    max-width:none;

    text-align:left;
  }
}

/* =========================
   SWIPE PREMIUM FILTERS
========================= */

.swipeGenderFilterBar{
  width:100%;
  margin-bottom:10px;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
}

.swipeGenderFilterText{
  display:flex;
  flex-direction:column;
  gap:2px;
  min-width:0;
}

.swipeGenderFilterText strong{
  font-size:13px;
  font-weight:900;
  color:#fff;
}

.swipeGenderFilterText span{
  font-size:12px;
  font-weight:700;
  color:rgba(255,255,255,.72);
}

.swipeGenderFilterSelect{
  width:auto;
  min-width:132px;
  min-height:40px;
  padding:8px 10px;
  border-radius:999px;
  background:rgba(0,0,0,.22);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
  font-size:13px;
  font-weight:800;
}

.swipeGenderFilterLocked{
  cursor:pointer;
  opacity:.95;
}

.swipeGenderFilterLocked .swipeGenderFilterText span{
  color:rgba(255,255,255,.68);
}

.groupNameWithBadge{
  display:flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

.boonsPremiumBadge{
  width:24px;
  height:24px;
  object-fit:contain;
  display:inline-block;
  filter:drop-shadow(0 0 8px rgba(255,215,0,.45));
}

.authForgotBtn{
  width:100%;
  margin-top:10px;
  min-height:44px;
  font-size:13px;
  color:rgba(255,255,255,.86);
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

.authForgotBtn:hover{
  background:rgba(255,255,255,.10);
}

/* =========================
   AUTH - FORGOT PASSWORD BUTTON
========================= */

.authForgotBtn{
  width:100%;
  margin-top:12px;

  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);

  color:#f7f1ff;

  font-weight:700;

  transition:
    background .18s ease,
    border-color .18s ease,
    color .18s ease,
    transform .12s ease;
}

.authForgotBtn:hover{
  background:rgba(255,255,255,.10);
  border-color:rgba(255,255,255,.18);
  color:#f7f1ff;
}

.authForgotBtn:focus{
  background:rgba(255,255,255,.10);
  border-color:#ff4d8b;
  color:#f7f1ff;
  outline:none;
}

.authForgotBtn:active{
  background:rgba(255,255,255,.14);
  border-color:#ff4d8b;
  color:#f7f1ff;
  transform:scale(.98);
}

.authForgotBtn:visited{
  color:#f7f1ff;
}

/* =========================
   iOS SAFE AREAS - GLOBAL
========================= */

:root{
  --safe-top: env(safe-area-inset-top);
  --safe-bottom: env(safe-area-inset-bottom);
}

body{
  padding-top: var(--safe-top);
  padding-bottom: calc(88px + var(--safe-bottom));
}

.shell{
  padding-top: 14px;
  padding-left: max(14px, env(safe-area-inset-left));
  padding-right: max(14px, env(safe-area-inset-right));
}

.topbar{
  padding-top: 12px;
}

.tabs{
  bottom: calc(6px + var(--safe-bottom));
}

.boones-offers-sheet,
.boons-offers-sheet,
.boons-group-choice-sheet,
.member-profile-sheet,
.location-sheet{
  padding-top: var(--safe-top);
}

.boons-offers-close,
.boones-offers-close,
.cropper-btn,
.matchBackBtn{
  min-width: 44px;
  min-height: 44px;
}

/* =========================
   iOS UX POLISH - TOUCH & MODALS
========================= */

button,
.tab,
.boones-offers-close,
.boons-offers-close,
.cropper-btn,
.matchBackBtn,
.locationBtn,
.swipeMenuTrigger,
.joinUserMenuTrigger{
  -webkit-tap-highlight-color: transparent;
}

.boones-offers-close,
.boons-offers-close,
.cropper-btn,
.matchBackBtn,
.locationBtn{
  min-width: 44px;
  min-height: 44px;
  touch-action: manipulation;
}

.boones-offers-sheet,
.boons-offers-sheet,
.boons-group-choice-sheet,
.member-profile-sheet,
.location-sheet{
  padding-top: max(16px, var(--safe-top));
}

.photo-cropper-topbar,
.location-topbar,
.member-profile-topbar{
  padding-top: calc(12px + var(--safe-top));
}

.authChoicePanel,
.card,
.boons-offers-sheet,
.boons-group-choice-sheet,
.member-profile-sheet,
.location-sheet{
  transition:
    transform .22s ease,
    opacity .22s ease;
}

input,
textarea,
select{
  font-size:16px;
}

html,
body{
  overscroll-behavior-y: none;
}

/* =====================================================
   BOONS PREMIUM NAVBAR
   Inspired by Hinge
   ===================================================== */

.tabs{
    position:fixed;
    left:0;
    right:0;
    bottom:0;

    z-index:9999;

    display:flex;
    justify-content:space-evenly;
    align-items:center;

    width:100%;
    height:calc(72px + var(--safe-bottom));

    padding:
    10px
    max(18px, env(safe-area-inset-right))
    calc(10px + var(--safe-bottom))
    max(18px, env(safe-area-inset-left));

    background:
        linear-gradient(
            180deg,
            rgba(63,24,106,.98),
            rgba(45,17,78,.99)
        );

    border-top:1px solid rgba(255,255,255,.08);

    box-shadow:
        0 -10px 30px rgba(0,0,0,.28);

    backdrop-filter:blur(22px);
    -webkit-backdrop-filter:blur(22px);

    border-radius:24px 24px 0 0;

    overflow:visible;
}

.tab{

    position:relative;

    width:48px;
    height:48px;

    min-width:48px;
    min-height:48px;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:0;
    margin:0;

    border:none;

    background:transparent;

    border-radius:16px;

    box-shadow:none;

    transition:
        transform .18s ease,
        opacity .18s ease,
        background .18s ease;

    opacity:.78;
}

.tab:hover{

    transform:translateY(-1px);

    opacity:1;
}

.tab span:not(.badge){

    display:none !important;
}

.tab.active{

    opacity:1;

    width:56px;
    height:56px;

    min-width:56px;
    min-height:56px;

    margin-top:-10px;

    border-radius:18px;

    background:
        linear-gradient(
            135deg,
            #ff6bb0,
            #ff3f91
        );

    box-shadow:
        0 8px 22px rgba(255,77,139,.45);

    transform:none;
}

.tabIcon{

    width:26px;
    height:26px;

    object-fit:contain;

    transition:
        transform .18s ease,
        filter .18s ease;
}

.tab.active .tabIcon{

    width:30px;
    height:30px;

    transform:none;

    filter:
        drop-shadow(0 0 10px rgba(255,77,139,.55));
}


.badge{

    position:absolute;

    top:-2px;
    right:-2px;

    min-width:18px;
    height:18px;

    padding:0 5px;

    border-radius:999px;

    display:flex;
    align-items:center;
    justify-content:center;

    font-size:10px;
    font-weight:800;

    background:#ff4d8b;

    color:white;

    border:2px solid rgba(45,17,78,.95);
}

/* FIX CLICKS PACKS LIKES */
.boons-offer-card,
.boons-plan-option{
  pointer-events:auto !important;
  touch-action:manipulation !important;
}

.boons-offer-card *,
.boons-plan-option *{
  pointer-events:none !important;
}

.swipeActionSeparator{
  display:flex;
  align-items:center;
  justify-content:center;
  height:34px;
  color:rgba(255,255,255,.34);
  font-size:28px;
  font-weight:300;
  line-height:1;
  user-select:none;
  pointer-events:none;
}

/* =========================
   INVITATION GROUPES
========================= */

.inviteShareCard{
  margin-top:16px;
  padding:18px;
  border-radius:22px;
  background:linear-gradient(
    180deg,
    rgba(255,255,255,.08),
    rgba(255,255,255,.05)
  );
  border:1px solid rgba(255,255,255,.14);
  box-shadow:0 12px 30px rgba(0,0,0,.25);
}

.inviteShareBtn,
.inviteCopyBtn{
  width:100%;
  min-height:52px;
  margin:0;
  padding:12px 16px;
  border-radius:999px;
  font-size:16px;
  font-weight:900;
  cursor:pointer;
  touch-action:manipulation;
  transition:
    transform .15s ease,
    filter .15s ease,
    background .15s ease;
}

.inviteShareBtn{
  margin-bottom:10px;
  border:0;
  color:#fff;
  background:linear-gradient(135deg,#ff4f9a,#ff2d84);
  box-shadow:0 10px 24px rgba(255,45,132,.24);
}

.inviteShareBtn:hover{
  transform:translateY(-1px);
  filter:brightness(1.05);
}

.inviteShareBtn:active{
  transform:translateY(1px);
}

.inviteCopyBtn{
  border:1px solid rgba(255,255,255,.16);
  color:#fff;
  background:rgba(255,255,255,.10);
}

.inviteCopyBtn:hover{
  background:rgba(255,255,255,.15);
}

.inviteCopyBtn:active{
  transform:translateY(1px);
}

/* =========================
   IMAGES ET LOGOS NON INTERACTIFS
========================= */

img,
.logo img,
.tabIcon,
.groupPreview,
.swipePhoto,
.hingeImg,
.member-profile-photo,
.matchProfileSwipeImg,
.matchProfileMemberAvatar img,
.joinDiscoverPhoto,
.joinStatusPhoto,
.locationBtnIcon,
.boonsPremiumBadge{

  /* Empêche l'appui long iOS */
  -webkit-touch-callout: none !important;

  /* Empêche la sélection */
  -webkit-user-select: none !important;
  user-select: none !important;

  /* Empêche le glisser-déposer */
  -webkit-user-drag: none !important;

  /* Supprime la surbrillance tactile */
  -webkit-tap-highlight-color: transparent !important;

  /* Empêche la sélection visuelle */
  outline: none !important;
}

/* =========================
   SAFETY ACTION BOTTOM SHEET
========================= */

.safety-action-modal{
  position:fixed;
  inset:0;
  z-index:30000;
  display:flex;
  align-items:flex-end;
  justify-content:center;
}

.safety-action-backdrop{
  position:absolute;
  inset:0;
  background:rgba(0,0,0,.62);
  backdrop-filter:blur(2px);
  -webkit-backdrop-filter:blur(2px);
}

.safety-action-sheet{
  position:relative;
  z-index:1;
  width:100%;
  max-width:620px;
  max-height:92vh;
  overflow-y:auto;
  overscroll-behavior:contain;

  padding:
    28px
    18px
    calc(22px + env(safe-area-inset-bottom))
    18px;

  border-radius:30px 30px 0 0;
  background:#ffffff;
  color:#171717;

  box-shadow:0 -18px 50px rgba(0,0,0,.30);

  animation:safetySheetOpen .22s ease-out;
}

@keyframes safetySheetOpen{
  from{
    transform:translateY(24px);
    opacity:.4;
  }

  to{
    transform:translateY(0);
    opacity:1;
  }
}

.safety-action-close{
  position:absolute;
  top:16px;
  right:16px;

  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;

  padding:0;
  border:none;
  border-radius:50%;

  display:flex;
  align-items:center;
  justify-content:center;

  background:#ececef;
  color:#111;

  font-size:30px;
  font-weight:400;
  line-height:1;

  box-shadow:none;
}

.safety-action-close:hover{
  background:#e3e3e7;
}

.safety-action-close:active{
  transform:scale(.97);
}

.safety-action-content{
  padding-top:34px;
}

.safety-action-title{
  margin:0;
  padding-right:54px;

  color:#171717;
  font-size:34px;
  font-weight:900;
  line-height:1.04;
  letter-spacing:-.025em;
}

.safety-action-subtitle{
  margin:12px 0 0;

  color:#77777f;
  font-size:17px;
  font-weight:600;
  line-height:1.35;
}

.safety-report-reasons{
  display:flex;
  flex-direction:column;
  gap:14px;
  margin-top:26px;
}

.safety-reason-btn{
  width:100%;
  min-height:62px;

  padding:16px 18px;
  border:none;
  border-radius:999px;

  background:#ececef;
  color:#171717;

  font-size:16px;
  font-weight:800;
  line-height:1.25;
  text-align:center;

  box-shadow:none;
  touch-action:manipulation;
}

.safety-reason-btn:hover{
  background:#e3e3e7;
  opacity:1;
}

.safety-reason-btn:active{
  transform:scale(.99);
}

.safety-reason-btn:disabled{
  opacity:.55;
}

.safety-block-actions{
  display:flex;
  flex-direction:column;
  gap:12px;
  margin-top:28px;
}

.safety-block-confirm,
.safety-block-cancel{
  width:100%;
  min-height:58px;
  padding:14px 18px;
  border-radius:999px;
  font-size:16px;
  font-weight:900;
}

.safety-block-confirm{
  background:#171717;
  color:#fff;
  box-shadow:none;
}

.safety-block-confirm:hover{
  background:#292929;
  opacity:1;
}

.safety-block-cancel{
  background:#ececef;
  color:#171717;
  box-shadow:none;
}

.safety-block-cancel:hover{
  background:#e3e3e7;
  opacity:1;
}

.safety-action-msg{
  min-height:20px;
  margin-top:16px;

  color:#7c3aed;
  font-size:14px;
  font-weight:800;
  line-height:1.4;
  text-align:center;
}

.safety-action-modal.is-loading .safety-reason-btn,
.safety-action-modal.is-loading .safety-block-confirm,
.safety-action-modal.is-loading .safety-block-cancel{
  pointer-events:none;
  opacity:.55;
}

@media(max-width:640px){
  .safety-action-sheet{
    max-width:none;
    max-height:94vh;

    padding:
      24px
      16px
      calc(18px + env(safe-area-inset-bottom))
      16px;

    border-radius:28px 28px 0 0;
  }

  .safety-action-content{
    padding-top:30px;
  }

  .safety-action-title{
    font-size:31px;
  }

  .safety-action-subtitle{
    font-size:16px;
  }

  .safety-report-reasons{
    gap:12px;
    margin-top:22px;
  }

  .safety-reason-btn{
    min-height:58px;
    padding:14px 16px;
    font-size:15px;
  }
}

/* =========================
   LEGAL CONSENT
========================= */

.legal-consent-box{
  margin-top:16px;
  padding:14px;
  border-radius:16px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
}

.legal-consent-box-social{
  margin-top:0;
  margin-bottom:14px;
}

.legal-consent-label{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin:0;
  color:rgba(255,255,255,.92);
  font-size:13px;
  line-height:1.5;
  cursor:pointer;
}

.legal-consent-label > span{
  flex:1;
  min-width:0;
}

.legal-consent-checkbox{
  appearance:none;
  -webkit-appearance:none;
  width:24px;
  height:24px;
  min-width:24px;
  min-height:24px;
  margin:1px 0 0;
  padding:0;
  border-radius:7px;
  border:2px solid rgba(255,255,255,.42);
  background:rgba(0,0,0,.20);
  display:grid;
  place-items:center;
  cursor:pointer;
  transition:
    background .16s ease,
    border-color .16s ease,
    transform .12s ease,
    box-shadow .16s ease;
}

.legal-consent-checkbox::after{
  content:"";
  width:10px;
  height:6px;
  border-left:3px solid #fff;
  border-bottom:3px solid #fff;
  transform:rotate(-45deg) scale(0);
  transition:transform .14s ease;
}

.legal-consent-checkbox:checked{
  background:linear-gradient(135deg, #8A2BE2, #FF4D8B);
  border-color:rgba(255,255,255,.9);
  box-shadow:0 6px 18px rgba(255,77,139,.28);
}

.legal-consent-checkbox:checked::after{
  transform:rotate(-45deg) scale(1);
}

.legal-consent-checkbox:focus-visible{
  outline:none;
  box-shadow:
    0 0 0 3px rgba(255,255,255,.16),
    0 6px 18px rgba(255,77,139,.28);
}

.legal-consent-checkbox:active{
  transform:scale(.96);
}

.legal-inline-link{
  display:inline;
  min-width:0;
  min-height:0;
  padding:0;
  margin:0 2px;
  border:none;
  border-radius:0;
  background:transparent !important;
  box-shadow:none !important;
  color:#ffd4f0;
  font:inherit;
  font-weight:900;
  line-height:inherit;
  text-decoration:underline;
  text-underline-offset:3px;
  cursor:pointer;
  vertical-align:baseline;
}

.legal-inline-link:hover{
  opacity:.82;
  background:transparent !important;
}

.legal-inline-link:active{
  transform:none;
}

.legal-age-confirmation{
  margin:10px 0 0 36px;
  color:rgba(255,255,255,.68);
  font-size:12px;
  font-weight:700;
  line-height:1.4;
}

#btnRegister:disabled{
  opacity:.45;
  filter:saturate(.45);
  box-shadow:none;
}

/* =========================
   PROFILE LEGAL LINKS
========================= */

.profile-legal-links{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:16px;
  padding:12px;
  border-radius:16px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.10);
}

.legal-profile-link{
  width:100%;
  min-height:44px;
  padding:10px 12px;
  border-radius:12px;
  background:rgba(0,0,0,.18);
  border:1px solid rgba(255,255,255,.10);
  box-shadow:none;
  color:rgba(255,255,255,.92);
  font-size:13px;
  font-weight:800;
  text-align:left;
}

.legal-profile-link:hover{
  background:rgba(255,255,255,.08);
  opacity:1;
}

.legal-profile-link:active{
  transform:scale(.99);
}

/* =========================
   LEGAL DOCUMENT FULLSCREEN
========================= */

.legal-document-modal{
  position:fixed;
  inset:0;
  z-index:32000;
  display:flex;
  align-items:stretch;
  justify-content:center;
  background:#0d0918;
}

.legal-document-shell{
  width:100%;
  height:100%;
  max-width:900px;
  display:flex;
  flex-direction:column;
  background:
    radial-gradient(
      circle at top right,
      rgba(138,43,226,.18),
      transparent 32%
    ),
    linear-gradient(180deg, #120b20 0%, #0d0918 100%);
}

.legal-document-header{
  min-height:72px;
  padding:
    calc(env(safe-area-inset-top) + 10px)
    16px
    10px;
  display:flex;
  align-items:center;
  gap:12px;
  flex-shrink:0;
  background:rgba(13,9,24,.94);
  border-bottom:1px solid rgba(255,255,255,.10);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  z-index:2;
}

.legal-document-back{
  width:46px;
  height:46px;
  min-width:46px;
  min-height:46px;
  padding:0;
  border-radius:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.12);
  box-shadow:none;
  color:#fff;
  font-size:24px;
  font-weight:900;
}

.legal-document-back:hover{
  background:rgba(255,255,255,.16);
  opacity:1;
}

.legal-document-heading{
  min-width:0;
  flex:1;
}

.legal-document-title{
  color:#fff;
  font-size:17px;
  font-weight:900;
  line-height:1.2;
}

.legal-document-subtitle{
  margin-top:3px;
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:700;
}

.legal-document-content{
  flex:1;
  min-height:0;
  padding-bottom:env(safe-area-inset-bottom);
}

.legal-document-frame{
  width:100%;
  height:100%;
  display:block;
  border:none;
  background:#0d0918;
}

/* =========================
   LEGAL RESPONSIVE
========================= */

@media(max-width:640px){
  .legal-consent-box{
    padding:13px;
  }

  .legal-consent-label{
    gap:10px;
    font-size:12px;
  }

  .legal-consent-checkbox{
    width:22px;
    height:22px;
    min-width:22px;
    min-height:22px;
  }

  .legal-age-confirmation{
    margin-left:32px;
  }

  .legal-document-header{
    min-height:68px;
    padding:
      calc(env(safe-area-inset-top) + 8px)
      12px
      8px;
  }

  .legal-document-back{
    width:44px;
    height:44px;
    min-width:44px;
    min-height:44px;
  }

  .legal-document-title{
    font-size:16px;
  }
}

/* =========================
   APP COMPACT TOP LAYOUT
   Supprime le header global
   et remonte le contenu
========================= */

/* Cache le header Boons global dans toute l'app connectée */
body.appMode .topbar.appOnly{
  display:none !important;
}


/* On garde la safe area iOS/Android,
   mais on réduit l'espace inutile en haut */
body.appMode .shell{
  padding-top:8px;
}


/* =========================
   PROFILE - TOP COMPACT
========================= */

/* On retire aussi le "Boons" répété
   au-dessus de la photo du profil */
body.appMode .profileHubBrand,
body.appMode .profileHubTopSpacer{
  display:none !important;
}


/* La topbar du profil sert maintenant
   uniquement à placer ⚙️ à droite */
body.appMode .profileHubTopbar{
  width:100%;

  display:flex;
  align-items:center;
  justify-content:flex-end;

  margin:0 0 4px;

  min-height:48px;
}


/* Le contenu du profil remonte */
body.appMode .profileHub{
  padding-top:0;
}


/* Petit ajustement mobile */
@media(max-width:640px){

  body.appMode .shell{
    padding-top:6px;
  }

  body.appMode .profileHubTopbar{
    margin-bottom:2px;
  }
}

/* =========================
   GLOBAL BACKGROUND CONTINUITY
   Fond Boons continu iOS + Android
========================= */

html{
  min-height:100%;
  background:var(--bg1);
}

body{
  min-height:100vh;
  min-height:100dvh;

  background:
    linear-gradient(
      135deg,
      var(--bg1) 0%,
      var(--bg2) 100%
    );

  background-repeat:no-repeat;
  background-size:100% 100%;
}

/* =========================
   BOONS ACCENT BUTTONS
========================= */

/* Sorties sélectionnées */
.chip.active{
  background:linear-gradient(135deg, #8A2BE2, #FF4D8B) !important;
  border-color:rgba(255,255,255,.45) !important;
  color:#fff !important;

  box-shadow:
    0 8px 20px rgba(255,77,139,.22),
    inset 0 1px 0 rgba(255,255,255,.10);
}


/* Bouton Inviter dans les groupes */
.actionsRow button[data-action="invite"]{
  background:linear-gradient(135deg, #8A2BE2, #FF4D8B) !important;
  border:1px solid rgba(255,255,255,.28) !important;
  color:#fff !important;

  box-shadow:
    0 8px 20px rgba(255,77,139,.22);
}


/* Petit feedback au toucher */
.actionsRow button[data-action="invite"]:active,
.chip.active:active{
  transform:scale(.97);
}

/* ======================================================
   SWIPE - EMPTY STATE
====================================================== */

.swipeEmptyState {
  min-height: 520px;
  padding: 28px 20px 34px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 18px;
}

.swipeEmptyLogoWrap {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  background:
    radial-gradient(
      circle at 35% 30%,
      rgba(255, 91, 170, 0.32),
      rgba(138, 43, 226, 0.18) 55%,
      rgba(20, 5, 38, 0.72) 100%
    );
  border: 1px solid rgba(218, 83, 255, 0.42);
  box-shadow:
    0 0 0 7px rgba(180, 58, 255, 0.05),
    0 14px 38px rgba(182, 55, 255, 0.22),
    inset 0 0 26px rgba(255, 89, 177, 0.08);
}

.swipeEmptyLogo {
  width: 86%;
  height: 86%;
  object-fit: cover;
  border-radius: 50%;
  transform: scale(1.04);
  user-select: none;
  -webkit-user-drag: none;
  pointer-events: none;

  box-shadow:
    0 0 0 6px rgba(255,255,255,.04),
    0 12px 28px rgba(0,0,0,.22);

  filter:
    saturate(1.08)
    contrast(1.03);
}

.swipeEmptyTitle {
  margin-top: 6px;
  color: #ffffff;
  font-size: 30px;
  line-height: 1.12;
  font-weight: 850;
  letter-spacing: -0.6px;
}

.swipeEmptyTitle span {
  background: linear-gradient(135deg, #ff5aa8 0%, #d84bff 52%, #9858ff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.swipeEmptySubtitle {
  max-width: 310px;
  color: rgba(255, 255, 255, 0.74);
  font-size: 16px;
  line-height: 1.5;
  font-weight: 500;
}

.swipeEmptyRequirement {
  width: min(100%, 330px);
  margin-top: 4px;
  padding: 17px 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  border-radius: 22px;
  background:
    linear-gradient(
      145deg,
      rgba(84, 27, 126, 0.25),
      rgba(29, 10, 48, 0.46)
    );
  border: 1px solid rgba(192, 67, 255, 0.55);
  box-shadow:
    inset 0 0 24px rgba(173, 61, 255, 0.05),
    0 12px 30px rgba(0, 0, 0, 0.16);
}

.swipeEmptyRequirementIcon {
  flex: 0 0 auto;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 27px;
  background:
    linear-gradient(
      145deg,
      rgba(223, 74, 255, 0.24),
      rgba(255, 82, 166, 0.13)
    );
  box-shadow: inset 0 0 16px rgba(255, 91, 178, 0.10);
}

.swipeEmptyRequirementText {
  color: rgba(255, 255, 255, 0.82);
  font-size: 15px;
  line-height: 1.35;
  text-align: left;
}

.swipeEmptyRequirementText strong {
  display: inline-block;
  margin: 2px 0;
  color: #ff5ba9;
  font-size: 16px;
  font-weight: 800;
}

.swipeEmptyStateDone .swipeEmptyLogoWrap {
  width: 112px;
  height: 112px;
}

@media (max-width: 390px) {
  .swipeEmptyState {
    min-height: 470px;
    padding: 22px 16px 28px;
    gap: 15px;
  }

  .swipeEmptyLogoWrap {
    width: 112px;
    height: 112px;
  }

  .swipeEmptyTitle {
    font-size: 26px;
  }

  .swipeEmptySubtitle {
    font-size: 15px;
  }

  .swipeEmptyRequirement {
    padding: 15px 16px;
  }

  .swipeEmptyRequirementIcon {
    width: 50px;
    height: 50px;
    font-size: 24px;
  }
}