.sidebar nav a{display:flex;align-items:center;gap:12px;min-height:42px;padding:10px 12px;line-height:1.1;font-weight:600}.nav-icon{display:grid;place-items:center;flex:0 0 24px;width:24px;height:24px;border:1px solid rgba(126,147,133,.28);border-radius:5px;text-align:center;font-size:8px;font-weight:800;letter-spacing:.4px;line-height:1;color:#95aa9c}.sidebar nav a.active .nav-icon,.sidebar nav a:hover .nav-icon{border-color:var(--green);color:var(--green);background:rgba(35,228,135,.08)}.mobile-dock-more{display:none}

@media(max-width:800px){
    body.menu-open{overflow:hidden}
    .menu-btn{
        width:44px!important;
        height:44px;
        padding:0!important;
        border:1px solid rgba(0,216,255,.48)!important;
        border-radius:14px;
        background:radial-gradient(circle at 70% 15%,rgba(255,196,68,.22),transparent 36%),linear-gradient(145deg,rgba(8,23,42,.96),rgba(3,8,17,.98))!important;
        box-shadow:0 0 20px rgba(0,216,255,.16),inset 0 0 0 1px rgba(255,255,255,.04);
    }
    .menu-btn span{
        width:19px;
        height:2px!important;
        margin:4px auto!important;
        border-radius:999px;
        background:linear-gradient(90deg,var(--blue),var(--amber))!important;
        box-shadow:0 0 8px rgba(0,216,255,.35);
        transition:transform .22s ease,opacity .22s ease;
    }
    .menu-open .menu-btn span:first-child{transform:translateY(6px) rotate(45deg)}
    .menu-open .menu-btn span:nth-child(2){opacity:0}
    .menu-open .menu-btn span:last-child{transform:translateY(-6px) rotate(-45deg)}
    .sidebar-shade{
        display:block!important;
        position:fixed;
        inset:0;
        z-index:90;
        background:rgba(1,5,12,.72);
        backdrop-filter:blur(10px);
        opacity:0;
        visibility:hidden;
        transition:opacity .25s ease,visibility .25s ease;
    }
    .menu-open .sidebar-shade{opacity:1;visibility:visible}
    .sidebar{
        left:10px!important;
        right:10px!important;
        top:auto!important;
        bottom:10px!important;
        width:auto!important;
        height:min(82vh,720px);
        padding:14px!important;
        border:1px solid rgba(0,216,255,.48)!important;
        border-radius:28px 28px 22px 22px;
        background:
            radial-gradient(circle at 16% 0,rgba(0,216,255,.22),transparent 30%),
            radial-gradient(circle at 86% 8%,rgba(255,196,68,.18),transparent 30%),
            linear-gradient(145deg,rgba(8,23,42,.98),rgba(2,7,17,.99))!important;
        box-shadow:0 -18px 80px rgba(0,0,0,.62),0 0 36px rgba(0,216,255,.18),inset 0 0 0 1px rgba(255,255,255,.035);
        overflow:hidden;
        transform:translateY(calc(100% + 28px)) scale(.98)!important;
        opacity:.98;
        transition:transform .34s cubic-bezier(.2,.82,.2,1),opacity .24s ease!important;
    }
    .menu-open .sidebar{transform:translateY(0) scale(1)!important}
    .sidebar:before{
        content:"";
        position:absolute;
        left:-30%;
        right:-30%;
        top:78px;
        height:2px;
        background:linear-gradient(90deg,transparent,var(--blue),var(--green),var(--amber),transparent);
        opacity:.6;
        filter:blur(.2px);
        animation:mobileMenuScan 3.2s ease-in-out infinite;
        pointer-events:none;
    }
    .sidebar:after{
        content:"";
        position:absolute;
        right:18px;
        top:86px;
        width:118px;
        height:46px;
        border-bottom:2px solid rgba(38,245,167,.55);
        border-radius:0 0 70% 0;
        transform:skewX(-18deg);
        opacity:.28;
        box-shadow:18px -11px 0 -10px rgba(255,196,68,.55),38px -20px 0 -18px rgba(0,216,255,.55);
        pointer-events:none;
    }
    .sidebar-head{
        position:relative;
        z-index:2;
        min-height:58px;
        padding:0 4px 12px!important;
        border-bottom:1px solid rgba(0,216,255,.16);
    }
    .sidebar-head .brand{font-size:1.15rem}
    .sidebar-head .brand img{
        width:48px;
        height:48px;
        border-radius:15px;
        box-shadow:0 0 22px rgba(0,216,255,.24),0 0 20px rgba(255,196,68,.14);
    }
    .sidebar-close{
        display:grid!important;
        place-items:center;
        width:42px;
        height:42px;
        border:1px solid rgba(255,88,116,.38)!important;
        border-radius:14px;
        background:rgba(255,88,116,.10)!important;
        color:#ffd8df!important;
        font-size:24px!important;
        line-height:1!important;
    }
    .account-pill{
        position:relative;
        z-index:2;
        margin:12px 0 14px!important;
        min-height:76px;
        border-radius:20px!important;
        border-color:rgba(0,216,255,.35)!important;
        background:
            linear-gradient(90deg,rgba(0,216,255,.10),transparent 42%),
            radial-gradient(circle at 86% 18%,rgba(38,245,167,.18),transparent 32%),
            #06111f!important;
        box-shadow:inset 0 0 0 1px rgba(255,255,255,.035);
    }
    .account-pill:after{
        content:"LIVE BOT";
        position:absolute;
        right:13px;
        bottom:12px;
        color:var(--green);
        font-size:8px;
        font-weight:900;
        letter-spacing:1px;
    }
    .account-pill .avatar{
        width:48px;
        height:48px;
        border-radius:16px;
        border-color:var(--amber);
        background:radial-gradient(circle at 70% 0,rgba(255,196,68,.23),transparent 42%),#020711;
        font-size:15px;
        box-shadow:0 0 18px rgba(255,196,68,.18);
    }
    .account-pill b{font-size:14px!important}
    .account-pill small{font-size:10px!important;color:#9fc8ee!important}
    .sidebar nav{
        position:relative;
        z-index:2;
        display:grid!important;
        grid-template-columns:repeat(2,minmax(0,1fr));
        gap:10px!important;
        padding:2px 2px 10px;
        overflow:auto;
        scrollbar-width:thin;
        scrollbar-color:rgba(255,196,68,.7) rgba(255,255,255,.08);
    }
    .sidebar nav a{
        min-height:84px!important;
        display:grid!important;
        grid-template-columns:1fr;
        justify-items:start;
        align-content:center;
        gap:9px!important;
        padding:12px!important;
        border:1px solid rgba(35,89,134,.74)!important;
        border-left:1px solid rgba(35,89,134,.74)!important;
        border-radius:20px!important;
        background:
            radial-gradient(circle at 88% 0,rgba(0,216,255,.12),transparent 36%),
            linear-gradient(145deg,rgba(8,23,42,.92),rgba(3,9,18,.96))!important;
        color:#d7e8fb!important;
        box-shadow:0 14px 34px rgba(0,0,0,.22),inset 0 0 0 1px rgba(255,255,255,.025);
        animation:mobileMenuCardIn .38s ease both;
        overflow:hidden;
    }
    .sidebar nav a:nth-child(2n){animation-delay:.035s}
    .sidebar nav a:nth-child(3n){animation-delay:.07s}
    .sidebar nav a:nth-child(4n){animation-delay:.105s}
    .sidebar nav a:before{
        content:"";
        position:absolute;
        left:12px;
        right:12px;
        bottom:8px;
        height:3px;
        border-radius:999px;
        background:linear-gradient(90deg,var(--blue),var(--green),var(--amber));
        opacity:.22;
    }
    .sidebar nav a .nav-icon{
        width:36px!important;
        height:36px!important;
        flex:0 0 36px!important;
        border-radius:13px!important;
        border-color:rgba(0,216,255,.42)!important;
        background:#020711!important;
        color:var(--blue)!important;
        box-shadow:0 0 16px rgba(0,216,255,.13);
    }
    .sidebar nav a .nav-icon svg{width:22px!important;height:22px!important}
    .sidebar nav a span:last-child{
        max-width:100%;
        font-size:12px;
        font-weight:900;
        line-height:1.2;
        letter-spacing:.1px;
    }
    .sidebar nav a.active{
        border-color:rgba(255,196,68,.88)!important;
        background:
            radial-gradient(circle at 88% 0,rgba(255,196,68,.22),transparent 38%),
            linear-gradient(145deg,rgba(11,31,52,.98),rgba(7,18,30,.98))!important;
        color:#fff!important;
        box-shadow:0 18px 42px rgba(255,196,68,.12),0 0 28px rgba(0,216,255,.12),inset 0 0 0 1px rgba(255,196,68,.14);
        transform:translateY(-2px);
    }
    .sidebar nav a.active .nav-icon{
        color:#06111f!important;
        background:linear-gradient(135deg,var(--amber),#ffe08a)!important;
        border-color:var(--amber)!important;
        box-shadow:0 0 22px rgba(255,196,68,.34);
    }
    .sidebar nav a:hover{transform:translateY(-2px)}
    .sidebar-foot{
        position:relative;
        z-index:2;
        margin-top:8px!important;
        padding:11px 14px!important;
        border:1px solid rgba(38,245,167,.24)!important;
        border-radius:999px;
        background:rgba(38,245,167,.07);
        color:#a9d9c9!important;
        text-align:center;
    }
}

@media(max-width:390px){
    .sidebar nav{grid-template-columns:1fr}
    .sidebar{height:min(86vh,740px)}
    .sidebar nav a{min-height:70px!important;grid-template-columns:40px 1fr!important;align-items:center;justify-items:start}
}

@keyframes mobileMenuScan{
    0%,100%{transform:translateY(0);opacity:.25}
    50%{transform:translateY(430px);opacity:.75}
}

@keyframes mobileMenuCardIn{
    from{opacity:0;transform:translateY(14px) scale(.96)}
    to{opacity:1;transform:translateY(0) scale(1)}
}

@media(max-width:800px){
    .workspace{padding-bottom:118px!important}
    body:not(.menu-open) .sidebar-shade{opacity:0!important;visibility:hidden!important;pointer-events:none!important}
    body:not(.menu-open) .sidebar{
        left:8px!important;
        right:8px!important;
        bottom:8px!important;
        top:auto!important;
        width:auto!important;
        height:86px!important;
        min-height:0!important;
        padding:8px!important;
        border-radius:24px!important;
        transform:translateY(0) scale(1)!important;
        opacity:1!important;
        z-index:950!important;
        border-color:rgba(0,216,255,.5)!important;
        background:
            radial-gradient(circle at 18% 0,rgba(0,216,255,.18),transparent 36%),
            radial-gradient(circle at 82% 0,rgba(255,196,68,.18),transparent 36%),
            linear-gradient(145deg,rgba(8,23,42,.98),rgba(2,7,17,.99))!important;
        box-shadow:0 -14px 46px rgba(0,0,0,.58),0 0 28px rgba(0,216,255,.18)!important;
    }
    body:not(.menu-open) .sidebar:before{
        left:8px;
        right:8px;
        top:6px;
        height:2px;
        transform:none!important;
        animation:mobileMenuDockScan 2.8s linear infinite;
    }
    body:not(.menu-open) .sidebar:after,
    body:not(.menu-open) .sidebar-head,
    body:not(.menu-open) .account-pill,
    body:not(.menu-open) .sidebar-foot{display:none!important}
    .mobile-dock-more{
        display:none;
    }
    body:not(.menu-open) .mobile-dock-more{
        display:grid;
        place-items:center;
        position:absolute;
        left:50%;
        top:8px;
        width:58px;
        height:58px;
        border:1px solid rgba(255,196,68,.92);
        border-radius:22px;
        background:
            radial-gradient(circle at 70% 0,rgba(38,245,167,.26),transparent 40%),
            linear-gradient(135deg,var(--amber),#ffe08a);
        color:#06111f;
        font:900 30px 'Space Grotesk',sans-serif;
        transform:translateX(-50%) translateY(-18px);
        box-shadow:0 0 0 8px rgba(2,7,17,.78),0 0 30px rgba(255,196,68,.42),0 16px 32px rgba(0,0,0,.35);
        z-index:4;
    }
    body:not(.menu-open) .mobile-dock-more:after{
        content:"";
        position:absolute;
        inset:-8px;
        border:1px solid rgba(0,216,255,.28);
        border-radius:28px;
        animation:mobileDockPlusPulse 2s ease-in-out infinite;
    }
    body.menu-open .mobile-dock-more{display:none}
    body:not(.menu-open) .sidebar nav{
        display:grid!important;
        grid-template-columns:repeat(5,minmax(0,1fr))!important;
        gap:7px!important;
        height:100%;
        padding:4px 2px 0!important;
        overflow:hidden!important;
        scrollbar-width:none;
        align-items:center;
    }
    body:not(.menu-open) .sidebar nav::-webkit-scrollbar{display:none}
    body:not(.menu-open) .sidebar nav a{
        display:none!important;
        min-width:0;
        min-height:64px!important;
        grid-template-columns:1fr!important;
        justify-items:center!important;
        align-content:center!important;
        gap:5px!important;
        padding:8px 6px!important;
        border-radius:18px!important;
        animation:none!important;
        text-align:center;
    }
    body:not(.menu-open) .sidebar nav a:nth-child(1),
    body:not(.menu-open) .sidebar nav a:nth-child(2),
    body:not(.menu-open) .sidebar nav a:nth-child(3),
    body:not(.menu-open) .sidebar nav a:nth-child(4),
    body:not(.menu-open) .sidebar nav a.active{
        display:grid!important;
    }
    body:not(.menu-open) .sidebar nav a:nth-child(1){grid-column:1}
    body:not(.menu-open) .sidebar nav a:nth-child(2){grid-column:2}
    body:not(.menu-open) .sidebar nav a:nth-child(3){grid-column:4}
    body:not(.menu-open) .sidebar nav a:nth-child(4){grid-column:5}
    body:not(.menu-open) .sidebar nav:has(a.active:nth-child(n+5)) a:nth-child(4){
        display:none!important;
    }
    body:not(.menu-open) .sidebar nav a.active:nth-child(n+5){
        grid-column:5;
        grid-row:1;
    }
    body:not(.menu-open) .sidebar nav a:before{
        left:12px;
        right:12px;
        bottom:5px;
        height:2px;
    }
    body:not(.menu-open) .sidebar nav a .nav-icon{
        width:30px!important;
        height:30px!important;
        border-radius:11px!important;
    }
    body:not(.menu-open) .sidebar nav a .nav-icon svg{
        width:18px!important;
        height:18px!important;
    }
    body:not(.menu-open) .sidebar nav a span:last-child{
        font-size:9px!important;
        line-height:1.05!important;
        max-width:100%;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    body:not(.menu-open) .sidebar nav a.active{
        transform:translateY(-4px)!important;
        box-shadow:0 12px 30px rgba(255,196,68,.16),0 0 22px rgba(0,216,255,.12)!important;
    }
    body.menu-open .sidebar{
        z-index:100!important;
    }
}

@keyframes mobileMenuDockScan{
    from{transform:translateX(-55%);opacity:.25}
    50%{opacity:.85}
    to{transform:translateX(55%);opacity:.25}
}

@keyframes mobileDockPlusPulse{
    0%,100%{transform:scale(.94);opacity:.45}
    50%{transform:scale(1.08);opacity:1}
}

@media(max-width:800px){
    .menu-btn{display:none!important}
}

.nav-label{min-width:0}
.nav-full{display:inline}
.nav-short{display:none}
.mobile-recharge-cta{display:none}

@media(max-width:800px){
    .topbar{
        position:sticky!important;
        min-height:74px!important;
        padding:10px 14px!important;
        gap:8px!important;
    }
    .topbar-left{
        min-width:0;
        flex:1 1 auto;
    }
    .topbar-left h1{
        font-size:16px!important;
        max-width:148px;
        white-space:nowrap;
        overflow:hidden;
        text-overflow:ellipsis;
    }
    .top-actions{
        flex:0 0 auto;
        gap:6px!important;
    }
    .top-actions .live-chip,.top-actions .date-chip{
        display:none!important;
    }
    .mobile-recharge-cta{
        position:relative;
        display:grid!important;
        flex:0 0 auto;
        min-width:112px;
        padding:8px 13px 9px 32px;
        border:1px solid rgba(255,77,210,.68);
        border-radius:16px;
        background:
            radial-gradient(circle at 16% 42%,rgba(255,77,210,.38),transparent 28%),
            linear-gradient(135deg,rgba(255,196,68,.18),rgba(0,216,255,.08));
        color:#ff67dc!important;
        line-height:1.05;
        box-shadow:0 0 24px rgba(255,77,210,.22),inset 0 0 0 1px rgba(255,255,255,.05);
        animation:rechargeCtaPulse 2.4s ease-in-out infinite;
    }
    .mobile-recharge-cta:before{
        content:"";
        position:absolute;
        left:12px;
        top:50%;
        width:12px;
        height:12px;
        border-radius:50%;
        transform:translateY(-50%);
        background:var(--amber);
        box-shadow:0 0 14px var(--amber);
    }
    .mobile-recharge-cta:after{
        content:"";
        position:absolute;
        left:18px;
        bottom:-10px;
        width:36px;
        height:20px;
        border-left:3px solid #ff4fd5;
        border-bottom:3px solid #ff4fd5;
        border-radius:0 0 0 14px;
        transform:rotate(-32deg);
        opacity:.8;
        pointer-events:none;
    }
    .mobile-recharge-cta span{
        font:900 15px/1.05 'Space Grotesk',sans-serif;
    }
    .mobile-recharge-cta b{
        color:#ffc64a;
        font-size:10px;
        font-weight:900;
        letter-spacing:.2px;
    }
    .workspace{padding-bottom:112px!important}
    body:not(.menu-open) .sidebar{
        left:12px!important;
        right:12px!important;
        bottom:calc(10px + env(safe-area-inset-bottom,0px))!important;
        height:78px!important;
        padding:8px 10px!important;
        border-radius:23px!important;
        overflow:visible!important;
        z-index:950!important;
        background:
            linear-gradient(180deg,rgba(10,31,49,.94),rgba(3,9,18,.98))!important;
        border:1px solid rgba(0,216,255,.42)!important;
        box-shadow:0 -10px 36px rgba(0,0,0,.54),0 0 26px rgba(0,216,255,.16),inset 0 0 0 1px rgba(255,255,255,.035)!important;
    }
    body:not(.menu-open) .sidebar:before{
        left:16px!important;
        right:16px!important;
        top:-1px!important;
        height:2px!important;
        border-radius:999px;
        background:linear-gradient(90deg,transparent,var(--blue),var(--green),var(--amber),transparent)!important;
        opacity:.7;
    }
    body:not(.menu-open) .sidebar nav{
        display:grid!important;
        grid-template-columns:1fr 1fr 56px 1fr 1fr!important;
        gap:8px!important;
        align-items:center!important;
        height:62px!important;
        padding:0!important;
        overflow:visible!important;
    }
    body:not(.menu-open) .sidebar nav a{
        display:none!important;
        position:relative;
        min-width:0!important;
        min-height:60px!important;
        height:60px!important;
        padding:6px 4px!important;
        border:0!important;
        border-radius:18px!important;
        background:transparent!important;
        box-shadow:none!important;
        color:#b9cbe0!important;
        text-align:center!important;
        justify-items:center!important;
        align-content:center!important;
        gap:4px!important;
        transform:none!important;
    }
    body:not(.menu-open) .sidebar nav a:nth-child(1),
    body:not(.menu-open) .sidebar nav a:nth-child(2),
    body:not(.menu-open) .sidebar nav a:nth-child(3),
    body:not(.menu-open) .sidebar nav a:nth-child(4),
    body:not(.menu-open) .sidebar nav a.active{
        display:grid!important;
    }
    body:not(.menu-open) .sidebar nav a:nth-child(1){grid-column:1!important}
    body:not(.menu-open) .sidebar nav a:nth-child(2){grid-column:2!important}
    body:not(.menu-open) .sidebar nav a:nth-child(3){grid-column:4!important}
    body:not(.menu-open) .sidebar nav a:nth-child(4){grid-column:5!important}
    body:not(.menu-open) .sidebar nav:has(a.active:nth-child(n+5)) a:nth-child(4){display:none!important}
    body:not(.menu-open) .sidebar nav a.active:nth-child(n+5){
        grid-column:5!important;
        grid-row:1!important;
    }
    body:not(.menu-open) .sidebar nav a:before{
        display:none!important;
    }
    body:not(.menu-open) .sidebar nav a:after{
        content:"";
        position:absolute;
        left:16px;
        right:16px;
        bottom:4px;
        height:2px;
        border-radius:999px;
        background:transparent;
    }
    body:not(.menu-open) .sidebar nav a.active{
        color:#fff!important;
        background:linear-gradient(180deg,rgba(255,196,68,.14),rgba(0,216,255,.04))!important;
        box-shadow:inset 0 0 0 1px rgba(255,196,68,.36),0 8px 22px rgba(255,196,68,.12)!important;
    }
    body:not(.menu-open) .sidebar nav a.active:after{
        background:linear-gradient(90deg,var(--blue),var(--green),var(--amber));
    }
    body:not(.menu-open) .sidebar nav a .nav-icon{
        width:31px!important;
        height:31px!important;
        border-radius:12px!important;
        border:1px solid rgba(0,216,255,.24)!important;
        background:#020711!important;
        color:var(--blue)!important;
        box-shadow:0 0 12px rgba(0,216,255,.08)!important;
    }
    body:not(.menu-open) .sidebar nav a.active .nav-icon{
        color:#06111f!important;
        background:linear-gradient(135deg,var(--amber),#ffe28f)!important;
        border-color:rgba(255,196,68,.9)!important;
        box-shadow:0 0 18px rgba(255,196,68,.28)!important;
    }
    body:not(.menu-open) .sidebar nav a .nav-icon svg{
        width:18px!important;
        height:18px!important;
    }
    body:not(.menu-open) .sidebar nav a .nav-label{
        max-width:100%;
        display:block!important;
        font-size:9px!important;
        line-height:1.05!important;
        font-weight:900!important;
        letter-spacing:0!important;
        white-space:nowrap!important;
        overflow:hidden!important;
        text-overflow:clip!important;
    }
    body:not(.menu-open) .nav-full{display:none!important}
    body:not(.menu-open) .nav-short{display:inline!important}
    body:not(.menu-open) .mobile-dock-more{
        display:grid!important;
        place-items:center!important;
        left:50%!important;
        top:50%!important;
        width:52px!important;
        height:52px!important;
        border-radius:18px!important;
        transform:translate(-50%,-50%)!important;
        border:1px solid rgba(255,196,68,.95)!important;
        background:linear-gradient(135deg,#ffd66f,var(--amber))!important;
        color:#06111f!important;
        font:900 28px/1 'Space Grotesk',sans-serif!important;
        box-shadow:0 10px 28px rgba(255,196,68,.22),0 0 0 5px rgba(2,7,17,.72)!important;
    }
    body:not(.menu-open) .mobile-dock-more:after{
        inset:-7px!important;
        border-radius:24px!important;
        opacity:.55!important;
    }
    body.menu-open .sidebar{
        z-index:2100!important;
        overflow:hidden!important;
    }
    body.menu-open .sidebar nav{
        grid-template-columns:repeat(2,minmax(0,1fr))!important;
        overflow:auto!important;
    }
    body.menu-open .sidebar nav a{
        display:grid!important;
    }
    body.menu-open .nav-full{display:inline!important}
    body.menu-open .nav-short{display:none!important}
}

@keyframes rechargeCtaPulse{
    0%,100%{transform:translateY(0);filter:brightness(1)}
    50%{transform:translateY(-2px);filter:brightness(1.16)}
}

@media(max-width:380px){
    .mobile-recharge-cta{
        min-width:96px;
        padding-left:28px;
    }
    .mobile-recharge-cta span{font-size:13px}
    .mobile-recharge-cta b{font-size:9px}
    .topbar-left h1{max-width:118px}
    body:not(.menu-open) .sidebar{
        left:8px!important;
        right:8px!important;
        padding-left:8px!important;
        padding-right:8px!important;
    }
    body:not(.menu-open) .sidebar nav{
        gap:6px!important;
        grid-template-columns:1fr 1fr 52px 1fr 1fr!important;
    }
    body:not(.menu-open) .mobile-dock-more{
        width:48px!important;
        height:48px!important;
    }
    body:not(.menu-open) .sidebar nav a .nav-label{
        font-size:8px!important;
    }
}
