.modal {
                display: none;
                position: fixed;
                z-index: 1;
                left: 0;
                top: 0;
                width: 100%;
                height: 100%;
                overflow: auto;
                background-color: rgba(0, 0, 0, 0.4);
            }
            .modal-content-app {
                /* background-color: #000435;
                */
                background-color: #2F3437;
                color: white;
                margin: 10% auto;
                padding: 20px;
                /* border: 1px solid #888;
                */
                border: 1px solid #4D5154;
                max-width: 500px;
            }
            .share-icon {
                background-color: #4D5154;
                border: 1px solid #4D5154;
            }
            .si {
                background-color: #000435;
                color: white;
                border: none;
            }
            .btn-end {
                margin-top: 2%;
                width: 30%;
                margin-left: auto;
            }
            .close {
                color: #aaa;
                float: right;
                font-size: 28px;
                font-weight: bold;
                cursor: pointer;
                text-align: end;
            }
            h6 i {
                margin-right: 5px;
            }

.dropdown-item {
                transition: all ease 0.3s;
            }
            .dropdown-item:hover {
                background-color: #414549;
                border-radius: 8px;
            }
            .nav-link:hover {
                background-color: #414549;
                border-radius: 8px;
            }
            .nav-link {
                transition: all ease 0.3s;
                padding: 4px;
            }
            .nav-dropdown-subitem {
                margin-left: 10px;
                border-left: 1px solid white;
            }
            .dropdown-menu li {
                position: relative;
            }
            .dropdown-menu .dropdown-submenu {
                display: none;
                position: absolute;
                left: 100%;
                top: -7px;
            }
            .dropdown-menu .dropdown-submenu-left {
                right: 100%;
                left: auto;
            }
            .dropdown-menu>li:hover>.dropdown-submenu {
                display: block;
            }

.mynav {
                color: #fff;
            }
            .mynav li a {
                color: #fff;
                text-decoration: none;
                width: 100%;
                display: block;
            }
            .nav-pills.mynav li a.active {
                background: rgba(255, 255, 255, 0.2);
                border-bottom-left-radius: 25px;
                border-top-left-radius: 25px;
            }
            .mynav li a:hover {
                background: rgba(255, 255, 255, 0.2);
            }
            .mynav li a i {
                width: 35px;
                text-align: center;
            }
            /* #app {
                min-height: 100vh;
            }
            */
            .app-lay {
                min-height: 100vh;
            }

.offcanvas {
                transition: all ease 0.5s;
            }
            .offcanvas-body::-webkit-scrollbar {
                width: 7px;
            }
            .offcanvas-body::-webkit-scrollbar-track {
                background-color: #000;
            }
            .offcanvas-body::-webkit-scrollbar-thumb {
                background-color: #424649;
                border-radius: 10px;
            }

.overlay {
                /* Standard syntax */
                backdrop-filter: blur(3px);
                /* Vendor Prefixes for broader compatibility */
                -webkit-backdrop-filter: blur(3px);
            }
            .toggle {
                width: 40px;
                height: 40px;
                border-radius: 50%;
                display: grid;
                place-items: center;
                cursor: pointer;
                line-height: 1;
            }
            .toggle .icon svg {
                width: 22px;
                height: 22px;
            }
            .input {
                display: none;
            }
            .icon {
                grid-column: 1 / 1;
                grid-row: 1 / 1;
                transition: transform 0.3s ease;
            }
            .icon--moon {
                transform: scale(0);
                color: #fff;
            }
            .icon--sun {
                transition-delay: 100ms;
                color: yellow;
            }
            /* Apply animation to moon icon when switch is checked */
            #switch:checked+.icon--moon {
                transform: scale(1) rotate(360deg);
            }
            /* Apply animation to sun icon when switch is checked */
            #switch:checked~.icon--sun {
                transform: rotate(360deg) scale(0);
            }
            @keyframes animate {
                0%, 100% {
                    transform: translateZ(-100px);
                }
                50% {
                    transform: translateZ(100px);
                }
            }
            @keyframes loading6454 {
                0%, 100% {
                    transform: translateY(0);
                }
                50% {
                    transform: translateY(-10px);
                }
            }

.no-decoration {
                text-decoration: none;
            }

            .text-light {
                color: #ffffff;
                /* Adjust as needed */
            }

            .bg-dark {
                /* background-color: #343a40; */
                background-color: rgb(6 6 6 / 91%) !important;
                /* Adjust as needed */
            }

            @media (max-width: 768px) {
                .collapse.show {
                    display: block !important;
                }

                .collapse:not(.show) {
                    display: none !important;
                }
            }

[data-bs-theme="dark"] {
                --spinner-color: #f3f3f3 !important;
            }
            [data-bs-theme="light"] {
                --spinner-color: #212529 !important;
            }
            .sk-chase {
                width: 40px;
                height: 40px;
                position: absolute;
                top: 50%;
                left: 50%;
                z-index: 999;
                animation: sk-chase 2.5s infinite linear both;
            }
            .sk-chase-dot {
                width: 100%;
                height: 100%;
                position: absolute;
                left: 0;
                top: 0;
                animation: sk-chase-dot 2.0s infinite ease-in-out both;
            }
            .sk-chase-dot:before {
                content: '';
                display: block;
                width: 25%;
                height: 25%;
                background-color: var(--spinner-color);
                border-radius: 100%;
                animation: sk-chase-dot-before 2.0s infinite ease-in-out both;
            }
            .sk-chase-dot:nth-child(1) {
                animation-delay: -1.1s;
            }
            .sk-chase-dot:nth-child(2) {
                animation-delay: -1.0s;
            }
            .sk-chase-dot:nth-child(3) {
                animation-delay: -0.9s;
            }
            .sk-chase-dot:nth-child(4) {
                animation-delay: -0.8s;
            }
            .sk-chase-dot:nth-child(5) {
                animation-delay: -0.7s;
            }
            .sk-chase-dot:nth-child(6) {
                animation-delay: -0.6s;
            }
            .sk-chase-dot:nth-child(1):before {
                animation-delay: -1.1s;
            }
            .sk-chase-dot:nth-child(2):before {
                animation-delay: -1.0s;
            }
            .sk-chase-dot:nth-child(3):before {
                animation-delay: -0.9s;
            }
            .sk-chase-dot:nth-child(4):before {
                animation-delay: -0.8s;
            }
            .sk-chase-dot:nth-child(5):before {
                animation-delay: -0.7s;
            }
            .sk-chase-dot:nth-child(6):before {
                animation-delay: -0.6s;
            }
            @keyframes sk-chase {
                100% {
                    transform: rotate(360deg);
                }
            }
            @keyframes sk-chase-dot {
                80%, 100% {
                    transform: rotate(360deg);
                }
            }
            @keyframes sk-chase-dot-before {
                50% {
                    transform: scale(0.4);
                }
                100%, 0% {
                    transform: scale(1.0);
                }
            }

[data-bs-theme="dark"] {
                --app-toast-backdrop-filter: blur(16px) saturate(180%);
                --app-toast-webkit-backdrop-filter: blur(16px) saturate(180%);
                --app-toast-background-color: rgba(24, 24, 29, 0.75);
                --app-toast-border-radius: 12px;
                --app-toast-border: 1px solid rgba(255, 255, 255, 0.125);
            }
            [data-bs-theme="light"] {
                --app-toast-backdrop-filter: blur(25px) saturate(180%);
                --app-toast-webkit-backdrop-filter: blur(25px) saturate(180%);
                --app-toast-background-color: rgba(225, 225, 226, 0.75);
                --app-toast-border-radius: 12px;
                --app-toast-border: 1px solid rgba(255, 255, 255, 0.125);
            }
            .app-toast {
                position: fixed;
                font-family: "Poppins", sans-serif;
                bottom: 12px;
                z-index: 1000;
                right: 30px;
                border-radius: 12px;
                backdrop-filter: var(--app-toast-backdrop-filter);
                -webkit-backdrop-filter: var(--app-toast-webkit-backdrop-filter);
                background-color: var(--app-toast-background-color);
                border-radius: var(--app-toast-border-radius);
                border: var(--app-toast-border);
                padding: 20px 35px 20px 25px;
                box-shadow: 0 6px 20px -5px rgba(0, 0, 0, 0.1);
                overflow: hidden;
                transform: translateX(calc(100% + 30px));
                transition: all 0.5s cubic-bezier(0.68, -0.55, 0.265, 1.35);
                opacity: 0;
                display: none;
                /* Start hidden */
            }
            .app-toast.active {
                display: block;
                /* Show the toast */
                transform: translateX(0%);
                opacity: 1;
            }
            .app-toast .app-toast-content {
                display: flex;
                align-items: center;
            }
            .app-toast-content .app-check-icon {
                display: flex;
                align-items: center;
                justify-content: center;
                height: 35px;
                min-width: 35px;
                background-color: #4070f4;
                color: #fff;
                font-size: 20px;
                border-radius: 50%;
            }
            .app-toast-content .app-message {
                display: flex;
                flex-direction: column;
                margin: 0 20px;
            }
            .app-message .app-text {
                font-size: 16px;
                font-weight: 400;
                color: var(--bs-heading-color);
            }
            .app-message .app-text.app-text-1 {
                font-weight: 600;
                color: var(--bs-heading-color);
            }
            .app-toast .app-close-icon {
                position: absolute;
                top: 10px;
                right: 15px;
                padding: 5px;
                cursor: pointer;
                opacity: 0.7;
            }
            .app-toast .app-close-icon:hover {
                opacity: 1;
            }
            .app-toast .app-progress {
                position: absolute;
                bottom: 0;
                left: 0;
                height: 3px;
                width: 100%;
            }
            .app-toast .app-progress:before {
                content: "";
                position: absolute;
                bottom: 0;
                right: 0;
                height: 100%;
                width: 100%;
                background-color: #4070f4;
            }
            .app-progress.active:before {
                animation: app-progress-animation 2s linear forwards;
            }
            @keyframes app-progress-animation {
                100% {
                    right: 100%;
                }
            }

@media (max-width: 576px) {
                #sub-menu-ul {
                    left: 175px !important;
                }
            }

/* Navbar partial cleanup (resources/views/layouts/partials/navbar.blade.php) */
#navbar .nav-item-hidden {
    list-style-type: none;
    display: none;
}

#navbar .navbar-icon-btn {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

#navbar .navbar-menu-icon {
    color: var(--bs-white, #fff);
    font-size: 20px;
    line-height: 1;
}

#navbar .navbar-toggler-clean {
    border: none;
    font-size: 19px;
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* DEFECT-ROUTES-20260815 row 18: duplicate guest Login control — restore Bootstrap's
   .navbar-expand-md hide the ID rule above defeats; the @guest script (layouts/app.blade.php:724-738) then hides .nav-item.login.
   769 not 768: app-layout.css:204 (max-width:768 !important, pre-existing) keeps the collapse
   hidden at EXACTLY 768, so hiding the toggler there too would leave zero Login controls
   (pixel-proven dead band); the duplicate-Login band honestly starts at 769. */
@media (min-width: 769px) {
    #navbar .navbar-toggler-clean {
        display: none;
    }
}

#navbar .navbar-avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

#navbar .navbar-user-menu {
    right: -12px;
    left: auto;
}

#navbar .theme-icon-svg {
    width: 25px;
    height: 25px;
}

#navbar .nav-divider {
    color: var(--bs-white, #fff);
    opacity: 0.7;
}

#navbar .credits-label {
    margin: 0 !important;
    font-size: 12px !important;
}

#navbar .credits-value {
    margin: 0 !important;
    color: var(--ns-text-muted, #cccccc);
}

.dropdown-menu .dropdown-submenu.dropdown-submenu-left {
    right: 100%;
    left: auto;
    top: 0;
}

#navbar .nav-link,
#navbar .dropdown-item,
#navbar .netshow-nav-item,
#navbar .netshow-nav-trigger {
    min-height: 44px;
}

#navbar .nav-link,
#navbar .dropdown-item {
    display: flex;
    align-items: center;
}

@media screen and (max-width: 441px) {
    #credits_section {
        display: none;
    }

    #user_credits {
        display: block !important;
    }
}

/* ── User-menu Appearance controls (WS2 chrome polish) ──
   One clean labeled row set: color mode as a segmented Light/Dark control,
   accent color as swatch buttons. Replaces the unlabeled circle toggle in
   the navbar user menu (the .toggle rules above remain for pages that still
   carry their own copy of the legacy switch markup, e.g. act_chat). */
.ns-appearance {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.ns-appearance-label {
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    color: var(--ns-text-secondary, #9ca3af);
}

.ns-mode-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.04);
}

.ns-mode-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    min-height: 30px;
    padding: 0.2rem 0.7rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: var(--ns-text-secondary, #9ca3af);
    font-size: 0.78rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
}

.ns-mode-btn:hover {
    color: var(--ns-text-primary, #fff);
}

.ns-mode-btn[aria-pressed="true"] {
    background: var(--ns-accent, #f59e0b);
    color: #1a1a1a;
}

.ns-theme-swatch {
    width: 26px;
    height: 26px;
    padding: 0;
    border-radius: 50%;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color 0.15s ease, transform 0.15s ease;
}

.ns-theme-swatch[data-theme="gold"] {
    background: linear-gradient(135deg, #f59e0b, #d97706);
}

.ns-theme-swatch[data-theme="silver"] {
    background: linear-gradient(135deg, #94a3b8, #64748b);
}

.ns-theme-swatch:hover {
    transform: scale(1.08);
}

.ns-theme-swatch.active {
    border-color: #fff;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

[data-bs-theme="light"] .ns-mode-switch {
    border-color: rgba(0, 0, 0, 0.14);
    background: rgba(0, 0, 0, 0.04);
}

[data-bs-theme="light"] .ns-theme-swatch.active {
    border-color: #1f2937;
    box-shadow: 0 0 0 2px rgba(31, 41, 55, 0.2);
}

/* ── Docked-widget clearance on phones (WS2 doorway critique) ──
   The communicator fab docks bottom-left (56px). Without clearance it sits
   over the last form controls on small screens (flagged on celebrity-selfie,
   skillflow, interviewer, marketplace at 375px). Give every app-layout page
   scroll room so content can always clear the widget.
   Line 14656: only where no visible footer follows main. With a footer the page
   ends at that footer and this room drew an empty ~84px band above it
   (/marketplace/agents, /docs at 375); the pill's own room under the footer
   keeps its last link clear. */
@media (max-width: 575.98px) {
    body:not(:has(footer.ns-footer:not(.d-none), footer.netshow-footer:not(.d-none))) main#main-content {
        padding-bottom: 84px;
    }
}