#portfolio-active-content-navbar{
    position:relative;

    display:flex;
    flex-direction:row;
    justify-content:space-around;
    align-items:center;

    flex-shrink:0;

    width:100%;
    height:50px;

    background:#252525;

    border-radius:25px;
    border:1px solid rgba(255,255,255,.05);

    box-shadow:
        /* Main shadow */
        0 10px 30px rgba(0,0,0,.45),

        /* Soft shadow close to element */
        0 4px 10px rgba(0,0,0,.35),

        /* Top highlight */
        inset 0 1px 0 rgba(255,255,255,.08),

        /* Bottom dark edge */
        inset 0 -1px 0 rgba(0,0,0,.45);

    transition:
        transform .25s ease,
        box-shadow .25s ease;
}

#slider{
    position:absolute;
    top:2.5px;
    left:0;
    display:flex;

    width:200px;
    height:45px;

    border: 1px solid none;
    border-radius:25px;

    background-color: rgba(141, 141, 141, 0.05);

    z-index:5;

    cursor:grab;
    touch-action:none;
    user-select:none;

    box-shadow:
        inset 0 0 5px 1px var(--main-color),
        inset 0 0 11px var(--main-color);

    transition:
        left .3s ease,
        width .3s ease,
        box-shadow .5s ease;
}
#slider:active{
    cursor:grabbing;
}
#slider.moving{
    box-shadow:
        inset 0 0 2px 1px var(--main-color),
        inset 0 0 4px var(--main-color);
}

.works_section{
    cursor:pointer;
}

.style-selector{
    display:flex;
    flex-direction:row;
    justify-content:space-evenly;
    align-items:center;

    width:100px;
    height:45px;
    background-color:var(--layer0);

    border-radius:10px;
}
.style-selector button{
    background:none;
    border:none;
    padding:0;

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

    cursor:pointer;
}
.style-selector button.active{
    background-color:var(--layer2);
    border-radius:10px;
    height:40px;
    width:40px;
}

.my-work{
    position:relative;
    overflow:hidden;

    width:1fr;
    flex:1;
    min-height:0;
    border-radius:25px;
    border:none;
}

.my-work-panel{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    justify-content:start;
    align-items:stretch;

    box-sizing:border-box;
    padding:15px;
    padding-top:20px;
    overflow-y:auto;

    transition:transform .35s ease;
}
.line{
    display:flex;
    flex-direction:row;
    justify-content:start;
    align-items:center;
    gap:10px;

    /* Never let the panel's flex layout squash a line below its content. */
    flex-shrink:0;

    width:1fr;
    box-sizing:border-box;
    padding:5px 10px;
    margin-bottom:10px;
    border-radius:20px;


    background-color:#252525;

    cursor:pointer;
}
.line.entering{
    animation:line-slide-in .4s ease both;
}
@keyframes line-slide-in{
    from{
        transform:translateY(-20px);
        opacity:0;
    }
    to{
        transform:translateY(0);
        opacity:1;
    }
}
.line.leaving{
    animation:line-slide-out .3s ease both;
}
@keyframes line-slide-out{
    from{
        transform:translateY(0);
        opacity:1;
    }
    to{
        transform:translateY(-20px);
        opacity:0;
    }
}
.my-work-image{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:start;
    height:65px;
    width:4.5%;
    background-color:var(--layer0);
    border-radius:15px;
    padding-left:5px;
}
.my-work-name{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:start;
    height:65px;
    width:9%;
    background-color:var(--layer0);
    border-radius:15px;
     padding-left:5px;
}
.my-work-description{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:start;
    height:65px;
    width:36.5%;
    background-color:var(--layer0);
    border-radius:15px;
    padding-left:5px;
}
.my-work-customer-review{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:start;
    height:65px;
    width:36.5%;
    background-color:var(--layer0);
    border-radius:15px;
     padding-left:5px;
}
.my-work-skill{
    display:flex;
    flex-direction:row;
    align-items:center;
    justify-content:start;
    height:65px;
    width:13.5%;
    background-color:var(--layer0);
    border-radius:15px;
     padding-left:5px;
}

.my-work-grid-panel{
    display:flex;
    flex-flow:row wrap;
    justify-content:space-evenly;
    align-content:start;
    gap:15px;

    overflow-y:auto;
}

.grid{
    flex:0 0 auto;
    width:525px;
    height:275px;
    box-sizing:border-box;

    display:flex;
    flex-direction:row;
    align-items:stretch;
    gap:15px;

    padding:15px;
    border-radius:20px;

    background-color:#252525;

    cursor:pointer;
}
.grid.entering{
    animation:grid-slide-in .5s ease both;
}
@keyframes grid-slide-in{
    from{
        transform:translate(var(--slide-x, 0), var(--slide-y, 0));
        opacity:0;
    }
    to{
        transform:translate(0, 0);
        opacity:1;
    }
}
.grid.leaving{
    animation:grid-slide-out .4s ease both;
}
@keyframes grid-slide-out{
    from{
        transform:translate(0, 0);
        opacity:1;
    }
    to{
        transform:translate(var(--slide-x, 0), var(--slide-y, 0));
        opacity:0;
    }
}
.grid-image{
    flex:1;
    background-color:var(--layer0);
    border-radius:15px;
}
.grid-info{
    display:flex;
    flex-direction:column;
    flex:1;
    gap:10px;
}
.grid-name{
    flex:0 0 auto;
    margin:0;
}
.grid-description{
    flex:1;
    background-color:var(--layer0);
    border-radius:15px;
    padding:10px;
    box-sizing:border-box;
}

/* Work detail overlay (mirrors the Skills detail panel) ------------------- */
.work-detail-overlay{
    position:absolute;
    inset:0;

    display:flex;
    flex-direction:column;
    gap:14px;

    box-sizing:border-box;
    padding:25px;
    overflow-y:auto;

    background-color:#1c1c1c;
    border-radius:25px;

    z-index:10;
    animation:work-detail-in .3s ease both;
}
@keyframes work-detail-in{
    from{ opacity:0; transform:scale(.98); }
    to{ opacity:1; transform:scale(1); }
}

.work-detail-close{
    position:absolute;
    top:15px;
    right:15px;

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

    width:34px;
    height:34px;

    background-color:var(--layer0);
    color:#fff;
    border:none;
    border-radius:50%;

    font-size:16px;
    cursor:pointer;
    transition:background-color .2s ease;
}
.work-detail-close:hover{
    background-color:var(--layer2);
}

.work-detail-name{
    margin:0;
    padding-right:44px;
    font-size:26px;
    font-weight:700;
}
.work-detail-photo{
    max-width:100%;
    max-height:45vh;
    width:auto;
    align-self:center;
    border-radius:15px;
}
.work-detail-image-box{
    display:flex;
    align-items:center;
    justify-content:center;

    min-height:180px;
    background-color:var(--layer0);
    border-radius:15px;
    color:rgba(255,255,255,.5);
}
.work-detail-description{
    box-sizing:border-box;
    background-color:var(--layer0);
    border-radius:15px;
    padding:25px;
    line-height:1.6;
    opacity:.85;
}
.work-detail-review{
    margin:0;
    padding:6px 0 6px 20px;
    border-left:3px solid var(--main-color);
    font-style:italic;
    color:rgba(255,255,255,.75);
    line-height:1.6;
}
.work-detail-skill{
    align-self:flex-start;
    padding:5px 16px;

    background-color:var(--layer2);
    border:1px solid rgba(255,255,255,.08);
    border-radius:16px;

    font-size:14px;
    color:var(--main-color);
    font-weight:600;
}

/* Tablet: same layout, cards a step smaller --------------------------------- */
@media (max-width:1024px){
    .grid{
        width:100%;
        max-width:525px;
        height:250px;
    }
}

/* Phone: lines keep image + name + skill (tap opens the full detail anyway);
   grid cards go single-column. ---------------------------------------------- */
@media (max-width:680px){
    /* One row of scrollable chips: full-size tabs slide sideways under a
       selector pinned to the right edge (sticky inside the scroller). */
    #portfolio-active-content-navbar{
        height:44px;
        justify-content:flex-start;
        gap:8px;
        overflow-x:auto;
        overflow-y:hidden;
        box-sizing:border-box;
        padding:0 8px;
    }
    #slider{
        height:39px;
    }
    .works_section{
        flex:0 0 auto;
        font-size:0.8rem;
        white-space:nowrap;
        padding:0 10px;
    }
    /* Docked look: the selector lives in #style-selector-dock (moved there by
       my_works.js), floating over the content with the site's neon halo. */
    .style-selector{
        width:72px;
        height:38px;
        border-radius:12px;
        border:1px solid rgba(255,255,255,.08);
        box-shadow:
            0 8px 20px rgba(0,0,0,.55),
            0 0 14px -4px var(--secondary-color);
    }
    .style-selector button img{
        width:18px;
        height:18px;
    }
    .style-selector button.active{
        width:28px;
        height:28px;
        border-radius:8px;
    }

    .my-work-panel{
        padding:10px;
        padding-top:12px;
    }
    .line{
        gap:8px;
        padding:5px 8px;
    }
    .my-work-image{
        flex:0 0 auto;
        width:56px;
        height:56px;
    }
    .my-work-name{
        flex:1;
        width:auto;
        height:56px;
    }
    .my-work-skill{
        flex:0 0 auto;
        width:30%;
        height:56px;
    }
    .my-work-description,
    .my-work-customer-review{
        display:none;
    }

    .grid{
        flex-direction:column;
        width:100%;
        height:auto;
        padding:12px;
        gap:12px;

        /* Same neon language as the rest of the site: a quiet purple halo and
           a lifted edge, so the cards glow instead of sitting flat. */
        border:1px solid rgba(255,255,255,.07);
        box-shadow:
            0 10px 24px rgba(0,0,0,.45),
            0 0 16px -6px var(--secondary-color),
            inset 0 1px 0 rgba(255,255,255,.06);
    }
    .grid-image{
        min-height:150px;
        border:1px solid rgba(255,255,255,.05);
    }
    .grid-info{
        gap:8px;
    }
    .grid-name{
        padding:0 4px;
        letter-spacing:.01em;
    }
    .grid-description{
        padding:12px;
    }

    .work-detail-overlay{
        padding:18px;
        gap:12px;
    }
    .work-detail-name{
        font-size:20px;
    }
    .work-detail-description{
        padding:16px;
    }
}

/* Small phone ---------------------------------------------------------------- */
@media (max-width:400px){
    .my-work-skill{
        width:26%;
    }
}