/* ===========================
   Saved Projects
=========================== */

#projectList{
    display:flex;
    flex-direction:column;
    gap:16px;
    padding:10px 0;
}

/* Project Card */

.project-card{
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:#fff;
    border:1px solid #e9edf3;
    border-radius:18px;
    padding:18px 22px;
    cursor:pointer;
    transition:.3s ease;
    box-shadow:0 3px 12px rgba(15,23,42,.05);
}

.project-card:hover{
    transform:translateY(-3px);
    box-shadow:0 12px 30px rgba(0,0,0,.10);
    border-color:#2563eb;
}

/* Left */

.project-left{
    display:flex;
    align-items:center;
    gap:16px;
}

/* Icon */

.project-icon{
    width:54px;
    height:54px;
    border-radius:14px;
    background:linear-gradient(135deg,#2563eb,#4f46e5);
    display:flex;
    justify-content:center;
    align-items:center;
    color:#fff;
    font-size:24px;
    flex-shrink:0;
}

/* Name */

.project-info h5{
    margin:0;
    font-size:22px;
    font-weight:700;
    color:#0f172a;
}

.project-info p{
    margin:4px 0 0;
    color:#64748b;
    font-size:14px;
}

/* Right */

.project-right{
    text-align:right;
}

.project-date{
    font-size:14px;
    color:#64748b;
    margin-bottom:10px;
}

/* Open Button */

.project-open{
    padding:7px 18px;
    border:none;
    border-radius:10px;
    background:#2563eb;
    color:#fff;
    font-size:14px;
    font-weight:600;
    transition:.3s;
}

.project-open:hover{
    background:#1d4ed8;
}

/* Heading */

.project-heading{
    font-size:30px;
    font-weight:700;
    margin-bottom:20px;
    color:#111827;
}





/* Smooth animation */

.topbar,
.mode-rail,
.catalog-panel,
.properties{
    transition:all .25s ease;
}

/* Focus Mode */

body.focus-mode .topbar,
body.focus-mode .mode-rail,
body.focus-mode .catalog-panel,
body.focus-mode .properties{
    display:none !important;
}

/* Workspace */

.workspace{
    transition:all .25s ease;
}

body.focus-mode .workspace{
    position:fixed;
    inset:0;
    width:100vw;
    height:100vh;
    margin:0;
    padding:0;
    z-index:9999;
    background:#f7f8fa;
}

/* Canvas */

body.focus-mode #canvas2d,
body.focus-mode #threeContainer{
    width:100% !important;
    height:100% !important;
}














/* ==========================================================
   PROFESSIONAL PANEL TOGGLE
========================================================== */

/* Smooth */
.topbar,
.mode-rail,
.catalog-panel,
.properties,
.workspace{
    transition:all .25s ease;
}

/* Hide Top */

body.hide-topbar .topbar{
    display:none !important;
}

/* Hide Left Rail */

body.hide-left-rail .mode-rail{
    display:none !important;
}

/* Hide Catalog */

body.hide-catalog .catalog-panel{
    display:none !important;
}

/* Hide Right */

body.hide-properties .properties{
    display:none !important;
}

/* Workspace always fill */

.studio-shell{
    display:flex;
    width:100%;
    height:calc(100vh - 70px);
}

body.hide-topbar .studio-shell{
    height:100vh;
}

.workspace{
    flex:1;
    min-width:0;
    width:auto;
}

/* Floating Toggle Buttons */

.panel-toggle{
    position:fixed;
    z-index:99999;
    width:44px;
    height:54px;
    border:none;
    border-radius:11%;
    background:#000000;
    color:#fff;
    box-shadow:0 8px 20px rgba(0,0,0,.25);
    display:flex;
    align-items:center;
    justify-content:center;
    cursor:pointer;
    transition:.25s;
}

.panel-toggle:hover{
    transform:scale(1.08);
}

#showTopBtn {
    top: 8px;
    left: 91%;
    transform: translateX(-47%);
    display: none;
    height: 35px;
}

#showLeftBtn{
    top:90px;
    left:10px;
    display:none;
}

#showCatalogBtn{
    top:74px;
    left:10px;
    display:none;
}

#showRightBtn{
    top:70px;
    right:10px;
    display:none;
}

/* Show floating buttons */

body.hide-topbar #showTopBtn{
    display:flex;
}

body.hide-left-rail #showLeftBtn{
    display:flex;
}

body.hide-catalog #showCatalogBtn{
    display:flex;
}

body.hide-properties #showRightBtn{
    display:flex;
}

/* Canvas fills everything */

#workspaceViews,
#canvas2dWrap,
#canvas3dWrap,
#canvas2d,
#threeContainer{
    width:100%;
    height:100%;
}







/* Workspace */
.workspace{
    position: relative;
    z-index: 1;
}

/* 2D & 3D */
#workspaceViews,
#canvas2dWrap,
#canvas3dWrap,
#canvas2d,
#threeContainer{
    position: relative;
    z-index: 1;
}

/* Left Catalog */
.catalog-panel{
    position: relative;
    z-index: 1000;
}

/* Right Properties */
.properties{
    position: relative;
    z-index: 1000;
	width: 350px;
}

/* Topbar */
.topbar{
    position: relative;
    z-index: 1100;
}

/* Floating Toggle Buttons */
.panel-toggle{
    z-index: 1200;
}



#canvas3dWrap canvas{
    position:absolute;
    inset:0;
    z-index:0 !important;
}

#canvas2d{
    position:absolute;
    inset:0;
    z-index:0 !important;
}