/* ================================================================
   Liquid-glass top navigation — port из PayScrowing MainLayout.
   Фиолетовая палитра, light/dark, анимированная «линза» под активным.
   ================================================================ */

/* Wrapper */
.lg-nav-wrap {
    position: relative;
    display: flex;
    align-items: stretch;
    height: var(--nav-height, 40px);
    border-radius: var(--nav-border-radius, 14px);
    padding: 0 5px;
    flex-shrink: 0;
    overflow: visible;
}

/* Frosted-glass shell — фон под кнопками */
.lg-nb-shell {
    position: absolute;
    inset: 0;
    border-radius: 14px;
    pointer-events: none;
    z-index: 2;
    background: rgba(100, 80, 200, 0.07);
    border: 1px solid rgba(130, 110, 210, 0.38);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.75),
        inset 0 -1px 0 rgba(100,80,200,0.08),
        0 3px 14px rgba(90,70,160,0.13);
}
html.app-dark .lg-nb-shell {
    background: rgba(255,255,255,0.045);
    border-color: rgba(255,255,255,0.1);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.14),
        inset 0 -1px 0 rgba(255,255,255,0.04),
        0 2px 14px rgba(0,0,0,0.22);
}

/* Animated lens pill — liquid glass */
.lg-lens {
    position: absolute;
    top: 4px;
    left: 0;
    width: 0;
    height: calc(100% - 8px);
    border-radius: 10px;
    pointer-events: none;
    z-index: 1;
    opacity: 0;
    /* Длительность и easing задаются из JS (зависят от дистанции прыжка). */
    transition: opacity .15s;

    /* Жидкое стекло: диагональный градиент + сильный размытый бэкдроп. */
    background:
        linear-gradient(135deg,
            rgba(255,255,255,0.30) 0%,
            rgba(124,107,196,0.18) 45%,
            rgba(255,255,255,0.16) 100%);
    border: 1px solid rgba(255,255,255,0.55);
    backdrop-filter: blur(10px) saturate(180%) brightness(1.08);
    -webkit-backdrop-filter: blur(10px) saturate(180%) brightness(1.08);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.95),     /* верхний хайлайт */
        inset 0 -1px 0 rgba(124,107,196,0.32),       /* нижний тень-блик */
        0 4px 18px rgba(124,107,196,0.28),           /* падающая тень */
        0 0 0 1px rgba(124,107,196,0.18);            /* внешнее кольцо */
}

html.app-dark .lg-lens {
    background:
        linear-gradient(135deg,
            rgba(255,255,255,0.14) 0%,
            rgba(124,107,196,0.22) 45%,
            rgba(255,255,255,0.06) 100%);
    border-color: rgba(255,255,255,0.18);
    backdrop-filter: blur(10px) saturate(160%) brightness(1.05);
    -webkit-backdrop-filter: blur(10px) saturate(160%) brightness(1.05);
    box-shadow:
        inset 0 1.5px 0 rgba(255,255,255,0.28),
        inset 0 -1px 0 rgba(124,107,196,0.38),
        0 4px 18px rgba(124,107,196,0.25),
        0 0 0 1px rgba(124,107,196,0.28);
}

/* Items */
.lg-nav-item {
    position: relative;
    z-index: 3;
    display: inline-flex !important;
    align-items: center !important;
    gap: var(--nav-gap, 5px) !important;
    padding: 0 var(--nav-item-padding, 10px) !important;
    height: 100%;
    font-size: var(--nav-font-size, 12.5px) !important;
    font-weight: 500 !important;
    font-family: inherit !important;
    color: rgba(60,55,110,0.65) !important;
    text-decoration: none !important;
    white-space: nowrap;
    cursor: pointer;
    border: none !important;
    background: transparent !important;
    border-bottom: none !important;
    border-radius: 0 !important;
    transition: color .18s !important;
    flex-shrink: 0;
    line-height: 1;
}
.lg-nav-item:hover {
    color: rgba(50,46,120,0.92) !important;
    text-decoration: none !important;
    background: transparent !important;
}
.lg-nav-item.active {
    color: #2d2870 !important;
    font-weight: 600 !important;
    border-bottom: none !important;
    background: transparent !important;
}
.lg-nav-item i {
    font-size: var(--nav-icon-size, 13px);
    flex-shrink: 0;
}

html.app-dark .lg-nav-item        { color: rgba(139,148,158,0.6) !important; }
html.app-dark .lg-nav-item:hover  { color: rgba(201,209,217,0.9) !important; }
html.app-dark .lg-nav-item.active { color: #e2e8f0 !important; }

/* Logout item — muted red */
.lg-nav-exit        { color: rgba(180,70,70,0.5)  !important; }
.lg-nav-exit:hover  { color: rgba(210,60,60,0.9)  !important; }
.lg-nav-exit.active { color: rgba(180,70,70,0.5) !important; }
html.app-dark .lg-nav-exit        { color: rgba(252,165,165,0.45) !important; }
html.app-dark .lg-nav-exit:hover  { color: rgba(252,165,165,0.9)  !important; }

/* Vertical separator */
.lg-sep {
    position: relative;
    z-index: 3;
    flex-shrink: 0;
    width: 1px;
    margin: 10px 3px;
    background: rgba(140,120,200,0.2);
}
html.app-dark .lg-sep { background: rgba(255,255,255,0.1); }

/* На мобильном top-nav скрываем — там drawer */
@media (max-width: 1100px) {
    .lg-nav-wrap { display: none; }
}