:root{--sidebar-width-collapsed: 84px;--sidebar-width-expanded: 280px;--sidebar-bg: #FFFFFF;--sidebar-color: #64748B;--sidebar-active-bg: #F0FDFA;--sidebar-active-color: #0D9488;--sidebar-border: #E2E8F0;--transition-speed: .4s;--panel-width-static: 300px;--panel-bg: #FFFFFF;--panel-border: 1px solid #E2E8F0}body{margin:0;padding:0;overflow:hidden;background-color:var(--light, #F7FAFC)}.layout-v2{display:flex;flex-direction:row;height:100vh;width:100vw;background-color:var(--light, #F7FAFC)}.sidebar-v2{position:fixed;top:0;left:0;height:100%;width:var(--sidebar-width-collapsed);background-color:var(--sidebar-bg);border-right:1px solid var(--sidebar-border);display:flex;flex-direction:column;padding:24px 14px;z-index:1000;transition:width var(--transition-speed) cubic-bezier(.4,0,.2,1);box-shadow:0 4px 6px -1px #0000000d;overflow:hidden;white-space:nowrap}.sidebar-v2:hover{width:var(--sidebar-width-expanded);padding:24px;box-shadow:5px 0 25px #0000001a}.sidebar-brand{display:flex;align-items:center;justify-content:flex-start;gap:0;margin-bottom:30px;padding:0;height:60px;min-height:60px;width:100%}.brand-logo{display:flex;align-items:center;justify-content:center;width:100%;height:100%;padding:0}.brand-logo-collapsed{display:block;height:40px;width:40px;object-fit:contain;transition:all .2s;margin:0 auto}.brand-logo-expanded{display:none;height:50px;object-fit:contain;width:100%;max-width:200px;margin:0 auto}.sidebar-v2:hover .brand-logo-collapsed{display:none}.sidebar-v2:hover .brand-logo-expanded{display:block;animation:fadeIn .3s forwards}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.brand-text{opacity:0;transform:translate(-10px);transition:all var(--transition-speed);pointer-events:none}.sidebar-v2:hover .brand-text{opacity:1;transform:translate(0);pointer-events:auto}.brand-text h2{margin:0;font-family:var(--font-heading, sans-serif);font-size:1.2rem;font-weight:700;color:var(--dark, #1A202C)}.brand-text span{font-size:.8rem;color:var(--gray, #A0AEC0);font-weight:500;display:block}.sidebar-nav{display:flex;flex-direction:column;gap:2px;flex:1}.nav-header{font-size:.75rem;text-transform:uppercase;color:#94a3b8;font-weight:700;margin:8px 0 2px 12px;letter-spacing:.05em;opacity:0;transition:opacity .2s;white-space:nowrap}.sidebar-v2:hover .nav-header{opacity:1;transition-delay:.1s}.nav-item{display:flex;align-items:center;gap:12px;padding:6px 14px;border-radius:8px;text-decoration:none;color:var(--sidebar-color);font-weight:500;font-size:.9rem;transition:all .2s ease;position:relative;overflow:hidden;height:36px;flex-shrink:0}.nav-item i{font-size:1.2rem;min-width:24px;text-align:center;display:flex;align-items:center;justify-content:center}.nav-item span{opacity:0;transform:translate(-10px);transition:all var(--transition-speed)}.sidebar-v2:hover .nav-item span{opacity:1;transform:translate(0)}.nav-item:hover{background-color:#f8fafc;color:var(--primary, #76C7B7)}.nav-item.active{background-color:var(--sidebar-active-bg);color:var(--sidebar-active-color);font-weight:600}.nav-item.active:before{content:"";position:absolute;left:0;top:10%;height:80%;width:4px;background:var(--sidebar-active-color);border-radius:0 4px 4px 0;opacity:1}.nav-item.active i{color:var(--sidebar-active-color)}.sidebar-footer{margin-top:auto;padding-top:20px;border-top:1px solid var(--sidebar-border);overflow:hidden}.user-card{display:flex;align-items:center;gap:12px;padding:8px;border-radius:12px;cursor:pointer;transition:background .2s;height:50px}.user-card:hover{background-color:#f8fafc}.user-avatar{min-width:36px;width:36px;height:36px;background-color:#e2e8f0;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#64748b;font-weight:600;flex-shrink:0}.user-info{flex:1;opacity:0;transition:opacity .3s;white-space:nowrap}.sidebar-v2:hover .user-info{opacity:1}.user-name{font-size:.9rem;font-weight:600;color:var(--dark, #2D3748)}.user-role{font-size:.75rem;color:var(--gray, #A0AEC0)}.logout-btn{color:#ef4444;padding:8px;border-radius:8px;transition:background .2s;opacity:1;pointer-events:auto}.logout-btn:hover{background-color:#fef2f2}.content-v2,.layout-v2 .content{margin-left:var(--sidebar-width-collapsed)!important;margin-top:0!important;margin-right:0!important;margin-bottom:0!important;width:calc(100vw - var(--sidebar-width-collapsed))!important;height:100vh!important;overflow:hidden;display:flex!important;flex-direction:row!important;position:relative;padding:0!important;gap:0!important;transition:margin-left .3s,width .3s}.panel-slider{position:relative!important;width:var(--panel-width-static)!important;height:100%!important;background:var(--panel-bg);border-right:1px solid var(--sidebar-border);display:flex!important;flex-direction:column!important;z-index:10;flex-shrink:0!important;box-shadow:none!important}.panel-left{left:auto!important;border-right:1px solid var(--sidebar-border)!important}.panel-right{right:auto!important;left:auto!important;border-left:1px solid var(--sidebar-border)!important;border-right:none!important}.layout-v2 #canvas-wrapper,.content-v2 #canvas-wrapper,#center-area{position:relative!important;flex:1!important;height:100%!important;width:auto!important;z-index:1!important;overflow:hidden!important;background-color:#f0f2f5;margin:0!important;border-radius:0!important;border:none!important}.panel-content-visible{opacity:1!important;width:100%!important;height:100%;overflow-y:auto;padding:20px}.panel-collapsed-icon{display:none!important}@media (max-width: 768px){.sidebar-v2{width:0;transform:translate(-100%)}.content-v2,.layout-v2 .content{margin-left:0;width:100%}.panel-slider{display:none!important}}.panel-right,.panel-left{transition:width .3s cubic-bezier(.4,0,.2,1)!important;position:relative!important;overflow:visible!important}.panel-right.collapsed,.panel-left.collapsed{width:60px!important;min-width:0!important;padding:0!important}.panel-right.collapsed .panel-content-visible,.panel-left.collapsed .panel-content-visible{opacity:0!important;pointer-events:none;display:none!important}.panel-right.collapsed .panel-collapsed-icon,.panel-left.collapsed .panel-collapsed-icon{display:block!important;opacity:1!important;top:50%;left:50%;transform:translate(-50%,-50%);position:absolute;width:100%;text-align:center}.panel-toggle-btn{position:absolute;top:10px;left:10px;width:30px;height:30px;background:#fff;border:1px solid var(--sidebar-border);border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;z-index:20;color:var(--sidebar-color);box-shadow:0 2px 4px #0000000d;transition:transform .3s}.panel-toggle-btn:hover{background:#f8fafc;color:var(--primary)}.panel-right.collapsed .panel-toggle-btn,.panel-left.collapsed .panel-toggle-btn{transform:rotate(180deg)}.panel-left .panel-toggle-btn{left:auto;right:10px}.design-toolbar{margin:0!important;width:100%!important;max-width:none!important;border-radius:0!important;border-top:none!important;border-left:none!important;border-right:none!important;padding:10px 20px!important;box-shadow:0 1px 2px #0000000d!important;background:#fff!important;position:relative!important;left:auto!important;transform:none!important}.design-canvas-wrapper{margin:0!important;border-radius:0!important;height:100%!important;width:100%!important;border:none!important;background-color:#f0f2f5!important}