.site-menu-panel {
  isolation: isolate;
  width: min(24rem, 92vw);
  padding: 0 .75rem 1.25rem;
  border-right-color: rgba(228, 231, 239, .13);
  background: rgba(4, 4, 10, .96);
  box-shadow: 1.5rem 0 4.5rem rgba(0, 0, 0, .48);
  backdrop-filter: blur(24px) saturate(1.08);
  -webkit-backdrop-filter: blur(24px) saturate(1.08);
}

.site-menu-panel > :not(.site-menu-glow) {
  position: relative;
  z-index: 1;
}

.site-menu-glow {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  background: radial-gradient(circle 9.5rem at var(--menu-glow-x, 2rem) var(--menu-glow-y, 2rem), rgba(230, 168, 196, .2), rgba(228, 231, 239, .07) 42%, transparent 72%);
  mix-blend-mode: screen;
  transition: opacity .32s ease;
}

.site-menu-glow.is-visible { opacity: 1; }
.site-menu-glow.is-captured {
  background: radial-gradient(circle 8rem at var(--menu-glow-x, 2rem) var(--menu-glow-y, 2rem), rgba(230, 168, 196, .3), rgba(228, 231, 239, .11) 40%, transparent 72%);
}

/* Los controles largos absorben la luz en toda su superficie, sin un foco circular. */
.site-menu-glow.is-surface { opacity: 0; }

.site-menu-head {
  min-height: 5.2rem;
  margin: 0 .15rem;
  padding: .9rem .65rem;
  border-bottom: 1px solid rgba(228, 231, 239, .09);
}

.site-menu-brand {
  position: relative;
  gap: .8rem;
  cursor: pointer;
  outline: none;
}

.site-menu-brand,
.site-menu-close,
.site-menu-item,
.site-menu-language-choice {
  transform: translate(var(--menu-magnet-x, 0), var(--menu-magnet-y, 0));
  transition: color .3s ease, background .3s ease, border-color .3s ease, box-shadow .3s ease, filter .3s ease, transform .35s cubic-bezier(.19, 1, .22, 1);
}

.site-menu-brand::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 50%;
  z-index: 0;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230, 168, 196, .3) 0%, rgba(230, 168, 196, .12) 38%, transparent 72%);
  filter: blur(.55rem);
  opacity: .58;
  pointer-events: none;
  transform: translate(-50%, -50%) scale(.9);
  animation: site-menu-mark-glow 4.8s ease-in-out infinite;
}

@keyframes site-menu-mark-glow {
  0%, 100% { opacity: .42; transform: translate(-50%, -50%) scale(.86); }
  50% { opacity: .72; transform: translate(-50%, -50%) scale(1.04); }
}

.site-menu-mark {
  position: relative;
  z-index: 1;
  width: 2rem;
  height: 2rem;
  border: 0;
  color: #e4e7ef;
  background: transparent;
  filter: drop-shadow(0 0 .55rem rgba(228, 231, 239, .2));
  transition: color .35s ease, filter .35s ease, transform .35s cubic-bezier(.19, 1, .22, 1);
}

.site-menu-word {
  position: relative;
  z-index: 1;
}

@media (hover: hover) {
  .site-menu-brand:hover::before,
  .site-menu-brand.is-menu-magnet::before {
    animation: none;
    opacity: .88;
    transform: translate(-50%, -50%) scale(1.08);
  }
  .site-menu-brand:hover .site-menu-mark,
  .site-menu-brand.is-menu-magnet .site-menu-mark {
    color: #fff;
    filter: drop-shadow(0 0 .75rem rgba(230, 168, 196, .42));
    transform: scale(1.04);
  }
}

.site-menu-brand:focus-visible::before {
  animation: none;
  opacity: .88;
  transform: translate(-50%, -50%) scale(1.08);
}
.site-menu-brand:focus-visible .site-menu-mark {
  color: #fff;
  filter: drop-shadow(0 0 .75rem rgba(230, 168, 196, .42));
  transform: scale(1.04);
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-brand::before { animation: none; opacity: .52; }
  .site-menu-brand:hover .site-menu-mark,
  .site-menu-brand.is-menu-magnet .site-menu-mark,
  .site-menu-brand:focus-visible .site-menu-mark { transform: none; }
}

.site-menu-mark svg {
  display: block;
  width: 1.7rem;
  height: 1.7rem;
}

.site-menu-word {
  font-size: .78rem;
  letter-spacing: .26em;
}

.site-menu-close {
  width: 2.25rem;
  height: 2.25rem;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: rgba(228, 231, 239, .58);
  box-shadow: none;
  font-family: Arial, sans-serif;
  font-size: 1.55rem;
  font-weight: 300;
}

.site-menu-close:hover,
.site-menu-close:focus-visible,
.site-menu-close.is-menu-magnet {
  border: 0;
  background: rgba(228, 231, 239, .07);
  color: #fff;
  box-shadow: 0 0 1.3rem rgba(230, 168, 196, .18);
  outline: none;
}

.site-menu-list {
  gap: .2rem;
  padding: 1rem 0 0;
}

.site-menu-section-label {
  padding: .55rem .9rem .35rem;
  color: rgba(228, 231, 239, .32);
  font-family: "Cinzel", serif;
  font-size: .56rem;
  font-weight: 600;
  letter-spacing: .24em;
  text-transform: uppercase;
}

.site-menu-item {
  min-height: 2.75rem;
  gap: .8rem;
  border-left-width: 2px;
  border-radius: .55rem;
  padding: 0 .75rem 0 .85rem;
  font-size: .76rem;
  letter-spacing: .035em;
}

.site-menu-main {
  display: flex;
  align-items: center;
  min-width: 0;
  gap: .7rem;
}

.site-menu-index {
  width: 1.35rem;
  flex: 0 0 1.35rem;
  color: rgba(228, 231, 239, .3);
  font-family: "Cinzel", serif;
  font-size: .55rem;
  letter-spacing: .12em;
}

.site-menu-item:hover,
.site-menu-item.active,
.site-menu-item.is-menu-magnet {
  border-left-color: rgba(230, 168, 196, .88);
  background: rgba(228, 231, 239, .065);
}

.site-menu-item.is-menu-magnet {
  color: #fff;
  background: rgba(230, 168, 196, .09);
  box-shadow:
    inset 0 0 0 1px rgba(230, 168, 196, .1),
    inset 0 0 1.4rem rgba(230, 168, 196, .055),
    0 0 1.35rem rgba(230, 168, 196, .07);
}

.site-menu-item.active { box-shadow: inset 0 1px rgba(255, 255, 255, .025); }
.site-menu-item.active .site-menu-index { color: rgba(230, 168, 196, .82); }

.site-menu-state {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  color: rgba(228, 231, 239, .32);
  font-size: .72rem;
}

.site-menu-state::before {
  content: "";
  width: .28rem;
  height: .28rem;
  flex: 0 0 .28rem;
  border-radius: 50%;
  background: rgba(228, 231, 239, .2);
}

.site-menu-item.active .site-menu-state { color: rgba(228, 231, 239, .62); }
.site-menu-item.active .site-menu-state::before { background: #e6a8c4; box-shadow: 0 0 .6rem rgba(230, 168, 196, .55); }

.site-menu-rule {
  height: 1px;
  margin: .85rem .75rem;
  background: rgba(228, 231, 239, .09);
}

.site-menu-language {
  margin-top: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: .9rem .85rem .1rem;
  border-top-color: rgba(228, 231, 239, .09);
}

.site-menu-language-label {
  margin: 0;
  font-size: .56rem;
  letter-spacing: .24em;
}

.site-menu-language-compact {
  display: inline-flex;
  align-items: center;
  gap: .42rem;
}

.site-menu-language-choice {
  position: relative;
  width: auto;
  min-height: 1.8rem;
  padding: 0 .15rem;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  color: rgba(228, 231, 239, .38);
  font-family: "Cinzel", serif;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .12em;
  cursor: pointer;
}

.site-menu-language-choice::after {
  content: "";
  position: absolute;
  right: .15rem;
  bottom: .15rem;
  left: .15rem;
  height: 1px;
  background: #e6a8c4;
  opacity: 0;
  transform: scaleX(.4);
  transition: opacity .2s ease, transform .25s cubic-bezier(.16,1,.3,1);
}

.site-menu-language-choice[aria-selected="true"],
.site-menu-language-choice.active {
  color: rgba(228, 231, 239, .9);
  background: transparent;
  box-shadow: none;
}

.site-menu-language-choice[aria-selected="true"]::after,
.site-menu-language-choice.active::after { opacity: 1; transform: scaleX(1); }
.site-menu-language-choice:hover,
.site-menu-language-choice.is-menu-magnet {
  color: #fff;
  background: transparent;
  text-shadow: 0 0 .8rem rgba(230, 168, 196, .5);
}

.site-menu-language-separator {
  color: rgba(228, 231, 239, .16);
  font-size: .72rem;
}

@media (max-width: 520px) {
  .site-menu-panel { width: min(23rem, 94vw); }
  .site-menu-head { min-height: 4.75rem; }
}

@media (prefers-reduced-motion: reduce) {
  .site-menu-brand,
  .site-menu-close,
  .site-menu-item,
  .site-menu-language-choice { transform: none !important; }
}

/* Barra superior invisible: los controles flotan sin una placa de fondo. */
@keyframes tbin {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: none; }
}

.leftbar,
.topbar {
  --header-control-size: 40px;
  --header-icon-size: 24px;
  will-change: transform, opacity;
  transition:
    transform .5s cubic-bezier(.16, 1, .3, 1),
    opacity .32s ease;
}

.leftbar {
  position: fixed;
  top: calc(2.6vh + env(safe-area-inset-top));
  left: calc(20px + env(safe-area-inset-left));
  z-index: 32;
  display: flex;
  gap: 10px;
  opacity: 0;
  animation: tbin 1.1s .75s ease both;
  pointer-events: none;
}

.leftbar > * { pointer-events: auto; }

.leftbar,
.topbar,
.session-tools {
  align-items: center;
}

.site-menu-button,
.site-back-button,
.session-icon,
.user-chip {
  position: relative;
  isolation: isolate;
  overflow: visible;
  flex: 0 0 var(--header-control-size, 40px);
  width: var(--header-control-size, 40px);
  height: var(--header-control-size, 40px);
  min-width: var(--header-control-size, 40px);
  min-height: var(--header-control-size, 40px);
}

/* Los controles compactos encienden un halo local cuando capturan la energia. */
.site-menu-button::before,
.site-back-button::before,
.session-icon::before,
.user-chip::before {
  content: "";
  position: absolute;
  inset: -13px;
  z-index: 0;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(230,168,196,.42) 0%, rgba(230,168,196,.2) 31%, rgba(228,231,239,.09) 48%, transparent 72%);
  filter: blur(2px);
  opacity: 0;
  pointer-events: none;
  transform: scale(.58);
  transition: opacity .28s ease, transform .42s cubic-bezier(.19, 1, .22, 1);
}

.site-menu-button > *,
.site-back-button > *,
.session-icon > *,
.user-chip > * {
  position: relative;
  z-index: 1;
}

.site-menu-button.is-magnet::before,
.site-back-button.is-magnet::before,
.session-icon.is-magnet::before,
.user-chip.is-magnet::before {
  opacity: 1;
  transform: scale(1);
}

.site-menu-button {
  display: grid;
  place-items: center;
  padding: 0;
  border: 1px solid rgba(228, 231, 239, .26);
  border-radius: 10px;
  background: rgba(6, 5, 16, .34);
  box-shadow: none;
  color: rgba(228, 231, 239, .9);
}

.site-back-button {
  position: relative;
  display: grid;
  place-items: center;
  border: 1px solid rgba(228, 231, 239, .26);
  border-radius: 10px;
  background: rgba(6, 5, 16, .34);
  color: rgba(228, 231, 239, .9);
  cursor: pointer;
  transition: border-color .35s ease, box-shadow .35s ease, background .35s ease, color .35s ease, transform .35s cubic-bezier(.19, 1, .22, 1);
}

.site-back-button svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.site-menu-button span,
.site-menu-button span::before,
.site-menu-button span::after {
  width: 16px;
  height: 1px;
  border-radius: 0;
  background: currentColor;
}

.site-menu-button span {
  position: relative;
  display: block;
  opacity: 1;
  box-shadow: none;
}

.site-menu-button span::before,
.site-menu-button span::after {
  content: "";
  position: absolute;
  left: 0;
}

.site-menu-button span::before { top: -5px; }
.site-menu-button span::after { top: 5px; }

.leftbar .site-menu-button {
  position: relative;
  top: auto;
  left: auto;
  z-index: auto;
}

.session-tools {
  gap: 10px;
  padding: 0;
}

.session-icon {
  color: rgba(228, 231, 239, .9);
}

.session-icon svg {
  width: var(--header-icon-size, 24px);
  height: var(--header-icon-size, 24px);
  stroke-width: 1.75;
}

body.site-header-hidden .leftbar,
body.site-header-hidden .topbar {
  opacity: 0 !important;
  transform: translate3d(0, calc(-100% - 2rem), 0) !important;
  pointer-events: none;
}

/* Respuesta magnetica compartida por los accesos principales. */
.site-menu-button.is-magnet,
.site-back-button.is-magnet,
.tb-login.is-magnet {
  border-color: rgba(230,168,196,.78);
  background: rgba(6,5,16,.62);
  box-shadow: 0 14px 40px rgba(0,0,0,.3), 0 0 18px rgba(230,168,196,.34), 0 0 42px rgba(228,231,239,.12);
  color: #fff;
  transform: translate(var(--magnet-x, 0), var(--magnet-y, -1px));
}

.site-menu-button.is-magnet,
.site-back-button.is-magnet {
  box-shadow:
    0 0 0 1px rgba(230,168,196,.12),
    0 0 1.35rem rgba(230,168,196,.42),
    0 0 2.9rem rgba(230,168,196,.2),
    inset 0 0 1rem rgba(230,168,196,.08);
}

.site-menu-button.is-magnet span,
.site-back-button.is-magnet svg,
.session-icon.is-magnet svg,
.user-chip.is-magnet .user-chip-ring {
  color: #fff;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.42)) drop-shadow(0 0 10px rgba(230,168,196,.34));
}

/* Los llamados rectangulares reciben luz en toda la superficie. */
.tb-login::after {
  inset: 0;
  border-radius: inherit;
  background: linear-gradient(105deg, rgba(230,168,196,.08), rgba(230,168,196,.2) 48%, rgba(228,231,239,.08));
  transform: scale(.96);
  transition: opacity .3s ease, transform .36s cubic-bezier(.19, 1, .22, 1);
}

.tb-login.is-magnet::after,
.tb-login.is-aluen-surface-magnet::after {
  opacity: 1;
  transform: scale(1);
}

.tb-login.is-aluen-surface-magnet {
  border-color: rgba(230, 168, 196, .62);
  background: rgba(228, 231, 239, .055);
  box-shadow: 0 0 1.65rem rgba(230, 168, 196, .16), inset 0 0 1.15rem rgba(230, 168, 196, .055);
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
}

.session-icon.is-magnet {
  color: #fff;
  filter: drop-shadow(0 0 5px rgba(255,255,255,.32)) drop-shadow(0 0 12px rgba(230,168,196,.58));
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0));
}

.session-icon.is-magnet::before {
  opacity: 1;
  transform: scale(1.02);
}

/* El perfil comparte la geometria lineal de busqueda y guardados; la energia vive dentro del aro. */
.user-chip {
  position: relative;
  color: rgba(228,231,239,.9);
  filter: none;
  transform: none;
  transition: none;
}

.user-chip::before {
  inset: -13px;
}

body.has-session .user-chip {
  display: inline-grid;
  place-items: center;
}

.user-chip-ring {
  position: absolute;
  inset: 50% auto auto 50%;
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 1;
  transform: translate(-50%, -50%);
  transition: opacity .24s ease;
}

.user-chip .user-avatar,
.user-chip [data-auth-avatar] {
  position: relative;
  z-index: 1;
  width: 15px;
  height: 15px;
  border: 0 !important;
  box-shadow: inset -3px -4px 6px rgba(0,0,0,.68), inset 2px 2px 4px rgba(255,255,255,.14) !important;
}

.user-chip [data-auth-avatar][data-realm-energy]:not([data-realm-energy="unconfigured"]) {
  box-shadow: 0 0 5px color-mix(in srgb,var(--realm-color) 48%,transparent), inset -3px -4px 6px rgba(0,0,0,.62), inset 2px 2px 4px rgba(255,255,255,.16) !important;
}

.account-shell.open .user-chip,
.user-chip:hover,
.user-chip.is-magnet {
  filter: none;
  transform: translate(var(--magnet-x, 0), var(--magnet-y, 0)) !important;
}

.user-chip.is-magnet::before {
  opacity: 1;
  transform: scale(1.04);
}

.account-shell.open .user-chip .user-chip-ring,
.user-chip:hover .user-chip-ring,
.user-chip.is-magnet .user-chip-ring { opacity: 1; }

.user-chip:focus-visible {
  outline: none;
}

.user-chip:focus-visible .user-chip-ring {
  opacity: 1;
  filter: drop-shadow(0 0 3px rgba(230,168,196,.22));
}

@media (max-width:520px) {
  .leftbar,
  .topbar { --header-control-size: 38px; --header-icon-size: 23px; }
  .leftbar { left: calc(12px + env(safe-area-inset-left)); }
  .user-chip-ring { width:23px; height:23px; }
  .user-chip .user-avatar,
  .user-chip [data-auth-avatar] { width:14px; height:14px; }
}

@media (prefers-reduced-motion: reduce) {
  .leftbar,
  .topbar {
    will-change: auto;
    transition: none;
  }
}