*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{overflow-x:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}

.touch-target{min-height:44px;min-width:44px}

@media(max-width:767px){
    .mobile-full-btn{width:100%!important;justify-content:center!important}
    .mobile-stack{flex-direction:column!important}
    .mobile-hidden{display:none!important}
    .mobile-show{display:flex!important}
    .mobile-text-center{text-align:center!important}
    .mobile-px{padding-left:1rem!important;padding-right:1rem!important}
    .mobile-gap-2{gap:.5rem!important}

    .modal-overlay .modal-content,
    .modal-overlay .modal-card{
        max-width:100%!important;
        width:100%!important;
        max-height:100vh!important;
        height:100vh!important;
        border-radius:0!important;
        margin:0!important;
    }
    .modal-overlay{padding:0!important}

    .notif-panel{
        position:fixed!important;
        top:0!important;
        left:0!important;
        right:0!important;
        bottom:0!important;
        width:100%!important;
        max-height:100vh!important;
        border-radius:0!important;
        z-index:90!important;
    }

    .toast-container{
        left:.5rem!important;
        right:.5rem!important;
        max-width:none!important;
    }

    .floating-alert{
        left:.5rem!important;
        right:.5rem!important;
        transform:none!important;
        max-width:none!important;
    }
    @keyframes fadeUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
}

@media(min-width:768px) and (max-width:1023px){
    .tablet-cols-2{grid-template-columns:repeat(2,1fr)!important}
}

.hamburger-menu-btn{
    display:none;
    background:none;
    border:1px solid rgba(209,213,219,.6);
    border-radius:.75rem;
    padding:.5rem;
    cursor:pointer;
    color:#6B7280;
    transition:all .2s;
    min-height:44px;
    min-width:44px;
    align-items:center;
    justify-content:center;
    backdrop-filter:blur(8px);
    background:rgba(255,255,255,.8);
}
.hamburger-menu-btn:hover{color:#4F46E5;border-color:#C7D2FE;background:#fff}

@media(max-width:767px){
    .hamburger-menu-btn{display:flex}
}

.mobile-drawer{
    position:fixed;
    top:0;
    left:0;
    width:280px;
    height:100vh;
    background:rgba(255,255,255,.98);
    backdrop-filter:blur(20px);
    -webkit-backdrop-filter:blur(20px);
    z-index:100;
    transform:translateX(-100%);
    transition:transform .3s cubic-bezier(.4,0,.2,1);
    box-shadow:8px 0 30px rgba(0,0,0,.1);
    display:flex;
    flex-direction:column;
    overflow-y:auto;
    -webkit-overflow-scrolling:touch;
}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer-overlay{
    position:fixed;
    inset:0;
    background:rgba(0,0,0,.3);
    backdrop-filter:blur(2px);
    z-index:99;
    opacity:0;
    visibility:hidden;
    transition:all .3s ease;
}
.mobile-drawer-overlay.open{opacity:1;visibility:visible}

.mobile-drawer-header{
    padding:1.25rem;
    border-bottom:1px solid rgba(229,231,235,.6);
    display:flex;
    align-items:center;
    justify-content:space-between;
}
.mobile-drawer-body{
    padding:.75rem;
    flex:1;
    display:flex;
    flex-direction:column;
    gap:.25rem;
}
.mobile-drawer-link{
    display:flex;
    align-items:center;
    gap:.75rem;
    padding:.75rem 1rem;
    border-radius:.75rem;
    font-size:.875rem;
    font-weight:500;
    color:#374151;
    text-decoration:none;
    transition:all .2s;
    min-height:44px;
}
.mobile-drawer-link:hover{background:rgba(99,102,241,.06);color:#4F46E5}
.mobile-drawer-link.active{background:#EEF2FF;color:#4F46E5;font-weight:600}
.mobile-drawer-footer{
    padding:1rem 1.25rem;
    border-top:1px solid rgba(229,231,235,.6);
}

@media(max-width:767px){
    .btn,.btn-sm{min-height:44px;padding:.625rem 1rem}
    .btn-gradient{min-height:48px}
    .access-btn-premium,.buy-btn-premium{min-height:48px}
    .premium-input,.input{min-height:48px;font-size:1rem}
    select.input{min-height:48px;font-size:1rem}

    .stat-card{padding:1rem}
    .stat-card .stat-icon{width:2.25rem;height:2.25rem}
    .stat-card p.text-2xl{font-size:1.25rem}

    .card{border-radius:1rem}

    .countdown-digit{min-width:2.5rem;padding:.25rem .5rem}
    .countdown-digit .text-lg{font-size:1rem}
}