/**
 * Styles futuristes unifiés pour les labels des barres de menu
 * Design bleuté avec animations d'éruption futuriste
 */


/* Variable CSS configurable pour la position de la sidebar */

:root {
    --fut-sidebar-top-offset: 60px;
}


/* Positionnement de la sidebar */

#fut-sidebar {
    position: fixed;
    left: 0;
    top: var(--fut-sidebar-top-offset, 60px);
    display: flex;
    flex-direction: column;
    z-index: 9998;
}

.fut-sidebar-label {
    position: fixed;
    z-index: 9999;
    padding: 8px 14px;
    font-size: 13px;
    font-weight: 600;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: translateX(-20px);
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    /* Design futuriste bleuté */
    background: linear-gradient(135deg, rgba(30, 144, 255, 0.95) 0%, rgba(0, 191, 255, 0.95) 100%);
    color: #ffffff;
    border: 1px solid rgba(0, 255, 255, 0.5);
    border-radius: 6px;
    backdrop-filter: blur(8px);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.3) inset, 0 0 20px rgba(30, 144, 255, 0.4), 0 0 40px rgba(0, 191, 255, 0.2);
    /* Animation d'éruption futuriste */
    animation: none;
}


/* État actif avec animation d'éruption */

.fut-sidebar-label.show {
    opacity: 1;
    transform: translateX(0);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.6) inset, 0 0 25px rgba(30, 144, 255, 0.6), 0 0 50px rgba(0, 191, 255, 0.3), 0 0 75px rgba(30, 144, 255, 0.15);
    animation: eruptionSidebar 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* Animation d'éruption pour sidebar */

@keyframes eruptionSidebar {
    0% {
        opacity: 0;
        transform: translateX(-40px) scale(0.8);
        filter: blur(3px);
    }
    50% {
        opacity: 1;
    }
    100% {
        opacity: 1;
        transform: translateX(0) scale(1);
        filter: blur(0);
    }
}


/* ============================================
   LABELS BOTTOMBAR (au-dessus)
   ============================================ */

.fut-bottom-label {
    position: fixed;
    z-index: 9999;
    padding: 10px 16px;
    font-size: 13px;
    font-weight: 700;
    white-space: nowrap;
    pointer-events: none;
    user-select: none;
    opacity: 0;
    transform: translateX(-50%);
    will-change: opacity, transform;
    contain: strict;
    transition: opacity 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), transform 0.3s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.3s ease;
    /* Design futuriste bleuté amélioré */
    background: linear-gradient(135deg, rgba(20, 110, 255, 0.98) 0%, rgba(0, 180, 255, 0.98) 50%, rgba(30, 140, 255, 0.98) 100%);
    color: #e8f5ff;
    border: 1.5px solid rgba(0, 255, 255, 0.7);
    border-radius: 8px;
    backdrop-filter: blur(12px);
    box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.4) inset, 0 0 15px rgba(30, 144, 255, 0.5), 0 0 35px rgba(0, 191, 255, 0.3), 0 0 55px rgba(30, 144, 255, 0.15);
    text-shadow: 0 0 10px rgba(0, 255, 255, 0.4);
    /* Animation d'éruption futuriste */
    animation: none;
}


/* État actif avec animation d'éruption */

.fut-bottom-label.show {
    opacity: 1;
    transform: translateX(-50%);
    box-shadow: 0 0 0 2px rgba(0, 255, 255, 0.8) inset, 0 0 20px rgba(30, 144, 255, 0.7), 0 0 40px rgba(0, 191, 255, 0.5), 0 0 60px rgba(30, 144, 255, 0.3), 0 0 80px rgba(0, 191, 255, 0.2);
    animation: eruptionBottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}


/* Animation d'éruption pour barre inférieure */

@keyframes eruptionBottom {
    0% {
        opacity: 0;
        transform: translateX(-50%) scale(0.75);
        filter: blur(4px);
    }
    50% {
        opacity: 0.9;
    }
    100% {
        opacity: 1;
        transform: translateX(-50%) scale(1);
        filter: blur(0);
    }
}


/* ============================================
   EFFETS LUMINEUX SUPPLÉMENTAIRES
   ============================================ */


/* Micro-pulse effect en continu quand visible */

@keyframes microPulse {
    0%,
    100% {
        box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.6) inset, 0 0 25px rgba(30, 144, 255, 0.6), 0 0 50px rgba(0, 191, 255, 0.3), 0 0 75px rgba(30, 144, 255, 0.15);
    }
    50% {
        box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.8) inset, 0 0 30px rgba(30, 144, 255, 0.7), 0 0 60px rgba(0, 191, 255, 0.4), 0 0 90px rgba(30, 144, 255, 0.2);
    }
}

.fut-sidebar-label.show,
.fut-bottom-label.show {
    animation: eruptionSidebar 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, microPulse 2s ease-in-out infinite 0.3s;
}

.fut-bottom-label.show {
    animation: eruptionBottom 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards, microPulse 2s ease-in-out infinite 0.3s;
}


/* ============================================
   RESPONSIVE - Ajustements pour petits écrans
   ============================================ */

@media (max-width: 768px) {
    .fut-sidebar-label,
    .fut-bottom-label {
        font-size: 11px;
        padding: 6px 10px;
    }
    .fut-sidebar-label.show {
        box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.5) inset, 0 0 15px rgba(30, 144, 255, 0.5), 0 0 30px rgba(0, 191, 255, 0.2);
    }
    .fut-bottom-label.show {
        box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.5) inset, 0 0 15px rgba(30, 144, 255, 0.5), 0 0 30px rgba(0, 191, 255, 0.2);
    }
}


/* ============================================
   PROTECTION DE LA STABILITÉ - Barre inférieure
   ============================================ */


/* Assurer que la barre inférieure ne change pas de hauteur */

#fut-bottombar,
#fut-bottombar .fut-bottom-list,
#fut-bottombar .fut-bottom-item {
    min-height: auto;
    height: auto;
}

#fut-bottombar {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    /* Fixer la barre en bas et permettre un décalage configurable */
    position: fixed;
    left: 50%;
    transform: translateX(-50%);
    bottom: var(--fut-bottombar-bottom-offset, 20px);
    z-index: 9998;
    width: auto;
}


/* Empêcher tout overflow ou redimensionnement au survol */

#fut-bottombar:hover {
    height: auto;
    min-height: auto;
}

.fut-bottom-item:hover {
    height: auto;
    min-height: auto;
}


/* Le label est en position fixed, ne doit pas affecter le flux */

.fut-bottom-label {
    position: fixed;
}

#fut-bottombar>.fut-bottom-label {
    position: fixed;
}

/* =========================================================
   DESKTOP PC BAR COMPACTNESS - scoped to mouse/keyboard layouts
   Keeps mobile and mobile desktop-mode dimensions untouched.
   ========================================================= */
@media (hover:hover) and (pointer:fine) and (min-width:881px){
  html:not(.unipay-mobile){
    --fut-sidebar-width:64px;
    --fut-bottom-height:58px;
    --fut-bottombar-bottom-offset:12px;
  }

  html:not(.unipay-mobile) #fut-sidebar{
    left:12px!important;
    top:calc(var(--fut-menu-height, 72px) + 10px)!important;
    bottom:calc(var(--fut-bottom-height, 58px) + 18px)!important;
    width:var(--fut-sidebar-width, 64px)!important;
    max-width:var(--fut-sidebar-width, 64px)!important;
    height:auto!important;
    padding:8px 6px!important;
    gap:6px!important;
    overflow-y:auto!important;
    overflow-x:visible!important;
    scrollbar-width:thin;
  }

  html:not(.unipay-mobile) #fut-sidebar .fut-sidebar-list{
    gap:6px!important;
    width:100%!important;
    align-items:center!important;
  }

  html:not(.unipay-mobile) #fut-sidebar .fut-item{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    flex:0 0 44px!important;
  }

  html:not(.unipay-mobile) #fut-sidebar .fut-icon{
    width:22px!important;
    height:22px!important;
  }

  html:not(.unipay-mobile) #fut-bottombar{
    bottom:var(--fut-bottombar-bottom-offset, 12px)!important;
    min-height:0!important;
    height:auto!important;
    padding:6px 10px!important;
    border-radius:22px!important;
  }

  html:not(.unipay-mobile) #fut-bottombar .fut-bottom-list{
    gap:4px!important;
    max-width:min(92vw, 980px)!important;
  }

  html:not(.unipay-mobile) #fut-bottombar .fut-bottom-item,
  html:not(.unipay-mobile) #fut-bottombar .fut-bottombar-item{
    width:48px!important;
    height:48px!important;
    min-width:48px!important;
    min-height:48px!important;
    flex:0 0 48px!important;
    padding:6px 9px!important;
  }

  html:not(.unipay-mobile) #fut-bottombar .fut-bottom-item svg,
  html:not(.unipay-mobile) #fut-bottombar .fut-bottom-item .fut-icon,
  html:not(.unipay-mobile) #fut-bottombar .fut-bottombar-item svg,
  html:not(.unipay-mobile) #fut-bottombar .fut-bottombar-item .fut-icon{
    width:24px!important;
    height:24px!important;
    min-width:24px!important;
    min-height:24px!important;
  }
}


/* ============================================
   SURBRILLANCE : Renforcement de la "flamme" futuriste
   - Ajoute un pseudo-élément radial animé pour un glow plus prononcé
   - N'altère pas la dynamique JS existante (positionnement reste controlé par JS)
   ============================================ */

.fut-sidebar-label.show::after,
.fut-bottom-label.show::after {
    content: '';
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 160%;
    height: 160%;
    pointer-events: none;
    z-index: -1;
    border-radius: 50%;
    background-image: radial-gradient(circle at 50% 20%, rgba(120, 200, 255, 0.42) 0%, rgba(30, 140, 255, 0.12) 30%, rgba(0, 80, 160, 0.05) 60%, transparent 80%);
    filter: blur(12px) saturate(110%);
    opacity: 0.65;
    mix-blend-mode: screen;
    animation: flamePulse 1.8s ease-in-out infinite;
}


/* Pulse additionnel sur l'ombre pour renforcer l'effet */

@keyframes flamePulse {
    0% {
        transform: translate(-50%, -50%) scale(0.96);
        opacity: 0.45;
        filter: blur(12px) saturate(95%);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.02);
        opacity: 0.8;
        filter: blur(8px) saturate(120%);
    }
    100% {
        transform: translate(-50%, -50%) scale(0.97);
        opacity: 0.48;
        filter: blur(12px) saturate(95%);
    }
}


/* Renforcer légèrement le microPulse box-shadow existant pour plus d'intensité */

.fut-sidebar-label.show,
.fut-bottom-label.show {
    box-shadow: 0 0 0 1.5px rgba(0, 255, 255, 0.6) inset, 0 0 28px rgba(30, 144, 255, 0.72), 0 0 56px rgba(0, 191, 255, 0.35), 0 0 90px rgba(30, 144, 255, 0.18);
}


/* Variante plus discrète sur mobile */

@media (max-width: 768px) {
    .fut-sidebar-label.show::after,
    .fut-bottom-label.show::after {
        width: 220%;
        height: 120%;
        filter: blur(14px) saturate(110%);
        animation-duration: 2s;
    }
    .fut-sidebar-label.show,
    .fut-bottom-label.show {
        box-shadow: 0 0 0 1px rgba(0, 255, 255, 0.5) inset, 0 0 20px rgba(30, 144, 255, 0.6), 0 0 40px rgba(0, 191, 255, 0.35);
    }
}

/* ============================================
   SIDEBAR WIDTH VARIABLE + APPLICATION
   Permet d'ajuster facilement l'épaisseur (largeur) de la barre latérale
   ============================================ */

:root {
    --fut-sidebar-width: 92px; /* valeur par défaut — modifiez ici pour élargir/retrecir */
}

#fut-sidebar {
    width: var(--fut-sidebar-width, 80px);
    box-sizing: border-box;
    padding-top: 6px;
    padding-bottom: 6px;
}

/* Valeur réduite sur très petits écrans */
@media (max-width: 480px) {
    :root { --fut-sidebar-width: 64px; }
    #fut-sidebar { width: var(--fut-sidebar-width); }
}

/* Variable par défaut pour le décalage vertical des labels de la bottombar
   (valeur en pixels, distance entre le curseur et le label) */
:root {
    --fut-bottombar-label-vertical-offset: 220px;
}


/* === CONVERSATION HEADER STRUCTURE (INJECTED – DO NOT REMOVE) === */
.conversation-header-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}

.conversation-header-center {
  display: flex;
  justify-content: center;
}

.conversation-count {
  padding: 4px 12px;
  border-radius: 14px;
  background: rgba(0, 180, 255, 0.18);
  color: #00eaff;
  font-size: 13px;
  font-weight: 600;
  white-space: nowrap;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.35);
}

.conversation-header {
  overflow: visible;
  z-index: 2;
}


/* === SIDEBAR PANELS CORE (PHASE 2) === */
.sidebar-panel {
  position: fixed;
  top: 0;
  left: 72px;
  width: calc(100% - 72px);
  height: 100vh;
  z-index: 200;
}
.sidebar-panel-active { display: block !important; }


/* =========================================================
   BOTTOM BAR LABEL — FOLLOW MOUSE ABOVE BAR
========================================================= */

#fut-bottombar{
  overflow: visible !important;
  z-index: 99990 !important;
}

#fut-bottom-label,
.fut-bottom-label{
  position: fixed !important;
  left: var(--bottom-label-x, 50%) !important;
  bottom: calc(var(--fut-bottom-height, 72px) + 18px) !important;
  transform: translateX(-50%) translateY(0) !important;

  display: block !important;
  opacity: 0 !important;
  visibility: hidden !important;
  pointer-events: none !important;

  z-index: 999999 !important;

  padding: 8px 14px !important;
  border-radius: 14px !important;
  white-space: nowrap !important;

  color: #eaffff !important;
  background: rgba(2, 8, 24, 0.88) !important;
  border: 1px solid rgba(0, 240, 255, 0.45) !important;
  box-shadow: 0 0 18px rgba(0, 240, 255, 0.45) !important;
  backdrop-filter: blur(8px) !important;

  transition:
    opacity .12s ease,
    visibility .12s ease,
    transform .12s ease !important;
}

#fut-bottom-label.is-visible,
.fut-bottom-label.is-visible{
  opacity: 1 !important;
  visibility: visible !important;
  transform: translateX(-50%) translateY(-4px) !important;
}

/* Final desktop-PC compact bars. This also covers narrow portrait browser windows. */
html.unipay-physical-desktop.unipay-interface-desktop{
  --fut-sidebar-width:64px!important;
  --fut-bottom-height:58px!important;
  --fut-bottombar-bottom-offset:12px!important;
}

html.unipay-physical-desktop.unipay-interface-desktop #fut-sidebar{
  left:12px!important;
  top:calc(var(--fut-menu-height, 72px) + 10px)!important;
  bottom:calc(var(--fut-bottom-height, 58px) + 18px)!important;
  width:var(--fut-sidebar-width, 64px)!important;
  max-width:var(--fut-sidebar-width, 64px)!important;
  min-width:var(--fut-sidebar-width, 64px)!important;
  height:auto!important;
  padding:8px 6px!important;
  box-sizing:border-box!important;
  overflow-y:auto!important;
  overflow-x:visible!important;
  scrollbar-width:thin;
}

html.unipay-physical-desktop.unipay-interface-desktop #fut-sidebar .fut-sidebar-list{
  gap:5px!important;
  width:100%!important;
  padding:4px 0!important;
}

html.unipay-physical-desktop.unipay-interface-desktop #fut-sidebar .fut-item{
  width:42px!important;
  height:42px!important;
  min-width:42px!important;
  min-height:42px!important;
  flex:0 0 42px!important;
  box-sizing:border-box!important;
}

html.unipay-physical-desktop.unipay-interface-desktop #fut-sidebar .fut-icon{
  width:21px!important;
  height:21px!important;
}

html.unipay-physical-desktop.unipay-interface-desktop #fut-bottombar{
  bottom:var(--fut-bottombar-bottom-offset, 12px)!important;
  min-height:0!important;
  height:auto!important;
  padding:5px 8px!important;
  border-radius:22px!important;
}

html.unipay-physical-desktop.unipay-interface-desktop #fut-bottombar .fut-bottom-list{
  gap:4px!important;
  max-width:min(92vw, 980px)!important;
  padding:0!important;
}

html.unipay-physical-desktop.unipay-interface-desktop #fut-bottombar .fut-bottom-item,
html.unipay-physical-desktop.unipay-interface-desktop #fut-bottombar .fut-bottombar-item{
  width:44px!important;
  height:44px!important;
  min-width:44px!important;
  min-height:44px!important;
  flex:0 0 44px!important;
  padding:5px 8px!important;
  box-sizing:border-box!important;
}

html.unipay-physical-desktop.unipay-interface-desktop #fut-bottombar .fut-bottom-item svg,
html.unipay-physical-desktop.unipay-interface-desktop #fut-bottombar .fut-bottom-item .fut-icon,
html.unipay-physical-desktop.unipay-interface-desktop #fut-bottombar .fut-bottombar-item svg,
html.unipay-physical-desktop.unipay-interface-desktop #fut-bottombar .fut-bottombar-item .fut-icon{
  width:22px!important;
  height:22px!important;
  min-width:22px!important;
  min-height:22px!important;
}

/* =========================================================
   GLOBAL TOP MENU - FUTURISTIC CAPSULE
   Visual-only layer shared by every page that uses nav.menu.
========================================================= */
:root{
  --unipay-top-menu-bg:rgba(3, 14, 31, .70);
  --unipay-top-menu-border:rgba(0, 238, 255, .34);
  --unipay-top-menu-edge:rgba(120, 255, 230, .55);
  --unipay-top-menu-accent:rgba(255, 0, 128, .42);
}

header > nav.menu,
nav.menu{
  box-sizing:border-box!important;
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  flex-wrap:nowrap!important;
  gap:clamp(4px, .9vw, 10px)!important;
  width:max-content!important;
  max-width:calc(100vw - var(--fut-sidebar-width, 64px) - 24px)!important;
  min-height:44px!important;
  padding:5px 7px!important;
  overflow-x:auto!important;
  overflow-y:hidden!important;
  white-space:nowrap!important;
  border-radius:999px!important;
  border:1px solid var(--unipay-top-menu-border)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.11), rgba(255,255,255,.025) 38%, rgba(0,0,0,.16)),
    linear-gradient(90deg, rgba(0,238,255,.10), var(--unipay-top-menu-bg) 24%, rgba(3,14,31,.80) 76%, rgba(255,0,128,.08))!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.055) inset,
    0 0 18px rgba(0,238,255,.20),
    0 12px 34px rgba(0,0,0,.36)!important;
  backdrop-filter:blur(16px) saturate(135%)!important;
  -webkit-backdrop-filter:blur(16px) saturate(135%)!important;
  isolation:isolate!important;
  scrollbar-width:none!important;
  -ms-overflow-style:none!important;
}

header > nav.menu::-webkit-scrollbar,
nav.menu::-webkit-scrollbar{
  display:none!important;
  width:0!important;
  height:0!important;
}

header > nav.menu::before,
nav.menu::before{
  content:""!important;
  position:absolute!important;
  inset:2px 14px auto 14px!important;
  height:1px!important;
  border-radius:999px!important;
  pointer-events:none!important;
  background:linear-gradient(90deg, transparent, rgba(143,255,244,.72), rgba(0,238,255,.38), transparent)!important;
  opacity:.82!important;
}

header > nav.menu::after,
nav.menu::after{
  content:""!important;
  position:absolute!important;
  inset:-1px!important;
  border-radius:inherit!important;
  pointer-events:none!important;
  box-shadow:
    10px 0 18px -16px var(--unipay-top-menu-edge) inset,
    -10px 0 18px -16px var(--unipay-top-menu-accent) inset,
    0 -8px 18px -18px rgba(255,255,255,.78) inset!important;
  opacity:.98!important;
}

header > nav.menu a,
nav.menu a{
  position:relative!important;
  z-index:1!important;
  box-sizing:border-box!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  min-height:32px!important;
  height:32px!important;
  padding:0 clamp(10px, 1.75vw, 18px)!important;
  border-radius:999px!important;
  border:1px solid transparent!important;
  color:rgba(238, 252, 255, .94)!important;
  background:linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.015))!important;
  text-decoration:none!important;
  font-size:clamp(11px, 1.72vw, 14px)!important;
  font-weight:850!important;
  line-height:1!important;
  letter-spacing:0!important;
  text-shadow:0 0 12px rgba(0,238,255,.20), 0 2px 9px rgba(0,0,0,.60)!important;
  box-shadow:none!important;
  transform:none!important;
  transition:
    color .16s ease,
    border-color .16s ease,
    background .16s ease,
    box-shadow .16s ease!important;
}

header > nav.menu a:hover,
nav.menu a:hover,
header > nav.menu a:focus-visible,
nav.menu a:focus-visible{
  color:#ffffff!important;
  border-color:rgba(143,255,244,.46)!important;
  background:
    linear-gradient(180deg, rgba(135,255,240,.16), rgba(0,238,255,.06)),
    linear-gradient(90deg, rgba(0,238,255,.14), rgba(255,0,128,.08))!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.08) inset,
    0 0 18px rgba(0,238,255,.26)!important;
  transform:none!important;
  outline:none!important;
}

header > nav.menu a.active,
nav.menu a.active,
header > nav.menu a[aria-current="page"],
nav.menu a[aria-current="page"]{
  color:#04121f!important;
  border-color:rgba(175,255,247,.78)!important;
  background:
    linear-gradient(180deg, rgba(255,255,255,.92), rgba(164,255,245,.72) 42%, rgba(0,223,255,.68))!important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.50) inset,
    0 0 22px rgba(0,238,255,.44),
    0 0 34px rgba(255,0,128,.14)!important;
  text-shadow:0 1px 8px rgba(255,255,255,.45)!important;
  transform:none!important;
  animation:unipayTopMenuActivePulse 2.6s ease-in-out infinite!important;
}

header > nav.menu a.active::after,
nav.menu a.active::after,
header > nav.menu a[aria-current="page"]::after,
nav.menu a[aria-current="page"]::after{
  content:""!important;
  position:absolute!important;
  left:16px!important;
  right:16px!important;
  bottom:4px!important;
  height:2px!important;
  border-radius:999px!important;
  pointer-events:none!important;
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.96), rgba(0,238,255,.70), transparent)!important;
  filter:none!important;
  mix-blend-mode:normal!important;
  opacity:.86!important;
  animation:none!important;
}

@keyframes unipayTopMenuActivePulse{
  0%,100%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.48) inset,
      0 0 18px rgba(0,238,255,.34),
      0 0 28px rgba(255,0,128,.10);
  }
  50%{
    box-shadow:
      0 0 0 1px rgba(255,255,255,.62) inset,
      0 0 28px rgba(0,238,255,.54),
      0 0 42px rgba(255,0,128,.18);
  }
}

body.unipay-mobile header > nav.menu,
body.unipay-mobile nav.menu,
html.unipay-interface-mobile header > nav.menu,
html.unipay-interface-mobile nav.menu{
  max-width:calc(100vw - var(--fut-sidebar-width, 56px) - 18px)!important;
  min-height:40px!important;
  padding:4px 5px!important;
  gap:4px!important;
}

body.unipay-mobile header > nav.menu a,
body.unipay-mobile nav.menu a,
html.unipay-interface-mobile header > nav.menu a,
html.unipay-interface-mobile nav.menu a{
  min-height:30px!important;
  height:30px!important;
  padding:0 clamp(8px, 2.35vw, 12px)!important;
  font-size:clamp(10.5px, 2.55vw, 12px)!important;
  flex:0 0 auto!important;
}

body.unipay-mobile.unipay-portrait header > nav.menu,
body.unipay-mobile.unipay-portrait nav.menu,
html.unipay-interface-mobile.unipay-portrait header > nav.menu,
html.unipay-interface-mobile.unipay-portrait nav.menu,
html.unipay-phone-portrait header > nav.menu,
html.unipay-phone-portrait nav.menu{
  top:calc(var(--unipay-safe-top, 0px) + 62px)!important;
  left:calc(var(--fut-sidebar-width, 56px) + 8px)!important;
  right:8px!important;
  width:auto!important;
  max-width:calc(100vw - var(--fut-sidebar-width, 56px) - 16px)!important;
}

body.unipay-mobile.unipay-portrait header > nav.menu a,
body.unipay-mobile.unipay-portrait nav.menu a,
html.unipay-interface-mobile.unipay-portrait header > nav.menu a,
html.unipay-interface-mobile.unipay-portrait nav.menu a,
html.unipay-phone-portrait header > nav.menu a,
html.unipay-phone-portrait nav.menu a{
  height:28px!important;
  min-height:28px!important;
  padding:0 clamp(7px, 2vw, 11px)!important;
  font-size:clamp(10px, 2.35vw, 11.5px)!important;
}