html{ overflow-y:scroll; scrollbar-gutter:stable; }
*{ scrollbar-width:thin; scrollbar-color:#8b5cf6 rgba(17,24,39,.07); }
*::-webkit-scrollbar{ width:8px; height:8px; }
*::-webkit-scrollbar-track{ background:rgba(17,24,39,.07); border-radius:10px; }
*::-webkit-scrollbar-thumb{ background:#8b5cf6; border-radius:10px; border:2px solid rgba(17,24,39,.07); }
*::-webkit-scrollbar-thumb:hover{ background:#7c3aed; }

html.hide-scrollbar, html.hide-scrollbar *{ scrollbar-width:none!important; }
html.hide-scrollbar::-webkit-scrollbar, html.hide-scrollbar *::-webkit-scrollbar{ width:0!important; height:0!important; }

.gradient-text{ background:linear-gradient(90deg,#8b5cf6,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; }
.tab-btn[aria-selected="true"]{ background:linear-gradient(90deg,#8b5cf6,#ec4899); color:#fff; }

#selfiePreviewWrap { margin-top:-15px; }

:root{ --hero-h: 550px; }
.hero{ position:relative; overflow:visible; }
.hero-h{ height:var(--hero-h)!important; }

.hero-bg{ background-size:100% 92%; background-position:center top; opacity:1; }

.hero-vd{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;     
  object-position:center top;
  z-index: 4;               
  pointer-events:none;       
  border:0;               
  top: 0px;
  left: 350px;
}
#phGrid > *,
#murGrid > *{
  content-visibility: auto;              
  contain-intrinsic-size: 300px 225px; 
}

#phGrid img[data-src]:not([data-loaded="1"]),
#murGrid img[data-src]:not([data-loaded="1"]){
  filter: blur(8px);
  transform: scale(1.02);
  transition: filter .2s ease, transform .2s ease;
}
#phGrid img[data-loaded="1"],
#murGrid img[data-loaded="1"]{
  filter: none;
  transform: none;
}

.hero img{ display:block; }
.bg-neutral-50\/60 {
    background-color: #fafcff !important;
}

.hero-laurent{
  position:absolute;
  top:50px;
  left:75px;
  width:450px;
  height:500px;
  z-index: 0;
  animation:laurent-slide-up .6s ease-out both;
  will-change: transform, opacity;
}

#openGbBtn{
  background: linear-gradient(90deg,#8b5cf6,#ec4899);
  color:#fff;
  font-weight:600;
  border-radius:8px;
  padding:.5rem .75rem;
  font-size:.875rem;
  line-height:1.1;
  box-shadow:0 8px 18px -8px rgba(139,92,246,.35);
  transition: filter .15s ease, transform .05s ease;
  min-height:36px;
}
#openGbBtn:hover{ filter:brightness(.97); }
#openGbBtn:active{ transform:translateY(1px); }

#uploadOverlay{ overflow-y:auto; overscroll-behavior:contain; }
#uploadDialog{ max-height:min(85vh, 980px); overflow-y:auto; }
#uploadList{ max-height:55vh; overflow-y:auto; padding-right:.25rem; } 
@supports(padding: max(0px)) {
  #gbBody { padding-bottom: max(7rem, env(safe-area-inset-bottom)); }
}

@media (max-width:768px){
  #openGbBtn{ padding:.45rem .7rem; font-size:.875rem; }
}
@media (max-width:450px){
  #openGbBtn{ padding:.4rem .6rem; font-size:.84rem; }
}

@keyframes laurent-slide-up {
  0%   { transform: translateY(800px); opacity: 0; }
  100% { transform: translateY(0);    opacity: 1; }
}

@media (prefers-reduced-motion: reduce){
  .hero-laurent{ animation: none !important; }
}

#msgModal .mm-backdrop{
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(6px);
  animation: mmFade .18s ease-out both;
}
#msgModal .mm-dialog{
  border:1px solid rgba(226,232,240,.9);
  box-shadow: 0 24px 70px -28px rgba(17,24,39,.35), 0 10px 26px -18px rgba(17,24,39,.25);
  animation: mmPop .22s cubic-bezier(.2,.7,.2,1) both;
}

.mm-head{ position:sticky; top:0; background:#fff; border-bottom:1px solid #e5e7eb; }
.mm-head::after{
  content:""; display:block; height:2px; margin:0 -20px -8px; opacity:.28;
  background:linear-gradient(90deg,#8b5cf6,#ec4899);
  border-bottom-left-radius:6px; border-bottom-right-radius:6px;
}

.mm-avatar-wrap{
  position:relative; border-radius:9999px;
  width: clamp(160px, 32vw, 260px);
  height: clamp(160px, 32vw, 260px);
}
.mm-avatar-wrap::before{
  content:""; position:absolute; inset:-8px; border-radius:inherit; padding:2px;
  background: conic-gradient(from 180deg, #8b5cf6, #ec4899, #f59e0b, #8b5cf6);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  filter: drop-shadow(0 10px 18px rgba(139,92,246,.18));
}
.mm-avatar{ box-shadow: 0 14px 38px -18px rgba(17,24,39,.28); }

.mm-quote{
  position:relative;
  border-radius:16px;
  padding:18px 18px 18px 56px;
  background:linear-gradient(180deg,#fff,rgba(249,250,251,.96));
  border:1px solid rgba(203,213,225,.85);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.8), 0 8px 22px -14px rgba(17,24,39,.10);
}
.mm-quote::before{
  content:"“";
  position:absolute; left:16px; top:6px;
  font-family:Georgia, ui-serif, serif;
  font-size:40px; line-height:1;
  background:linear-gradient(90deg,#8b5cf6,#ec4899);
  -webkit-background-clip:text; background-clip:text; color:transparent; opacity:.9;
}
.mm-quote::after{
  content:""; position:absolute; left:44px; top:18px; bottom:18px;
  width:2px; border-radius:2px;
  background:linear-gradient(180deg,#e9d5ff,#fecdd3);
}
#msgModal .mm-text{ word-break: break-word; }

@media (max-width:480px){
  .mm-quote{ padding:14px 14px 14px 48px; }
  .mm-quote::before{ font-size:36px; left:12px; }
  .mm-quote::after{ left:38px; }
}

@keyframes mmPop{
  from{ transform: translate(-50%,-48%) scale(.96); opacity:0; }
  to  { transform: translate(-50%,-50%) scale(1);   opacity:1; }
}
@keyframes mmFade{ from{opacity:0} to{opacity:1} }
@media (prefers-reduced-motion:reduce){
  #msgModal .mm-backdrop, #msgModal .mm-dialog{ animation:none!important; }
}

.hero-logo{
  position:absolute; top:244px; right:75px; width:446px; height:367px; z-index:3;
  transform-origin:20% 100%;
  animation:popIn .55s cubic-bezier(.2,.8,.2,1) .10s both;
}
@keyframes riseFromBottom{ from{ transform:translateX(-100px); opacity:0 } to{ transform:translateY(0); opacity:1 } }
@keyframes popIn{ 0%{opacity:0;transform:translateY(-50%) scale(.88)}
 55%{opacity:1;transform:translateY(calc(-50% - 6px)) scale(1.03)}
 100%{opacity:1;transform:translateY(-50%) scale(1)} }
@media (prefers-reduced-motion:reduce){ .hero-laurent, .hero-logo{ animation:none!important } }

@media (max-width:768px){
  :root{ --hero-h:clamp(220px,50vw,600px); --content-bump:-20px; }
  header .hero{overflow:hidden;/* margin-left: -115px; */}
.hero-bg{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:contain;
  object-position:center top;
  z-index:1;
  pointer-events:none;
  border:0;
  background:#13264c;
  opacity:1;  
  animation:heroBgIn .7s ease-out .08s forwards;
  will-change:opacity,transform;
  backface-visibility:hidden;
}
  .hero-laurent{
    left: calc(100vw*(50/1200));
    top:calc(100vw*(87/1200));
    width: calc(100vw*(440/1200));
    height:calc(100vw*(462/1200));
  }
  .hero-logo{
    right: calc(100vw*(40/1200));
    top: calc(100vw*(280/1200));
    width:calc(100vw*(446/1200));
    height:calc(100vw*(367/1200));
  }
  .bg-neutral-50\/60{ margin-top:var(--content-bump)!important; position:relative; z-index:3; }
  nav[role="tablist"]{ padding-top:6px!important; padding-bottom:6px!important; margin-top:0!important; }
  nav[role="tablist"] .grid{ margin-top:15px!important; margin-bottom:15px!important; }
  .hero-vd {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    z-index: 1;
    pointer-events: none;
    border: 0;
    left: 0px;
}
.reduce{
    margin-left: -400px !important;
}
}

@media (max-width:420px){
  :root{ --hero-h:clamp(200px,56vw,360px); --content-bump:-26px; }
  .w-12{ width:3rem; } .h-12{ height:3rem; }
  .hero-laurent{ top:calc(100vw*(72/1200)); }
  .hero-logo{ top:calc(100vw*(220/1200)); }

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    z-index: 1;
    opacity:1;
    pointer-events: none;
    border: 0;
    left: -35px;
}
.reduce{
    margin-left: -250px;
}
}

@media (max-width:450px){
  :root{ --content-bump:-10px; }
  .hero-laurent{ left:1vw; top:20px; width:45vw; aspect-ratio:200/300; height:200px; }
  .hero-logo{ right:2vw; top:27vw; width:45vw; aspect-ratio:446/367; height:auto; }
  .bg-neutral-50\/60{ margin-top:var(--content-bump)!important; position:relative; z-index:3; }
  nav[role="tablist"]{ padding-top:4px!important; padding-bottom:4px!important; margin-top:0!important; }
  nav[role="tablist"] .grid{ margin-top:10px!important; margin-bottom:10px!important; gap:6px; }
  [role="tab"]{ font-size:13px; padding:6px 10px; line-height:1.2; }
  .w-12{ width:3rem; } .h-12{ height:3rem; }
  .truncate, [data-truncate]{ min-width:0; }
  .btn, button, a[role="tab"]{ min-height:36px; }

.hero-bg {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center top;
    z-index: 1;
    opacity:1;
    pointer-events: none;
    border: 0;
    left: -35px;
}

.reduce{

    max-width: 300px;
    margin-left: -320px;
}
}

.card-80s{
  position:relative; border-radius:16px;
  background:linear-gradient(180deg,rgba(255,255,255,.94),rgba(255,255,255,.88));
  box-shadow:0 14px 38px -22px rgba(17,24,39,.28), 0 8px 18px -16px rgba(139,92,246,.22);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  border:1px solid rgba(226,232,240,.8);
}
.card-80s::before{
  content:""; position:absolute; inset:-1px; border-radius:18px; padding:1px;
  background:linear-gradient(90deg,#8b5cf6,#ec4899,#f59e0b,#8b5cf6);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);
  -webkit-mask-composite:xor; mask-composite:exclude;
  pointer-events:none;
}
.card-title{display:flex;align-items:center;gap:.6rem;font-weight:800}
.card-title .label{ background:linear-gradient(90deg,#8b5cf6,#ec4899); -webkit-background-clip:text; background-clip:text; color:transparent; }
.card-sub{color:#6b7280; font-size:.86rem}
.hr-80s{height:1px; margin:.75rem 0; background:linear-gradient(90deg,transparent,rgba(139,92,246,.55),transparent); border:0}

.input-80s{ background:#fff; border:1px solid rgba(203,213,225,.9); border-radius:12px; padding:.6rem .8rem; outline:none; }
.input-80s:focus{ border-color:#a78bfa; box-shadow:0 0 0 4px rgba(167,139,250,.18); }

.msg-80s{
  border:1px solid rgba(226,232,240,.9); border-radius:14px;
  background:linear-gradient(180deg,rgba(255,255,255,.96),rgba(255,255,255,.9));
  transition: box-shadow .18s ease, transform .18s ease;
  cursor:pointer;
}
.msg-80s:hover{ box-shadow:0 14px 28px -22px rgba(139,92,246,.35); transform:translateY(-1px); }

.chip-80s{
  display:inline-flex; align-items:center; gap:.5rem; border-radius:9999px; padding:.25rem .6rem;
  background:linear-gradient(90deg,#fafafa,#fff); border:1px solid rgba(226,232,240,.9);
  box-shadow:0 4px 10px -8px rgba(17,24,39,.12); font-weight:700; font-size:.82rem;
}

.thumb-80s{ border-radius:14px; overflow:hidden; border:1px solid rgba(226,232,240,.9); }
.thumb-80s img{ transition:transform .25s ease; }
.thumb-80s:hover img{ transform:scale(1.03); }

.field-80s{ position:relative; }
.field-80s .icon{
  position:absolute;
  top: 70%;
  transform:translateY(-50%);
  width:18px;
  height:18px;
  opacity:.6;
  pointer-events:none;
  line-height:1;
  font-size:18px;
}
.input-80s{
  appearance:none; width:100%; background:#fff; border:1px solid #e5e7eb; border-radius:12px;
  padding:10px 12px; font-size:14px; line-height:1.25;
  transition:border-color .2s ease, box-shadow .2s ease;
  box-shadow: inset 0 1px 0 rgba(0,0,0,.03);
}
.input-80s.has-icon{padding-left: 10px;}
.input-80s:focus{ outline:0; border-color:#c4b5fd; box-shadow:0 0 0 4px rgba(139,92,246,.10), 0 1px 0 rgba(255,255,255,.8) inset; }
.input-80s::placeholder{ color:#9ca3af; }
.textarea-80s{ resize:none; min-height:140px; }
.btn-violet{ background:linear-gradient(90deg,#8b5cf6,#ec4899); color:#fff; box-shadow:0 8px 18px -8px rgba(139,92,246,.55); }
.btn-violet:hover{ filter:brightness(.97); }
.btn-violet:active{ transform:translateY(1px); }
.card-title .label{ font-weight:800; letter-spacing:.1px; }
.hr-80s{ height:2px; border:0; margin:.65rem 0 1.1rem 0; background:linear-gradient(90deg,#e9d5ff 0,#fce7f3 60%,#fff 100%); opacity:.85; border-radius:2px; }
.subtle{ color:#6b7280; }
.selfie-preview{ width:48px; height:48px; border-radius:9999px; object-fit:cover; display:block; }
.field-80s:has(.input-80s:focus){ filter: drop-shadow(0 8px 16px rgba(139,92,246,.08)); }


.card-80s{ background:#fff; border:1px solid #eee; border-radius:16px; box-shadow:0 6px 30px rgba(17,24,39,.06); }
.card-sub{ font-size:.875rem; color:#6b7280; }
.chip-80s{ padding:.35rem .6rem; border-radius:9999px; background:linear-gradient(90deg,#f3e8ff,#ffe4f1); color:#6b7280; font-weight:700; font-size:.75rem; }
.msg-80s{ border:1px solid #eee; border-radius:14px; background:#fff; }

.msg-80s > img{
  width:48px; height:48px; aspect-ratio:1/1;
  border-radius:9999px; object-fit:cover; display:block;
  flex:0 0 48px; 
}
#selfiePreviewWrap{ flex:0 0 48px; }  
#selfiePreviewWrap img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:9999px; }

.w-12{ width:3rem; } .h-12{ height:3rem; }

.msg-80s img.rounded-full,
.selfie-preview {
  aspect-ratio: 1 / 1;
  border-radius: 9999px;
  object-fit: cover;
}

#msgModal .mm-dialog { max-height: 92vh; }
#msgModal .mm-avatar { width: clamp(180px, 42vw, 300px); height: clamp(180px, 42vw, 300px); }
#msgModal .mm-text   { word-break: break-word; }