/* ==========================================================================
   Modern Mobile Nav Pro v3.0 - Responsive, Core Web Vitals & 15 Styles
   ========================================================================== */
.mmnp-wrapper {
    --mmnp-bg: #0b1120;
    --mmnp-inactive: #94a3b8;
    --mmnp-sheet-accent: #38bdf8;
    --mmnp-z: 9999;
    --mmnp-ease: cubic-bezier(0.22, 1, 0.36, 1);
    font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
    box-sizing: border-box;
    user-select: none;
    -webkit-tap-highlight-color: transparent;
    contain: layout style;
}
.mmnp-wrapper.mmnp-theme-light {
    --mmnp-bg: #ffffff !important;
    --mmnp-inactive: #64748b !important;
    --mmnp-nav-shadow: 0 12px 30px -4px rgba(15, 23, 42, 0.14);
}
.mmnp-wrapper *, .mmnp-wrapper *::before, .mmnp-wrapper *::after {
    box-sizing: inherit;
}
.mmnp-is-frontend {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: var(--mmnp-z);
    padding: 0 12px calc(10px + env(safe-area-inset-bottom, 0px));
    pointer-events: none;
    transition: transform 0.35s var(--mmnp-ease), opacity 0.35s var(--mmnp-ease);
    will-change: transform;
}
.mmnp-is-frontend.is-hidden-scroll {
    transform: translate3d(0, 125%, 0);
    opacity: 0;
}
.mmnp-svg-defs, .mmnp-smart-topbar, .mmnp-wave-svg, .mmnp-fab-slot {
    display: none;
}

/* Toast Notification */
.mmnp-toast {
    position: fixed;
    bottom: calc(90px + env(safe-area-inset-bottom, 0px));
    left: 50%;
    transform: translate3d(-50%, 16px, 0);
    background: #0f172a;
    color: #f8fafc;
    border: 1px solid rgba(255,255,255,0.14);
    padding: 8px 16px;
    border-radius: 99px;
    font-size: 12.5px;
    font-weight: 600;
    box-shadow: 0 10px 25px rgba(0,0,0,0.35);
    opacity: 0;
    visibility: hidden;
    transition: all 0.3s var(--mmnp-ease);
    z-index: 10;
    pointer-events: none;
    white-space: nowrap;
}
.mmnp-is-preview .mmnp-toast {
    position: absolute;
    bottom: 86px;
}
.mmnp-toast.is-shown {
    opacity: 1;
    visibility: visible;
    transform: translate3d(-50%, 0, 0);
}

/* ==========================================================================
   BOTTOM SHEET DRAWER & LIVE AJAX SEARCH MODAL (dvh & Keyboard Safe)
   ========================================================================== */
.mmnp-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(2, 6, 23, 0.68);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.35s var(--mmnp-ease), visibility 0.35s;
    z-index: 1;
}
.mmnp-is-preview .mmnp-backdrop {
    position: absolute;
    border-radius: 24px;
}
.mmnp-wrapper.has-open-sheet .mmnp-backdrop {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

.mmnp-sheet {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    max-width: 500px;
    margin: 0 auto;
    background: #0f172a;
    color: #f8fafc;
    border-radius: 26px 26px 0 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow: 0 -18px 45px rgba(0, 0, 0, 0.6);
    padding: 8px 16px calc(92px + env(safe-area-inset-bottom, 0px));
    max-height: 82vh;
    max-height: 82dvh;
    display: flex;
    flex-direction: column;
    transform: translate3d(0, 105%, 0);
    visibility: hidden;
    pointer-events: auto;
    transition: transform 0.42s var(--mmnp-ease), visibility 0.42s;
    z-index: 2;
}
.mmnp-wrapper.mmnp-theme-light .mmnp-sheet {
    background: #ffffff;
    color: #0f172a;
    border-top-color: #e2e8f0;
}
.mmnp-is-preview .mmnp-sheet {
    position: absolute;
    max-height: 86%;
    padding-bottom: 82px;
    border-radius: 22px 22px 0 0;
}
.mmnp-sheet.is-open {
    transform: translate3d(0, 0, 0);
    visibility: visible;
}

.mmnp-sheet-handle-bar {
    padding: 6px 0 10px;
    cursor: grab;
    display: flex;
    justify-content: center;
    touch-action: none;
    flex-shrink: 0;
}
.mmnp-sheet-pill {
    width: 42px;
    height: 4.5px;
    border-radius: 99px;
    background: rgba(148, 163, 184, 0.35);
}

.mmnp-sheet-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 12px;
    border-bottom: 1px solid rgba(148, 163, 184, 0.14);
    margin-bottom: 12px;
    flex-shrink: 0;
}
.mmnp-sheet-title-wrap {
    display: flex;
    align-items: center;
    gap: 8px;
}
.mmnp-sheet-icon {
    width: 32px;
    height: 32px;
    border-radius: 10px;
    background: rgba(56, 189, 248, 0.14);
    color: var(--mmnp-sheet-accent, #38bdf8);
    display: flex;
    align-items: center;
    justify-content: center;
}
.mmnp-sheet-icon svg { width: 18px; height: 18px; }
.mmnp-sheet-title {
    margin: 0 !important;
    font-size: 14.5px !important;
    font-weight: 700 !important;
    color: inherit !important;
}
.mmnp-sheet-close {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(148, 163, 184, 0.08);
    color: inherit;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, color 0.2s;
}
.mmnp-sheet-close:hover {
    background: rgba(239, 68, 68, 0.2);
    color: #ef4444;
}
.mmnp-sheet-close svg { width: 16px; height: 16px; }

.mmnp-sheet-body {
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-left: 2px;
    scrollbar-width: thin;
}

/* Category Filter Input & Grid */
.mmnp-cat-filter-box {
    margin-bottom: 10px;
}
.mmnp-cat-filter-input {
    width: 100%;
    height: 38px;
    border-radius: 10px;
    border: 1px solid rgba(148, 163, 184, 0.2);
    background: rgba(30, 41, 59, 0.55);
    color: inherit;
    padding: 0 12px;
    font-size: 12.5px;
    outline: none;
}
.mmnp-wrapper.mmnp-theme-light .mmnp-cat-filter-input {
    background: #f1f5f9;
}
.mmnp-cat-grid {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
}
@media (max-width: 350px) {
    .mmnp-cat-grid { grid-template-columns: 1fr; }
}
.mmnp-cat-card {
    background: rgba(30, 41, 59, 0.65);
    border: 1px solid rgba(148, 163, 184, 0.12);
    border-radius: 14px;
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: border-color 0.25s, transform 0.2s;
}
.mmnp-wrapper.mmnp-theme-light .mmnp-cat-card {
    background: #f8fafc;
}
.mmnp-cat-card:hover {
    border-color: var(--mmnp-sheet-accent, #38bdf8);
    transform: translateY(-2px);
}
.mmnp-cat-main-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-decoration: none !important;
    color: inherit !important;
    font-weight: 700;
    font-size: 12.5px;
}
.mmnp-cat-count {
    background: rgba(56, 189, 248, 0.16);
    color: var(--mmnp-sheet-accent, #38bdf8);
    font-size: 11px;
    padding: 2px 7px;
    border-radius: 99px;
    font-weight: 700;
}
.mmnp-cat-Format-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}
.mmnp-subcat-chip {
    font-size: 10.5px;
    color: #94a3b8 !important;
    background: rgba(15, 23, 42, 0.5);
    padding: 2px 8px;
    border-radius: 99px;
    text-decoration: none !important;
    border: 1px solid rgba(148, 163, 184, 0.1);
}
.mmnp-wrapper.mmnp-theme-light .mmnp-subcat-chip {
    background: #e2e8f0;
    color: #475569 !important;
}

/* AJAX Search Input, Recent Searches & Results */
.mmnp-search-input-box {
    position: relative;
    display: flex;
    align-items: center;
    background: rgba(30, 41, 59, 0.85);
    border: 1.5px solid rgba(148, 163, 184, 0.2);
    border-radius: 14px;
    padding: 0 12px;
    transition: border-color 0.25s, box-shadow 0.25s;
}
.mmnp-wrapper.mmnp-theme-light .mmnp-search-input-box {
    background: #f1f5f9;
}
.mmnp-search-input-box:focus-within {
    border-color: var(--mmnp-sheet-accent, #38bdf8);
    box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.18);
}
.mmnp-search-prefix { color: #94a3b8; display: flex; }
.mmnp-search-prefix svg { width: 18px; height: 18px; }
.mmnp-search-input {
    width: 100%;
    height: 42px;
    background: transparent !important;
    border: none !important;
    color: inherit !important;
    font-size: 13.5px;
    padding: 0 10px !important;
    outline: none !important;
    box-shadow: none !important;
}
.mmnp-search-spinner {
    width: 18px;
    height: 18px;
    border: 2px solid rgba(148, 163, 184, 0.2);
    border-top-color: var(--mmnp-sheet-accent, #38bdf8);
    border-radius: 50%;
    opacity: 0;
    animation: mmnpSpin 0.7s linear infinite;
}
.mmnp-search-sheet.is-loading .mmnp-search-spinner { opacity: 1; }
@keyframes mmnpSpin { to { transform: rotate(360deg); } }

.mmnp-quick-tags {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    margin: 10px 0;
}
.mmnp-tags-label { font-size: 11px; color: #64748b; }
.mmnp-tag-chip {
    background: rgba(30, 41, 59, 0.75);
    border: 1px solid rgba(148, 163, 184, 0.15);
    color: inherit;
    border-radius: 99px;
    padding: 3px 10px;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s;
}
.mmnp-wrapper.mmnp-theme-light .mmnp-tag-chip { background: #f1f5f9; }
.mmnp-tag-chip:hover {
    background: var(--mmnp-sheet-accent, #38bdf8);
    color: #0f172a;
    border-color: transparent;
    font-weight: 700;
}

.mmnp-recent-searches {
    margin: 6px 0 10px;
    padding: 8px 10px;
    border-radius: 12px;
    background: rgba(30, 41, 59, 0.4);
}
.mmnp-recent-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 11px;
    color: #94a3b8;
    margin-bottom: 6px;
}
.mmnp-clear-recent {
    background: none;
    border: none;
    color: #f87171;
    font-size: 11px;
    cursor: pointer;
    padding: 0;
}
.mmnp-recent-list {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.mmnp-search-results {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 6px;
}
.mmnp-search-empty {
    text-align: center;
    color: #64748b;
    font-size: 12.5px;
    padding: 18px 10px;
}
.mmnp-result-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 10px;
    background: rgba(30, 41, 59, 0.6);
    border: 1px solid rgba(148, 163, 184, 0.1);
    border-radius: 12px;
    text-decoration: none !important;
    color: inherit !important;
    transition: border-color 0.2s;
}
.mmnp-wrapper.mmnp-theme-light .mmnp-result-item { background: #f8fafc; }
.mmnp-result-item:hover {
    border-color: var(--mmnp-sheet-accent, #38bdf8);
}
.mmnp-result-thumb {
    width: 42px;
    height: 42px;
    border-radius: 10px;
    background: #0b1120;
    object-fit: cover;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--mmnp-sheet-accent, #38bdf8);
    font-weight: 700;
    font-size: 14px;
}
.mmnp-result-info {
    display: flex;
    flex-direction: column;
    gap: 4px;
    min-width: 0;
    flex: 1;
}
.mmnp-result-title {
    font-size: 12.5px;
    font-weight: 700;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.mmnp-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    color: #94a3b8;
}
.mmnp-result-badge {
    background: rgba(56, 189, 248, 0.14);
    color: var(--mmnp-sheet-accent, #38bdf8);
    padding: 1px 7px;
    border-radius: 6px;
    font-weight: 600;
}

/* ==========================================================================
   BASE NAVBAR LAYOUT & RESPONSIVE SCALING
   ========================================================================== */
.mmnp-nav {
    position: relative;
    z-index: 3;
    max-width: 480px;
    margin: 0 auto;
    background: var(--mmnp-bg);
    height: 66px;
    border-radius: 20px;
    border: var(--mmnp-nav-border-width, 0px) solid var(--mmnp-nav-border-color, transparent);
    padding: 0 clamp(6px, 2vw, 12px);
    box-shadow: var(--mmnp-nav-shadow, 0 14px 34px -6px rgba(0, 0, 0, 0.42));
    pointer-events: auto;
    display: flex;
    align-items: center;
    overflow: visible;
    transition: background-color 0.3s ease;
}
.mmnp-wrapper.mmnp-theme-light .mmnp-nav {
    box-shadow: var(--mmnp-nav-shadow, 0 12px 30px -4px rgba(15, 23, 42, 0.14));
}
.mmnp-list {
    list-style: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    align-items: center;
    justify-content: space-around;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 2;
}
.mmnp-item {
    flex: 1;
    min-width: 0;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}
.mmnp-link {
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none !important;
    color: var(--mmnp-inactive);
    width: 100%;
    height: 100%;
    position: relative;
    transition: all 0.35s var(--mmnp-ease);
    outline: none !important;
    padding: 0 2px;
}
.mmnp-icon-wrap {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.mmnp-icon svg {
    width: clamp(19px, 5vw, 22px);
    height: clamp(19px, 5vw, 22px);
    display: block;
    transition: transform 0.35s var(--mmnp-ease), color 0.3s ease;
}
.mmnp-label {
    font-size: clamp(10px, 2.8vw, 12px);
    font-weight: 600;
    white-space: nowrap;
    line-height: 1.1;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: all 0.35s var(--mmnp-ease);
}
.mmnp-badge {
    position: absolute;
    top: -6px;
    right: -8px;
    background: var(--mmnp-badge-bg, #ef4444);
    color: var(--mmnp-badge-color, #fff);
    font-size: 9.5px;
    font-weight: 700;
    min-width: 16px;
    height: 16px;
    border-radius: 99px;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0 4px;
    box-shadow: 0 2px 6px rgba(239,68,68,0.5);
}
.mmnp-badge[hidden] { display: none !important; }

.mmnp-indicator-track {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    overflow: visible;
}
.mmnp-indicator {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    pointer-events: none;
    transition: transform 0.4s var(--mmnp-ease), width 0.4s var(--mmnp-ease);
    will-change: transform, width;
}

/* Landscape & Small Screen Responsive Adjustments */
@media (max-height: 460px) and (orientation: landscape) {
    .mmnp-nav { height: 54px; }
    .mmnp-is-frontend { padding-bottom: 6px; }
}
@media (max-width: 350px) {
    .mmnp-style_1 .mmnp-item.is-active .mmnp-link,
    .mmnp-style_2 .mmnp-item.is-active .mmnp-link {
        padding: 0 10px !important;
        gap: 4px;
    }
}

/* ==========================================================================
   15 UNIQUE NAVIGATION STYLES
   ========================================================================== */
/* STYLE 1: Figma Expanding Pill */
.mmnp-style_1 .mmnp-nav { border-radius: calc(var(--mmnp-bar-radius, 40) * 1px); }
.mmnp-style_1 .mmnp-indicator-track { display: none; }
.mmnp-style_1 .mmnp-item { flex: 0 1 auto; }
.mmnp-style_1 .mmnp-link { flex-direction: row; gap: 6px; height: 42px; padding: 0 10px; border-radius: 999px; }
.mmnp-style_1 .mmnp-label { max-width: 0; opacity: 0; transform: translateX(5px); }
.mmnp-style_1 .mmnp-item.is-active .mmnp-link {
    background: var(--mmnp-pill-bg, #38bdf8);
    color: var(--mmnp-pill-text, #0f172a);
    padding: 0 calc(var(--mmnp-pill-px, 16) * 1px);
    box-shadow: 0 4px 15px -3px var(--mmnp-pill-bg, #38bdf8);
}
.mmnp-style_1 .mmnp-item.is-active .mmnp-label { max-width: 96px; opacity: 1; transform: translateX(0); }

/* STYLE 2: Figma Dark Inset Pill */
.mmnp-style_2 .mmnp-nav { border-radius: calc(var(--mmnp-bar-radius, 18) * 1px); }
.mmnp-style_2 .mmnp-indicator-track { display: none; }
.mmnp-style_2 .mmnp-item { flex: 0 1 auto; }
.mmnp-style_2 .mmnp-link { flex-direction: row; gap: 6px; height: 42px; padding: 0 10px; border-radius: 999px; border: 1px solid transparent; }
.mmnp-style_2 .mmnp-label { max-width: 0; opacity: 0; }
.mmnp-style_2 .mmnp-item.is-active .mmnp-link {
    background: var(--mmnp-inset-bg, #1e293b);
    border-color: var(--mmnp-inset-border, #334155);
    color: #f8fafc;
    padding: 0 14px;
}
.mmnp-style_2 .mmnp-item.is-active .mmnp-icon { color: var(--mmnp-active-color, #3b82f6); }
.mmnp-style_2 .mmnp-item.is-active .mmnp-label { max-width: 92px; opacity: 1; }

/* STYLE 3: Figma Classic Bottom Line Indicator */
.mmnp-style_3 .mmnp-nav { border-radius: 16px; height: 68px; }
.mmnp-style_3 .mmnp-link { flex-direction: column; gap: 5px; }
.mmnp-style_3 .mmnp-item.is-active .mmnp-link { color: var(--mmnp-line-color, #3b82f6); }
.mmnp-style_3 .mmnp-item.is-active .mmnp-icon svg, .mmnp-style_3 .mmnp-item.is-active .mmnp-icon i { transform: translateY(-2px); }
.mmnp-style_3 .mmnp-indicator { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; }
.mmnp-style_3 .mmnp-indicator-inner {
    width: calc(var(--mmnp-line-width, 28) * 1px);
    height: calc(var(--mmnp-line-height, 3) * 1px);
    border-radius: 99px;
    background: var(--mmnp-line-color, #3b82f6);
    box-shadow: 0 0 calc(var(--mmnp-glow-spread, 10) * 1px) var(--mmnp-line-color, #3b82f6);
}

/* STYLE 4: Apple Dynamic Island */
.mmnp-style_4.mmnp-is-frontend { padding-bottom: calc(var(--mmnp-float-offset, 14) * 1px + env(safe-area-inset-bottom, 0px)); }
.mmnp-style_4 .mmnp-nav {
    max-width: 370px;
    height: 60px;
    border-radius: 999px;
    backdrop-filter: blur(calc(var(--mmnp-island-blur, 20) * 1px));
    -webkit-backdrop-filter: blur(calc(var(--mmnp-island-blur, 20) * 1px));
    border: 1px solid rgba(255,255,255,0.12);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.3s;
}
.mmnp-style_4 .mmnp-nav.is-bouncing { transform: scaleX(calc(var(--mmnp-bounce-scale, 104) / 100)) scaleY(0.96); }
.mmnp-style_4 .mmnp-label { display: none; }
.mmnp-style_4 .mmnp-item.is-active .mmnp-link { color: var(--mmnp-island-accent, #fd8900); }
.mmnp-style_4 .mmnp-item.is-active .mmnp-icon svg, .mmnp-style_4 .mmnp-item.is-active .mmnp-icon i { transform: scale(1.18); }
.mmnp-style_4 .mmnp-indicator { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 7px; }
.mmnp-style_4 .mmnp-indicator-inner {
    width: 5px; height: 5px; border-radius: 50%;
    background: var(--mmnp-island-accent, #fd8900);
    box-shadow: 0 0 8px var(--mmnp-island-accent, #fd8900);
}

/* STYLE 5: macOS Magnification Dock */
.mmnp-style_5 .mmnp-nav {
    max-width: 390px;
    border-radius: calc(var(--mmnp-dock-radius, 24) * 1px);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border: 1px solid rgba(255,255,255,0.14);
}
.mmnp-style_5 .mmnp-label { display: none; }
.mmnp-style_5 .mmnp-icon-wrap {
    width: 42px; height: 42px; border-radius: 13px;
    background: rgba(148, 163, 184, 0.1);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.mmnp-style_5 .mmnp-item.is-active .mmnp-icon-wrap {
    transform: translateY(-8px) scale(calc(var(--mmnp-dock-scale, 125) / 100));
    background: rgba(148, 163, 184, 0.22);
    color: var(--mmnp-dot-color, #38bdf8);
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
}
.mmnp-style_5 .mmnp-indicator { display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; }
.mmnp-style_5 .mmnp-indicator-inner { width: 6px; height: 4px; border-radius: 99px; background: var(--mmnp-dot-color, #38bdf8); }

/* STYLE 6: Floating Elevated Circle */
.mmnp-style_6 .mmnp-indicator-track { display: none; }
.mmnp-style_6 .mmnp-link { flex-direction: column; gap: 4px; }
.mmnp-style_6 .mmnp-icon-wrap {
    width: calc(var(--mmnp-circle-size, 50) * 1px);
    height: calc(var(--mmnp-circle-size, 50) * 1px);
    border-radius: 50%;
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mmnp-style_6 .mmnp-label { position: absolute; bottom: 7px; opacity: 0; transform: translateY(8px); }
.mmnp-style_6 .mmnp-item.is-active .mmnp-icon-wrap {
    background: var(--mmnp-circle-bg, #6366f1);
    color: #ffffff;
    transform: translateY(calc(var(--mmnp-lift-y, 18) * -1px));
    border: calc(var(--mmnp-ring-width, 4) * 1px) solid var(--mmnp-bg);
    box-shadow: 0 10px 22px -4px var(--mmnp-circle-bg, #6366f1);
}
.mmnp-style_6 .mmnp-item.is-active .mmnp-label { opacity: 1; transform: translateY(0); color: var(--mmnp-circle-bg, #6366f1); font-weight: 700; }

/* STYLE 7: Liquid Gooey Drop (Sharp Icons, Gooey Blob Track) */
.mmnp-style_7 .mmnp-label { display: none; }
.mmnp-style_7 .mmnp-indicator {
    display: flex; justify-content: center; align-items: center;
    transition-duration: calc(var(--mmnp-anim-speed, 420) * 1ms);
}
.mmnp-style_7 .mmnp-indicator-inner {
    width: calc(var(--mmnp-blob-size, 46) * 1px);
    height: calc(var(--mmnp-blob-size, 46) * 1px);
    border-radius: 50%;
    background: var(--mmnp-blob-color, #ec4899);
    box-shadow: 0 0 16px var(--mmnp-blob-color, #ec4899);
}
.mmnp-style_7 .mmnp-item.is-active .mmnp-link { color: #ffffff; }
.mmnp-style_7 .mmnp-item.is-active .mmnp-icon svg, .mmnp-style_7 .mmnp-item.is-active .mmnp-icon i { transform: scale(1.15); }

/* STYLE 8: Center FAB Split Bar */
.mmnp-style_8 .mmnp-indicator-track { display: none; }
.mmnp-style_8 .mmnp-fab-slot { display: flex; align-items: center; justify-content: center; padding: 0 6px; }
.mmnp-style_8 .mmnp-fab-btn {
    width: calc(var(--mmnp-fab-size, 56) * 1px);
    height: calc(var(--mmnp-fab-size, 56) * 1px);
    border-radius: 50%;
    background: var(--mmnp-fab-bg, #10b981);
    color: #ffffff;
    display: flex; align-items: center; justify-content: center;
    transform: translateY(-18px);
    box-shadow: 0 12px 24px -4px var(--mmnp-fab-bg, #10b981);
    border: 4px solid var(--mmnp-bg);
    transition: transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.mmnp-style_8 .mmnp-fab-btn:hover, .mmnp-style_8 .mmnp-fab-btn:active { transform: translateY(-20px) rotate(90deg) scale(1.05); }
.mmnp-style_8 .mmnp-fab-btn svg { width: 24px; height: 24px; }
.mmnp-style_8 .mmnp-link { flex-direction: column; gap: 4px; }
.mmnp-style_8 .mmnp-item.is-active .mmnp-link { color: var(--mmnp-active-tint, #10b981); }

/* STYLE 9: Spotlight Cyber Beam */
.mmnp-style_9 .mmnp-nav { overflow: hidden; }
.mmnp-style_9 .mmnp-link { flex-direction: column; gap: 5px; }
.mmnp-style_9 .mmnp-item.is-active .mmnp-link { color: var(--mmnp-beam-color, #06b6d4); }
.mmnp-style_9 .mmnp-item.is-active .mmnp-icon {
    color: var(--mmnp-beam-color, #06b6d4);
    filter: drop-shadow(0 0 6px var(--mmnp-beam-color, #06b6d4));
}
.mmnp-style_9 .mmnp-indicator { display: flex; justify-content: center; align-items: flex-start; }
.mmnp-style_9 .mmnp-indicator-inner {
    position: relative;
    width: calc(var(--mmnp-laser-width, 34) * 1px);
    height: 3px;
    background: var(--mmnp-beam-color, #06b6d4);
    border-radius: 0 0 4px 4px;
    box-shadow: 0 0 12px var(--mmnp-beam-color, #06b6d4);
}
.mmnp-style_9 .mmnp-indicator-inner::after {
    content: "";
    position: absolute; top: 3px; left: 50%; transform: translateX(-50%);
    width: calc(var(--mmnp-cone-spread, 52) * 1px);
    height: 62px;
    background: linear-gradient(to bottom, var(--mmnp-beam-color, #06b6d4), transparent);
    opacity: calc(var(--mmnp-beam-opacity, 28) / 100);
    clip-path: polygon(22% 0%, 78% 0%, 100% 100%, 0% 100%);
}

/* STYLE 10: iOS Ultra Glassmorphism */
.mmnp-style_10 .mmnp-nav {
    backdrop-filter: blur(calc(var(--mmnp-blur-px, 24) * 1px)) saturate(180%);
    -webkit-backdrop-filter: blur(calc(var(--mmnp-blur-px, 24) * 1px)) saturate(180%);
    border: 1px solid rgba(255, 255, 255, calc(var(--mmnp-border-alpha, 20) / 100));
}
.mmnp-style_10 .mmnp-link { flex-direction: column; gap: 4px; }
.mmnp-style_10 .mmnp-item.is-active .mmnp-link { color: var(--mmnp-card-tint, #60a5fa); }
.mmnp-style_10 .mmnp-indicator { display: flex; align-items: center; justify-content: center; padding: 7px 0; }
.mmnp-style_10 .mmnp-indicator-inner {
    width: 84%; height: 100%;
    border-radius: calc(var(--mmnp-card-radius, 14) * 1px);
    background: rgba(148, 163, 184, 0.14);
    border: 1px solid rgba(255, 255, 255, 0.16);
    box-shadow: inset 0 1px 1px rgba(255,255,255,0.2);
}

/* STYLE 11: Soft Neumorphism Pressed */
.mmnp-style_11 .mmnp-nav {
    background: var(--mmnp-neu-surface, #1e2430);
    box-shadow: 8px 8px 18px rgba(0,0,0,0.45), -4px -4px 14px rgba(255,255,255,0.04);
}
.mmnp-style_11 .mmnp-indicator-track { display: none; }
.mmnp-style_11 .mmnp-label { display: none; }
.mmnp-style_11 .mmnp-icon-wrap {
    width: 44px; height: 44px;
    border-radius: calc(var(--mmnp-btn-radius, 14) * 1px);
    background: var(--mmnp-neu-surface, #1e2430);
    box-shadow: 4px 4px 8px rgba(0,0,0,0.4), -3px -3px 7px rgba(255,255,255,0.04);
    transition: all 0.25s ease;
}
.mmnp-style_11 .mmnp-item.is-active .mmnp-icon-wrap {
    color: var(--mmnp-led-color, #f59e0b);
    box-shadow: inset calc(var(--mmnp-shadow-depth, 5) * 1px) calc(var(--mmnp-shadow-depth, 5) * 1px) 9px rgba(0,0,0,0.55),
                inset -3px -3px 7px rgba(255,255,255,0.04);
}
.mmnp-style_11 .mmnp-item.is-active .mmnp-icon-wrap::after {
    content: ""; position: absolute; bottom: 5px; width: 5px; height: 5px;
    border-radius: 50%; background: var(--mmnp-led-color, #f59e0b);
    box-shadow: 0 0 8px var(--mmnp-led-color, #f59e0b);
}

/* STYLE 12: Minimal Kinetic Shutter Typography */
.mmnp-style_12 .mmnp-indicator-track { display: none; }
.mmnp-style_12 .mmnp-link { overflow: hidden; }
.mmnp-style_12 .mmnp-icon-wrap { transition: transform calc(var(--mmnp-shutter-ms, 300) * 1ms) var(--mmnp-ease), opacity 0.25s; }
.mmnp-style_12 .mmnp-label {
    position: absolute;
    font-size: calc(var(--mmnp-font-size, 13) * 1px);
    font-weight: 800;
    color: var(--mmnp-text-color, #f43f5e);
    transform: translateY(28px); opacity: 0;
    transition: transform calc(var(--mmnp-shutter-ms, 300) * 1ms) var(--mmnp-ease), opacity 0.25s;
}
.mmnp-style_12 .mmnp-label::after {
    content: ""; display: block;
    width: calc(var(--mmnp-dot-size, 5) * 1px);
    height: calc(var(--mmnp-dot-size, 5) * 1px);
    border-radius: 50%;
    background: var(--mmnp-text-color, #f43f5e);
    margin: 4px auto 0;
}
.mmnp-style_12 .mmnp-item.is-active .mmnp-icon-wrap { transform: translateY(-28px); opacity: 0; }
.mmnp-style_12 .mmnp-item.is-active .mmnp-label { transform: translateY(2px); opacity: 1; }

/* STYLE 13: Magnetic SVG Wave Border */
.mmnp-style_13 .mmnp-indicator-track { display: none; }
.mmnp-style_13 .mmnp-wave-svg {
    display: block; position: absolute; top: -18px; left: 0; width: 100%; height: 22px;
    color: var(--mmnp-wave-color, #a855f7); pointer-events: none;
    filter: drop-shadow(0 -2px 6px var(--mmnp-wave-color, #a855f7));
}
.mmnp-style_13 .mmnp-wave-path { stroke-width: calc(var(--mmnp-stroke-width, 3) * 1px); transition: d 0.38s var(--mmnp-ease); }
.mmnp-style_13 .mmnp-link { flex-direction: column; gap: 4px; }
.mmnp-style_13 .mmnp-item.is-active .mmnp-link { color: var(--mmnp-wave-color, #a855f7); transform: translateY(-3px); }

/* STYLE 14: Origami 3D Flip Card */
.mmnp-style_14 .mmnp-indicator-track { display: none; }
.mmnp-style_14 .mmnp-item { perspective: 600px; }
.mmnp-style_14 .mmnp-link {
    flex-direction: column; gap: 4px; height: 50px; margin: 0 3px;
    border-radius: calc(var(--mmnp-card-radius, 12) * 1px);
    transform-style: preserve-3d;
    transition: transform 0.45s cubic-bezier(0.34, 1.56, 0.64, 1), background 0.3s;
}
.mmnp-style_14 .mmnp-item.is-active .mmnp-link {
    background: var(--mmnp-card-bg, #2563eb);
    color: #ffffff;
    transform: translateY(calc(var(--mmnp-card-elev, 7) * -1px)) rotateX(calc(var(--mmnp-flip-deg, 12) * 1deg));
    box-shadow: 0 12px 20px -6px var(--mmnp-card-bg, #2563eb);
}

/* STYLE 15: Smart Stacked Dual-Bar */
.mmnp-style_15 .mmnp-smart-topbar {
    display: flex; align-items: center; justify-content: space-between;
    max-width: 460px; margin: 0 auto -6px; padding: 7px 14px 13px;
    background: linear-gradient(90deg, #1e293b, #0f172a);
    border: 1px solid rgba(255,255,255,0.1);
    border-radius: 16px 16px 0 0;
    color: #e2e8f0; font-size: 11.5px; pointer-events: auto;
    position: relative; z-index: 2;
}
.mmnp-style_15 .mmnp-smart-cta {
    background: var(--mmnp-top-accent, #f97316);
    color: #fff !important; text-decoration: none !important;
    padding: 3px 10px; border-radius: 99px; font-weight: 700; font-size: 11px;
}
.mmnp-style_15 .mmnp-link { flex-direction: column; gap: 4px; }
.mmnp-style_15 .mmnp-item.is-active .mmnp-link { color: var(--mmnp-top-accent, #f97316); }
.mmnp-style_15 .mmnp-indicator { display: flex; align-items: flex-start; justify-content: center; }
.mmnp-style_15 .mmnp-indicator-inner { width: 24px; height: 3px; border-radius: 0 0 6px 6px; background: var(--mmnp-top-accent, #f97316); }

/* v3.1 global display controls and Font Awesome compatibility */
.mmnp-is-frontend.mmnp-position-bottom {
    top: auto;
    bottom: 0;
    padding: 0 var(--mmnp-h-padding, 12px) calc(var(--mmnp-v-offset, 10px) + env(safe-area-inset-bottom, 0px));
}
.mmnp-is-frontend.mmnp-position-top {
    top: 0;
    bottom: auto;
    padding: calc(var(--mmnp-v-offset, 10px) + env(safe-area-inset-top, 0px)) var(--mmnp-h-padding, 12px) 0;
}
.mmnp-is-frontend.mmnp-position-top.is-hidden-scroll {
    transform: translate3d(0, -125%, 0);
}
.mmnp-nav {
    width: min(100%, var(--mmnp-nav-width, 480px));
    max-width: var(--mmnp-nav-width, 480px);
    height: var(--mmnp-nav-height, 66px);
}
.mmnp-icon svg {
    width: var(--mmnp-icon-size, 22px);
    height: var(--mmnp-icon-size, 22px);
}
.mmnp-icon i {
    display: block;
    width: auto;
    height: auto;
    font-size: var(--mmnp-icon-size, 22px);
    line-height: 1;
    font-style: normal;
    transition: transform .35s var(--mmnp-ease), color .3s ease;
}
.mmnp-label { font-size: var(--mmnp-label-size, 12px); }
.mmnp-hide-labels .mmnp-label { display: none !important; }


/* Accessibility: respect the operating system's reduced-motion preference. */
@media (prefers-reduced-motion: reduce) {
    .mmnp-wrapper *,
    .mmnp-wrapper *::before,
    .mmnp-wrapper *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}