/* ============================================================
   GLOBAL BASE
   ============================================================ */

::selection {
    background: rgba(240, 142, 32, 0.35);
    color: #fff;
}

body {
    padding-top: 0;
    font-family: 'Inter', system-ui, -apple-system, sans-serif;
    background-color: #0b0d0f;
    color: #e4e4e7;
    overflow-x: hidden;
}

main {
    overflow-x: hidden;
    position: relative;
}

h5 {
    font-weight: bold;
}

.bd-placeholder-img {
    font-size: 1.125rem;
    text-anchor: middle;
    -webkit-user-select: none;
    -moz-user-select: none;
    user-select: none;
}

/* ============================================================
   NAVBAR
   ============================================================ */

.mn-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    height: 68px;
    height: calc(68px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    background: rgba(10, 11, 13, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.mn-navbar__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
}

/* When mobile overlay is open, remove backdrop-filter from navbar so the overlay can use its own */
.mn-navbar--overlay-open {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

/* Mobile overlay opening animation */
@keyframes mnOverlayIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}
@keyframes mnRowIn {
    from { opacity: 0; transform: translateY(10px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Logo */
.mn-navbar__logo {
    flex: 1;
    display: flex;
    align-items: center;
    text-decoration: none;
    margin-left: 0.5rem;
}

.mn-navbar__logo img {
    width: 120px;
}

/* Nav menu (desktop) */
.mn-navbar__menu {
    display: flex;
    align-items: center;
    list-style: none;
    margin: 0;
    padding: 0;
    gap: 0.25rem;
}

.mn-navbar__item {
    position: relative;
}

.mn-navbar__link {
    display: block;
    padding: 0.4rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    border-radius: 8px;
    transition: color 0.2s ease, background 0.2s ease;
}

.mn-navbar__link:hover,
.mn-navbar__link:focus {
    color: #fff;
    background: transparent;
    text-decoration: none;
}

/* Dropdown caret */
.mn-navbar__link.dropdown-toggle::after {
    border-top-color: rgba(255, 255, 255, 0.5);
    vertical-align: 0.18em;
}

/* Dropdown menu */
.mn-dropdown {
    background: #16181c;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px;
    padding: 0.5rem;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
    min-width: 200px;
    margin-top: 0.5rem !important;

    /* Animation */
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.18s ease, transform 0.18s ease;
    display: block !important;
    pointer-events: none;
    visibility: hidden;
}

.mn-dropdown.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
}

.mn-dropdown__item {
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.70) !important;
    border-radius: 8px;
    padding: 0.45rem 0.75rem !important;
    transition: background 0.15s ease, color 0.15s ease;
}

.mn-dropdown__item:hover,
.mn-dropdown__item:focus {
    background: rgba(255, 255, 255, 0.07) !important;
    color: #fff !important;
}

.mn-dropdown__item--danger:hover,
.mn-dropdown__item--danger:focus {
    background: rgba(220, 53, 69, 0.15) !important;
    color: #f56565 !important;
}

.mn-dropdown__header {
    font-size: 0.7rem !important;
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.3) !important;
    padding: 0.5rem 0.75rem 0.25rem !important;
}

.mn-dropdown__divider {
    border-color: rgba(255, 255, 255, 0.08) !important;
    margin: 0.35rem 0 !important;
}

/* Right-side actions */
.mn-navbar__actions {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    justify-content: flex-end;
}

.mn-navbar__link--login {
    font-size: 0.875rem;
    padding: 0.4rem 0.75rem;
    border-radius: 8px;
}

/* Buttons */
.mn-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.45rem;
    padding: 0.45rem 1.1rem;
    font-size: 0.875rem;
    font-weight: 600;
    border-radius: 9999px;
    text-decoration: none;
    border: none;
    transition: all 0.25s ease;
    white-space: nowrap;
    cursor: pointer;
}
.mn-btn svg { width: 1.1em; height: 1.1em; }

.mn-btn--primary {
    background: #F08E20;
    color: #000 !important;
    box-shadow: 0 0 20px rgba(240, 142, 32, 0.25);
}

.mn-btn--primary:hover {
    background: #F4BB32;
    color: #000 !important;
    transform: scale(1.04);
    box-shadow: 0 0 28px rgba(240, 142, 32, 0.4);
    text-decoration: none;
}

.mn-btn--ghost {
    background: transparent;
    color: rgba(255, 255, 255, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.18);
}

.mn-btn--ghost:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #fff;
    border-color: rgba(255, 255, 255, 0.35);
    text-decoration: none;
}

/* Badge */
.mn-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.6rem;
    font-size: 0.7rem;
    font-weight: 700;
    border-radius: 9999px;
    letter-spacing: 0.04em;
}

.mn-badge--danger {
    background: rgba(220, 38, 38, 0.2);
    color: #f87171;
    border: 1px solid rgba(220, 38, 38, 0.3);
}

/* Mobile-only action buttons (shown at bottom of mobile overlay) */
.mn-mobile-actions {
    display: none;
}

/* Avatar toggle */
.mn-avatar-toggle {
    display: flex;
    align-items: center;
}

.mn-avatar-toggle::after {
    display: none !important; /* hide Bootstrap caret on avatar */
}

.user-avatar {
    background-color: #fff;
    transition: opacity 0.2s ease;
}

.user-avatar:hover {
    opacity: 0.85;
}

/* Mobile hamburger */
.mobile-menu {
    background: none;
    border: none;
    padding: 0.25rem;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 1.5rem;
    color: #fff;
    line-height: 1;
}

/* Mobile nav header row (logo + close) — only visible when menu is open */
.mn-mobile-nav-header {
    display: none;
}

/* Close button (X) inside mobile overlay */
.mobile-menu-close {
    background: none;
    border: none;
    padding: 0.25rem;
    font-size: 1.5rem;
    color: #fff;
    cursor: pointer;
    line-height: 1;
}

/* ============================================================
   ACCOUNT BAR / ADMIN BAR
   ============================================================ */

.logged-in-bar {
    position: fixed;
    display: flex;
    left: 0;
    height: 34px;
    z-index: 1029;
    width: 100%;
    transition: 0.3s ease;
}

.user-bar {
    top: 68px;
    background: rgba(10, 11, 13, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.admin-bar {
    top: 102px;
    background: rgba(10, 11, 13, 0.90);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(240, 142, 32, 0.22);
}

.logged-in-bar .scroll-wrapper {
    position: relative;
    height: 100%;
    display: flex;
    align-items: center;
    gap: 0;
}

.mn-userbar__badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: rgba(255, 255, 255, 0.65);
    background: rgba(255, 255, 255, 0.07);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    margin-right: 0.65rem;
    line-height: 1.6;
    white-space: nowrap;
}

.mn-adminbar__badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #F08E20;
    background: rgba(240, 142, 32, 0.12);
    border: 1px solid rgba(240, 142, 32, 0.30);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    margin-right: 0.65rem;
    line-height: 1.6;
    white-space: nowrap;
}

.logged-in-bar ul {
    display: flex;
    list-style: none;
    align-items: center;
    margin: 0;
    padding: 0;
    height: 100%;
    overflow-x: scroll;
    overflow-y: hidden;
    -ms-overflow-style: none;
    scrollbar-width: none;
    gap: 0;
}

.logged-in-bar ul::-webkit-scrollbar {
    display: none;
}

.logged-in-bar ul li {
    flex-shrink: 0;
    position: relative;
}

.mn-bar__link {
    display: block;
    padding: 0 0.7rem;
    font-size: 0.75rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.50);
    text-decoration: none;
    line-height: 34px;
    white-space: nowrap;
    transition: color 0.15s ease;
}

.mn-bar__link:hover {
    color: rgba(255, 255, 255, 0.90);
    text-decoration: none;
}

.admin-bar .mn-bar__link:hover {
    color: #F4BB32;
}

.mn-bar__link--active {
    color: #F08E20 !important;
    font-weight: 600;
}

/* ============================================================
   SECURITY BANNER + SECURITY UPDATES PAGE
   ============================================================ */

.mn-security-banner {
    display: block;
    margin-top: 68px;
    background: #b91c1c;
    color: #fff;
    font-size: 0.75rem;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s ease;
}

.mn-security-banner:hover {
    background: #dc2626;
    color: #fff;
    text-decoration: none;
}

.mn-security-banner + main {
    margin-top: 0;
}

.mn-security-banner__inner {
    display: flex;
    align-items: center;
    min-height: 34px;
    padding-top: 0.3rem;
    padding-bottom: 0.3rem;
}

.mn-security-banner__badge {
    flex-shrink: 0;
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    color: #fff;
    background: rgba(0, 0, 0, 0.20);
    border: 1px solid rgba(255, 255, 255, 0.40);
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    margin-right: 0.65rem;
    line-height: 1.6;
}

.mn-security-banner__more {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: 0.65rem;
    font-weight: 600;
}

@media (max-width: 575.98px) {
    .mn-security-banner__more {
        display: none;
    }
}

.mn-security {
    max-width: 760px;
    padding-top: 4rem;
    padding-bottom: 5rem;
}

.mn-security__post {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 24px;
    padding: 2.25rem;
    color: rgba(255, 255, 255, 0.70);
    line-height: 1.7;
}

.mn-security__post h2 {
    font-size: 1.6rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.25;
    color: #fff;
    margin-bottom: 1.25rem;
}

.mn-security__post h3 {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin: 1.75rem 0 0.5rem;
    scroll-margin-top: 84px;
}

/* Clear the fixed account bars, 34px each, when jumping to a heading */
body:has(#user-bar) .mn-security__post h3 {
    scroll-margin-top: 118px;
}

body:has(#admin-bar) .mn-security__post h3 {
    scroll-margin-top: 152px;
}

.mn-security__post h4 {
    font-size: 0.95rem;
    font-weight: 600;
    color: #fff;
    margin: 1.25rem 0 0.5rem;
}

.mn-security__availability {
    font-size: 0.75rem;
    font-weight: 600;
    color: #F08E20;
    margin-bottom: 0.5rem;
}

.mn-security__post b {
    color: #fff;
}

.mn-security__post code {
    color: #F4BB32;
    font-size: 0.85em;
    overflow-wrap: anywhere;
}

.mn-security__post pre {
    background: rgba(0, 0, 0, 0.30);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 8px;
    padding: 0.6rem 0.85rem;
    margin: 0.5rem 0 0.85rem;
    overflow-x: auto;
}

.mn-security__post pre code {
    overflow-wrap: normal;
}

.mn-security__post a {
    color: #F08E20;
}

.mn-security__post a:hover {
    color: #F4BB32;
}

.mn-security__meta {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0.75rem;
}

.mn-security__severity {
    font-size: 0.62rem;
    font-weight: 800;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #fff;
    background: #b91c1c;
    border-radius: 4px;
    padding: 0.1rem 0.45rem;
    line-height: 1.6;
}

.mn-security__callout {
    background: rgba(220, 38, 38, 0.12);
    border: 1px solid rgba(220, 38, 38, 0.35);
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 0;
}

@media (max-width: 575.98px) {
    .mn-security__post {
        padding: 1.5rem;
    }
}

/* ============================================================
   RESPONSIVE — MOBILE MENU
   ============================================================ */

@media (min-width: 768px) {
    .mobile-menu {
        display: none;
    }
    .mn-mobile-nav-header {
        display: none !important;
    }
}

@media (max-width: 767px) {
    #menu-nav {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100%;
        z-index: 1040;
        flex-direction: column;
        justify-content: flex-start;
        align-items: stretch;
        /* Now outside <header> stacking context — backdrop-filter works */
        background: rgba(15, 17, 20, 0.60);
        backdrop-filter: blur(32px) saturate(160%);
        -webkit-backdrop-filter: blur(32px) saturate(160%);
        gap: 0;
        padding: 0;
        overflow-y: auto;
        pointer-events: auto;
    }

    #menu-nav.expanded {
        display: flex;
        animation: mnOverlayIn 0.28s ease both;
    }

    /* Stagger nav rows + action buttons sliding up on open */
    #menu-nav.expanded .mn-navbar__item,
    #menu-nav.expanded .mn-mobile-actions {
        animation: mnRowIn 0.4s ease both;
    }
    #menu-nav.expanded .mn-navbar__item:nth-child(2) { animation-delay: 0.05s; }
    #menu-nav.expanded .mn-navbar__item:nth-child(3) { animation-delay: 0.10s; }
    #menu-nav.expanded .mn-navbar__item:nth-child(4) { animation-delay: 0.15s; }
    #menu-nav.expanded .mn-navbar__item:nth-child(5) { animation-delay: 0.20s; }
    #menu-nav.expanded .mn-mobile-actions          { animation-delay: 0.25s; }

    /* Header row — same structure as navbar */
    .mn-mobile-nav-header {
        display: block !important;
        width: 100%;
        height: 68px;
        height: calc(68px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
        flex-shrink: 0;
    }

    .mn-mobile-nav-header .mn-navbar__inner {
        height: 68px;
    }

    .mn-mobile-nav-header .mn-navbar__logo img {
        width: 105px;
    }

    /* Nav items */
    #menu-nav .mn-navbar__item {
        border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    }

    #menu-nav .mn-navbar__item > .mn-badge {
        display: inline-flex;
        margin: 0.95rem 1.5rem; /* align pill with nav links + vertical breathing room */
    }

    #menu-nav .mn-navbar__link {
        font-size: 1.05rem;
        font-weight: 500;
        padding: 1.15rem 1.5rem;
        color: rgba(255, 255, 255, 0.85);
        border-radius: 0;
        border-left: 2px solid transparent;
        transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    }

    #menu-nav .mn-navbar__link:hover {
        color: #F08E20;
        background: rgba(255, 255, 255, 0.03);
        border-left-color: #F08E20;
    }

    /* Action buttons pinned to bottom of overlay */
    .mn-mobile-actions {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
        padding: 1.5rem;
        margin-top: auto;
        border-top: 1px solid rgba(255, 255, 255, 0.06);
        border-bottom: none;
    }

    .mn-mobile-actions .mn-btn {
        width: 100%;
        justify-content: center;
        text-align: center;
        padding: 0.85rem 1rem;
    }

    /* Dropdown inside mobile overlay */
    #menu-nav .dropdown-menu {
        position: static !important;
        transform: none !important;
        background: rgba(255, 255, 255, 0.04);
        border: none;
        border-top: 1px solid rgba(255, 255, 255, 0.05);
        box-shadow: none;
        padding: 0.25rem 0;
        margin: 0;
        /* Reset desktop transition trick — use normal show/hide in mobile */
        display: none !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    #menu-nav .dropdown-menu.show {
        display: block !important;
    }

    #menu-nav .mn-dropdown__item {
        padding: 0.6rem 2rem;
        font-size: 0.9rem;
    }

    #menu-nav .mn-dropdown__header {
        padding: 0.5rem 2rem 0.25rem;
    }

    #menu-nav .mn-dropdown__divider {
        margin: 0.25rem 1.5rem;
    }
}

@media (max-width: 991px) {
    .mn-navbar__logo img {
        width: 105px;
    }
}

/* ============================================================
   HERO SECTION — Apple style
   ============================================================ */

@keyframes mnFloat {
    0% {
        transform: translateY(0);
    }
    50% {
        transform: translateY(-12px);
    }
    100% {
        transform: translateY(0);
    }
}

.mn-hero {
    position: relative;
    overflow: hidden;
    background: #0b0d0f;
    text-align: center;
    padding: 3rem 1.5rem 3rem; /* mobile default; desktop split overrides below */
}

/* Radial glow behind image, bottom center */
.mn-hero__bg-glow {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    z-index: 0;
    width: 80vw;
    max-width: 900px;
    height: 55%;
    background: radial-gradient(ellipse at 50% 100%, rgba(240, 142, 32, 0.13) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

/* Position the radial glow directly behind the floating mockup, centered perfectly */
.mn-hero__visual .mn-hero__bg-glow {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) !important;
    z-index: 0;
    width: 140%;
    height: 140%;
    background: radial-gradient(circle closest-side, rgba(240, 142, 32, 0.14) 20%, transparent 100%) !important;
    pointer-events: none;
    bottom: auto !important;
    right: auto !important;
    max-width: none !important;
}

.mn-hero__inner {
    position: relative;
    z-index: 1;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    align-items: center;
}

/* ---- Text block ---- */
.mn-hero__content {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 3rem;
}

.mn-hero__eyebrow {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F08E20;
    margin-bottom: 1.25rem;
}

.mn-hero__title {
    font-size: clamp(2.5rem, 6.5vw, 4rem);
    font-weight: 900;
    line-height: 1.0;
    letter-spacing: -0.04em;
    color: #fff;
    margin-bottom: 1.25rem;
    padding-top: 0;
}

.mn-hero__subtitle {
    font-size: clamp(.8rem, 2vw, 1rem);
    font-weight: 400;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.45);
    max-width: 720px;
    margin: 0 auto 2.25rem;
}

.mn-hero__actions {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    flex-wrap: wrap;
    justify-content: center;
}

.mn-btn--lg {
    padding: 0.75rem 2.25rem;
    font-size: 1rem;
}

.mn-hero__link {
    font-size: 1rem;
    font-weight: 500;
    color: #F08E20;
    text-decoration: none;
    transition: opacity 0.2s ease;
}

.mn-hero__link:hover {
    opacity: 0.75;
    text-decoration: none;
}


/* ---- Image visual wrapper ---- */
.mn-hero__visual {
    position: relative;
    width: 100%;
}

/* Solid colour fade overlay — same as page bg so it blends perfectly */
.mn-hero__image-glow {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 55%;
    background: linear-gradient(to bottom, transparent 0%, #0b0d0f 100%);
    z-index: 2;
    pointer-events: none;
}

/* ---- Browser window frame ---- */
.mn-browser {
    position: relative;
    z-index: 1;
    /* keep below the fade overlay */
    max-width: 900px;
    margin: 0 auto;
    background: #16181c;
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 12px 12px 0 0;
    box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55), 0 0 50px rgba(240, 142, 32, 0.06), 0 0 0 1px rgba(255,255,255,0.04);
    overflow: hidden;
}

.mn-browser__bar {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.65rem 1rem;
    background: #1d1f22;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mn-browser__dots {
    display: flex;
    gap: 6px;
    flex-shrink: 0;
}

.mn-browser__dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    display: block;
}
.mn-browser__dot--red    { background: #ff5f57; }
.mn-browser__dot--yellow { background: #febc2e; }
.mn-browser__dot--green  { background: #28c840; }

.mn-browser__url {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 6px;
    padding: 0.2rem 0.65rem;
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.35);
    max-width: 280px;
    margin: 0 auto;
    letter-spacing: 0.01em;
}

.mn-browser__lock {
    font-size: 0.6rem;
    opacity: 0.5;
}

.mn-browser__screen {
    display: block;
    line-height: 0;
}

.mn-browser__screen--zoomable {
    overflow: hidden;
}

/* For very tall screenshots (e.g. a full-page marketplace capture): keep the frame a
   normal landscape window and let visitors scroll inside it to see the whole page. */
.mn-browser__screen--scroll-tall {
    aspect-ratio: 16 / 11;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255, 255, 255, 0.15) transparent;
}

.mn-browser__screen--scroll-tall .mn-browser__img {
    width: 100%;
    height: auto;
    display: block;
}

.mn-browser__screen--scroll-tall::-webkit-scrollbar {
    width: 4px;
}

.mn-browser__screen--scroll-tall::-webkit-scrollbar-track {
    background: transparent;
}

.mn-browser__screen--scroll-tall::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
}

.mn-browser__screen--scroll-tall::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.35);
}

.mn-browser__screen--zoomable .mn-browser__img {
    /* Was 0.9s — a near-1-second ease made the whole mockup feel like it was
       slowly melting/warping on hover instead of a crisp, premium lift. */
    transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.2s ease;
}

@media (min-width: 992px) {
    .mn-browser--hero:hover .mn-browser__screen--zoomable .mn-browser__img {
        transform: scale(1.02);
    }
}

/* Product icon sticker overlaid on browser mockup */
.mn-product-sticker-wrap {
    position: relative;
}
.mn-product-sticker {
    position: absolute;
    top: 62%;
    left: -52px;
    transform: translateY(-50%);
    width: 104px;
    height: 104px;
    filter: drop-shadow(0 8px 28px rgba(0,0,0,0.75)) drop-shadow(0 2px 8px rgba(0,0,0,0.50));
    z-index: 10;
    transition: transform 0.3s ease, filter 0.3s ease;
    pointer-events: auto;
}
@media (min-width: 992px) {
    .mn-product-sticker:hover {
        transform: translateY(-50%) scale(1.08);
        filter: drop-shadow(0 12px 36px rgba(0,0,0,0.80)) drop-shadow(0 3px 10px rgba(0,0,0,0.55));
    }
}
@media (max-width: 767px) {
    .mn-product-sticker {
        left: 16px;
        top: auto;
        bottom: 16px;
        transform: none;
        width: 64px;
        height: 64px;
    }
    .mn-product-sticker:hover {
        transform: scale(1.08);
    }
}

.mn-browser__img {
    width: 100%;
    height: auto;
    display: block;
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
    .mn-hero {
        padding: 5rem 1rem 0;
    }

    .mn-hero__title {
        letter-spacing: -0.03em;
    }

    .mn-hero__actions {
        flex-direction: column;
        gap: 1rem;
    }
}

@media (min-width: 992px) {
    .mn-hero {
        padding: 4rem 1rem 3rem;
    }

    .mn-hero__inner {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        max-width: 1200px;
        gap: 3.5rem;
    }

    .mn-hero__content {
        flex: 0 0 47%;
        max-width: 47%;
        align-items: flex-start;
        text-align: left;
        margin-bottom: 0;
    }

    .mn-hero__title {
        font-size: clamp(2.8rem, 3.5vw, 3.8rem);
        text-align: left;
    }

    .mn-hero__subtitle {
        text-align: left;
        margin: 0 0 2.5rem 0;
    }

    .mn-hero__actions {
        justify-content: flex-start;
    }

    .mn-hero__visual {
        flex: 0 0 49%;
        max-width: 49%;
    }

    .mn-browser {
        border-radius: 12px;
    }

    .mn-browser--float {
        animation: mnFloat 6s ease-in-out infinite;
    }

    .mn-hero__image-glow {
        display: none;
    }
}

/* ============================================================
   SECTION BASE
   ============================================================ */

.mn-section {
    position: relative;
    overflow: hidden;
    padding: 5rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.05);
    background: #0b0d0f;
}

/* First section after hero */
.mn-hero + .mn-section {
    border-top: none;
}

.mn-section--alt {
    background: rgba(255, 255, 255, 0.025);
}

.mn-section__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F08E20;
    text-align: center;
    margin-bottom: 0.75rem;
}

.mn-section__title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #fff;
    text-align: center;
    margin-bottom: 3rem;
    padding-top: 0;
}

/* When a subtitle follows the title, reduce bottom gap */
.mn-section__title--has-sub {
    margin-bottom: 1.25rem;
}

.mn-section__subtitle {
    font-size: 1.1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.55);
    max-width: 600px;
    margin: 0 auto;
}

/* ============================================================
   PRODUCT CTA SECTION (floating device images)
   ============================================================ */

.mn-product-cta {
    overflow: hidden;
    min-height: 300px;
}

.mn-product-device {
    position: absolute;
    pointer-events: none;
}

.mn-product-device--one {
    opacity: 0.10;
    right: -2%;
    bottom: -55%;
    transform: rotate(5deg);
}

.mn-product-device--two {
    opacity: 0.10;
    left: -5%;
    top: -35%;
    transform: rotate(-27deg);
}

/* ============================================================
   FEATURES GRID (packed with amazing features)
   ============================================================ */

.mn-features {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
    margin-top: 1.5rem;
}

/* Cap at 4 columns on wide screens (auto-fill handles fewer below) */
@media (min-width: 1200px) {
    .mn-features {
        grid-template-columns: repeat(4, 1fr);
    }
}

.mn-feature {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.65rem 1.4rem 0.65rem 0.65rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: pointer;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mn-feature:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(240, 142, 32, 0.35);
    box-shadow: 0 8px 24px rgba(240, 142, 32, 0.08);
    transform: translateY(-2px);
}

.mn-feature:focus-visible {
    outline: 2px solid rgba(240, 142, 32, 0.6);
    outline-offset: 2px;
}

/* Desktop opens the popover on hover/focus, not click — the pointer cursor is misleading there */
@media (min-width: 992px) {
    .mn-feature {
        cursor: default;
    }
}

.mn-feature__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F08E20;
    font-size: 1.15rem;
    border-radius: 50%;
    background: rgba(240, 142, 32, 0.10);
    border: 1px solid rgba(240, 142, 32, 0.18);
}
.mn-features--pp .mn-feature__icon { font-size: 1.2rem; }

.mn-feature__text {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.mn-feature__name,
.mn-feature__title {
    font-size: 0.88rem;
    font-weight: 600;
    color: #fff;
    margin: 0 0 0.1rem;
    line-height: 1.1;
}

.mn-feature__desc {
    font-size: 0.72rem;
    color: rgba(255, 255, 255, 0.45);
    margin: 0;
    line-height: 1.2;
}

/* Mobile: 2-up compact tiles instead of full-width pills that eat vertical space */
@media (max-width: 575.98px) {
    .mn-features {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.6rem;
        margin-top: 1.25rem;
    }

    .mn-feature {
        padding: 0.6rem 0.75rem;
        gap: 0.55rem;
        border-radius: 16px;
    }

    .mn-feature__icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
        font-size: 1rem;
    }

    .mn-feature__name,
    .mn-feature__title {
        font-size: 0.78rem;
    }

    .mn-feature__desc {
        font-size: 0.66rem;
        line-height: 1.25;
    }
}

/* Feature info modal — mobile only (small centered popup, no desktop anchoring) */
.mn-feature-modal .modal-dialog {
    max-width: 360px;
    margin-left: auto;
    margin-right: auto;
}

.mn-feature-modal .modal-content {
    background: rgba(28, 30, 34, 0.88);
    backdrop-filter: blur(16px);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.22);
}

.mn-feature-modal.fade .modal-dialog {
    transform: scale(0.96) translateY(6px);
    transition: transform 0.2s ease-out, opacity 0.2s ease-out;
}

.mn-feature-modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

.mn-feature-modal ~ .modal-backdrop {
    --bs-backdrop-opacity: 0.35;
}

.mn-feature-modal .modal-header {
    align-items: center;
    gap: 0.75rem;
    border-bottom: none;
    padding: 1.25rem 1.25rem 0.5rem;
}

.mn-feature-modal .modal-header .modal-title {
    flex: 1;
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
}

.mn-feature-modal .btn-close {
    opacity: 0.4;
}

.mn-feature-modal__icon {
    width: 36px;
    height: 36px;
    min-width: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F08E20;
    font-size: 1.05rem;
    border-radius: 50%;
    background: rgba(240, 142, 32, 0.10);
    border: 1px solid rgba(240, 142, 32, 0.18);
}

.mn-feature-modal .modal-body {
    padding: 0.25rem 1.25rem 1.5rem;
}

.mn-feature-modal .modal-body p {
    color: rgba(255, 255, 255, 0.55);
    font-size: 0.9rem;
    line-height: 1.65;
    margin: 0;
}

/* Feature info popover — desktop only, anchored to the tile via Popper (no backdrop/scroll-lock).
   No title/icon: the tile it points to already shows both, so the popover is description-only. */
.popover.mn-feature-popover {
    --bs-popover-max-width: 280px;
    --bs-popover-bg: rgba(28, 30, 34, 0.92);
    --bs-popover-border-color: rgba(255, 255, 255, 0.08);
    --bs-popover-border-radius: 16px;
    --bs-popover-body-color: rgba(255, 255, 255, 0.6);
    backdrop-filter: blur(16px);
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.25);
}

.mn-feature-popover .popover-body {
    padding: 0.9rem 1rem;
}

.mn-feature-popover__desc {
    margin: 0;
    font-size: 0.85rem;
    line-height: 1.55;
}

/* ============================================================
   INFINITE SCROLLING APP STORE GRID
   ============================================================ */

.mn-scroller-wrap {
    width: 100vw;
    margin-left: calc(-50vw + 50%);
    overflow: hidden;
    position: relative;
    padding: 1.5rem 0;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}

/* Gradients on side to create soft fade out */
.mn-scroller-wrap::before,
.mn-scroller-wrap::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 12%;
    min-width: 80px;
    z-index: 5;
    pointer-events: none;
}

.mn-scroller-wrap::before {
    left: 0;
    background: linear-gradient(to right, #0b0d0f 15%, transparent 100%);
}

.mn-scroller-wrap::after {
    right: 0;
    background: linear-gradient(to left, #0b0d0f 15%, transparent 100%);
}

/* The marquee rail */
.mn-scroller {
    display: flex;
    overflow: hidden;
    user-select: none;
    width: 100%;
}

.mn-scroller__inner {
    display: flex;
    flex-shrink: 0;
    gap: 1rem;
    padding: 0.2rem 1rem 0.2rem 0;
    width: max-content;
}

/* Animation declarations */
.mn-scroller[data-direction="left"] .mn-scroller__inner {
    animation: marqueeLeft 50s linear infinite;
}

.mn-scroller[data-direction="right"] .mn-scroller__inner {
    animation: marqueeRight 50s linear infinite;
}

/* Hover behaviors to pause on focus */
.mn-scroller:hover .mn-scroller__inner {
    animation-play-state: paused;
}

/* App pill styling */
.mn-app-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.75rem;
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 9999px;
    padding: 0.55rem 1.4rem 0.55rem 0.65rem;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: default;
    user-select: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.mn-app-pill:hover {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(240, 142, 32, 0.35);
    box-shadow: 0 8px 24px rgba(240, 142, 32, 0.08);
    transform: translateY(-2px);
}

.mn-app-pill__img {
    box-sizing: border-box;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

.mn-app-pill__name {
    font-size: 0.88rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
    letter-spacing: -0.01em;
}

/* Keyframes */
@keyframes marqueeLeft {
    0% {
        transform: translateX(0);
    }
    100% {
        transform: translateX(-100%);
    }
}

@keyframes marqueeRight {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0);
    }
}

/* ============================================================
   SPLIT SECTIONS (marketplace, interface, wallets)
   ============================================================ */

/* Left-align the eyebrow in split sections */
.mn-eyebrow--left {
    text-align: left;
}

.mn-split__title {
    font-size: clamp(1.75rem, 3.5vw, 2.75rem);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.1;
    color: #fff;
    margin-bottom: 1.1rem;
}

.mn-split__body {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.75rem;
}

/* Tag pills with orange checkmark */
.mn-tags {
    list-style: none;
    padding: 0;
    margin: 0 0 2rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.6rem;
}

.mn-tag {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.35rem 0.85rem 0.35rem 0.6rem;
    background: rgba(240, 142, 32, 0.07);
    border: 1px solid rgba(240, 142, 32, 0.20);
    border-radius: 9999px;
    font-size: 0.82rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
}

.mn-tag__check {
    width: 14px;
    height: 14px;
    fill: #F08E20;
    flex-shrink: 0;
}

.mn-tag__icon {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}

/* Image column with ambient glow */
.mn-split__visual {
    position: relative;
}

.mn-split__glow {
    position: absolute;
    width: 70%;
    height: 70%;
    top: 15%;
    left: 15%;
    background: radial-gradient(ellipse, rgba(240, 142, 32, 0.12) 0%, transparent 70%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.mn-split__img {
    position: relative;
    z-index: 1;
    width: 100%;
    border-radius: 16px;
}

/* Image comparison slider */
.mn-cs {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 0;
    cursor: col-resize;
    user-select: none;
    -webkit-user-select: none;
    aspect-ratio: 384 / 221;
}

.mn-cs__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    image-rendering: auto;
}

.mn-cs__img--light {
    clip-path: inset(0 50% 0 0);
}

.mn-cs__divider {
    position: absolute;
    top: 0;
    left: 50%;
    width: 2px;
    height: 100%;
    background: #F08E20;
    box-shadow: 0 0 18px rgba(240,142,32,0.7), 0 0 4px rgba(240,142,32,1);
    transform: translateX(-50%);
    pointer-events: none;
}

.mn-cs__handle {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: #4a2208;
    border: 1px solid rgba(240,142,32,0.35);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #F08E20;
    font-size: 1.1rem;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.06),
        0 0 24px rgba(240,142,32,0.35),
        0 4px 12px rgba(0,0,0,0.5);
    pointer-events: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.mn-cs:active .mn-cs__handle,
.mn-cs:hover .mn-cs__handle {
    border-color: rgba(240,142,32,0.60);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.10),
        0 0 32px rgba(240,142,32,0.50),
        0 4px 16px rgba(0,0,0,0.5);
}

.mn-cs__label {
    position: absolute;
    top: 0.75rem;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.75);
    background: rgba(0,0,0,0.35);
    backdrop-filter: blur(6px);
    border-radius: 9999px;
    padding: 0.2rem 0.65rem;
    pointer-events: none;
    transition: opacity 0.2s ease;
}

.mn-cs__label--left  { left: 0.75rem; }
.mn-cs__label--right { right: 0.75rem; }

/* Sub-heading inside a split row (e.g. "Easy to Use", "Customize") */
.mn-split__subtitle {
    font-size: 1.35rem;
    font-weight: 700;
    letter-spacing: -0.02em;
    color: #fff;
    margin-bottom: 0.75rem;
}

/* Vertical spacing between split rows within a section */
.mn-split-row {
    margin-top: 4rem;
}

/* ============================================================
   FEATURE CARDS GRID
   ============================================================ */

.mn-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

.mn-card {
    position: relative;
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 24px;
    padding: 2.25rem 2.25rem 2.25rem;
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.3s ease;
    overflow: hidden;
}

/* Subtle corner glow on hover */
.mn-card::before {
    content: '';
    position: absolute;
    top: -60px;
    left: -60px;
    width: 180px;
    height: 180px;
    background: rgba(240, 142, 32, 0.07);
    filter: blur(50px);
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.4s ease;
    pointer-events: none;
}

.mn-card:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.13);
    transform: translateY(-2px);
}

.mn-card:hover::before {
    opacity: 1;
}

.mn-card__icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(240, 142, 32, 0.10);
    border: 1px solid rgba(240, 142, 32, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.5rem;
    transition: background 0.3s ease, border-color 0.3s ease;
}

.mn-card:hover .mn-card__icon {
    background: rgba(240, 142, 32, 0.18);
    border-color: rgba(240, 142, 32, 0.35);
}

.mn-card__icon svg {
    width: 22px;
    height: 22px;
    fill: #F08E20;
}

.mn-card__title {
    font-size: 1.05rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.65rem;
    letter-spacing: -0.015em;
}

.mn-card__body {
    font-size: 0.875rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.42);
    line-height: 1.75;
    margin-bottom: 0;
}

@media (max-width: 767px) {
    .mn-cards {
        grid-template-columns: 1fr;
    }

    .mn-section {
        padding: 3.5rem 0;
    }

    .mn-split-row {
        margin-top: 2rem;
    }
}

@media (min-width: 768px) and (max-width: 1023px) {
    /* Auto-fill handled */
}

/* ============================================================
   PRODUCT CARDS (Products & Hardware section)
   ============================================================ */

.mn-product-cards {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
    margin-top: 3rem;
    max-width: 860px;
    margin-left: auto;
    margin-right: auto;
}

.mn-product-card {
    background: rgba(255, 255, 255, 0.025);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 24px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: border-color 0.3s ease, background 0.3s ease;
}

.mn-product-card:hover {
    background: rgba(255, 255, 255, 0.045);
    border-color: rgba(255, 255, 255, 0.15);
}

.mn-product-card__img-wrap {
    width: 100%;
    background: rgba(255, 255, 255, 0.04);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    overflow: hidden;
}

.mn-product-card__img {
    width: 100%;
    display: block;
    transition: transform 0.4s ease;
}

.mn-product-card:hover .mn-product-card__img {
    transform: scale(1.03);
}

.mn-product-card__body {
    padding: 1.75rem;
    display: flex;
    flex-direction: column;
    flex: 1;
}

.mn-product-card__name {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.6rem;
    letter-spacing: -0.01em;
}

.mn-product-card__desc {
    font-size: 0.9rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.50);
    margin-bottom: 1.25rem;
}

.mn-product-card__specs {
    list-style: none;
    padding: 0;
    margin: 0 0 1.5rem;
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.mn-product-card__specs li {
    font-size: 0.82rem;
    color: rgba(255, 255, 255, 0.60);
    padding: 0.55rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.mn-product-card__link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #F08E20;
    text-decoration: none;
    margin-top: auto;
    transition: gap 0.2s ease, color 0.2s ease;
}

.mn-product-card__link:hover {
    color: #F4BB32;
    gap: 0.65rem;
}

.mn-products__footnote {
    text-align: center;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.40);
    margin-top: 2.5rem;
}

.mn-products__footnote a {
    color: rgba(255, 255, 255, 0.70);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.mn-products__footnote a:hover {
    color: #fff;
}

/* ── Products hub: compact horizontal cards (/products/) ─────
   Scoped to .mn-product-cards--rows so the homepage cards are
   unaffected. Desktop only; mobile keeps the shared row rules.
   Single-product categories render as one wide banner row;
   multi-product categories (e.g. Software) sit side-by-side. */
@media (min-width: 768px) {
    .mn-product-cards--rows {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
        gap: 1.25rem;
        max-width: none;
        margin: 1.75rem 0 0;
    }
    /* Every tile is the same fixed width and left-aligned; multi-product
       categories (e.g. Software) simply sit side-by-side, wrapping as needed. */
    .mn-product-cards--rows .mn-product-card {
        flex: 1 1 480px;
        max-width: 480px;
        flex-direction: row;
        align-items: stretch;
    }
    .mn-product-cards--rows .mn-product-card__img-wrap {
        width: 168px;
        min-width: 168px;
        border-bottom: none;
        border-right: 1px solid rgba(255, 255, 255, 0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.85rem;
        background: rgba(255, 255, 255, 0.03);
    }
    .mn-product-cards--rows .mn-product-card__img {
        width: 130px;
        height: 130px;
        object-fit: contain;
        filter: drop-shadow(0 8px 20px rgba(0, 0, 0, 0.45));
    }
    .mn-product-cards--rows .mn-product-card__body {
        padding: 1.25rem 1.6rem;
    }
    .mn-product-cards--rows .mn-product-card__desc {
        margin-bottom: 1rem;
    }
    .mn-product-cards--rows .mn-product-card__specs {
        margin-bottom: 1rem;
    }
}

@media (max-width: 767px) {
    .mn-product-cards {
        grid-template-columns: 1fr;
        gap: 1rem;
        margin-top: 2rem;
    }
    .mn-product-card {
        flex-direction: row;
        border-radius: 18px;
    }
    .mn-product-card__img-wrap {
        width: 120px;
        min-width: 120px;
        border-bottom: none;
        border-right: 1px solid rgba(255,255,255,0.06);
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 0.75rem;
    }
    .mn-product-card__img {
        width: 84px !important;
        height: 84px !important;
        padding: 0 !important;
    }
    .mn-product-card__body {
        padding: 1rem 1.1rem;
    }
    .mn-product-card__name {
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }
    .mn-product-card__desc {
        font-size: 0.82rem;
        margin-bottom: 0.65rem;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }
    .mn-product-card__specs {
        display: none;
    }
}

/* ============================================================
   VIDEO SECTION
   ============================================================ */

.mn-video {
    position: relative;
    margin-top: 2.5rem;
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}

.mn-video__glow {
    position: absolute;
    inset: -20%;
    background: radial-gradient(ellipse, rgba(240, 142, 32, 0.10) 0%, transparent 65%);
    filter: blur(40px);
    pointer-events: none;
    z-index: 0;
}

.mn-video__frame {
    position: relative;
    z-index: 1;
    border-radius: 20px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.55);
    aspect-ratio: 16 / 9;
}

.mn-video__frame iframe {
    width: 100%;
    height: 100%;
    display: block;
}

/* ============================================================
   FOOTER
   ============================================================ */

.mn-footer {
    background: #0b0d0f;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    padding: 4rem 0 2.5rem;
}

.mn-footer__grid {
    display: flex;
    align-items: flex-start;
    gap: 3rem;
    padding-bottom: 3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

/* Brand column — shrinks to content width */
.mn-footer__brand {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mn-footer__logo img {
    opacity: 0.80;
    transition: opacity 0.2s ease;
}

.mn-footer__logo:hover img {
    opacity: 1;
}

/* Social icons */
.mn-footer__social {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.5rem;
}

.mn-footer__social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 8px;
    border: 1px solid rgba(255, 255, 255, 0.10);
    background: rgba(255, 255, 255, 0.04);
    color: rgba(255, 255, 255, 0.40);
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
    text-decoration: none;
}

.mn-footer__social-link svg {
    width: 15px;
    height: 15px;
}

.mn-footer__social-link:hover {
    color: #fff;
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.08);
}

/* Link columns — grow equally to fill remaining space */
.mn-footer__col {
    flex: 1;
    min-width: 0;
}

.mn-footer__heading {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.30);
    margin-bottom: 1rem;
}

.mn-footer__links {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mn-footer__link {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.55);
    text-decoration: none;
    transition: color 0.2s ease;
    white-space: nowrap;
}

.mn-footer__link:hover {
    color: #fff;
}

/* Bottom bar */
.mn-footer__bottom {
    padding-top: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.mn-footer__copy {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.22);
    margin: 0;
}

/* Footer — tablet */
@media (max-width: 991px) {
    .mn-footer__grid {
        flex-wrap: wrap;
        gap: 2rem;
    }
    .mn-footer__brand {
        flex: 0 0 100%;
    }
    .mn-footer__col {
        flex: 1 1 calc(50% - 1rem);
    }
}

/* Footer — mobile */
@media (max-width: 575px) {
    .mn-footer__grid {
        gap: 1.5rem;
    }
    .mn-footer__col {
        flex: 1 1 calc(50% - 0.75rem);
    }
}

/* Social icon (footer / misc) */
.navbar-social-icon {
    color: #999999;
    margin-right: 10px;
}

a:hover .navbar-social-icon {
    color: #DDDDDD;
}

.btn-orange {
    background: orange;
    border-color: rgb(247, 160, 0);
}

.btn-orange:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background-color: rgb(231, 150, 0);
    border-color: rgb(228, 148, 0);
}

.btn-green {
    background: rgb(0, 180, 0) !important;
    border-color: rgb(0, 170, 0) !important;
}

.btn-green:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background: rgb(0, 140, 0) !important;
    border-color: rgb(0, 130, 0) !important;
}

.btn-gray {
    background: #888888 !important;
    border-color: #777777 !important;
}

.btn-gray:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active,
.open>.dropdown-toggle.btn-primary {
    background: #666666 !important;
    border-color: #555555 !important;
}

.btn-small {
    font-size: .6em !important;
}

/* .main-page-heading {
    background-color: rgb(239, 239, 239);
    padding-top: 20px;
    padding-bottom: 20px;
    margin-bottom: 30px;
    text-align: center;
} */

.app-icon {
    width: 50%;
    border-radius: 5px;
}

.device-image {
    border-color: #000000;
    border-radius: 20px;
    border-style: solid;
    border-width: 2px;
    box-shadow: 10px 10px 8px #AAAAAA;
}

.screenshot-image {
    border-color: #000000;
    border-radius: 4px;
    border-style: solid;
    border-width: 2px;
    box-shadow: 10px 10px 8px #AAAAAA;
    max-width: 100%;
    height: auto;
    display: block;
}

.integration-image {
    border-radius: 20px;
    width: 70%;
}

.feature-row {
    margin-bottom: 2rem;
}

.feature-row-odd {
    text-align: left;
}

.feature-row-even {
    text-align: right;
}

.terminal {
    margin-left: 40px;
    font-size: 12px;
    font-family: "Courier New", Courier, monospace;
}

.terminal_input {
    background-color: rgb(85, 255, 85);
}

.hidden {
    display: none;
}

.icon {
    display: block;
    margin: auto;
    width: 32px;
}

.bottom_center_alert_popup {
    display: none;
    position: fixed;
    color: #333333;
    border: 2px solid #333333;
    background-color: #DDDDDD;
    width: 800px;
    left: 50%;
    margin-left: -400px;
    border-radius: 10px;
    text-align: center;
    font-size: 14px;
    padding: 20px;
    bottom: 20px;
}

/* Admin pages — scoped to .admin_container (only exists on /admin/* pages) */

/* Dark tables */
.admin_container table {
    background: rgba(255,255,255,0.03);
    border-color: rgba(255,255,255,0.12);
}
.admin_container th {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.12) !important;
    color: #e4e4e7 !important;
    font-weight: 600;
}
.admin_container td {
    border-color: rgba(255,255,255,0.08) !important;
    color: #e4e4e7;
}
.admin_container .table-hover > tbody > tr:hover > * {
    background-color: rgba(255,255,255,0.05);
    color: #e4e4e7;
}

/* Dark form inputs */
.admin_container input[type="text"],
.admin_container input[type="password"],
.admin_container input[type="number"],
.admin_container input[type="email"],
.admin_container select,
.admin_container textarea {
    background: rgba(255,255,255,0.05);
    color: #e4e4e7;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 6px;
    padding: 4px 8px;
}
.admin_container input:focus,
.admin_container select:focus,
.admin_container textarea:focus {
    border-color: rgba(255,255,255,0.35);
    outline: none;
    box-shadow: none;
}

/* Links and icons: orange replaces Bootstrap blue */
.admin_container a {
    color: #F08E20;
}
.admin_container a:hover {
    color: #F4BB32;
}

/* Orange primary action buttons */
.admin_container .btn-primary,
.admin_container input[type="submit"] {
    background: #F08E20;
    border-color: #F08E20;
    color: #000;
    border-radius: 6px;
}
.admin_container .btn-primary:hover,
.admin_container input[type="submit"]:hover {
    background: #F4BB32;
    border-color: #F4BB32;
    color: #000;
}

/* HR and headings */
.admin_container hr {
    border-color: rgba(255,255,255,0.12);
    opacity: 1;
}
.admin_container h1 {
    font-size: 1.8rem;
    font-weight: 700;
    color: #ffffff;
}
.admin_container h2,
.admin_container h3,
.admin_container h4,
.admin_container h5,
.admin_container h6,
.admin_container p,
.admin_container label {
    color: #e4e4e7;
}

.admin_heading {
    margin: auto;
}

.admin_container {
    margin: auto;
    padding: 10px;
    text-align: center;
}

.admin_title_hr {
    width: 80%;
    margin: auto;
    margin-bottom: 20px;
}

/* Devices horizontal top nav (All Devices / Premium+ Devices / Device Notifications / Device API) */
.admin-devices-topnav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    max-width: 700px;
    margin: 0 auto 1.5rem;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 0.5rem;
}
.admin-devices-topnav__link {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.55rem 1.1rem;
    border-radius: 999px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.55);
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}
.admin-devices-topnav__link:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.90);
    text-decoration: none;
}
.admin-devices-topnav__link.active {
    background: rgba(240,142,32,0.12);
    color: #F08E20;
}
.admin-devices-topnav__link i { width: 16px; text-align: center; }
@media (max-width: 768px) {
    .admin-devices-topnav {
        max-width: 100%;
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        scrollbar-width: none;
    }
    .admin-devices-topnav::-webkit-scrollbar { display: none; }
    .admin-devices-topnav__link { flex-shrink: 0; }
}

th {
    text-align: center;
}

.username_avatar {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    color: white;
    line-height: 28px;
    text-align: center;
    background: orange;
    margin-right: 10px;
}

.username_avatar_mynode {
    display: inline-block;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    font-size: 14px;
    color: white;
    line-height: 28px;
    text-align: center;
    margin-right: 10px;
    background-color: white;
    background-image: "/images/vertical_lightning.png";
}

.ticket_info_avatar {
    background: #CCCCFF !important;
}

.ticket_action_button_heading {
    width: 100%;
    display: block;
    margin-bottom: 70px;
}

.ticket_action_button_heading_left {
    float: left;
}

.ticket_action_button_heading_right {
    float: right;
}


/* Added */

.title__slogan {
    font-size: 1.25rem;
    line-height: initial;
    font-weight: bold;
    margin-bottom: .75rem;
}

main {
    margin-top: 68px;
}

/* Bootstrap overrides */
h1 {
    font-weight: bold;
    padding-top: 15px;
}


.jumbotron {
    background-color: #fffdf5;
    overflow: hidden;

}

.feature-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 0.75rem;
}

.feature-icon svg {
    width: 2rem;
    height: 2rem;
    fill: #fff;
}

.footer-logo {
    width: 100px;
    filter: grayscale(1)
}

.spotlight {
    padding-top: 3rem;
    padding-bottom: 3rem;

}

.spotlight.spotlight__alt--one {
    background-color: #f1f1f1;
}

.spotlight.spotlight__alt--two {
    background-color: #ffc107;
}

.embed-responsive-item {
    width: 100%;
    display: flex;
    aspect-ratio: 16 / 9;
    max-width: 1000px;
    margin: auto;
}

.product-device {
    opacity: .3;
    position: absolute;
    right: -5%;
    bottom: -40%;
    width: 430px;
    height: 430px;
    transform: rotate(5deg);
}

.product-device-2 {
    opacity: .3;
    position: absolute;
    right: auto;
    bottom: 0;
    width: 512px;
    height: 499px;
    transform: rotate(333deg);
    top: -35%;
    left: -10%;

}

.features-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.features-list .checkmark {
    width: 1.5rem;
    height: 1.5rem;
    fill: green;
}

.features-list .wallet {
    width: 1.5rem;
    height: 1.5rem;
    fill: #c2c2c2;
}

.jumbotron {
    background-image: url("../images/digital.png");
    background-repeat: no-repeat;
    background-position: left 10%;
    background-attachment: fixed;
}


/* mobile-menu rules moved to new navbar section above */


/* logged-in-bar, user-bar, admin-bar rules moved to new navbar section above */

/* Responsive */
@media (max-width: 575px) {
    .screenshot-image {
        margin-bottom: 2rem;
    }

    h1 {
        line-height: 1.125;
    }
}

@media (min-width: 576px) {
    .screenshot-image {
        margin-bottom: 2rem;
    }
}

@media (max-width: 575px) {
    .jumbotron-image {
        max-height: 15vh;
    }
}

@media screen and (min-width: 576px) and (max-width: 767px) {
    .jumbotron-image {
        max-height: 25vh;
    }
}

/* mobile menu media queries moved to new navbar section above */

@media screen and (max-width: 991px) {
    .navbar-logo {
        width: 120px;
    }
}

@media screen and (max-width: 991px) {
    .navbar-logo {
        width: 120px;
    }
}

@media screen and (min-width: 768px) and (max-width: 991px) {
    .jumbotron-image {
        max-height: 30vh;
    }

    .product-device {
        right: -17%;
    }

    .product-device-2 {
        left: -20%;
    }
}

.banner {
    background-image: url(../images/price-tag-3-line.png);
    background-repeat: repeat;
    background-attachment: fixed;
}

@media (min-width: 992px) {
    .jumbotron {
        height: calc(110vh - 72px);
    }
}

.order_now_image {
    width: 60%;
    margin: auto;
}
.sale_banner {
    background-color: red;
    color: white;
    font-weight: bold;
}

.checkout-sale-banner {
    background: linear-gradient(135deg, rgba(240, 142, 32, 0.08) 0%, rgba(240, 142, 32, 0.03) 100%) !important;
    border: 1px solid rgba(240, 142, 32, 0.25) !important;
    color: rgba(255, 255, 255, 0.85) !important;
    box-shadow: 0 4px 20px rgba(240, 142, 32, 0.05) !important;
    padding: 0.9rem 1.25rem !important;
    border-radius: 8px !important;
    font-size: 0.9rem !important;
    transition: all 0.2s ease-in-out !important;
    text-align: center !important;
}
.checkout-sale-banner:hover {
    transform: scale(1.005) !important;
    border-color: rgba(240, 142, 32, 0.35) !important;
    box-shadow: 0 6px 25px rgba(240, 142, 32, 0.08) !important;
}
.checkout-sale-banner-heading {
    color: #F08E20 !important;
    font-weight: 700 !important;
    font-size: 1.1rem !important;
}
.checkout-sale-banner b {
    color: #F08E20 !important;
    font-weight: 700 !important;
}

.checkout-product-image {
    width: 100%;
    margin: auto;
    transition: all 0.2s ease-in-out;
}
.checkout-product-image:hover {
    transform: scale(1.02);
    transition: all 0.2s ease-in-out;
}

/* ============================================================
   PRODUCT PAGE — Model Two
   ============================================================ */

/* 2-col hero section */
.mn-product-hero-section {
    padding-top: 5rem;
    padding-bottom: 5rem;
    border-top: none;
}

@media (max-width: 991.98px) {
    .mn-product-hero-section {
        padding-top: 3.5rem;
        padding-bottom: 3.5rem;
    }
}

/* Compact variant — text-only heroes (Download, Order Now, Support, Compare, etc.) */
.mn-product-hero-section--compact {
    padding-top: 1.5rem;
    padding-bottom: 1.0rem;
}

/* Marketplace only: the app grid is the point of the page, so the hero gives up
   what it can to pull the first row of cards closer to the fold. */
.mn-product-hero-section--tight {
    padding-top: 1rem;
    padding-bottom: 0.5rem;
}
.mn-product-hero-section--compact > .container > .mn-section__eyebrow {
    margin-bottom: 0.0rem;
}

.mn-product-hero-section > .container {
    position: relative;
    z-index: 1;
}

.mn-product-hero__title {
    font-size: clamp(2.5rem, 5vw, 4.5rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #fff;
    margin-bottom: 1.25rem;
}

.mn-product-hero__subtitle {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.55);
    line-height: 1.7;
    margin-bottom: 0.5rem;
}

.mn-product-hero__img-wrap {
    position: relative;
    z-index: 1;
    overflow: hidden;
    border-radius: 12px;
}

.mn-product-hero__img {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.55s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

@media (min-width: 992px) {
    .mn-product-hero__img-wrap:hover .mn-product-hero__img {
        transform: scale(1.04);
    }
}

/* Price display */
.mn-product-price {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.mn-product-price__current {
    font-size: 2.5rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
}

.mn-product-price__old {
    font-size: 1.5rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.35);
    text-decoration: line-through;
}

.mn-product-price__badge {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    background: #F08E20;
    color: #000;
    padding: 0.2rem 0.6rem;
    border-radius: 999px;
}

.mn-product-ships {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.35);
    margin-top: 0.75rem;
    margin-bottom: 0;
}

/* Specs grid */
.mn-specs-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 16px;
    overflow: hidden;
}

.mn-spec {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: rgba(255, 255, 255, 0.028);
}

.mn-spec__icon-wrap {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: 14px;
    background: rgba(240, 142, 32, 0.10);
    border: 1px solid rgba(240, 142, 32, 0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.32rem;
    color: #F08E20;
}

.mn-spec--highlight .mn-spec__icon-wrap {
    background: rgba(240, 142, 32, 0.18);
    border-color: rgba(240, 142, 32, 0.35);
}

.mn-spec__content {
    display: flex;
    flex-direction: column;
    gap: 0.2rem;
}

.mn-spec--highlight {
    background: rgba(240, 142, 32, 0.05);
    border-top: 1px solid rgba(240, 142, 32, 0.12);
}

.mn-spec__label {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
}

.mn-spec__value {
    font-size: 0.95rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.85);
}

.mn-spec--highlight .mn-spec__value {
    color: #F08E20;
}

/* Gallery */
.mn-gallery {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
}

.mn-gallery__img {
    width: 100%;
    height: auto;
    border-radius: 12px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    background: rgba(255, 255, 255, 0.04);
    transition: border-color 0.3s ease;
    cursor: pointer;
}

.mn-gallery__img:hover {
    border-color: rgba(255, 255, 255, 0.20);
}

/* Web Interface — pill tabs + fixed browser frame */
.mn-ui-tabs {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    flex-wrap: wrap;
    margin-bottom: 1.5rem;
}

.mn-ui-tab {
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 9999px;
    color: rgba(255,255,255,0.55);
    font-size: 0.85rem;
    font-weight: 500;
    padding: 0.45rem 1.25rem;
    cursor: pointer;
    transition: all 0.2s ease;
    font-family: inherit;
}

.mn-ui-tab:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.22);
    color: rgba(255,255,255,0.85);
}

.mn-ui-tab--active {
    background: rgba(240,142,32,0.15);
    border-color: rgba(240,142,32,0.45);
    color: #F08E20;
}

.mn-browser__screen--fixed {
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.mn-browser__screen--fixed::-webkit-scrollbar {
    width: 4px;
}

.mn-browser__screen--fixed::-webkit-scrollbar-track {
    background: transparent;
}

.mn-browser__screen--fixed::-webkit-scrollbar-thumb {
    background: rgba(255,255,255,0.18);
    border-radius: 9999px;
}

.mn-browser__screen--fixed::-webkit-scrollbar-thumb:hover {
    background: rgba(255,255,255,0.35);
}

/* Theme toggle button — lives in the browser mockup bar */
.mn-theme-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.12);
    border-radius: 50%;
    color: rgba(255,255,255,0.55);
    font-size: 0.65rem;
    cursor: pointer;
    transition: all 0.2s ease;
    flex-shrink: 0;
    margin-left: 0.5rem;
}
.mn-theme-toggle:hover {
    background: rgba(240,142,32,0.15);
    border-color: rgba(240,142,32,0.40);
    color: #F08E20;
}

/* Icon swap */
.mn-theme-toggle--light svg[data-icon="moon"],
.mn-theme-toggle--light i.fa-moon { display: none; }

.mn-theme-toggle--dark svg[data-icon="sun"],
.mn-theme-toggle--dark i.fa-sun { display: none; }

.mn-ui-img {
    width: 100%;
    height: auto;
    display: block;
    transition: opacity 0.2s ease;
}

.mn-ui-img.mn-ui-img--fade {
    opacity: 0;
}

/* Device cards */
.mn-device-cards {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.25rem;
}

.mn-device-card {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 2.5rem 1.5rem;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    transition: background 0.3s ease, border-color 0.3s ease;
    text-align: center;
}

.mn-device-card:hover {
    background: rgba(240, 142, 32, 0.06);
    border-color: rgba(240, 142, 32, 0.35);
}

.mn-device-card__icon {
    font-size: 3rem;
    color: rgba(255, 255, 255, 0.70);
    transition: color 0.25s ease;
}

.mn-device-card:hover .mn-device-card__icon {
    color: #F08E20;
}

.mn-device-card__logo {
    width: 52px;
    height: 52px;
    object-fit: contain;
    transition: filter 0.25s ease, background-color 0.25s ease;
    filter: brightness(0) invert(1);
    opacity: 0.70;
}

.mn-device-card:hover .mn-device-card__logo {
    opacity: 1;
    filter: brightness(0) invert(1) sepia(1) saturate(6) hue-rotate(350deg);
}

.mn-device-card__logo--mask {
    background-color: rgba(255, 255, 255, 0.70);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    filter: none;
}

.mn-device-card:hover .mn-device-card__logo--mask {
    background-color: #F08E20;
    filter: none;
    opacity: 1;
}

.mn-device-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.80);
    transition: color 0.25s ease;
}

.mn-device-card:hover .mn-device-card__name {
    color: #F08E20;
}

/* Compatible devices — info strip (premium page, no interaction) */
.mn-compat-list {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.mn-compat-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.75rem;
    padding: 0 3rem;
}

.mn-compat-item__logo {
    width: 44px;
    height: 44px;
    background-color: rgba(255, 255, 255, 0.55);
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.mn-compat-item__icon {
    font-size: 2.25rem;
    color: rgba(255, 255, 255, 0.55);
}

.mn-compat-item__name {
    font-size: 0.9rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
    letter-spacing: 0.01em;
}

.mn-compat-divider {
    width: 1px;
    height: 48px;
    background: rgba(255, 255, 255, 0.10);
    flex-shrink: 0;
}

@media (max-width: 767px) {
    .mn-compat-item {
        padding: 1rem 1.5rem;
    }
    .mn-compat-divider {
        display: none;
    }
}

/* ============================================================
   SUPPORT PAGE
   ============================================================ */

.mn-support-card {
    display: flex;
    gap: 1.5rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem;
    height: 100%;
    transition: all 0.3s ease;
}

.mn-support-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

.mn-support-card__icon {
    flex-shrink: 0;
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(240, 142, 32, 0.08);
    border-radius: 14px;
    color: #F08E20;
    font-size: 1.3rem;
}

.mn-support-card__body {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.mn-support-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin: 0;
    letter-spacing: -0.01em;
}

.mn-support-card__text {
    font-size: 0.875rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

.mn-support-card__caution {
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.45);
    background: rgba(240, 142, 32, 0.06);
    border: 1px solid rgba(240, 142, 32, 0.12);
    border-radius: 10px;
    padding: 0.5rem 0.75rem;
    margin: 0;
    line-height: 1.5;
}

.mn-support-card__links {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 0.25rem;
}

.mn-support-card__links a {
    color: #F08E20;
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    padding: 0.2rem 0.65rem;
    border: 1px solid rgba(240, 142, 32, 0.25);
    border-radius: 999px;
    transition: all 0.2s ease;
}

.mn-support-card__links a:hover {
    background: rgba(240, 142, 32, 0.10);
    border-color: rgba(240, 142, 32, 0.45);
    color: #F4BB32;
}

.mn-tg-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: #F08E20 !important;
    background: transparent !important;
    border: 1px solid rgba(240, 142, 32, 0.25) !important;
    border-radius: 999px !important;
    padding: 0.38rem 0.9rem !important;
    font-size: 0.85rem !important;
    font-weight: 600 !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.mn-tg-btn i { color: #F08E20; font-size: 0.9rem; }
.mn-tg-btn:hover {
    background: rgba(240, 142, 32, 0.10) !important;
    border-color: rgba(240, 142, 32, 0.45) !important;
    color: #F4BB32 !important;
}

.mn-support-card__emails {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    margin-top: 0.25rem;
}

.mn-support-email {
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
    padding: 0.65rem 0.85rem;
    background: rgba(255, 255, 255, 0.04);
    border-radius: 10px;
    border: 1px solid rgba(255, 255, 255, 0.06);
}

.mn-support-email__label {
    font-size: 0.70rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #F08E20;
}

.mn-support-email__desc {
    font-size: 0.78rem;
    color: rgba(255, 255, 255, 0.40);
}

.mn-support-email__link {
    font-size: 0.875rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    text-decoration: none;
    transition: color 0.2s ease;
}

.mn-support-email__link:hover {
    color: #F08E20;
}

@media (max-width: 767px) {
    .mn-specs-grid {
        grid-template-columns: 1fr;
    }

    .mn-gallery {
        grid-template-columns: repeat(2, 1fr);
    }

    .mn-product-price__current {
        font-size: 2rem;
    }

    .mn-device-cards {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================================
   PREMIUM+ PAGE
   ============================================================ */

.mn-pp-included-note {
    display: inline-flex;
    align-items: center;
    background: rgba(240, 142, 32, 0.08);
    border: 1px solid rgba(240, 142, 32, 0.20);
    border-radius: 999px;
    padding: 0.45rem 1rem;
    font-size: 0.85rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.75);
    margin-top: 0.5rem;
}

.mn-pp-details {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.mn-pp-detail-card {
    display: flex;
    gap: 1.75rem;
    align-items: flex-start;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem 2rem;
    transition: all 0.3s ease;
}

.mn-pp-detail-card:hover {
    background: rgba(255, 255, 255, 0.05);
    border-color: rgba(255, 255, 255, 0.14);
}

.mn-pp-detail-card__img {
    flex-shrink: 0;
    width: 130px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mn-pp-detail-card__img img {
    width: 130px;
    height: 130px;
    object-fit: contain;
}

.mn-pp-detail-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: #fff;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.mn-pp-detail-card__text {
    font-size: 0.9rem;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 0;
}

@media (max-width: 575px) {
    .mn-pp-detail-card {
        flex-direction: column;
        gap: 1rem;
        padding: 1.5rem;
    }
}

/* ── Premium+ feature rows (alternating) ── */
.mn-pp-fr {
    padding-bottom: 4rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    margin-bottom: 4rem;
}

.mn-pp-fr--last {
    padding-bottom: 0;
    border-bottom: none;
    margin-bottom: 0;
}

.mn-pp-fr__img {
    width: 100%;
    max-width: 364px;
    display: block;
    margin: 0 auto;
    filter: drop-shadow(0 24px 48px rgba(240, 142, 32, 0.18));
    transition: transform 0.5s ease;
}

.mn-pp-fr__img:hover {
    transform: scale(1.03);
}

.mn-pp-fr__eyebrow {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F08E20;
    margin: 0 0 0.75rem;
}

.mn-pp-fr__title {
    font-size: 2rem;
    font-weight: 700;
    color: #fff;
    margin: 0 0 1rem;
    letter-spacing: -0.02em;
    line-height: 1.15;
}

.mn-pp-fr__text {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.55);
    margin: 0;
}

/* ── OLD bento — kept for reference, unused ── */
.mn-pp-bc__bg-num {
    display: none;
}

.mn-pp-bc__eyebrow {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: #F08E20;
    margin-bottom: 0.1rem;
}

.mn-pp-bc__title {
    font-size: 1.55rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.025em;
    line-height: 1.15;
    margin-bottom: 0.25rem;
}

.mn-pp-bc__text {
    font-size: 0.9rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.5);
    max-width: 520px;
    margin-bottom: 0;
    flex: 1;
}

/* Feature image — only shown on wide cards */
.mn-pp-bc__img {
    position: absolute;
    bottom: -0.5rem;
    opacity: 0.5;
    width: 160px;
    object-fit: contain;
    pointer-events: none;
    transition: opacity 0.4s ease;
}

.mn-pp-bc:hover .mn-pp-bc__img {
    opacity: 0.7;
}

.mn-pp-bc__img--right {
    right: 1.5rem;
}

.mn-pp-bc__img--center {
    right: 50%;
    transform: translateX(50%);
    width: 130px;
    opacity: 0.4;
}

/* Narrow cards — hide image to avoid clutter */
.mn-pp-bc:not(.mn-pp-bc--wide) .mn-pp-bc__img {
    display: none;
}

/* Left orange accent line */
.mn-pp-bc::before {
    content: '';
    position: absolute;
    top: 2rem;
    left: 0;
    width: 3px;
    height: 2.5rem;
    background: #F08E20;
    border-radius: 0 3px 3px 0;
    opacity: 0.6;
    transition: opacity 0.3s ease, height 0.3s ease;
}

.mn-pp-bc:hover::before {
    opacity: 1;
    height: 3.5rem;
}

@media (max-width: 991px) {
    .mn-pp-bc {
        min-height: 220px;
    }
    .mn-pp-bc__title {
        font-size: 1.3rem;
    }
    .mn-pp-bc__img--right {
        width: 120px;
    }
}

@media (max-width: 575px) {
    .mn-pp-bc {
        min-height: unset;
        padding: 1.75rem 1.5rem;
    }
    .mn-pp-bc__bg-num {
        font-size: 6rem;
        top: -0.5rem;
    }
    .mn-pp-bc__img {
        display: none !important;
    }
}

/* ── Why Run Your Own Node — benefit cards ── */
.mn-benefit-card {
    height: 100%;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 2rem 1.75rem;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    transition: background 0.4s ease, border-color 0.4s ease, transform 0.4s ease;
}

.mn-benefit-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.16);
    transform: translateY(-3px);
}

.mn-benefit-card__icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    margin-bottom: 0.5rem;
    transition: transform 0.4s ease;
}

.mn-benefit-card:hover .mn-benefit-card__icon {
    transform: scale(1.1);
}

.mn-benefit-card__title {
    font-size: 1.2rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.02em;
    margin: 0;
}

.mn-benefit-card__text {
    font-size: 0.9rem;
    line-height: 1.72;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

/* ── App accordion ── */
.mn-app-accordion {
    border-top: 1px solid rgba(255, 255, 255, 0.07);
    max-width: 960px;
    margin: 0 auto;
}

.mn-app-cat {
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.mn-app-cat--last {
    border-bottom: none;
}

.mn-app-cat__toggle {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    background: none;
    border: none;
    padding: 1.4rem 0;
    cursor: pointer;
    text-align: left;
    color: rgba(255, 255, 255, 0.75);
    font-size: 1.15rem;
    font-weight: 700;
    letter-spacing: -0.01em;
    transition: color 0.25s ease;
    outline: none;
}

.mn-app-cat__toggle:hover,
.mn-app-cat__toggle[aria-expanded="true"] {
    color: #fff;
}

.mn-app-cat__chevron {
    font-size: 0.8rem;
    color: #F08E20;
    transition: transform 0.3s ease, color 0.25s ease;
    flex-shrink: 0;
}

.mn-app-cat__toggle[aria-expanded="true"] .mn-app-cat__chevron {
    transform: rotate(180deg);
    color: rgba(255, 255, 255, 0.30);
}

.mn-app-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 0.6rem;
    padding-bottom: 1.5rem;
}

.mn-app-card {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.06);
    border-radius: 12px;
    padding: 0.65rem 0.85rem;
    transition: background 0.25s ease, border-color 0.25s ease;
    cursor: default;
}

.mn-app-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.12);
}

.mn-app-card__icon {
    width: 48px;
    height: 48px;
    object-fit: contain;
    flex-shrink: 0;
    border-radius: 6px;
    transition: transform 0.3s ease;
}

.mn-app-card:hover .mn-app-card__icon {
    transform: scale(1.08);
}

.mn-app-card__name {
    font-size: 0.82rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
    line-height: 1.3;
    transition: color 0.25s ease;
}

.mn-app-card:hover .mn-app-card__name {
    color: rgba(255, 255, 255, 0.92);
}

.mn-app-card--locked {
    opacity: 0.30;
    filter: grayscale(1);
    position: relative;
    cursor: pointer;
    transition: opacity 0.2s ease, filter 0.2s ease;
    overflow: hidden;
}

/* Corner lock badge — visible at rest, hidden when overlay shows */
.mn-app-card--locked::after {
    content: '\f023';
    font-family: 'Font Awesome 6 Free';
    font-weight: 900;
    position: absolute;
    top: 6px;
    right: 7px;
    font-size: 0.6rem;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1;
    transition: opacity 0.15s ease;
    z-index: 1;
}

/* Hover overlay */
.mn-app-card--locked::before {
    content: 'Premium only';
    font-family: 'Inter', sans-serif;
    font-weight: 700;
    position: absolute;
    inset: 0;
    background: rgba(12, 14, 17, 0.92) url('/https/mynodebtc.com/images/premium_icon.svg') center calc(50% - 8px) / 22px 22px no-repeat;
    backdrop-filter: blur(4px);
    display: grid;
    place-items: center;
    padding-top: 28px;
    font-size: 0.70rem;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #F08E20;
    opacity: 0;
    transition: opacity 0.2s ease;
    z-index: 2;
    border-radius: inherit;
}

.mn-app-card--locked:hover {
    opacity: 0.90;
    filter: grayscale(0);
}

.mn-app-card--locked:hover::before {
    opacity: 1;
}

.mn-app-card--locked:hover::after {
    opacity: 0;
}

@media (max-width: 575px) {
    .mn-app-grid {
        grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
    }
}

/* ── Model One vs Two comparison bars ── */
.mn-vs {
    color: rgba(255, 255, 255, 0.25);
    font-style: italic;
    font-weight: 300;
    font-size: 0.6em;
    margin: 0 0.5rem;
    vertical-align: middle;
}

.mn-compare {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 860px;
    margin: 0 auto;
}

.mn-compare__row {
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 20px;
    padding: 1.75rem 2rem;
    transition: background 0.4s ease, border-color 0.4s ease;
}

.mn-compare__row:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: rgba(255, 255, 255, 0.14);
}

.mn-compare__label {
    font-size: 0.7rem;
    font-weight: 800;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.35);
    margin-bottom: 1.25rem;
    transition: color 0.4s ease;
}

.mn-compare__row:hover .mn-compare__label {
    color: rgba(255, 255, 255, 0.6);
}

.mn-compare__tracks {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mn-compare__track {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.mn-compare__info {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 1rem;
}

.mn-compare__model {
    font-size: 0.75rem;
    font-weight: 600;
}

.mn-compare__model--m1 {
    color: rgba(255, 255, 255, 0.35);
}

.mn-compare__model--m2 {
    color: #fff;
}

.mn-compare__spec {
    font-size: 0.75rem;
    color: rgba(255, 255, 255, 0.35);
}

.mn-compare__spec--m2 {
    color: #F08E20;
    font-weight: 600;
}

.mn-compare__bar-bg {
    height: 6px;
    background: rgba(255, 255, 255, 0.05);
    border-radius: 99px;
    overflow: hidden;
}

.mn-compare__bar-bg--lg {
    height: 12px;
}

.mn-compare__bar {
    height: 100%;
    width: 0;
    border-radius: 99px;
    transition: width 1s ease-out;
}

.mn-compare__bar--m1 {
    background: rgba(255, 255, 255, 0.18);
}

.mn-compare__bar--m2 {
    background: linear-gradient(90deg, #e07a10, #F08E20, #F4BB32);
    box-shadow: 0 0 14px rgba(240, 142, 32, 0.35);
}

@media (max-width: 575px) {
    .mn-compare__row {
        padding: 1.25rem 1.25rem;
    }
    .mn-compare__info {
        flex-direction: column;
        gap: 0.1rem;
    }
}

/* ── Device image gallery ── */
.mn-dg {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.mn-dg__main {
    border-radius: 20px;
    overflow: hidden;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.08);
    aspect-ratio: 4 / 3;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mn-dg__featured {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.22s ease;
}

.mn-dg__featured--out {
    opacity: 0;
}

.mn-dg__thumbs {
    display: grid;
    grid-template-columns: repeat(var(--mn-dg-cols, 6), 1fr);
    gap: 0.6rem;
}

.mn-dg__thumb {
    background: none;
    border: 2px solid rgba(255, 255, 255, 0.07);
    border-radius: 10px;
    padding: 0;
    cursor: pointer;
    transition: border-color 0.25s ease, transform 0.25s ease;
    aspect-ratio: 1 / 1;
    overflow: hidden;
}

.mn-dg__thumb img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 8px;
    display: block;
    transition: transform 0.35s ease;
}

.mn-dg__thumb:hover {
    border-color: rgba(255, 255, 255, 0.25);
    background: rgba(255, 255, 255, 0.05);
    transform: translateY(-2px);
}

.mn-dg__thumb:hover img {
    transform: scale(1.06);
}

.mn-dg__thumb--active {
    border-color: #F08E20;
    background: rgba(240, 142, 32, 0.06);
}

.mn-dg__thumb--active:hover {
    border-color: #F4BB32;
    transform: none;
}

@media (max-width: 575px) {
    .mn-dg__thumbs {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ── 3D model viewer ── */
.mn-3d-viewer {
    position: relative;
    width: 100%;
    height: 600px;
    margin: 0 auto;
    background: radial-gradient(ellipse at 50% 50%, rgba(180, 80, 0, 0.15) 0%, rgba(240, 142, 32, 0.06) 45%, transparent 75%);
    border-radius: 24px;
}

.mn-3d-viewer canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
    outline: none;
    cursor: grab;
}

.mn-3d-viewer canvas:active {
    cursor: grabbing;
}

@media (max-width: 767px) {
    .mn-3d-viewer {
        height: 420px;
    }
}

/* Mobile: hero text centered */
@media (max-width: 991px) {
    .mn-product-hero-section .col-lg-5 {
        text-align: center;
    }
    .mn-product-hero-section .d-flex {
        justify-content: center;
    }
    .mn-product-price {
        justify-content: center;
    }
}

/* Mobile: Web Interface section */
@media (max-width: 767px) {
    .mn-ui-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        justify-content: flex-start;
        gap: 0.4rem;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .mn-ui-tabs::-webkit-scrollbar { display: none; }
    .mn-ui-tab {
        flex-shrink: 0;
        font-size: 0.78rem;
        padding: 0.38rem 0.9rem;
    }
    .mn-browser__bar {
        padding: 0.5rem 0.65rem;
        gap: 0.5rem;
    }
    .mn-browser__url {
        font-size: 0.7rem;
        padding: 0.25rem 0.6rem;
    }
    .mn-browser__dots {
        gap: 4px;
    }
    .mn-browser__dot {
        width: 8px;
        height: 8px;
    }
    .mn-theme-toggle {
        width: 22px;
        height: 22px;
        font-size: 0.55rem;
    }
}

/* ============================================================
   Account Pages
   ============================================================ */
.mn-acct-wrap {
    display: flex;
    gap: 2rem;
    width: 100%;
    margin: 0 auto;
    padding: 1.5rem 12px 4rem;
    min-height: calc(100vh - 68px);
    align-items: flex-start;
    box-sizing: border-box;
}
/* Mirror Bootstrap .container max-widths exactly */
@media (min-width: 769px)  { .mn-acct-wrap { max-width: 720px;  } }
@media (min-width: 992px)  { .mn-acct-wrap { max-width: 960px;  } }
@media (min-width: 1200px) { .mn-acct-wrap { max-width: 1140px; } }
@media (min-width: 1400px) { .mn-acct-wrap { max-width: 1320px; } }
.mn-acct-sidebar {
    width: 220px;
    flex-shrink: 0;
    position: sticky;
    top: 106px;
}
.mn-acct-nav {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}
.mn-acct-nav__link {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    padding: 0.6rem 0.9rem;
    border-radius: 10px;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgba(255,255,255,0.50);
    text-decoration: none;
    transition: all 0.2s ease;
}
.mn-acct-nav__link:hover {
    background: rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
    text-decoration: none;
}
.mn-acct-nav__link.active {
    background: rgba(240,142,32,0.12);
    color: #F08E20;
}
.mn-acct-nav__link i { width: 16px; text-align: center; }
.mn-acct-nav__divider { border-top: 1px solid rgba(255,255,255,0.07); margin: 0.35rem 0; }
.mn-acct-nav__section-label {
    display: block;
    font-size: 0.65rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.25);
    padding: 0.35rem 0.9rem 0.1rem;
}
.mn-acct-main { flex: 1; min-width: 0; }
.mn-ticket-left-col {
    flex-shrink: 0;
    width: 220px;
    position: sticky;
    top: 106px;
    align-self: flex-start;
}
.mn-ticket-left-col .mn-acct-sidebar {
    position: static;
}
.mn-ticket-left-col .mn-ticket-info-card { margin-top: 1rem; }
.mn-ticket-info-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 16px;
    padding: 1.25rem 1.5rem;
}
.mn-ticket-info-card h6 {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: rgba(255,255,255,0.35);
    margin-bottom: 0.3rem;
    margin-top: 1rem;
}
.mn-ticket-info-card h6:first-of-type { margin-top: 0; }
.mn-ticket-info-card p {
    font-size: 0.82rem;
    color: rgba(255,255,255,0.70);
    margin-bottom: 0;
}
.mn-ticket-info-card__label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #F08E20;
    margin-bottom: 1rem !important;
    margin-top: 0 !important;
}
.mn-acct-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 20px;
    padding: 2rem 2.5rem;
    margin-bottom: 1.5rem;
}
.mn-acct-card__title {
    font-size: 1rem;
    font-weight: 700;
    color: #fff;
    letter-spacing: -0.01em;
    margin-bottom: 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    display: flex;
    align-items: center;
    gap: 0.6rem;
}
.mn-acct-card__title i { color: #F08E20; font-size: 0.9rem; }

/* Alerts */
.mn-acct-alert {
    border-radius: 10px;
    padding: 0.7rem 1rem;
    font-size: 0.85rem;
    margin-bottom: 1.25rem;
    border: 1px solid;
}
.mn-acct-alert--error { background: rgba(239,68,68,0.10); border-color: rgba(239,68,68,0.25); color: #fca5a5; }
.mn-acct-alert--success { background: rgba(16,185,129,0.10); border-color: rgba(16,185,129,0.25); color: #6ee7b7; }
.mn-acct-alert--warning { background: rgba(234,179,8,0.10); border-color: rgba(234,179,8,0.25); color: #fde047; }
.mn-acct-alert a { color: inherit; text-decoration: underline; }

/* Form fields */
.mn-acct-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255,255,255,0.45);
    margin-bottom: 0.4rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}
.mn-acct-input {
    width: 100%;
    background: rgba(255,255,255,0.05);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 0.65rem 0.9rem;
    font-size: 0.9rem;
    color: #fff !important;
    caret-color: #fff;
    outline: none;
    transition: border-color 0.2s ease, background 0.2s ease;
    font-family: 'Inter', sans-serif;
}
.mn-acct-input:disabled { opacity: 0.45; cursor: not-allowed; }
.mn-acct-input::placeholder { color: rgba(255,255,255,0.20); }
.mn-acct-input:focus { border-color: rgba(240,142,32,0.55); background: rgba(255,255,255,0.07); }
.mn-acct-input.is-invalid { border-color: rgba(239,68,68,0.55); }
.mn-acct-input:-webkit-autofill,
.mn-acct-input:-webkit-autofill:hover,
.mn-acct-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #fff;
    -webkit-box-shadow: 0 0 0px 1000px rgba(35,37,43,0.98) inset;
    transition: background-color 5000s ease-in-out 0s;
    caret-color: #fff;
}
.mn-acct-input-group { display: flex; align-items: stretch; }
.mn-acct-input-group .mn-acct-input { border-radius: 10px 0 0 10px; }
.mn-acct-input-suffix {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-left: none;
    border-radius: 0 10px 10px 0;
    padding: 0.65rem 0.9rem;
    font-size: 0.85rem;
    color: rgba(255,255,255,0.40);
    white-space: nowrap;
    display: flex;
    align-items: center;
}

/* Buttons */
.mn-acct-btn {
    background: #F08E20;
    color: #000 !important;
    border: none;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-size: 0.875rem;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.22s ease;
    box-shadow: 0 0 14px rgba(240,142,32,0.20);
    font-family: 'Inter', sans-serif;
    text-decoration: none !important;
    display: inline-block;
}
.mn-acct-btn:hover { background: #F4BB32; transform: scale(1.02); color: #000 !important; }
.mn-acct-btn--ghost {
    background: transparent;
    color: rgba(255,255,255,0.60) !important;
    border: 1px solid rgba(255,255,255,0.15);
    box-shadow: none;
}
.mn-acct-btn--ghost:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.30); color: rgba(255,255,255,0.85) !important; transform: none; }
.mn-acct-btn--danger {
    background: rgba(239,68,68,0.18);
    color: #ffffff !important;
    border: 1px solid rgba(239,68,68,0.45);
    box-shadow: none;
}
.mn-acct-btn--danger:hover { background: rgba(239,68,68,0.28); color: #ffffff !important; transform: none; }

/* Tables */
.mn-acct-table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.mn-acct-table th {
    font-size: 0.70rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: rgba(255,255,255,0.35);
    padding: 0 1rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid rgba(255,255,255,0.07);
}
.mn-acct-table th:first-child { padding-left: 0; }
.mn-acct-table td {
    padding: 0.85rem 1rem;
    color: rgba(255,255,255,0.70);
    border-bottom: 1px solid rgba(255,255,255,0.05);
    vertical-align: middle;
}
.mn-acct-table td:first-child { padding-left: 0; }
.mn-acct-table tr:last-child td { border-bottom: none; }
.mn-acct-table td code {
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.78rem;
    color: rgba(255,255,255,0.55);
    background: rgba(255,255,255,0.06);
    padding: 0.2rem 0.5rem;
    border-radius: 5px;
}
.mn-acct-table td .mn-acct-btn { padding: 0.35rem 0.9rem; font-size: 0.78rem; }

/* Info rows */
.mn-acct-info-row { margin-bottom: 1.25rem; }
.mn-acct-info-row:last-child { margin-bottom: 0; }

/* Page header */
.mn-acct-page-title {
    font-size: 1.6rem;
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    margin-bottom: 0.3rem;
}
.mn-acct-page-subtitle {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.40);
    margin-bottom: 2rem;
}

/* Empty state */
.mn-acct-empty {
    text-align: center;
    padding: 2.5rem 1rem;
    color: rgba(255,255,255,0.40);
    font-size: 0.9rem;
}
.mn-acct-empty i { font-size: 2rem; margin-bottom: 0.75rem; display: block; color: rgba(255,255,255,0.15); }

/* Nostr info panel */
.mn-acct-info-panel {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
    font-size: 0.875rem;
    color: rgba(255,255,255,0.50);
}
.mn-acct-info-panel a { color: rgba(255,255,255,0.65); text-decoration: underline; }
.mn-acct-info-panel b { color: rgba(255,255,255,0.75); }

/* Two-factor setup: QR code and recovery codes */
.mn-acct-qr {
    display: inline-block;
    background: #fff;
    border-radius: 12px;
    padding: 0.5rem;
    margin-bottom: 1.25rem;
}
.mn-acct-qr img { display: block; width: 200px; height: 200px; image-rendering: pixelated; }
.mn-acct-codes {
    display: grid;
    grid-template-columns: repeat(2, max-content);
    gap: 0.4rem 2rem;
    font-family: 'SFMono-Regular', Consolas, monospace;
    font-size: 0.95rem;
    color: #fff;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 12px;
    padding: 1rem 1.5rem;
    margin: 0 0 1rem;
}
.mn-acct-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; }

@media (max-width: 768px) {
    /* Stack layout: sidebar becomes sticky tab strip above content */
    .mn-acct-wrap {
        flex-direction: column;
        padding: 0 12px 3rem;
        gap: 0;
        align-items: stretch;
    }

    /* Sticky tab strip — account pages always have user bar (34px), so top = 68+34 */
    .mn-acct-sidebar {
        /* Bleed edge-to-edge despite wrap's 12px side padding */
        width: calc(100% + 24px);
        margin-left: -12px;
        margin-right: -12px;
        position: sticky;
        top: calc(102px + env(safe-area-inset-top));
        z-index: 20;
        background: #0b0d0f;
        border-bottom: 1px solid rgba(255,255,255,0.08);
        padding: 0 12px;
    }

    /* Horizontal scroll strip */
    .mn-acct-nav {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        gap: 0.35rem;
        background: transparent;
        border: none;
        border-radius: 0;
        padding: 0.65rem 0;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .mn-acct-nav::-webkit-scrollbar { display: none; }

    /* Pill-style tab links */
    .mn-acct-nav__link {
        white-space: nowrap;
        flex-shrink: 0;
        font-size: 0.78rem;
        padding: 0.38rem 0.9rem;
        border-radius: 999px;
        border: 1px solid rgba(255,255,255,0.08);
        gap: 0.4rem;
    }
    .mn-acct-nav__link:hover {
        border-color: rgba(255,255,255,0.20);
    }
    .mn-acct-nav__link.active {
        background: rgba(240,142,32,0.12);
        border-color: rgba(240,142,32,0.35);
        color: #F08E20;
    }

    /* Hide section labels and dividers — not useful in horizontal strip */
    .mn-acct-nav__section-label { display: none; }
    .mn-acct-nav__divider { display: none; }

    /* Main content area — horizontal padding comes from wrap's 12px */
    .mn-acct-main { padding: 1.25rem 0 0; }
    .mn-acct-card { padding: 1.25rem; }
    .mn-acct-table { font-size: 0.80rem; }
    .mn-acct-table th, .mn-acct-table td { padding: 0.65rem 0.5rem; }

    /* Redundant on mobile — user bar already provides the same links */
    .mn-acct-sidebar {
        display: none !important;
    }

    /* Ticket left col: unstack from side column → full-width below the thread */
    .mn-ticket-left-col {
        width: 100% !important;
        position: static !important;
        order: 10;
        margin-top: 1.5rem;
    }
    .mn-ticket-left-col .mn-ticket-info-card {
        margin-top: 0 !important;
    }
}



/* ============================================================
   UPGRADE FLOW STEPS
   ============================================================ */

.mn-step-card {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 24px;
    padding: 2.25rem 2rem;
    height: 100%;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    transition: border-color 0.35s ease, background 0.35s ease, transform 0.35s ease;
    position: relative;
    overflow: hidden;
}
.mn-step-card::before {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse at top left, rgba(240,142,32,0.06) 0%, transparent 65%);
    pointer-events: none;
}
.mn-step-card:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.22);
    transform: translateY(-3px);
}
.mn-step-card__num {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: rgba(240,142,32,0.18);
    border: 1.5px solid rgba(240,142,32,0.50);
    color: #F08E20;
    font-size: 1.05rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 1.4rem;
    box-shadow: 0 0 16px rgba(240,142,32,0.20);
}
.mn-step-card__title {
    font-size: 1.1rem;
    font-weight: 700;
    color: rgba(255,255,255,0.92);
    letter-spacing: -0.02em;
    margin-bottom: 0.65rem;
}
.mn-step-card__text {
    font-size: 0.875rem;
    color: rgba(255,255,255,0.50);
    line-height: 1.75;
    margin-bottom: 0;
}
.mn-step-connector {
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 2.25rem;
    color: rgba(240,142,32,0.45);
    font-size: 1.25rem;
}

/* ============================================================
   FAQ SECTION
   ============================================================ */

.mn-faq-header {
    text-align: center;
    margin-bottom: 2.5rem;
}
.mn-faq-header__title {
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 800;
    color: #fff;
    letter-spacing: -0.03em;
    line-height: 1.2;
    margin: 0.5rem 0 0.9rem;
}
.mn-faq-header__subtitle {
    font-size: 0.95rem;
    color: rgba(255,255,255,0.50);
    line-height: 1.7;
    max-width: 600px;
    margin: 0 auto;
}

/* Accordion */
.mn-faq-accordion .accordion-item {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09) !important;
    border-radius: 14px !important;
    margin-bottom: 0.55rem;
    overflow: hidden;
    transition: border-color 0.25s ease;
}
.mn-faq-accordion .accordion-item:hover {
    border-color: rgba(255,255,255,0.16) !important;
}
.mn-faq-accordion .accordion-button {
    background: transparent;
    color: rgba(255,255,255,0.85);
    font-weight: 600;
    font-size: 0.95rem;
    padding: 1.15rem 1.5rem;
    border: none;
    border-radius: 14px !important;
    box-shadow: none !important;
    font-family: 'Inter', sans-serif;
    letter-spacing: -0.01em;
    transition: color 0.2s ease;
}
.mn-faq-accordion .accordion-button:hover {
    color: #fff;
}
.mn-faq-accordion .accordion-button:not(.collapsed) {
    background: transparent;
    color: #F08E20;
    border-bottom: 1px solid rgba(255,255,255,0.07);
    border-radius: 14px 14px 0 0 !important;
}
.mn-faq-accordion .accordion-button::after {
    filter: invert(1) brightness(0.45);
}
.mn-faq-accordion .accordion-button:not(.collapsed)::after {
    filter: invert(65%) sepia(80%) saturate(400%) hue-rotate(5deg) brightness(1.1);
}
.mn-faq-accordion .accordion-body {
    color: rgba(255,255,255,0.55);
    font-size: 0.9rem;
    line-height: 1.8;
    padding: 1rem 1.5rem 1.35rem;
    background: transparent;
}
.mn-faq-accordion .accordion-body a { color: #F08E20; text-decoration: none; }

/* ============================================================
   SUMMERNOTE DARK THEME — color overrides only
   ============================================================ */

/* Toolbar background + border */
.note-editor .note-toolbar {
    background: #14161a !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Override Summernote's own white button backgrounds — exclude color swatches (they use inline background-color) */
.note-editor .note-toolbar .note-btn:not(.note-color-btn),
.note-editor .note-toolbar .btn:not(.note-color-btn),
.note-editor .note-toolbar .btn-default,
.note-editor .note-toolbar .btn-light {
    background: transparent !important;
    border-color: transparent !important;
    box-shadow: none !important;
    color: rgba(255,255,255,0.70) !important;
}
.note-editor .note-toolbar .note-btn:hover,
.note-editor .note-toolbar .btn:hover,
.note-editor .note-toolbar .note-btn:focus,
.note-editor .note-toolbar .btn:focus {
    color: #fff !important;
}
.note-editor .note-toolbar .note-btn.active,
.note-editor .note-toolbar .btn.active {
    color: #F08E20 !important;
}

/* Remove duplicate dropdown caret — Bootstrap adds ::after on top of Summernote's own arrow */
.note-editor .note-toolbar .dropdown-toggle::after {
    display: none !important;
}

/* Color picker section labels */
.note-editor .note-toolbar .note-palette-title {
    color: rgba(255,255,255,0.55) !important;
    border-bottom-color: rgba(255,255,255,0.10) !important;
}

/* Keep color swatches visible — they use inline background-color */
.note-editor .note-toolbar .note-color-btn {
    border: 1px solid rgba(255,255,255,0.10) !important;
}

/* Palettes stack vertically in this theme — shrink dropdown to one column (Summernote's default 337px reserves space for a side-by-side 2nd column) */
.note-editor .note-toolbar .note-color .note-dropdown-menu,
.note-editor .note-toolbar .note-color-all .note-dropdown-menu {
    min-width: 0 !important;
    width: max-content !important;
}

/* Paragraph style dropdown — scale down heading previews so "Header 1" fits on one line */
.note-editor .note-toolbar .note-style .dropdown-style h1 { font-size: 1.6rem !important; }
.note-editor .note-toolbar .note-style .dropdown-style h2 { font-size: 1.35rem !important; }
.note-editor .note-toolbar .note-style .dropdown-style h3 { font-size: 1.15rem !important; }

/* Dropdown menus */
.note-editor .note-toolbar .dropdown-menu,
.note-editor .note-toolbar .note-dropdown-menu {
    background: #16181c !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.40) !important;
}
.note-editor .note-toolbar .dropdown-item,
.note-editor .note-toolbar .note-dropdown-item {
    color: rgba(255,255,255,0.70) !important;
}
.note-editor .note-toolbar .dropdown-item:hover,
.note-editor .note-toolbar .note-dropdown-item:hover {
    background-color: rgba(255,255,255,0.07) !important;
    color: #fff !important;
}

/* Editable area */
.note-editor .note-editing-area .note-editable,
.note-editor .note-editing-area .note-editable[contenteditable] {
    background: #121317 !important;
    color: #e4e4e7 !important;
    caret-color: #F08E20;
}
.note-editor .note-editing-area .note-placeholder {
    color: rgba(255,255,255,0.28) !important;
}

/* Status bar */
.note-editor .note-statusbar {
    background: #121317 !important;
    border-color: rgba(255,255,255,0.08) !important;
    color: rgba(255,255,255,0.28) !important;
}

/* Modals (Insert Image, Insert Link, etc.) */
.note-modal .modal-content,
.note-modal .note-modal-content {
    background: #16181c !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.75) !important;
    box-shadow: 0 24px 60px rgba(0,0,0,0.6) !important;
}
.note-modal .modal-header,
.note-modal .note-modal-header {
    border: 0 !important;
    border-bottom: 1px solid rgba(255,255,255,0.08) !important;
}
.note-modal .modal-title,
.note-modal .note-modal-title,
.note-modal .note-modal-header h4 {
    color: #fff !important;
}
/* Body + helper text legible in dark mode */
.note-modal .modal-body,
.note-modal .note-modal-body {
    color: rgba(255,255,255,0.75) !important;
}
.note-modal small,
.note-modal .text-muted,
.note-modal .form-text,
.note-modal .note-form-label small {
    color: rgba(255,255,255,0.40) !important;
}
.note-modal .close,
.note-modal button.close {
    color: rgba(255,255,255,0.50) !important;
    opacity: 1 !important;
    background: none !important;
    border: none !important;
}
.note-modal .close:hover { color: #fff !important; }
.note-modal label { color: rgba(255,255,255,0.55) !important; }
.note-modal input[type="text"],
.note-modal input[type="url"],
.note-modal input.form-control {
    background: rgba(255,255,255,0.05) !important;
    border-color: rgba(255,255,255,0.12) !important;
    color: #fff !important;
}
.note-modal input:focus {
    border-color: rgba(240,142,32,0.50) !important;
    background: rgba(255,255,255,0.07) !important;
    outline: none !important;
    box-shadow: 0 0 0 3px rgba(240,142,32,0.15) !important;
}
/* File input (e.g. "Elegir archivos") */
.note-modal input[type="file"] {
    color: rgba(255,255,255,0.65) !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.10) !important;
    border-radius: 8px !important;
    padding: 4px !important;
    width: 100% !important;
}
.note-modal input[type="file"]::file-selector-button,
.note-modal input[type="file"]::-webkit-file-upload-button {
    background: rgba(255,255,255,0.10) !important;
    color: rgba(255,255,255,0.85) !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 6px !important;
    padding: 0.35rem 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    margin-right: 10px !important;
    transition: all 0.2s ease !important;
}
.note-modal input[type="file"]:hover::file-selector-button,
.note-modal input[type="file"]:hover::-webkit-file-upload-button {
    background: rgba(255,255,255,0.16) !important;
    border-color: rgba(255,255,255,0.30) !important;
    color: #fff !important;
}
.note-modal .modal-footer,
.note-modal .note-modal-footer {
    height: auto !important;
    padding: 12px 16px !important;
    overflow: hidden !important; /* clearfix — contain the float:right button so it doesn't spill out */
    border-top: 1px solid rgba(255,255,255,0.08) !important;
}
.note-modal .btn-primary {
    background: #F08E20 !important;
    border-color: #F08E20 !important;
    color: #000 !important;
    font-weight: 600 !important;
}
.note-modal .btn-primary:hover { background: #F4BB32 !important; border-color: #F4BB32 !important; }
.note-modal .btn-default,
.note-modal .btn-secondary {
    background: transparent !important;
    border-color: rgba(255,255,255,0.15) !important;
    color: rgba(255,255,255,0.65) !important;
}
.note-modal .btn-default:hover,
.note-modal .btn-secondary:hover {
    background: rgba(255,255,255,0.06) !important;
    color: #fff !important;
}
.mn-faq-accordion .accordion-body a:hover { color: #F4BB32; }

/* ============================================================
   SUPPORT TICKET STATUS BADGES
   Override Bootstrap btn-outline-primary / btn-outline-danger
   emitted by SupportTicket::getStatusIcon()
   ============================================================ */

.mn-acct-table .btn.btn-sm,
.mn-acct-page-title .btn.btn-sm,
h1 .btn.btn-sm,
.mn-acct-main .btn.btn-sm {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.68rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.12em !important;
    text-transform: uppercase !important;
    border-radius: 999px !important;
    padding: 0.22rem 0.75rem !important;
    width: auto !important;
    min-width: unset !important;
    cursor: default !important;
    pointer-events: none;
}

/* "new", "open", "waiting", "reply received" → orange tint */
.mn-acct-table .btn.btn-outline-primary,
.mn-acct-page-title .btn.btn-outline-primary,
h1 .btn.btn-outline-primary,
.mn-acct-main .btn.btn-outline-primary {
    background: rgba(240,142,32,0.10) !important;
    border-color: rgba(240,142,32,0.35) !important;
    color: #F08E20 !important;
    box-shadow: none !important;
}

/* "closed" → muted red */
.mn-acct-table .btn.btn-outline-danger,
.mn-acct-page-title .btn.btn-outline-danger,
h1 .btn.btn-outline-danger,
.mn-acct-main .btn.btn-outline-danger {
    background: rgba(239,68,68,0.08) !important;
    border-color: rgba(239,68,68,0.28) !important;
    color: #fca5a5 !important;
    box-shadow: none !important;
}

/* ============================================================
   LIGHT MODE — Account & Admin Pages Only
   Activated via html[data-theme="light"], set by JS only on
   /account, /support_tickets, and /admin paths.
   ============================================================ */

/* --- Body background (admin pages only) --- */
html[data-theme="light"] body:has(.admin_container) {
    background: #ffffff;
}

/* --- Account pages — light mode --- */
html[data-theme="light"] .mn-acct-nav {
    background: #ffffff;
    border-color: #e2e4e8;
}
html[data-theme="light"] .mn-acct-nav__link { color: #4b5563; }
html[data-theme="light"] .mn-acct-nav__link:hover { color: #111827; background: rgba(0,0,0,0.04); }
html[data-theme="light"] .mn-acct-nav__link.active,
html[data-theme="light"] .mn-acct-nav__link--active { color: #F08E20; background: rgba(240,142,32,0.10); }

html[data-theme="light"] .mn-acct-card {
    background: #ffffff;
    border-color: #e2e4e8;
}
html[data-theme="light"] .mn-acct-card__title {
    color: #111827;
    border-bottom-color: #e2e4e8;
}
html[data-theme="light"] .mn-acct-page-title { color: #111827; }
html[data-theme="light"] .mn-acct-page-subtitle { color: #6b7280; }
html[data-theme="light"] .mn-acct-label { color: #374151; }
html[data-theme="light"] .mn-acct-value { color: #111827; }
html[data-theme="light"] .mn-acct-table th { color: #6b7280; border-color: #e2e4e8; background: #f9fafb; }
html[data-theme="light"] .mn-acct-table td { color: #374151; border-color: #e2e4e8; }
html[data-theme="light"] .mn-acct-table tr:hover td { background: rgba(0,0,0,0.02); }
html[data-theme="light"] .mn-acct-input {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827 !important;
    -webkit-text-fill-color: #111827 !important;
    caret-color: #111827 !important;
}
html[data-theme="light"] .mn-acct-input:focus {
    background: #ffffff;
    border-color: rgba(240,142,32,0.60);
}
html[data-theme="light"] .mn-acct-input::placeholder { color: rgba(0,0,0,0.25) !important; }
html[data-theme="light"] .mn-acct-input-suffix {
    background: rgba(0,0,0,0.04);
    border-color: #d1d5db;
    color: rgba(0,0,0,0.45);
}
html[data-theme="light"] .mn-acct-nav__section-label { color: rgba(0,0,0,0.35); }
html[data-theme="light"] .mn-acct-nav__divider { border-color: rgba(0,0,0,0.08); }
html[data-theme="light"] .mn-acct-btn--ghost {
    color: #374151 !important;
    border-color: #d1d5db !important;
    background: transparent !important;
}
html[data-theme="light"] .mn-acct-btn--ghost:hover {
    background: rgba(0,0,0,0.04) !important;
    border-color: #9ca3af !important;
    color: #111827 !important;
}
html[data-theme="light"] .mn-acct-alert--success { background: rgba(16,185,129,0.08); border-color: rgba(16,185,129,0.30); color: #065f46; }
html[data-theme="light"] .mn-acct-alert--error { background: rgba(239,68,68,0.08); border-color: rgba(239,68,68,0.25); color: #991b1b; }
html[data-theme="light"] .mn-acct-alert--warning { background: rgba(234,179,8,0.08); border-color: rgba(234,179,8,0.25); color: #92400e; }

html[data-theme="light"] .mn-ticket-bubble { background: #ffffff !important; border-color: #e2e4e8 !important; }
html[data-theme="light"] .mn-ticket-bubble__author { color: #111827 !important; }
html[data-theme="light"] .mn-ticket-bubble__date { color: #9ca3af !important; }
html[data-theme="light"] .mn-ticket-bubble__body { color: #374151 !important; }
html[data-theme="light"] .mn-ticket-bubble__body a { color: #c47010 !important; }
html[data-theme="light"] .mn-ticket-info-card { background: #ffffff !important; border-color: #e2e4e8 !important; }
html[data-theme="light"] .mn-ticket-info-card h6 { color: rgba(0,0,0,0.40) !important; }
html[data-theme="light"] .mn-ticket-info-card p { color: rgba(0,0,0,0.70) !important; }
html[data-theme="light"] .mn-ticket-info-card a { color: #c47010 !important; }
html[data-theme="light"] .mn-ticket-info-card__label { color: #c47010 !important; }
/* Override inline style="color:rgba(255,255,255,...)" on admin section spans */
html[data-theme="light"] .mn-ticket-info-card span { color: rgba(0,0,0,0.65) !important; }

/* --- Admin pages — light mode --- */
html[data-theme="light"] .admin-devices-topnav {
    background: #ffffff;
    border-color: #e2e4e8;
}
html[data-theme="light"] .admin-devices-topnav__link { color: #4b5563; }
html[data-theme="light"] .admin-devices-topnav__link:hover { color: #111827; background: rgba(0,0,0,0.04); }
html[data-theme="light"] .admin-devices-topnav__link.active { color: #F08E20; background: rgba(240,142,32,0.10); }
html[data-theme="light"] .admin_container { color: #1f2937; }
html[data-theme="light"] .admin_container h1 { color: #111827; }
html[data-theme="light"] .admin_container h2,
html[data-theme="light"] .admin_container h3,
html[data-theme="light"] .admin_container h4,
html[data-theme="light"] .admin_container h5,
html[data-theme="light"] .admin_container h6,
html[data-theme="light"] .admin_container p,
html[data-theme="light"] .admin_container label { color: #374151; }
html[data-theme="light"] .admin_container table { background: #ffffff; border-color: #e2e4e8; }
html[data-theme="light"] .admin_container th { background: #f9fafb; border-color: #e2e4e8 !important; color: #6b7280 !important; }
html[data-theme="light"] .admin_container td { border-color: #e2e4e8 !important; color: #374151; }
html[data-theme="light"] .admin_container .table-hover > tbody > tr:hover > * {
    background-color: rgba(0,0,0,0.02);
    color: #1f2937;
}
html[data-theme="light"] .admin_container input[type="text"],
html[data-theme="light"] .admin_container input[type="password"],
html[data-theme="light"] .admin_container input[type="number"],
html[data-theme="light"] .admin_container input[type="email"],
html[data-theme="light"] .admin_container select,
html[data-theme="light"] .admin_container textarea {
    background: #f9fafb;
    border-color: #d1d5db;
    color: #111827;
}
html[data-theme="light"] .admin_container input:focus,
html[data-theme="light"] .admin_container select:focus,
html[data-theme="light"] .admin_container textarea:focus {
    border-color: #F08E20;
    box-shadow: 0 0 0 2px rgba(240,142,32,0.15);
}
html[data-theme="light"] .admin_container a:not(.mn-navbar__link):not(.mn-bar__link) { color: #c47010; }
html[data-theme="light"] .admin_container a:not(.mn-navbar__link):not(.mn-bar__link):hover { color: #a35e0c; }
html[data-theme="light"] .admin_container hr { border-color: #e2e4e8; }
html[data-theme="light"] .admin_container .btn-primary,
html[data-theme="light"] .admin_container input[type="submit"] {
    background: #F08E20;
    border-color: #F08E20;
    color: #000;
}
html[data-theme="light"] .admin_container .btn-primary:hover,
html[data-theme="light"] .admin_container input[type="submit"]:hover {
    background: #d97b0e;
    border-color: #d97b0e;
    color: #000;
}
html[data-theme="light"] .admin_container .btn-secondary {
    background: #e5e7eb;
    border-color: #d1d5db;
    color: #374151;
}
html[data-theme="light"] .admin_container .btn-secondary:hover,
html[data-theme="light"] .admin_container .btn-secondary:focus {
    background: #d1d5db;
    border-color: #9ca3af;
    color: #111827;
}
html[data-theme="light"] .admin_container .btn-danger {
    background: rgba(239,68,68,0.10);
    border-color: rgba(239,68,68,0.35);
    color: #991b1b;
}
html[data-theme="light"] .admin_container .btn-danger:hover,
html[data-theme="light"] .admin_container .btn-danger:focus {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.55);
    color: #7f1d1d;
}
html[data-theme="light"] .admin_container .btn-success {
    background: rgba(16,185,129,0.10);
    border-color: rgba(16,185,129,0.35);
    color: #065f46;
}
html[data-theme="light"] .admin_container .btn-success:hover,
html[data-theme="light"] .admin_container .btn-success:focus {
    background: rgba(16,185,129,0.18);
    border-color: rgba(16,185,129,0.55);
    color: #064e3b;
}
html[data-theme="light"] .admin_container .btn-warning {
    background: rgba(234,179,8,0.12);
    border-color: rgba(234,179,8,0.40);
    color: #92400e;
}
html[data-theme="light"] .admin_container .btn-warning:hover,
html[data-theme="light"] .admin_container .btn-warning:focus {
    background: rgba(234,179,8,0.22);
    border-color: rgba(234,179,8,0.60);
    color: #78350f;
}


/* ============================================================
   LIGHT MODE — Summernote Editor (ticket/support pages)
   ============================================================ */
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor.note-frame {
    border-color: #d1d5db !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-toolbar {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-toolbar .btn {
    color: #374151 !important;
    background: transparent !important;
    border-color: transparent !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-toolbar .btn:hover,
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-toolbar .btn:focus {
    color: #111827 !important;
    background: rgba(0,0,0,0.06) !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-toolbar .btn.active {
    color: #F08E20 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-toolbar .dropdown-menu {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.10) !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-toolbar .dropdown-item {
    color: #374151 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-toolbar .dropdown-item:hover {
    background: rgba(0,0,0,0.05) !important;
    color: #111827 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-editing-area .note-editable,
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-editing-area .note-editable[contenteditable] {
    background: #ffffff !important;
    color: #111827 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-editing-area .note-placeholder {
    color: rgba(0,0,0,0.35) !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-editor .note-statusbar {
    background: #f3f4f6 !important;
    border-color: #d1d5db !important;
    color: rgba(0,0,0,0.35) !important;
}

/* Summernote modals — light mode (account + admin pages) */
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .modal-content,
html[data-theme="light"] body:has(.admin_container) .note-modal .modal-content {
    background: #ffffff !important;
    border-color: rgba(0,0,0,0.12) !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .modal-header,
html[data-theme="light"] body:has(.admin_container) .note-modal .modal-header {
    background: #f3f4f6 !important;
    border-bottom-color: #d1d5db !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .modal-title,
html[data-theme="light"] body:has(.admin_container) .note-modal .modal-title {
    color: #111827 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .modal-body,
html[data-theme="light"] body:has(.admin_container) .note-modal .modal-body {
    color: #374151 !important;
    background: #ffffff !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .modal-body label,
html[data-theme="light"] body:has(.admin_container) .note-modal .modal-body label {
    color: #374151 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .modal-body input,
html[data-theme="light"] body:has(.admin_container) .note-modal .modal-body input {
    background: #f9fafb !important;
    color: #111827 !important;
    border-color: #d1d5db !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .modal-footer,
html[data-theme="light"] body:has(.admin_container) .note-modal .modal-footer {
    background: #f3f4f6 !important;
    border-top-color: #d1d5db !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .btn-primary,
html[data-theme="light"] body:has(.admin_container) .note-modal .btn-primary {
    background: #F08E20 !important;
    border-color: #F08E20 !important;
    color: #000 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .btn-default,
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .btn-secondary,
html[data-theme="light"] body:has(.admin_container) .note-modal .btn-default,
html[data-theme="light"] body:has(.admin_container) .note-modal .btn-secondary {
    background: #e5e7eb !important;
    color: #374151 !important;
    border-color: #d1d5db !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) .note-modal .close,
html[data-theme="light"] body:has(.admin_container) .note-modal .close {
    color: rgba(0,0,0,0.45) !important;
}

/* ============================================================
   LIGHT MODE — Account page element fixes
   ============================================================ */

/* Danger button — dark red instead of pinkish */
html[data-theme="light"] .mn-acct-btn--danger {
    background: rgba(239,68,68,0.08) !important;
    color: #991b1b !important;
    border-color: rgba(239,68,68,0.30) !important;
}
html[data-theme="light"] .mn-acct-btn--danger:hover {
    background: rgba(239,68,68,0.15) !important;
    color: #7f1d1d !important;
}

/* Empty states */
html[data-theme="light"] .mn-acct-empty { color: #6b7280; }
html[data-theme="light"] .mn-acct-empty i { color: rgba(0,0,0,0.18); }

/* Nostr info panel */
html[data-theme="light"] .mn-acct-info-panel {
    background: rgba(0,0,0,0.03);
    border-color: rgba(0,0,0,0.08);
    color: #374151;
}
html[data-theme="light"] .mn-acct-info-panel a { color: #c47010; }
html[data-theme="light"] .mn-acct-info-panel b { color: #111827; }
html[data-theme="light"] .mn-acct-codes { color: #111827; background: #f9fafb; border-color: #e2e4e8; }

/* Device name edit input (inline <style> in devices.php needs !important) */
html[data-theme="light"] body:has(.mn-acct-wrap) .name_input {
    background: #f9fafb !important;
    border-color: #d1d5db !important;
    color: #111827 !important;
}

/* <code> elements — product keys, access tokens */
html[data-theme="light"] body:has(.mn-acct-wrap) code {
    background: rgba(0,0,0,0.05) !important;
    color: #374151 !important;
    border-radius: 4px;
    padding: 0.1em 0.35em;
}

/* Override inline style="" dark colors on portal pages */
html[data-theme="light"] body:has(.mn-acct-wrap) [style*="color:#fff"] {
    color: #111827 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) [style*="color: #fff"] {
    color: #111827 !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) [style*="color:rgba(255,255,255"] {
    color: rgba(0,0,0,0.55) !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) [style*="color: rgba(255,255,255"] {
    color: rgba(0,0,0,0.55) !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) [style*="color:#fde047"] {
    color: #92400e !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) [style*="color: #fde047"] {
    color: #92400e !important;
}
html[data-theme="light"] body:has(.mn-acct-wrap) [style*="rgba(255,255,255,0.07)"] {
    border-color: rgba(0,0,0,0.08) !important;
}

/* Card body text */
html[data-theme="light"] body:has(.mn-acct-wrap) .mn-acct-card p,
html[data-theme="light"] body:has(.mn-acct-wrap) .mn-acct-card ul,
html[data-theme="light"] body:has(.mn-acct-wrap) .mn-acct-card li {
    color: #374151;
}

/* Mobile sidebar strip background */
@media (max-width: 768px) {
    html[data-theme="light"] body:has(.mn-acct-wrap) .mn-acct-sidebar {
        background: #f0f2f5;
        border-bottom-color: rgba(0,0,0,0.08);
    }
    html[data-theme="light"] body:has(.mn-acct-wrap) .mn-acct-nav__link {
        border-color: rgba(0,0,0,0.08);
        color: rgba(0,0,0,0.45);
    }
    html[data-theme="light"] body:has(.mn-acct-wrap) .mn-acct-nav__link:hover {
        border-color: rgba(0,0,0,0.20);
        color: rgba(0,0,0,0.80);
        background: rgba(0,0,0,0.04);
    }
}

/* Sale banner image — full-width on mobile */
@media (max-width: 767px) {
    .mn-sale-banner-img {
        width: 95% !important;
    }
}

/* Input autofill override for light mode */
html[data-theme="light"] .mn-acct-input:-webkit-autofill,
html[data-theme="light"] .mn-acct-input:-webkit-autofill:hover,
html[data-theme="light"] .mn-acct-input:-webkit-autofill:focus {
    -webkit-text-fill-color: #111827 !important;
    -webkit-box-shadow: 0 0 0px 1000px #f9fafb inset !important;
    caret-color: #111827 !important;
}

/* ============================================================
   MARKETPLACE
   ============================================================ */

/* Search & filter toolbar — sticky under the navbar, same glass treatment */
.mn-market-toolbar-section {
    position: sticky;
    top: 68px;
    z-index: 20;
    background: rgba(21, 23, 26, 0.85);
    backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    border-top: none !important;
}

/* One row where it fits: search grows, category filter and result count sit
   beside it. The search's flex-basis is the breakpoint — below it the filter and
   count wrap to a second line on their own, no media query needed. */
.mn-market-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.6rem 0.85rem;
}

.mn-market-toolbar__row2 {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-shrink: 0;
}

.mn-market-search {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 9999px;
    padding: 0.6rem 1.35rem;
    color: rgba(255, 255, 255, 0.40);
    font-size: 1.05rem;
    flex: 1 1 320px;
    min-width: 0;
    transition: border-color 0.2s ease, background 0.2s ease;
}

.mn-market-search:focus-within {
    background: rgba(255, 255, 255, 0.07);
    border-color: rgba(240, 142, 32, 0.35);
}

.mn-market-search__input {
    background: none;
    border: none;
    outline: none;
    color: #fff;
    font-size: 1rem;
    width: 100%;
}

.mn-market-search__input::placeholder {
    color: rgba(255, 255, 255, 0.35);
}

/* Category filter — a real dropdown (reuses the site's existing .mn-dropdown
   component, same one the "Products" nav menu uses) instead of a native <select>,
   since native option-list styling can't be reliably themed dark across browsers. */
.mn-market-category-dropdown {
    flex-shrink: 0;
}

.mn-market-select {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: rgba(255, 255, 255, 0.75);
    border-radius: 9999px;
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease;
}

.mn-market-select:hover,
.mn-market-select:focus {
    border-color: rgba(255, 255, 255, 0.30);
    color: #fff;
    outline: none;
}

.mn-market-category-dropdown .mn-dropdown {
    min-width: 180px;
}

.mn-market-category-option {
    width: 100%;
    text-align: left;
    background: none;
    border: none;
}

.mn-market-category-option--active {
    background: rgba(240, 142, 32, 0.12) !important;
    color: #F08E20 !important;
}

/* Result count sits on its own line under the pill/select row rather than
   crowding them on the right. */
.mn-market-result-count {
    margin: 0;
    font-size: 0.8rem;
    color: rgba(255, 255, 255, 0.40);
    white-space: nowrap;
}

.mn-market-empty {
    text-align: center;
    color: rgba(255, 255, 255, 0.45);
    font-size: 0.9rem;
    margin: 1.5rem 0 0;
}

/* Catalog — one continuous section holding every category row. Rows are plain
   divs (not nested .mn-section elements), spaced with margin instead of each
   getting its own border-top/alt-background — that per-row banding was the
   "weird lines" problem in the previous version. */
.mn-market-catalog {
    padding-top: 3rem;
    padding-bottom: 2rem;
}

.mn-market-row {
    margin-bottom: 3.25rem;
}

.mn-market-row:last-child {
    margin-bottom: 0;
}

.mn-market-row__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.9rem;
}

.mn-market-row__heading {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.mn-market-row__count {
    font-size: 0.75rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.35);
    background: rgba(255, 255, 255, 0.06);
    border-radius: 9999px;
    padding: 0.15rem 0.55rem;
}

.mn-market-row__icon {
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 12px;
    background: rgba(240, 142, 32, 0.10);
    border: 1px solid rgba(240, 142, 32, 0.18);
    color: #F08E20;
    font-size: 1.1rem;
}

/* Reused by the banner carousel's prev/next controls (see below) — no longer
   used for category rows, which never scroll now. */
.mn-market-arrow {
    width: 34px;
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.16);
    border-radius: 50%;
    color: rgba(255, 255, 255, 0.65);
    font-size: 1.1rem;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    flex-shrink: 0;
}

.mn-market-arrow:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.30);
    color: #fff;
}

/* Disabled at a scroll extreme (see mnShotsUpdateArrowState in mynode.js) —
   fades out and stops intercepting clicks/taps instead of sitting uselessly
   on top of slide content with nothing left to scroll to in that direction. */
.mn-market-arrow:disabled {
    opacity: 0;
    pointer-events: none;
}

/* Every category row wraps — no horizontal scrolling, regardless of app count.
   A real grid (not flex-wrap) so cards line up in clean, even columns instead of
   however many 260px cards happen to fit the container width. */
.mn-market-row__grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0.9rem;
}

@media (max-width: 991px) {
    .mn-market-row__grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .mn-market-row__grid {
        grid-template-columns: 1fr;
    }
}

/* Capped rows show a first row of 4 cards, with the rest inside a Bootstrap
   .collapse — reusing the same accordion component as the FAQ section so the
   expand/collapse gets a real animated height transition instead of an
   instant display toggle. */
.mn-market-row__grid--extra {
    margin-top: 0.9rem;
}

.mn-market-row__toggle {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 1rem auto 0;
    padding: 0.5rem 1.25rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: #F08E20;
    background: rgba(240, 142, 32, 0.08);
    border: 1px solid rgba(240, 142, 32, 0.35);
    border-radius: 9999px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.mn-market-row__toggle:hover {
    background: rgba(240, 142, 32, 0.14);
    border-color: rgba(240, 142, 32, 0.55);
}

.mn-market-row__toggle i {
    transition: transform 0.2s ease;
}

.mn-market-row__toggle[aria-expanded="true"] i {
    transform: rotate(180deg);
}

.mn-market-row--empty {
    display: none;
}

.mn-market-card {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.9rem;
    background: rgba(255, 255, 255, 0.028);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 16px;
    padding: 1rem 1.1rem;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.mn-market-card:hover {
    background: rgba(255, 255, 255, 0.06);
    border-color: rgba(255, 255, 255, 0.20);
    transform: translateY(-2px);
    text-decoration: none;
}

.mn-market-card__icon {
    width: 52px;
    height: 52px;
    object-fit: contain;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.mn-market-card:hover .mn-market-card__icon {
    transform: scale(1.06);
}

.mn-market-card__body {
    min-width: 0;
    flex: 1;
}

.mn-market-card__name {
    font-size: 0.95rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.88);
    line-height: 1.3;
    margin: 0;
}

.mn-market-card__desc {
    font-size: 0.78rem;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.45);
    line-height: 1.4;
    margin: 0.1rem 0 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Must come after .mn-market-card's own `display` so filtering actually hides
   cards — same specificity, so source order decides and this needs to win. */
.mn-market-card--hidden {
    display: none !important;
}

/* Tile variant — the category rows under the search/filter toolbar. A vertical
   3:4 card with a big icon (Apple App Store icon-grid shape). Safe to use here
   because .mn-market-row__grid is a plain grid with no letter separators, so it
   never hits the grid-break bug the old All Apps layout had. */
.mn-market-card--tile {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 2.05;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    text-align: left;
    background: #191b1f;
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 18px;
    padding: 1.1rem;
    gap: 0;
}

/* The 3/2.05 aspect-ratio above is tuned for the 4-column desktop grid
   (~260px wide tiles). Once .mn-market-row__grid drops to 2 or 1 columns
   (same 991px/575px breakpoints), the same ratio on a much wider card
   forces a tall box the content doesn't fill, leaving a dead gap above the
   margin-top:auto footer — so let height follow content instead below 992px. */
@media (max-width: 991px) {
    .mn-market-card--tile {
        aspect-ratio: auto;
    }
}

/* Full-tile wash in the app's own sampled brand color (--mn-tile-tint, set
   inline per card from mn_market_tile_tint_rgb() in marketplace.php) instead
   of one repeated accent — so the grid reads as distinct apps, not a wall of
   orange. */
.mn-market-card__tint {
    display: none;
}

.mn-market-card--tile .mn-market-card__icon-wrap {
    position: relative;
    z-index: 1;
    width: 21%;
    aspect-ratio: 1 / 1;
    height: auto;
    margin-bottom: 0.65rem;
}

.mn-market-card--tile .mn-market-card__icon {
    width: 100%;
    height: 100%;
    border-radius: 0;
}

.mn-market-card--tile .mn-app-letter {
    width: 100%;
    height: 100%;
    font-size: 1.3rem;
    background: transparent;
    border: none;
}

.mn-market-card--tile .mn-market-card__badge {
    z-index: 1;
}

.mn-market-card--tile .mn-market-card__body {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    width: 100%;
    flex: 1;
    min-height: 0;
}

.mn-market-card__name-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
}

.mn-market-card--tile .mn-market-card__name {
    font-size: 0.92rem;
}

.mn-market-card--tile .mn-market-card__name-row .mn-market-card__badge {
    position: static;
    font-size: 0.6rem;
    padding: 0.2rem 0.45rem;
    flex-shrink: 0;
}

.mn-market-card--tile .mn-market-card__desc {
    margin-top: 0.3rem;
    -webkit-line-clamp: 2;
}

.mn-market-card--tile .mn-market-card__chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    margin-top: 0.6rem;
    font-size: 0.68rem;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.55);
}

/* Footer row (developer attribution + Free/Premium) pinned to the bottom of
   the tile via margin-top: auto on the flex column, filling the dead space
   under the description instead of leaving it empty. */
.mn-market-card--tile .mn-market-card__footer {
    position: relative;
    z-index: 1;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    margin-top: auto;
    padding-top: 0.75rem;
}

.mn-market-card__dev {
    font-size: 0.7rem;
    color: rgba(255, 255, 255, 0.35);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mn-market-card__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    padding: 0.3rem 0.85rem;
    font-size: 0.7rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.75);
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 9999px;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.mn-market-card--tile:hover .mn-market-card__cta {
    background: rgba(255, 255, 255, 0.10);
    border-color: rgba(255, 255, 255, 0.30);
}

.mn-market-row__grid--tile {
    gap: 1.1rem;
}

.mn-market-card__icon-wrap {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 11px;
    background: rgba(255, 255, 255, 0.04);
}

/* All Apps index — one continuous grid (not per-letter mini-grids, which left
   ragged/empty cells for short letters) with each letter marker spanning the
   full row width, so cards underneath still pack cleanly into 3 columns on
   desktop, 2 on tablet, 1 on mobile. */
.mn-market-allapps-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.65rem 1rem;
    margin-bottom: 1rem;
}

@media (max-width: 991px) {
    .mn-market-allapps-list {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .mn-market-allapps-list {
        grid-template-columns: 1fr;
    }
}

.mn-market-allapps__letter {
    grid-column: 1 / -1;
    font-size: 0.85rem;
    font-weight: 700;
    color: rgba(255, 255, 255, 0.35);
    letter-spacing: 0.04em;
    margin: 1.5rem 0 0.35rem;
    padding: 0 0.5rem;
}

.mn-market-allapps__letter:first-child {
    margin-top: 0;
}

.mn-market-card__badge {
    position: absolute;
    top: 10px;
    right: 12px;
}

.mn-badge--premium {
    background: rgba(240, 142, 32, 0.14);
    color: #F08E20;
    border: 1px solid rgba(240, 142, 32, 0.30);
}

/* Letter tile fallback when an app has no icon */
.mn-app-letter {
    width: 52px;
    height: 52px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: rgba(240, 142, 32, 0.12);
    border: 1px solid rgba(240, 142, 32, 0.25);
    color: #F08E20;
    font-size: 1.4rem;
    font-weight: 800;
}

/* ── App detail page (Apple App Store-style) ── */

/* Hero banner — placeholder gradient + icon treatment stands in for real
   per-app banner art (Figma designs coming later); reuses the .mn-banner--*
   theme classes from the marketplace listing's featured carousel so the
   same category always reads as the same color across the site. */
.mn-appdetail__banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    min-height: 176px;
    padding: 2rem clamp(1.5rem, 4vw, 3rem);
    border-radius: 28px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    /* Tinted from the app's own icon color, same as the marketplace banners. */
    background: linear-gradient(135deg, rgba(var(--mn-banner-tint, 240, 142, 32), 0.20) 0%, #17191c 65%);
}

.mn-appdetail__banner-text {
    position: relative;
    z-index: 1;
    max-width: 640px;
}

.mn-appdetail__banner-title {
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: 1.05;
    color: #fff;
    margin: 0 0 0.6rem;
}

.mn-appdetail__banner-desc {
    font-size: 1.05rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.60);
    margin: 0;
}

.mn-appdetail__banner-icon {
    position: relative;
    z-index: 1;
    width: 104px;
    height: 104px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 16px 36px rgba(0, 0, 0, 0.45));
}

.mn-appdetail__banner-icon.mn-app-letter {
    font-size: 3.4rem;
}

@media (max-width: 767px) {
    .mn-appdetail__banner {
        flex-direction: column-reverse;
        align-items: flex-start;
        text-align: left;
        min-height: 0;
        padding: 2rem;
    }
    .mn-appdetail__banner-icon {
        width: 84px;
        height: 84px;
    }
}

.mn-appdetail__shots-wrap {
    position: relative;
}

.mn-appdetail__shots-scroll {
    display: flex;
    gap: 1.25rem;
    overflow-x: auto;
    /* No scroll-snap-type here (tried both mandatory and proximity — see
       git history — both broke). With only a few screenshots on a wide
       viewport, the strip can overflow by less than one slide's width, so
       a later slide's "flush" snap point (offsetLeft - scroll-padding-left)
       sits beyond the container's actual max scrollLeft. Confirmed by
       testing directly in a real browser: even a plain, unanimated
       `el.scrollTo({left: 182, behavior: 'instant'})` was immediately
       reverted to 0 by the browser under BOTH `mandatory` and `proximity`
       — Chromium's proximity implementation still force-corrected to the
       only snap point actually reachable in range once no other one is,
       rather than leaving the position alone. That silently overrides any
       scrollTo() the JS carousel logic in mynode.js issues (e.g. an arrow
       click), making "prev" from near the end look frozen since its
       target keeps landing back on the same spot. JS drives all scrolling
       here (arrows compute an exact target, dots and drag/swipe are synced
       back from live scrollLeft — see mnShotsScrollTo/mnShotsSyncActiveIndex
       in mynode.js), so snap-assisted rest positions aren't needed; letting
       the browser freely land wherever the gesture or scrollTo() ends is
       correct and predictable in every case, including this one. */
    scroll-snap-type: none;
    scrollbar-width: none;
    /* overflow-x: auto forces overflow-y to a clipping value too, so the
       hover lift (translateY(-4px) on .mn-appdetail__shot-link) needs
       headroom above the content or its top gets cut off by the scroll
       container's edge. Unlike .mn-banner-carousel (whose section already
       has generous padding-top so a padding+negative-margin trick keeps it
       visually flush), this section is padding-top: 0 — there's no room to
       borrow from, so the fix here is just real padding-top, no
       compensating negative margin. */
    /* The strip is full-bleed so it can scroll past the page edges, so its
       inset has to reproduce the container's content edge by hand to keep the
       first slide aligned with the banner and body copy above it. Bootstrap's
       .container max-width steps at each breakpoint, so one hardcoded width
       only ever lines up in one range — hence the ladder below. */
    padding: 6px var(--mn-shots-inset, 0.75rem) 0.5rem;
}

/* Mirrors Bootstrap 5.3's .container max-widths. Keep in sync if the grid
   breakpoints ever change. Below sm the container is full-width, so the base
   0.75rem gutter above is already correct. */
@media (min-width: 576px)  { .mn-appdetail__shots-scroll { --mn-shots-inset: calc((100% - 540px)  / 2 + 0.75rem); } }
@media (min-width: 768px)  { .mn-appdetail__shots-scroll { --mn-shots-inset: calc((100% - 720px)  / 2 + 0.75rem); } }
@media (min-width: 992px)  { .mn-appdetail__shots-scroll { --mn-shots-inset: calc((100% - 960px)  / 2 + 0.75rem); } }
@media (min-width: 1200px) { .mn-appdetail__shots-scroll { --mn-shots-inset: calc((100% - 1140px) / 2 + 0.75rem); } }
@media (min-width: 1400px) { .mn-appdetail__shots-scroll { --mn-shots-inset: calc((100% - 1320px) / 2 + 0.75rem); } }

.mn-appdetail__shots-scroll::-webkit-scrollbar {
    display: none;
}

/* Prev/next controls — the native scrollbar is hidden above (touch swipe
   already covers mobile), so desktop mouse users need an explicit way to
   move the strip. Same row pattern as .mn-banner-nav. */
.mn-appdetail__shots-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.5rem;
}

/* Overlay prev/next controls, positioned over the screenshot strip itself
   (vertically centered on the slide, left/right edges) rather than in the
   row below — they sit on .mn-appdetail__shots-wrap (a sibling of the
   scrollable strip), so they stay put at the same spot regardless of how
   far the strip has scrolled horizontally.

   The strip itself bleeds edge-to-edge for the peek/scroll effect, but the
   arrows shouldn't follow it out to the raw viewport edge — on wide/ultrawide
   screens that leaves them stranded far from the actual (centered,
   max-width) screenshot content. Anchoring them inside a real Bootstrap
   .container instead of a hand-rolled calc() keeps them flush with the same
   content edge as everything else on the page (the "← Marketplace" link,
   hero card, etc.) at every breakpoint.

   Vertically centered (top: 50% + translateY on the buttons, the wrapping
   .mn-appdetail__shots-arrows stretched top:0/bottom:0 to match the slide's
   full height) rather than pinned a fixed distance from the top — the
   marketing screenshots used here always carry a headline across the top
   ~25% of the image, so a fixed small top offset put the arrows right on
   top of that text. Centering lands them over the middle of the
   browser-mockup window instead, clear of the headline at every slide's
   aspect ratio. */
.mn-appdetail__shots-arrows {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    pointer-events: none;
}

.mn-appdetail__shots-arrow--overlay {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    pointer-events: auto;
    /* These sit on top of the screenshots themselves, which are bright and busy,
       so the scrim and the glyph both need more contrast than the plain-dark
       .mn-market-arrow they inherit from. Overlay variant only — the banner
       carousel's arrows sit on flat background and don't need it. */
    background: rgba(12, 14, 16, 0.82);
    backdrop-filter: blur(8px);
    border-color: rgba(255, 255, 255, 0.34);
    color: #fff;
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
}

.mn-appdetail__shots-arrow--overlay:hover {
    background: rgba(12, 14, 16, 0.92);
    border-color: rgba(255, 255, 255, 0.55);
}

.mn-appdetail__shots-arrow--overlay.mn-appdetail__shots-arrow--prev {
    left: 0;
}

.mn-appdetail__shots-arrow--overlay.mn-appdetail__shots-arrow--next {
    right: 0;
}

/* No overflow to scroll (see --fits below) — nothing for the overlay arrows
   to do, hide them same as the row below. */
.mn-appdetail__shots-scroll--fits ~ .mn-appdetail__shots-arrows {
    display: none;
}

.mn-appdetail__shots-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mn-appdetail__shots-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mn-appdetail__shots-dot:hover {
    background: rgba(255, 255, 255, 0.35);
}

.mn-appdetail__shots-dot--active {
    background: #F08E20;
    transform: scale(1.25);
}

/* Mobile already has native touch swipe on .mn-appdetail__shots-scroll — the
   arrow buttons are a desktop-mouse affordance only, dots stay to show
   position while swiping. */
@media (max-width: 767px) {
    .mn-appdetail__shots-arrow {
        display: none;
    }
}

/* Fixed aspect-ratio tile + object-fit: cover so every screenshot reads as a
   uniform card in the carousel regardless of its native shape — some apps'
   screenshots are wide UI captures, others are square/portrait marketing
   banners, and letting width:auto follow a fixed height (the old approach)
   squeezed those into illegibly narrow tiles. */
.mn-appdetail__shot-link {
    display: block;
    flex: 0 0 auto;
    width: 480px;
    max-width: 82vw;
    aspect-ratio: 16 / 10;
    border-radius: 24px;
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, 0.10);
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.35);
    cursor: pointer;
    transition: transform 0.25s ease, border-color 0.25s ease;
}

.mn-appdetail__shot-link:hover {
    transform: translateY(-4px);
    border-color: rgba(255, 255, 255, 0.20);
}

.mn-appdetail__shot {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    display: block;
}

/* Applied via JS (mynode.js) when the strip has no real overflow to scroll
   (e.g. an app with only 1-2 screenshots) — instead of leaving the fixed
   480px tiles stranded with empty space beside them, let them share the
   available width evenly. The cap matters: the tile keeps a 16/10 ratio, so
   width drives height, and a lone screenshot allowed to reach 720px rendered
   450px tall — half again the 300px of a 3-screenshot strip — pushing the rest
   of the page down. 560px keeps a single shot close to the 2-shot size. */
.mn-appdetail__shots-scroll--fits .mn-appdetail__shot-link {
    flex: 1 1 0;
    width: auto;
    max-width: 560px;
}

/* About + Information two-column layout (Apple App Store product page pattern:
   long-form description alongside a compact label/value info panel). */
.mn-appdetail__layout {
    display: grid;
    grid-template-columns: 1fr 320px;
    gap: 3rem;
    align-items: start;
}

.mn-appdetail__desc p {
    font-size: 1rem;
    line-height: 1.75;
    color: rgba(255, 255, 255, 0.55);
    margin-bottom: 1.25rem;
}

.mn-appdetail__info-card {
    background: rgba(255, 255, 255, 0.03);
    border: 1px solid rgba(255, 255, 255, 0.10);
    border-radius: 20px;
    padding: 0.4rem 1.25rem;
}

.mn-appdetail__info-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 0.9rem 0;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
}

.mn-appdetail__info-row:first-child {
    border-top: none;
}

.mn-appdetail__info-label {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.45);
}

.mn-appdetail__info-value {
    font-size: 0.85rem;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.85);
    text-align: right;
}

.mn-appdetail__info-value a {
    color: #F08E20;
    text-decoration: none;
    transition: color 0.2s ease;
}

.mn-appdetail__info-value a:hover {
    color: #F4BB32;
}

.mn-appdetail__related-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 1rem;
}

@media (max-width: 767px) {
    .mn-appdetail__layout {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

@media (max-width: 575px) {
    .mn-appdetail__shot-link {
        width: 300px;
        max-width: 78vw;
    }
}

/* Feature banner carousel — large editorial cards under the hero.
   Placeholder gradient + icon treatment stands in for real banner art/
   screenshots; each banner cycles through a fixed theme palette (below) so a
   row of several doesn't repeat the same two looks. User-controlled only
   (dots/arrows/swipe) — no auto-play. */
.mn-banner-carousel-wrap {
    position: relative;
}

.mn-banner-carousel {
    display: flex;
    gap: 1.1rem;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
    /* overflow-x: auto forces overflow-y to a clipping value too, so the
       hover lift (translateY(-3px) on .mn-banner) needs headroom above the
       content or its top gets cut off by the scroll container's edge. */
    padding-top: 6px;
    margin-top: -6px;
}

.mn-banner-carousel::-webkit-scrollbar {
    display: none;
}

.mn-banner {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    scroll-snap-align: start;
    flex: 0 0 calc(58% - 0.55rem);
    min-height: 150px;
    padding: 1.5rem 2rem;
    border-radius: 24px;
    border: 1px solid rgba(255, 255, 255, 0.08);
    text-decoration: none;
    transition: border-color 0.3s ease, transform 0.3s ease;
    /* Tinted per banner from the app's own sampled icon color (--mn-banner-tint). */
    background: linear-gradient(135deg, rgba(var(--mn-banner-tint, 240, 142, 32), 0.20) 0%, #17191c 65%);
}

.mn-banner:hover {
    border-color: rgba(255, 255, 255, 0.20);
    transform: translateY(-3px);
    text-decoration: none;
}

.mn-banner-nav {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    margin-top: 0.75rem;
}

.mn-banner-dots {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.mn-banner-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.18);
    border: none;
    padding: 0;
    transition: background 0.2s ease, transform 0.2s ease;
}

.mn-banner-dot:hover {
    background: rgba(255, 255, 255, 0.35);
}

.mn-banner-dot--active {
    background: #F08E20;
    transform: scale(1.25);
}

.mn-banner__glow {
    position: absolute;
    top: -35%;
    right: -15%;
    width: 60%;
    height: 140%;
    background: radial-gradient(circle closest-side, rgba(255, 255, 255, 0.08) 0%, transparent 100%);
    filter: blur(30px);
    pointer-events: none;
}

.mn-banner__text {
    position: relative;
    z-index: 1;
    max-width: 60%;
}

.mn-banner__eyebrow {
    font-size: 0.72rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.45);
    margin: 0 0 0.5rem;
}

.mn-banner__title {
    font-size: 1.6rem;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #fff;
    margin: 0 0 0.5rem;
}

.mn-banner__desc {
    font-size: 0.9rem;
    line-height: 1.5;
    color: rgba(255, 255, 255, 0.55);
    margin: 0 0 1.1rem;
}

.mn-banner__cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #F08E20;
}

.mn-banner__icon {
    position: relative;
    z-index: 1;
    width: 76px;
    height: 76px;
    object-fit: contain;
    flex-shrink: 0;
    filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.4));
}

.mn-banner__icon.mn-app-letter {
    font-size: 2.4rem;
}

@media (max-width: 767px) {
    .mn-banner {
        flex: 0 0 88%;
        min-height: 180px;
        padding: 1.5rem;
    }
    .mn-banner__text {
        max-width: 65%;
    }
    .mn-banner__icon {
        width: 64px;
        height: 64px;
    }
}

/* Compact action button for admin tables and action rows.
   Used where a state-changing GET link became a POST form (CSRF) - it reads
   as a button so it's clear the click submits rather than navigates. */
.mn-actionbtn {
    display: inline-block;
    background: transparent;
    color: rgba(255,255,255,0.60) !important;
    border: 1px solid rgba(255,255,255,0.15);
    border-radius: 999px;
    padding: 0.28rem 0.8rem;
    margin: 0 0.25rem 0.3rem 0;
    font-family: 'Inter', sans-serif;
    font-size: 0.78rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    text-decoration: none !important;
    cursor: pointer;
    transition: all 0.22s ease;
}
.mn-actionbtn:hover {
    background: rgba(255,255,255,0.06);
    border-color: rgba(255,255,255,0.30);
    color: rgba(255,255,255,0.85) !important;
}
.mn-actionbtn--danger {
    color: rgba(239,68,68,0.90) !important;
    border-color: rgba(239,68,68,0.35);
}
.mn-actionbtn--danger:hover {
    background: rgba(239,68,68,0.18);
    border-color: rgba(239,68,68,0.55);
    color: #ffffff !important;
}

.mn-actionbtn--sm {
    padding: 0.18rem 0.6rem;
    font-size: 0.7rem;
}

/* Action row: centered, content-width buttons, wrapping to new lines as needed. */
.mn-actionrow {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    align-items: center;
    justify-content: center;
}
.mn-actionrow form { display: inline; }
.mn-actionrow .mn-actionbtn {
    margin: 0;
    text-align: center;
}

/* Stacked variant for narrow table cells: shrinks to the widest button,
   then stretches every button to match it. */
.mn-actionrow--stack {
    display: inline-flex;
    flex-direction: column;
    align-items: stretch;
    gap: 0.3rem;
}
.mn-actionrow--stack form { display: block; }
.mn-actionrow--stack .mn-actionbtn { min-width: 0; width: 100%; }

/* Compact sizing inside admin data tables, where cells are tight.
   Buttons already marked --sm keep their own smaller size. */
.table-bordered td .mn-actionbtn:not(.mn-actionbtn--sm) {
    padding: 0.2rem 0.6rem;
    font-size: 0.72rem;
}

html[data-theme="light"] .mn-actionbtn {
    color: #374151 !important;
    border-color: #d1d5db;
}
html[data-theme="light"] .mn-actionbtn:hover {
    background: rgba(0,0,0,0.04);
    border-color: #9ca3af;
    color: #111827 !important;
}
html[data-theme="light"] .mn-actionbtn--danger {
    color: #b91c1c !important;
    border-color: rgba(185,28,28,0.35);
}
html[data-theme="light"] .mn-actionbtn--danger:hover {
    background: rgba(185,28,28,0.10);
    border-color: rgba(185,28,28,0.55);
    color: #7f1d1d !important;
}