/* ═══════════════════════════════════════════
   NAVIGATION — Product-grade
   ═══════════════════════════════════════════ */

/* ── Desktop Nav ── */
.ls-nav {
    position: fixed; top: 0; left: 0; right: 0;
    z-index: 1000;
    transition: background var(--ls-duration-base) var(--ls-ease), box-shadow var(--ls-duration-base) var(--ls-ease), backdrop-filter var(--ls-duration-base) var(--ls-ease);
}
.ls-nav--transparent { background: transparent; }
.ls-nav--solid { background: var(--ls-surface); border-bottom: 1px solid var(--ls-border); }
.ls-nav.scrolled {
    background: var(--ls-surface-overlay);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    box-shadow: var(--ls-shadow-sm);
    border-bottom: 1px solid var(--ls-border);
}

.ls-nav__logo { display: flex; align-items: center; flex-shrink: 0; z-index: 2; }
.ls-nav__logo img { height: 32px; width: auto; }
.ls-nav__wordmark {
    font-size: 1.25rem; font-weight: 800; letter-spacing: -.03em;
    color: var(--ls-text-primary);
}
.ls-nav--transparent .ls-nav__wordmark { color: #fff; }
.ls-nav.scrolled .ls-nav__wordmark { color: var(--ls-text-primary); }

.ls-nav__links { display: flex; align-items: center; gap: var(--ls-space-1); }
.ls-nav__link {
    padding: var(--ls-space-2) var(--ls-space-4);
    font-size: .875rem; font-weight: 500;
    color: var(--ls-text-secondary);
    border-radius: var(--ls-radius-sm);
    transition: color var(--ls-duration-fast), background var(--ls-duration-fast);
}
.ls-nav__link:hover { color: var(--ls-text-primary); background: var(--ls-canvas); }
.ls-nav--transparent .ls-nav__link { color: rgba(255,255,255,.7); }
.ls-nav--transparent .ls-nav__link:hover { color: #fff; background: rgba(255,255,255,.1); }
.ls-nav.scrolled .ls-nav__link { color: var(--ls-text-secondary); }
.ls-nav.scrolled .ls-nav__link:hover { color: var(--ls-text-primary); background: var(--ls-canvas); }

.ls-nav__actions { display: flex; align-items: center; gap: var(--ls-space-2); }
.ls-nav__icon {
    position: relative;
    width: 40px; height: 40px;
    display: inline-flex; align-items: center; justify-content: center;
    border-radius: var(--ls-radius-sm);
    color: var(--ls-text-secondary);
    transition: all var(--ls-duration-fast);
}
.ls-nav__icon:hover { background: var(--ls-canvas); color: var(--ls-text-primary); }
.ls-nav--transparent .ls-nav__icon { color: rgba(255,255,255,.7); }
.ls-nav--transparent .ls-nav__icon:hover { color: #fff; background: rgba(255,255,255,.1); }
.ls-nav.scrolled .ls-nav__icon { color: var(--ls-text-secondary); }

.ls-nav__badge {
    position: absolute; top: 4px; right: 4px;
    min-width: 18px; height: 18px; padding: 0 5px;
    background: var(--ls-primary); color: #fff;
    font-size: .625rem; font-weight: 700;
    border-radius: var(--ls-radius-full);
    display: flex; align-items: center; justify-content: center;
    line-height: 1;
}
.ls-nav__cta { display: none; }

@media (min-width: 769px) {
    .ls-nav__cta { display: inline-flex; }
}
@media (max-width: 768px) {
    .ls-nav__links { display: none; }
    .ls-nav__cta { display: none; }
}

/* ── Mobile Bottom Nav ── */
.ls-bottom-nav {
    display: none;
    position: fixed; bottom: 0; left: 0; right: 0;
    z-index: 999;
    background: var(--ls-surface);
    border-top: 1px solid var(--ls-border);
    padding: var(--ls-space-2) 0 max(env(safe-area-inset-bottom), var(--ls-space-2));
    grid-template-columns: repeat(5, 1fr);
}
@media (max-width: 768px) { .ls-bottom-nav { display: grid; } main { padding-bottom: var(--ls-bottom-nav-height); } }

.ls-bottom-nav__item {
    display: flex; flex-direction: column; align-items: center; gap: 2px;
    padding: var(--ls-space-1) 0;
    font-size: .625rem; font-weight: 600;
    color: var(--ls-text-tertiary);
    transition: color var(--ls-duration-fast);
    -webkit-tap-highlight-color: transparent;
}
.ls-bottom-nav__item svg { transition: transform var(--ls-duration-fast) var(--ls-ease-spring); }
.ls-bottom-nav__item.is-active { color: var(--ls-primary); }
.ls-bottom-nav__item.is-active svg { transform: translateY(-2px); }
.ls-bottom-nav__item:active svg { transform: scale(.9); }

.ls-bottom-nav__fab {
    width: 48px; height: 48px;
    display: flex; align-items: center; justify-content: center;
    background: var(--ls-primary); color: #fff;
    border-radius: var(--ls-radius-full);
    box-shadow: 0 4px 12px var(--ls-primary-glow);
    margin-top: -20px;
    transition: transform var(--ls-duration-fast) var(--ls-ease-spring), box-shadow var(--ls-duration-fast);
}
.ls-bottom-nav__item--primary:active .ls-bottom-nav__fab { transform: scale(.92); }
.ls-bottom-nav__item--primary span { margin-top: 2px; color: var(--ls-primary); font-weight: 700; }

.ls-bottom-nav__badge {
    position: absolute; top: -4px; right: -6px;
    min-width: 18px; height: 18px; padding: 0 4px;
    background: var(--ls-primary); color: #fff;
    font-size: .6rem; font-weight: 700;
    border-radius: var(--ls-radius-full);
    display: flex; align-items: center; justify-content: center;
    border: 2px solid var(--ls-surface);
}