.dual-screen-container {
    display: flex;
    height: calc(100vh - 64px);
    width: 100%;
    overflow: hidden;
}

.screen {
    flex: 1;
    padding: 2rem;
    overflow-y: auto;
    transition: all 0.3s ease;
}

.left-screen {
    border-right: 1px solid #e5e7eb;
    background-color: #f9fafb;
}

.right-screen {
    background-color: #ffffff;
}

.screen-content {
    max-width: 1200px;
    margin: 0 auto;
}

.preview-area {
    min-height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mockup-device {
    border: 16px solid;
    border-radius: 36px;
    position: relative;
    width: 300px;
    height: 600px;
}

.mockup-screen {
    width: 100%;
    height: 100%;
    border-radius: 20px;
}

@media (max-width: 1024px) {
    .dual-screen-container {
        flex-direction: column;
    }
    
    .screen {
        flex: none;
        height: 50vh;
    }
    
    .left-screen {
        border-right: none;
        border-bottom: 1px solid #e5e7eb;
    }
}