/* ==========================================================
VIEWPORT DISPLAY START
========================================================== */

#viewport-debug {

position: fixed;
bottom: 20px;
right: 20px;
z-index: 999999;

background: rgba(0,0,0,0.85);
color: white;

font-family:'Poppins', sans-serif;
font-size: 12px;

padding: 6px 10px;
border-radius: 8px;

pointer-events: none;
}

/* ==========================================================
VIEWPORT DISPLAY END
========================================================== */


/* ==========================================================
LAYOUT - SIDEBAR [START]
========================================================== */

.chibi-section,
.model3d-section {
    display: none !important;
}

.menu-toggle {
    position: fixed;

    top: 20px;
    left: 20px;

    z-index: 998;

    width: 48px;
    height: 48px;

    border: none;
    border-radius: 14px;

    background: #1C1C1C;
    color: #FFFFFF;

    font-size: 24px;

    cursor: pointer;
}

/* ==========================================================
SIDEBAR
========================================================== */


.sidebar {
position: fixed;
inset: 0 auto 0 0;


z-index: 999;

width: 280px;

display: flex;
flex-direction: column;

padding: 34px 30px;

background: #1C1C1C;

transform: translateX(0);
transition: transform 0.3s ease;


}


.sidebar:not(.active) {
    transform: translateX(-100%);
}

/* ==========================================================
PROFILE
========================================================== */

.sidebar-profile{

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

flex-shrink: 0;

margin-bottom:20px;

}

.sidebar-avatar{

width:54px;
height:54px;

border-radius:50%;
object-fit:cover;

flex-shrink:0;

}

.sidebar-profile-content{

display:flex;
flex-direction:column;

}

.sidebar-username{

font-size:19px;
font-weight:700;

line-height:1;

color:#fff;

}

.sidebar-role{

margin-top:4px;

font-size:12px;

color:#8b8b8b;

}

/* ===========================
SIDEBAR CLOSE BUTTON
=========================== */

.sidebar-close {
    width: 32px;
    height: 32px;

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

    flex-shrink: 0;

    margin-left: auto;

    border: none;
    border-radius: 8px;

    background: transparent;
    color: #ffffff;

    font-size: 24px;
    line-height: 1;

    cursor: pointer;

    transition: background 0.2s ease;
}

.sidebar-close:hover {
    background: #303030;
}

/* ==========================================================
MAIN NAVIGATION
========================================================== */
.sidebar-content {

    flex: 1;

    min-height: 0;

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

}

.sidebar-nav{

margin-bottom:34px;

}

.sidebar-button{

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

width:100%;

padding:7px 0;

border:none;
background:none;

font:inherit;
text-align:left;
cursor:pointer;

color:#bcbcbc;

transition:.25s ease;

}

.sidebar-button:hover{

color:#fff;

padding-left:10px;

}

/* ==========================================================
LINKS
========================================================== */

.sidebar-link{

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

padding:7px 0;

text-decoration:none;

color:#bcbcbc;
font-size: 14px;
transition:.25s ease;

}

.sidebar-link::before{

content:"-";

color:#666;

transition:.25s;

}

.sidebar-link:hover{

color:#fff;

padding-left:10px;

}

.sidebar-link:hover::before{

color:#fff;

}

.sidebar-link-icon{

width:18px;
height:18px;

flex-shrink:0;

filter:brightness(0) invert(.75);

transition:.25s;

}

.sidebar-link:hover .sidebar-link-icon{

filter:brightness(0) invert(1);

}

/* ==========================================================
   SIDEBAR BUTTONS
========================================================== */

.sidebar-button {

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

    width: 100%;

    padding: 7px 0;

    border: none;
    background: none;
    outline: none;

    font: inherit;
    font-size: 14px;
    text-align: left;

    color: #bcbcbc;
    text-decoration: none;

    cursor: pointer;

    transition: .25s ease;
}

.sidebar-button::before {

    content: "-";

    color: #666;

    transition: .25s;
}

.sidebar-button:hover {

    color: #fff;

    padding-left: 10px;
}

.sidebar-button:hover::before {

    color: #fff;
}

.sidebar-button.active {

    color: #fff;

    padding-left: 10px;
}

.sidebar-button.active::before {

    color: #fff;
}
/* ==========================================================
SECTIONS
========================================================== */

.sidebar-section{

margin-top:34px;

}

.sidebar-section-title{

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

margin-bottom:12px;

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

letter-spacing:2px;

text-transform:uppercase;

color:#6e6e6e;

}

.sidebar-section-title::after{

content:"";

flex:1;

margin-left:18px;

border-top:1px solid #3b3b3b;

}

.sidebar-section-icon{

width:18px;
height:18px;

flex-shrink:0;

filter:invert(1);

opacity:.9;

}

.sidebar-footer {

    flex-shrink: 0;
    color: #BFBFBF;
    margin-top: auto;
    padding-top: 30px;

}

.sidebar-footer span{
    opacity: 0.56;
}

.sidebar-footer p{
    margin-top: 20px;
    opacity: 0.56;
}

.sidebar-footer small{
    margin-top: 20px;
    opacity: 0.56;
}

/* =========================
EXCLUSIVE / LOCKED BUTTON
========================= */

.exclusive-wrapper {
    position: relative;
    width: 100%;
}

.exclusive-button {
    cursor: not-allowed;
    opacity: .95;
}



/* ==========================================================
LAYOUT - SIDEBAR [END]
========================================================== */

/* ==================================================
HOME + PERSONA SIDEBAR SHIFT
================================================== */

.hero,
.persona {
    transition: transform 0.3s ease;
}

body.sidebar-closed .hero,
body.sidebar-closed .persona {
    transform: translateX(-140px);
}