:root{color-scheme:dark}
html,body{height:100%}
body{
  margin:0;
  background:#050b18;
  color:#e5e7eb;
  font-family:system-ui,-apple-system,Segoe UI,Roboto;
  overflow:hidden;
}

#app{position:relative;width:100vw;height:100vh}

/* ===== INTRO (crisp, no blur, no images) ===== */
#intro-screen{
  position:fixed; inset:0; z-index:9999;
  overflow:hidden;
  display:flex; align-items:center; justify-content:center;
  background:
    radial-gradient(1200px 900px at 50% 55%, rgba(0,180,255,.10), rgba(5,11,24,.92) 55%, rgba(0,0,0,.96)),
    radial-gradient(900px 700px at 20% 25%, rgba(99,102,241,.10), transparent 60%),
    radial-gradient(900px 700px at 80% 75%, rgba(45,212,191,.08), transparent 62%),
    radial-gradient(1px 1px at 10% 20%,rgba(255,255,255,.70) 50%,transparent 52%),
    radial-gradient(1px 1px at 30% 80%,rgba(255,255,255,.45) 50%,transparent 52%),
    radial-gradient(1px 1px at 60% 30%,rgba(255,255,255,.55) 50%,transparent 52%),
    radial-gradient(1px 1px at 80% 60%,rgba(255,255,255,.45) 50%,transparent 52%),
    radial-gradient(1px 1px at 45% 55%,rgba(255,255,255,.35) 50%,transparent 52%),
    radial-gradient(1px 1px at 70% 15%,rgba(255,255,255,.40) 50%,transparent 52%),
    radial-gradient(1px 1px at 15% 65%,rgba(255,255,255,.35) 50%,transparent 52%),
    radial-gradient(1px 1px at 22% 42%,rgba(160,220,255,.28) 50%,transparent 52%),
    radial-gradient(1px 1px at 88% 22%,rgba(160,220,255,.22) 50%,transparent 52%);
  transition: opacity 500ms ease;
}
#intro-screen.is-hiding{opacity:0;pointer-events:none}

#intro-screen .earth{
  position:absolute;
  left:50%; top:50%;
  width:min(78vw, 360px);
  aspect-ratio:1/1;
  transform:translate(-50%,-54%);
  border-radius:9999px;
  overflow:hidden;
  isolation:isolate;
  background:radial-gradient(circle at 30% 35%, #1f6aff) 0%, #08224d 45%, #04122b 70%, #020816 100%);
  box-shadow:0 0 0 1px rgba(255,255,255,.10),0 0 18px rgba(34,211,238,.22),0 0 70px rgba(45,212,191,.12);
}

/* Land hints (NO blur) */
#intro-screen .earth::before{
  content:"";
  position:absolute; inset:-2%;
  border-radius:inherit;
  background:
    radial-gradient(22% 18% at 34% 44%, rgba(70,190,120,.62), transparent 64%),
    radial-gradient(18% 14% at 46% 56%, rgba(120,200,120,.42), transparent 66%),
    radial-gradient(16% 12% at 58% 44%, rgba(90,200,130,.46), transparent 66%),
    radial-gradient(14% 10% at 44% 70%, rgba(200,180,120,.26), transparent 70%),
    radial-gradient(16% 12% at 28% 62%, rgba(90,170,120,.36), transparent 68%),
    radial-gradient(12% 10% at 60% 30%, rgba(160,150,95,.22), transparent 72%),
    radial-gradient(12% 10% at 22% 36%, rgba(60,160,120,.30), transparent 70%),
    radial-gradient(14% 10% at 70% 58%, rgba(110,180,120,.28), transparent 72%);
  opacity:.96;
  animation:vibesEarthSpin 10s linear infinite;
}

/* Clouds (NO blur) */
#intro-screen .earth::after{
  content:"";
  position:absolute; inset:-10%;
  border-radius:inherit;
  opacity:.70;
  mix-blend-mode:screen;
  background:
    linear-gradient(90deg, transparent 0 10%, rgba(255,255,255,.16) 12%, transparent 16% 28%, rgba(255,255,255,.10) 30%, transparent 36% 52%, rgba(255,255,255,.12) 54%, transparent 60% 78%, rgba(255,255,255,.08) 80%, transparent 86% 100%),
    radial-gradient(40% 28% at 30% 25%,rgba(255,255,255,.18),transparent 62%),
    radial-gradient(32% 22% at 60% 45%,rgba(255,255,255,.12),transparent 64%),
    radial-gradient(36% 24% at 55% 70%,rgba(255,255,255,.10),transparent 64%);
  animation:vibesCloudDrift 9.5s linear infinite;
}

/* Terminator shadow (right side) */
#intro-screen .earth .terminator{
  position:absolute; inset:0;
  border-radius:inherit;
  background:radial-gradient(circle at 15% 45%, rgba(0,0,0,0) 45%, rgba(0,0,0,0.55) 72%, rgba(0,0,0,0.85) 100%);
  mix-blend-mode:multiply;
  pointer-events:none;
}

/* Atmosphere ring glow */
#intro-screen .earth .atmos{
  position:absolute; inset:-2%;
  border-radius:inherit;
  pointer-events:none;
  box-shadow:0 0 0 1px rgba(255,255,255,.12),0 0 18px rgba(34,211,238,.22),0 0 54px rgba(45,212,191,.16);
  animation:introHalo 2.2s ease-in-out infinite;
}

@keyframes vibesEarthSpin{0%{background-position:0% 50%}100%{background-position:220% 50%}}
@keyframes vibesCloudDrift{0%{transform:translateX(-14px)}100%{transform:translateX(14px)}}
@keyframes introHalo{0%,100%{opacity:.82}50%{opacity:1}}

/* ===== Map ===== */
#map{position:absolute;inset:0;width:100%;height:100%;display:block;opacity:1;z-index:1;
  filter:brightness(.68) contrast(1.26) saturate(1.08) hue-rotate(10deg) !important;
}

/* FX overlay (replaces neonVignette) */
#fx{
  position:absolute;inset:0;
  z-index:8;
  pointer-events:none;
  background:
    radial-gradient(1200px 900px at 50% 10%, rgba(139,92,246,.14), transparent 60%),
    radial-gradient(1000px 800px at 0% 100%, rgba(34,211,238,.10), transparent 60%),
    radial-gradient(1000px 800px at 100% 100%, rgba(255,36,95,.08), transparent 60%),
    radial-gradient(1200px 900px at 50% 50%, rgba(0,0,0,0), rgba(0,0,0,.48)) !important;
}

/* NOTE: pulseCanvas overlay removed in Pulse Stable build */
#pulseCanvas{display:none}

/* Minimal HUD */
.hud{
  position:absolute;left:12px;bottom:12px;
  z-index:20;
  display:flex;gap:10px;align-items:center;
}
.pill{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(7,16,31,0.65);
  backdrop-filter: blur(14px);
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
  opacity:.95;
}
.dot{
  display:inline-block;width:8px;height:8px;border-radius:99px;margin-right:8px;
  background:rgba(0,255,200,.85);
  box-shadow:0 0 10px rgba(0,255,200,.45);
  vertical-align:middle;
}
.btn{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(7,16,31,0.72);
  backdrop-filter: blur(14px);
  color:#e5e7eb;
  padding:10px 12px;
  border-radius:14px;
  font-size:13px;
}
.btn:active{transform:scale(.98)}

/* Mode pill (after login) */
.mode-pill{
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(7,16,31,0.72);
  backdrop-filter: blur(14px);
  color:#e5e7eb;
  padding:10px 12px;
  border-radius:999px;
  font-size:13px;
  line-height:1;
}
.mode-pill.hidden{display:none}
.mode-pill:focus{outline:none;box-shadow:0 0 0 3px rgba(0,255,200,0.18)}
.mode-pill:active{transform:scale(.98)}

/* Mode modal */
.mode-overlay{
  position:absolute;inset:0;
  z-index:58;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.55);
  backdrop-filter: blur(8px);
}
.mode-overlay.hidden{display:none}
.mode-card{
  width:min(360px, calc(100vw - 32px));
  padding:14px;
  border-radius:16px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(7,16,31,0.88);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
}
.mode-title{font-size:13px;opacity:0.9;margin-bottom:10px}
.mode-row{display:flex;gap:10px}
.mode-btn{
  flex:1;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#e5e7eb;
  padding:10px 10px;
  border-radius:12px;
  font-size:13px;
}
.mode-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(0,255,200,0.18)}
.mode-btn:active{transform:scale(.98)}
.mode-hint{margin-top:10px;font-size:12px;color:rgba(229,231,235,0.75)}

/* ===== Onboarding ===== */
.onb-overlay{
  position:absolute;inset:0;
  z-index:59;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.72);
  backdrop-filter: blur(10px);
  opacity:0;
  transform:translateY(10px);
  transition:opacity 220ms ease, transform 220ms ease;
}
.onb-overlay.hidden{display:none}
.onb-overlay.is-open{opacity:1;transform:translateY(0)}
.onb-card{
  width:min(460px, calc(100vw - 32px));
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(7,16,31,0.82);
  box-shadow:0 18px 60px rgba(0,0,0,0.60);
}
.onb-title{font-size:16px;font-weight:650;letter-spacing:.2px}
.onb-sub{margin-top:6px;font-size:12px;color:rgba(229,231,235,0.78)}
.onb-form{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.onb-row{display:flex;flex-direction:column;gap:6px}
.onb-label{font-size:12px;color:rgba(229,231,235,0.78)}
.onb-input{
  width:100%;
  border:1px solid rgba(255,255,255,0.12);
  background:rgba(255,255,255,0.06);
  color:#e5e7eb;
  padding:12px 12px;
  border-radius:14px;
  font-size:14px;
}
.onb-input:focus{outline:none;box-shadow:0 0 0 3px rgba(0,255,200,0.18)}
.onb-preview{width:84px;height:84px;border-radius:18px;object-fit:cover;border:1px solid rgba(255,255,255,0.12)}
.onb-preview.hidden{display:none}
.onb-msg{min-height:16px;font-size:12px;color:rgba(229,231,235,0.85)}
.onb-actions{display:flex;gap:10px;justify-content:flex-end;margin-top:4px}
.onb-btn{
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.08);
  color:#e5e7eb;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
}
.onb-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(0,255,200,0.18)}
.onb-btn:disabled{opacity:0.65;cursor:not-allowed}

/* ===== Auth overlay + menu ===== */
.auth-overlay{
  position:absolute;inset:0;
  z-index:60;
  display:flex;
  align-items:center;
  justify-content:center;
  background:rgba(0,0,0,0.78);
  backdrop-filter: blur(10px);
}
.auth-overlay.hidden{display:none}
.auth-card{
  width:min(420px, calc(100vw - 32px));
  padding:18px;
  border-radius:18px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(7,16,31,0.72);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
}
.auth-btn{
  width:100%;
  border:1px solid rgba(255,255,255,0.14);
  background:rgba(255,255,255,0.06);
  color:#e5e7eb;
  padding:12px 14px;
  border-radius:14px;
  font-size:14px;
}
.auth-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(0,255,200,0.18)}
.auth-btn:disabled{opacity:0.65;cursor:not-allowed}
.auth-msg{margin-top:10px;font-size:12px;color:rgba(229,231,235,0.85);min-height:16px}

.menu-wrap{position:absolute;top:12px;right:12px;z-index:55}
.menu-wrap.hidden{display:none}
.menu-btn{
  width:40px;height:40px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(7,16,31,0.72);
  backdrop-filter: blur(14px);
  color:#e5e7eb;
  font-size:16px;
}
.menu-btn:focus{outline:none;box-shadow:0 0 0 3px rgba(0,255,200,0.18)}
.menu-panel{
  position:absolute;top:46px;right:0;
  min-width:160px;
  padding:6px;
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.10);
  background:rgba(7,16,31,0.78);
  backdrop-filter: blur(14px);
  box-shadow:0 18px 60px rgba(0,0,0,0.55);
  display:none;
}
.menu-panel.open{display:block}
.menu-item{
  width:100%;
  text-align:left;
  padding:10px 10px;
  border-radius:10px;
  border:1px solid transparent;
  background:transparent;
  color:#e5e7eb;
  font-size:13px;
}
.menu-item:hover{background:rgba(255,255,255,0.06)}
.menu-item:focus{outline:none;box-shadow:0 0 0 3px rgba(0,255,200,0.18)}

/* ===== Live users: premium glowing atom markers (anchored to lng/lat) ===== */
.energy-marker{
  width:22px;height:22px;
  border-radius:999px;
  position:relative;
  background:radial-gradient(circle at 50% 55%, rgba(8,18,40,.98), rgba(5,11,24,.96));
  border:0;
  box-shadow:none;
  transform:translateZ(0);
}

/* central energy core */
.energy-marker::before{content:none;display:none}

/* Disable marker ray effect */
.energy-marker::after{content:none !important;display:none !important}

@keyframes atomOrbit{to{transform:rotate(360deg)}}

/* subtle breathing (kept compact) */
@keyframes energyBreath{0%,100%{transform:scale(.94);opacity:.58}50%{transform:scale(1.10);opacity:1}}
.energy-marker{animation:none}

.energy-marker.me{box-shadow:none}
.energy-marker.me::after{content:none !important;display:none !important}

@media (prefers-reduced-motion: reduce){
  .energy-marker,.energy-marker::after{animation:none}
}

/* ===== AVATAR MARKER (Premium Pulse) ===== */
.avatar-marker{
  width:40px;
  height:40px;
  border-radius:999px;
  position:relative;
  overflow:visible !important;
}

.avatar-marker img{
  width:100%;
  height:100%;
  object-fit:cover;
  border-radius:999px;
  display:block;
}

.avatar-marker.me::before{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:2px solid rgba(255,64,129,.32);
  box-shadow:0 0 18px rgba(255,64,129,.18);
  animation:mePulse 2.6s ease-out infinite;
  display:block !important;
}

.avatar-marker.me::after{
  content:"";
  position:absolute;
  inset:-16px;
  border-radius:999px;
  border:1px solid rgba(139,92,246,.20);
  animation:mePulseOuter 2.6s ease-out infinite;
  display:block !important;
}

@keyframes mePulse{
  0%{transform:scale(.88);opacity:.68}
  70%{transform:scale(1.28);opacity:0}
  100%{transform:scale(1.28);opacity:0}
}

@keyframes mePulseOuter{
  0%{transform:scale(.92);opacity:.42}
  75%{transform:scale(1.55);opacity:0}
  100%{transform:scale(1.55);opacity:0}
}

@media (prefers-reduced-motion: reduce){
  #intro-screen .earth::before,
  #intro-screen .earth::after{animation:none}
}

/* Nearby pulse ring for avatar markers */
.avatar-marker.nearby::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border:2px solid rgba(255,255,255,.18);
  animation:nearPulse 2.2s ease-out infinite;
}
@keyframes nearPulse{
  0%{transform:scale(.92);opacity:.55}
  70%{transform:scale(1.35);opacity:0}
  100%{transform:scale(1.35);opacity:0}
}

/* Story ring for avatar markers */
.avatar-marker.has-story{
  box-shadow:
    0 0 0 2px rgba(255,255,255,.16),
    0 0 0 4px rgba(255,59,92,.88),
    0  0 18px rgba(255,59,92,.18);
}

.app-mood{
  padding:6px 10px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
  cursor: pointer;
  transition: background 0.2s, transform 0.1s;
}
.app-mood:active {
  transform: scale(0.96);
  background: rgba(255,255,255,.12);
}

.hidden { display: none !important; }

/* ===== VIBES CLEANUP PATCH ===== */

/* base */
html,body{
  overflow-x:hidden !important;
}

/* top card */
.top,
.app-header,
.header,
.topbar{
  max-width:calc(100vw - 28px) !important;
}

.top,
.app-header,
.header{
  border-radius:22px !important;
  backdrop-filter:blur(12px) !important;
  -webkit-backdrop-filter:blur(12px) !important;
}

/* avatar arriba a la derecha */
.top .avatar,
.app-header .avatar,
.header-avatar,
.top img[alt*="avatar"],
.top img[alt*="profile"]{
  width:62px !important;
  height:62px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  border:2px solid rgba(255,255,255,.85) !important;
  box-shadow:0 6px 20px rgba(0,0,0,.30) !important;
}

/* barra inferior principal */
.bottom-nav,
.tabbar,
nav.bottom,
.app-nav{
  left:16px !important;
  right:16px !important;
  bottom:86px !important;
  width:auto !important;
  border-radius:24px !important;
  padding:10px !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 10px 30px rgba(0,0,0,.28) !important;
}

/* items barra inferior */
.bottom-nav > *,
.tabbar > *,
nav.bottom > *,
.app-nav > *{
  min-width:0 !important;
  flex:1 1 0 !important;
  border-radius:18px !important;
}

/* evita que texto largo se rompa raro */
.bottom-nav *,
.tabbar *,
nav.bottom *,
.app-nav *{
  white-space:nowrap !important;
  overflow:hidden !important;
  text-overflow:ellipsis !important;
}

/* stack derecha */
.fab-stack,
.right-stack,
.floating-actions,
.quick-actions{
  right:14px !important;
  bottom:170px !important;
  gap:12px !important;
  z-index:40 !important;
}

.fab-stack > *,
.right-stack > *,
.floating-actions > *,
.quick-actions > *{
  width:72px !important;
  height:72px !important;
  border-radius:22px !important;
  box-shadow:0 10px 24px rgba(0,0,0,.28) !important;
}

/* deja espacio al attribution del mapa */
.maplibregl-ctrl-bottom-right,
.maplibregl-ctrl-bottom-left,
.maplibregl-ctrl-bottom-center{
  bottom:12px !important;
}

.maplibregl-ctrl-attrib{
  margin-bottom:8px !important;
  border-radius:14px !important;
  overflow:hidden !important;
}

/* quita duplicados comunes */
.duplicate-hidden{
  display:none !important;
}

/* FINAL CLEANUP OVERRIDE */
html,body{overflow-x:hidden!important}

.bottom-nav,.tabbar,.app-nav,nav.bottom{
  left:16px!important;
  right:16px!important;
  width:auto!important;
  bottom:84px!important;
  border-radius:22px!important;
  padding:10px!important;
}

.fab-stack,.right-stack,.floating-actions,.quick-actions{
  right:14px!important;
  bottom:170px!important;
}

.maplibregl-ctrl-attrib{
  margin-bottom:8px!important;
  border-radius:12px!important;
  overflow:hidden!important;
}

.hide-dup{display:none!important}

/* ===== PREMIUM FLOATING UI PATCH ===== */

/* barra inferior premium */
.bottom-nav,
.tabbar,
.app-nav,
nav.bottom{
  position:fixed !important;
  left:18px !important;
  right:18px !important;
  bottom:92px !important;
  width:auto !important;
  display:flex !important;
  align-items:center !important;
  justify-content:space-between !important;
  gap:12px !important;
  padding:14px !important;
  border-radius:28px !important;
  background:rgba(10,16,34,.58) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 18px 40px rgba(0,0,0,.40),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
  backdrop-filter:blur(18px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(18px) saturate(140%) !important;
  z-index:999 !important;
}

/* botones dentro de la barra inferior */
.bottom-nav > *,
.tabbar > *,
.app-nav > *,
nav.bottom > *{
  flex:1 1 0 !important;
  min-width:0 !important;
  min-height:84px !important;
  border-radius:22px !important;
  display:flex !important;
  flex-direction:column !important;
  align-items:center !important;
  justify-content:center !important;
  gap:8px !important;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.03)) !important;
  border:1px solid rgba(255,255,255,.07) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 18px rgba(0,0,0,.18) !important;
  color:#fff !important;
  font-weight:600 !important;
  letter-spacing:.2px !important;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease !important;
}

.bottom-nav > *:active,
.tabbar > *:active,
.app-nav > *:active,
nav.bottom > *:active{
  transform:scale(.97) !important;
}

/* botón activo */
.bottom-nav > *.active,
.tabbar > *.active,
.app-nav > *.active,
nav.bottom > *.active,
.bottom-nav > *[aria-current="page"],
.tabbar > *[aria-current="page"],
.app-nav > *[aria-current="page"],
nav.bottom > *[aria-current="page"]{
  background:
    radial-gradient(circle at top, rgba(255,70,120,.30), transparent 58%),
    linear-gradient(180deg, rgba(255,70,120,.20), rgba(255,255,255,.06)) !important;
  border:1px solid rgba(255,120,160,.24) !important;
  box-shadow:
    0 10px 26px rgba(255,50,110,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* texto e iconos barra inferior */
.bottom-nav *,.tabbar *,.app-nav * ,nav.bottom *{
  color:#fff !important;
  text-shadow:0 1px 8px rgba(0,0,0,.26) !important;
}

.bottom-nav svg,.tabbar svg,.app-nav svg,nav.bottom svg{
  width:22px !important;
  height:22px !important;
}

/* stack derecha premium */
.fab-stack,
.right-stack,
.floating-actions,
.quick-actions{
  position:fixed !important;
  right:18px !important;
  bottom:198px !important;
  display:flex !important;
  flex-direction:column !important;
  gap:14px !important;
  z-index:998 !important;
}

/* botones flotantes */
.fab-stack > *,
.right-stack > *,
.floating-actions > *,
.quick-actions > *{
  width:72px !important;
  height:72px !important;
  border-radius:24px !important;
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  background:
    linear-gradient(180deg, rgba(16,22,46,.92), rgba(8,12,28,.88)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.34),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
  backdrop-filter:blur(14px) saturate(140%) !important;
  -webkit-backdrop-filter:blur(14px) saturate(140%) !important;
  transition:transform .18s ease, box-shadow .18s ease !important;
}

.fab-stack > *:active,
.right-stack > *:active,
.floating-actions > *:active,
.quick-actions > *:active{
  transform:scale(.96) !important;
}

.fab-stack svg,
.right-stack svg,
.floating-actions svg,
.quick-actions svg{
  width:28px !important;
  height:28px !important;
  color:#fff !important;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,.25)) !important;
}

/* botón + más premium */
.fab-stack > *:last-child,
.right-stack > *:last-child,
.floating-actions > *:last-child,
.quick-actions > *:last-child{
  background:
    radial-gradient(circle at 30% 20%, rgba(255,90,140,.35), transparent 44%),
    linear-gradient(180deg, rgba(34,16,46,.96), rgba(16,10,28,.92)) !important;
  border:1px solid rgba(255,120,160,.20) !important;
  box-shadow:
    0 16px 34px rgba(255,50,120,.18),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* top card más premium */
.top,.app-header,.header,.topbar{
  border-radius:24px !important;
  background:rgba(8,12,26,.56) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 14px 32px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  backdrop-filter:blur(16px) saturate(135%) !important;
  -webkit-backdrop-filter:blur(16px) saturate(135%) !important;
}

/* avatar superior */
.top img,
.app-header img,
.header img,
.header-avatar{
  width:64px !important;
  height:64px !important;
  border-radius:50% !important;
  object-fit:cover !important;
  border:2px solid rgba(255,255,255,.88) !important;
  box-shadow:0 8px 24px rgba(0,0,0,.28) !important;
}

/* attribution más limpio */
.maplibregl-ctrl-attrib{
  margin-bottom:10px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.88) !important;
  overflow:hidden !important;
}

/* PREMIUM BUTTONS V2 */
.bottom-nav,.tabbar,.app-nav,nav.bottom{
  position:fixed!important;
  left:16px!important; right:16px!important; bottom:92px!important;
  display:flex!important; gap:10px!important; padding:12px!important;
  border-radius:26px!important;
  background:rgba(10,14,28,.62)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(18px)!important; -webkit-backdrop-filter:blur(18px)!important;
  box-shadow:0 16px 40px rgba(0,0,0,.35)!important;
  z-index:999!important;
}
.bottom-nav>*,.tabbar>*,.app-nav>* ,nav.bottom>*{
  flex:1 1 0!important; min-width:0!important; min-height:78px!important;
  border-radius:20px!important;
  background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,.03))!important;
  border:1px solid rgba(255,255,255,.06)!important;
  display:flex!important; flex-direction:column!important;
  align-items:center!important; justify-content:center!important; gap:7px!important;
  font-size:13px!important; font-weight:600!important; color:#fff!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 8px 20px rgba(0,0,0,.18)!important;
}
.bottom-nav>*:nth-child(2),.tabbar>*:nth-child(2),.app-nav>*:nth-child(2),nav.bottom>*:nth-child(2){
  background:linear-gradient(180deg,rgba(255,80,130,.22),rgba(255,255,255,.05))!important;
  border:1px solid rgba(255,120,160,.20)!important;
  box-shadow:0 10px 24px rgba(255,60,120,.18)!important;
}
.bottom-nav svg,.tabbar svg,.app-nav svg,nav.bottom svg{
  width:22px!important; height:22px!important;
}

.fab-stack,.right-stack,.floating-actions,.quick-actions{
  position:fixed!important; right:18px!important; bottom:194px!important;
  display:flex!important; flex-direction:column!important; gap:12px!important; z-index:998!important;
}
.fab-stack>*,.right-stack>*,.floating-actions>*,.quick-actions>*{
  width:68px!important; height:68px!important; border-radius:22px!important;
  background:linear-gradient(180deg,rgba(15,20,40,.94),rgba(8,11,24,.90))!important;
  border:1px solid rgba(255,255,255,.08)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.30)!important;
  display:flex!important; align-items:center!important; justify-content:center!important;
}
.fab-stack>*:last-child,.right-stack>*:last-child,.floating-actions>*:last-child,.quick-actions>*:last-child{
  background:linear-gradient(180deg,rgba(42,18,52,.96),rgba(20,10,28,.92))!important;
  border:1px solid rgba(255,120,160,.18)!important;
  box-shadow:0 14px 30px rgba(255,60,120,.18)!important;
}

.top,.app-header,.header,.topbar{
  border-radius:24px!important;
  background:rgba(7,10,24,.58)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(14px)!important; -webkit-backdrop-filter:blur(14px)!important;
}

.hide-ugly{display:none!important}

/* PREMIUM CLEAN BUTTONS */

/* barra inferior */
.bottom-nav,.tabbar,.app-nav,nav.bottom{
  position:fixed!important;
  left:18px!important;
  right:18px!important;
  bottom:92px!important;
  display:flex!important;
  gap:12px!important;
  padding:12px!important;
  border-radius:28px!important;
  background:rgba(10,14,30,.58)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(20px)!important;
  -webkit-backdrop-filter:blur(20px)!important;
  box-shadow:0 18px 40px rgba(0,0,0,.34)!important;
  z-index:999!important;
}

.bottom-nav>* ,.tabbar>* ,.app-nav>* ,nav.bottom>*{
  flex:1 1 0!important;
  min-width:0!important;
  min-height:76px!important;
  border-radius:22px!important;
  background:rgba(255,255,255,.04)!important;
  border:1px solid rgba(255,255,255,.05)!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:8px!important;
  color:#fff!important;
  font-size:13px!important;
  font-weight:600!important;
  letter-spacing:.2px!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04)!important;
}

.bottom-nav>*:nth-child(2),.tabbar>*:nth-child(2),.app-nav>*:nth-child(2),nav.bottom>*:nth-child(2){
  background:linear-gradient(180deg,rgba(255,70,120,.18),rgba(255,255,255,.04))!important;
  border:1px solid rgba(255,120,160,.16)!important;
  box-shadow:0 10px 24px rgba(255,70,120,.16)!important;
}

.bottom-nav svg,.tabbar svg,.app-nav svg,nav.bottom svg{
  width:20px!important;
  height:20px!important;
}

/* botones flotantes derecha */
.fab-stack,.right-stack,.floating-actions,.quick-actions{
  position:fixed!important;
  right:18px!important;
  bottom:194px!important;
  display:flex!important;
  flex-direction:column!important;
  gap:12px!important;
  z-index:998!important;
}

.fab-stack>* ,.right-stack>* ,.floating-actions>* ,.quick-actions>*{
  width:66px!important;
  height:66px!important;
  border-radius:22px!important;
  background:rgba(12,18,36,.82)!important;
  border:1px solid rgba(255,255,255,.07)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  box-shadow:0 12px 28px rgba(0,0,0,.28)!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
}

.fab-stack>*:last-child,.right-stack>*:last-child,.floating-actions>*:last-child,.quick-actions>*:last-child{
  background:linear-gradient(180deg,rgba(44,18,56,.92),rgba(18,10,28,.90))!important;
  border:1px solid rgba(255,120,160,.18) !important;
  box-shadow:0 14px 30px rgba(255,70,120,.16)!important;
}

/* tarjeta superior */
.top,.app-header,.header,.topbar{
  border-radius:24px!important;
  background:rgba(8,12,26,.56)!important;
  border:1px solid rgba(255,255,255,.08)!important;
  backdrop-filter:blur(16px)!important;
  -webkit-backdrop-filter:blur(16px)!important;
  box-shadow:0 14px 30px rgba(0,0,0,.28)!important;
}

.kill-dup{display:none!important}

body.messages-open .map-fab-wrap,
body.messages-open #fabStory,
body.messages-open .fab-stack,
body.messages-open .right-stack,
body.messages-open .floating-actions,
body.messages-open .quick-actions,
body.messages-open .live-counter {
  display: none !important;
}

.bottom-sheet{
position:fixed;
left:12px;
right:12px;
bottom:110px;
z-index:140;
border-radius:22px;
border:1px solid rgba(255,255,255,.12);
background:rgba(10,14,28,.96);
backdrop-filter:blur(20px);
box-shadow:0 30px 70px rgba(0,0,0,.45);
transform:translateY(40px);
opacity:0;
transition:transform .35s cubic-bezier(.22,.9,.32,1), opacity .25s ease;
}

.bottom-sheet.show{
transform:translateY(0);
opacity:1;
}

.bottom-sheet.hidden{
display:none;
}

/* DEJAR SOLO UN PROFILE Y SOLO EL + A LA DERECHA */

/* columna derecha: ocultar profile y settings, dejar solo el + */
.fab-stack > :nth-child(1),
.fab-stack > :nth-child(2),
.right-stack > :nth-child(1),
.right-stack > :nth-child(2),
.floating-actions > :nth-child(1),
.floating-actions > :nth-child(2),
.quick-actions > :nth-child(1),
.quick-actions > :nth-child(2){
  display:none !important;
}

/* LIMPIAR BOTONES DERECHA */

/* ocultar profile */
.fab-stack > :first-child,
.right-stack > :first-child,
.floating-actions > :first-child,
.quick-actions > :first-child{
  display:none !important;
}

/* ocultar settings */
.fab-stack > :nth-child(2),
.right-stack > :nth-child(2),
.floating-actions > :nth-child(2),
.quick-actions > :nth-child(2){
  display:none !important;
}

/* dejar solo el + */
.fab-stack > :last-child,
.right-stack > :last-child,
.floating-actions > :last-child,
.quick-actions > :last-child{
  transform:scale(1.05);
}

/* ===== VIBES LIST STYLES ===== */

.nearby-panel,
.people-nearby,
.nearby-card,
.msg-nearby,
.vibe-nearby,
.mood-nearby,
[class*="nearby"]{
  display:none !important;
  visibility:hidden !important;
  pointer-events:none !important;
  max-height:0 !important;
  overflow:hidden !important;
  opacity:0 !important;
}

/* ===== MOOD PANEL LAYOUT FIX ===== */
div, section, article{
  box-sizing:border-box;
}

.vibe-controls,
.mood-panel,
.controls-panel,
.mood-sheet,
.vibe-controls-panel,
[class*="vibe-controls"],
[class*="mood-panel"]{
  bottom: 150px !important;
  left: 22px !important;
  right: 22px !important;
  width: auto !important;
  max-width: none !important;
  border-radius: 28px !important;
  padding: 22px 20px 18px !important;
  box-sizing: border-box !important;
  z-index: 40 !important;
}

.vibe-controls h2,
.mood-panel h2,
.controls-panel h2,
.mood-sheet h2,
.vibe-controls-panel h2,
.vibe-controls h3,
.mood-panel h3,
.controls-panel h3,
.mood-sheet h3,
.vibe-controls-panel h3{
  margin: 0 0 18px 0 !important;
  font-size: 26px !important;
  line-height: 1.05 !important;
}

.vibe-controls label,
.mood-panel label,
.controls-panel label,
.mood-sheet label,
.vibe-controls-panel label,
.vibe-controls .label,
.mood-panel .label,
.controls-panel .label,
.mood-sheet .label,
.vibe-controls-panel .label{
  display:block !important;
  margin: 0 0 8px 0 !important;
  font-size: 15px !important;
  opacity: .92 !important;
}

.vibe-controls .row,
.mood-panel .row,
.controls-panel .row,
.mood-sheet .row,
.vibe-controls-panel .row{
  margin-bottom: 14px !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
}

.vibe-controls button,
.mood-panel button,
.controls-panel button,
.mood-sheet button,
.vibe-controls-panel button{
  min-height: 40px !important;
  padding: 8px 16px !important;
  border-radius: 14px !important;
  font-size: 15px !important;
  line-height: 1 !important;
}

.vibe-controls button:last-child,
.mood-panel button:last-child,
.controls-panel button:last-child,
.mood-sheet button:last-child,
.vibe-controls-panel button:last-child{
  margin-top: 10px !important;
}

#fabProfile,
#fabFilters,
#fabChat,
#fabStory,
.fab-profile,
.fab-filters,
.fab-chat,
.fab-story{
  right: 14px !important;
}

#bottomNav,
.bottom-nav,
.nav-dock,
[class*="bottom-nav"]{
  z-index: 60 !important;
}

/* ===== PREMIUM UI PASS ===== */

/* Fondo general más limpio */
body,
.app-shell,
#app,
main{
  background:
    radial-gradient(circle at top, rgba(90,110,255,.10), transparent 32%),
    radial-gradient(circle at bottom, rgba(255,70,140,.10), transparent 30%),
    #071120 !important;
  color:#fff !important;
}

/* Overlay oscuro superior/inferior para dar profundidad */
.map-wrap,
#map,
.maplibregl-map{
  position:relative;
}
.map-wrap::before,
#map::before,
.maplibregl-map::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background:
    linear-gradient(to bottom, rgba(5,10,20,.72) 0%, rgba(5,10,20,.18) 24%, rgba(5,10,20,.10) 62%, rgba(5,10,20,.68) 100%);
  z-index:2;
}

/* ===== HEADER ===== */
.app-header,
.topbar,
.header,
.app-top{
  background:rgba(10,16,30,.58) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    0 10px 30px rgba(0,0,0,.30),
    inset 0 1px 0 rgba(255,255,255,.05);
  border-radius:24px !important;
}

/* Título más premium */
.app-brand,
.header-title,
.topbar-title{
  font-size:15px !important;
  font-weight:800 !important;
  letter-spacing:.1px !important;
  color:#ffffff !important;
}

/* Subtexto más fino */
.app-header-bottom,
.header-subtitle,
.topbar-subtitle{
  font-size:11px !important;
  color:rgba(255,255,255,.64) !important;
  letter-spacing:.2px;
}

/* Corrige “online online” visualmente: solo muestra una línea limpia */
.app-header-bottom{
  max-width:180px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* Chip mood más elegante */
.app-mood,
.mood-chip,
.header-mood{
  height:38px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:rgba(255,255,255,.90) !important;
  font-size:13px !important;
  font-weight:600 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* Avatar más limpio */
.header-avatar,
.app-avatar,
.top-avatar,
img.header-avatar,
img.app-avatar{
  width:62px !important;
  height:62px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,.30) !important;
  box-shadow:
    0 8px 24px rgba(0,0,0,.30),
    0 0 0 4px rgba(255,255,255,.04) !important;
  object-fit:cover !important;
  background:#111827 !important;
}

/* ===== MODAL / SHEET ===== */
.vibe-controls,
.controls-modal,
.modal-card,
.sheet,
.panel-card{
  background:rgba(7,13,26,.72) !important;
  backdrop-filter:blur(22px) saturate(145%);
  -webkit-backdrop-filter:blur(22px) saturate(145%);
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:30px !important;
  box-shadow:
    0 20px 60px rgba(0,0,0,.42),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* Si está centrado, lo hace más app premium */
.vibe-controls,
.controls-modal{
  width:min(92vw,420px) !important;
  max-width:420px !important;
  padding:22px 18px 18px !important;
}

/* Título modal */
.vibe-controls h1,
.vibe-controls h2,
.controls-modal h1,
.controls-modal h2,
.modal-card h1,
.modal-card h2{
  font-size:21px !important;
  line-height:1.1 !important;
  font-weight:800 !important;
  letter-spacing:-.3px !important;
  margin-bottom:18px !important;
}

/* Labels */
.vibe-controls label,
.controls-modal label,
.modal-card label,
.sheet label{
  font-size:13px !important;
  font-weight:700 !important;
  color:rgba(255,255,255,.82) !important;
  margin-bottom:10px !important;
  display:block;
}

/* Botones de opciones */
.vibe-controls button,
.controls-modal button,
.modal-card button,
.sheet button{
  min-height:50px !important;
  border-radius:18px !important;
  border:1px solid rgba(255,255,255,.08) !important;
  background:rgba(255,255,255,.05) !important;
  color:#fff !important;
  font-size:14px !important;
  font-weight:700 !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.04);
}

/* Botón activo */
.vibe-controls .active,
.controls-modal .active,
.modal-card .active,
.sheet .active,
.vibe-controls button[aria-pressed="true"],
.controls-modal button[aria-pressed="true"]{
  background:
    linear-gradient(135deg, rgba(255,70,140,.28), rgba(120,80,255,.24)) !important;
  border-color:rgba(255,120,190,.32) !important;
  box-shadow:
    0 8px 24px rgba(255,70,140,.16),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* Botón principal Save */
.vibe-controls .save,
.controls-modal .save,
.modal-card .save,
.sheet .save{
  background:linear-gradient(135deg, #ff4c98, #7b61ff) !important;
  border:none !important;
  color:#fff !important;
  box-shadow:0 10px 28px rgba(180,70,255,.28) !important;
}

/* Botón secundario Close */
.vibe-controls .close,
.controls-modal .close,
.modal-card .close,
.sheet .close{
  background:rgba(255,255,255,.06) !important;
  color:rgba(255,255,255,.88) !important;
}

/* X del modal menos pesada */
.vibe-controls .icon-close,
.controls-modal .icon-close,
.modal-card .icon-close,
button[aria-label="Close"]{
  width:44px !important;
  height:44px !important;
  border-radius:14px !important;
  background:rgba(255,255,255,.06) !important;
  border:1px solid rgba(255,255,255,.08) !important;
}

/* ===== BARRA INFERIOR ===== */
.bottom-nav,
.tabbar,
.floating-nav,
.app-bottom-nav{
  background:rgba(10,16,30,.56) !important;
  backdrop-filter:blur(18px) saturate(140%);
  -webkit-backdrop-filter:blur(18px) saturate(140%);
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:30px !important;
  box-shadow:
    0 16px 40px rgba(0,0,0,.32),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  padding:10px !important;
}

/* Tabs */
.bottom-nav button,
.tabbar button,
.floating-nav button,
.app-bottom-nav button{
  min-height:74px !important;
  border-radius:22px !important;
  background:transparent !important;
  border:1px solid transparent !important;
  color:rgba(255,255,255,.82) !important;
  font-size:13px !important;
  font-weight:700 !important;
}

/* Tab activo más premium */
.bottom-nav button.active,
.tabbar button.active,
.floating-nav button.active,
.app-bottom-nav button.active,
.bottom-nav .active,
.tabbar .active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(255,70,140,.18), rgba(120,80,255,.16)) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 22px rgba(120,80,255,.12) !important;
  color:#fff !important;
}

/* Iconos del nav */
.bottom-nav .icon,
.tabbar .icon,
.floating-nav .icon{
  font-size:20px !important;
  margin-bottom:6px !important;
}

/* ===== MAP CONTROLS ===== */
.maplibregl-ctrl-group{
  background:rgba(14,20,34,.72) !important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
  border:1px solid rgba(255,255,255,.10) !important;
  border-radius:18px !important;
  overflow:hidden;
  box-shadow:0 12px 30px rgba(0,0,0,.28) !important;
}
.maplibregl-ctrl-group button{
  background:transparent !important;
  color:#fff !important;
  border:none !important;
}

/* ===== LIMPIEZA ===== */
.card,
.panel,
.box{
  border-color:rgba(255,255,255,.08) !important;
}

/* scroll / safe mobile */
*{
  -webkit-tap-highlight-color:transparent;
}

/* ===== COMPACT PREMIUM PASS ===== */

/* Header más compacto */
.app-header,
.topbar,
.header,
.app-top{
  min-height:auto !important;
  padding:12px 14px !important;
  border-radius:20px !important;
}

/* Título y subtítulo más pequeños */
.app-brand,
.header-title,
.topbar-title{
  font-size:13px !important;
  font-weight:800 !important;
  line-height:1.1 !important;
}

.app-header-bottom,
.header-subtitle,
.topbar-subtitle{
  font-size:10px !important;
  line-height:1.1 !important;
  margin-top:4px !important;
  opacity:.78 !important;
}

/* Chip de mood más pequeño */
.app-mood,
.mood-chip,
.header-mood{
  height:32px !important;
  padding:0 12px !important;
  font-size:11px !important;
  border-radius:999px !important;
  max-width:132px !important;
}

/* Avatar más pequeño */
.header-avatar,
.app-avatar,
.top-avatar,
img.header-avatar,
img.app-avatar{
  width:52px !important;
  height:52px !important;
  min-width:52px !important;
  min-height:52px !important;
}

/* Si hay layout flex en header, darle mejor proporción */
.app-left,
.header-left{
  gap:6px !important;
}
.app-right,
.header-right{
  gap:8px !important;
}

/* Barra inferior más compacta */
.bottom-nav,
.tabbar,
.floating-nav,
.app-bottom-nav{
  padding:8px !important;
  border-radius:24px !important;
  max-width:min(88vw, 330px) !important;
}

/* Tabs más pequeños */
.bottom-nav button,
.tabbar button,
.floating-nav button,
.app-bottom-nav button{
  min-height:60px !important;
  padding:8px 10px !important;
  border-radius:18px !important;
  font-size:11px !important;
}

/* Iconos del nav */
.bottom-nav .icon,
.tabbar .icon,
.floating-nav .icon{
  font-size:17px !important;
  margin-bottom:3px !important;
}

/* Panel flotante derecho más compacto */
.fab,
.fab-btn,
.side-fab button,
.map-actions button,
button[id*="fab"],
button[id*="profile"],
button[id*="filter"]{
  width:52px !important;
  height:52px !important;
  border-radius:18px !important;
}

/* Controles del mapa más delgados */
.maplibregl-ctrl-group{
  transform:scale(.92);
  transform-origin:right center;
}

/* Marker del usuario ligeramente más pequeño */
.map-avatar,
.user-marker img,
.marker img{
  width:42px !important;
  height:42px !important;
  border-radius:50% !important;
}

/* Más aire abajo para que no se vea pesado */
.bottom-nav,
.tabbar,
.floating-nav,
.app-bottom-nav{
  bottom:18px !important;
}

/* ===== VIBES FLOATING LIVE UI ===== */

/* Fondo */
body,
#app,
.app-shell,
main{
  background:
    radial-gradient(circle at 50% 100%, rgba(255,70,140,.14), transparent 28%),
    radial-gradient(circle at 50% 0%, rgba(75,120,255,.12), transparent 24%),
    #050b16 !important;
  color:#fff !important;
}

/* Mapa más cinematográfico */
#map,
.map-wrap,
.maplibregl-map{
  position:relative;
  filter:saturate(1.06) contrast(1.02);
}
#map::before,
.map-wrap::before,
.maplibregl-map::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  z-index:2;
  background:
    linear-gradient(to bottom, rgba(5,10,20,.45) 0%, rgba(5,10,20,.10) 18%, rgba(5,10,20,.05) 70%, rgba(5,10,20,.50) 100%),
    radial-gradient(circle at 50% 72%, rgba(255,70,140,.12), transparent 22%);
}

/* ===== HEADER: quitar look de caja pesada ===== */
.app-header,
.topbar,
.header,
.app-top{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:10px 14px 0 !important;
  min-height:auto !important;
}

/* si existe contenedor interno del header */
.app-header > *,
.topbar > *,
.header > *,
.app-top > *{
  align-items:center !important;
}

/* badge izquierda */
.app-left,
.header-left{
  background:rgba(10,18,34,.42) !important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  border:1px solid rgba(255,255,255,.08) !important;
  border-radius:18px !important;
  padding:10px 14px !important;
  box-shadow:
    0 10px 26px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* título */
.app-brand,
.header-title,
.topbar-title{
  font-size:14px !important;
  font-weight:800 !important;
  letter-spacing:.1px !important;
  color:#fff !important;
}

/* subtítulo fuera o casi invisible */
.header-subtitle,
.topbar-subtitle{
  font-size:10px !important;
  color:rgba(255,255,255,.55) !important;
  margin-top:3px !important;
}

/* mood como chip flotante */
.app-mood,
.mood-chip,
.header-mood{
  height:36px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    rgba(10,18,34,.42) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  color:#fff !important;
  font-size:12px !important;
  font-weight:700 !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.20),
    0 0 18px rgba(120,80,255,.08),
    inset 0 1px 0 rgba(255,255,255,.06) !important;
}

/* avatar como pieza flotante */
.header-avatar,
.app-avatar,
.top-avatar,
img.header-avatar,
img.app-avatar{
  width:54px !important;
  height:54px !important;
  min-width:54px !important;
  min-height:54px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,.28) !important;
  background:#111827 !important;
  box-shadow:
    0 12px 28px rgba(0,0,0,.28),
    0 0 0 4px rgba(255,255,255,.03),
    0 0 22px rgba(255,70,140,.12) !important;
}

/* ===== BOTONES LATERALES FLOTANTES ===== */
.fab,
.fab-btn,
.side-fab button,
.map-actions button,
button[id*="fab"],
button[id*="profile"],
button[id*="filter"]{
  width:56px !important;
  height:56px !important;
  border-radius:50% !important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.02)),
    rgba(10,18,34,.44) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(18px) saturate(150%);
  -webkit-backdrop-filter:blur(18px) saturate(150%);
  box-shadow:
    0 14px 32px rgba(0,0,0,.28),
    0 0 18px rgba(90,120,255,.10),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
  color:#fff !important;
}

/* ===== BARRA INFERIOR VIVA ===== */
.bottom-nav,
.tabbar,
.floating-nav,
.app-bottom-nav{
  background:
    linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,.02)),
    rgba(8,14,28,.42) !important;
  border:1px solid rgba(255,255,255,.09) !important;
  backdrop-filter:blur(22px) saturate(150%);
  -webkit-backdrop-filter:blur(22px) saturate(150%);
  border-radius:32px !important;
  padding:8px !important;
  max-width:min(88vw, 360px) !important;
  box-shadow:
    0 18px 44px rgba(0,0,0,.30),
    0 0 28px rgba(90,120,255,.08),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

/* tabs */
.bottom-nav button,
.tabbar button,
.floating-nav button,
.app-bottom-nav button{
  min-height:66px !important;
  padding:8px 10px !important;
  border-radius:24px !important;
  background:transparent !important;
  border:none !important;
  color:rgba(255,255,255,.84) !important;
  font-size:12px !important;
  font-weight:700 !important;
  position:relative;
  overflow:hidden;
}

/* activo = vivo */
.bottom-nav button.active,
.tabbar button.active,
.floating-nav button.active,
.app-bottom-nav button.active,
.bottom-nav .active,
.tabbar .active{
  background:
    linear-gradient(180deg, rgba(255,255,255,.07), rgba(255,255,255,.03)),
    linear-gradient(135deg, rgba(255,70,140,.24), rgba(120,80,255,.22)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  color:#fff !important;
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    0 0 26px rgba(255,70,140,.12),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

/* halo inferior del activo */
.bottom-nav button.active::after,
.tabbar button.active::after,
.floating-nav button.active::after,
.app-bottom-nav button.active::after,
.bottom-nav .active::after,
.tabbar .active::after{
  content:"";
  position:absolute;
  left:18%;
  right:18%;
  bottom:6px;
  height:10px;
  border-radius:999px;
  background:radial-gradient(circle, rgba(255,70,140,.45) 0%, rgba(120,80,255,.18) 48%, transparent 76%);
  filter:blur(10px);
  pointer-events:none;
}

/* iconos */
.bottom-nav .icon,
.tabbar .icon,
.floating-nav .icon{
  font-size:18px !important;
  margin-bottom:4px !important;
}

/* ===== MARCADOR MÁS PREMIUM ===== */
.map-avatar,
.user-marker img,
.marker img{
  width:44px !important;
  height:44px !important;
  border-radius:50% !important;
  border:2px solid rgba(255,255,255,.75) !important;
  box-shadow:
    0 8px 20px rgba(0,0,0,.28),
    0 0 18px rgba(255,70,140,.12) !important;
}

/* ===== CONTROLES MAPA ===== */
.maplibregl-ctrl-group{
  background:rgba(10,18,34,.44) !important;
  backdrop-filter:blur(18px) saturate(145%);
  -webkit-backdrop-filter:blur(18px) saturate(145%);
  border:1px solid rgba(255,255,255,.09) !important;
  border-radius:18px !important;
  overflow:hidden;
  box-shadow:0 12px 28px rgba(0,0,0,.26) !important;
}
.maplibregl-ctrl-group button{
  background:transparent !important;
  color:#fff !important;
}

/* limpiar bordes dobles feos */
.card,
.panel,
.box{
  border-color:rgba(255,255,255,.06) !important;
  box-shadow:none !important;
}

/* MINI PREMIUM FLOAT */
.app-header,.topbar,.header,.app-top{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:10px 12px 0 !important;
}

.app-left,.header-left{
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  padding:0 !important;
}

.header-subtitle,.topbar-subtitle{
  display:none !important;
}

.app-mood,.mood-chip,.header-mood{
  height:34px !important;
  padding:0 14px !important;
  border-radius:999px !important;
  background:rgba(18,24,40,.52) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  font-size:12px !important;
  font-weight:700 !important;
  color:#fff !important;
}

.header-avatar,.app-avatar,.top-avatar,
img.header-avatar,img.app-avatar{
  width:52px !important;
  height:52px !important;
  border-radius:50% !important;
  border:1.5px solid rgba(255,255,255,.28) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.24) !important;
}

.bottom-nav,.tabbar,.floating-nav,.app-bottom-nav{
  background:rgba(10,16,30,.40) !important;
  border:1px solid rgba(255,255,255,.08) !important;
  backdrop-filter:blur(18px) !important;
  -webkit-backdrop-filter:blur(18px) !important;
  border-radius:30px !important;
  padding:8px !important;
  box-shadow:0 16px 36px rgba(0,0,0,.28) !important;
}

.bottom-nav button,.tabbar button,.floating-nav button,.app-bottom-nav button{
  min-height:64px !important;
  border-radius:22px !important;
  background:transparent !important;
  border:none !important;
  color:rgba(255,255,255,.86) !important;
  font-size:12px !important;
  font-weight:700 !important;
}

.bottom-nav button.active,.tabbar button.active,
.floating-nav button.active,.app-bottom-nav button.active,
.bottom-nav .active,.tabbar .active{
  background:linear-gradient(135deg, rgba(255,70,140,.24), rgba(120,80,255,.22)) !important;
  box-shadow:0 10px 24px rgba(255,70,140,.12) !important;
  color:#fff !important;
}

.fab,.fab-btn,.side-fab button,.map-actions button,
button[id*="fab"],button[id*="profile"],button[id*="filter"]{
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  background:rgba(10,18,34,.46) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  backdrop-filter:blur(14px) !important;
  -webkit-backdrop-filter:blur(14px) !important;
  box-shadow:0 10px 24px rgba(0,0,0,.24) !important;
  color:#fff !important;
}

/* ICONOS MÁS PREMIUM */
.bottom-nav button,
.tabbar button,
.floating-nav button,
.app-bottom-nav button{
  gap:6px !important;
}

/* iconos del nav inferior */
.bottom-nav .icon,
.tabbar .icon,
.floating-nav .icon,
.app-bottom-nav .icon,
.bottom-nav button i,
.tabbar button i,
.floating-nav button i,
.app-bottom-nav button i,
.bottom-nav button svg,
.tabbar button svg,
.floating-nav button svg,
.app-bottom-nav button svg{
  font-size:22px !important;
  width:22px !important;
  height:22px !important;
  display:block !important;
  margin:0 auto 6px !important;
  filter:drop-shadow(0 2px 8px rgba(255,255,255,.10));
  opacity:.95 !important;
}

/* icono activo más vivo */
.bottom-nav button.active .icon,
.tabbar button.active .icon,
.floating-nav button.active .icon,
.app-bottom-nav button.active .icon,
.bottom-nav .active .icon,
.tabbar .active .icon,
.bottom-nav button.active i,
.tabbar button.active i,
.floating-nav button.active i,
.app-bottom-nav button.active i,
.bottom-nav button.active svg,
.tabbar button.active svg,
.floating-nav button.active svg,
.app-bottom-nav button.active svg{
  transform:scale(1.08);
  filter:
    drop-shadow(0 0 10px rgba(255,120,190,.22))
    drop-shadow(0 0 14px rgba(120,80,255,.18));
  opacity:1 !important;
}

/* texto del nav más fino */
.bottom-nav button,
.tabbar button,
.floating-nav button,
.app-bottom-nav button{
  font-size:11px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
}

/* iconos laterales */
.fab,
.fab-btn,
.side-fab button,
.map-actions button,
button[id*="fab"],
button[id*="profile"],
button[id*="filter"]{
  font-size:24px !important;
}

.fab i,.fab svg,
.fab-btn i,.fab-btn svg,
.side-fab button i,.side-fab button svg,
.map-actions button i,.map-actions button svg,
button[id*="fab"] i,button[id*="fab"] svg,
button[id*="profile"] i,button[id*="profile"] svg,
button[id*="filter"] i,button[id*="filter"] svg{
  width:24px !important;
  height:24px !important;
  filter:drop-shadow(0 2px 10px rgba(255,255,255,.10));
}

/* icono del mood activo con más fuerza */
.bottom-nav button.active,
.tabbar button.active,
.floating-nav button.active,
.app-bottom-nav button.active,
.bottom-nav .active,
.tabbar .active{
  transform:translateY(-1px);
}

/* PREMIUM ICON PASS */
.bottom-nav button,
.tabbar button,
.floating-nav button,
.app-bottom-nav button{
  gap:6px !important;
  font-weight:800 !important;
  letter-spacing:.2px !important;
}

/* iconos nav */
.bottom-nav .icon,
.tabbar .icon,
.floating-nav .icon,
.app-bottom-nav .icon,
.bottom-nav button i,
.tabbar button i,
.floating-nav button i,
.app-bottom-nav button i,
.bottom-nav button svg,
.tabbar button svg,
.floating-nav button svg,
.app-bottom-nav button svg{
  width:22px !important;
  height:22px !important;
  font-size:22px !important;
  display:block !important;
  margin:0 auto 6px !important;
  opacity:.95 !important;
  transform:translateY(-1px);
  filter:
    drop-shadow(0 2px 6px rgba(0,0,0,.28))
    drop-shadow(0 0 8px rgba(255,255,255,.08));
}

/* activo */
.bottom-nav button.active,
.tabbar button.active,
.floating-nav button.active,
.app-bottom-nav button.active,
.bottom-nav .active,
.tabbar .active{
  background:linear-gradient(135deg, rgba(255,90,160,.28), rgba(120,90,255,.24)) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 10px 22px rgba(255,70,140,.14),
    inset 0 1px 0 rgba(255,255,255,.08) !important;
}

.bottom-nav button.active .icon,
.tabbar button.active .icon,
.floating-nav button.active .icon,
.app-bottom-nav button.active .icon,
.bottom-nav .active .icon,
.tabbar .active .icon,
.bottom-nav button.active i,
.tabbar button.active i,
.floating-nav button.active i,
.app-bottom-nav button.active i,
.bottom-nav button.active svg,
.tabbar button.active svg,
.floating-nav button.active svg,
.app-bottom-nav button.active svg{
  transform:scale(1.08);
  filter:
    drop-shadow(0 0 10px rgba(255,120,190,.24))
    drop-shadow(0 0 14px rgba(120,80,255,.18));
  opacity:1 !important;
}

/* botones laterales más finos */
.fab,.fab-btn,.side-fab button,.map-actions button,
button[id*="fab"],button[id*="profile"],button[id*="filter"]{
  width:54px !important;
  height:54px !important;
  border-radius:50% !important;
  background:rgba(12,18,34,.52) !important;
  border:1px solid rgba(255,255,255,.10) !important;
  box-shadow:
    0 10px 24px rgba(0,0,0,.24),
    inset 0 1px 0 rgba(255,255,255,.05) !important;
}

.fab i,.fab svg,
.fab-btn i,.fab-btn svg,
.side-fab button i,.side-fab button svg,
.map-actions button i,.map-actions button svg,
button[id*="fab"] i,button[id*="fab"] svg,
button[id*="profile"] i,button[id*="profile"] svg,
button[id*="filter"] i,button[id*="filter"] svg{
  width:23px !important;
  height:23px !important;
  font-size:23px !important;
  filter:
    drop-shadow(0 2px 8px rgba(0,0,0,.25))
    drop-shadow(0 0 8px rgba(255,255,255,.08));
}

#navMood.active {
  background: #ff0000 !important;
}

/* ===== USER MARKER LIVE PRESENCE EFFECT ===== */
@keyframes userMarkerLivePulse {
  0%, 100% { transform: scale(1); opacity: 0.4; }
  50% { transform: scale(1.25); opacity: 0.75; }
}

/* Target the user marker container (me) */
.user-marker, .energy-marker.me, .map-avatar.me {
  position: relative !important;
  z-index: 10 !important;
}

/* The soft circular glow and pulse effect */
.user-marker::after, .energy-marker.me::after, .map-avatar.me::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  inset: -15px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(255, 70, 140, 0.25) 0%, rgba(255, 70, 140, 0.08) 45%, transparent 70%) !important;
  z-index: -1 !important;
  animation: userMarkerLivePulse 4s ease-in-out infinite !important;
  pointer-events: none !important;
  visibility: visible !important;
  opacity: 1 !important;
}

/* Ensure the marker itself stays crisp */
.user-marker img, .avatar-marker.me img, .energy-marker.me img, .map-avatar.me img {
  position: relative !important;
  z-index: 2 !important;
}

.bottom-nav {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  max-width: none !important;
  width: auto !important;
}

/* USER REQUESTED MOOD SHEET FIX */
#moodSheet {
  bottom: 96px !important;
  top: auto !important;
  padding: 10px !important;
}
#moodSheet .mood-option {
  min-height: 46px !important;
  margin-bottom: 6px !important;
}
#moodSheet .mood-sheet-title {
  margin: 0 0 8px !important;
  font-size: 15px !important;
}
#moodSheet .mood-option:last-child {
  margin-bottom: 0 !important;
}

/* USER REQUESTED BOTTOM NAV STYLES */
.bottom-nav{
  left:50%!important;
  transform:translateX(-50%)!important;
  width:90%!important;
  max-width:420px!important;
  padding:10px 12px!important;
  border-radius:26px!important;
}

.bottom-nav-btn{
  flex:1!important;
  display:flex!important;
  flex-direction:column!important;
  align-items:center!important;
  justify-content:center!important;
  gap:4px!important;
  font-size:13px!important;
}

.bottom-nav-btn img,
.bottom-nav-btn svg{
  width:22px!important;
  height:22px!important;
}

.bottom-nav-btn span{
  white-space:nowrap!important;
  font-size:13px!important;
}

.bottom-nav-btn.active{
  background:linear-gradient(135deg,#ff2d55,#a855f7)!important;
  color:#fff!important;
  border-radius:18px!important;
  padding:8px 10px!important;
}

#statusText {
  font-weight: bold;
  color: #4cd964;
  margin-left: 4px;
  text-transform: lowercase;
}