.mobile-menu-overlay{

    position:fixed;

    inset:0;

    background:rgba(0,0,0,.4);

    opacity:0;

    visibility:hidden;

    transition:.3s;

    z-index:9998;
}

.strike-mobile-menu {
    position: fixed;
    top: 0;
    left: -320px;

    width: 320px;
    height: 100vh;
    height: 100dvh;

    background: #fff;
    transition: .35s;
    z-index: 9999;

    display: flex;
    flex-direction: column;

    box-sizing: border-box;

    /* The menu itself should NOT scroll */
    overflow: hidden;
}

/* Navigation is the only scrollable area */
.strike-mobile-menu .mobile-nav {
   
    min-height: 0;

    overflow-y: auto;
    overflow-x: hidden;

    -webkit-overflow-scrolling: touch;
}

/* ==========================================
   HEADER
========================================== */



/* ==========================================
   NAVIGATION
========================================== */


/* ==========================================
   ACCOUNT
========================================== */


.strike-mobile-menu .mobile-account {
    flex-shrink: 0;
}

/* Keep copyright at the bottom */
.strike-mobile-menu .mobile-footer {
    flex-shrink: 0;

    width: 100%;
    box-sizing: border-box;

    margin-top: auto;

    padding: 12px 16px;

    text-align: center;

    font-size: 11px;
    line-height: 16px;

    white-space: nowrap;

    border-top: 1px solid #eee;
}

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







.strike-mobile-menu.active{

    left:0;
}

.mobile-menu-overlay.active{

    opacity:1;

    visibility:visible;
}






.mobile-menu-search{
    padding:16px;
    border-bottom:1px solid #F3F4F6;
}

.mobile-menu-search form{
    display:flex;
    align-items:center;
    gap:10px;
    background:#F8FAFC;
    border:1px solid #E5E7EB;
    border-radius:12px;
    height:48px;
    padding:0 14px;
}

.mobile-menu-search img{
    flex-shrink:0;
    opacity:.6;
}

.mobile-menu-search input{
    flex:1;
    border:none;
    background:transparent;
    outline:none;
    font-size:15px;
    font-family:inherit;
    color:#111827;
}

.mobile-menu-search input::placeholder{
    color:#9CA3AF;
}

/*==========================
= Analytics Section
==========================*/

.mobile-nav{
    display:flex;
    flex-direction:column;
}

.mobile-item{
    border-bottom:1px solid #F3F4F6;
}

.mobile-link{
    width:100%;
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:12px 16px;
    border:0;
    background:#fff;
    cursor:pointer;
    font-size:16px;
    font-weight:600;
    color:#272A37;
}

.mobile-arrow{
    width:15px;
    height:15px;
    transition:.25s;
}

.mobile-arrow img{
    width:15px;
    display:block;
}

.mobile-item.active .mobile-arrow{
    transform:rotate(180deg);
}

.mobile-submenu{
    display:none;
}

.mobile-item.active .mobile-submenu{
    display:block;
}


/*==========================
= Analytics Header
==========================*/

.mobile-tools-header{

    display:flex;

    justify-content:space-between;

    align-items:flex-start;

    padding:0 16px;
}

.mobile-tools-left{

    flex:1;
}

.mobile-tools-title{

    display:block;

    font-size:12px;

    line-height:18px;

    color:#717378;

    margin-bottom:4px;
}

.mobile-tools-left p{

    margin:0;

    font-size:12px;

    line-height:18px;

    color:#717378;
}

.mobile-all-tools{

    display:flex;

    align-items:center;

    gap:4px;

    text-decoration:none;

    color:#2B7FFF;

    font-size:12px;

    font-weight:500;
}

.mobile-all-tools img{

    width:10px;
}


/*==========================
= Tool List
==========================*/

.mobile-tools-list{

    padding:12px 8px 16px;
}

.mobile-tool{

    display:flex;

    align-items:center;

    gap:12px;

    text-decoration:none;

    padding:8px;

    border-radius:14px;

    transition:.2s;
}

.mobile-tool:hover{

    background:#F9FAFB;
}


/*==========================
= Icon Box
==========================*/

.tool-icon{

  

    display:flex;

    align-items:center;

    justify-content:center;

    background:#fff;

 

    flex-shrink:0;
}

.tool-icon img{

    width:36px;

    height:36px;

    object-fit:contain;
}


/*==========================
= Tool Name
==========================*/

.tool-name{

    flex:1;

    font-size:14px;

    line-height:20px;

    font-weight:600;

    color:#1E2939;
}


/*==========================
= Badges
==========================*/

.tool-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    height:22px;

    padding:0 8px;

    border-radius:999px;

    font-size:10px;

    font-weight:600;

    letter-spacing:.3px;
}

.tool-badge.elite{

    background:#FAF5FF;

    color:#9810FA;

    border:1px solid #F3E8FF;
}

.tool-badge.pro{

    background:#EFF6FF;

    color:#155DFC;

    border:1px solid #DBEAFE;
}


/*==========================
= Research / Plans / Resources
==========================*/

.mobile-submenu>a{

    display:flex;

    justify-content:space-between;

    align-items:center;

    padding:14px 16px;

    text-decoration:none;

    color:#1E2939;

    font-size:14px;

    border-top:1px solid #F3F4F6;
}

.mobile-submenu>a:hover{

    background:#F9FAFB;
}


/*==========================
= LIVE Badge
==========================*/

.live-badge{

    display:inline-flex;

    align-items:center;

    justify-content:center;

    background:#FF3347;

    color:#fff;

    border-radius:999px;

    padding:2px 8px;

    font-size:10px;

    font-weight:600;
}


/*==========================
= Footer
==========================*/



.mobile-submenu {

  padding-left: 0px; 
}
 
.mobile-account{
    padding:24px 16px;
    border-top:1px solid #F3F4F6;
}

.mobile-login-btn{
    display:flex;
    align-items:center;
    justify-content:center;
    width:100%;
    height:38px;
    background:#000;
    color:#fff;
    text-decoration:none;
    border-radius:4px;
    font-size:16px;
    font-weight:600;
    margin-bottom:24px;
    transition:.2s;
}

.mobile-login-btn:hover{
    color:#fff;
    background:#111827;
}

.mobile-account-links{
    display:flex;
    flex-direction:column;
    gap:16px;
}

.mobile-account-link{
    display:flex;
    align-items:center;
    gap:10px;
    color:#155DFC;
    font-size:14px;
    font-weight:500;
    text-decoration:none;
}

.mobile-account-link img{
    width:20px;
    height:20px;
    object-fit:contain;
}

.strike-mobile-menu .mobile-footer {
    flex: 0 0 auto;

    width: 100%;
    min-height: 42px;
    height: auto;

    box-sizing: border-box;

    display: flex;
    align-items: center;
    justify-content: center;

    padding: 12px 16px;

    background: #fff;

    font-size: 11px;
    line-height: 16px;

    text-align: center;
    white-space: nowrap;

    border-top: 1px solid #eee;

    flex-shrink: 0;
}
.strike-mobile-menu {
    height: 100dvh;
    overflow: hidden;
}

.strike-mobile-menu .mobile-nav {
  
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

.mobile-footer {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    padding: 15px 20px;
    text-align: center;
    font-size: 12px;
    line-height: 18px;
    white-space: normal;
    overflow-wrap: break-word;
}



.mobile-nav {
    flex-shrink: 0;
}

.mobile-account {
    flex-shrink: 0;
}


/* ==========================================
   MOBILE MENU HEADER
   Figma: 320px × 62px
========================================== */

.mobile-menu-header {
    box-sizing: border-box;

    width: 320px;
    height: 62px;

    display: flex;
    flex-direction: row;

    justify-content: space-between;
    align-items: center;

    padding: 16px;

    flex: 0 0 62px;

    border-bottom: 1px solid #F3F4F6;

    position: relative;
}


/* ==========================================
   LOGO
========================================== */

.mobile-menu-header .mobile-logo {
    width: 48px;
    height: 13.71px;

    display: flex;
    align-items: center;

    flex: 0 0 48px;

    margin: 0;
    padding: 0;

    text-decoration: none;
}


/* Actual logo image */
.mobile-menu-header .mobile-logo img {
    display: block;

    width: 48px;
    height: auto;

    max-width: 48px;
    max-height: 14px;

    margin: 0;
    padding: 0;
}


/* ==========================================
   CLOSE BUTTON
   Figma: 29px × 29px
========================================== */

.mobile-menu-header .mobile-close {
    box-sizing: border-box;

    width: 29px;
    height: 29px;

    flex: 0 0 29px;

    display: flex;

    flex-direction: column;
    justify-content: center;
    align-items: center;

    padding: 6px;

    margin: 0;

    background: transparent;
    border: 0;

    border-radius: 10px;

    font-size: 22px;
    font-weight: 300;
    line-height: 17px;

    color: #99A1AF;

    cursor: pointer;

    position: static;
}


/* Make sure the X itself stays centered */
.mobile-menu-header .mobile-close {
    text-align: center;
}