:root{
    
    .mobile-category-wrap{
    display:none;
    }



    --bg:#f5f5f4;
    --card:#ffffff;
    --card-2:#fafaf9;

    --panel-gradient:
    linear-gradient(
        180deg,
        #ffffff 0%,
        #fafaf9 100%
    );

    --text:#18181b;
    --text-soft:#52525b;
    --muted:#71717a;

    --border:rgba(0,0,0,0.06);

    --tag:#f4f4f5;

    --shadow:
      0 10px 30px rgba(0,0,0,0.04);
}

body.dark{

    --bg:#070b14;

    --card:#111827;

    --card-2:#182131;

    --panel-gradient:
    linear-gradient(
        180deg,
        #111827 0%,
        #0f1724 100%
    );

    --text:#d6d9e0;

    --text-soft:#9ca3af;

    --muted:#8b93a7;

    --border:rgba(255,255,255,0.07);

    --tag:#1f2937;

    --shadow:
      0 14px 40px rgba(0,0,0,0.45);
}


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

.global-header{

    height:84px;

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

    padding:0 28px;

    background:var(--panel-gradient);

    border-bottom:1px solid var(--border);

    position:sticky;
    top:0;

    z-index:1000;

    backdrop-filter:blur(12px);
}

.header-left{
    display:flex;
    align-items:center;
}

.header-logo img{

    width:42px;
    height:42px;

    border-radius:50%;
}

.header-nav{

    display:flex;
    align-items:center;
    gap:28px;
}

.header-nav a{

    color:var(--text-soft);

    text-decoration:none;

    font-weight:500;

    transition:.2s ease;
}

.header-nav a:hover{
    color:var(--text);
}

.header-actions{
    display:flex;
    align-items:center;
}

body{

    background:var(--bg);
    color:var(--text);

    transition:
    background .25s ease,
    color .25s ease;
}



body.dark h1,
body.dark h2,
body.dark h3,
body.dark p,
body.dark a{
    color:var(--text) !important;
}

body.dark input,
body.dark select{
    background:#232833 !important;
    color:var(--text-soft) !important;
    border-color:rgba(255,255,255,0.08) !important;
}

 
.search-btn{

    height:48px;

    padding:0 18px;

    border:none;

    border-radius:16px;

    background:#f59e0b;

    color:#111827;

    font-weight:700;

    cursor:pointer;

    transition:.2s ease;
}

.search-btn:hover{

    background:#fbbf24;

    transform:translateY(-1px);
}



.theme-toggle{

    height:50px;

    padding:0 18px;

    border-radius:14px;

    border:1px solid var(--border);

    background:var(--card);

    color:var(--text);

    display:flex;
    align-items:center;
    gap:10px;

    font-weight:600;

    cursor:pointer;

    transition:.2s ease;
}

.theme-toggle:hover{

    transform:translateY(-2px);

    border-color:rgba(255,255,255,0.12);
}

.theme-icon{
    font-size:18px;
}


.header-login-btn{

    display:inline-flex;

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

    height:50px;

    padding:0 18px;

    border-radius:14px;

    background:var(--card-2);

    border:1px solid var(--border);

    color:var(--text);

    text-decoration:none;

    font-size:14px;
    font-weight:600;

    transition:.2s ease;
}

.header-login-btn:hover{

    transform:translateY(-2px);

    background:var(--card);

    color:var(--text);
}



.top-bar{

    background:var(--card);

    border:1px solid var(--border);

    border-radius:24px;

    padding:12px 18px;

    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;

    margin-bottom:24px;

    box-shadow:var(--shadow);
}

.top-bar select,
.search-input{

    height:48px;

    padding:0 16px;

    border-radius:16px;

    border:1px solid var(--border);

    background:var(--card-2);

    color:var(--text);

    outline:none;
}

.search-input{
    width:240px;
}


.coin-info{

    background:var(--card);

    padding:18px;
}

.coin-info h3{
    color:var(--text);
}

.coin-info p{
    color:var(--text-soft);
}


.footer-grid a{
    width:max-content;
}

@media(max-width:768px){

    .global-header{

        height:auto;

        padding:14px 18px;

        flex-wrap:wrap;

        gap:14px;
    }

    .header-nav{
        gap:16px;
    }

    .top-bar{

        flex-direction:column;
        align-items:stretch;
    }

    .search-input{
        width:100%;
    }

    .footer-grid{

        grid-template-columns:1fr;

        gap:30px;
    }
}



.clear-filter-btn{

    background:#f59e0b !important;

    color:#111827 !important;

    border:1px solid #fbbf24 !important;

    font-weight:700;

    box-shadow:
        0 4px 14px rgba(245,158,11,0.28);

    transition:.2s ease;
}

.clear-filter-btn:hover{

    background:#fbbf24 !important;

    color:#111827 !important;

    transform:translateY(-1px);
}

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

.site-footer{

    margin-top:80px;

    padding:60px 40px 30px;

    background:var(--panel-gradient);

    border-top:1px solid var(--border);
}

.footer-grid{

    display:grid;

    grid-template-columns:
    2fr 1fr 1fr;

    gap:40px;
}

.footer-grid h3,
.footer-grid h4{

    color:var(--text);

    margin-bottom:16px;
}

.footer-grid p,
.footer-grid a{

    color:var(--text-soft);

    text-decoration:none;

    display:block;

    margin-bottom:10px;
}

.footer-bottom{

    margin-top:40px;

    padding-top:20px;

    border-top:1px solid var(--border);

    color:var(--muted);

    font-size:14px;
}



/* =========================================
   LEGACY STYLE.CSS OVERRIDES
========================================= */

/* SIDEBAR */

#sidebar{

    background:var(--card) !important;

    border-right:1px solid var(--border) !important;
}

#sidebar nav,
#sidebar nav ul li a,
#sidebar nav ul li span,

#sidebar .widgets-block .widget.filter li,

#sidebar .widgets-block .widget .title,

#sidebar .widgets-block .widget.blog-categories ul li a,

#sidebar .widgets-block .widget.recent-projects ul li a{

    color:var(--text-soft) !important;
}

#sidebar nav ul li a:hover,
#sidebar nav ul li span:hover,

#sidebar .widgets-block .widget.filter li:hover,

#sidebar .widgets-block .widget.blog-categories ul li a:hover,

#sidebar .widgets-block .widget.recent-projects ul li a:hover{

    color:var(--text) !important;
}


/* MAIN CARDS */

.works-item{

    background:var(--card) !important;

    border:1px solid var(--border) !important;

    box-shadow:var(--shadow) !important;
}

.works-item:hover{

    border-color:var(--border) !important;
}


/* COIN INFO */

.coin-info{

    background:var(--card) !important;
}

.coin-info h3{

    color:var(--text) !important;
}

.coin-info p{

    color:var(--text-soft) !important;
}


/* TYPOGRAPHY */

h1,h2,h3,h4,h5,h6{

    color:var(--text) !important;
}

p{

    color:var(--text-soft) !important;
}


/* INPUTS */

input,
select,
textarea{

    background:var(--card-2) !important;

    color:var(--text) !important;

    border:1px solid var(--border) !important;
}


/* TOP FILTER BAR */

.top-bar{

    background:var(--card) !important;

    border:1px solid var(--border) !important;
}


/* FOOTER LINKS */

.site-footer a{

    color:var(--text-soft) !important;
}

.site-footer a:hover{

    color:var(--text) !important;
}



 


/* DARK MODE */

body.dark .works-item .button{

    background:rgba(17,24,39,0.9);

    border:1px solid rgba(255,255,255,0.08);
}

body.dark .works-item .button i{

    color:#e5e7eb;
}



.header-actions{

    display:flex !important;

    align-items:center !important;

    gap:16px !important;
}


 
/* =====================================
   MOBILE LAYOUT
===================================== */

@media screen and (max-width:768px){

    body{
        overflow-x:hidden !important;
    }

    .global-outer,
    .global-inner,
    #main,
    .main-outer,
    .coins-wrapper,
    .container{

        width:100% !important;
        max-width:100% !important;

        margin:0 !important;

        box-sizing:border-box !important;
    }

    .container{
        padding:16px !important;
    }

     

    /* MOBILE CATEGORY BUTTON */

     

     
    
    
    
 
 




    /* TOP BAR */

    .top-bar{

        display:flex !important;

        flex-direction:column !important;

        gap:14px !important;

        padding:16px !important;
    }

    .search-input,
    .top-bar select{

        width:100% !important;
    }

    /* GRID */

    #works-grid{

        display:grid !important;

        grid-template-columns:1fr 1fr !important;

        gap:14px !important;
    }

    .works-item{

        width:100% !important;

        min-width:0 !important;
    }

    .works-item img{

        width:100% !important;

        display:block !important;
    }

    /* HEADER */

    .global-header{

        flex-wrap:wrap;

        gap:14px;
    }

    .header-nav{

        width:100%;

        justify-content:center;
    }
}



#sidebar .widget.filter ul{

    margin-top:0 !important;
}

#sidebar .widget.filter li:first-child{

    margin-bottom:10px;
}

#sidebar .widget.filter strong{

    display:block;

    margin-top:18px;

    margin-bottom:10px;

    font-size:12px;

    letter-spacing:.12em;

    text-transform:uppercase;

    color:var(--muted);
}



@media(max-width:768px){

    .global-header{

        display:flex;

        align-items:center;

        justify-content:space-between;
    }

    .header-nav{

        order:3;

        width:100%;

        justify-content:center;

        margin-top:10px;
    }

    .header-actions{

    display:flex !important;

    align-items:center !important;

    gap:16px !important;
}

    .theme-toggle{

        position:static;

        margin-left:auto;
    }

}

 


@media(max-width:768px){

    .site-footer{

        padding:40px 20px 24px;
    }

    .footer-grid{

        display:grid;

        grid-template-columns:1fr;

        gap:28px;
    }

    .footer-grid > div{

        width:100%;
    }

    .footer-grid h3,
    .footer-grid h4{

        margin-bottom:12px;
    }

    .footer-grid p,
    .footer-grid a{

        font-size:14px;

        line-height:1.7;
    }

    .footer-bottom{

        margin-top:24px;

        padding-top:18px;

        font-size:13px;
    }



 
 /* =====================================
   MOBILE CATEGORY SYSTEM
===================================== */

 

@media(max-width:768px){

     

    #sidebar{

        position:fixed;

        left:-280px;

        top:0;

        width:260px;

        height:100vh;

        z-index:9999;

        transition:left .25s ease;

        overflow-y:auto;
    }

     
}

 
 

/* =====================================
   MOBILE CATEGORY CHIPS
===================================== */

 

@media(max-width:768px){



 


    #sidebar{
        display:none !important;
    }

    .mobile-category-wrap{

        display:block;

        margin:0 16px 18px;
    }

    .mobile-category-label{

        display:block;

        margin-bottom:10px;

        font-size:14px;

        font-weight:700;

        color:var(--muted);

        letter-spacing:.06em;

        text-transform:uppercase;
    }

    .mobile-category-list{

        display:flex;

        flex-wrap:wrap;

        gap:10px;
    }

    .mobile-category-select{

    width:100%;

    height:48px;

    border:none;

    border-radius:16px;

    background:#111827;

    color:#f59e0b;

    font-size:15px;

    font-weight:700;

    padding:0 16px;

    cursor:pointer;

    border:1px solid #fbbf24;

    box-shadow:
        0 4px 14px rgba(245,158,11,0.28);

    appearance:none;
}

    
}


 


/* FORCE HIDE MOBILE-ONLY ON DESKTOP */

 

@media(max-width:768px){

    .mobile-only{
        display:block !important;
    }
}